/* ---------- Paleta ASC ----------
   El logo es rojo puro (#fe0002). Ese tono a pelo da 4,0:1 sobre blanco, así
   que no llega al 4,5 de AA para texto normal: el acento de interfaz es una
   versión mínimamente rebajada (#dc0000, 5,2:1) y el rojo puro se reserva
   para el arranque del degradado del login, donde no hay texto encima.
   Los neutros van teñidos de rojo con el mismo tono (hue 0) que el logo. */
:root{
    --corp-red:#dc0000;
    /* Triplete del acento: lo consumen los rgba() de toda la app (tintes,
       sombras, anillos de foco), que antes llevaban un rojo suelto de otra
       época del logo y no seguían a la paleta. */
    --corp-red-rgb:220,0,0;
    --corp-red-deep:#a80000;
    --corp-red-darker:#7a0000;
    /* Acento para texto sobre superficie: en oscuro tiene que ir al revés
       que --corp-red-deep, que ahí sigue siendo el final de los degradados
       con texto blanco encima. */
    --corp-red-text:#b80000;
    --corp-light:#fff1f0;
    --corp-dark:#e60000;   /* lo usa el borde del navbar */
    --ink:#2b0f0f;
    /* Oscurecido al re-teñir: el gris rojizo anterior se quedaba en 3,9:1
       sobre blanco y lo usan textos de ayuda y celdas vacías. #8c6b6b da
       4,7:1 con el mismo papel visual. */
    --muted:#8c6b6b;
    --line:#f7d9d9;
    --surface:#fff;
    --page-bg:#fff;
    --table-hover:#fff6f6;
    --table-border:#f7e8e8;
    --alert-bg:#fff;
    --alert-border:#f9c7c7;
    --alert-text:#b00000;
    --auth-grad-1:#fe0002;
    --auth-grad-2:var(--corp-red);
    --auth-grad-3:#a00000;

    /* Chips/etiquetas (tags de origen, badges de estado, barra de estado). */
    --chip-blue-bg:#eef2fb;   --chip-blue-border:#c9d7f0;   --chip-blue-text:#2c4a86;
    --chip-amber-bg:#fff4e5;  --chip-amber-border:#f5d9ac;  --chip-amber-text:#a35a00;
    --chip-green-bg:#e7f6ec;  --chip-green-border:#b9e3c6;  --chip-green-text:#1a7f3c;
    --chip-purple-bg:#f3edfa; --chip-purple-border:#dbcaf0; --chip-purple-text:#5b3a86;
    --chip-grey-bg:#f2f4f7;   --chip-grey-border:#e0e4ea;   --chip-grey-text:#5c6470;
    --chip-red-bg:#fdeded;    --chip-red-border:#f9c7c7;    --chip-red-text:#b00000;
}

/* ---------- Modo oscuro ----------
   Las páginas usan estas variables para fondos de tarjeta/superficie en vez
   de #fff a pelo, así que redefinirlas aquí basta sin tocar cada CSS. */
:root[data-theme="dark"]{
    /* El acento sube de tono en vez de bajar: #dc0000 sobre --surface se
       queda en 4,4:1 y --corp-red-deep, que en claro es el rojo de texto,
       aquí sería casi invisible. --corp-red-deep no se toca porque sigue
       cerrando los degradados de los botones, con texto blanco encima. */
    --corp-red:#ff4d4d;
    --corp-red-rgb:255,77,77;
    --corp-red-text:#ff6b6b;
    --corp-light:#2b1414;
    --ink:#f3e7e7;
    --muted:#c5a2a2;
    --line:#4d2c2c;
    --surface:#241414;
    --page-bg:#170c0c;
    --table-hover:#301a1a;
    --table-border:#3c2222;
    --alert-bg:#3c1616;
    --alert-border:#5e2222;
    --alert-text:#ff9c9c;
    --auth-grad-1:#8c0000;
    --auth-grad-2:#560000;
    --auth-grad-3:#260000;

    --chip-blue-bg:rgba(66,110,190,.22);   --chip-blue-border:rgba(120,150,220,.4);   --chip-blue-text:#a9c3f5;
    --chip-amber-bg:rgba(163,90,0,.22);    --chip-amber-border:rgba(220,150,60,.4);   --chip-amber-text:#f0b869;
    --chip-green-bg:rgba(26,127,60,.2);    --chip-green-border:rgba(90,180,120,.4);   --chip-green-text:#7fd99a;
    --chip-purple-bg:rgba(91,58,134,.25);  --chip-purple-border:rgba(150,110,200,.4); --chip-purple-text:#c7a9ef;
    --chip-grey-bg:rgba(92,100,112,.25);   --chip-grey-border:rgba(150,155,165,.4);   --chip-grey-text:#c3c8d1;
    --chip-red-bg:rgba(220,0,0,.22);       --chip-red-border:rgba(255,90,90,.4);      --chip-red-text:#ff9c9c;
}

body{
    background:var(--page-bg);
    color:var(--ink);
    transition:background-color .15s ease, color .15s ease;
}

/* Bootstrap define .bg-light con !important (utilidad), así que hace falta
   igualarlo aquí; la especificidad sola no basta. */
.navbar.navbar-light.bg-light{
    background-color:var(--surface) !important;
    border-color:var(--line) !important;
}

.navbar-actions{ display:flex; align-items:center; gap:.6rem; }

/* Dos PNG (icono rojo / icono blanco), igual que el del login: el tema
   activo decide cuál se ve. */
:root[data-theme="dark"] .navbar-logo-red{ display:none; }
:root[data-theme="light"] .navbar-logo-white{ display:none; }

/* El icono de ASC es cuadrado, así que la marca del navbar es icono + palabra
   en vez de un PNG apaisado con el texto dentro: así el rótulo usa la misma
   tipografía que el resto y sigue al tema sin una segunda imagen. */
.navbar-brand-asc{ display:inline-flex; align-items:center; gap:.55rem; }
.navbar-wordmark{
    font-family:'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight:800; font-size:1.2rem; letter-spacing:.08em;
    color:var(--corp-red);
}

.btn-theme-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    width:2.3rem; height:2.3rem; border-radius:9px;
    border:1px solid var(--line); background:transparent; color:var(--ink);
    cursor:pointer; transition:background .15s ease, border-color .15s ease;
}
.btn-theme-toggle:hover{ background:var(--corp-light); }
.btn-theme-toggle .icon-moon{ display:none; }
:root[data-theme="dark"] .btn-theme-toggle .icon-sun{ display:none; }
:root[data-theme="dark"] .btn-theme-toggle .icon-moon{ display:inline-block; }

/* ---------- Barra superior ----------
   Bootstrap limita .container a ~1140-1320px. Las páginas de contenido
   (tabla de albaranes, excel) ya se ensanchan a 1700px por su cuenta, así
   que sin esto el logo y el botón de cerrar sesión quedan centrados en un
   ancho menor, dejando mucho blanco a los lados en comparación. */
.navbar .container{ max-width:1700px; }

/* ---------- Botón "Cerrar sesión" (navbar) ---------- */
.btn-logout{
    font-family:'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight:600; font-size:.86rem;
    color:var(--corp-red); background:rgba(var(--corp-red-rgb),.07);
    border:1px solid rgba(var(--corp-red-rgb),.18); border-radius:9px;
    padding:.42rem .9rem; cursor:pointer;
    transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.btn-logout:hover{ background:var(--corp-red); color:#fff; border-color:var(--corp-red); }

/* ---------- Pestañas del navbar ----------
   El navbar usa .justify-content-between con dos hijos (logo y logout), así
   que las pestañas van en medio como tercer hijo y quedan centradas solas. */
.nav-tabs-corp{ display:flex; gap:.35rem; }

.nav-tab{
    font-family:'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight:600; font-size:.88rem; text-decoration:none;
    color:var(--ink); opacity:.72;
    padding:.42rem .85rem; border-radius:9px;
    border:1px solid transparent;
    transition:background .15s ease, color .15s ease, opacity .15s ease;
}
.nav-tab:hover{ opacity:1; background:var(--corp-light); color:var(--corp-red-text); }

.nav-tab.is-active{
    opacity:1;
    color:var(--corp-red-text);
    background:rgba(var(--corp-red-rgb),.07);
    border-color:rgba(var(--corp-red-rgb),.18);
}

/* Las pestañas se apilarían mal en móvil junto al logo y el botón de salir;
   el logo ya lleva a la pantalla de albaranes, así que solo queda Prompts. */
@media (max-width:575px){
    .nav-tabs-corp .nav-tab{ padding:.35rem .55rem; font-size:.8rem; }
}