/* ==========================================================================
   1. VARIABLES GLOBALES Y FUENTES (Identidad Visual Unificada)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    /* Blanco Algodón: Blanco sofisticado, limpio y suave que elimina los tonos grises */
    --white: #FBFBFA;
    --blue: #0073f3; /* Azul base sólido / claro solicitado */
    --blue-dark: #0053af; /* Azul hover más oscuro solicitado */
    --gray-dark: #111827;
    --gray-mid: #4B5563;
    --gray-mid-rgb: 75, 85, 99;
    --gray-dark-rgb: 17, 24, 39;
    --table-header-bg: rgba(191, 191, 191, 0.6); /* Color gris translúcido para las cabeceras de tablas */
    --state-positive-bg: rgba(22, 163, 74, .12);
    --state-positive-text: #166534;
    --state-neutral-bg: rgba(100, 116, 139, .12);
    --state-neutral-text: #64748b;
    --state-negative-bg: rgba(220, 38, 38, .12);
    --state-negative-text: #991b1b;
    --state-primary-bg: rgba(0, 115, 243, .12);
    --state-primary-text: #0057b8;
    --state-info-bg: rgba(8, 145, 178, .12);
    --state-info-text: #0e7490;
    --danger: #cf4a4a; /* rojo suavizado */
    --danger-rgb: 207, 74, 74;
    /* Variables de estructura unificadas */
    --nav-height: 64px;
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
}

/* ==========================================================================
   2. ESTILOS BASE (Márgenes Globales e Invariabilidad de Scroll)
   ========================================================================== */
html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
    /* Reserva el espacio del scrollbar para evitar brincos horizontales */
    scrollbar-gutter: stable;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    font-family: 'Inter', 'Segoe UI Variable', 'Segoe UI', Arial, sans-serif;
    background-color: var(--white) !important;
    color: #1f2937;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Contenedor Maestro: Alineación exacta garantizada en todo el sitio */
.site-container {
    width: 100% !important;
    max-width: 1320px !important;
    box-sizing: border-box;
    margin: 0 auto !important;
    padding-left: var(--space-lg) !important;
    padding-right: var(--space-lg) !important;
}

@media (max-width: 767.98px) {
    .site-container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* Layout Principal */
.layout-body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--white) !important;
}

.main-content {
    flex: 1;
    margin-top: var(--nav-height) !important;
    padding-top: 12px;
    padding-bottom: var(--space-lg);
    background-color: var(--white) !important;
}

/* Las vistas ya incluyen espaciado propio; evitamos sumarlo dos veces al navbar. */
.main-content > .site-container > section.py-5,
.main-content > .site-container > section.py-4 {
    padding-top: 1rem !important;
}

.main-content > .site-container > .emp-create-page,
.main-content > .site-container > .idx-page {
    padding-top: .75rem;
}

@media (max-width: 767.98px) {
    .main-content {
        padding-top: 8px;
    }

    .main-content > .site-container > section.py-5,
    .main-content > .site-container > section.py-4 {
        padding-top: .75rem !important;
    }
}

    .main-content.main-content-full {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

/* ==========================================================================
   3. NAVBAR & HEADERS (Estructura, Sombras e Inflexibilidad)
   ========================================================================== */
.saas-navbar,
.login-header {
    background-color: var(--white) !important;
    border-bottom: 1px solid rgba(17, 24, 39, 0.04);
    /* Sombra premium unificada aplicada con fuerza total */
    box-shadow: 0 4px 18px rgba(17, 24, 39, 0.05), 0 1px 3px rgba(17, 24, 39, 0.02) !important;
    padding: 0 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1200 !important; /* Capa masiva para flotar sobre los divs de Auth */
    /* Dimensiones idénticas e inflexibles */
    height: var(--nav-height) !important;
    min-height: var(--nav-height) !important;
    max-height: var(--nav-height) !important;
    display: flex !important;
    align-items: center !important;
}

    .saas-navbar > .site-container,
    .login-header > .site-container {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        height: var(--nav-height) !important;
    }

    /* LETRA GRUESA PARA MULTISERVICIOS Bolívar */
    .saas-navbar .navbar-brand,
    .auth-logo-link {
        display: inline-flex !important;
        align-items: center !important;
        height: var(--nav-height) !important;
        padding: 0 !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
        font-weight: 700 !important; /* Letra gruesa estricta solicitada */
        color: var(--gray-dark) !important;
        text-decoration: none !important;
    }

    .saas-navbar .nav-link {
        color: var(--gray-dark);
        padding: .5rem 1rem;
        font-weight: 600;
    }

        .saas-navbar .nav-link:hover {
            color: var(--blue);
        }

.navbar-left-links {
    display: flex !important;
    flex-direction: row;
    align-items: center !important;
    gap: .25rem;
    margin-right: auto;
}

#navbarNav .ms-auto {
    margin-left: auto !important;
}

/* ── Nav link con indicador activo ── */
.nav-link-pill {
    position: relative;
    color: var(--gray-mid) !important;
    font-weight: 500;
    font-size: 0.9rem;
    padding: 0.4rem 0.75rem !important;
    border-radius: 6px;
    transition: color 0.15s ease, background 0.15s ease;
}

    .nav-link-pill:hover {
        color: var(--gray-dark) !important;
        background: rgba(17, 24, 39, 0.05);
    }

    .nav-link-pill.active {
        color: var(--blue) !important;
        font-weight: 600;
    }

        .nav-link-pill.active::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 50%;
            transform: translateX(-50%);
            width: 60%;
            height: 2px;
            background: var(--blue);
            border-radius: 2px;
        }

    .nav-link-pill.dropdown-toggle::after {
        margin-left: 4px;
        vertical-align: middle;
        opacity: 0.6;
    }

/* ── Dropdown mejorado ── */
.nav-dropdown-menu {
    border: 1px solid rgba(17, 24, 39, 0.08) !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 24px rgba(17, 24, 39, 0.10), 0 2px 6px rgba(17, 24, 39, 0.05) !important;
    padding: 6px !important;
    min-width: 200px;
    margin-top: 6px !important;
}

    .nav-dropdown-menu .dropdown-item {
        border-radius: 6px;
        padding: 0.45rem 0.75rem;
        font-size: 0.88rem;
        font-weight: 500;
        color: var(--gray-mid);
        transition: background 0.12s ease, color 0.12s ease;
        display: flex;
        align-items: center;
    }

        .nav-dropdown-menu .dropdown-item:hover {
            background: rgba(0, 115, 243, 0.07);
            color: var(--blue);
        }

        .nav-dropdown-menu .dropdown-item.active,
        .nav-dropdown-menu .dropdown-item:active {
            background: rgba(0, 115, 243, 0.10) !important;
            color: var(--blue) !important;
            font-weight: 600;
        }

    .nav-dropdown-menu .dropdown-divider {
        margin: 4px 6px;
        border-color: rgba(17, 24, 39, 0.07);
    }

/* ── Chip de usuario ── */
.nav-user-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px;
    padding: 5px 10px 5px 5px !important;
    border-radius: 999px;
    border: 1px solid rgba(17, 24, 39, 0.10);
    background: rgba(17, 24, 39, 0.03);
    text-decoration: none !important;
    transition: background 0.15s ease, border-color 0.15s ease;
    cursor: pointer;
}

    .nav-user-chip:hover {
        background: rgba(17, 24, 39, 0.07);
        border-color: rgba(17, 24, 39, 0.18);
    }

    .nav-user-chip::after {
        display: none !important; /* oculta el caret de Bootstrap, usamos el icono bi */
    }

.nav-user-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--blue);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.nav-user-email {
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--gray-dark);
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-user-chevron {
    font-size: 0.65rem;
    color: var(--gray-mid);
    margin-left: -2px;
    transition: transform 0.2s ease;
}

.nav-user-chip[aria-expanded="true"] .nav-user-chevron {
    transform: rotate(180deg);
}

/* ── Menú de usuario ── */
.nav-user-menu {
    border: 1px solid rgba(17, 24, 39, 0.08) !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 24px rgba(17, 24, 39, 0.10) !important;
    padding: 6px !important;
    min-width: 220px;
    margin-top: 8px !important;
}

.nav-user-menu-header {
    padding: 8px 10px 6px;
}

.nav-user-menu-email {
    font-size: 0.78rem;
    color: var(--gray-mid);
    font-weight: 500;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-user-logout {
    border-radius: 6px !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    color: var(--danger) !important;
    display: flex !important;
    align-items: center;
    transition: background 0.12s ease !important;
}

    .nav-user-logout:hover {
        background: rgba(207, 74, 74, 0.07) !important;
        color: var(--danger) !important;
    }

/* Imágenes de Logo Unificadas */
.brand-logo {
    height: 44px !important;
    width: auto !important;
    display: block !important;
    object-fit: contain !important;
}

@media (max-width: 767.98px) {
    .brand-logo {
        height: 36px !important;
    }
}

@media (min-width: 992px) {
    #navbarNav {
        display: flex !important;
        align-items: center !important;
        height: var(--nav-height) !important;
    }
}

@media (max-width: 991.98px) {
    .saas-navbar {
        height: var(--nav-height) !important;
        overflow: visible !important;
    }

    .saas-navbar > .site-container {
        position: relative;
        flex-wrap: nowrap !important;
    }

    .saas-navbar .navbar-toggler {
        width: 42px;
        height: 42px;
        padding: 0;
        border: 1px solid rgba(17, 24, 39, 0.12);
        border-radius: 8px;
        box-shadow: none !important;
    }

    .saas-navbar .navbar-toggler:focus {
        box-shadow: 0 0 0 3px rgba(0, 115, 243, 0.16) !important;
    }

    #navbarNav {
        position: absolute;
        top: calc(var(--nav-height) + 8px);
        left: 12px;
        right: 12px;
        max-height: calc(100vh - var(--nav-height) - 24px);
        overflow-y: auto;
        padding: .75rem;
        border: 1px solid rgba(17, 24, 39, 0.08);
        border-radius: 10px;
        background: var(--white);
        box-shadow: 0 18px 42px rgba(17, 24, 39, 0.16);
    }

    .navbar-left-links,
    .nav-auth-actions {
        width: 100%;
        height: auto !important;
        align-items: stretch !important;
        flex-direction: column;
        gap: .35rem;
    }

    #navbarNav .ms-auto {
        width: 100%;
        margin-top: .5rem;
        margin-left: 0 !important;
        padding-top: .5rem;
        border-top: 1px solid rgba(17, 24, 39, 0.08);
    }

    .saas-navbar .nav-link,
    .nav-link-pill {
        width: 100%;
        min-height: 42px;
        display: flex !important;
        align-items: center;
        justify-content: flex-start;
        padding: .65rem .75rem !important;
    }

    .nav-link-pill.active::after {
        display: none;
    }

    .nav-link-pill.active {
        background: rgba(0, 115, 243, 0.08);
    }

    .nav-dropdown-menu,
    .nav-user-menu {
        position: static !important;
        width: 100%;
        min-width: 0;
        margin: .25rem 0 .35rem !important;
        border-radius: 8px !important;
        box-shadow: none !important;
    }

    .nav-user-chip {
        width: 100%;
        min-height: 44px;
        justify-content: flex-start;
    }

    .nav-user-email {
        max-width: none;
        min-width: 0;
        flex: 1;
    }

    .nav-auth-actions .nav-auth-link {
        width: 100%;
    }
}

/* ==========================================================================
   4. BOTONES Y ACCIONES DE CABECERA (Estilo Base + Sincronización de Hover)
   ========================================================================== */
.nav-auth-actions {
    display: flex !important;
    align-items: center !important;
    height: var(--nav-height) !important;
    gap: 8px;
    flex-shrink: 0 !important;
}

    /* Forzado de negritas y centrado en la caja para TODOS los botones de cabecera */
    .nav-auth-actions .nav-auth-link,
    .login-header a.btn:not([class*="btn-action-"]),
    .login-header .btn {
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 1.25rem !important;
        border-radius: 8px !important;
        font-weight: 700 !important; /* Negrita estricta */
        font-size: 0.95rem !important;
        text-decoration: none !important;
        box-sizing: border-box !important;
        transition: all 0.2s ease !important; /* Animación suave idéntica al form */
        margin: 0 !important;
    }

        /* Botón Iniciar Sesión (Estilo base limpio y transparente) */
        .nav-auth-actions .nav-auth-link:not(.nav-auth-primary),
        .login-header a:not(.btn) {
            background: transparent !important;
            border: 1px solid transparent !important;
            color: #374151 !important;
        }

            /* Hover Iniciar Sesión: Se vuelve azul claro, sube y genera sombra sutil */
            .nav-auth-actions .nav-auth-link:not(.nav-auth-primary):hover,
            .login-header a:not(.btn):hover {
                color: var(--blue) !important;
                transform: translateY(-1px) !important;
                box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06) !important;
            }

    /* Botón Registrarse / Enlace principal (Color base: Azul claro sólido) */
    .nav-auth-actions .nav-auth-primary,
    .login-header a.btn:not([class*="btn-action-"]) {
        background: var(--blue) !important; /* Azul claro sólido solicitado */
        border: 1px solid var(--blue) !important;
        color: #ffffff !important;
    }

        /* Hover Registrarse: Se vuelve azul más oscuro, sube y proyecta la sombra premium del formulario */
        .nav-auth-actions .nav-auth-primary:hover,
        .login-header a.btn:not([class*="btn-action-"]):hover {
            background-color: var(--blue-dark) !important; /* Azul más oscuro en hover solicitado */
            border-color: var(--blue-dark) !important;
            color: #ffffff !important;
            transform: translateY(-1px) !important;
            box-shadow: 0 8px 20px rgba(0, 115, 243, 0.25) !important; /* Efecto idéntico al botón del formulario */
        }

/* ==========================================================================
   5. BOTONES INTERNOS DE FORMULARIO (Hovers y Cajas de Texto)
   ========================================================================== */
.btn-primary {
    background-color: var(--blue) !important; /* Azul claro */
    border-color: var(--blue) !important;
    color: #ffffff !important;
    font-weight: 600;
    border-radius: 8px;
    padding: var(--space-sm) var(--space-md);
    transition: all 0.2s ease;
}

    .btn-primary:hover {
        background-color: var(--blue-dark) !important; /* Azul oscuro en hover */
        border-color: var(--blue-dark) !important;
        transform: translateY(-1px);
        box-shadow: 0 8px 20px rgba(0, 115, 243, 0.25);
    }

.login-box .auth-switch-link,
.login-box a[href*="Register"],
.login-box a[href*="Login"] {
    color: var(--blue);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.12s ease;
}

    .login-box .auth-switch-link:hover,
    .login-box a[href*="Register"]:hover,
    .login-box a[href*="Login"]:hover {
        color: var(--blue-dark);
    }

/* Excepción de identidad visual: accesos principales de autenticación. */
.btn-auth-primary,
.login-header .btn-auth-primary,
.nav-auth-actions .btn-auth-primary {
    display: inline-flex;
    min-height: 40px;
    padding: 0 1.25rem;
    border: 1px solid var(--blue) !important;
    border-radius: 8px !important;
    align-items: center;
    justify-content: center;
    color: #ffffff !important;
    background: var(--blue) !important;
    font-weight: 700;
    text-decoration: none;
    box-shadow: none !important;
    transition: background-color .2s ease, border-color .2s ease,
                color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.btn-auth-primary:hover,
.btn-auth-primary:focus,
.btn-auth-primary:focus-visible,
.login-header .btn-auth-primary:hover,
.login-header .btn-auth-primary:focus,
.nav-auth-actions .btn-auth-primary:hover,
.nav-auth-actions .btn-auth-primary:focus {
    border-color: var(--blue-dark) !important;
    color: #ffffff !important;
    background: var(--blue-dark) !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0, 115, 243, .25) !important;
}

.btn-auth-primary:focus,
.btn-auth-primary:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(0, 115, 243, .22),
                0 8px 20px rgba(0, 115, 243, .25) !important;
}

.btn-auth-primary:active,
.btn-auth-primary.active,
.login-header .btn-auth-primary:active,
.nav-auth-actions .btn-auth-primary:active {
    border-color: var(--blue-dark) !important;
    color: #ffffff !important;
    background: var(--blue-dark) !important;
    transform: translateY(0);
    box-shadow: 0 3px 9px rgba(0, 83, 175, .22) !important;
}

.form-control {
    border-radius: 8px;
    border: 1px solid rgba(34,34,34,0.08);
    padding: .6rem .75rem;
    background-color: #ffffff !important;
    box-shadow: none;
}

    .form-control:focus {
        border-color: var(--blue);
        box-shadow: none;
    }

/* ==========================================================================
   6. VISTAS DE AUTENTICACIÓN (Fondo Blanco Algodón y Ajuste de Altura)
   ========================================================================== */
.auth-only,
.auth-only body,
.auth-only .layout-body {
    overflow: hidden !important;
    height: 100vh !important;
    margin-top: 0 !important;
    padding-bottom: 0 !important;
    background-color: var(--white) !important;
}

    /* Forzado del contenedor de contenido en Entity para respetar la sombra superior */
    .auth-only .main-content {
        margin-top: var(--nav-height) !important;
        padding-top: 0 !important;
        height: calc(100vh - var(--nav-height)) !important;
        overflow: hidden !important;
        background-color: var(--white) !important;
        position: relative !important;
        z-index: 1 !important;
    }

    .login-page,
    .auth-only .card,
    .auth-only .card-body,
    .auth-only main {
        display: flex !important;
        flex: 1 !important;
        height: 100% !important;
        background-color: var(--white) !important;
        overflow: hidden !important;
    }

/* BAJAR FORMULARIO: Ajuste de padding superior para que no se meta debajo del Navbar */
.login-left {
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: 0;
    padding: calc(var(--nav-height) + 2rem) 3rem 1.5rem !important; /* Espaciado extra dinámico hacia abajo */
    background-color: var(--white) !important;
}

.login-box {
    width: 100%;
    max-width: 420px;
    padding: clamp(1rem, 2.5vh, 1.5rem);
}

    .login-box h2 {
        font-weight: 700 !important; /* Negrita estricta */
        color: #111827;
        margin-bottom: 0.5rem;
    }

    .login-box p {
        color: #6b7280;
        margin-bottom: 1.25rem;
    }

.login-right {
    flex: 1;
    min-height: 0;
    display: block;
    background: linear-gradient( rgba(0,0,0,0.18), rgba(0,0,0,0.18) ), url('/images/Login/login-bg.jpg') center/cover no-repeat;
    border-radius: 0 8px 8px 0;
}

@media (max-width: 768px) {
    .auth-wrapper {
        flex-direction: column;
    }

    .auth-left {
        height: 260px;
    }

    .login-left {
        padding: calc(var(--nav-height) + 1rem) 1rem 1rem !important;
    }

    .login-right {
        display: none;
    }
}

/* ==========================================================================
   7. SHOWCASE & COMPOSICIÓN EDITORIAL (Preservado)
   ========================================================================== */
.auth-only .login-page {
    margin-top: var(--nav-height) !important;
    height: calc(100vh - var(--nav-height)) !important;
    min-height: 0 !important;
}

.auth-only .login-left {
    align-items: center !important;
    padding: 2rem 3rem !important;
    overflow-y: auto !important;
}

@media (max-width: 768px) {
    .auth-only .login-left {
        padding: 1.5rem 1rem !important;
    }
}

.home-hero {
    position: relative;
    min-height: min(700px, calc(100vh - var(--nav-height)));
    overflow: hidden;
    isolation: isolate;
    background: #0f172a;
}

.home-hero-image {
    width: 100%;
    height: min(700px, calc(100vh - var(--nav-height)));
    min-height: 420px;
    display: block;
    object-fit: cover;
    filter: saturate(1.05) contrast(1.04);
    transform: scale(1.01);
}

.home-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        linear-gradient(90deg, rgba(8, 15, 31, 0.82), rgba(8, 15, 31, 0.38) 56%, rgba(8, 15, 31, 0.08)),
        linear-gradient(0deg, rgba(8, 15, 31, 0.58), rgba(8, 15, 31, 0.02) 48%);
}

.home-hero-copy {
    position: absolute;
    left: clamp(24px, 7vw, 96px);
    bottom: clamp(44px, 9vw, 104px);
    z-index: 1;
    max-width: 620px;
}

.home-hero-copy::before {
    content: "";
    display: block;
    width: 72px;
    height: 4px;
    margin-bottom: 22px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--state-neutral-text), rgba(255, 255, 255, 0.72));
    box-shadow: 0 10px 28px rgba(100, 116, 139, 0.20);
}

.home-hero .hero-title {
    color: #ffffff;
    font-size: clamp(3rem, 5rem, 5.25rem);
    font-weight: 800;
    line-height: 0.98;
    margin-bottom: 1.1rem;
    max-width: 11ch;
    text-wrap: balance;
    text-shadow: 0 12px 34px rgba(0, 0, 0, 0.38);
}

.home-hero .hero-sub {
    color: rgba(255, 255, 255, 0.9);
    max-width: 42rem;
    margin-bottom: 0;
    font-size: 1.15rem;
    font-weight: 500;
    line-height: 1.7;
    text-wrap: pretty;
}

.showcase {
    width: 100%;
    background:
        linear-gradient(180deg, #f8fafc 0%, var(--white) 52%, #eef6ff 100%) !important;
    padding: clamp(44px, 6vw, 84px) 24px;
}

.showcase-heading {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto clamp(22px, 3vw, 36px);
}

.showcase-kicker {
    margin: 0 0 8px;
    color: var(--blue);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

.showcase-heading h2 {
    max-width: 760px;
    margin: 0;
    color: #111827;
    font-size: 2.65rem;
    font-weight: 800;
    line-height: 1.08;
    text-wrap: balance;
}

.showcase-grid {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-flow: dense;
    gap: 18px;
}

.showcase-card {
    position: relative;
    display: flex;
    min-height: 100%;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(0, 75, 158, 0.13);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(17, 24, 39, 0.08);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.showcase-card:hover {
    border-color: rgba(0, 115, 243, 0.28);
    box-shadow: 0 20px 44px rgba(0, 75, 158, 0.14);
    transform: translateY(-3px);
}

.showcase-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 1;
    background: linear-gradient(90deg, var(--blue), var(--state-info-text));
}

.showcase-card-featured {
    grid-column: span 2;
}

.showcase-card-featured .showcase-card-body {
    padding: 26px 28px 28px;
}

.showcase-card-featured h3 {
    max-width: 680px;
    font-size: 1.45rem;
}

.showcase-card-featured p {
    max-width: 620px;
    font-size: 1rem;
}

.showcase-img {
    width: 100%;
    aspect-ratio: 16 / 10;
    display: block;
    object-fit: cover;
    object-position: center;
    background: #e5edf7;
    transition: transform 0.22s ease, filter 0.22s ease;
}

.showcase-card-featured .showcase-img {
    aspect-ratio: 21 / 10;
}

.showcase-card:hover .showcase-img {
    filter: saturate(1.08) contrast(1.03);
    transform: scale(1.025);
}

.showcase-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 22px;
}

.showcase-card h3 {
    margin: 0 0 8px;
    color: #111827;
    font-size: 1.12rem;
    font-weight: 800;
    line-height: 1.25;
    text-wrap: balance;
}

.showcase-card p {
    margin: 0 0 18px;
    color: #4B5563;
    font-size: 0.94rem;
    line-height: 1.55;
}

.showcase-card-body::after {
    content: "";
    width: 42px;
    height: 2px;
    margin: 2px 0 18px;
    order: -1;
    border-radius: 999px;
    background: rgba(0, 115, 243, 0.28);
}

.showcase-link {
    width: max-content;
    margin-top: auto;
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    color: #004b9e;
    border: 1px solid rgba(0, 99, 209, 0.24);
    border-radius: 8px;
    background: rgba(0, 99, 209, 0.08);
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.16s ease, background-color 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

    .showcase-link:hover {
        color: #ffffff;
        background: var(--blue-dark);
        border-color: var(--blue-dark);
        transform: translateY(-1px);
    }

@media (max-width: 768px) {
    .home-hero {
        min-height: 620px;
    }

    .home-hero-image {
        height: 620px;
    }

    .home-hero-copy {
        left: 20px;
        right: 20px;
        bottom: 40px;
    }

    .home-hero .hero-title {
        font-size: 3rem;
    }

    .home-hero .hero-sub {
        font-size: 1rem;
        line-height: 1.6;
    }

    .showcase {
        padding-left: 16px;
        padding-right: 16px;
    }

    .showcase-heading h2 {
        font-size: 2rem;
    }

    .showcase-grid {
        grid-template-columns: 1fr;
    }

    .showcase-card-featured {
        grid-column: auto;
    }

        .showcase-card-featured .showcase-img, .showcase-img {
            aspect-ratio: 16 / 11;
        }
}

/* ==========================================================================
   8. FOOTER (Leyenda Minimalista sin Fondo y Letras Gris #6b6b6b)
   ========================================================================== */
.footer {
    background: transparent !important;
    color: #6b6b6b !important;
    padding: 32px 0 24px;
    width: 100%;
}

    .footer .site-container {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .footer p {
        margin: 0;
        width: 100%;
        font-size: 0.88rem;
        font-weight: 400;
        letter-spacing: 0.02em;
    }

.auth-only .footer,
.auth-only + .footer,
.login-page + .footer {
    display: none !important;
}

/* ==========================================================================
   9. CONFIGURACIÓN DE TABLAS (Márgenes Unificados y Botones Estandarizados)
   ========================================================================== */
/* Forzado estricto de consistencia posicional: alineación matemática idéntica en cada vista */
table, .table {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 1.5rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    vertical-align: top;
}

    table thead tr,
    .table thead tr,
    table tr th,
    .table tr th {
        background-color: var(--table-header-bg) !important;
        color: #111827 !important;
        font-weight: 600;
        text-align: left;
    }

    /* Botones en tablas generales: Look traslúcido elegante. El hover los enciende vivos */
    .table .btn-warning,
    table .btn-warning,
    .table a.btn-warning {
        background-color: var(--state-primary-bg) !important;
        border: 1px solid rgba(0, 115, 243, .30) !important;
        color: var(--state-primary-text) !important;
        box-shadow: none !important;
        backdrop-filter: blur(1px);
        transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
    }

        .table .btn-warning:hover,
        table .btn-warning:hover {
            background-color: rgba(0, 115, 243, .16) !important;
            border-color: rgba(0, 115, 243, .38) !important;
            color: var(--state-primary-text) !important;
            transform: scale(1.02) !important;
            box-shadow: 0 4px 12px rgba(0, 115, 243, .12) !important;
        }

/* ==========================================================================
   10. FORMULARIOS EMP (Empleados, Clientes y formularios tipo tarjeta)
   ========================================================================== */

.emp-create-page {
    max-width: 820px;
    margin: 0 auto;
    padding-bottom: 3rem;
}

/* Header de página */
.emp-page-header { margin-bottom: 2rem; }

.emp-back-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--gray-mid);
    text-decoration: none;
    margin-bottom: 0.6rem;
    transition: color 0.15s;
}
.emp-back-link:hover { color: var(--blue); }

.emp-page-title {
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--gray-dark);
    margin: 0 0 0.25rem;
    letter-spacing: -0.01em;
}
.emp-page-sub {
    font-size: 0.875rem;
    color: var(--gray-mid);
    margin: 0;
}

/* Tarjeta */
.emp-card {
    background: #ffffff;
    border: 1px solid rgba(17,24,39,0.07);
    border-radius: 14px;
    box-shadow: 0 1px 4px rgba(17,24,39,0.04), 0 4px 16px rgba(17,24,39,0.04);
    margin-bottom: 1rem;
    padding: 1.4rem 1.5rem 1.5rem;
}

.emp-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 1.1rem;
}

.emp-card-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(0,115,243,0.08);
    color: var(--blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.emp-card-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--gray-dark);
    margin: 0;
}
.emp-card-desc {
    font-size: 0.78rem;
    color: var(--gray-mid);
    margin: 0;
}

/* Labels */
.emp-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--gray-mid);
    margin-bottom: 6px;
}

.emp-optional {
    font-size: 0.72rem;
    font-weight: 400;
    color: rgba(75,85,99,0.55);
    margin-left: 3px;
}

/* Inputs */
.emp-input {
    font-size: 0.9rem !important;
    border-radius: 9px !important;
    border: 1.5px solid rgba(17,24,39,0.11) !important;
    padding: 0.5rem 0.8rem !important;
    background: #fafafa !important;
    color: var(--gray-dark) !important;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s !important;
}
.emp-input:focus {
    background: #fff !important;
    border-color: var(--blue) !important;
    box-shadow: 0 0 0 3px rgba(0,115,243,0.09) !important;
}
.emp-input::placeholder { color: rgba(75,85,99,0.4) !important; }

textarea.emp-input { resize: vertical; min-height: 72px; }

/* Input grupo cédula */
.emp-input-group .emp-input {
    border-right: none !important;
    border-radius: 9px 0 0 9px !important;
}
.emp-cedula-status {
    background: #fafafa !important;
    border: 1.5px solid rgba(17,24,39,0.11) !important;
    border-left: none !important;
    border-radius: 0 9px 9px 0 !important;
    padding: 0 0.75rem !important;
    transition: border-color 0.15s !important;
}
.emp-input-group:focus-within .emp-input,
.emp-input-group:focus-within .emp-cedula-status {
    border-color: var(--blue) !important;
}

/* Feedback */
.emp-feedback {
    font-size: 0.77rem;
    font-weight: 500;
    margin-top: 5px;
}
.emp-feedback-ok      { color: #166534; }
.emp-feedback-error   { color: #991b1b; }
.emp-feedback-warning { color: #40566f; }

.emp-error {
    display: block;
    font-size: 0.77rem;
    color: var(--danger);
    margin-top: 4px;
}

/* Acciones */
.emp-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 1.25rem;
}

.emp-btn-cancel {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-mid);
    background: transparent;
    border: 1.5px solid rgba(17,24,39,0.13);
    border-radius: 9px;
    padding: 0.5rem 1.25rem;
    text-decoration: none;
    transition: all 0.15s;
}
.emp-btn-cancel:hover {
    background: rgba(17,24,39,0.04);
    color: var(--gray-dark);
    border-color: rgba(17,24,39,0.22);
}

.emp-btn-submit {
    font-size: 0.875rem;
    font-weight: 600;
    color: #fff !important;
    background: var(--blue) !important;
    border: 1.5px solid var(--blue) !important;
    border-radius: 9px;
    padding: 0.5rem 1.5rem;
    transition: all 0.15s;
}
.emp-btn-submit:hover {
    background: var(--blue-dark) !important;
    border-color: var(--blue-dark) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0,115,243,0.20);
}

/* ==========================================================================
   11. TABLAS IDX (Listados de Clientes, Empleados y similares)
   ========================================================================== */
.idx-page {
    max-width: 1100px;
    margin: 0 auto;
    padding-bottom: 3rem;
}

/* Header */
.idx-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    gap: 1rem;
}
.idx-title {
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--gray-dark);
    margin: 0 0 2px;
    letter-spacing: -0.01em;
}
.idx-sub {
    font-size: 0.82rem;
    color: var(--gray-mid);
    margin: 0;
}

.idx-btn-new {
    display: inline-flex;
    align-items: center;
    font-size: 0.875rem;
    font-weight: 600;
    color: #fff !important;
    background: var(--blue) !important;
    border: none;
    border-radius: 9px;
    padding: 0.5rem 1.25rem;
    white-space: nowrap;
    transition: all 0.15s;
    text-decoration: none;
}
.idx-btn-new:hover {
    background: var(--blue-dark) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0,115,243,0.22);
}

/* Alertas */
.idx-alert-success {
    display: flex;
    align-items: center;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    color: #166534;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
}
.idx-alert-error {
    display: flex;
    align-items: center;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    color: #991b1b;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
}

/* Tarjeta contenedora */
.idx-card {
    background: #fff;
    border: 1px solid rgba(17,24,39,0.07);
    border-radius: 14px;
    box-shadow: 0 1px 4px rgba(17,24,39,0.04), 0 4px 16px rgba(17,24,39,0.04);
    overflow: hidden;
}

/* Tabla */
.idx-table { border-collapse: separate; border-spacing: 0; }

.idx-table thead th {
    background: rgba(17,24,39,0.025) !important;
    color: var(--gray-mid) !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(17,24,39,0.07) !important;
    white-space: nowrap;
}

.idx-table tbody tr { transition: background 0.12s; }
.idx-table tbody tr:hover { background: rgba(0,115,243,0.03); }

.idx-table tbody td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid rgba(17,24,39,0.05) !important;
    font-size: 0.875rem;
    color: var(--gray-dark);
    vertical-align: middle;
}
.idx-table tbody tr:last-child td { border-bottom: none !important; }

/* Avatar + nombre */
.idx-avatar-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.idx-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(0,115,243,0.10);
    color: var(--blue);
    font-size: 0.82rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.idx-name {
    display: block;
    font-weight: 600;
    color: var(--gray-dark);
    font-size: 0.875rem;
    line-height: 1.3;
}
.idx-sub-text {
    display: block;
    font-size: 0.75rem;
    color: var(--gray-mid);
    margin-top: 1px;
}

/* Auxiliares */
.idx-mono {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 0.82rem;
    color: var(--gray-mid);
}
.idx-link {
    color: var(--blue);
    text-decoration: none;
    font-size: 0.85rem;
}
.idx-link:hover { text-decoration: underline; }

.idx-location {
    display: flex;
    align-items: center;
    font-size: 0.82rem;
    color: var(--gray-mid);
}
.idx-empty-cell { color: rgba(75,85,99,0.35); font-size: 0.9rem; }

/* Badges */
.idx-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.idx-badge-active   { background: var(--state-positive-bg); color: var(--state-positive-text); }
.idx-badge-inactive { background: var(--state-neutral-bg); color: var(--state-neutral-text); }
.idx-badge-danger   { background: var(--state-negative-bg); color: var(--state-negative-text); }
.idx-badge-primary  { background: var(--state-primary-bg); color: var(--state-primary-text); }
.idx-badge-info     { background: var(--state-info-bg); color: var(--state-info-text); }

.card-header-delete {
    color: var(--state-negative-text);
    background-color: var(--state-negative-bg);
    border-bottom-color: rgba(220, 38, 38, .2);
}

.card-header-delete h3 {
    color: inherit;
}

/* Botones de acción */
.idx-btn-edit {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--blue) !important;
    background: rgba(0,115,243,0.06) !important;
    border: 1px solid rgba(0,115,243,0.15) !important;
    border-radius: 7px;
    padding: 4px 12px;
    transition: all 0.15s;
    text-decoration: none;
}
.idx-btn-edit:hover {
    background: rgba(0,115,243,0.12) !important;
    border-color: rgba(0,115,243,0.3) !important;
}
.idx-btn-secondary {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--gray-mid) !important;
    background: rgba(17,24,39,0.05) !important;
    border: 1px solid rgba(17,24,39,0.12) !important;
    border-radius: 7px;
    padding: 4px 12px;
    transition: all 0.15s;
    text-decoration: none;
}
.idx-btn-secondary:hover { background: rgba(17,24,39,0.09) !important; }

.idx-btn-approve {
    font-size: 0.8rem;
    font-weight: 600;
    color: #166534 !important;
    background: #dcfce7 !important;
    border: 1px solid #bbf7d0 !important;
    border-radius: 7px;
    padding: 4px 12px;
    transition: all 0.15s;
}
.idx-btn-approve:hover { background: #bbf7d0 !important; }

.idx-btn-reject {
    font-size: 0.8rem;
    font-weight: 600;
    color: #991b1b !important;
    background: #fee2e2 !important;
    border: 1px solid #fecaca !important;
    border-radius: 7px;
    padding: 4px 12px;
    transition: all 0.15s;
}
.idx-btn-reject:hover { background: #fecaca !important; }

.idx-btn-danger {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--danger) !important;
    background: rgba(207,74,74,0.06) !important;
    border: 1px solid rgba(207,74,74,0.18) !important;
    border-radius: 7px;
    padding: 4px 12px;
    transition: all 0.15s;
    text-decoration: none;
}
.idx-btn-danger:hover {
    background: rgba(207,74,74,0.12) !important;
    border-color: rgba(207,74,74,0.3) !important;
}

.idx-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
}

/* Estado vacío */
.idx-empty { padding: 4rem 2rem; text-align: center; }
.idx-empty-icon {
    font-size: 2.5rem;
    color: rgba(75,85,99,0.2);
    display: block;
    margin-bottom: 1rem;
}
.idx-empty-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--gray-mid);
    margin: 0 0 4px;
}
.idx-empty-sub {
    font-size: 0.82rem;
    color: rgba(75,85,99,0.6);
    margin: 0;
}
.dashboard-page {
    --dashboard-1: #0063d1;
    --dashboard-2: #005fc9;
    --dashboard-3: #005bc0;
    --dashboard-4: #004b9e;
    --dashboard-5: #00336b;
    --dashboard-6: #001b38;
}

.dashboard-heading {
    margin-bottom: 2rem;
}

.dashboard-heading p {
    margin: .4rem 0 0;
    color: #526477;
}

.dashboard-eyebrow {
    display: block;
    margin-bottom: .35rem;
    color: var(--dashboard-3);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.dashboard-tile {
    position: relative;
    display: flex;
    min-height: 180px;
    height: 100%;
    padding: 1.6rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 14px;
    color: #fff;
    flex-direction: column;
    justify-content: flex-end;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(0, 27, 56, .13), 0 2px 6px rgba(0, 27, 56, .10);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease, border-color .2s ease;
}

.dashboard-tile::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 38%),
        linear-gradient(0deg, rgba(0, 0, 0, .08), rgba(0, 0, 0, 0) 58%);
    pointer-events: none;
}

.dashboard-tile::after {
    display: none;
}

.dashboard-tile:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, .36);
    filter: brightness(1.06);
    transform: translateY(-3px);
    box-shadow: 0 16px 32px rgba(0, 27, 56, .22), 0 4px 10px rgba(0, 27, 56, .12);
}

.dashboard-tile:active {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(0, 27, 56, .18);
}

.dashboard-tile i {
    position: relative;
    z-index: 1;
    width: 46px;
    height: 46px;
    margin-bottom: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .20);
    border-radius: 12px;
    background: rgba(255, 255, 255, .13);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
    font-size: 1.55rem;
    opacity: .96;
}

.dashboard-tile span {
    position: relative;
    z-index: 1;
    font-size: 1.2rem;
    font-weight: 800;
}

.dashboard-tile small {
    position: relative;
    z-index: 1;
    display: block;
    margin-top: .35rem;
    color: rgba(255, 255, 255, .82);
    line-height: 1.45;
}

.dashboard-metric {
    --kpi-accent: var(--state-neutral-text);
    --kpi-tint: var(--state-neutral-bg);
    --kpi-border: rgba(100, 116, 139, .28);
}

.kpi-card,
.dashboard-metric {
    position: relative;
    min-height: 132px;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, .20);
    border-radius: 14px;
    color: #334155;
    border-color: var(--kpi-border);
    background: var(--kpi-tint);
    box-shadow: -8px 10px 24px rgba(15, 23, 42, .075),
                0 4px 12px rgba(15, 23, 42, .035);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.kpi-card::before,
.dashboard-metric::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 0;
    width: 28px;
    background: linear-gradient(90deg,
                color-mix(in srgb, var(--kpi-accent) 14%, transparent),
                transparent);
    pointer-events: none;
}

.kpi-card:hover,
.dashboard-metric:hover {
    transform: translateY(-2px);
    border-color: var(--kpi-accent);
    box-shadow: -10px 13px 30px rgba(15, 23, 42, .09),
                0 5px 14px rgba(15, 23, 42, .045);
}

.dashboard-metric h3 {
    position: relative;
    margin-bottom: .3rem;
    color: var(--kpi-accent);
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.05;
}

.dashboard-metric p {
    position: relative;
    color: #475569;
    font-size: .88rem;
    font-weight: 600;
}

.dashboard-metric .card-body {
    position: relative;
    z-index: 1;
    display: flex;
    min-height: 132px;
    padding: 1.5rem 1.65rem;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    text-align: left;
}

.kpi-card {
    --kpi-accent: var(--state-neutral-text);
    --kpi-tint: var(--state-neutral-bg);
    --kpi-border: rgba(100, 116, 139, .28);
    display: flex;
    padding: 1.5rem 1.65rem;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
}

.kpi-card > i {
    margin-bottom: .65rem;
    color: var(--kpi-accent);
    font-size: 1.1rem;
}

.kpi-card > span {
    color: var(--kpi-accent);
    font-size: 2.25rem !important;
    font-weight: 700 !important;
    line-height: 1.05;
}

.kpi-card > small {
    margin-top: .35rem;
    color: #475569;
    font-size: .82rem;
    font-weight: 600;
}

.kpi-card-total {
    min-height: 86px;
    padding: 0;
}

.kpi-card-total .card-body {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 1.25rem 1.65rem;
}

.kpi-card-total .fs-3 {
    color: var(--kpi-accent);
    font-weight: 700 !important;
}

.admin-work-alert {
    border: 1px solid rgba(0, 99, 209, .16);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 16px 36px rgba(0, 27, 56, .10), 0 4px 10px rgba(0, 27, 56, .06);
    padding: 1.25rem;
}

.admin-work-alert-head {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin-bottom: 1rem;
}

.admin-work-alert-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #004b9e;
    background: rgba(0, 99, 209, .10);
    border: 1px solid rgba(0, 99, 209, .18);
    font-size: 1.2rem;
}

.admin-work-alert h2 {
    margin: 0;
    color: #111827;
    font-size: 1.2rem;
    font-weight: 800;
}

.admin-work-alert-list {
    display: grid;
    gap: .75rem;
}

.admin-work-alert-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid rgba(17, 24, 39, .08);
    border-radius: 12px;
    background: rgba(248, 250, 252, .86);
}

.admin-work-alert-content {
    min-width: 0;
    flex: 1 1 auto;
}

.admin-work-alert-item strong {
    color: #111827;
    font-weight: 800;
}

.admin-work-alert-item p {
    margin: .25rem 0;
    color: #334155;
    font-weight: 500;
}

.admin-work-alert-item small {
    color: #64748b;
}

.admin-work-alert-actions {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
    flex: 0 0 auto;
}

.admin-work-alert-actions form {
    margin: 0;
}

@media (max-width: 767.98px) {
    .admin-work-alert-item {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-work-alert-actions {
        justify-content: flex-start;
    }
}

.dashboard-tone-1 { background: var(--dashboard-1); }
.dashboard-tone-2 { background: var(--dashboard-2); }
.dashboard-tone-3 { background: var(--dashboard-3); }
.dashboard-tone-4 { background: var(--dashboard-4); }
.dashboard-tone-5 { background: var(--dashboard-5); }
.dashboard-tone-6 { background: var(--dashboard-6); }

/* ==========================================================================
   SISTEMA DE ACCIONES
   El color identifica la intención y todos los botones comparten dimensiones.
   ========================================================================== */
.btn:not(.btn-close):not(.btn-link),
.idx-btn-new,
.idx-btn-edit,
.idx-btn-secondary,
.idx-btn-approve,
.idx-btn-reject,
.idx-btn-danger,
.emp-btn-cancel,
.emp-btn-submit {
    display: inline-flex;
    min-width: 112px;
    height: 40px;
    padding: 0 1rem !important;
    border-width: 1px !important;
    border-radius: 9px !important;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    font-size: .875rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    white-space: nowrap;
    text-decoration: none;
    box-shadow: none !important;
    transition: color .18s ease, background-color .18s ease,
                border-color .18s ease, transform .18s ease,
                box-shadow .18s ease !important;
}

.btn-sm:not(.btn-close):not(.btn-link) {
    min-width: 96px;
    height: 36px;
    padding: 0 .8rem !important;
    font-size: .8rem !important;
}

.btn-primary,
.btn-outline-primary,
.idx-btn-new,
.idx-btn-edit,
.emp-btn-submit {
    color: #004b9e !important;
    background: rgba(0, 99, 209, .10) !important;
    border-color: rgba(0, 99, 209, .28) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.idx-btn-new:hover,
.idx-btn-edit:hover,
.emp-btn-submit:hover {
    color: #003f85 !important;
    background: rgba(0, 99, 209, .18) !important;
    border-color: rgba(0, 99, 209, .38) !important;
    transform: translateY(-1px);
    box-shadow: 0 5px 12px rgba(0, 75, 158, .12) !important;
}

.btn-secondary,
.btn-outline-secondary,
.idx-btn-secondary,
.emp-btn-cancel {
    color: #475569 !important;
    background: rgba(71, 85, 105, .08) !important;
    border-color: rgba(71, 85, 105, .22) !important;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.idx-btn-secondary:hover,
.emp-btn-cancel:hover {
    color: #334155 !important;
    background: rgba(71, 85, 105, .15) !important;
    border-color: rgba(71, 85, 105, .32) !important;
    transform: translateY(-1px);
}

.btn-action-edit,
.btn-action-delete,
.btn-action-view,
.btn-action-save,
.btn-action-cancel,
.btn-action-activate,
.btn-action-deactivate,
.btn-action-create,
.btn-action-filter,
.btn-action-upload {
    display: inline-flex;
    min-width: 112px;
    height: 40px;
    padding: 0 1rem !important;
    border: 1px solid transparent !important;
    border-radius: 9px !important;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    font-size: .875rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    white-space: nowrap;
    text-decoration: none;
    box-shadow: none !important;
    transition: color .18s ease, background-color .18s ease,
                border-color .18s ease, transform .18s ease,
                box-shadow .18s ease !important;
}

.btn-sm.btn-action-edit,
.btn-sm.btn-action-delete,
.btn-sm.btn-action-view,
.btn-sm.btn-action-save,
.btn-sm.btn-action-cancel,
.btn-sm.btn-action-activate,
.btn-sm.btn-action-deactivate,
.btn-sm.btn-action-create,
.btn-sm.btn-action-filter,
.btn-sm.btn-action-upload {
    min-width: 96px;
    height: 36px;
    padding: 0 .8rem !important;
    font-size: .8rem !important;
}

.btn-icon-action {
    min-width: 36px !important;
    width: 36px;
    height: 36px;
    padding: 0 !important;
}

.btn-action-edit,
.btn-action-create {
    color: var(--state-primary-text) !important;
    background: rgba(0, 115, 243, .08) !important;
    border-color: rgba(0, 115, 243, .30) !important;
}

.btn-action-edit:hover,
.btn-action-edit:focus,
.btn-action-create:hover,
.btn-action-create:focus {
    color: var(--state-primary-text) !important;
    background: rgba(0, 115, 243, .14) !important;
    border-color: rgba(0, 115, 243, .45) !important;
}

.btn-action-view,
.btn-action-upload {
    color: var(--state-info-text) !important;
    background: rgba(8, 145, 178, .08) !important;
    border-color: rgba(8, 145, 178, .30) !important;
}

.btn-action-view:hover,
.btn-action-view:focus,
.btn-action-upload:hover,
.btn-action-upload:focus {
    color: var(--state-info-text) !important;
    background: rgba(8, 145, 178, .14) !important;
    border-color: rgba(8, 145, 178, .45) !important;
}

.btn-action-save,
.btn-action-activate {
    color: var(--state-positive-text) !important;
    background: rgba(22, 163, 74, .08) !important;
    border-color: rgba(22, 163, 74, .30) !important;
}

.btn-action-save:hover,
.btn-action-save:focus,
.btn-action-activate:hover,
.btn-action-activate:focus {
    color: var(--state-positive-text) !important;
    background: rgba(22, 163, 74, .14) !important;
    border-color: rgba(22, 163, 74, .45) !important;
}

.btn-action-delete,
.btn-action-deactivate {
    color: var(--state-negative-text) !important;
    background: rgba(220, 38, 38, .07) !important;
    border-color: rgba(220, 38, 38, .28) !important;
}

.btn-action-delete:hover,
.btn-action-delete:focus,
.btn-action-deactivate:hover,
.btn-action-deactivate:focus {
    color: var(--state-negative-text) !important;
    background: rgba(220, 38, 38, .13) !important;
    border-color: rgba(220, 38, 38, .42) !important;
}

.btn-action-cancel {
    color: var(--state-neutral-text) !important;
    background: rgba(100, 116, 139, .08) !important;
    border-color: rgba(100, 116, 139, .28) !important;
}

.btn-action-cancel:hover,
.btn-action-cancel:focus {
    color: #475569 !important;
    background: rgba(100, 116, 139, .14) !important;
    border-color: rgba(100, 116, 139, .42) !important;
}

.btn-action-filter {
    color: #475569 !important;
    background: rgba(100, 116, 139, .08) !important;
    border-color: rgba(100, 116, 139, .28) !important;
}

.btn-action-filter:hover,
.btn-action-filter:focus {
    color: #475569 !important;
    background: rgba(100, 116, 139, .14) !important;
    border-color: rgba(100, 116, 139, .42) !important;
}

.btn-action-edit:hover,
.btn-action-delete:hover,
.btn-action-view:hover,
.btn-action-save:hover,
.btn-action-cancel:hover,
.btn-action-activate:hover,
.btn-action-deactivate:hover,
.btn-action-create:hover,
.btn-action-filter:hover,
.btn-action-upload:hover {
    transform: translateY(-1px);
}

.btn-success,
.btn-outline-success,
.idx-btn-approve {
    color: #166534 !important;
    background: rgba(22, 163, 74, .10) !important;
    border-color: rgba(22, 163, 74, .28) !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-outline-success:hover,
.btn-outline-success:focus,
.idx-btn-approve:hover {
    color: #14532d !important;
    background: rgba(22, 163, 74, .18) !important;
    border-color: rgba(22, 163, 74, .38) !important;
    transform: translateY(-1px);
    box-shadow: 0 5px 12px rgba(21, 128, 61, .11) !important;
}

.btn-warning,
.btn-outline-warning,
.table .btn-warning,
table .btn-warning,
.table a.btn-warning {
    color: var(--state-primary-text) !important;
    background: rgba(0, 115, 243, .08) !important;
    border-color: rgba(0, 115, 243, .30) !important;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-outline-warning:hover,
.btn-outline-warning:focus,
.table .btn-warning:hover,
.table .btn-warning:focus,
table .btn-warning:hover,
table .btn-warning:focus {
    color: var(--state-primary-text) !important;
    background: rgba(0, 115, 243, .16) !important;
    border-color: rgba(0, 115, 243, .38) !important;
    transform: translateY(-1px);
    box-shadow: 0 5px 12px rgba(146, 64, 14, .11) !important;
}

/* Estados de advertencia y pendientes: paleta gris uniforme. */
.alert-warning {
    color: var(--state-neutral-text) !important;
    background-color: var(--state-neutral-bg) !important;
    border-color: rgba(100, 116, 139, .24) !important;
}

.badge.bg-warning,
.bg-warning {
    color: var(--state-neutral-text) !important;
    background-color: var(--state-neutral-bg) !important;
}

.text-warning {
    color: var(--state-neutral-text) !important;
}

.table-warning,
.table-warning > th,
.table-warning > td {
    --bs-table-bg: rgba(100, 116, 139, .07);
    --bs-table-striped-bg: rgba(100, 116, 139, .09);
    --bs-table-hover-bg: rgba(100, 116, 139, .12);
    --bs-table-color: #475569;
    border-color: rgba(100, 116, 139, .18);
}

.btn-danger,
.btn-outline-danger,
.idx-btn-danger,
.idx-btn-reject {
    color: #b42318 !important;
    background: rgba(220, 38, 38, .08) !important;
    border-color: rgba(220, 38, 38, .24) !important;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-outline-danger:hover,
.btn-outline-danger:focus,
.idx-btn-danger:hover,
.idx-btn-reject:hover {
    color: #991b1b !important;
    background: rgba(220, 38, 38, .16) !important;
    border-color: rgba(220, 38, 38, .34) !important;
    transform: translateY(-1px);
    box-shadow: 0 5px 12px rgba(180, 35, 24, .11) !important;
}

.btn-info,
.btn-outline-info {
    color: #075985 !important;
    background: rgba(14, 165, 233, .10) !important;
    border-color: rgba(14, 165, 233, .28) !important;
}

.btn-info:hover,
.btn-info:focus,
.btn-outline-info:hover,
.btn-outline-info:focus {
    color: #075985 !important;
    background: rgba(14, 165, 233, .18) !important;
    border-color: rgba(14, 165, 233, .38) !important;
    transform: translateY(-1px);
}

.idx-actions,
.d-flex.gap-2 {
    align-items: center;
}

.dashboard-grid > [class*="col-"] {
    display: flex;
}

.dashboard-grid .dashboard-tile {
    width: 100%;
    min-height: 190px;
}

/* Conteos: color semántico para reconocer estados de un vistazo. */
.metric-pending {
    --kpi-accent: var(--state-neutral-text);
    --kpi-tint: var(--state-neutral-bg);
    --kpi-border: rgba(100, 116, 139, .28);
}

.metric-progress {
    --kpi-accent: var(--state-info-text);
    --kpi-tint: var(--state-info-bg);
    --kpi-border: rgba(8, 145, 178, .28);
}

.metric-complete {
    --kpi-accent: var(--state-positive-text);
    --kpi-tint: var(--state-positive-bg);
    --kpi-border: rgba(22, 163, 74, .28);
}

.metric-total {
    --kpi-accent: var(--state-primary-text);
    --kpi-tint: var(--state-primary-bg);
    --kpi-border: rgba(0, 115, 243, .28);
}

.kpi-pending {
    --kpi-accent: var(--state-neutral-text);
    --kpi-tint: var(--state-neutral-bg);
    --kpi-border: rgba(100, 116, 139, .28);
}

.kpi-info {
    --kpi-accent: var(--state-info-text);
    --kpi-tint: var(--state-info-bg);
    --kpi-border: rgba(8, 145, 178, .28);
}

.kpi-positive {
    --kpi-accent: var(--state-positive-text);
    --kpi-tint: var(--state-positive-bg);
    --kpi-border: rgba(22, 163, 74, .28);
}

.kpi-negative {
    --kpi-accent: var(--state-negative-text);
    --kpi-tint: var(--state-negative-bg);
    --kpi-border: rgba(220, 38, 38, .28);
}

.kpi-neutral {
    --kpi-accent: var(--state-primary-text);
    --kpi-tint: var(--state-primary-bg);
    --kpi-border: rgba(0, 115, 243, .28);
}

.quote-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
}

.quote-photo-link {
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border: 1px solid rgba(0, 75, 158, .18);
    border-radius: 12px;
    background: #eef5fc;
}

.quote-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .2s ease;
}

.quote-photo-link:hover .quote-photo {
    transform: scale(1.04);
}

/* ── Section 13: doc-* (REI-002 Documentos técnicos) ─────────────────────── */
.doc-upload-form {
    background: #f8fafc;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    padding: 1rem 1.1rem .85rem;
}

.doc-label {
    display: block;
    font-size: .78rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: .25rem;
}

.doc-label-opt {
    font-weight: 400;
    color: #9ca3af;
}

.doc-hint {
    font-size: .72rem;
    color: #9ca3af;
    margin-top: .2rem;
}

.btn-icon-outline-primary {
    width: 2rem;
    height: 2rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    border: 1.5px solid #bfdbfe;
    color: #2563eb;
    background: #eff6ff;
    transition: background .15s, border-color .15s;
}

.btn-icon-outline-primary:hover {
    background: #dbeafe;
    border-color: #93c5fd;
    color: #1d4ed8;
}

.btn-icon-outline-danger {
    width: 2rem;
    height: 2rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    border: 1.5px solid #fecaca;
    color: #dc2626;
    background: #fef2f2;
    transition: background .15s, border-color .15s;
}

.btn-icon-outline-danger:hover {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #b91c1c;
}