/* ================================================================
   SIMAC ERP — SISTEMA DE DISEÑO CORPORATIVO v2.0
   Ingeniería & Construcción · Hidráulica · Industria · Chile
   ================================================================ */

/* ── 1. VARIABLES CORPORATIVAS SIMAC ─────────────────────────── */
:root {
    /* Paleta corporativa (definida por gerencia SIMAC) */
    --simac-primary:        #7DB21B;   /* Verde corporativo */
    --simac-primary-dark:   #5D8914;   /* Verde oscuro — hover/pressed */
    --simac-primary-light:  #DCEEAC;   /* Oliva claro — sidebar base */
    --simac-primary-pale:   #F1F8E4;   /* Oliva pálido — fondos */
    --simac-brand:          #BCE632;   /* Verde brillante — acento marca */
    --simac-accent:         #C5A028;   /* Dorado SIMAC */
    --simac-accent-light:   #F5E8A0;   /* Dorado suave */
    --simac-dark:           #1B2D0C;   /* Verde oscuro corporativo */
    --simac-charcoal:       #2F4A18;   /* Carbón verde */

    /* Identidad — tonos tomados del propio isotipo SIMAC, no inventados.
       Sostienen el encabezado (marca + barra superior); el resto de la paleta
       institucional queda intacta. */
    --simac-brand-lime:     #B9DC3C;   /* Lima del arco superior del isotipo */
    --simac-brand-forest:   #076633;   /* Verde exacto del logotipo SIMAC (medido del logo) */
    --simac-brand-ink:      #134A2E;   /* Superficie profunda de marca */
    --simac-brand-ink-top:  #1E6B45;   /* Cabecera del degradado de marca */
    --simac-topbar-h:       68px;      /* = isotipo 40px + 14px de aire arriba y abajo:
                                          la marca y la barra superior cierran en la misma línea */

    /* Fondos */
    --simac-bg:             #F1F8E4;
    --simac-card:           #FFFFFF;
    --simac-sidebar-bg:     #DCEEAC;
    --simac-sidebar-dark:   #1F3A0A;

    /* Texto */
    --simac-text:           #1B2D0C;
    --simac-text-sec:       #4A6030;
    --simac-text-muted:     #7A9050;
    --simac-text-inverse:   #FFFFFF;

    /* Semánticos */
    --simac-success:        #27AE60;
    --simac-success-bg:     #E9FAF2;
    --simac-warning:        #D4870A;
    --simac-warning-bg:     #FEF6E4;
    --simac-danger:         #C0392B;
    --simac-danger-bg:      #FDECEA;
    --simac-info:           #1E6FA8;
    --simac-info-bg:        #E8F4FD;

    /* UI */
    --simac-border:         #C5D99A;
    --simac-border-light:   #E4F0CC;
    --simac-radius:         6px;
    --simac-radius-lg:      10px;
    --simac-radius-xl:      16px;
    --simac-sh-xs:          0 1px 4px rgba(27,45,12,.06);
    --simac-sh:             0 2px 12px rgba(27,45,12,.09);
    --simac-sh-lg:          0 6px 28px rgba(27,45,12,.14);
    --simac-t:              all .22s ease;
    --simac-t-slow:         all .4s ease;

    /* Bootstrap overrides */
    --bs-body-font-family:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --bs-body-bg:           #F1F8E4;
    --bs-body-color:        #1B2D0C;
    --bs-primary:           #7DB21B;
    --bs-primary-rgb:       125, 178, 27;
    --bs-border-radius:     6px;
    --bs-link-color:        #5D8914;
}


/* ── 1.1 INPUTS FINANCIEROS — Spinners & Máscara ─────────────── */

/* Eliminar flechas en type="number" — Chrome / Edge / Safari */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* Firefox */
input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Inputs con máscara de dinero */
input.simac-money,
input[data-simac-mask="money"] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

/* Display de KPIs numéricos alineados a la derecha */
.simac-num-right {
    text-align: right;
    font-variant-numeric: tabular-nums;
}


/* ── 2. BASE & TIPOGRAFÍA ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: var(--bs-body-font-family);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: var(--simac-bg);
    color: var(--simac-text);
    font-size: 14px;
    line-height: 1.55;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    color: var(--simac-dark);
    line-height: 1.25;
    margin-bottom: .5rem;
}

a { color: var(--simac-primary-dark); transition: var(--simac-t); }
a:hover { color: var(--simac-primary); }

.text-primary  { color: var(--simac-primary)  !important; }
.text-success  { color: var(--simac-success)  !important; }
.text-warning  { color: var(--simac-warning)  !important; }
.text-danger   { color: var(--simac-danger)   !important; }
.text-info     { color: var(--simac-info)     !important; }
.text-muted    { color: var(--simac-text-muted) !important; }

.bg-primary   { background-color: var(--simac-primary)  !important; }
.bg-success   { background-color: var(--simac-success)  !important; }
.bg-warning   { background-color: var(--simac-warning)  !important; }
.bg-danger    { background-color: var(--simac-danger)   !important; }
.bg-info      { background-color: var(--simac-info)     !important; }
.bg-dark      { background-color: var(--simac-dark)     !important; }

/* FIX iconos KPI (Flujo de Efectivo / Gestión Comercial / RRHH):
   Las reglas .bg-* de arriba son SÓLIDAS (!important) y anulan el bg-opacity de Bootstrap.
   En las tarjetas KPI el círculo (.bg-X .bg-opacity-10) quedaba del MISMO color que el glifo
   (.text-X) → icono invisible (se veía solo el círculo). Restauramos el modo translúcido:
   selector de 2 clases (más específico) + !important → gana y deja el círculo claro. */
.bg-primary.bg-opacity-10   { background-color: rgba(var(--bs-primary-rgb),   .12) !important; }
.bg-success.bg-opacity-10   { background-color: rgba(var(--bs-success-rgb),   .12) !important; }
.bg-warning.bg-opacity-10   { background-color: rgba(var(--bs-warning-rgb),   .12) !important; }
.bg-danger.bg-opacity-10    { background-color: rgba(var(--bs-danger-rgb),    .12) !important; }
.bg-info.bg-opacity-10      { background-color: rgba(var(--bs-info-rgb),      .12) !important; }
.bg-secondary.bg-opacity-10 { background-color: rgba(var(--bs-secondary-rgb), .12) !important; }

/* ── Icono KPI (Flujo de Efectivo / Gestión Comercial): círculo con degradé + glifo BLANCO.
   Look fino y consistente, siempre visible (no depende de bg-opacity ni del color del texto). ── */
.kpi-ico{
    width:42px; height:42px; flex:0 0 42px;
    display:inline-flex; align-items:center; justify-content:center;
    border-radius:50%; font-size:1.05rem; line-height:1;
    color:#fff !important;
    box-shadow:0 3px 8px rgba(16,24,40,.16);
}
.kpi-ico i{ color:#fff !important; }
.kpi-ico.kpi-success   { background:linear-gradient(135deg,#2fc36b,#1f9d57); }
.kpi-ico.kpi-danger    { background:linear-gradient(135deg,#ff6b6b,#e03131); }
.kpi-ico.kpi-primary   { background:linear-gradient(135deg,#4dabf7,#1c7ed6); }
.kpi-ico.kpi-warning   { background:linear-gradient(135deg,#ffc14d,#f08c00); }
.kpi-ico.kpi-info      { background:linear-gradient(135deg,#3bc9db,#1098ad); }
.kpi-ico.kpi-secondary { background:linear-gradient(135deg,#aeb6bf,#7a828c); }
.kpi-ico.kpi-brand     { background:linear-gradient(135deg,#a8d52a,#7DB21B); }


/* ── 3. LAYOUT BASE ───────────────────────────────────────────── */
.content {
    background: var(--simac-bg) !important;
}

.container-fluid {
    max-width: 1600px;
}


/* ── 4. SIDEBAR CORPORATIVO ───────────────────────────────────── */
.sidebar {
    background: var(--simac-sidebar-bg) !important;
    padding: 0 !important;
    border-right: none !important;
    box-shadow: 3px 0 20px rgba(27,45,12,.12) !important;
    display: flex;
    flex-direction: column;
}

/* --- 4.1 LOCKUP DE MARCA ---------------------------------------------------
   Markup: app/views/includes/brand.php · el mismo lockup en sidebar, barra
   superior y login. El logo corporativo manda: se sirve en su versión oficial
   (color o blanca) sin filtros, sin recortes y sin repetir el nombre al lado.
   El distintivo de producto acompaña; nunca compite. */
.simac-lockup {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    text-decoration: none;
    line-height: 1;
}

.simac-isotipo,
.simac-logo {
    display: block;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
}

.simac-wordmark {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.simac-brand-name {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--simac-brand-forest);
    white-space: nowrap;
}

/* Descriptor de producto — patrón corporativo «marca │ producto».
   Un filete fino los separa: la marca domina, el descriptor acompaña en voz
   baja. Sustituye al subtítulo largo en versalitas.

   Acabado tornasol: el texto lleva un degradado verde→morado y, cada ~8 s, un
   haz de luz lo recorre. Dos capas recortadas al texto (background-clip) — la
   de arriba es el haz, la de abajo el tornasol fijo. `color` se conserva como
   respaldo: si el navegador no soporta el recorte, el texto se ve plano, nunca
   invisible. */
.simac-brand-tag {
    position: relative;
    padding-left: 14px;
    font-size: 12px;          /* algo más de presencia; sigue por debajo del logotipo */
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--simac-text-muted);
    white-space: nowrap;

    --tag-turquesa: #0E9488;
    --tag-morado:   #6D28D9;
    --tag-haz:      rgba(255,255,255,.92);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .simac-brand-tag {
        background-image:
            linear-gradient(100deg, transparent 0%, var(--tag-haz) 50%, transparent 100%),
            linear-gradient(94deg, var(--tag-turquesa) 0%, var(--tag-morado) 100%);
        background-size: 55% 100%, 100% 100%;
        background-repeat: no-repeat;
        background-position: -150% 0, 0 0;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: simac-tornasol 8s linear infinite;
    }
}

/* El haz cruza en ~1,6 s y el resto del ciclo descansa (intervalo fijo de 8 s).
   Límites extendidos (-150% a 250%) para asegurar la salida completa del haz sin residuos en la 'P'. */
@keyframes simac-tornasol {
    0%, 80%  { background-position: -150% 0, 0 0; }
    100%     { background-position: 250% 0, 0 0; }
}

@media (prefers-reduced-motion: reduce) {
    .simac-brand-tag { animation: none; }
}

.simac-brand-tag::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 22px;
    background: currentColor;
    opacity: .38;
}

/* Sobre superficie oscura — el tornasol sube de luminosidad para no apagarse
   contra el verde profundo de la marca. */
.simac-lockup--on-dark .simac-brand-name { color: #FFFFFF; }
.simac-lockup--on-dark .simac-brand-tag  {
    color: rgba(255,255,255,.55);
    --tag-turquesa: #3FE0CE;
    --tag-morado:   #B79CFF;
    --tag-haz:      #FFFFFF;
}

/* Escalas */
.simac-lockup--sm { gap: 10px; }
.simac-lockup--sm .simac-wordmark    { gap: 11px; }
.simac-lockup--sm .simac-brand-name  { font-size: 15px; }
.simac-lockup--sm .simac-brand-tag   { font-size: 10px; padding-left: 11px; }
.simac-lockup--sm .simac-brand-tag::before { height: 16px; }

.simac-lockup--lg { gap: 20px; }
.simac-lockup--lg .simac-wordmark    { gap: 18px; }
.simac-lockup--lg .simac-brand-name  { font-size: 34px; letter-spacing: .05em; }
.simac-lockup--lg .simac-brand-tag   { font-size: 15px; padding-left: 18px; }
.simac-lockup--lg .simac-brand-tag::before { height: 30px; }

/* --- Encabezado de marca del sidebar --- */
.simac-brand {
    background: linear-gradient(150deg, var(--simac-brand-ink-top) 0%, var(--simac-brand-ink) 72%);
    padding: 0;
    /* Filete de 1px en lugar del zócalo lima de 2px: acento, no subrayado */
    border-bottom: 1px solid rgba(185,220,60,.32);
    flex-shrink: 0;
}

.simac-brand .simac-lockup {
    display: flex;
    padding: 14px 20px;              /* la altura la fija el isotipo: 40 + 14 + 14 = 68px */
    transition: var(--simac-t);
}

.simac-brand .simac-lockup:hover { background: rgba(185,220,60,.07); }

.simac-brand .simac-lockup:focus-visible {
    outline: 2px solid var(--simac-brand-lime);
    outline-offset: -3px;
}

/* --- Navegación principal --- */
.simac-nav {
    padding: 8px 0;
    overflow-y: auto;
    flex: 1;
}

/* Scrollbar personalizado */
.simac-nav::-webkit-scrollbar { width: 4px; }
.simac-nav::-webkit-scrollbar-track { background: transparent; }
.simac-nav::-webkit-scrollbar-thumb {
    background: rgba(27,45,12,.18);
    border-radius: 4px;
}

/* Secciones / etiquetas */
.simac-nav-section {
    display: block;
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--simac-text-sec);
    padding: 18px 18px 5px;
    opacity: .65;
}

/* Links principales */
.simac-nav-link {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 9px 16px !important;
    color: var(--simac-dark) !important;
    font-size: 12.5px;
    font-weight: 500;
    border-left: 3px solid transparent !important;
    border-radius: 0 8px 8px 0 !important;
    margin-right: 10px;
    text-decoration: none;
    transition: var(--simac-t);
    position: relative;
    outline: none !important;
}

.simac-nav-link:hover {
    background: rgba(125,178,27,.16) !important;
    border-left-color: var(--simac-primary) !important;
    color: var(--simac-dark) !important;
}

.simac-nav-link.active,
.simac-nav-link[aria-expanded="true"] {
    background: rgba(125,178,27,.22) !important;
    border-left-color: var(--simac-primary) !important;
    font-weight: 600;
    color: var(--simac-dark) !important;
}

/* Icono en caja */
.simac-nav-icon {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(27,45,12,.09);
    border-radius: 6px;
    font-size: 13px;
    color: var(--simac-charcoal);
    flex-shrink: 0;
    transition: var(--simac-t);
}

.simac-nav-link:hover .simac-nav-icon,
.simac-nav-link.active .simac-nav-icon,
.simac-nav-link[aria-expanded="true"] .simac-nav-icon {
    background: var(--simac-primary);
    color: #FFFFFF;
}

/* Ocultar arrow Bootstrap nativo */
.sidebar .navbar .dropdown-toggle::after,
.simac-nav-link.dropdown-toggle::after {
    display: none !important;
}

/* Flecha personalizada */
.simac-nav-link.dropdown-toggle .simac-arrow {
    margin-left: auto;
    font-size: 10px;
    opacity: .6;
    transition: transform .3s ease;
}

.simac-nav-link.dropdown-toggle[aria-expanded="true"] .simac-arrow {
    transform: rotate(180deg);
    opacity: 1;
}

/* --- Submenú --- */
.simac-submenu {
    position: static !important;
    transform: none !important;
    background: rgba(27,45,12,.06) !important;
    border: none !important;
    border-left: none !important;
    border-radius: 0 !important;
    padding: 4px 0 8px !important;
    margin: 0 0 4px !important;
    box-shadow: none !important;
    width: 100% !important;
    min-width: auto !important;
}

.simac-sublink {
    display: flex !important;
    align-items: center;
    padding: 7px 16px 7px 56px !important;
    font-size: 12px !important;
    color: var(--simac-text-sec) !important;
    font-weight: 400;
    border-left: 3px solid transparent !important;
    border-radius: 0 8px 8px 0 !important;
    margin-right: 10px;
    text-decoration: none;
    transition: var(--simac-t);
}

.simac-sublink:hover {
    background: rgba(125,178,27,.14) !important;
    border-left-color: var(--simac-primary) !important;
    color: var(--simac-dark) !important;
}

.simac-sublink.active {
    background: rgba(125,178,27,.20) !important;
    border-left-color: var(--simac-primary) !important;
    color: var(--simac-dark) !important;
    font-weight: 600;
}

.simac-sublink i { width: 16px; text-align: center; opacity: .75; }

/* --- Footer sidebar --- */
.simac-sidebar-footer {
    flex-shrink: 0;
    padding: 12px 18px;
    font-size: 10.5px;
    color: var(--simac-text-muted);
    border-top: 1px solid rgba(27,45,12,.12);
    background: rgba(27,45,12,.04);
    text-align: center;
    letter-spacing: .3px;
}


/* ── 5. BARRA SUPERIOR DEL ERP ────────────────────────────────────
   Markup: app/views/includes/header.php (nav.simac-topbar).
   Una sola fila, tres zonas: control de navegación · búsqueda · acciones.
   Todo elemento accionable mide 38px y respira igual; el color entra solo
   en hover/foco, no como caja permanente detrás de cada icono. */
.simac-topbar {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: var(--simac-topbar-h);
    padding: 0 20px !important;
    background: #FFFFFF !important;
    border-bottom: 1px solid var(--simac-border-light) !important;
    box-shadow: 0 1px 2px rgba(27,45,12,.05) !important;
}

/* Botón de icono (colapsar menú y acciones sin etiqueta) */
.simac-topbar .simac-tb-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 38px;
    padding: 0 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--simac-text-sec) !important;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: var(--simac-t);
}

.simac-topbar .simac-tb-btn:hover,
.simac-topbar .simac-tb-btn:focus-visible,
.simac-topbar .simac-tb-btn[aria-expanded="true"] {
    background: var(--simac-primary-pale);
    color: var(--simac-dark) !important;
}

.simac-topbar .simac-tb-btn:focus-visible {
    outline: 2px solid var(--simac-primary);
    outline-offset: 1px;
}

.simac-topbar .simac-tb-btn.dropdown-toggle::after { display: none; }

/* Icono + contador anclado al icono (no al final de la etiqueta) */
.simac-topbar .simac-tb-ico {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    font-size: 15px;
    opacity: .9;
}

.simac-topbar .simac-tb-count {
    position: absolute;
    top: -7px;
    left: 10px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--simac-danger);
    border: 2px solid #FFFFFF;
    color: #FFFFFF;
    font-size: 9.5px;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.simac-topbar .simac-tb-sep {
    width: 1px;
    height: 24px;
    margin: 0 8px;
    background: var(--simac-border-light);
}

/* Buscador */
.simac-topbar .simac-search { position: relative; }

.simac-topbar .simac-search > i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12.5px;
    color: var(--simac-text-muted);
    pointer-events: none;
}

.simac-topbar .simac-search .form-control {
    width: 280px;
    height: 38px;
    background: #F7FAF1 !important;
    border: 1px solid var(--simac-border-light) !important;
    border-radius: 10px !important;
    padding: 0 12px 0 34px !important;
    font-size: 13px;
    color: var(--simac-text);
    transition: var(--simac-t);
}

.simac-topbar .simac-search .form-control::placeholder { color: var(--simac-text-muted); }

.simac-topbar .simac-search .form-control:focus {
    width: 330px;
    background: #FFFFFF !important;
    border-color: var(--simac-primary) !important;
    box-shadow: 0 0 0 3px rgba(125,178,27,.14) !important;
}

/* Identidad del usuario */
.simac-topbar .simac-tb-user {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 42px;
    padding: 0 10px 0 6px;
    border-radius: 10px;
    text-decoration: none;
    transition: var(--simac-t);
}

.simac-topbar .simac-tb-user:hover,
.simac-topbar .simac-tb-user[aria-expanded="true"] { background: var(--simac-primary-pale); }

.simac-topbar .simac-tb-user::after { display: none; }

.simac-topbar .simac-tb-avatar {
    width: 32px;
    height: 32px;
    border-radius: 9px;          /* rima con el tile del isotipo */
    object-fit: cover;
    border: 1px solid var(--simac-border);
    flex-shrink: 0;
}

.simac-topbar .simac-tb-user-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--simac-dark);
    line-height: 1.15;
}

.simac-topbar .simac-tb-user-role {
    font-size: 11px;
    color: var(--simac-text-muted);
    line-height: 1.15;
    text-transform: capitalize;
}

.simac-topbar .simac-tb-caret { font-size: 9px; color: var(--simac-text-muted); }

/* --- Sub-barras dentro del contenido (p. ej. Conciliaciones) --- */
.content .navbar:not(.simac-topbar),
nav.navbar.bg-light:not(.simac-topbar) {
    background: #FFFFFF !important;
    border-bottom: 1px solid var(--simac-border-light) !important;
    box-shadow: 0 1px 8px rgba(27,45,12,.07) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: 58px;
}

.content .navbar:not(.simac-topbar) .navbar-nav .nav-link {
    color: var(--simac-text-sec) !important;
    font-size: 13px !important;
    font-weight: 500;
    padding: 18px 0 !important;
}

.content .navbar:not(.simac-topbar) .navbar-nav .nav-link:hover { color: var(--simac-primary) !important; }

.content .navbar:not(.simac-topbar) .navbar-nav .nav-link i {
    background: var(--simac-primary-pale) !important;
    border-radius: 8px !important;
    color: var(--simac-dark) !important;
    width: 36px !important;
    height: 36px !important;
}

.content .navbar:not(.simac-topbar) form .form-control {
    background: var(--simac-primary-pale) !important;
    border: 1px solid var(--simac-border-light) !important;
    border-radius: 20px !important;
    font-size: 13px;
    padding: 6px 16px;
}

.content .navbar:not(.simac-topbar) form .form-control:focus {
    border-color: var(--simac-primary) !important;
    box-shadow: 0 0 0 3px rgba(125,178,27,.15) !important;
}

/* Dropdown navbar */
.content .navbar .dropdown-menu {
    border: 1px solid var(--simac-border-light) !important;
    border-radius: var(--simac-radius-lg) !important;
    box-shadow: var(--simac-sh-lg) !important;
    padding: 8px 0 !important;
    margin-top: 8px !important;
}

.content .navbar .dropdown-item {
    font-size: 13px;
    padding: 8px 16px !important;
    color: var(--simac-text-sec) !important;
    transition: var(--simac-t);
}

.content .navbar .dropdown-item:hover {
    background: var(--simac-primary-pale) !important;
    color: var(--simac-dark) !important;
}

/* Menú de perfil: encabezado con el usuario y separación real de las acciones */
.simac-topbar .dropdown-menu { min-width: 240px; }

.simac-topbar .simac-tb-menu-head {
    padding: 12px 16px 10px;
    border-bottom: 1px solid var(--simac-border-light);
    margin-bottom: 4px;
}


/* ── 6. CARDS CORPORATIVAS ────────────────────────────────────── */
.card {
    border: 1px solid var(--simac-border-light) !important;
    border-radius: var(--simac-radius-lg) !important;
    box-shadow: var(--simac-sh) !important;
    background: #FFFFFF !important;
}

.card-header {
    background: #FFFFFF !important;
    border-bottom: 1px solid var(--simac-border-light) !important;
    font-weight: 600;
    font-size: 14px;
    color: var(--simac-dark) !important;
    padding: 14px 20px !important;
}

.card-body { padding: 20px !important; }

/* Card con acento de color */
.simac-card {
    background: #FFFFFF;
    border: 1px solid var(--simac-border-light);
    border-radius: var(--simac-radius-lg);
    box-shadow: var(--simac-sh);
    overflow: hidden;
}

.simac-card-header {
    padding: 14px 20px;
    border-bottom: 1px solid var(--simac-border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #FDFFFA;
}

.simac-card-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--simac-dark);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.simac-card-title i { color: var(--simac-primary); font-size: 14px; }

.simac-card-body { padding: 20px; }


/* ── 7. KPI CARDS ─────────────────────────────────────────────── */
.simac-kpi {
    background: #FFFFFF;
    border-radius: var(--simac-radius-lg);
    padding: 20px;
    box-shadow: var(--simac-sh);
    border: 1px solid var(--simac-border-light);
    border-left: 3px solid var(--simac-primary);
    display: flex;
    align-items: center;
    gap: 16px;
    transition: var(--simac-t);
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.simac-kpi:hover {
    box-shadow: var(--simac-sh-lg);
    transform: translateY(-2px);
    text-decoration: none;
    color: inherit;
}

.simac-kpi.accent-gold   { border-left-color: var(--simac-accent); }
.simac-kpi.accent-danger  { border-left-color: var(--simac-danger); }
.simac-kpi.accent-info    { border-left-color: var(--simac-info); }
.simac-kpi.accent-dark    { border-left-color: var(--simac-dark); }
.simac-kpi.accent-success { border-left-color: var(--simac-success); }
.simac-kpi.accent-warning { border-left-color: var(--simac-warning); }

.simac-kpi-icon {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    transition: var(--simac-t);
}

.simac-kpi-icon.green   { background: rgba(125,178,27,.14); color: var(--simac-primary); }
.simac-kpi-icon.gold    { background: rgba(197,160,40,.14); color: var(--simac-accent); }
.simac-kpi-icon.danger  { background: rgba(192,57,43,.12);  color: var(--simac-danger); }
.simac-kpi-icon.info    { background: rgba(30,111,168,.12); color: var(--simac-info); }
.simac-kpi-icon.dark    { background: rgba(27,45,12,.10);   color: var(--simac-dark); }
.simac-kpi-icon.success { background: rgba(39,174,96,.12);  color: var(--simac-success); }
.simac-kpi-icon.warning { background: rgba(212,135,10,.12); color: var(--simac-warning); }

.simac-kpi-body { flex: 1; min-width: 0; }

.simac-kpi-label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--simac-text-muted);
    margin-bottom: 6px;
}

.simac-kpi-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--simac-dark);
    line-height: 1;
    margin-bottom: 5px;
    font-variant-numeric: tabular-nums;
}

.simac-kpi-delta {
    font-size: 11.5px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
}

.simac-kpi-delta.up   { color: var(--simac-success); }
.simac-kpi-delta.down { color: var(--simac-danger); }
.simac-kpi-delta.neutral { color: var(--simac-text-muted); }


/* ── 8. TABLAS ────────────────────────────────────────────────── */
.simac-table-wrap {
    background: #FFFFFF;
    border-radius: var(--simac-radius-lg);
    box-shadow: var(--simac-sh);
    border: 1px solid var(--simac-border-light);
    overflow: hidden;
}

/* Cabecera oscura corporativa */
.table thead th,
.simac-table thead th,
table.dataTable thead th {
    background: var(--simac-dark) !important;
    color: #FFFFFF !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .6px !important;
    padding: 13px 16px !important;
    border: none !important;
    border-bottom: none !important;
    white-space: nowrap;
}

table.dataTable thead th::before,
table.dataTable thead th::after {
    color: var(--simac-brand) !important;
}

/* Celdas */
.table tbody td,
.simac-table tbody td,
table.dataTable tbody td {
    padding: 11px 16px !important;
    border-bottom: 1px solid var(--simac-border-light) !important;
    border-right: none !important;
    border-left: none !important;
    border-top: none !important;
    font-size: 13.5px;
    vertical-align: middle !important;
    color: var(--simac-text);
}

.table tbody tr:last-child td,
table.dataTable tbody tr:last-child td {
    border-bottom: none !important;
}

/* Hover */
.table tbody tr:hover td,
table.dataTable tbody tr:hover td {
    background: var(--simac-primary-pale) !important;
    cursor: default;
}

/* Stripe */
.table-striped tbody tr:nth-child(even) td {
    background: rgba(241,248,228,.5);
}

/* Moneda alineada derecha */
.col-money, .text-end { text-align: right !important; }

/* DataTables controles */
.dataTables_wrapper {
    padding: 0 !important;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    padding: 14px 20px;
    background: #FDFFFA;
    border-bottom: 1px solid var(--simac-border-light);
}

.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    font-size: 12.5px;
    color: var(--simac-text-sec);
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dataTables_wrapper .dataTables_filter input {
    border: 1px solid var(--simac-border) !important;
    border-radius: 20px !important;
    padding: 5px 14px !important;
    font-size: 13px !important;
    margin-left: 0 !important;
    outline: none;
    transition: var(--simac-t);
    min-width: 200px;
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--simac-primary) !important;
    box-shadow: 0 0 0 3px rgba(125,178,27,.15) !important;
}

.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--simac-border) !important;
    border-radius: var(--simac-radius) !important;
    padding: 4px 8px !important;
    font-size: 13px !important;
}

.dataTables_wrapper .dataTables_info {
    padding: 12px 20px;
    font-size: 12.5px;
    color: var(--simac-text-muted);
}

.dataTables_wrapper .dataTables_paginate {
    padding: 10px 20px;
    border-top: 1px solid var(--simac-border-light);
}

.dataTables_paginate .paginate_button {
    border-radius: var(--simac-radius) !important;
    font-size: 12.5px !important;
    padding: 5px 11px !important;
    margin: 0 2px !important;
    transition: var(--simac-t) !important;
    border: 1px solid transparent !important;
    color: var(--simac-text-sec) !important;
}

.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button.current:hover {
    background: var(--simac-dark) !important;
    border-color: var(--simac-dark) !important;
    color: #FFFFFF !important;
}

.dataTables_paginate .paginate_button:not(.disabled):hover {
    background: var(--simac-primary-pale) !important;
    border-color: var(--simac-border) !important;
    color: var(--simac-dark) !important;
}

.dataTables_paginate .paginate_button.disabled {
    color: #bbb !important;
    cursor: default !important;
}


/* ── 9. BOTONES ───────────────────────────────────────────────── */
.btn {
    font-weight: 500;
    font-size: 13px;
    border-radius: var(--simac-radius) !important;
    transition: var(--simac-t);
    letter-spacing: .2px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
}

.btn-sm { font-size: 12px !important; padding: 5px 12px !important; }
.btn-lg { font-size: 14.5px !important; padding: 10px 22px !important; }

.btn-primary {
    background: var(--simac-primary) !important;
    border-color: var(--simac-primary) !important;
    color: #FFFFFF !important;
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--simac-primary-dark) !important;
    border-color: var(--simac-primary-dark) !important;
    color: #FFFFFF !important;
}

.btn-outline-primary {
    border-color: var(--simac-primary) !important;
    color: var(--simac-primary) !important;
    background: transparent !important;
}
.btn-outline-primary:hover {
    background: var(--simac-primary) !important;
    color: #FFFFFF !important;
}

.btn-dark {
    background: var(--simac-dark) !important;
    border-color: var(--simac-dark) !important;
    color: #FFFFFF !important;
}
.btn-dark:hover {
    background: var(--simac-charcoal) !important;
    border-color: var(--simac-charcoal) !important;
}

.btn-secondary {
    background: #6B7A5A !important;
    border-color: #6B7A5A !important;
    color: #FFFFFF !important;
}

.btn-success {
    background: var(--simac-success) !important;
    border-color: var(--simac-success) !important;
    color: #FFFFFF !important;
}

.btn-danger {
    background: var(--simac-danger) !important;
    border-color: var(--simac-danger) !important;
    color: #FFFFFF !important;
}

.btn-warning {
    background: var(--simac-warning) !important;
    border-color: var(--simac-warning) !important;
    color: #FFFFFF !important;
}

.btn-outline-secondary {
    border-color: var(--simac-border) !important;
    color: var(--simac-text-sec) !important;
}
.btn-outline-secondary:hover {
    background: var(--simac-primary-pale) !important;
    border-color: var(--simac-primary) !important;
    color: var(--simac-dark) !important;
}

.btn-outline-danger {
    border-color: var(--simac-danger) !important;
    color: var(--simac-danger) !important;
}
.btn-outline-danger:hover {
    background: var(--simac-danger) !important;
    color: #FFFFFF !important;
}

/* Botón corporativo SIMAC (verde primario) */
.btn-simac {
    background: var(--simac-primary) !important;
    border-color: var(--simac-primary) !important;
    color: #FFFFFF !important;
}
.btn-simac:hover, .btn-simac:focus {
    background: var(--simac-dark) !important;
    border-color: var(--simac-dark) !important;
    color: var(--simac-brand) !important;
}
.btn-simac:active {
    background: var(--simac-dark) !important;
}
.btn-xs {
    font-size: 11px !important;
    padding: 2px 6px !important;
    line-height: 1.4;
}

/* Botones cuadrados */
.btn-square, .btn-sm-square, .btn-lg-square {
    border-radius: 8px !important;
}


/* ── 10. FORMULARIOS ──────────────────────────────────────────── */
.form-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--simac-text-sec);
    margin-bottom: 5px;
}

.form-control,
.form-select {
    border: 1px solid var(--simac-border) !important;
    border-radius: var(--simac-radius) !important;
    font-size: 13.5px;
    color: var(--simac-text);
    min-height: 40px;
    padding: 7px 12px;
    background: #FFFFFF;
    transition: var(--simac-t);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--simac-primary) !important;
    box-shadow: 0 0 0 3px rgba(125,178,27,.18) !important;
    outline: none;
    background: #FFFFFF;
}

textarea.form-control {
    min-height: 90px !important;
    resize: vertical;
}

.form-control::placeholder { color: var(--simac-text-muted); opacity: .6; }

.form-control:disabled,
.form-select:disabled {
    background: var(--simac-primary-pale) !important;
    cursor: not-allowed;
}

.form-text {
    font-size: 11.5px;
    color: var(--simac-text-muted);
    margin-top: 3px;
}

.input-group-text {
    background: var(--simac-primary-pale) !important;
    border-color: var(--simac-border) !important;
    color: var(--simac-text-sec) !important;
    font-size: 13px;
    font-weight: 500;
}

/* Feedback */
.invalid-feedback { font-size: 11.5px; }

.was-validated .form-control:invalid,
.form-control.is-invalid {
    border-color: var(--simac-danger) !important;
    box-shadow: 0 0 0 3px rgba(192,57,43,.12) !important;
}

.was-validated .form-control:valid,
.form-control.is-valid {
    border-color: var(--simac-success) !important;
    box-shadow: none !important;
}


/* ── 11. MODALES ──────────────────────────────────────────────── */
.modal-content {
    border: none !important;
    border-radius: var(--simac-radius-lg) !important;
    box-shadow: var(--simac-sh-lg) !important;
    overflow: hidden;
}

.modal-header {
    background: var(--simac-dark) !important;
    color: #FFFFFF !important;
    padding: 15px 22px !important;
    border: none !important;
    border-bottom: 2px solid var(--simac-primary) !important;
}

.modal-header .modal-title {
    font-size: 14px;
    font-weight: 700;
    color: #FFFFFF !important;
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal-header .modal-title i { color: var(--simac-brand); }

.modal-header .btn-close {
    filter: invert(1) opacity(.7) !important;
    transition: var(--simac-t);
}
.modal-header .btn-close:hover { filter: invert(1) opacity(1) !important; }

.modal-body {
    padding: 24px 22px !important;
    background: #FFFFFF;
}

.modal-footer {
    padding: 14px 22px !important;
    background: var(--simac-primary-pale) !important;
    border-top: 1px solid var(--simac-border-light) !important;
    gap: 8px;
}

.modal-lg { max-width: 780px; }
.modal-xl { max-width: 1100px; }


/* ── 12. BADGES ───────────────────────────────────────────────── */
.badge {
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .4px;
    padding: 4px 10px !important;
    border-radius: 20px !important;
    text-transform: uppercase;
}

.badge.bg-primary  { background: var(--simac-primary) !important; }
.badge.bg-success  { background: var(--simac-success) !important; }
.badge.bg-warning  { background: var(--simac-warning) !important; color: #fff !important; }
.badge.bg-danger   { background: var(--simac-danger)  !important; }
.badge.bg-dark     { background: var(--simac-dark)    !important; }
.badge.bg-info     { background: var(--simac-info)    !important; }
.badge.bg-secondary { background: #6B7A5A !important; }

.badge.bg-light { background: var(--simac-primary-pale) !important; color: var(--simac-text) !important; }


/* ── 13. ALERTAS ──────────────────────────────────────────────── */
.alert {
    border-radius: var(--simac-radius-lg) !important;
    border: none !important;
    border-left: 4px solid !important;
    font-size: 13.5px;
    padding: 12px 16px !important;
}

.alert-success {
    background: var(--simac-success-bg) !important;
    border-left-color: var(--simac-success) !important;
    color: #155724 !important;
}
.alert-warning {
    background: var(--simac-warning-bg) !important;
    border-left-color: var(--simac-warning) !important;
    color: #664d03 !important;
}
.alert-danger {
    background: var(--simac-danger-bg) !important;
    border-left-color: var(--simac-danger) !important;
    color: #842029 !important;
}
.alert-info {
    background: var(--simac-info-bg) !important;
    border-left-color: var(--simac-info) !important;
    color: #0c5460 !important;
}
.alert-primary {
    background: rgba(125,178,27,.12) !important;
    border-left-color: var(--simac-primary) !important;
    color: var(--simac-dark) !important;
}


/* ── 14. PROGRESS BARS ────────────────────────────────────────── */
.progress {
    background: var(--simac-border-light) !important;
    border-radius: 20px !important;
    overflow: hidden;
}

.progress-bar {
    background: var(--simac-primary) !important;
    border-radius: 20px !important;
    transition: width 1s ease !important;
}

.progress-bar.bg-danger  { background: var(--simac-danger)  !important; }
.progress-bar.bg-warning { background: var(--simac-warning) !important; }
.progress-bar.bg-success { background: var(--simac-success) !important; }
.progress-bar.bg-info    { background: var(--simac-info)    !important; }


/* ── 15. DROPDOWN GENERAL ─────────────────────────────────────── */
.dropdown-menu {
    border: 1px solid var(--simac-border-light) !important;
    border-radius: var(--simac-radius-lg) !important;
    box-shadow: var(--simac-sh-lg) !important;
    padding: 6px 0 !important;
    font-size: 13.5px;
}

.dropdown-item {
    padding: 8px 16px !important;
    color: var(--simac-text-sec) !important;
    transition: var(--simac-t);
    font-size: 13px;
}

.dropdown-item:hover, .dropdown-item:focus {
    background: var(--simac-primary-pale) !important;
    color: var(--simac-dark) !important;
}

.dropdown-divider { border-color: var(--simac-border-light) !important; }

.dropdown-header {
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--simac-text-muted) !important;
    padding: 8px 16px 4px !important;
}


/* ── 16. SPINNER ──────────────────────────────────────────────── */
.spinner-border { color: var(--simac-primary) !important; }
.spinner-border.text-primary { color: var(--simac-primary) !important; }


/* ── 17. BACK TO TOP ──────────────────────────────────────────── */
.back-to-top {
    background: var(--simac-dark) !important;
    border-color: var(--simac-dark) !important;
    color: var(--simac-brand) !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 8px !important;
    box-shadow: var(--simac-sh) !important;
    right: 28px !important;
    bottom: 28px !important;
    transition: var(--simac-t);
}
.back-to-top:hover {
    background: var(--simac-charcoal) !important;
    transform: translateY(-2px);
}


/* ── 18. TABS ─────────────────────────────────────────────────── */
.nav-tabs {
    border-bottom: 2px solid var(--simac-border-light) !important;
    gap: 4px;
}

.nav-tabs .nav-link {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--simac-text-muted) !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    padding: 10px 18px !important;
    margin-bottom: -2px;
    transition: var(--simac-t);
}

.nav-tabs .nav-link:hover {
    color: var(--simac-primary) !important;
    border-bottom-color: var(--simac-border) !important;
}

.nav-tabs .nav-link.active {
    color: var(--simac-dark) !important;
    border-bottom-color: var(--simac-primary) !important;
    background: transparent !important;
}


/* ── 19. UTILIDADES CORPORATIVAS ──────────────────────────────── */

/* Título de sección en vistas */
.simac-section {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--simac-text-muted);
    padding-bottom: 10px;
    border-bottom: 2px solid var(--simac-border-light);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.simac-section i { color: var(--simac-primary); }

/* Estado vacío */
.simac-empty {
    text-align: center;
    padding: 48px 24px;
    color: var(--simac-text-muted);
}
.simac-empty i {
    font-size: 44px;
    margin-bottom: 14px;
    opacity: .3;
    display: block;
    color: var(--simac-primary);
}
.simac-empty p { font-size: 13.5px; margin: 0; }

/* Divider */
.simac-hr {
    border: none;
    border-top: 1px solid var(--simac-border-light);
    margin: 20px 0;
}

/* Moneda alineada */
.simac-money {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

/* Toast global */
.simac-toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.simac-toast {
    background: var(--simac-dark);
    color: #FFFFFF;
    padding: 12px 18px;
    border-radius: var(--simac-radius-lg);
    font-size: 13px;
    font-weight: 500;
    box-shadow: var(--simac-sh-lg);
    pointer-events: auto;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .3s ease, transform .3s ease;
    border-left: 3px solid var(--simac-brand);
    max-width: 360px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.simac-toast.show { opacity: 1; transform: translateY(0); }
.simac-toast.success { border-left-color: var(--simac-success); }
.simac-toast.warning { border-left-color: var(--simac-warning); }
.simac-toast.error   { border-left-color: var(--simac-danger); }

/* Bg overrides para Bootstrap */
.bg-light { background: var(--simac-primary-pale) !important; }
.rounded  { border-radius: var(--simac-radius-lg) !important; }


/* ── 20. RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 991.98px) {
    .simac-kpi { flex-direction: column; gap: 12px; text-align: center; padding: 16px; }
    .simac-kpi-icon { width: 44px; height: 44px; font-size: 18px; }
    .simac-kpi-value { font-size: 20px; }
    .simac-kpi-delta { justify-content: center; }
    /* La marca ya no se encoge aquí: el lockup trae sus propias escalas
       (.simac-lockup--sm / --lg) y quien la usa elige la que corresponde. */
}

@media (max-width: 767.98px) {
    .modal-body   { padding: 18px !important; }
    .modal-footer { padding: 12px 18px !important; }
    .card-body    { padding: 16px !important; }
    .simac-card-body { padding: 16px !important; }
    .dataTables_wrapper .dataTables_filter input { min-width: 140px; }
}

@media (max-width: 575.98px) {
    .simac-kpi-value { font-size: 18px; }
    .btn { font-size: 12px; padding: 6px 12px; }
    .modal-content { border-radius: 0 !important; }
}


/* ── 21. PANEL DE NOTIFICACIONES ──────────────────────────────── */
.simac-notif-panel {
    position: fixed;
    top: 0;
    right: -440px;
    width: 420px;
    height: 100vh;
    background: #FFFFFF;
    z-index: 10500;
    box-shadow: -4px 0 32px rgba(27,45,12,.20);
    display: flex;
    flex-direction: column;
    transition: right .32s cubic-bezier(.4,0,.2,1);
    border-left: 3px solid var(--simac-brand);
}

.simac-notif-panel.open { right: 0; }

.simac-notif-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(27,45,12,.30);
    z-index: 10499;
    backdrop-filter: blur(2px);
}

.simac-notif-overlay.show { display: block; }

/* Panel header */
.simac-notif-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    background: var(--simac-dark);
    color: #fff;
    border-bottom: 2px solid var(--simac-brand);
    flex-shrink: 0;
}

.simac-notif-panel-title {
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .3px;
    color: #fff;
}

.simac-notif-panel-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}

.simac-notif-panel-btn {
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.18);
    color: rgba(255,255,255,.85);
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
    transition: all .2s;
    white-space: nowrap;
}

.simac-notif-panel-btn:hover {
    background: rgba(255,255,255,.22);
    color: #fff;
}

.simac-notif-panel-btn.close {
    padding: 4px 9px;
    font-size: 15px;
}

/* Category filter tabs */
.simac-notif-tabs {
    display: flex;
    border-bottom: 1px solid var(--simac-border-light);
    background: var(--simac-primary-pale);
    flex-shrink: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.simac-notif-tabs::-webkit-scrollbar { display: none; }

.simac-notif-tab {
    padding: 9px 14px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--simac-text-muted);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: all .18s;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.simac-notif-tab.active { color: var(--simac-primary-dark); border-bottom-color: var(--simac-primary); }
.simac-notif-tab:hover  { color: var(--simac-primary-dark); border-bottom-color: var(--simac-border); }

/* Notification list */
.simac-notif-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.simac-notif-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--simac-border-light);
    cursor: pointer;
    transition: background .15s;
    position: relative;
    border-left: 3px solid transparent;
}

.simac-notif-item:hover       { background: var(--simac-primary-pale); }
.simac-notif-item.unread      { background: #fffde6; }
.simac-notif-item.unread:hover { background: #fff9cc; }

.simac-notif-item.critica     { border-left-color: var(--simac-danger); }
.simac-notif-item.advertencia { border-left-color: var(--simac-warning); }
.simac-notif-item.info        { border-left-color: var(--simac-info); }
.simac-notif-item.completada  { border-left-color: var(--simac-success); }

/* Icon box */
.simac-notif-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}

.simac-notif-icon.critica     { background: var(--simac-danger-bg);  color: var(--simac-danger); }
.simac-notif-icon.advertencia { background: var(--simac-warning-bg); color: var(--simac-warning); }
.simac-notif-icon.info        { background: var(--simac-info-bg);    color: var(--simac-info); }
.simac-notif-icon.completada  { background: var(--simac-success-bg); color: var(--simac-success); }

/* Body */
.simac-notif-body { flex: 1; min-width: 0; }

.simac-notif-titulo {
    font-weight: 600;
    font-size: 13px;
    color: var(--simac-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.simac-notif-desc {
    font-size: 12px;
    color: var(--simac-text-sec);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 3px;
}

.simac-notif-time {
    font-size: 11px;
    color: var(--simac-text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

.simac-notif-type-tag {
    display: inline-block;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 1px 6px;
    border-radius: 10px;
}

.simac-notif-type-tag.critica     { background: var(--simac-danger-bg);  color: var(--simac-danger); }
.simac-notif-type-tag.advertencia { background: var(--simac-warning-bg); color: var(--simac-warning); }
.simac-notif-type-tag.info        { background: var(--simac-info-bg);    color: var(--simac-info); }
.simac-notif-type-tag.completada  { background: var(--simac-success-bg); color: var(--simac-success); }

/* Delete button */
.simac-notif-del {
    background: none;
    border: none;
    color: var(--simac-text-muted);
    font-size: 12px;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: all .15s;
    flex-shrink: 0;
    margin-top: 4px;
}

.simac-notif-item:hover .simac-notif-del { opacity: 1; }
.simac-notif-del:hover { background: var(--simac-danger-bg); color: var(--simac-danger); }

/* Bell badge */
.simac-bell-badge {
    position: absolute;
    top: 3px;
    right: 2px;
    min-width: 17px;
    height: 17px;
    border-radius: 9px;
    background: var(--simac-danger);
    color: #fff;
    font-size: 9.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
    border: 2px solid #fff;
}

/* Empty state */
.simac-notif-empty {
    padding: 48px 20px;
    text-align: center;
    color: var(--simac-text-muted);
}

.simac-notif-empty i {
    font-size: 42px;
    margin-bottom: 12px;
    display: block;
    opacity: .3;
    color: var(--simac-primary);
}

.simac-notif-empty div { font-size: 13px; }

/* Responsive */
@media (max-width: 575.98px) {
    .simac-notif-panel { width: 100vw; right: -100vw; }
    .simac-notif-panel.open { right: 0; }
}


/* ── SKELETON LOADER ─────────────────────────────────────────────── */
@keyframes simac-shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position:  400px 0; }
}

.simac-skel {
    position: relative;
    overflow: hidden;
    color: transparent !important;
    pointer-events: none;
    border-radius: var(--simac-radius);
    background: linear-gradient(
        90deg,
        #e4eecc 25%,
        #f0f8d8 50%,
        #e4eecc 75%
    ) !important;
    background-size: 800px 100% !important;
    animation: simac-shimmer 1.4s infinite linear !important;
}

.simac-skel * { visibility: hidden !important; }


/* ── DASHBOARD QUICK ACCESS BUTTONS ─────────────────────────────── */
.simac-quick-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--simac-radius);
    border: 1px solid var(--simac-border-light);
    background: var(--simac-primary-pale);
    color: var(--simac-dark);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: var(--simac-t);
    cursor: pointer;
    width: 100%;
    text-align: left;
}

.simac-quick-btn i {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    background: var(--simac-primary-light);
    color: var(--simac-primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
    transition: var(--simac-t);
}

.simac-quick-btn:hover {
    background: var(--simac-primary-light);
    border-color: var(--simac-primary);
    color: var(--simac-dark);
    transform: translateX(2px);
    box-shadow: var(--simac-sh-xs);
}

.simac-quick-btn:hover i {
    background: var(--simac-primary);
    color: #fff;
}


/* ── DASHBOARD KPI CARDS ─────────────────────────────────────────── */
.simac-kpi-card {
    background: var(--simac-card);
    border: 1px solid var(--simac-border-light);
    border-radius: var(--simac-radius-lg);
    padding: 20px 22px;
    box-shadow: var(--simac-sh-xs);
    transition: var(--simac-t);
    height: 100%;
}

.simac-kpi-card:hover {
    box-shadow: var(--simac-sh);
    transform: translateY(-1px);
}

.simac-kpi-label {
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--simac-text-muted);
    margin-bottom: 6px;
}

.simac-kpi-value {
    font-size: 26px;
    font-weight: 800;
    color: var(--simac-dark);
    line-height: 1.1;
    margin-bottom: 4px;
}

.simac-kpi-sub {
    font-size: 11.5px;
    color: var(--simac-text-muted);
}

.simac-kpi-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.simac-kpi-icon.green   { background: var(--simac-success-bg);  color: var(--simac-success); }
.simac-kpi-icon.yellow  { background: var(--simac-warning-bg);  color: var(--simac-warning); }
.simac-kpi-icon.red     { background: var(--simac-danger-bg);   color: var(--simac-danger);  }
.simac-kpi-icon.blue    { background: var(--simac-info-bg);     color: var(--simac-info);    }
.simac-kpi-icon.primary { background: var(--simac-primary-pale);color: var(--simac-primary-dark); }


/* ── DASHBOARD ALERT ITEMS ───────────────────────────────────────── */
.simac-alerta-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--simac-radius);
    border-left: 3px solid transparent;
    font-size: 12.5px;
    margin-bottom: 4px;
    transition: background .15s;
}

.simac-alerta-item:hover { background: var(--simac-bg); }

.simac-alerta-item.warning { border-color: var(--simac-warning); background: var(--simac-warning-bg); }
.simac-alerta-item.danger  { border-color: var(--simac-danger);  background: var(--simac-danger-bg);  }
.simac-alerta-item.info    { border-color: var(--simac-info);    background: var(--simac-info-bg);    }

.simac-alerta-item i { margin-top: 1px; flex-shrink: 0; font-size: 13px; }
.simac-alerta-item.warning i { color: var(--simac-warning); }
.simac-alerta-item.danger  i { color: var(--simac-danger);  }
.simac-alerta-item.info    i { color: var(--simac-info);    }

.simac-alerta-item .alerta-text { flex: 1; color: var(--simac-text); line-height: 1.4; }
.simac-alerta-item .alerta-link {
    font-size: 11px;
    font-weight: 600;
    color: var(--simac-primary-dark);
    white-space: nowrap;
    text-decoration: none;
    align-self: center;
}
.simac-alerta-item .alerta-link:hover { text-decoration: underline; }


/* ── PRINT UTILITIES ─────────────────────────────────────────────── */
@media print {
    .sidebar, nav.navbar, #simacNotifPanel, #simacNotifOverlay,
    .simac-toast-container, #spinner, .simac-quick-btn,
    .btn, button, .no-print { display: none !important; }

    .content { margin: 0 !important; padding: 0 !important; width: 100% !important; }

    .simac-kpi-card { box-shadow: none !important; border: 1px solid #ccc !important; }

    body { background: #fff !important; font-size: 11pt; color: #000 !important; }

    @page { margin: 1.5cm; }

    /* Tables: show borders, repeat header on each page, avoid mid-row breaks */
    table { border-collapse: collapse !important; width: 100% !important; }
    thead { display: table-header-group; }
    th, td { border: 1px solid #999 !important; padding: 4px 6px !important; font-size: 9pt; }
    tr { page-break-inside: avoid; }

    /* RRHH liquidaciones: show full detail, hide action column */
    .liq-print-header { display: block !important; }
    #tablaLiquidaciones .col-acciones { display: none !important; }

    /* Conciliaciones: show full movimientos tables */
    #tablaConciliaciones .col-acciones { display: none !important; }
    .concil-resumen-card { box-shadow: none !important; border: 1px solid #ccc !important; }

    /* Obras/partidas: hide edit controls */
    .partidas-acciones { display: none !important; }

    /* Isolation: if a .simac-print-area is present, only print it */
    body.simac-printing > *:not(.simac-print-area) { display: none !important; }
    .simac-print-area { display: block !important; }
}


/* ════════════════════════════════════════════════════════════════════
   PARTIDAS — Enterprise section styles
   ════════════════════════════════════════════════════════════════════ */

/* ── KPI strip ───────────────────────────────────────────────────── */
.partidas-kpi-box {
    background: var(--simac-card);
    border: 1px solid var(--simac-border-light);
    border-radius: var(--simac-radius);
    padding: 14px 18px;
    flex: 1 1 130px;
    min-width: 110px;
    box-shadow: var(--simac-sh-xs);
}

.partidas-kpi-label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--simac-text-muted);
    margin-bottom: 4px;
}

.partidas-kpi-value {
    font-size: 20px;
    font-weight: 800;
    color: var(--simac-dark);
    line-height: 1.1;
}

.partidas-kpi-sub {
    font-size: 10.5px;
    color: var(--simac-text-muted);
    margin-top: 3px;
}

/* ── Table styling ───────────────────────────────────────────────── */

/* ★ LA CABECERA LA GOBIERNA LA NORMA GLOBAL 【Dueño, 2026-08-25】
   ═══════════════════════════════════════════════════════════════════════════
   Aquí vivía `.partidas-thead th`, que declaraba `font-size:11px` y
   `padding:8px 10px`. Nunca se aplicó ni un solo día: la norma corporativa de
   cabecera —`.table thead th`, §8 de este mismo archivo— es MÁS específica
   (0,1,2 contra 0,1,1) y además marca `!important` en todas sus propiedades,
   incluidas las que aquí llevaban `!important` propio. Medido en Chromium: la
   cabecera de esta tabla renderiza 10.5px y 13px/16px, los de la norma global.

   Era CSS muerto y, peor, MENTIROSO: quien lo leía creía estar mirando la regla
   que manda. Se retira. La cabecera no cambia de aspecto —ya estaba normalizada
   por la norma global, que es justo lo que se buscaba—; sólo deja de haber una
   declaración que fingía gobernarla. La clase `partidas-thead` se conserva en el
   marcado por si alguna vez hace falta un gancho aquí.

   ⚠ NO reintroducir una regla de cabecera local: la norma es global por diseño y
     una regla propia por pantalla es exactamente lo que hace que dos tablas del
     mismo ERP se vean como dos aplicaciones distintas. */

.partidas-tfoot td {
    background: var(--simac-primary-pale);
    font-weight: 700;
    font-size: 12px;
    padding: 7px 10px;
    border-top: 2px solid var(--simac-border-light) !important;
}

/* ★ VERDE SUAVE AGRUPA · CLARO ES CONTENIDO 【Dueño, 2026-08-25】
   ═══════════════════════════════════════════════════════════════════════════
   Mismo par exacto que la pantalla maestra (apu.js, itemizado de Presupuesto de
   Obra). Las filas no declaraban fondo: eran TRANSPARENTES, y debajo está el
   oliva de la página (--simac-bg, que es el mismo #F1F8E4 de la banda de
   capítulo). Resultado: tabla teñida de verde y jerarquía invisible, porque
   capítulo y partida compartían color.

   Se declara en `td` porque es donde Bootstrap 5 pinta el fondo de una tabla, y
   la regla del capítulo lleva `tr.partidas-capitulo` para ganar por especificidad:
   sin ese `tr` la regla clara —más específica por tener un elemento más— se comía
   la banda verde.

   Especificidad medida y buscada: la regla de la fila normal es (0,1,2) y pierde
   contra el hover de Bootstrap `.table-hover > tbody > tr:hover > *` (0,2,2), así
   que el subrayado al pasar el ratón SIGUE funcionando. La del capítulo es (0,2,3)
   y lo gana, igual que en la maestra: la banda de capítulo no parpadea al pasar
   por encima.

   Aquí estaba `#tablaPartidas tbody tr:hover { background: var(--simac-bg) }`, que
   pintaba la fila de OLIVA al pasar el ratón —el color del capítulo— y borraba la
   jerarquía justo cuando el usuario está mirando. Se retira: el hover lo da
   Bootstrap, como en las otras tres pantallas de presupuesto. */
.partidas-ejec tbody td { background: #f8f9fa; }
.partidas-ejec tbody tr.partidas-capitulo td {
    background: var(--simac-primary-pale);
    border-top: 1px solid var(--simac-primary-light);
}

#tablaPartidas tbody tr[data-partida-id] td { padding: 6px 8px; vertical-align: middle; }

/* Row state color left-border */
#tablaPartidas tbody tr[data-search*="en_ejecucion"] { border-left: 3px solid #198754; }
#tablaPartidas tbody tr[data-search*="pausada"]      { border-left: 3px solid #ffc107; }
#tablaPartidas tbody tr[data-search*="observada"]    { border-left: 3px solid #0dcaf0; }
#tablaPartidas tbody tr[data-search*="terminada"]    { border-left: 3px solid #6c757d; }
#tablaPartidas tbody tr[data-search*="cancelada"]    { border-left: 3px solid #dc3545; opacity: .65; }

/* ── Alertas panel ───────────────────────────────────────────────── */
#partidas-alertas-wrap {
    max-height: 160px;
    overflow-y: auto;
    border: 1px solid var(--simac-border-light);
    border-radius: var(--simac-radius);
    background: #fff;
    padding: 6px;
    margin-bottom: 14px;
}

/* ── Slide-in detail panel ───────────────────────────────────────── */
.partida-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 1040;
    backdrop-filter: blur(2px);
}

.partida-detail-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 370px;
    max-width: 95vw;
    height: 100vh;
    background: #fff;
    box-shadow: -4px 0 24px rgba(0,0,0,.18);
    z-index: 1050;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    overflow: hidden;
}

.partida-detail-panel.open {
    transform: translateX(0);
}

.partida-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--simac-border-light);
    background: var(--simac-dark);
    color: #fff;
    flex-shrink: 0;
}

.partida-detail-header .btn-outline-secondary {
    border-color: rgba(255,255,255,.4);
    color: #fff;
}

.partida-detail-footer {
    flex-shrink: 0;
    background: var(--simac-bg);
}

/* ── Plantilla item hover ────────────────────────────────────────── */
.plantilla-item:hover {
    background: var(--simac-primary-pale) !important;
    border-color: var(--simac-primary) !important;
}

/* ── Peso bar in modal ───────────────────────────────────────────── */
#partidaPesoBar {
    background: #e2e8f0;
}

/* ── Catálogo datalist autocomplete styling (Chrome/Edge) ─────────── */
#partidaNombre::-webkit-list-button { display: none; }

/* ── Responsive: hide less critical columns on small screens ──────── */
@media (max-width: 992px) {
    #tablaPartidas th:nth-child(5),
    #tablaPartidas td:nth-child(5) { display: none; }
    .partida-detail-panel { width: 100vw; }
}

/* ═══════════════════════════════════════════════════════════════════
   GAP 4 — RESPONSIVE MÓVIL (SPRINT CONGRESO 2026)
   Cubre tablas anchas, sidebar, modales y listas en ≤768px
   ═══════════════════════════════════════════════════════════════════ */

/* 1. Todas las tablas dentro del contenido principal son scrollables en móvil */
@media (max-width: 767.98px) {
    .simac-content table,
    .tab-content table,
    .card-body table,
    .modal-body table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        max-width: 100%;
    }
    /* Excepción: tablas muy pequeñas no necesitan scroll */
    .table-sm.table-condensed { white-space: normal; }

    /* 2. Ocultar columnas poco críticas en móvil */
    /* Finanzas: flujo efectivo */
    #tablaFlujo th:nth-child(5),
    #tablaFlujo td:nth-child(5),
    #tablaFlujo th:nth-child(6),
    #tablaFlujo td:nth-child(6) { display: none; }

    /* Bancos: ocultar N° cuenta en lista */
    #tablaBancos th:nth-child(3),
    #tablaBancos td:nth-child(3) { display: none; }

    /* Obras: ocultar columnas secundarias */
    #tablaObras th:nth-child(4),
    #tablaObras td:nth-child(4),
    #tablaObras th:nth-child(5),
    #tablaObras td:nth-child(5) { display: none; }

    /* RRHH liquidaciones: ocultar columnas de porcentajes */
    #tablaLiquidaciones th:nth-child(6),
    #tablaLiquidaciones td:nth-child(6),
    #tablaLiquidaciones th:nth-child(7),
    #tablaLiquidaciones td:nth-child(7) { display: none; }

    /* Finiquitos: simplificar */
    #tbody-finiquitos th:nth-child(5),
    #tbody-finiquitos td:nth-child(5) { display: none; }

    /* 3. Modales full-width en móvil */
    .modal-dialog { margin: 0.5rem; max-width: calc(100vw - 1rem); }
    .modal-dialog.modal-xl,
    .modal-dialog.modal-lg { max-width: calc(100vw - 1rem); }

    /* 4. Botones de acción: apilados en móvil */
    .simac-action-bar {
        flex-direction: column;
        gap: 8px;
    }
    .simac-action-bar .btn { width: 100%; }

    /* 5. KPI cards — 2 por fila en móvil (en vez de 4) */
    .simac-kpi-grid { grid-template-columns: repeat(2, 1fr) !important; }

    /* 6. Sidebar colapsada en móvil (ocultar texto, solo íconos) */
    .simac-sidebar .nav-link-text { display: none; }
    .simac-sidebar { min-width: 60px; max-width: 60px; }
    .simac-sidebar .simac-logo-area { padding: 8px 4px; }
    .simac-sidebar .simac-logo-area img { max-width: 36px; }
    .simac-sidebar .simac-logo-area span { display: none; }

    /* 7. Cards del dashboard en columna única */
    .dashboard-cards-row > [class*="col-md"],
    .dashboard-cards-row > [class*="col-lg"] { flex: 0 0 100%; max-width: 100%; }
}

/* Tablet (768–991px): sidebar más angosta, tablas con scroll */
@media (min-width: 768px) and (max-width: 991.98px) {
    .simac-sidebar { min-width: 180px; max-width: 180px; }
    .simac-sidebar .nav-link-text { font-size: 0.8rem; }

    .simac-content table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Ocultar 1 columna secundaria en tablet */
    #tablaFlujo th:nth-child(6),
    #tablaFlujo td:nth-child(6) { display: none; }
}

/* 8. Scroll horizontal suave con indicador visual en tablas */
@media (max-width: 991.98px) {
    .table-responsive::after {
        content: '';
        display: block;
        height: 3px;
        background: linear-gradient(90deg, transparent, var(--simac-primary, #2C3E50) 50%, transparent);
        opacity: 0.15;
        margin-top: 4px;
        border-radius: 2px;
    }
}