/**
 * HIF UI — azul-negro pastel institucional (legible).
 * Chrome #2A3544 · Acción #4A6B86 · Soft #E6EEF5 · Fondo #F3F6F9
 * Activo del menú: fondo pastel claro + texto oscuro (alto contraste).
 */
body.hif-app {
    --hif-ink: #1C2430;
    --hif-navy: #2A3544;
    --hif-navy-deep: #222B38;
    --hif-blue: #4A6B86;
    --hif-blue-soft: #E6EEF5;
    --hif-blue-mist: #F0F5F9;
    --hif-primary: #4A6B86;
    --hif-primary-hover: #3D5A73;
    --hif-secondary: #5B7C99;
    --hif-accent: #4A6B86;
    --hif-accent-dark: #3D5A73;
    --hif-accent-light: #6B8CAD;
    --hif-accent-soft: rgba(74, 107, 134, 0.14);
    --hif-success: #3D8B6E;
    --hif-success-bg: #EAF6F1;
    --hif-success-border: #C5E6D8;
    --hif-success-text: #1F5C45;
    --hif-warning: #C48A2A;
    --hif-warning-bg: #FBF5E9;
    --hif-warning-border: #EED9A8;
    --hif-warning-text: #7A5614;
    --hif-danger: #C45B5B;
    --hif-danger-bg: #F9EEEE;
    --hif-danger-border: #E8C4C4;
    --hif-danger-text: #8B3030;
    --hif-info: #4A6B86;
    --hif-info-bg: #E6EEF5;
    --hif-info-border: #C5D4E3;
    --hif-info-text: #2A3544;
    --hif-bg: #F3F6F9;
    --hif-surface: #FFFFFF;
    --hif-border: #D7E0EA;
    --hif-text: #1C2430;
    --hif-text-secondary: #5A6A7A;
    --hif-text-disabled: #8FA0B0;
    --hif-link: #3D5A73;
    --hif-link-hover: #2A3544;
    --hif-sidebar-fg: #E8EEF4;
    --hif-sidebar-muted: #A8B5C4;
    --hif-sidebar-active-bg: #E6EEF5;
    --hif-sidebar-active-fg: #1C2430;
    --bg-page: #F3F6F9;
    --bg-card: #FFFFFF;
    --text-primary: #1C2430;
    --text-secondary: #5A6A7A;
    --text-muted: #5A6A7A;
    --border-light: #D7E0EA;
    --border-muted: #C5D0DC;
    --nav-bg: #2A3544;
    --nav-text: #E8EEF4;
    --success-bg: var(--hif-success-bg);
    --success-border: var(--hif-success-border);
    --success-text: var(--hif-success-text);
    --danger-bg: var(--hif-danger-bg);
    --danger-border: var(--hif-danger-border);
    --danger-text: var(--hif-danger-text);
    --warning-bg: var(--hif-warning-bg);
    --warning-border: var(--hif-warning-border);
    --warning-text: var(--hif-warning-text);
    --info-bg: var(--hif-info-bg);
    --info-border: var(--hif-info-border);
    --info-text: var(--hif-info-text);
    --hif-font: 'IBM Plex Sans', 'Segoe UI', sans-serif;
    --hif-font-display: 'IBM Plex Sans', 'Segoe UI', sans-serif;
    --hif-radius: 12px;
    --hif-radius-sm: 10px;
    --hif-shadow: 0 8px 24px rgba(28, 36, 48, 0.07);
    --hif-shadow-sm: 0 2px 8px rgba(28, 36, 48, 0.05);
    --hif-btn-size: 2.5rem;
    font-family: var(--hif-font) !important;
    background: var(--hif-bg) !important;
    color: var(--hif-text) !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.hif-app .page-title,
body.hif-app h1.page-title,
body.hif-app .hif-exec-header h1 {
    font-family: var(--hif-font-display) !important;
    color: var(--hif-ink) !important;
    font-weight: 600 !important;
    letter-spacing: -0.015em;
    font-size: 1.55rem !important;
}

body.hif-app .page-subtitle,
body.hif-app .text-muted {
    color: var(--hif-text-secondary) !important;
    font-weight: 450;
}

/* —— Header —— */
html body.hif-app.hif-ds-2026 .navbar-hif,
html body.hif-app.hif-premium.hif-ds-2026 .navbar-hif,
body.hif-app .navbar-hif {
    background: #2A3544 !important;
    border-bottom: 0 !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 4px 16px rgba(28, 36, 48, 0.12) !important;
}

html body.hif-app.hif-ds-2026 .navbar-hif .navbar-text,
html body.hif-app.hif-ds-2026 .navbar-hif .nav-link,
html body.hif-app.hif-ds-2026 .navbar-hif .btn-link,
body.hif-app .navbar-hif .navbar-text,
body.hif-app .navbar-hif .navbar-brand,
body.hif-app .navbar-hif .nav-link,
body.hif-app .navbar-hif .btn-link {
    color: #FFFFFF !important;
}

body.hif-app .navbar-hif .navbar-text .opacity-75 {
    color: rgba(255, 255, 255, 0.78) !important;
    opacity: 1 !important;
}

/* Campana: nunca fondo blanco + icono blanco (parche invisible) */
html body.hif-app.hif-premium.hif-ds-2026 .hif-notify-btn,
body.hif-app .hif-notify-btn,
body.hif-premium .hif-notify-btn {
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    color: #FFFFFF !important;
    box-shadow: none !important;
}
html body.hif-app.hif-premium.hif-ds-2026 .hif-notify-btn .bi,
body.hif-app .hif-notify-btn .bi,
body.hif-app .hif-notify-btn i {
    color: #FFFFFF !important;
    font-size: 1.15rem;
    line-height: 1;
}
html body.hif-app.hif-premium.hif-ds-2026 .hif-notify-btn:hover,
body.hif-app .hif-notify-btn:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #FFFFFF !important;
}
body.hif-app .hif-notify-btn--active {
    background: rgba(196, 138, 42, 0.28) !important;
    border-color: rgba(196, 138, 42, 0.55) !important;
}
body.hif-app .hif-notify-badge {
    background: #C48A2A !important;
    color: #1C2430 !important;
    border: 2px solid #2A3544;
}

/* Avatar navbar: borde visible sobre chrome oscuro */
html body.hif-app .navbar-user-avatar,
html body.hif-app .navbar-hif .navbar-user-avatar.btn-link {
    position: relative !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    border: 2px solid rgba(255, 255, 255, 0.45) !important;
    background: #4A6B86 !important;
    box-shadow: none !important;
    overflow: hidden !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 0 !important;
}
html body.hif-app .navbar-user-avatar:hover {
    background: #5B7C99 !important;
    border-color: rgba(255, 255, 255, 0.75) !important;
}
html body.hif-app .navbar-user-avatar img,
html body.hif-app .navbar-user-avatar img.rounded-circle {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 50% !important;
    display: block !important;
}
body.hif-app .navbar-user-avatar__initials:not(.d-none) {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 0.8rem;
    font-weight: 700;
    color: #FFFFFF !important;
    letter-spacing: 0.02em;
    background: transparent !important;
}
body.hif-app .navbar-user-avatar__initials.d-none {
    display: none !important;
}

/* —— Sidebar pastel navy —— */
html body.hif-app.hif-ds-2026 .sidebar.hif-sidebar,
html body.hif-app.hif-premium.hif-ds-2026 .sidebar.hif-sidebar,
html body.hif-app.hif-ds-2026 .sidebar-offcanvas.hif-sidebar-offcanvas,
body.hif-premium .sidebar.hif-sidebar,
body.hif-premium .sidebar-offcanvas.hif-sidebar-offcanvas {
    background: #2A3544 !important;
    border-right: 0 !important;
    box-shadow: 4px 0 20px rgba(28, 36, 48, 0.14);
    color: #E8EEF4 !important;
}

/* Relleno interno: nunca blanco (hueco bajo el menú) */
html body.hif-app .hif-sidebar-shell,
html body.hif-app .hif-sidebar-scroll,
html body.hif-app .hif-sidebar-footer,
html body.hif-app .hif-sidebar-brand,
html body.hif-app .sidebar-offcanvas .offcanvas-body,
html body.hif-app .sidebar-offcanvas.offcanvas {
    background: #2A3544 !important;
}

html body.hif-app.hif-ds-2026 .sidebar-offcanvas .offcanvas-header,
body.hif-premium .sidebar-offcanvas .offcanvas-header {
    background: #2A3544 !important;
    border-bottom: 1px solid rgba(232, 238, 244, 0.08) !important;
}

body.hif-app .sidebar-offcanvas .btn-close {
    filter: invert(1) grayscale(1) brightness(1.6);
    opacity: 0.75;
}

body.hif-app .hif-sidebar-brand {
    border-bottom: 1px solid rgba(232, 238, 244, 0.08);
}

body.hif-app .hif-sidebar-search__input,
body.hif-premium .hif-sidebar-search__input {
    background: rgba(232, 238, 244, 0.08) !important;
    border: 1px solid rgba(232, 238, 244, 0.14) !important;
    color: #E8EEF4 !important;
}
body.hif-app .hif-sidebar-search__input::placeholder {
    color: #A8B5C4 !important;
}
body.hif-app .hif-sidebar-search__wrap > .bi-search {
    color: #A8B5C4 !important;
}

html body.hif-app.hif-ds-2026 .hif-sidebar-nav .sidebar-section,
body.hif-premium .hif-sidebar-nav .sidebar-section {
    color: rgba(255, 255, 255, 0.55) !important;
}

/* Enlaces del menú: blanco puro sobre fondo oscuro */
html body.hif-app.hif-ds-2026 .hif-sidebar-nav .nav-link,
html body.hif-app.hif-ds-2026 .hif-sidebar-nav .nav-link span,
html body.hif-app.hif-ds-2026 .hif-sidebar-nav .nav-link i.bi,
body.hif-premium .hif-sidebar-nav .nav-link,
body.hif-premium .hif-sidebar-nav .nav-link i.bi,
body.hif-app .hif-sidebar-nav .nav-link,
body.hif-app .hif-sidebar-nav .nav-link span,
body.hif-app .hif-sidebar-nav .nav-link i.bi {
    color: #FFFFFF !important;
    border-left: 0 !important;
    border-radius: 10px !important;
    font-weight: 500;
}

html body.hif-app.hif-ds-2026 .hif-sidebar-nav .nav-link:hover,
body.hif-premium .hif-sidebar-nav .nav-link:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #FFFFFF !important;
}
html body.hif-app.hif-ds-2026 .hif-sidebar-nav .nav-link:hover i.bi,
body.hif-premium .hif-sidebar-nav .nav-link:hover i.bi {
    color: #FFFFFF !important;
}

/* Scroll del menú: usable pero sin barra visible (evita scrollbars horribles) */
html body.hif-app .hif-sidebar-scroll,
body.hif-premium .hif-sidebar-scroll,
body.hif-app .sidebar.hif-sidebar,
body.hif-app .sidebar-offcanvas .offcanvas-body {
    overflow-x: hidden !important;
}
html body.hif-app .hif-sidebar-scroll,
body.hif-premium .hif-sidebar-scroll {
    overflow-y: auto !important;
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE/Edge legacy */
}
html body.hif-app .hif-sidebar-scroll::-webkit-scrollbar,
body.hif-premium .hif-sidebar-scroll::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
    background: transparent !important;
}
body.hif-app .hif-sidebar-nav,
body.hif-premium .hif-sidebar-nav {
    max-width: 100%;
    overflow-x: hidden !important;
}
body.hif-app .hif-sidebar-nav .nav-link {
    white-space: normal;
    word-break: break-word;
    max-width: 100%;
}

/* Activo: pastel claro + texto oscuro (legible) — gana a reglas de blanco */
html body.hif-app.hif-ds-2026 .hif-sidebar-nav .nav-link.active,
html body.hif-app.hif-ds-2026 .hif-sidebar-nav .nav-link.active span,
html body.hif-app.hif-ds-2026 .hif-sidebar-nav a.nav-link.active,
body.hif-premium .hif-sidebar-nav .nav-link.active,
body.hif-app .hif-sidebar-nav .nav-link.active,
body.hif-app .hif-sidebar-nav .nav-link.active span {
    background: #E6EEF5 !important;
    color: #1C2430 !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}
html body.hif-app.hif-ds-2026 .hif-sidebar-nav .nav-link.active i.bi,
body.hif-premium .hif-sidebar-nav .nav-link.active i.bi,
body.hif-app .hif-sidebar-nav .nav-link.active i.bi {
    color: #3D5A73 !important;
}

body.hif-app .hif-sidebar-footer,
body.hif-premium .hif-sidebar-footer {
    background: rgba(0, 0, 0, 0.16) !important;
    border-top: 1px solid rgba(232, 238, 244, 0.08) !important;
}
body.hif-app .hif-sidebar-user,
body.hif-app .hif-sidebar-user__name,
body.hif-app .hif-sidebar-theme {
    color: #FFFFFF !important;
}
body.hif-app .hif-sidebar-user__role,
body.hif-app .hif-sidebar-user__chevron,
body.hif-app .hif-sidebar-flow-hint {
    color: rgba(255, 255, 255, 0.72) !important;
}
body.hif-app .hif-sidebar-user:hover {
    background: rgba(230, 238, 245, 0.08) !important;
}
body.hif-app .hif-sidebar-logout-btn {
    background: transparent !important;
    border: 1px solid rgba(196, 91, 91, 0.55) !important;
    color: #E8B4B4 !important;
}
body.hif-app .hif-sidebar-logout-btn:hover {
    background: rgba(196, 91, 91, 0.14) !important;
    color: #fff !important;
}

/* —— Botones pastel navy —— */
body.hif-app .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border-radius: 10px !important;
    font-weight: 600;
    font-family: var(--hif-font) !important;
    min-height: 2.5rem;
    padding: 0.45rem 0.95rem;
    box-shadow: none !important;
    letter-spacing: 0.01em;
}
body.hif-app .btn .bi { font-size: 1.05em; line-height: 1; }

body.hif-app .btn-primary,
body.hif-app .btn-hif,
body.hif-app .btn-hif-primary,
body.hif-app .btn-primary:hover,
body.hif-app .btn-primary:focus,
body.hif-app .btn-primary:active {
    background: #4A6B86 !important;
    border-color: #4A6B86 !important;
    color: #FFFFFF !important;
}
body.hif-app .btn-primary:hover,
body.hif-app .btn-primary:focus {
    background: #3D5A73 !important;
    border-color: #3D5A73 !important;
}

body.hif-app .btn-success,
body.hif-app .btn-success:hover {
    background: #3D8B6E !important;
    border-color: #3D8B6E !important;
    color: #fff !important;
}
body.hif-app .btn-danger,
body.hif-app .btn-danger:hover {
    background: #C45B5B !important;
    border-color: #C45B5B !important;
    color: #fff !important;
}
body.hif-app .btn-warning,
body.hif-app .btn-warning:hover {
    background: #C48A2A !important;
    border-color: #C48A2A !important;
    color: #fff !important;
}
body.hif-app .btn-info,
body.hif-app .btn-info:hover,
body.hif-app .btn-dark,
body.hif-app .btn-dark:hover {
    background: #2A3544 !important;
    border-color: #2A3544 !important;
    color: #fff !important;
}
body.hif-app .btn-secondary,
body.hif-app .btn-secondary:hover {
    background: #E6EEF5 !important;
    border-color: #C5D4E3 !important;
    color: #1C2430 !important;
}

body.hif-app .btn-outline-primary {
    background: #fff !important;
    color: #3D5A73 !important;
    border-color: #A8BFD0 !important;
}
body.hif-app .btn-outline-primary:hover {
    background: #E6EEF5 !important;
    color: #1C2430 !important;
    border-color: #4A6B86 !important;
}
body.hif-app .btn-outline-secondary {
    background: #fff !important;
    color: #5A6A7A !important;
    border-color: #D7E0EA !important;
}
body.hif-app .btn-outline-secondary:hover {
    background: #F0F5F9 !important;
    color: #1C2430 !important;
}
body.hif-app .btn-outline-danger {
    background: #fff !important;
    color: #C45B5B !important;
    border-color: #E0B0B0 !important;
}
body.hif-app .btn-outline-danger:hover {
    background: #F9EEEE !important;
    color: #8B3030 !important;
}
body.hif-app .btn-outline-success {
    background: #fff !important;
    color: #3D8B6E !important;
    border-color: #A8D4C2 !important;
}

body.hif-app .btn.btn-icon,
body.hif-app .btn.hif-btn-icon {
    width: var(--hif-btn-size);
    min-width: var(--hif-btn-size);
    height: var(--hif-btn-size);
    min-height: var(--hif-btn-size);
    padding: 0 !important;
    border-radius: 11px !important;
}
body.hif-app .btn.btn-icon .bi,
body.hif-app .btn.hif-btn-icon .bi {
    margin: 0 !important;
    font-size: 1.15rem;
}
body.hif-app .btn.btn-icon .hif-btn-label,
body.hif-app .btn.hif-btn-icon .hif-btn-label,
body.hif-app .btn.btn-icon .visually-hidden,
body.hif-app .btn.hif-btn-icon .visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
body.hif-app .btn-sm.btn-icon { --hif-btn-size: 2.15rem; }

/* —— Formularios —— */
body.hif-app .form-control,
body.hif-app .form-select,
body.hif-app .input-group-text {
    border-radius: 10px !important;
    border-color: #D7E0EA !important;
    min-height: 42px;
    color: #1C2430 !important;
    background: #fff !important;
    font-family: var(--hif-font) !important;
}
body.hif-app .form-control:focus,
body.hif-app .form-select:focus {
    border-color: #4A6B86 !important;
    box-shadow: 0 0 0 0.2rem rgba(74, 107, 134, 0.18) !important;
}
body.hif-app .form-label {
    color: #1C2430 !important;
    font-weight: 600;
    font-size: 0.875rem;
}
body.hif-app .form-control:disabled,
body.hif-app .form-control[readonly],
body.hif-app .form-select:disabled {
    background: #F0F5F9 !important;
    color: #5A6A7A !important;
}
body.hif-app .form-check-input:checked {
    background-color: #4A6B86 !important;
    border-color: #4A6B86 !important;
}

/* —— Dropdowns: fondo claro + texto oscuro (sin blanco sobre azul) —— */
body.hif-app .dropdown-menu,
body.hif-app .dropdown-menu.dropdown-menu-dark,
body.hif-app .sidebar .dropdown-menu,
body.hif-app .sidebar-offcanvas .dropdown-menu,
body.hif-app .navbar-hif .dropdown-menu {
    background: #F7FAFC !important;
    border: 1px solid #D7E0EA !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 28px rgba(28, 36, 48, 0.14) !important;
    padding: 0.45rem !important;
    --bs-dropdown-bg: #F7FAFC;
    --bs-dropdown-color: #1C2430;
    --bs-dropdown-link-color: #1C2430;
    --bs-dropdown-link-hover-bg: #E6EEF5;
    --bs-dropdown-link-hover-color: #1C2430;
    --bs-dropdown-link-active-bg: #4A6B86;
    --bs-dropdown-link-active-color: #fff;
}
body.hif-app .dropdown-item,
body.hif-app .dropdown-menu-dark .dropdown-item,
body.hif-app .sidebar .dropdown-item,
body.hif-app .sidebar-offcanvas .dropdown-item,
body.hif-app .navbar-hif .dropdown-item {
    border-radius: 8px;
    color: #1C2430 !important;
    font-weight: 500;
    padding: 0.55rem 0.75rem;
    background: transparent !important;
}
body.hif-app .dropdown-item:hover,
body.hif-app .dropdown-item:focus,
body.hif-app .dropdown-menu-dark .dropdown-item:hover,
body.hif-app .dropdown-menu-dark .dropdown-item:focus,
body.hif-app .sidebar .dropdown-item:hover,
body.hif-app .sidebar-offcanvas .dropdown-item:hover {
    background: #E6EEF5 !important;
    color: #1C2430 !important;
}
body.hif-app .dropdown-item.active,
body.hif-app .dropdown-item:active,
body.hif-app .dropdown-menu-dark .dropdown-item.active,
body.hif-app .dropdown-menu-dark .dropdown-item:active {
    background: #4A6B86 !important;
    color: #FFFFFF !important;
}
body.hif-app .dropdown-divider {
    border-color: #D7E0EA !important;
    opacity: 1;
}
body.hif-app .dropdown-item .bi,
body.hif-app .dropdown-menu-dark .dropdown-item .bi {
    color: #4A6B86 !important;
}
body.hif-app .dropdown-item:active .bi,
body.hif-app .dropdown-item.active .bi {
    color: #FFFFFF !important;
}

/* —— Cards / tablas —— */
body.hif-app .card {
    background: #fff !important;
    border: 1px solid #D7E0EA !important;
    border-radius: 14px !important;
    box-shadow: var(--hif-shadow-sm);
}
body.hif-app .card-header {
    background: #F7FAFC !important;
    border-bottom: 1px solid #D7E0EA !important;
    color: #1C2430 !important;
    font-weight: 600;
}
body.hif-app .table thead th {
    background: #E6EEF5 !important;
    color: #1C2430 !important;
    border-bottom-color: #D7E0EA !important;
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* —— Alertas —— */
body.hif-app .alert {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    border-radius: 12px !important;
    border-width: 1px !important;
    border-left-width: 4px !important;
    padding: 0.85rem 1rem !important;
    font-size: 0.9rem;
    line-height: 1.45;
}
body.hif-app .alert::before {
    font-family: 'bootstrap-icons' !important;
    font-size: 1.1rem;
    flex-shrink: 0;
}
body.hif-app .alert .bi:first-child { display: none; }

body.hif-app .alert-success {
    background: #EAF6F1 !important;
    border-color: #C5E6D8 !important;
    border-left-color: #3D8B6E !important;
    color: #1F5C45 !important;
}
body.hif-app .alert-success::before { content: '\f26b'; color: #3D8B6E; }

body.hif-app .alert-danger {
    background: #F9EEEE !important;
    border-color: #E8C4C4 !important;
    border-left-color: #C45B5B !important;
    color: #8B3030 !important;
}
body.hif-app .alert-danger::before { content: '\f33b'; color: #C45B5B; }

body.hif-app .alert-warning {
    background: #FBF5E9 !important;
    border-color: #EED9A8 !important;
    border-left-color: #C48A2A !important;
    color: #7A5614 !important;
}
body.hif-app .alert-warning::before { content: '\f33a'; color: #C48A2A; }

body.hif-app .alert-info,
body.hif-app .alert-secondary,
body.hif-app .alert-light {
    background: #E6EEF5 !important;
    border-color: #C5D4E3 !important;
    border-left-color: #4A6B86 !important;
    color: #2A3544 !important;
}
body.hif-app .alert-info::before,
body.hif-app .alert-secondary::before,
body.hif-app .alert-light::before { content: '\f431'; color: #4A6B86; }

body.hif-app .alert-link {
    font-weight: 700;
    color: inherit !important;
    text-decoration: underline;
}

/* —— Modales sistema —— */
body.hif-app .hif-notification-modal .modal-content,
body.hif-app .hif-confirm-modal .modal-content {
    border: 0 !important;
    border-radius: 14px !important;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(28, 36, 48, 0.16) !important;
    background: #fff !important;
}
body.hif-app .hif-notification-modal .modal-header,
body.hif-app .hif-confirm-modal .modal-header {
    background: #2A3544 !important;
    border-bottom: 0 !important;
    color: #E8EEF4 !important;
}
body.hif-app .hif-notification-modal .modal-title,
body.hif-app .hif-confirm-modal .modal-title,
body.hif-app .hif-notification-modal .modal-header *,
body.hif-app .hif-confirm-modal .modal-header * {
    color: #E8EEF4 !important;
}
body.hif-app .hif-notification-modal .btn-close,
body.hif-app .hif-confirm-modal .btn-close {
    filter: invert(1) grayscale(1) brightness(1.6);
}
body.hif-app .hif-notification-modal .modal-body,
body.hif-app .hif-confirm-modal .modal-body {
    background: #fff !important;
    color: #1C2430 !important;
}
body.hif-app .hif-notification-modal .modal-footer,
body.hif-app .hif-confirm-modal .modal-footer {
    background: #F3F6F9 !important;
    border-top: 1px solid #D7E0EA !important;
}

body.hif-app .hif-notification-modal__item {
    display: flex;
    gap: 0.85rem;
    padding: 0.9rem 1rem !important;
    border-radius: 12px !important;
    border: 1px solid transparent !important;
}
body.hif-app .hif-notification-modal__icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
body.hif-app .hif-notification-modal__item--success { background: #EAF6F1 !important; border-color: #C5E6D8 !important; }
body.hif-app .hif-notification-modal__item--success .hif-notification-modal__icon { background: rgba(61,139,110,.15); color: #3D8B6E !important; }
body.hif-app .hif-notification-modal__item--success .hif-notification-modal__text,
body.hif-app .hif-notification-modal__item--success .hif-notification-modal__text * { color: #1F5C45 !important; background: transparent !important; }

body.hif-app .hif-notification-modal__item--error { background: #F9EEEE !important; border-color: #E8C4C4 !important; }
body.hif-app .hif-notification-modal__item--error .hif-notification-modal__icon { background: rgba(196,91,91,.12); color: #C45B5B !important; }
body.hif-app .hif-notification-modal__item--error .hif-notification-modal__text,
body.hif-app .hif-notification-modal__item--error .hif-notification-modal__text * { color: #8B3030 !important; background: transparent !important; }

body.hif-app .hif-notification-modal__item--warning { background: #FBF5E9 !important; border-color: #EED9A8 !important; }
body.hif-app .hif-notification-modal__item--warning .hif-notification-modal__icon { background: rgba(196,138,42,.12); color: #C48A2A !important; }
body.hif-app .hif-notification-modal__item--warning .hif-notification-modal__text,
body.hif-app .hif-notification-modal__item--warning .hif-notification-modal__text * { color: #7A5614 !important; background: transparent !important; }

body.hif-app .hif-notification-modal__item--info { background: #E6EEF5 !important; border-color: #C5D4E3 !important; }
body.hif-app .hif-notification-modal__item--info .hif-notification-modal__icon { background: rgba(74,107,134,.12); color: #4A6B86 !important; }
body.hif-app .hif-notification-modal__item--info .hif-notification-modal__text,
body.hif-app .hif-notification-modal__item--info .hif-notification-modal__text * { color: #2A3544 !important; background: transparent !important; }

/* —— Badges —— */
body.hif-app .badge { border-radius: 999px !important; font-weight: 600; }
body.hif-app .badge.bg-primary { background: #E6EEF5 !important; color: #2A3544 !important; }
body.hif-app .badge.bg-success { background: #EAF6F1 !important; color: #1F5C45 !important; }
body.hif-app .badge.bg-danger { background: #F9EEEE !important; color: #8B3030 !important; }
body.hif-app .badge.bg-warning { background: #FBF5E9 !important; color: #7A5614 !important; }
body.hif-app .badge.bg-info { background: #E6EEF5 !important; color: #2A3544 !important; }
body.hif-app .badge.bg-dark { background: #2A3544 !important; color: #E8EEF4 !important; }

/* —— Tabs / pagination / breadcrumb —— */
body.hif-app .nav-tabs .nav-link { color: #5A6A7A; border: 0; border-bottom: 2px solid transparent; font-weight: 600; }
body.hif-app .nav-tabs .nav-link.active { color: #3D5A73 !important; background: transparent !important; border-bottom-color: #4A6B86 !important; }
body.hif-app .pagination .page-link { border-radius: 8px !important; margin: 0 2px; border-color: #D7E0EA !important; color: #3D5A73 !important; }
body.hif-app .pagination .page-item.active .page-link { background: #4A6B86 !important; border-color: #4A6B86 !important; color: #fff !important; }
body.hif-app .breadcrumb-item,
body.hif-app .breadcrumb-item a { color: #5A6A7A !important; }
body.hif-app .breadcrumb-item.active { color: #1C2430 !important; font-weight: 600; }

/* —— Mobile nav —— */
body.hif-app .hif-mobile-nav { background: #fff !important; border-top: 1px solid #D7E0EA !important; }
body.hif-app .hif-mobile-nav__item { color: #5A6A7A !important; }
body.hif-app .hif-mobile-nav__item.active,
body.hif-app .hif-mobile-nav__item.active .bi { color: #3D5A73 !important; }

/* —— Portal —— */
body.hif-app .hif-portal-header { background: #2A3544 !important; color: #E8EEF4 !important; }
body.hif-app .hif-portal-header .brand,
body.hif-app .hif-portal-header .brand span,
body.hif-app .hif-portal-header .app-header-back,
body.hif-app .hif-portal-header .text-white { color: #E8EEF4 !important; }
body.hif-app .hif-portal-header .app-header-btn {
    background: rgba(230, 238, 245, 0.12) !important;
    border: 1px solid rgba(230, 238, 245, 0.18) !important;
    color: #E8EEF4 !important;
    border-radius: 999px !important;
}
body.hif-app .hif-portal-nav { background: #fff !important; border-top: 1px solid #D7E0EA !important; }
body.hif-app .hif-portal-nav a.active,
body.hif-app .hif-portal-nav .active { color: #3D5A73 !important; }

/* —— Auth —— */
body.hif-app.hif-guest-body,
body.hif-app.hif-auth-pro .hif-auth-page { background: #F3F6F9 !important; }
body.hif-app .hif-auth-card,
body.hif-app .hif-guest-card {
    background: #fff !important;
    border: 1px solid #D7E0EA !important;
    border-radius: 14px !important;
    box-shadow: var(--hif-shadow) !important;
}
body.hif-app .hif-auth-card__title { color: #1C2430 !important; font-weight: 600 !important; }

/* —— Wizard crédito —— */
html body.hif-app .credit-request-wizard-page .page-title { color: #1C2430 !important; font-weight: 600 !important; }
html body.hif-app .credit-request-wizard-page > .card {
    border: 1px solid #D7E0EA !important;
    border-radius: 14px !important;
    box-shadow: var(--hif-shadow-sm) !important;
}
html body.hif-app .credit-request-wizard-page .btn-warning {
    background: #4A6B86 !important;
    border-color: #4A6B86 !important;
    color: #fff !important;
}
html body.hif-app .credit-request-wizard-page .cr-field-group-title {
    background: #E6EEF5 !important;
    color: #1C2430 !important;
    border-left-color: #4A6B86 !important;
}
html body.hif-app .credit-request-wizard-page .cr-wizard-pills .badge.active-step {
    background: #4A6B86 !important;
    color: #fff !important;
}
html body.hif-app .credit-request-wizard-page .cr-wizard-pills .badge.bg-light {
    background: #E6EEF5 !important;
    color: #5A6A7A !important;
    border-color: #C5D4E3 !important;
}

/* —— Tipografía global —— */
body.hif-app,
body.hif-app .btn,
body.hif-app .form-control,
body.hif-app .form-select,
body.hif-app .nav-link,
body.hif-app .dropdown-item,
body.hif-app .table {
    font-family: 'IBM Plex Sans', 'Segoe UI', sans-serif !important;
}

/* Cámara: no interferir */
body.hif-app #hifCameraCaptureModal .btn-outline-light {
    color: #fff !important;
    border-color: rgba(255,255,255,.55) !important;
    background: transparent !important;
}
body.hif-app #hifCameraCaptureModal .btn-primary { color: #fff !important; }

/* —— Notificaciones / paneles / iconos —— */
body.hif-app .hif-notify-menu {
    background: #F7FAFC !important;
    border: 1px solid #D7E0EA !important;
    border-radius: 12px !important;
    box-shadow: 0 14px 32px rgba(28, 36, 48, 0.14) !important;
    overflow-x: hidden !important;
}
body.hif-app .hif-notify-menu .dropdown-header {
    color: #1C2430 !important;
    font-weight: 600;
    background: #E6EEF5 !important;
    border-bottom: 1px solid #D7E0EA !important;
}
body.hif-app .hif-notify-item__icon {
    color: #4A6B86 !important;
}
body.hif-app .hif-notify-item__title {
    color: #1C2430 !important;
}
body.hif-app .hif-notify-item__msg,
body.hif-app #hif-notify-empty {
    color: #5A6A7A !important;
}
body.hif-app .hif-notify-item__link:hover {
    background: #E6EEF5 !important;
}

/* Paneles / headers de sección: fondo pastel + texto oscuro (legible) */
body.hif-app .card-header.bg-primary,
body.hif-app .card-header.bg-dark,
body.hif-app .card-header.bg-info,
body.hif-app .bg-primary.text-white,
body.hif-app .list-group-item.active {
    background: #4A6B86 !important;
    border-color: #4A6B86 !important;
    color: #FFFFFF !important;
}
body.hif-app .card-header.bg-primary *,
body.hif-app .card-header.bg-dark *,
body.hif-app .list-group-item.active * {
    color: #FFFFFF !important;
}

/* Iconos de acción en formularios / toolbars */
body.hif-app .btn-outline-primary {
    color: #3D5A73 !important;
    border-color: #4A6B86 !important;
}
body.hif-app .btn-outline-primary:hover {
    background: #4A6B86 !important;
    color: #fff !important;
}
body.hif-app .text-primary { color: #3D5A73 !important; }
body.hif-app .text-info { color: #4A6B86 !important; }
body.hif-app .text-success { color: #3D8B6E !important; }
body.hif-app .text-warning { color: #C48A2A !important; }
body.hif-app .text-danger { color: #C45B5B !important; }

/* Iconos circulares del wizard (herramientas) */
body.hif-app .credit-request-wizard-page .btn.rounded-circle,
body.hif-app .credit-request-wizard-page .cr-tool-btn {
    background: #E6EEF5 !important;
    color: #2A3544 !important;
    border-color: #C5D4E3 !important;
}
body.hif-app .credit-request-wizard-page .btn.rounded-circle:hover,
body.hif-app .credit-request-wizard-page .cr-tool-btn:hover {
    background: #D5E3EF !important;
    color: #1C2430 !important;
}
body.hif-app .credit-request-wizard-page .btn.rounded-circle.active,
body.hif-app .credit-request-wizard-page .btn.rounded-circle.btn-primary {
    background: #4A6B86 !important;
    color: #FFFFFF !important;
    border-color: #4A6B86 !important;
}

/* Scroll: fluido + sin barra visible */
html body.hif-app,
html body.hif-app .main-content,
html body.hif-app .content-wrapper,
html body.hif-app .hif-sidebar-scroll,
html body.hif-app .sidebar.hif-sidebar,
html body.hif-app .sidebar-offcanvas,
html body.hif-app .sidebar-offcanvas .offcanvas-body,
html body.hif-app .modal-body,
html body.hif-app .table-responsive,
html body.hif-app .hif-table-wrap {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    scrollbar-gutter: auto !important;
}
html body.hif-app *::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
    background: transparent !important;
}

@media (max-width: 991.98px) {
    html body.hif-app,
    html.hif-panel-html {
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-y: auto !important;
    }
    html body.hif-app .main-content,
    html body.hif-app .content-wrapper,
    html body.hif-app .layout-body {
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
        -webkit-overflow-scrolling: touch !important;
    }
    html body.hif-app .table-responsive,
    html body.hif-app .hif-table-wrap,
    html body.hif-app .modal-body,
    html body.hif-app .hif-sidebar-scroll,
    html body.hif-app .offcanvas-body {
        -webkit-overflow-scrolling: touch !important;
    }
    html body.hif-app .hif-sidebar-scroll,
    html body.hif-app .offcanvas-body,
    html body.hif-app .modal-body {
        overscroll-behavior: contain;
    }
    html body.hif-app .table-responsive,
    html body.hif-app .hif-table-wrap {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        max-height: min(55vh, 420px) !important;
        overflow-x: auto !important;
        overflow-y: auto !important;
        touch-action: pan-x pan-y !important;
        overscroll-behavior-x: contain !important;
        overscroll-behavior-y: auto !important;
    }
    html body.hif-app .main-content,
    html body.hif-app .content-wrapper,
    html body.hif-app .hif-sidebar-scroll,
    html body.hif-app .sidebar.hif-sidebar,
    html body.hif-app .sidebar-offcanvas,
    html body.hif-app .modal-body {
        scrollbar-gutter: auto !important;
    }
}

/* Avatar navbar: círculo limpio; foto centrada y legible */
html body.hif-app .navbar-user-avatar,
html body.hif-app .navbar-hif .navbar-user-avatar.btn-link {
    position: relative !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50% !important;
    border: 2px solid rgba(255, 255, 255, 0.45) !important;
    background: #4A6B86 !important;
    box-shadow: none !important;
    overflow: hidden !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 0 !important;
}
html body.hif-app .navbar-user-avatar:hover,
html body.hif-app .navbar-hif .navbar-user-avatar.btn-link:hover {
    background: #5B7C99 !important;
    border-color: rgba(255, 255, 255, 0.75) !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12) !important;
}
html body.hif-app .navbar-user-avatar img,
html body.hif-app .navbar-hif .navbar-user-avatar img,
html body.hif-app .navbar-user-avatar img.rounded-circle {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 50% !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: #2A3544 !important;
}
html body.hif-app .navbar-user-avatar__initials {
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 0.8rem;
    font-weight: 700;
    color: #FFFFFF !important;
    line-height: 1;
    background: transparent !important;
    z-index: 1;
}
html body.hif-app .navbar-user-avatar__initials:not(.d-none) {
    display: inline-flex !important;
}
html body.hif-app .navbar-user-avatar__initials.d-none {
    display: none !important;
}

/* Footer sidebar: logout justo después del menú (sin vacío enorme) */
html body.hif-app .hif-sidebar-footer {
    background: transparent !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 10px 12px 16px !important;
    margin-top: 0.25rem !important;
}
html body.hif-app .hif-sidebar-logout-btn {
    border: 1px solid rgba(232, 180, 180, 0.45) !important;
    background: transparent !important;
    color: #F0C8C8 !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
    font-weight: 600 !important;
    transition: background 0.15s ease, color 0.15s ease;
}
html body.hif-app .hif-sidebar-logout-btn:hover {
    background: rgba(196, 91, 91, 0.22) !important;
    color: #FFFFFF !important;
}

/* Logo / header */
html body.hif-app .navbar-hif .container-fluid {
    align-items: center !important;
}
html body.hif-app .navbar-hif .navbar-brand {
    display: inline-flex !important;
    align-items: center !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
}
html body.hif-app .navbar-hif .navbar-brand .navbar-logo,
html body.hif-app .navbar-hif .navbar-brand img {
    height: 40px !important;
    max-height: 40px !important;
    width: auto !important;
    max-width: 200px !important;
    object-fit: contain !important;
    object-position: left center !important;
    display: block !important;
    margin: 0 !important;
}
html body.hif-app .navbar-hif .navbar-text {
    align-items: center !important;
    line-height: 1.25 !important;
    margin: 0 !important;
}
/* Nombre del usuario: solo escritorio (no anular .d-none de Bootstrap en móvil) */
@media (min-width: 992px) {
    html body.hif-app .navbar-hif .navbar-text {
        display: inline-flex !important;
    }
}
@media (max-width: 991.98px) {
    html body.hif-app .navbar-hif .navbar-text,
    html body.hif-app .navbar-hif .navbar-text.d-none,
    html body.hif-app .navbar-hif .navbar-text.d-lg-inline,
    html body.hif-app .navbar-hif .navbar-text.d-lg-inline-flex {
        display: none !important;
    }
}

/* Móvil: sin logo/nombre en el encabezado (solo menú + avatar; marca en offcanvas) */
@media (max-width: 991.98px) {
    html body.hif-app .navbar-hif .container-fluid {
        flex-wrap: nowrap !important;
        gap: 0.5rem !important;
        padding-left: 0.65rem !important;
        padding-right: 0.65rem !important;
    }
    html body.hif-app .navbar-hif > .container-fluid > .btn-link {
        flex: 0 0 auto !important;
        margin-right: 0 !important;
        padding: 0.25rem !important;
        line-height: 1 !important;
    }
    html body.hif-app .navbar-hif .navbar-brand {
        display: none !important;
    }
    html body.hif-app .navbar-hif #navbarNav.navbar-collapse-mobile-show {
        display: flex !important;
        flex: 1 1 auto !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        justify-content: flex-end !important;
    }
    html body.hif-app .navbar-hif .navbar-user-block-mobile-hide {
        display: flex !important;
        align-items: center !important;
        gap: 0.35rem !important;
        margin-left: auto !important;
        flex: 0 0 auto !important;
    }
    html body.hif-app .navbar-hif .navbar-text {
        display: none !important;
    }
    html body.hif-app .navbar-hif .navbar-user-avatar,
    html body.hif-app .navbar-hif .navbar-user-avatar.btn-link {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
    }
}

/* Offcanvas móvil: logo legible y alineado con la X */
@media (max-width: 991.98px) {
    html body.hif-app .sidebar-offcanvas .offcanvas-header {
        min-height: 64px !important;
        padding: 0.85rem 1rem !important;
        gap: 0.75rem !important;
        align-items: center !important;
    }
    html body.hif-app .sidebar-offcanvas .offcanvas-title {
        display: flex !important;
        align-items: center !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }
    html body.hif-app .sidebar-offcanvas .hif-offcanvas-logo,
    html body.hif-app .sidebar-offcanvas .offcanvas-title img {
        height: 40px !important;
        max-height: 40px !important;
        width: auto !important;
        max-width: min(240px, calc(100vw - 5.5rem)) !important;
        object-fit: contain !important;
        object-position: left center !important;
        display: block !important;
        margin: 0 !important;
    }
    html body.hif-app .sidebar-offcanvas .btn-close {
        flex: 0 0 auto !important;
        margin: 0 !important;
        padding: 0.5rem !important;
    }
}

/* Escritorio: sidebar a viewport completo (anula max-height corto de hif-app) */
@media (min-width: 992px) {
    html body.hif-app.hif-premium .sidebar.hif-sidebar,
    html body.hif-app .sidebar.hif-sidebar {
        top: 0 !important;
        bottom: 0 !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: none !important;
        padding-top: var(--header-height, 60px) !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        background: #2A3544 !important;
        overflow: hidden !important;
    }
    html body.hif-app .sidebar.hif-sidebar .hif-sidebar-shell,
    html body.hif-app .sidebar.hif-sidebar .hif-sidebar-scroll,
    html body.hif-app .sidebar.hif-sidebar .hif-sidebar-footer {
        background: #2A3544 !important;
    }
    html body.hif-app .sidebar.hif-sidebar .hif-sidebar-shell {
        height: 100% !important;
        min-height: 0 !important;
        flex: 1 1 auto !important;
    }
    html body.hif-app .hif-sidebar-brand {
        min-height: 56px !important;
        padding: 10px 16px !important;
        display: flex !important;
        align-items: center !important;
    }
    html body.hif-app .hif-sidebar-brand__logo,
    html body.hif-app .hif-sidebar-brand .hif-institution-logo {
        height: 40px !important;
        max-height: 40px !important;
        width: auto !important;
        object-fit: contain !important;
        object-position: left center !important;
        display: block !important;
    }
}

/* Offcanvas (base): un solo logo, alineado con la X */
html body.hif-app .sidebar-offcanvas .offcanvas-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 56px !important;
    padding: 0.75rem 1rem !important;
    gap: 0.75rem;
}
html body.hif-app .sidebar-offcanvas .offcanvas-title {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    line-height: 1 !important;
    flex: 1 1 auto;
    min-width: 0;
}
html body.hif-app .sidebar-offcanvas .hif-offcanvas-logo,
html body.hif-app .sidebar-offcanvas .offcanvas-title img {
    height: 40px !important;
    max-height: 40px !important;
    width: auto !important;
    max-width: min(240px, 72vw) !important;
    object-fit: contain !important;
    object-position: left center !important;
    display: block !important;
    margin: 0 !important;
}
/* Evitar segundo logo dentro del shell del desplegable */
html body.hif-app #sidebarOffcanvas .hif-sidebar-brand {
    display: none !important;
}
html body.hif-app #sidebarOffcanvas,
html body.hif-app #sidebarOffcanvas.offcanvas,
html body.hif-app #sidebarOffcanvas .offcanvas-body,
html body.hif-app #sidebarOffcanvas .hif-sidebar-shell,
html body.hif-app #sidebarOffcanvas .hif-sidebar-scroll,
html body.hif-app #sidebarOffcanvas .hif-sidebar-footer {
    background: #2A3544 !important;
}
html body.hif-app #sidebarOffcanvas .hif-sidebar-shell {
    height: 100% !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
}
html body.hif-app #sidebarOffcanvas .offcanvas-body {
    padding-bottom: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    background: #2A3544 !important;
}
html body.hif-app #sidebarOffcanvas .hif-sidebar-scroll {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding-bottom: 0.5rem !important;
    background: #2A3544 !important;
}

/* —— Hover / foco: sombreado claro en opciones clickeables —— */
html body.hif-app .hif-sidebar-nav .nav-link:not(.active):hover,
html body.hif-app .hif-sidebar-nav .nav-link:not(.active):focus-visible {
    background: rgba(255, 255, 255, 0.16) !important;
    color: #FFFFFF !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
html body.hif-app .dropdown-item:hover,
html body.hif-app .dropdown-item:focus,
html body.hif-app .dropdown-item:focus-visible {
    background: #DCE8F2 !important;
    color: #1C2430 !important;
}
html body.hif-app .btn:hover:not(:disabled):not(.disabled),
html body.hif-app .btn:focus-visible:not(:disabled) {
    filter: brightness(0.94);
    box-shadow: 0 2px 8px rgba(28, 36, 48, 0.12);
}
html body.hif-app .btn-outline-primary:hover,
html body.hif-app .btn-outline-secondary:hover,
html body.hif-app .btn-outline-dark:hover {
    filter: none;
}
html body.hif-app .form-select:hover,
html body.hif-app .form-control:hover:not(:disabled):not([readonly]),
html body.hif-app .form-check-label:hover {
    border-color: #4A6B86 !important;
}
html body.hif-app .form-check-input:hover {
    border-color: #4A6B86 !important;
    cursor: pointer;
}
html body.hif-app .nav-tabs .nav-link:hover {
    background: #E6EEF5 !important;
    color: #1C2430 !important;
}
html body.hif-app .list-group-item-action:hover,
html body.hif-app .list-group-item-action:focus {
    background: #E6EEF5 !important;
    color: #1C2430 !important;
}
html body.hif-app .table tbody tr[onclick]:hover,
html body.hif-app .table tbody tr.hif-row-click:hover,
html body.hif-app a.card:hover,
html body.hif-app .card.hif-clickable:hover {
    background: #F0F5F9 !important;
}
html body.hif-app .hif-notify-btn:hover {
    background: rgba(255, 255, 255, 0.22) !important;
}
html body.hif-app .page-link:hover {
    background: #E6EEF5 !important;
    color: #1C2430 !important;
    border-color: #C5D4E3 !important;
}

/* Tablas: scroll interno primero; al tope/fondo continúa la página */
html body.hif-app .card,
html body.hif-app .card-body,
html body.hif-app .card-body.p-0,
html body.hif-app .modal-body,
html body.hif-app .content-wrapper,
html body.hif-app .container-fluid,
html body.hif-app .row > [class*="col"] {
    min-width: 0;
    max-width: 100%;
}

html body.hif-app .table-responsive,
html body.hif-app .hif-table-wrap,
html body.hif-app .main-content .table-responsive,
html body.hif-app .main-content .hif-table-wrap,
html body.hif-app .card .table-responsive,
html body.hif-app .card-body .table-responsive {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    max-height: min(65vh, 520px) !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain !important;
    overscroll-behavior-y: auto !important;
    touch-action: pan-x pan-y !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

html body.hif-app .table-responsive::-webkit-scrollbar,
html body.hif-app .hif-table-wrap::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

html body.hif-app .table-responsive > .table,
html body.hif-app .hif-table-wrap > .table {
    margin-bottom: 0;
}

html body.hif-app .table-responsive > .table > thead > tr > th,
html body.hif-app .hif-table-wrap > .table > thead > tr > th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: #F3F6F9 !important;
    box-shadow: 0 1px 0 #D7E0EA;
}

@media (max-width: 991.98px) {
    html body.hif-app .main-content {
        touch-action: pan-x pan-y !important;
    }
    html body.hif-app .table-responsive,
    html body.hif-app .hif-table-wrap,
    html body.hif-app .main-content .table-responsive,
    html body.hif-app .card .table-responsive {
        max-height: min(55vh, 420px) !important;
    }
}


/* —— Layout módulos: móvil sin overflow + PC sin huecos —— */
html body.hif-app .layout-body,
html body.hif-app .main-content,
html body.hif-app .content-wrapper {
    max-width: 100%;
    min-width: 0;
}

html body.hif-app .content-wrapper > .container-fluid,
html body.hif-app .main-content .container-fluid {
    max-width: 100%;
    min-width: 0;
}

html body.hif-app .row > [class*="col-"] {
    min-width: 0;
}

html body.hif-app .alert,
html body.hif-app .page-title,
html body.hif-app .card-body,
html body.hif-app .text-muted {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Banner BCR amortización (legacy; ya no se usa en la vista principal) */
html body.hif-app .hif-amort-bcr-banner {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
html body.hif-app .hif-amort-bcr-banner__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.85rem;
}
html body.hif-app .hif-amort-bcr-banner__hint {
    line-height: 1.35;
}

/* Calculadora de amortización — layout compacto */
html body.hif-app .hif-amort-page {
    max-width: 1400px;
}
html body.hif-app .hif-amort-form-card .form-label {
    margin-bottom: 0.35rem;
    font-size: 0.875rem;
}
html body.hif-app .hif-amort-form-card .form-control,
html body.hif-app .hif-amort-form-card .form-select {
    min-height: 2.35rem;
}
html body.hif-app .hif-amort-form-card small {
    font-size: 0.75rem;
    line-height: 1.3;
}
html body.hif-app .hif-amort-actions {
    padding-top: 0.15rem;
}
html body.hif-app .hif-amort-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    padding: 1rem 1.1rem;
    border: 1px dashed #C9D5E3;
    border-radius: 10px;
    background: #F8FBFD;
    color: #5A6A7A;
    font-size: 0.9rem;
}
html body.hif-app .hif-amort-empty .bi {
    font-size: 1.25rem;
    opacity: 0.75;
}
html body.hif-app .hif-amort-table-wrap {
    max-height: min(58vh, 480px) !important;
    overflow: auto !important;
    border-top: 1px solid #E2EAF2;
}
html body.hif-app .hif-amort-table {
    width: 100%;
    table-layout: fixed;
    margin-bottom: 0 !important;
    font-size: 0.8125rem;
    border-collapse: collapse;
}
html body.hif-app .hif-amort-table .hif-amort-col-n { width: 7%; }
html body.hif-app .hif-amort-table .hif-amort-col-date { width: 21%; }
html body.hif-app .hif-amort-table .hif-amort-col-money { width: 18%; }

html body.hif-app .hif-amort-table > thead > tr > th,
html body.hif-app .hif-amort-table > tbody > tr > td,
html body.hif-app .hif-amort-table > tfoot > tr > td {
    padding: 0.4rem 0.65rem !important;
    vertical-align: middle !important;
    line-height: 1.25 !important;
    white-space: nowrap;
    border-color: #E8EEF4 !important;
}
html body.hif-app .hif-amort-table > thead > tr > th {
    font-size: 0.7rem !important;
    letter-spacing: 0.04em;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    background: #EAF0F6 !important;
    color: #3A4A5A !important;
}
html body.hif-app .hif-amort-table > tbody > tr > td {
    color: #1C2430;
}
html body.hif-app .hif-amort-table > tbody > tr:hover > td {
    background: #F3F8FC !important;
}
html body.hif-app .hif-amort-table > tfoot > tr > td {
    padding-top: 0.55rem !important;
    padding-bottom: 0.55rem !important;
    background: #F3F6F9 !important;
    border-top: 2px solid #C9D5E3 !important;
    font-size: 0.8125rem;
}
html body.hif-app .hif-amort-table .fw-semibold {
    font-weight: 650 !important;
    color: #0F6E56;
}

/* Resultado más compacto */
html body.hif-app .hif-amort-result {
    --bs-gutter-y: 0.65rem;
    --bs-gutter-x: 0.65rem;
}
html body.hif-app .hif-amort-result__item {
    height: 100%;
    border: 1px solid #D7E0EA;
    border-radius: 8px;
    background: #fff;
    padding: 0.55rem 0.65rem;
    text-align: center;
}
html body.hif-app .hif-amort-result__item--meta {
    text-align: left;
    background: #F7FAFC;
}
html body.hif-app .hif-amort-result__label {
    font-size: 0.7rem;
    color: #5A6A7A;
    font-weight: 600;
    margin-bottom: 0.2rem;
    line-height: 1.2;
}
html body.hif-app .hif-amort-result__value {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1C2430;
    line-height: 1.2;
    word-break: break-word;
}
html body.hif-app .hif-amort-result__meta {
    font-size: 0.88rem;
    font-weight: 650;
    color: #1C2430;
    line-height: 1.25;
    word-break: break-word;
}
@media (max-width: 575.98px) {
    html body.hif-app .hif-amort-result__value {
        font-size: 0.98rem;
    }
    html body.hif-app .hif-amort-result__item {
        padding: 0.5rem 0.45rem;
    }
    html body.hif-app .hif-amort-empty {
        flex-direction: column;
        text-align: center;
        padding: 0.85rem;
    }
    html body.hif-app .hif-amort-table > thead > tr > th,
    html body.hif-app .hif-amort-table > tbody > tr > td,
    html body.hif-app .hif-amort-table > tfoot > tr > td {
        padding: 0.35rem 0.45rem !important;
        font-size: 0.75rem;
    }
}

@media (min-width: 992px) {
    html body.hif-app.hif-premium .content-wrapper,
    html body.hif-app .content-wrapper {
        padding: 1.15rem 1.35rem 1.75rem !important;
        max-width: 1680px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    html body.hif-app .page-header {
        margin-bottom: 1rem !important;
        gap: 0.75rem !important;
    }
    html body.hif-app .page-title,
    html body.hif-app h1.page-title {
        font-size: 1.4rem !important;
    }
    html body.hif-app .row.g-4 {
        --bs-gutter-y: 1.15rem;
        --bs-gutter-x: 1.15rem;
    }
    html body.hif-app .card .card-body.py-5 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    html body.hif-app .hif-amort-page__grid {
        align-items: flex-start;
    }
}

@media (max-width: 991.98px) {
    html body.hif-app,
    html body.hif-app .layout-body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    html body.hif-app .main-content {
        overflow: visible !important;
        padding-top: 0.25rem !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        height: auto !important;
        max-height: none !important;
    }
    html body.hif-app.hif-premium .content-wrapper,
    html body.hif-app .content-wrapper {
        padding: 0.4rem 0.5rem 5.25rem !important;
        max-width: 100% !important;
    }
    html body.hif-app .content-wrapper > .container-fluid,
    html body.hif-app .main-content .container-fluid {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        --bs-gutter-x: 0.75rem;
    }
    html body.hif-app .page-header {
        margin-bottom: 0.75rem !important;
        gap: 0.5rem !important;
    }
    html body.hif-app .page-title,
    html body.hif-app h1.page-title {
        font-size: 1.2rem !important;
        line-height: 1.3 !important;
    }
    html body.hif-app .page-title .bi {
        font-size: 1.05rem;
    }
    html body.hif-app .row {
        --bs-gutter-x: 0.75rem;
        --bs-gutter-y: 0.75rem;
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100%;
    }
    html body.hif-app .row > * {
        padding-left: calc(var(--bs-gutter-x) * 0.5);
        padding-right: calc(var(--bs-gutter-x) * 0.5);
        max-width: 100%;
    }
    html body.hif-app .alert {
        max-width: 100%;
        white-space: normal !important;
    }
    html body.hif-app .input-group {
        flex-wrap: wrap;
        max-width: 100%;
    }
    html body.hif-app .input-group > .form-control,
    html body.hif-app .input-group > .form-select {
        min-width: 0;
        flex: 1 1 auto;
    }
    html body.hif-app .table-responsive {
        max-width: 100% !important;
        max-height: min(55vh, 420px) !important;
        overflow-x: auto !important;
        overflow-y: auto !important;
        overscroll-behavior-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    html body.hif-app .card,
    html body.hif-app .alert,
    html body.hif-app .list-group,
    html body.hif-app .form-control,
    html body.hif-app .form-select {
        max-width: 100%;
    }
    html body.hif-app .btn-group {
        flex-wrap: wrap;
        max-width: 100%;
    }
    html body.hif-app .hif-amort-bcr-banner__meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
    html body.hif-app .hif-amort-page__lead {
        font-size: 0.8125rem;
        line-height: 1.4;
    }
    html body.hif-app .btn-toolbar {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
}

