/* ============================================================
   EqProveeduria — Tema oficial INTCOMEX
   Paleta corporativa (compartida por el cliente):
     Navy   #1D3766  · Rojo #8B1D1F · Gris claro #D1D3D4
     Gris   #7A7D80  · Blanco #FFFFFF
   Navy domina (sidebar/topbar/headers); el navy es tambien el ACENTO
   (botones primarios, enlaces). El ROJO se reserva SOLO para peligro/eliminar.
   Un solo punto de verdad para el color de toda la app.
   ============================================================ */

:root {
    /* ── Paleta oficial INTCOMEX ──────────────────── */
    --intcomex-navy:  #1D3766;   /* primario y acento */
    --intcomex-red:   #8B1D1F;   /* peligro / eliminar (uso reservado) */
    --intcomex-gray-light: #D1D3D4;
    --intcomex-gray:  #7A7D80;
    --intcomex-white: #FFFFFF;

    /* Tonos de navy derivados del hex de marca (para profundidad) */
    --navy-900: #142748;   /* barras/encabezados mas profundos */
    --navy-800: #1D3766;   /* NAVY DE MARCA — sidebar, headers de grid */
    --navy-700: #274A82;   /* hover/lineas sobre navy */

    /* El "acento" (antes azul) ahora ES el navy de marca; se conservan los
       nombres --blue-* para no tocar el resto del CSS que los referencia. */
    --blue-600: #1D3766;   /* boton primario / enlace */
    --blue-500: #274A82;   /* hover del primario */
    --blue-400: #3D63A8;   /* acento claro / foco */

    --slate-900: #16213A;  /* titulos */
    --slate-700: #3A3F45;  /* cuerpo (armoniza con el gris de marca) */
    --slate-500: var(--intcomex-gray);   /* #7A7D80 apagado/captions */
    --slate-200: var(--intcomex-gray-light); /* #D1D3D4 lineas/bordes */
    --bg:        #F4F6F9;  /* fondo de app (gris muy claro, neutro con la marca) */
    --white:     var(--intcomex-white);

    --success: #1E7D46;
    --warning: #B7791F;
    --danger:  var(--intcomex-red);   /* rojo de marca = peligro */

    /* ── Remapeo de los tokens de eq-layout.css ──── */
    --eq-bg:            var(--bg);
    --eq-bg-card:       var(--white);
    --eq-bg-elevated:   #EAEEF4;
    --eq-sidebar-bg:    var(--navy-800);
    --eq-topbar-bg:     rgba(255, 255, 255, .90);

    --eq-text:          var(--slate-700);
    --eq-text-muted:    var(--slate-500);
    --eq-text-heading:  var(--slate-900);

    --eq-accent:        var(--intcomex-navy);
    --eq-accent-hover:  var(--navy-700);
    --eq-accent-muted:  rgba(29, 55, 102, .10);

    --eq-border:        var(--intcomex-gray-light);
    --eq-border-strong: #B8BBBE;

    --eq-menu-active:   rgba(61, 99, 168, .22);
    --eq-menu-hover:    rgba(255, 255, 255, .07);

    --eq-shadow:    0 1px 3px rgba(20, 39, 72, .10), 0 6px 24px rgba(20, 39, 72, .07);
    --eq-shadow-sm: 0 1px 2px rgba(20, 39, 72, .07);
    --eq-shadow-lg: 0 8px 40px rgba(20, 39, 72, .16);

    --eq-success: var(--success);
    --eq-warning: var(--warning);
    --eq-danger:  var(--danger);
    --eq-info:    var(--navy-700);
}

/* IMPORTANTE: la plantilla (eq-layout.css) redefine varias variables bajo
   `body.light-mode` (p.ej. --eq-sidebar-bg: #fff), pisando nuestro :root.
   Como este archivo carga DESPUES y usa el MISMO selector, aquí ganamos:
   forzamos que en light-mode el sidebar/headers sigan siendo navy de marca. */
body.light-mode {
    --eq-bg:            var(--bg);
    --eq-bg-card:       var(--white);
    --eq-bg-elevated:   #EAEEF4;
    --eq-sidebar-bg:    var(--navy-800);
    --eq-topbar-bg:     rgba(255, 255, 255, .90);
    --eq-text:          var(--slate-700);
    --eq-text-muted:    var(--slate-500);
    --eq-text-heading:  var(--slate-900);
    --eq-accent:        var(--intcomex-navy);
    --eq-accent-hover:  var(--navy-700);
    --eq-accent-muted:  rgba(29, 55, 102, .10);
    --eq-border:        var(--intcomex-gray-light);
    --eq-border-strong: #B8BBBE;
    --eq-menu-active:   rgba(61, 99, 168, .22);
    --eq-menu-hover:    rgba(255, 255, 255, .07);
    --eq-info:          var(--navy-700);
}

/* El tema navy es unico: neutralizamos el toggle dark/light del template
   para que ambos modos rendericen el mismo tema claro con sidebar navy. */
body, body.light-mode {
    background: var(--eq-bg);
    color: var(--eq-text);
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ══ Sidebar: navy profundo, texto claro ══ */
.eq-sidebar {
    background: var(--eq-sidebar-bg);
    border-right: 1px solid var(--navy-700);
}
.eq-brand { border-bottom: 1px solid var(--navy-700); }
.eq-brand-logo {
    background: linear-gradient(135deg, var(--blue-600), var(--blue-400));
    color: #fff;
}
.eq-brand-text { color: #E8EEF6; }
.eq-brand-text small { color: var(--blue-400); }
.eq-sidebar-info { border-bottom: 1px solid var(--navy-700); }
.eq-info-user { color: #C7D5E5; }
.eq-info-empresa { color: #8FA6BE; }
.eq-info-agencia { color: var(--blue-400); }
.eq-sidebar-filter input {
    background: var(--navy-900);
    border: 1px solid var(--navy-700);
    color: #DCE6F2;
}
.eq-sidebar-filter input::placeholder { color: #6E88A3; }
.eq-nav .eq-nav-link { color: #C7D5E5; }
.eq-nav .eq-nav-link i { color: #7E97B1; }
.eq-nav .eq-nav-link:hover {
    background: var(--eq-menu-hover);
    color: #FFFFFF;
}
.eq-nav .eq-nav-link:hover i { color: var(--blue-400); }
.eq-nav .eq-nav-link.active,
.eq-nav li.active > .eq-nav-link {
    background: var(--eq-menu-active);
    color: #FFFFFF;
    border-left: 3px solid var(--blue-400);
}
.eq-submenu .eq-nav-link { color: #A9BDD2; }
.eq-nav-arrow { color: #6E88A3; }

/* ══ Topbar: blanco con linea navy ══ */
.eq-topbar {
    background: var(--eq-topbar-bg);
    border-bottom: 2px solid var(--navy-800);
    backdrop-filter: blur(10px);
}
.eq-topbar-btn, .eq-hamburger { color: var(--slate-700); }
.eq-topbar-btn:hover, .eq-hamburger:hover { color: var(--blue-600); background: var(--eq-accent-muted); }
.eq-topbar-modules-btn {
    background: var(--navy-800);
    color: #fff;
    border: none;
}
.eq-topbar-modules-btn:hover { background: var(--navy-700); color: #fff; }
.eq-user-badge { color: var(--slate-700); }
.eq-user-avatar {
    background: var(--navy-800);
    color: #fff;
}

/* ══ Contenido, tarjetas, titulos ══ */
.eq-content h1, .eq-content h2, .eq-content h3, .eq-content h4 { color: var(--slate-900); }
.card, .eq-card {
    background: var(--white);
    border: 1px solid var(--eq-border);
    border-radius: var(--eq-radius, 10px);
    box-shadow: var(--eq-shadow-sm);
}
.eq-footer { color: var(--slate-500); border-top: 1px solid var(--eq-border); }

/* ══ Botones: --blue-600 solo para acciones primarias ══ */
.btn-primary, .k-button-solid-primary {
    background: var(--blue-600) !important;
    border-color: var(--blue-600) !important;
    color: #fff !important;
}
.btn-primary:hover, .k-button-solid-primary:hover {
    background: var(--blue-500) !important;
    border-color: var(--blue-500) !important;
}
.btn-outline-primary { color: var(--blue-600); border-color: var(--blue-600); }
.btn-outline-primary:hover { background: var(--blue-600); color: #fff; }
a { color: var(--blue-600); }
a:hover { color: var(--blue-500); }

.btn-success { background: var(--success) !important; border-color: var(--success) !important; }
.btn-warning { background: var(--warning) !important; border-color: var(--warning) !important; color: #fff !important; }
.btn-danger  { background: var(--danger)  !important; border-color: var(--danger)  !important; }

/* ══ Kendo UI: grids con header navy, filas claras, hover azul suave ══ */
body .k-grid,
body.light-mode .k-grid {
    background: var(--white);
    color: var(--slate-700);
    border-color: var(--eq-border);
    border-radius: 10px;
    overflow: hidden;
}
body .k-grid-header,
body .k-grid-header .k-header {
    background: var(--navy-800) !important;
    color: #E8EEF6 !important;
    font-weight: 600;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .4px;
    border-color: var(--navy-700) !important;
}
body .k-grid-header .k-header .k-link,
body .k-grid-header .k-header .k-cell-inner > .k-link { color: #E8EEF6 !important; }
body .k-grid-header .k-header .k-icon,
body .k-grid-header .k-sort-icon { color: var(--blue-400) !important; }
body .k-grid td, body .k-grid .k-table-td {
    border-color: var(--eq-border);
    color: var(--slate-700);
}
body .k-grid tr.k-alt td, body .k-grid .k-table-alt-row .k-table-td { background: #FAFBFC; }
body .k-grid tbody tr:hover td,
body .k-grid .k-table-row:hover .k-table-td { background: rgba(61, 99, 168, .10) !important; }
body .k-grid .k-selected td, body .k-grid .k-table-row.k-selected .k-table-td {
    background: rgba(29, 55, 102, .16) !important;
    color: var(--slate-900) !important;
}
body .k-grid-footer, body .k-grouping-header {
    background: var(--eq-bg-elevated);
    color: var(--slate-700);
    border-color: var(--eq-border);
}
body .k-pager, body .k-pager-wrap {
    background: var(--white);
    color: var(--slate-500);
    border-color: var(--eq-border);
}
body .k-pager .k-selected, body .k-pager-wrap .k-selected {
    background: var(--blue-600) !important;
    color: #fff !important;
    border-color: var(--blue-600) !important;
}

/* Inputs / dropdowns / datepickers Kendo en claro */
body .k-input, body .k-picker, body .k-dropdownlist, body .k-combobox, body .k-datepicker, body .k-numerictextbox {
    background: var(--white);
    color: var(--slate-700);
    border-color: var(--eq-border-strong);
}
body .k-input:focus-within, body .k-picker:focus-within {
    border-color: var(--blue-500);
    box-shadow: 0 0 0 3px var(--eq-accent-muted);
}
body .k-window, body .k-dialog {
    background: var(--white);
    color: var(--slate-700);
    border-radius: 12px;
}
body .k-window-titlebar, body .k-dialog-titlebar {
    background: var(--navy-800);
    color: #fff;
}
body .k-tabstrip-items .k-item.k-active {
    border-bottom: 2px solid var(--blue-600);
    color: var(--blue-600);
}

/* Toolbar de pantallas: titulo + acciones */
.eq-page-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 18px; flex-wrap: wrap;
}
.eq-page-header h1 {
    font-size: 1.25rem; font-weight: 700; color: var(--slate-900); margin: 0;
}
.eq-page-header .eq-page-sub { color: var(--slate-500); font-size: .8rem; }

/* Badges de estado (ordenes) */
.eq-badge { padding: 3px 10px; border-radius: 999px; font-size: .72rem; font-weight: 600; }
.eq-badge-pendiente  { background: rgba(183, 121, 31, .12); color: var(--warning); }
.eq-badge-autorizada { background: rgba(30, 142, 78, .12);  color: var(--success); }
.eq-badge-denegada   { background: rgba(192, 57, 43, .12);  color: var(--danger); }
.eq-badge-proceso    { background: var(--eq-accent-muted);   color: var(--blue-600); }