/* ============================================================================
   nexus.css — la piel común de los cinco ambientes.
   ----------------------------------------------------------------------------
   Este archivo hace dos cosas y nada más:

     1. Fija los tokens de marca en :root. Se carga DESPUÉS del <style> de cada
        página, así que sus variables ganan y las siete pantallas quedan con la
        misma tipografía, los mismos colores y los mismos radios. Lo que cada
        página tenga de más en su <style> sigue mandando sobre sus propios
        componentes: aquí no se pisa nada suyo.

     2. Dibuja el marco de Orion (barra superior + menú lateral) que inyecta
        shell.js. Todo ese marco vive bajo el prefijo .nx- para que no pueda
        chocar con ninguna clase de ninguna página.

   Referencia visual: Orion → HR → TimeCards. Nuestros ambientes son los
   hermanos de TimeCards, y deben verse como tales.
   ========================================================================== */

:root{
  /* ---- Marca (TCCE Nexus). No inventar colores fuera de esta lista. ------ */
  --color-main-blue-primary:#22205F;
  --color-main-orange-primary:#F66A24;
  --color-main-grey:#605F60;

  --navy:#22205F;
  --navy-dark:#171540;
  --navy-soft:#3A3782;          /* hover sobre navy, y texto secundario azul  */
  --orange:#F66A24;
  --orange-dark:#D8560F;
  --orange-soft:#FDE9DD;
  --grey:#605F60;

  --paper:#FFFFFF;
  --surface-page:#F1F5F7;
  --bg:var(--surface-page);
  --surface-sunken:#EEF2F7;     /* filas alternas, fondo de item activo      */
  --line:#DDE1E8;
  --line-soft:#E9EDF3;

  --ink:#22205F;
  --ink-body:#332F44;
  --ink-soft:#605F60;
  --ink-faint:#8A8794;

  --danger:#C13B47;  --danger-bg:#FBDDE0;
  --ok:#1F6B3B;      --ok-bg:#E3F3E8;
  --warn:#8A4213;    --warn-bg:#FDEBDF;

  --badge-default-bg:#ECEAF5; --badge-default-fg:#5B5570;
  --badge-it-bg:#E3DBFB;      --badge-it-fg:#6B46C1;
  --badge-info-bg:#E3DBFB;    --badge-info-fg:#6B46C1;
  --badge-ok-bg:#DCF5E3;      --badge-ok-fg:#1E7A3D;
  --badge-pending-bg:#FBEFD6; --badge-pending-fg:#8A6412;
  --badge-danger-bg:#FBDCE0;  --badge-danger-fg:#B0293F;

  --alert-info-bg:#EDE9FB;    --alert-info-border:#7C6FE0; --alert-info-fg:#4B3FA8;
  --alert-success-bg:#E1F7E8; --alert-success-border:#34A853; --alert-success-fg:#1E7A3D;
  --alert-warning-bg:#FDF3DA; --alert-warning-border:#E0A93B; --alert-warning-fg:#8A6412;
  --alert-error-bg:#FBDFE1;   --alert-error-border:#D64550; --alert-error-fg:#A32636;

  --chip-bg:#ECEAF5; --chip-fg:#5B5570;

  /* ---- Tipografía -------------------------------------------------------
     Dax es la fuente de la marca y es de pago: si está instalada en el equipo
     (o si IT deja el .woff2 en /fuentes y descomenta el @font-face de abajo),
     se usa. Si no, Segoe UI Variable cae en su lugar, que es lo que ya se ve
     en Orion sobre Windows. Ninguna de las dos viaja por internet, así que la
     aplicación sigue sin depender de nada externo.                          */
  --sans:"Dax","Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,
         "Helvetica Neue",Arial,sans-serif;
  --font-heading:"Dax","Segoe UI Variable Display","Segoe UI Semibold",
         "Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:"Cascadia Mono",ui-monospace,"SFMono-Regular",Consolas,
         "Liberation Mono",Menlo,monospace;

  --text-3xl:30px; --text-2xl:24px; --text-xl:20px; --text-lg:17px;
  --text-base:14px; --text-sm:13px; --text-xs:11.5px;

  /* ---- Formas y profundidad --------------------------------------------- */
  --r-sm:6px; --r-md:9px; --r-lg:12px; --r-xl:16px; --r-pill:999px;
  --sombra-1:0 1px 2px rgba(34,32,95,.06);
  --sombra-2:0 2px 8px rgba(34,32,95,.08);
  --sombra-3:0 8px 28px rgba(34,32,95,.14);
  --anillo:0 0 0 3px rgba(34,32,95,.12);
  --anillo-naranja:0 0 0 3px rgba(246,106,36,.18);

  /* ---- Medidas del marco ------------------------------------------------- */
  --nx-barra:56px;
  --nx-menu:258px;
  --nx-menu-min:64px;
}

/* Si algún día llega la Dax con licencia, IT deja los dos archivos en
   app/public/fuentes/ y borra los comentarios de este bloque. El servidor ya
   sirve .woff2, no hay nada más que tocar.
@font-face{ font-family:"Dax"; font-weight:400; font-style:normal; font-display:swap;
  src:url("/fuentes/dax-regular.woff2") format("woff2"); }
@font-face{ font-family:"Dax"; font-weight:700; font-style:normal; font-display:swap;
  src:url("/fuentes/dax-bold.woff2") format("woff2"); }
*/

/* Unifica el cuerpo de las siete páginas sin tocar sus componentes. */
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:var(--sans);
  font-size:var(--text-base);
  line-height:1.5;
  color:var(--ink-body);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{ font-family:var(--font-heading); letter-spacing:-.011em; }
button,input,select,textarea{ font-family:inherit; }
:focus-visible{ outline:2px solid var(--orange); outline-offset:2px; }

/* ============================================================================
   EL MARCO — todo lo que sigue lo inyecta shell.js
   ========================================================================== */

body.nx-con-marco{
  margin:0;
  padding-top:var(--nx-barra);
  padding-left:var(--nx-menu);
  transition:padding-left .18s ease;
}
body.nx-menu-min{ padding-left:var(--nx-menu-min); }

/* ------------------------------------------------------------ barra superior */
.nx-barra{
  position:fixed; top:0; left:0; right:0; height:var(--nx-barra); z-index:70;
  display:flex; align-items:center; gap:14px; padding:0 20px 0 18px;
  background:var(--paper); border-bottom:1px solid var(--line);
  box-shadow:var(--sombra-1);
}
.nx-barra .nx-logo{ display:flex; align-items:center; flex:0 0 auto; }
.nx-barra .nx-logo img{ height:32px; width:auto; display:block; }

/* Migaja «HR / Nómina». Es la que le dice a la persona dónde está parada. */
.nx-migaja{
  display:flex; align-items:center; gap:7px; min-width:0;
  font-size:var(--text-sm); color:var(--ink-faint); font-weight:600;
  padding-left:14px; margin-left:2px; border-left:1px solid var(--line);
}
.nx-migaja .sep{ color:var(--line); font-weight:400; }
.nx-migaja b{ color:var(--navy); font-weight:700; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }

.nx-barra .nx-der{ margin-left:auto; display:flex; align-items:center; gap:6px; }

/* Botones redondos de la barra: idioma, ayuda, salir. */
.nx-icono{
  width:34px; height:34px; border-radius:var(--r-pill); border:1px solid transparent;
  background:transparent; color:var(--navy); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:18px; line-height:1; padding:0; transition:background .15s,border-color .15s;
}
.nx-icono:hover{ background:var(--surface-sunken); border-color:var(--line); }
.nx-icono.peligro:hover{ background:var(--danger-bg); color:var(--danger); border-color:transparent; }

/* El botón ES|EN que pinta idioma.js dentro de [data-idioma-boton]. */
.nx-barra [data-idioma-boton] button,
.nx-barra [data-idioma-boton] a{
  font-size:var(--text-xs); font-weight:700; letter-spacing:.03em;
  border-radius:var(--r-pill); border:1px solid var(--line);
  background:var(--paper); color:var(--navy); padding:6px 12px; cursor:pointer;
}
.nx-barra [data-idioma-boton] button:hover{ border-color:var(--navy); background:var(--surface-sunken); }

.nx-sep-v{ width:1px; height:24px; background:var(--line); margin:0 4px; }

/* Nombre + inicial, como en Orion. */
.nx-yo{ display:flex; align-items:center; gap:10px; min-width:0; }
.nx-yo .nx-nombre{ font-size:var(--text-sm); color:var(--navy); font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:230px; }
.nx-yo .nx-nombre b{ font-weight:700; }
.nx-inicial{
  width:34px; height:34px; border-radius:var(--r-pill); flex:0 0 auto;
  background:var(--navy); color:#fff; font-weight:700; font-size:var(--text-sm);
  display:flex; align-items:center; justify-content:center; letter-spacing:.02em;
}

/* ------------------------------------------------------------- menú lateral */
.nx-menu{
  position:fixed; top:var(--nx-barra); bottom:0; left:0; width:var(--nx-menu); z-index:60;
  background:var(--paper); border-right:1px solid var(--line);
  display:flex; flex-direction:column; overflow-y:auto; overflow-x:hidden;
  transition:width .18s ease;
}
body.nx-menu-min .nx-menu{ width:var(--nx-menu-min); }

.nx-hamburguesa{
  flex:0 0 auto; margin:10px 12px 6px; width:40px; height:38px;
  border:1px solid transparent; background:transparent; border-radius:var(--r-md);
  color:var(--navy); font-size:21px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.nx-hamburguesa:hover{ background:var(--surface-sunken); border-color:var(--line); }

.nx-grupo{ padding:0 10px; }
.nx-grupo + .nx-grupo{ margin-top:4px; }

/* Encabezado del grupo (HR). Caja marcada, igual que en Orion. */
.nx-grupo-cab{
  display:flex; align-items:center; gap:11px; width:100%;
  padding:11px 12px; border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--surface-sunken); color:var(--navy);
  font-family:var(--font-heading); font-size:15px; font-weight:700;
  cursor:default; text-align:left;
}
.nx-grupo-cab > i:first-child{ font-size:19px; flex:0 0 auto; color:var(--navy); }
.nx-grupo-cab .nx-etq{ flex:1 1 auto; min-width:0; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.nx-grupo-cab .nx-chevron{ font-size:17px; color:var(--ink-faint); flex:0 0 auto; }

.nx-items{ list-style:none; margin:2px 0 0; padding:0; }
.nx-items li{ margin:1px 0; }

/* Los ambientes nuestros van debajo de TimeCards pero separados de él y
   separados entre sí por oficio, no en una lista corrida: quien entra debe
   ver de un golpe cuáles son «procesar la nómina» y cuáles no. */
.nx-divisor{ height:1px; background:var(--line-soft); margin:9px 12px 4px; }
.nx-sub-cab{
  display:flex; align-items:center; gap:7px; padding:6px 12px 4px;
  font-size:10px; font-weight:800; letter-spacing:.075em; text-transform:uppercase;
  color:var(--ink-faint);
}
.nx-sub-cab i{ font-size:12px; color:var(--orange); }
.nx-bloque{
  border:1px solid var(--line-soft); border-radius:var(--r-md);
  padding:4px; margin:0 2px 2px; background:#FBFCFE;
}
.nx-bloque .nx-item{ padding-left:6px; }

/* Un renglón del menú. El guion de la izquierda y el icono en cuadro son de
   Orion; se copian tal cual para que el empalme no se note. */
.nx-item{
  display:flex; align-items:center; gap:9px; width:100%;
  padding:8px 10px 8px 6px; border:1px solid transparent; border-radius:var(--r-md);
  background:transparent; color:var(--ink-body); cursor:pointer;
  font-size:var(--text-sm); font-weight:600; text-align:left; text-decoration:none;
  transition:background .13s, border-color .13s, color .13s;
}
.nx-item .nx-guion{ flex:0 0 auto; width:11px; text-align:center;
  color:var(--ink-faint); font-weight:700; }
.nx-item .nx-caja{
  flex:0 0 auto; width:27px; height:27px; border-radius:7px;
  border:1px solid var(--line); background:var(--paper); color:var(--navy);
  display:flex; align-items:center; justify-content:center; font-size:15px;
}
.nx-item .nx-etq{ flex:1 1 auto; min-width:0; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.nx-item:hover{ background:var(--surface-sunken); color:var(--navy); }
.nx-item:hover .nx-caja{ border-color:var(--navy); }

.nx-item.nx-activo{
  background:var(--surface-sunken); border-color:var(--navy); color:var(--navy);
  box-shadow:var(--anillo);
}
.nx-item.nx-activo .nx-caja{ background:var(--navy); border-color:var(--navy); color:#fff; }
.nx-item.nx-activo .nx-guion{ color:var(--orange); }

/* Item que vive en Orion y todavía no tenemos enlazado. */
.nx-item.nx-externo{ color:var(--ink-faint); cursor:default; }
.nx-item.nx-externo .nx-caja{ background:var(--surface-sunken); color:var(--ink-faint); }
.nx-item.nx-externo:hover{ background:transparent; color:var(--ink-faint); }
.nx-item.nx-externo:hover .nx-caja{ border-color:var(--line); }
.nx-item.nx-externo[href]{ cursor:pointer; }
.nx-item.nx-externo[href]:hover{ background:var(--surface-sunken); color:var(--navy); }
.nx-tag-orion{
  flex:0 0 auto; font-size:9.5px; font-weight:800; letter-spacing:.05em;
  text-transform:uppercase; padding:2px 6px; border-radius:var(--r-pill);
  background:var(--badge-it-bg); color:var(--badge-it-fg);
}

/* Cuando alguien no tiene permiso para un ambiente, el renglón no existe.
   shell.js lo marca con esta clase y gana sobre cualquier .hidden de la página. */
.nx-oculto{ display:none !important; }

.nx-pie{
  margin-top:auto; padding:14px 16px 16px; border-top:1px solid var(--line-soft);
  font-size:var(--text-xs); color:var(--ink-faint); line-height:1.45;
}
.nx-pie b{ color:var(--ink-soft); font-weight:700; }

/* Menú plegado: solo iconos, el resto se va. */
body.nx-menu-min .nx-grupo-cab .nx-etq,
body.nx-menu-min .nx-grupo-cab .nx-chevron,
body.nx-menu-min .nx-item .nx-etq,
body.nx-menu-min .nx-item .nx-guion,
body.nx-menu-min .nx-tag-orion,
body.nx-menu-min .nx-sub-cab,
body.nx-menu-min .nx-pie{ display:none; }
body.nx-menu-min .nx-bloque{ border-color:transparent; background:transparent; padding:2px 0; }
body.nx-menu-min .nx-divisor{ margin:7px 10px; }
body.nx-menu-min .nx-grupo{ padding:0 8px; }
body.nx-menu-min .nx-grupo-cab{ justify-content:center; padding:11px 0; }
body.nx-menu-min .nx-item{ justify-content:center; padding:8px 0; }

/* -------------------------------------------- título de la pantalla activa */
.nx-titulo{
  display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap;
  padding:22px 0 16px; margin-bottom:18px; border-bottom:1px solid var(--line);
}
.nx-titulo h1{
  margin:0; font-size:var(--text-2xl); font-weight:700; color:var(--navy);
  display:flex; align-items:center; gap:10px;
}
.nx-titulo h1 i{ color:var(--orange); font-size:24px; }
.nx-titulo p{ margin:5px 0 0; font-size:var(--text-sm); color:var(--ink-soft); max-width:74ch; }
.nx-titulo .nx-acciones{ margin-left:auto; display:flex; align-items:center;
  gap:9px; flex-wrap:wrap; padding-top:4px; }

/* Empotrado en Orion: la barra y el menú los pone él, así que la página va
   pegada al borde y sin dejar hueco para un marco que aquí no existe. */
body.nx-empotrado{ margin:0; padding-top:0; padding-left:0; }
body.nx-empotrado .nx-titulo{ padding-top:16px; }

/* ------------------------------------------------------------------ móvil */
.nx-velo{ position:fixed; inset:var(--nx-barra) 0 0 0; z-index:59;
  background:rgba(23,21,64,.38); border:0; padding:0; display:none; }

@media (max-width:900px){
  body.nx-con-marco{ padding-left:0; }
  .nx-menu{ transform:translateX(-100%); box-shadow:var(--sombra-3); }
  body.nx-menu-abierto .nx-menu{ transform:none; }
  body.nx-menu-abierto .nx-velo{ display:block; }
  body.nx-menu-min .nx-menu{ width:var(--nx-menu); }
  body.nx-menu-min .nx-grupo-cab .nx-etq,
  body.nx-menu-min .nx-item .nx-etq,
  body.nx-menu-min .nx-item .nx-guion,
  body.nx-menu-min .nx-pie{ display:initial; }
  body.nx-menu-min .nx-sub-cab{ display:flex; }
  body.nx-menu-min .nx-bloque{ border-color:var(--line-soft); background:#FBFCFE; padding:4px; }
  body.nx-menu-min .nx-item{ justify-content:flex-start; padding:8px 10px 8px 6px; }
  body.nx-menu-min .nx-grupo-cab{ justify-content:flex-start; padding:11px 12px; }
  .nx-hamburguesa{ display:none; }
  .nx-barra .nx-abrir-menu{ display:inline-flex; }
  .nx-migaja{ display:none; }
  .nx-yo .nx-nombre{ display:none; }
}
.nx-barra .nx-abrir-menu{ display:none; }

@media print{
  .nx-barra,.nx-menu,.nx-velo{ display:none !important; }
  body.nx-con-marco{ padding:0 !important; }
}