/* === REMOVIDO: NO forzar el 85% global ===
.container,
.container-fluid,
.container-xl,
.container-lg,
.container-md,
.container-sm {
    max-width: 85vw !important;
    width: 85vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: .5rem !important;
    padding-right: .5rem !important;
}
body .container,
body .container-fluid {
    max-width: 85vw !important;
    width: 85vw !important;
    margin: 0 auto !important;
}
*/

/* ===== NAVEGACIÓN CON ICONOS - VERSIÓN FINAL LIMPIA ===== */

/* Base del navbar */
.icon-navbar {
    background: #ffffff !important;
    border: none !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
    padding: 0.75rem 0 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1100 !important;
}

    /* Container principal - Espaciado dinámico (SOLO dentro del navbar) */
    .icon-navbar .container-fluid {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 clamp(1rem, 3vw, 3rem) !important; /* Espaciado dinámico */
    }

    /* Brand - Espaciado dinámico */
    .icon-navbar .navbar-brand {
        font-weight: 900 !important;
        font-size: 1.4rem !important;
        color: #00d084 !important;
        text-decoration: none !important;
        flex: 0 0 auto !important;
        min-width: clamp(140px, 15vw, 200px) !important; /* Ancho dinámico */
    }

        .icon-navbar .navbar-brand:hover {
            color: #00b570 !important;
        }

/* Menú central con iconos - Espaciado dinámico */
.nav-icon-menu {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(1rem, 4vw, 2.5rem) !important; /* Gap que crece con el viewport */
    flex: 1 !important;
    margin: 0 clamp(0.5rem, 2vw, 2rem) !important; /* Margen dinámico */
    padding: 0 !important;
    list-style: none !important;
}

    .nav-icon-menu .nav-item {
        display: block !important;
        margin: 0 !important;
    }

/* Área derecha - Espaciado dinámico */
.icon-navbar .navbar-nav:last-child {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex: 0 0 auto !important;
    min-width: clamp(140px, 15vw, 200px) !important; /* Mismo ancho dinámico que brand */
    gap: 1rem !important;
}

/* Todos los botones del nav - Más grandes */
.nav-icon-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: clamp(52px, 6vw, 64px) !important; /* Tamaño dinámico más grande */
    height: clamp(52px, 6vw, 64px) !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: clamp(12px, 2vw, 16px) !important; /* Border radius proporcional */
    color: #64748b !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    position: relative !important;
}

    /* Hover para todos los botones */
    .nav-icon-btn:hover {
        background: #f1f5f9 !important;
        color: #334155 !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12) !important;
    }

/* Todos los iconos - Más grandes y proporcionales */
.nav-icon {
    width: clamp(28px, 4vw, 36px) !important; /* Iconos más grandes y dinámicos */
    height: clamp(28px, 4vw, 36px) !important;
    filter: grayscale(40%) brightness(0.8) !important;
    transition: all 0.2s ease !important;
    object-fit: contain !important;
    display: block !important;
}

.nav-icon-btn:hover .nav-icon {
    filter: grayscale(0%) brightness(1) !important;
    transform: scale(1.05) !important;
}

/* Ocultar cualquier texto */
.nav-text {
    display: none !important;
    visibility: hidden !important;
}

/* Dropdown arrow */
.nav-icon-btn.dropdown-toggle::after {
    position: absolute !important;
    bottom: 6px !important;
    right: 6px !important;
    width: 4px !important;
    height: 4px !important;
    border-top: 2px solid currentColor !important;
    border-right: 2px solid transparent !important;
    border-left: 2px solid transparent !important;
    opacity: 0.6 !important;
    transition: all 0.2s ease !important;
}

.nav-icon-btn.dropdown-toggle:hover::after {
    opacity: 1 !important;
}

/* Menús dropdown */
.icon-navbar .dropdown-menu {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12) !important;
    padding: 0.5rem !important;
    margin-top: 0.5rem !important;
    z-index: 3000 !important;
    min-width: 200px !important;
}

.icon-navbar .dropdown-item {
    border-radius: 8px !important;
    padding: 0.5rem 0.75rem !important;
    color: #475569 !important;
    transition: all 0.2s ease !important;
    font-weight: 500 !important;
}

    .icon-navbar .dropdown-item:hover {
        background: #f1f5f9 !important;
        color: #1e293b !important;
    }

.icon-navbar .dropdown-divider {
    margin: 0.5rem 0 !important;
    border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* Enlaces normales (no iconos) */
.icon-navbar .navbar-nav:not(.nav-icon-menu) .nav-link:not(.nav-icon-btn) {
    font-weight: 600 !important;
    color: #64748b !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
}

    .icon-navbar .navbar-nav:not(.nav-icon-menu) .nav-link:not(.nav-icon-btn):hover {
        background: #f1f5f9 !important;
        color: #334155 !important;
    }

/* Botón de acciones rápidas */
.icon-navbar .nav-link.text-danger {
    font-weight: 700 !important;
    color: #dc2626 !important;
}

    .icon-navbar .nav-link.text-danger:hover {
        background: #fef2f2 !important;
        color: #b91c1c !important;
    }

/* Responsive - Tablets (Ajuste más fino del espaciado) */
@media (max-width: 1024px) and (min-width: 768px) {
    .icon-navbar .container-fluid {
        padding: 0 clamp(0.8rem, 2vw, 1.5rem) !important;
    }

    .icon-navbar .navbar-brand {
        min-width: clamp(120px, 12vw, 160px) !important;
        font-size: 1.3rem !important;
    }

    .nav-icon-menu {
        gap: clamp(0.8rem, 3vw, 2rem) !important;
        margin: 0 clamp(0.5rem, 1.5vw, 1.5rem) !important;
    }

    .icon-navbar .navbar-nav:last-child {
        min-width: clamp(120px, 12vw, 160px) !important;
    }

    .nav-icon-btn {
        width: clamp(48px, 5.5vw, 58px) !important;
        height: clamp(48px, 5.5vw, 58px) !important;
    }

    .nav-icon {
        width: clamp(26px, 3.5vw, 32px) !important;
        height: clamp(26px, 3.5vw, 32px) !important;
    }

    .icon-navbar .navbar-collapse {
        display: flex !important;
        flex-basis: auto !important;
    }

    .icon-navbar .navbar-toggler {
        display: none !important;
    }
}

/* Responsive - Móvil (Botones más compactos pero visibles) */
@media (max-width: 767.98px) {
    .icon-navbar .navbar-toggler {
        display: block !important;
    }

    .icon-navbar .navbar-collapse:not(.show) {
        display: none !important;
    }

    .icon-navbar .container-fluid {
        flex-direction: column !important;
        gap: 1rem !important;
        padding: 0 1rem !important;
    }

    .icon-navbar .navbar-brand {
        flex: none !important;
        align-self: flex-start !important;
        font-size: 1.25rem !important;
        min-width: auto !important;
    }

    .icon-navbar .navbar-collapse {
        background: #ffffff !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
        padding: 1rem !important;
        width: 100% !important;
    }

    .nav-icon-menu {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 0.75rem !important;
        width: 100% !important;
        margin: 0 !important;
        margin-bottom: 1rem !important;
    }

    .nav-icon-btn {
        width: 50px !important; /* Ligeramente más grande en móvil para mejor touch */
        height: 50px !important;
    }

    .nav-icon {
        width: 26px !important;
        height: 26px !important;
    }

    .icon-navbar .navbar-nav:last-child {
        flex: none !important;
        justify-content: center !important;
        width: 100% !important;
        min-width: auto !important;
    }

    .icon-navbar .dropdown-menu {
        position: static !important;
        float: none !important;
        box-shadow: none !important;
        border: none !important;
        border-left: 3px solid #e2e8f0 !important;
        border-radius: 0 8px 8px 0 !important;
        margin-left: 1rem !important;
        background: #f8fafc !important;
        width: calc(100% - 1rem) !important;
    }
}

/* Tooltips personalizados */
.tooltip {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
}

.tooltip-inner {
    background: #1e293b !important;
    color: #ffffff !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: 8px !important;
}

/* ======= AUTH PAGES (Login/Register/Forgot) ======= */
.auth-page {
    min-height: calc(100vh - 140px);
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
    padding: 2rem 1rem;
    background: var(--secondary-gray, #F8F9FA);
}

.auth-card {
    width: 100%;
    max-width: 440px;
    background: #fff;
    border: 1px solid var(--border-light, #E5E7EB);
    border-radius: 16px;
    box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,.08));
    padding: 2rem;
}

.auth-title {
    margin: 0 0 .25rem 0;
    font-weight: 800;
    font-size: 1.75rem;
    color: var(--text-dark, #2C3E50);
    letter-spacing: -0.02em;
}

.auth-subtitle {
    margin: 0 0 1.25rem 0;
    color: var(--text-secondary, #6B7280);
    font-size: .95rem;
}

.auth-card .form-label {
    font-weight: 600;
    color: var(--text-dark, #2C3E50);
}

.auth-card .form-control {
    border: 2px solid var(--border-color, #E9ECEF);
    border-radius: 10px;
    padding: .75rem .9rem;
    transition: var(--transition, all .2s);
    background: #fff;
}

    .auth-card .form-control:focus {
        border-color: var(--primary-green, #00D084);
        box-shadow: 0 0 0 .25rem rgba(0,208,132,.15);
    }

.auth-remember {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.auth-submit {
    width: 100%;
    margin-top: .5rem;
    padding: .85rem 1rem;
    border-radius: 12px;
    font-weight: 700;
    border: 2px solid var(--primary-green);
    background: var(--primary-green);
    color: #fff;
    transition: var(--transition, all .2s);
}

    .auth-submit:hover {
        background: var(--primary-green-hover, #00B570);
        border-color: var(--primary-green-hover, #00B570);
    }

.auth-links {
    display: grid;
    gap: .4rem;
    margin-top: 1rem;
}

    .auth-links a {
        color: var(--text-secondary, #6B7280);
        text-decoration: none;
        font-weight: 500;
    }

        .auth-links a:hover {
            color: var(--primary-green);
            text-decoration: underline;
        }

/* Bloque de "otro servicio" (si existe) como tarjeta secundaria */
.auth-side {
    max-width: 440px;
    width: 100%;
    background: #fff;
    border: 1px dashed var(--border-light, #E5E7EB);
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
    color: var(--text-secondary, #6B7280);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.05));
    margin-top: 1rem;
}

/* Layout a 2 columnas cuando haya ancho */
@media (min-width: 992px) {
    .auth-page {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }

    .auth-side {
        margin-top: 0;
    }
}

/* === Botón Entrar: forzar visibilidad dentro del card === */
.auth-card #account .auth-submit {
    -webkit-appearance: none;
    appearance: none;
    display: block !important;
    width: 100% !important;
    padding: .9rem 1rem !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    text-align: center !important;
    background-color: var(--primary-green, #00D084) !important;
    border: 2px solid var(--primary-green, #00D084) !important;
    color: #fff !important;
    visibility: visible !important;
    opacity: 1 !important;
    background-image: none !important; /* neutraliza reglas de bootstrap/resets */
}

    .auth-card #account .auth-submit:hover {
        background-color: var(--primary-green-hover, #00B570) !important;
        border-color: var(--primary-green-hover, #00B570) !important;
        color: #fff !important;
    }

    .auth-card #account .auth-submit:focus {
        outline: 0 !important;
        box-shadow: 0 0 0 .25rem rgba(0,208,132,.25) !important;
    }

/* ====== HOME / WELCOME ====== */
.welcome-hero {
    background: linear-gradient(180deg, var(--primary-green-light, #E8F8F3) 0%, #fff 70%);
    border: 1px solid var(--border-light, #E5E7EB);
    border-radius: 16px;
    box-shadow: var(--shadow-light, 0 2px 4px rgba(0,0,0,.05));
    padding: 1.75rem;
    margin-bottom: 1.5rem;
}

.welcome-hero-inner {
    display: grid;
    grid-template-columns: 1.4fr .9fr;
    gap: 1.5rem
}

.welcome-title {
    margin: 0 0 .25rem 0;
    font-weight: 800;
    letter-spacing: -.02em;
    font-size: 2rem;
    color: var(--text-dark,#2C3E50)
}

.welcome-subtitle {
    margin: .25rem 0 1rem;
    color: var(--text-secondary,#6B7280)
}

.hero-actions .modern-btn {
    border-radius: 12px
}

.qa-btn-lg {
    font-size: 1rem;
    padding: .9rem 1.1rem
}

/* Chips */
.welcome-chips {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin-top: 1rem
}

.chip {
    background: #fff;
    border: 1px solid var(--border-color,#E9ECEF);
    color: var(--text-secondary,#6B7280);
    padding: .35rem .7rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: .8rem
}

/* KPIs */
.welcome-hero-stats {
    display: grid;
    gap: .75rem;
    align-content: start
}

.stat-card {
    background: #fff;
    border: 1px solid var(--border-light,#E5E7EB);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    box-shadow: var(--shadow-sm,0 1px 2px rgba(0,0,0,.05))
}

.stat-kpi {
    font-weight: 800;
    font-size: 1.4rem;
    color: var(--primary-green,#00D084);
    line-height: 1;
    margin-bottom: .25rem
}

.stat-label {
    color: var(--text-secondary,#6B7280);
    font-weight: 600
}

/* ===== Grid de atajos ===== */
.quick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.quick-card {
    background: #fff;
    border: 1px solid var(--border-light,#E5E7EB);
    border-radius: 16px;
    padding: 1rem 1.25rem;
    box-shadow: var(--shadow-light,0 2px 4px rgba(0,0,0,.05))
}

.qc-head {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .75rem
}

    .qc-head h3 {
        margin: 0;
        font-weight: 800;
        letter-spacing: -.01em;
        color: var(--text-dark,#2C3E50)
    }

.qc-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--secondary-gray,#F8F9FA);
    display: grid;
    place-items: center;
    color: var(--text-secondary,#6B7280)
}

    .qc-icon.qc-green {
        background: var(--primary-green-light,#E8F8F3);
        color: var(--primary-green,#00D084)
    }

.qc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem
}

/* Botón de atajo */
.qa-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .9rem;
    border-radius: 10px;
    border: 2px solid var(--border-color,#E9ECEF);
    color: var(--text-dark,#2C3E50);
    font-weight: 700;
    text-decoration: none;
    transition: .2s;
    background: #fff;
}

    .qa-btn:hover {
        border-color: var(--primary-green,#00D084);
        color: var(--primary-green,#00D084);
        background: var(--primary-green-light,#E8F8F3);
        transform: translateY(-1px)
    }

.qa-primary {
    border-color: var(--primary-green,#00D084);
    background: var(--primary-green,#00D084);
    color: #fff
}

    .qa-primary:hover {
        background: var(--primary-green-hover,#00B570);
        border-color: var(--primary-green-hover,#00B570);
        color: #fff
    }

/* Responsive */
@media (max-width: 992px) {
    .welcome-hero-inner {
        grid-template-columns: 1fr
    }
}

/* ===== Empujar footer al fondo y dar respiro igual a la navbar ===== */

/* Altura de la navbar (coincide con lo que ya usas) */
:root {
    --navbar-h: 200px;
}

/* Estructura de página en columna */
html, body {
    height: 100%;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

    /* Header y footer no crecen */
    body > header {
        flex: 0 0 auto;
    }

footer.footer {
    flex: 0 0 auto;
}

/* El contenedor central crece para "empujar" el footer */
body > .container {
    flex: 1 0 auto;
}

    /* Colchón inferior = altura de la navbar (para que no quede pegado) */
    body > .container > main {
        padding-bottom: var(--navbar-h);
    }

/* === Traer modales por encima de la navbar sticky === */
:root {
    --z-nav: 1100; /* navbar */
    --z-modal: 1300; /* modal > navbar */
    --z-backdrop: 1290;
}

.modal-backdrop {
    z-index: var(--z-backdrop) !important;
}

.modal,
.modal.fade.show {
    z-index: var(--z-modal) !important;
}

/* Opcional: separa un poco el modal del borde superior en pantallas altas */
@media (min-width: 576px) {
    .modal-dialog {
        margin-top: calc(var(--navbar-h, 70px) + 8px);
    }
}

/* ===== DASHBOARD LAYOUT ===== */
.dashboard-grid {
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.dashboard-sections {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

/* Responsive */
@media (max-width: 1200px) {
    .dashboard-sections {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-sections {
        grid-template-columns: 1fr;
    }
}

/* Tarjetas */
.hero-panel,
.dashboard-card,
.stat-card {
    background: #fff;
    border: 1px solid var(--border-light, #E5E7EB);
    border-radius: 16px;
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.05));
}

.hero-panel {
    padding: 1.25rem 1.5rem;
    background: linear-gradient(180deg, var(--primary-green-light, #E8F8F3) 0%, #fff 100%);
}

.dashboard-card {
    padding: 1.25rem;
}

.dashboard-title {
    font-weight: 800;
    font-size: 1.25rem;
    color: var(--text-dark, #2C3E50);
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .75rem;
}

/* Hero */
.hero-title {
    font-weight: 900;
    font-size: 1.8rem;
    color: var(--text-dark, #2C3E50);
    letter-spacing: -0.02em;
    margin: 0 0 .35rem 0;
}

.hero-links {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin: .25rem 0 .75rem;
}

.hero-badges {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

/* Chips (acciones pequeñas) */
.dash-chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem .8rem;
    border-radius: 9999px;
    border: 2px solid var(--border-light, #E5E7EB);
    background: #fff;
    color: var(--text-secondary, #6B7280);
    font-weight: 700;
    text-decoration: none !important;
    transition: var(--transition, all .2s);
}

    .dash-chip:hover {
        border-color: var(--primary-green, #00D084);
        color: var(--primary-green, #00D084);
        background: var(--primary-green-light, #E8F8F3);
    }

.dash-chip-primary {
    background: var(--primary-green, #00D084);
    color: #fff;
    border-color: var(--primary-green, #00D084);
}

    .dash-chip-primary:hover {
        background: var(--primary-green-hover, #00B570);
        border-color: var(--primary-green-hover, #00B570);
        color: #fff;
    }

/* Lista de chips dentro de cada tarjeta */
.dashboard-actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

/* Stats pequeñas a la derecha del hero */
.stat-title {
    font-weight: 700;
    color: var(--text-secondary,#6B7280);
    font-size: .95rem;
    margin-bottom: .35rem;
}

.stat-value {
    font-weight: 900;
    font-size: 1.25rem;
    color: var(--text-dark,#2C3E50);
}

/* Ícono de cabecera de bloque */
.block-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-green-light,#E8F8F3);
    color: var(--primary-green,#00D084);
    font-weight: 900;
    font-size: .9rem;
}

/* ===== Dashboard polish ===== */
.quick-grid {
    display: grid;
    gap: 1rem 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    align-items: stretch;
}

.quick-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 200px;
    background: #fff;
    border: 1px solid var(--border-light, #E5E7EB);
    border-radius: 12px;
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.05));
    padding: 1rem 1rem 1.25rem;
}

.qc-head {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .5rem;
}

.qc-sub {
    margin: .1rem 0 0;
    font-size: .85rem;
    color: var(--text-muted, #9CA3AF);
}

.qc-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: var(--secondary-gray, #F8F9FA);
    color: var(--text-secondary, #6B7280);
}

    .qc-icon.qc-green {
        background: var(--primary-green-light, #E8F8F3);
        color: var(--primary-green, #00D084);
    }

.qc-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: .5rem;
    margin-top: .75rem;
}

.qa-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .55rem .8rem;
    border-radius: 10px;
    border: 2px solid var(--border-light, #E5E7EB);
    background: #fff;
    color: var(--text-secondary, #6B7280);
    font-weight: 600;
    text-decoration: none;
    transition: .2s ease;
}

    .qa-btn:hover {
        border-color: var(--primary-green, #00D084);
        color: var(--primary-green, #00D084);
        background: var(--primary-green-light, #E8F8F3);
    }

    .qa-btn.qa-primary {
        border-color: var(--primary-green, #00D084);
        background: var(--primary-green, #00D084);
        color: #fff;
    }

        .qa-btn.qa-primary:hover {
            background: var(--primary-green-hover, #00B570);
            border-color: var(--primary-green-hover, #00B570);
            color: #fff;
        }

/* === Navbar siempre por encima y con dropdowns clicables === */
header {
    position: relative;
    z-index: 3000;
}

    header .navbar {
        position: sticky;
        top: 0;
        z-index: 3001;
    }

        header .navbar .dropdown-menu {
            position: absolute;
            z-index: 3002;
        }

/* Evitar que páginas de contenido tapen el header */
.modern-page-container,
.pricing-page,
.pos-page,
.modern-container,
.modern-header,
.pos-toolbar {
    position: relative;
    z-index: 1; /* por debajo del header */
    /* Si alguna vista aplicó transform/filter y creó nuevo stacking context */
    transform: none !important;
    filter: none !important;
}

/* Asegurar que nada haya deshabilitado los clics del header */
header, header * {
    pointer-events: auto !important;
}

    /* Por si algún CSS puso overflow que recorte el dropdown */
    header .navbar,
    header {
        overflow: visible !important;
    }

/* Estado activo: fondo verde + texto blanco */
.nav-icon-btn.is-active,
.nav-icon-btn.active {
    background: #00D084 !important;
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(0, 208, 132, .35) !important;
    transform: translateY(-1px) !important;
}

    /* Iconos <img> en blanco cuando activo (sin tener que cambiar el asset) */
    .nav-icon-btn.is-active .nav-icon,
    .nav-icon-btn.active .nav-icon {
        filter: brightness(0) invert(1) !important;
    }

/* Flecha del dropdown cuando activo, en blanco */
.nav-icon-btn.dropdown-toggle.is-active::after,
.nav-icon-btn.dropdown-toggle.active::after {
    border-top-color: #fff !important;
    opacity: 1 !important;
}

/* Opcional: resaltar también el item activo dentro del menú */
.icon-navbar .dropdown-item.active,
.icon-navbar .dropdown-item:active {
    background: #E8F8F3 !important;
    color: #00B570 !important;
}
/* Ensancha el wrapper del layout sin afectar nav ni footer */
.site-container {
    max-width: 100% !important;
    width: 100% !important;
}

/* En estas páginas permitimos aún más “respiro” del grid */
.products-page .modern-container,
.pos-page .modern-container {
    /* ancho cómodo en monitores grandes, pero fluido */
    max-width: min(1600px, 96vw);
    margin-left: auto;
    margin-right: auto;
}

/* (por si alguna vista metió un container intermedio) */
.products-page .container,
.pos-page .container {
    max-width: 100% !important;
    width: 100% !important;
}
/* ===== Forzar ancho solo en Productos y POS ===== */
/* Ensancha el wrapper del layout */
.app.products-page .site-container,
.app.pos-page .site-container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 16px;
    padding-right: 16px;
}

/* Quita el max-width heredado de products-cards.css / modern-components.css */
.app.products-page .modern-page-container,
.app.products-page .modern-container,
.app.pos-page .modern-page-container,
.app.pos-page .modern-container {
    max-width: min(1600px, 96vw) !important; /* ancho cómodo en desktop */
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

    /* Por si adentro alguien volvió a meter .container de Bootstrap */
    .app.products-page .modern-page-container .container,
    .app.products-page .modern-page-container .container-fluid,
    .app.products-page .modern-container .container,
    .app.products-page .modern-container .container-fluid,
    .app.pos-page .modern-page-container .container,
    .app.pos-page .modern-page-container .container-fluid,
    .app.pos-page .modern-container .container,
    .app.pos-page .modern-container .container-fluid {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

/* Navbar horizontal en desktop */
@media (min-width: 992px) {
    .icon-navbar .navbar-collapse {
        display: flex !important;
        flex-basis: auto !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .icon-navbar .navbar-nav {
        flex-direction: row !important;
        align-items: center !important;
        gap: .75rem !important;
    }

    .icon-navbar .navbar-toggler {
        display: none !important;
    }
    /* centro real: brand | iconos | acciones */
    .icon-navbar .container-fluid {
        display: grid !important;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 14px;
    }

    .nav-icon-menu {
        grid-column: 2;
        justify-content: center !important;
        flex-wrap: nowrap !important;
    }
}

/* Altura realista del navbar (evita “hueco” gigante) */
:root {
    --navbar-h: 72px;
}

/* ============ HOTFIX iPad/Tablet (768px–1024px) ============ */
/* Solo afecta páginas POS y Productos para no tocar todo el sitio */
@media (min-width: 768px) and (max-width: 1024.98px) {

    /* 1) Containers internos de Bootstrap: 100% reales en tablet */
    .app.pos-page .container,
    .app.pos-page .container-fluid,
    .app.pos-page .container-sm,
    .app.pos-page .container-md,
    .app.pos-page .container-lg,
    .app.pos-page .container-xl,
    .app.products-page .container,
    .app.products-page .container-fluid,
    .app.products-page .container-sm,
    .app.products-page .container-md,
    .app.products-page .container-lg,
    .app.products-page .container-xl {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* 2) Wrappers propios: ancho cómodo + centrado */
    .app.pos-page .modern-page-container,
    .app.pos-page .modern-container,
    .app.products-page .modern-page-container,
    .app.products-page .modern-container {
        max-width: min(1400px, 96vw) !important;
        width: 100% !important;
        margin-inline: auto !important;
    }

        /* 3) Evitar “contenedores dentro de contenedores” que recorten */
        .app.pos-page .modern-page-container .container,
        .app.pos-page .modern-page-container .container-fluid,
        .app.pos-page .modern-container .container,
        .app.pos-page .modern-container .container-fluid,
        .app.products-page .modern-page-container .container,
        .app.products-page .modern-page-container .container-fluid,
        .app.products-page .modern-container .container,
        .app.products-page .modern-container .container-fluid {
            max-width: 100% !important;
            width: 100% !important;
            padding-left: 0 !important;
            padding-right: 0 !important;
        }

    /* 4) Botoneras y barras del POS con respiración */
    .app.pos-page .pos-toolbar,
    .app.pos-page .pos-page,
    .app.pos-page .pos-container {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}

/* ============ Alineación general y altura de navbar ============ */
/* Deja un único valor consistente de navbar */
:root {
    --navbar-h: 72px;
}

/* El contenido crece para empujar el footer */
html, body {
    height: 100%;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.site-container {
    flex: 1 0 auto;
}

footer.footer {
    margin-top: auto;
    flex-shrink: 0;
}

/* Evitar stacking context que achique o recorte en cualquier viewport */
.modern-page-container,
.modern-container,
.pos-page,
.pos-toolbar {
    transform: none !important;
    filter: none !important;
}
/* HOTFIX – Plano de Mesas en tablets */
.app.plano-page {
    overflow: visible !important;
}

    /* Asegura ancho completo solo en esta página */
    .app.plano-page .container,
    .app.plano-page .container-fluid,
    .app.plano-page .modern-page-container,
    .app.plano-page .modern-container {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        margin: 0 auto !important;
    }

@media (min-width: 768px) and (max-width: 1024.98px) {
    .app.plano-page .pos-toolbar,
    .app.plano-page .plano-wrap {
        padding-inline: 8px !important;
    }
}
/* === Brand responsive y sin cortes === */
.icon-navbar .navbar-brand {
    display: inline-flex !important;
    align-items: center !important;
    gap: .5rem !important;
    /* hace que el texto no desborde y muestre "…" si no cabe */
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    /* ancho disponible del brand (se adapta por viewport) */
    max-width: clamp(120px, 22vw, 240px) !important;
}

    /* Tipografías del brand escalables */
    .icon-navbar .navbar-brand .brand-full {
        font-weight: 900;
        font-size: clamp(1rem, 1.6vw, 1.25rem); /* baja en tablets */
        line-height: 1.1;
    }

    .icon-navbar .navbar-brand .brand-short {
        font-weight: 900;
        font-size: clamp(1rem, 1.6vw, 1.25rem);
        line-height: 1.1;
        display: none; /* por defecto oculto */
    }

/* En tablets estrechas mostramos corto “POSR” si el ancho aprieta */
@media (max-width: 1024px) {
    .icon-navbar .navbar-brand {
        max-width: clamp(110px, 18vw, 180px) !important;
    }
}

/* En móviles prioriza el corto si no cabe */
@media (max-width: 575.98px) {
    .icon-navbar .navbar-brand {
        max-width: 46vw !important;
    }
        /* si el nombre largo no cabe, ocultamos el largo y dejamos el corto */
        .icon-navbar .navbar-brand .brand-full {
            display: none !important;
        }

        .icon-navbar .navbar-brand .brand-short {
            display: inline !important;
        }
}

/* Ajuste del contenedor del navbar para que reparta bien el espacio */
@media (min-width: 992px) {
    .icon-navbar .container-fluid {
        display: grid !important;
        grid-template-columns: auto 1fr auto; /* brand | iconos | acciones */
        align-items: center;
        gap: 12px;
    }

    .nav-icon-menu {
        grid-column: 2;
    }
}
/* === HOTFIX iPad / tablets (768–1024) === */
/* Mantener comportamiento "móvil": collapse cerrado por defecto y toggler visible */
@media (min-width:768px) and (max-width:1024.98px) {
    .icon-navbar .navbar-toggler {
        display: block !important;
    }

    .icon-navbar .navbar-collapse {
        display: none !important; /* cerrado por defecto */
    }

        .icon-navbar .navbar-collapse.show {
            display: block !important; /* sólo cuando se abre */
        }
}

/* Desktop (>=992px): barra horizontal normal */
@media (min-width:992px) {
    .icon-navbar .navbar-toggler {
        display: none !important;
    }

    .icon-navbar .navbar-collapse {
        display: flex !important;
        flex-basis: auto !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .icon-navbar .container-fluid {
        display: grid !important;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 12px;
    }

    .nav-icon-menu {
        grid-column: 2;
    }
}

/* Brand adaptable (evita cortes) */
.icon-navbar .navbar-brand {
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: clamp(120px, 22vw, 240px) !important;
}

    .icon-navbar .navbar-brand .brand-full {
        font-weight: 900;
        font-size: clamp(1rem,1.6vw,1.25rem);
    }

    .icon-navbar .navbar-brand .brand-short {
        display: none;
        font-weight: 900;
        font-size: clamp(1rem,1.6vw,1.25rem);
    }

@media (max-width:575.98px) {
    .icon-navbar .navbar-brand {
        max-width: 46vw !important;
    }

        .icon-navbar .navbar-brand .brand-full {
            display: none !important;
        }

        .icon-navbar .navbar-brand .brand-short {
            display: inline !important;
        }
}

/* Plano de Mesas: ancho completo y sin recortes */
.app.plano-page {
    overflow: visible !important;
}

    .app.plano-page .container,
    .app.plano-page .container-fluid,
    .app.plano-page .modern-page-container,
    .app.plano-page .modern-container {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        margin: 0 auto !important;
    }
/* ===== Navbar: estilo del menú desplegable (móvil / iPad) ===== */
@media (max-width: 1024.98px) {
    /* Panel del collapse */
    .icon-navbar .navbar-collapse.show {
        position: absolute !important;
        top: 100% !important;
        left: 0;
        right: 0;
        width: min(760px, calc(100% - 2rem));
        margin: .5rem auto !important;
        padding: .85rem !important;
        background: #fff !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 14px !important;
        box-shadow: 0 12px 30px rgba(2, 6, 23, .12) !important;
        z-index: 3002 !important;
    }

    /* Grilla linda para los iconos del centro */
    .icon-navbar .nav-icon-menu {
        display: grid !important;
        grid-template-columns: repeat(5, minmax(52px, 1fr)) !important; /* iPad: 5 por fila */
        gap: .65rem !important;
        justify-items: center !important;
        margin: 0 0 .75rem 0 !important;
    }

    @media (max-width: 575.98px) {
        .icon-navbar .nav-icon-menu {
            grid-template-columns: repeat(4, minmax(52px, 1fr)) !important; /* móvil: 4 por fila */
        }
    }

    /* Botones/iconos más “touch friendly” en el panel */
    .icon-navbar .nav-icon-btn {
        width: 56px !important;
        height: 56px !important;
        border-radius: 14px !important;
        background: #f8fafc !important;
        border: 1px solid #e5e7eb !important;
    }

        .icon-navbar .nav-icon-btn:hover {
            background: #eef2f7 !important;
            box-shadow: inset 0 0 0 2px #00d08420 !important;
        }

    /* La zona derecha (acciones/cerrar sesión) como bloque debajo */
    .icon-navbar .navbar-nav:last-child {
        display: grid !important;
        grid-auto-flow: row;
        gap: .5rem !important;
        justify-content: stretch !important;
    }

        .icon-navbar .navbar-nav:last-child .nav-link {
            border-radius: 10px !important;
            padding: .6rem .75rem !important;
            background: #f8fafc !important;
            border: 1px solid #e5e7eb !important;
            text-align: center;
        }

    /* Dropdowns dentro del collapse: estilo de lista */
    .icon-navbar .dropdown-menu {
        position: static !important;
        float: none !important;
        transform: none !important;
        box-shadow: none !important;
        border: 1px dashed #e5e7eb !important;
        border-radius: 10px !important;
        padding: .35rem !important;
        margin: .35rem 0 !important;
        background: #fcfcfd !important;
    }

    .icon-navbar .dropdown-item {
        border-radius: 8px !important;
        padding: .5rem .65rem !important;
    }

        .icon-navbar .dropdown-item:hover {
            background: #eef7f3 !important;
            color: #00b570 !important;
        }

    /* Flecha del toggle más discreta al abrir */
    .icon-navbar .dropdown-toggle::after {
        transition: transform .2s ease;
    }

    .icon-navbar .dropdown.show > .dropdown-toggle::after {
        transform: rotate(180deg);
    }
}

/* Asegura que nada lo tape */
header {
    z-index: 3000;
}

.icon-navbar {
    z-index: 3001;
}

    .icon-navbar .navbar-collapse.show {
        z-index: 3002;
    }
/* === Mantener estado ACTIVO igual que desktop dentro del collapse === */
@media (max-width: 1024.98px) {
    /* Links con clase .is-active o .active */
    .icon-navbar .nav-icon-btn.is-active,
    .icon-navbar .nav-icon-btn.active {
        background: #00D084 !important;
        color: #fff !important;
        border-color: #00D084 !important;
        box-shadow: 0 8px 18px rgba(0,208,132,.35) !important;
        transform: translateY(-1px) !important;
    }

        .icon-navbar .nav-icon-btn.is-active .nav-icon,
        .icon-navbar .nav-icon-btn.active .nav-icon {
            filter: brightness(0) invert(1) !important;
        }

    /* Cuando el dropdown está abierto, marcar el toggle como activo */
    .icon-navbar .dropdown.show > .nav-link.nav-icon-btn {
        background: #00D084 !important;
        color: #fff !important;
        border-color: #00D084 !important;
        box-shadow: 0 8px 18px rgba(0,208,132,.35) !important;
    }

        .icon-navbar .dropdown.show > .nav-link.nav-icon-btn .nav-icon {
            filter: brightness(0) invert(1) !important;
        }

        /* No dejar que el :hover “apague” el activo */
        .icon-navbar .nav-icon-btn.is-active:hover,
        .icon-navbar .nav-icon-btn.active:hover,
        .icon-navbar .dropdown.show > .nav-link.nav-icon-btn:hover {
            background: #00D084 !important;
            color: #fff !important;
            border-color: #00D084 !important;
            box-shadow: 0 10px 22px rgba(0,208,132,.40) !important;
        }
}
/* dropdowns largos con scroll propio */
.dropdown-menu.dropdown-menu-scroll {
    max-height: 60vh; /* ajusta a gusto: 50–70vh suele ir bien */
    overflow-y: auto;
    overscroll-behavior: contain; /* evita que se “propague” el scroll al body */
    -webkit-overflow-scrolling: touch; /* suaviza en iOS */
}

/* opcional: que no quede pegado al borde en pantallas chicas */
@media (max-width: 575.98px) {
    .dropdown-menu.dropdown-menu-scroll {
        max-height: 70vh;
        width: calc(100vw - 2rem);
    }
}
/* Estilos suaves para mantener coherencia con el resto del sistema */
#select-cuenta-body .list-group-item {
    cursor: pointer;
    transition: background-color .15s ease-in-out;
}

    #select-cuenta-body .list-group-item:hover {
        background-color: rgba(0, 123, 255, 0.05);
    }

    #select-cuenta-body .list-group-item .small {
        opacity: 0.8;
    }