:root {
    --nh-black: #111111;
    --nh-gray: #4B4B4B;
    --nh-yellow: #FAD400;
    --nh-blue: #005CB8;
    --nh-green: #00B009;
    --nh-bg: #ECECEC;
}

html,
body {
    font-family: 'Calibri', 'Carlito', 'Segoe UI', Arial, sans-serif;
    background-color: var(--nh-bg);
    color: #111111;
    -webkit-font-smoothing: antialiased;
}

/* Architectural uppercase style helper */
.architectural-title {
    font-family: 'Calibri', 'Carlito', 'Segoe UI', Arial, sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

/* Minimal hairline borders */
.hairline-border {
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.hairline-border-dark {
    border: 1px solid rgba(255, 255, 255, 0.12);
}

/* Scrollbar minimalista */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #E5E5E5;
}

::-webkit-scrollbar-thumb {
    background: #A0A0A0;
}

::-webkit-scrollbar-thumb:hover {
    background: #4B4B4B;
}

[x-cloak] {
    display: none !important;
}

/* Background grid sutil estilo editorial */
.grid-bg-subtle {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
}

.grid-bg-dark {
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 40px 40px;
}

/* ============================================================
   Cajas de gestión con fondo pastel de urgencia y alta legibilidad
   ============================================================ */
.caja-gestion-verde {
    background-color: #DCFCE7 !important; /* Verde pastel suave y visible */
    border: 1px solid #86EFAC !important;
    border-left: 5px solid #16A34A !important;
    color: #14532D !important;
}
.caja-gestion-amarillo {
    background-color: #FEF3C7 !important; /* Amarillo/ámbar pastel suave y visible */
    border: 1px solid #FCD34D !important;
    border-left: 5px solid #D97706 !important;
    color: #78350F !important;
}
.caja-gestion-rojo {
    background-color: #FEE2E2 !important; /* Rojo/coral pastel suave y visible */
    border: 1px solid #FCA5A5 !important;
    border-left: 5px solid #DC2626 !important;
    color: #7F1D1D !important;
}
.caja-gestion-default {
    background-color: #F8FAFC !important; /* Neutro claro */
    border: 1px solid #E2E8F0 !important;
    border-left: 5px solid #94A3B8 !important;
    color: #1E293B !important;
}

/* Enlaces dentro de cajas de gestión */
.caja-gestion-verde a { color: #15803D !important; text-decoration: underline; }
.caja-gestion-amarillo a { color: #B45309 !important; text-decoration: underline; }
.caja-gestion-rojo a { color: #B91C1C !important; text-decoration: underline; }
.caja-gestion-default a { color: #005CB8 !important; text-decoration: underline; }