/**
 * HIF DS 2026 — Aplicación GLOBAL a todo el sistema (staff, cliente, cobrador, login, errores).
 * Cargar al final. Alcance: body.hif-app
 */
body.hif-app {
    --hif-primary: #0B4F6C;
    --hif-primary-hover: #094258;
    --hif-secondary: #1B6CA8;
    --hif-success: #16A34A;
    --hif-warning: #D97706;
    --hif-danger: #DC2626;
    --hif-info: #0284C7;
    --hif-bg: #F8FAFC;
    --hif-surface: #FFFFFF;
    --hif-border: #E2E8F0;
    --hif-text: #0F172A;
    --hif-text-secondary: #475569;
    --hif-text-disabled: #94A3B8;
    --hif-navy: #0B4F6C;
    --hif-blue: #1B6CA8;
    --hif-accent: #0B4F6C;
    --hif-accent-dark: #094258;
    --hif-accent-light: #1B6CA8;
    --hif-accent-soft: rgba(11, 79, 108, 0.12);
    --hif-link: #1B6CA8;
    --hif-link-hover: #0B4F6C;
    --bg-page: #F8FAFC;
    --bg-card: #FFFFFF;
    --text-primary: #0F172A;
    --text-secondary: #475569;
    --text-muted: #64748B;
    --border-light: #E2E8F0;
    --border-muted: #E2E8F0;
    --nav-bg: #FFFFFF;
    --nav-text: #0F172A;
    --hif-bg-dark: #0B4F6C;
    --radius: 10px;
    --radius-sm: 8px;
    font-family: var(--hif-font, 'Inter', 'Roboto', sans-serif) !important;
    background: var(--hif-bg) !important;
    color: var(--hif-text) !important;
}

/* —— Sin degradados en botones —— */
body.hif-app .btn-primary,
body.hif-app .btn-hif,
body.hif-app .btn-hif-primary,
body.hif-app .btn-hif-teal,
body.hif-app .hif-btn-gradient {
    background: var(--hif-primary) !important;
    background-image: none !important;
    border: 1px solid var(--hif-primary) !important;
    color: #fff !important;
    border-radius: var(--hif-radius, 10px) !important;
    min-height: 44px;
    font-weight: 600;
    box-shadow: none !important;
}

body.hif-app .btn-primary:hover,
body.hif-app .btn-hif:hover,
body.hif-app .btn-hif-primary:hover,
body.hif-app .btn-hif-teal:hover,
body.hif-app .hif-btn-gradient:hover {
    background: var(--hif-primary-hover) !important;
    border-color: var(--hif-primary-hover) !important;
    color: #fff !important;
}

body.hif-app .btn-outline-primary,
body.hif-app .btn-hif-outline {
    color: var(--hif-primary) !important;
    border: 1px solid var(--hif-border) !important;
    background: var(--hif-surface) !important;
}

body.hif-app .btn-outline-primary:hover {
    background: var(--hif-bg) !important;
    border-color: var(--hif-primary) !important;
    color: var(--hif-primary) !important;
}

body.hif-app .btn-success {
    background: var(--hif-success) !important;
    border-color: var(--hif-success) !important;
}

body.hif-app .btn-danger {
    background: var(--hif-danger) !important;
    border-color: var(--hif-danger) !important;
}

body.hif-app a:not(.btn):not(.nav-link):not(.dropdown-item) {
    color: var(--hif-link);
}

body.hif-app a:not(.btn):not(.nav-link):hover {
    color: var(--hif-link-hover);
}

/* —— Títulos de página (todas las secciones) —— */
body.hif-app .page-title,
body.hif-app .page-header .page-title,
body.hif-app h1.page-title,
body.hif-app .h3.page-title,
body.hif-app .hif-exec-header h1,
body.hif-app .portal-app-main .page-title,
body.hif-app .cliente-main .page-title,
body.hif-app .collector-app-main .page-title {
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    color: var(--hif-text) !important;
    letter-spacing: -0.02em !important;
    text-transform: none !important;
}

body.hif-app .page-header,
body.hif-app .hif-exec-header {
    border-bottom-color: var(--hif-border) !important;
}

body.hif-app .page-header .page-subtitle,
body.hif-app .exec-subtitle,
body.hif-app .text-muted {
    color: var(--hif-text-secondary) !important;
}

/* —— TODAS las tarjetas Bootstrap —— */
body.hif-app .card,
body.hif-app .card.hif-card,
body.hif-app .hif-card,
body.hif-app .hif-card-premium,
body.hif-app .hif-portal-card {
    background: var(--hif-surface) !important;
    border: 1px solid var(--hif-border) !important;
    border-radius: var(--hif-radius, 10px) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    color: var(--hif-text);
}

body.hif-app .card .card-header,
body.hif-app .hif-card .card-header,
body.hif-app .hif-card-premium .card-header {
    background: var(--hif-bg) !important;
    border-bottom: 1px solid var(--hif-border) !important;
    color: var(--hif-text) !important;
    font-weight: 600;
    font-size: 1rem;
}

body.hif-app .card .card-footer,
body.hif-app .hif-card .card-footer {
    background: var(--hif-bg) !important;
    border-top: 1px solid var(--hif-border) !important;
}

/* —— Tablas en todos los módulos —— */
body.hif-app .table,
body.hif-app .table.hif-table,
body.hif-app .hif-table {
    color: var(--hif-text);
    font-size: 0.875rem;
}

body.hif-app .table thead th,
body.hif-app .table.hif-table thead th,
body.hif-app .hif-table thead th {
    background: var(--hif-bg) !important;
    color: var(--hif-text-secondary) !important;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--hif-border) !important;
    white-space: nowrap;
}

body.hif-app .table tbody td {
    border-bottom: 1px solid var(--hif-border);
    vertical-align: middle;
    padding: 0.75rem 1rem;
}

body.hif-app .table tbody tr:hover {
    background: var(--hif-bg);
}

body.hif-app .table-responsive,
body.hif-app .hif-table-wrap {
    border: 1px solid var(--hif-border);
    border-radius: var(--hif-radius-sm, 8px);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* —— Formularios globales —— */
body.hif-app .form-label {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--hif-text);
    margin-bottom: 0.5rem;
}

body.hif-app .form-control,
body.hif-app .form-select,
body.hif-app .form-control.hif-input {
    min-height: 48px !important;
    border-radius: 8px !important;
    border: 1px solid var(--hif-border) !important;
    font-size: 1rem;
    color: var(--hif-text);
    background: var(--hif-surface) !important;
}

body.hif-app .form-control:focus,
body.hif-app .form-select:focus {
    border-color: var(--hif-primary) !important;
    box-shadow: 0 0 0 3px rgba(11, 79, 108, 0.2) !important;
}

body.hif-app .form-control::placeholder {
    color: var(--hif-text-disabled);
}

body.hif-app .input-group-text {
    background: var(--hif-bg);
    border-color: var(--hif-border);
    color: var(--hif-text-secondary);
    min-height: 48px;
}

/* —— Alertas —— */
body.hif-app .alert {
    border-radius: var(--hif-radius-sm, 8px);
    border-width: 1px;
    font-size: 0.875rem;
}

body.hif-app .alert-success {
    background: rgba(22, 163, 74, 0.1);
    border-color: rgba(22, 163, 74, 0.35);
    color: #15803d;
}

body.hif-app .alert-danger {
    background: rgba(220, 38, 38, 0.08);
    border-color: rgba(220, 38, 38, 0.3);
    color: #b91c1c;
}

body.hif-app .alert-warning {
    background: rgba(217, 119, 6, 0.1);
    border-color: rgba(217, 119, 6, 0.35);
    color: #92400e;
}

body.hif-app .alert-info {
    background: rgba(2, 132, 199, 0.1);
    border-color: rgba(2, 132, 199, 0.3);
    color: #0369a1;
}

/* —— Modales y dropdowns —— */
body.hif-app .modal-content {
    border: 1px solid var(--hif-border);
    border-radius: var(--hif-radius, 10px);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}

body.hif-app .modal-header {
    border-bottom-color: var(--hif-border);
    background: var(--hif-bg);
}

body.hif-app .dropdown-menu {
    border: 1px solid var(--hif-border);
    border-radius: var(--hif-radius-sm, 8px);
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
}

body.hif-app .dropdown-item:hover,
body.hif-app .dropdown-item:focus {
    background: var(--hif-bg);
    color: var(--hif-primary);
}

/* —— Breadcrumbs y paginación —— */
body.hif-app .breadcrumb {
    font-size: 0.8125rem;
}

body.hif-app .breadcrumb-item a {
    color: var(--hif-link);
}

body.hif-app .pagination .page-link {
    border-radius: 8px;
    margin: 0 2px;
    color: var(--hif-text);
    border-color: var(--hif-border);
}

body.hif-app .pagination .page-item.active .page-link {
    background: var(--hif-primary);
    border-color: var(--hif-primary);
}

/* —— KPI y dashboard ejecutivo —— */
body.hif-app .hif-kpi-premium,
body.hif-app .hif-kpi-ds {
    border: 1px solid var(--hif-border) !important;
    border-radius: var(--hif-radius, 10px) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    background: var(--hif-surface) !important;
}

body.hif-app .hif-kpi-premium .kpi-value {
    color: var(--hif-text) !important;
}

body.hif-app .hif-kpi-premium .kpi-label {
    color: var(--hif-text-secondary) !important;
}

body.hif-app .hif-filters-bar,
body.hif-app .hif-exec-page .hif-filters-bar {
    background: var(--hif-surface);
    border: 1px solid var(--hif-border);
    border-radius: var(--hif-radius, 10px);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

body.hif-app .hif-section-title {
    color: var(--hif-text) !important;
    border-bottom-color: var(--hif-border) !important;
}

body.hif-app .hif-exec-badge {
    background: rgba(11, 79, 108, 0.1) !important;
    color: var(--hif-primary) !important;
}

/* —— Nav pills / tabs legacy —— */
body.hif-app .nav-pills .nav-link.active,
body.hif-app .nav-tabs .nav-link.active {
    background: var(--hif-primary) !important;
    color: #fff !important;
}

body.hif-app .nav-tabs .nav-link {
    color: var(--hif-text-secondary);
    border-color: var(--hif-border);
}

body.hif-app .nav-tabs .nav-link.active {
    border-color: var(--hif-border) var(--hif-border) var(--hif-surface);
}

/* —— List groups —— */
body.hif-app .list-group-item {
    border-color: var(--hif-border);
    color: var(--hif-text);
}

/* —— Badges Bootstrap —— */
body.hif-app .badge.bg-primary {
    background: var(--hif-primary) !important;
}

/* —— Portal cliente / cobrador (header y tab bar claros) —— */
body.hif-app .hif-portal-header {
    background: var(--hif-surface) !important;
    color: var(--hif-text) !important;
    border-bottom: 1px solid var(--hif-border);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

body.hif-app .hif-portal-header .brand,
body.hif-app .hif-portal-header .brand span,
body.hif-app .hif-portal-header .app-header-back {
    color: var(--hif-text) !important;
}

body.hif-app .hif-portal-header .app-header-back:hover {
    background: var(--hif-bg) !important;
    color: var(--hif-primary) !important;
}

body.hif-app .hif-portal-header .collector-profile-btn {
    background: var(--hif-bg) !important;
    border: 1px solid var(--hif-border) !important;
}

body.hif-app .hif-portal-header .collector-profile-btn span {
    color: var(--hif-text) !important;
}

body.hif-app .hif-portal-header .collector-profile-avatar {
    background: var(--hif-primary) !important;
}

body.hif-app .hif-portal-nav,
body.hif-app .collector-app-nav {
    background: var(--hif-surface) !important;
    border-top: 1px solid var(--hif-border) !important;
    box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.06);
}

body.hif-app .hif-portal-nav a,
body.hif-app .hif-portal-nav .nav-item-btn,
body.hif-app .collector-app-nav a,
body.hif-app .collector-app-nav .nav-item-btn {
    color: var(--hif-text-secondary) !important;
}

body.hif-app .hif-portal-nav a.active,
body.hif-app .hif-portal-nav a:hover,
body.hif-app .collector-app-nav a.active,
body.hif-app .collector-app-nav a:hover {
    color: var(--hif-primary) !important;
}

body.hif-app.cliente-portal-body,
body.hif-app.portal-app-body,
body.hif-app.collector-app-body {
    background: var(--hif-bg) !important;
}

/* —— Login / guest (sin degradado) —— */
body.hif-app.hif-auth-pro .hif-auth-page {
    background: var(--hif-bg) !important;
}

body.hif-app .hif-auth-card {
    border: 1px solid var(--hif-border);
    border-radius: var(--hif-radius, 10px);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

body.hif-app .hif-auth-card__title {
    color: var(--hif-text);
    font-size: 1.5rem;
    font-weight: 700;
}

/* —— Sidebar staff: azul-negro pastel (sin blanco) —— */
body.hif-app.hif-ds-2026 .sidebar.hif-sidebar,
body.hif-app.hif-ds-2026 .sidebar-offcanvas,
body.hif-app.hif-premium .sidebar.hif-sidebar,
body.hif-app.hif-premium .sidebar-offcanvas {
    background: #2A3544 !important;
    border-right: 0 !important;
    box-shadow: none !important;
}

body.hif-app.hif-ds-2026 .navbar-hif,
body.hif-app.hif-premium.hif-ds-2026 .navbar-hif {
    background: #2A3544 !important;
    border-bottom: 0 !important;
}

/* —— Sidebar oscura pastel: texto blanco —— */
body.hif-app.hif-ds-2026 .sidebar.hif-sidebar .nav-link,
body.hif-app.hif-ds-2026 .sidebar-offcanvas .nav-link,
body.hif-app.hif-ds-2026 .hif-sidebar-nav .nav-link,
body.hif-app.hif-ds-2026 .hif-sidebar-nav a {
    color: #FFFFFF !important;
}

body.hif-app.hif-ds-2026 .hif-sidebar-nav .sidebar-section,
body.hif-app.hif-ds-2026 .sidebar.hif-sidebar .sidebar-section,
body.hif-app.hif-ds-2026 .sidebar-offcanvas .sidebar-section,
body.hif-app.hif-ds-2026 .hif-sidebar-nav .hif-sidebar-flow-hint {
    color: rgba(255, 255, 255, 0.55) !important;
}

body.hif-app.hif-ds-2026 .sidebar.hif-sidebar .nav-link:hover,
body.hif-app.hif-ds-2026 .sidebar-offcanvas .nav-link:hover,
body.hif-app.hif-ds-2026 .hif-sidebar-nav .nav-link:hover {
    color: #FFFFFF !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: transparent !important;
}

body.hif-app.hif-ds-2026 .hif-sidebar-nav .nav-link.active,
body.hif-app.hif-ds-2026 .sidebar.hif-sidebar .nav-link.active,
body.hif-app.hif-ds-2026 .sidebar-offcanvas .nav-link.active {
    background: #E6EEF5 !important;
    color: #1C2430 !important;
    box-shadow: none !important;
    border-left: 0 !important;
}

body.hif-app.hif-ds-2026 .hif-sidebar-search__input {
    color: #FFFFFF !important;
}
body.hif-app.hif-ds-2026 .hif-sidebar-search__input::placeholder {
    color: rgba(255, 255, 255, 0.55) !important;
}

body.hif-app.hif-ds-2026 .hif-sidebar-user__name {
    color: #FFFFFF !important;
}

body.hif-app.hif-ds-2026 .hif-sidebar-user__role {
    color: rgba(255, 255, 255, 0.72) !important;
}

/* KPI labels más legibles */
body.hif-app .hif-kpi-premium .kpi-label {
    color: #475569 !important;
}

body.hif-app .hif-kpi-premium .kpi-meta {
    color: #64748b !important;
}

/* Navbar staff oscura: texto blanco */
body.hif-app.hif-ds-2026 .navbar-hif .navbar-text,
body.hif-app.hif-ds-2026 .navbar-hif .navbar-brand {
    color: #FFFFFF !important;
}

body.hif-app.hif-ds-2026 .navbar-hif .navbar-text .opacity-75 {
    opacity: 1 !important;
    color: rgba(255, 255, 255, 0.78) !important;
}

/* —— Progress sin gradiente —— */
body.hif-app .progress-bar {
    background: var(--hif-primary) !important;
    background-image: none !important;
}

body.hif-app .list-group-item.active {
    background: var(--hif-primary);
    border-color: var(--hif-primary);
}

/* —— Offcanvas confirmación —— */
body.hif-app .offcanvas {
    background: var(--hif-surface);
    color: var(--hif-text);
}

/* —— Utilidad: quitar sombras pesadas legacy —— */
body.hif-app .shadow-lg {
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08) !important;
}

/* —— Páginas de error / registro standalone —— */
body.hif-app.hif-error-page,
body.hif-app.hif-register-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: var(--hif-bg) !important;
}

body.hif-app .error-card {
    max-width: 480px;
    width: 100%;
    margin: 0 auto;
}

/* —— Accordion, wells, fieldsets —— */
body.hif-app .accordion-item {
    border-color: var(--hif-border);
    background: var(--hif-surface);
}

body.hif-app .accordion-button {
    background: var(--hif-bg);
    color: var(--hif-text);
    font-weight: 600;
}

body.hif-app .accordion-button:not(.collapsed) {
    background: rgba(11, 79, 108, 0.08);
    color: var(--hif-primary);
}

/* —— Select2 / tom-select si existen —— */
body.hif-app .select2-container--bootstrap-5 .select2-selection {
    min-height: 48px;
    border-color: var(--hif-border) !important;
    border-radius: 8px !important;
}

/* —— Mapas / tracking (sin romper mapas) —— */
body.hif-app .leaflet-container {
    border-radius: var(--hif-radius-sm, 8px);
    border: 1px solid var(--hif-border);
}

/* —— Help manuals —— */
body.hif-app .hif-manual-content {
    color: var(--hif-text);
}

body.hif-app .hif-manual-content h2,
body.hif-app .hif-manual-content h3 {
    color: var(--hif-text);
}

/* —— Dark mode global —— */
html[data-hif-theme="dark"] body.hif-app {
    --hif-bg: #0F172A;
    --hif-surface: #1E293B;
    --hif-border: #334155;
    --hif-text: #F1F5F9;
    --hif-text-secondary: #CBD5E1;
    --bg-page: #0F172A;
    --bg-card: #1E293B;
    --text-primary: #F1F5F9;
    --border-light: #334155;
}

html[data-hif-theme="dark"] body.hif-app .card,
html[data-hif-theme="dark"] body.hif-app .table thead th {
    background: var(--hif-surface) !important;
}