/* ============================================================================
   SySO · SISTEMA DE DISEÑO ÚNICO
   ----------------------------------------------------------------------------
   Un solo archivo con el aspecto de TODA la plataforma. Cada página reemplaza
   su bloque <style> propio por:
       <link rel="stylesheet" href="sso_ui.css">
   Los nombres de clase son los que las páginas ya usan (card, btn, est, muted,
   falta, ok, err, tablewrap...), así que no hay que reescribir el HTML.
   Si algo hay que cambiar de aspecto, se cambia acá y cambia en todas.
   ============================================================================ */

@import url('fuentes.css?v=20260907f');

/* TODAS las variables van con prefijo --sso- a propósito: varias páginas definen
   las suyas con nombres iguales (--ink, --line, --ok, --bad...). Sin el prefijo,
   este archivo les cambiaba la paleta a su propia app. Con el prefijo, conviven. */
:root{
  /* Marca */
  --sso-navy:#0D1F35;          /* barra lateral */
  --sso-navy-2:#14283F;        /* hover del menú */
  --sso-navy-3:#1E3A54;        /* item activo */
  --sso-orange:#E8620A;        /* acento SySO */
  --sso-amber:#F5A623;

  /* Superficies */
  --sso-bg:#F4F7FA;
  --sso-card:#FFFFFF;
  --sso-line:#E6EBF1;
  --sso-line-2:#D8E0E9;

  /* Texto */
  --sso-ink:#16233A;
  --sso-muted:#6B7787;
  --sso-muted-2:#8A96A6;

  /* Estados */
  --sso-ok:#12764A;      --sso-okbg:#E6F5EC;      --sso-okline:#BFE5CE;
  --sso-warn:#96660A;    --sso-warnbg:#FDF3DE;    --sso-warnline:#F2DEB0;
  --sso-bad:#B3261E;     --sso-badbg:#FDECEA;     --sso-badline:#F4C9C4;
  --sso-info:#1F5C99;    --sso-infobg:#EAF2FB;    --sso-infoline:#C6DCF2;

  --sso-fd:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  --sso-r:14px;                /* radio de las tarjetas */
  --sso-sombra:0 1px 2px rgba(16,35,58,.04), 0 8px 24px -16px rgba(16,35,58,.22);
  --sso-side:254px;            /* ancho de la barra lateral */
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--sso-fd);
  background:var(--sso-bg);
  color:var(--sso-ink);
  min-height:100vh;
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

/* ---------------------------------------------------------- BARRA LATERAL
   La inyecta sso_menu.js, así que ninguna página tiene que escribirla. */
.sso-side{
  position:fixed; inset:0 auto 0 0; width:var(--sso-side); z-index:900;
  background:var(--sso-navy); color:#fff;
  display:flex; flex-direction:column;
  padding:1rem .7rem 1rem;
  overflow-y:auto;
}
.sso-side .marca{display:flex; align-items:center; gap:.6rem; padding:.2rem .5rem 1.1rem}
.sso-side .marca img{height:34px; width:auto}
.sso-side .marca .n{font-weight:800; font-size:1.02rem; letter-spacing:-.01em; line-height:1.1}
.sso-side .marca .s{font-size:.68rem; color:#93A3B6; font-weight:500}

/* Varias páginas tienen reglas sueltas tipo `nav{background:#fff}` o `header{...}`
   sin clase (la 886, por ejemplo). Se resetea lo que pueda pisar la barra, para
   que el menú se vea igual venga de la página que venga. */
.sso-side nav{
  display:flex; flex-direction:column; gap:2px;
  background:transparent; border:none; padding:0; margin:0; overflow:visible;
}
.sso-side nav::-webkit-scrollbar{display:none}

/* Item suelto (Inicio) */
.sso-side a.it{
  display:flex; align-items:center; gap:.65rem;
  padding:.6rem .7rem; border-radius:9px;
  color:#C3CEDC; text-decoration:none;
  font-size:.875rem; font-weight:600;
  border-left:3px solid transparent;
  transition:background .12s, color .12s;
}
.sso-side a.it .ic{width:18px; text-align:center; font-size:.95rem; flex:none; opacity:.9}
.sso-side a.it:hover{background:var(--sso-navy-2); color:#fff}
.sso-side a.it.on{background:var(--sso-navy-3); color:#fff; border-left-color:var(--sso-orange)}

/* ---- Grupos desplegables: los mismos 6 del Panel ---- */
.sso-side .gr{margin-top:2px}
.sso-side .gr .cab{
  width:100%; display:flex; align-items:center; gap:.6rem;
  padding:.58rem .7rem; border:none; border-radius:9px; cursor:pointer;
  background:transparent; color:#C3CEDC;
  font-family:var(--sso-fd); font-size:.83rem; font-weight:700; text-align:left;
  transition:background .12s, color .12s;
}
.sso-side .gr .cab:hover{background:var(--sso-navy-2); color:#fff}
.sso-side .gr .cab .ic{width:18px; text-align:center; font-size:.95rem; flex:none}
.sso-side .gr .cab .nm{flex:1; min-width:0; line-height:1.25}
.sso-side .gr .cab .ct{
  font-size:.66rem; font-weight:800; color:#8FA0B4;
  background:rgba(255,255,255,.08); border-radius:20px; padding:.05rem .38rem;
}
.sso-side .gr .cab .fl{
  font-size:1rem; color:#8FA0B4; transition:transform .16s; transform:rotate(0deg);
}
.sso-side .gr.abierto .cab{color:#fff}
.sso-side .gr.abierto .cab .fl{transform:rotate(90deg)}

/* Lo que hay adentro del grupo, con su explicación */
.sso-side .gr .apps{display:none; margin:.15rem 0 .3rem .95rem;
                    border-left:2px solid rgba(255,255,255,.10); padding-left:.4rem}
.sso-side .gr.abierto .apps{display:block}
.sso-side .gr .apps a.sub{
  display:flex; gap:.5rem; align-items:flex-start;
  padding:.42rem .5rem; border-radius:8px; text-decoration:none;
  color:#B7C4D4; border-left:3px solid transparent; margin-left:-.4rem;
}
.sso-side .gr .apps a.sub .ic{font-size:.85rem; line-height:1.35; flex:none}
.sso-side .gr .apps a.sub b{display:block; font-size:.8rem; font-weight:700; line-height:1.3}
.sso-side .gr .apps a.sub i{
  display:block; font-style:normal; font-size:.7rem; line-height:1.3;
  color:#7E8DA1; margin-top:.05rem;
}
.sso-side .gr .apps a.sub:hover{background:var(--sso-navy-2); color:#fff}
.sso-side .gr .apps a.sub:hover i{color:#9BAABD}
.sso-side .gr .apps a.sub.on{
  background:var(--sso-navy-3); color:#fff; border-left-color:var(--c,var(--sso-orange));
}
.sso-side .gr .apps a.sub.on i{color:#A9B8CA}

.sso-side .ayuda{
  margin-top:auto; background:var(--sso-navy-2); border-radius:11px;
  padding:.8rem .85rem; font-size:.8rem; color:#C3CEDC;
  display:flex; align-items:center; gap:.6rem;
}
.sso-side .ayuda b{display:block; color:#fff; font-size:.84rem}

/* El botón flotante "🏠 Volver" que tienen 7 pantallas queda tapado por la barra
   lateral, y además ya es redundante: el menú tiene Inicio. Se oculta solo cuando
   la barra está puesta, así la pantalla sin menú (celular del trabajador) lo conserva. */
body.sso-con-menu a[title="Volver"]{display:none!important}

/* El Panel tenía su propia barra de grupos arriba. Con la barra lateral quedarían
   dos menús para lo mismo, así que se oculta la vieja. El breadcrumb se conserva:
   sigue sirviendo para saber dónde estás y volver. */
body.sso-con-menu #tabsBar{display:none!important}
/* El logo del Panel queda repetido con el de la barra lateral: se deja uno solo.
   Al sacarlo, lo que quedaba (Salir) se iba a la izquierda: se manda a la derecha. */
body.sso-con-menu .panel-header-logo{display:none!important}
body.sso-con-menu .panel-header{justify-content:flex-end}

/* Botón hamburguesa (solo celular) */
.sso-burger{
  display:none; position:fixed; top:.7rem; left:.7rem; z-index:1000;
  background:var(--sso-navy); color:#fff; border:none; border-radius:10px;
  width:40px; height:40px; font-size:1.1rem; cursor:pointer;
}

/* ------------------------------------------------------------- CONTENIDO */
body.sso-con-menu{padding-left:var(--sso-side)}

/* Encabezado de página: blanco, no la banda azul de antes */
header.top{
  background:var(--sso-card); color:var(--sso-ink);
  border-bottom:1px solid var(--sso-line);
  padding:1rem 1.6rem;
  display:flex; align-items:center; gap:.9rem; flex-wrap:wrap;
}
header.top img{display:none}          /* el logo vive en la barra lateral */
header.top .t{font-weight:800; font-size:1.32rem; letter-spacing:-.02em; line-height:1.15}
header.top .s{font-size:.8rem; color:var(--sso-muted); font-weight:500}
header.top .sp{margin-left:auto; display:flex; gap:.5rem; flex-wrap:wrap; align-items:center}

.wrap{max-width:1240px; margin:0 auto; padding:1.5rem 1.6rem 3rem}

/* ---------------------------------------------------------------- BOTONES */
.btn{
  border:none; border-radius:10px; padding:.6rem 1.05rem;
  font-family:var(--sso-fd); font-weight:700; font-size:.86rem;
  cursor:pointer; line-height:1.2; transition:filter .12s, background .12s;
}
.btn:hover{filter:brightness(.96)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--sso-orange); outline-offset:2px}
.btn-primary{background:#2D5378; color:#fff}
.btn-primary:hover{background:#1E3A54; filter:none}
.btn-ghost{background:var(--sso-card); color:var(--sso-ink); border:1px solid var(--sso-line-2)}
.btn-ghost:hover{background:#F7F9FC; filter:none}
.btn-nav{background:var(--sso-card); color:var(--sso-ink); border:1px solid var(--sso-line-2)}
.btn-sm{padding:.34rem .7rem; font-size:.77rem; border-radius:8px}
/* El naranja de la marca queda para la acción destacada de cada pantalla */
.btn-acento{background:linear-gradient(90deg,var(--sso-orange),var(--sso-amber)); color:#fff}

/* --------------------------------------------------------------- TARJETAS */
.card{
  background:var(--sso-card); border:1px solid var(--sso-line);
  border-radius:var(--sso-r); padding:1.25rem 1.35rem;
  margin-bottom:1.1rem; box-shadow:var(--sso-sombra);
}
h1{font-size:1.4rem; font-weight:800; letter-spacing:-.02em}
h2{font-size:1.02rem; font-weight:800; letter-spacing:-.01em; margin-bottom:.55rem}
h3{
  font-size:.71rem; font-weight:800; text-transform:uppercase; letter-spacing:.09em;
  color:var(--sso-muted-2); margin:1.1rem 0 .5rem;
}
.muted{color:var(--sso-muted); font-size:.86rem}

/* Tarjeta de número grande (el "128 empleados" del modelo) */
.kpi{
  background:var(--sso-card); border:1px solid var(--sso-line); border-radius:var(--sso-r);
  padding:1.05rem 1.15rem; box-shadow:var(--sso-sombra);
}
.kpi .r{font-size:.7rem; font-weight:800; text-transform:uppercase;
        letter-spacing:.08em; color:var(--sso-muted-2)}
.kpi .n{font-size:2.1rem; font-weight:800; letter-spacing:-.03em; margin:.25rem 0 .1rem;
        font-variant-numeric:tabular-nums}
.kpi .d{font-size:.78rem; color:var(--sso-muted)}
.kpi .d.sube{color:var(--sso-ok); font-weight:700}
.kpi .d.baja{color:var(--sso-bad); font-weight:700}

/* ------------------------------------------------------------ FORMULARIOS */
label.fld{
  display:block; font-size:.71rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.06em; color:var(--sso-muted-2); margin:.7rem 0 .25rem;
}
input,select,textarea{
  width:100%; padding:.58rem .75rem;
  border:1px solid var(--sso-line-2); border-radius:9px;
  font-family:var(--sso-fd); font-size:.9rem; background:var(--sso-card); color:var(--sso-ink);
}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--sso-navy-3); box-shadow:0 0 0 3px rgba(30,58,84,.10);
}
textarea{resize:vertical; line-height:1.55}
/* Que la tilde no se despegue de su texto */
input[type=checkbox],input[type=radio]{width:auto; flex:none; margin:0; accent-color:var(--sso-navy-3)}
input[type=file]{width:auto; max-width:100%; padding:.42rem .5rem; background:transparent; border:none}

/* ----------------------------------------------------------------- GRILLAS */
.g2{display:grid; grid-template-columns:repeat(2,1fr); gap:.9rem}
.g3{display:grid; grid-template-columns:repeat(3,1fr); gap:.9rem}
/* Las tarjetas de números se reacomodan solas según el ancho disponible:
   así no quedan apretadas dentro de una tarjeta angosta. */
.g4{display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:.9rem}
@media(max-width:720px){.g2,.g3{grid-template-columns:1fr}}
.row{display:flex; gap:.55rem; flex-wrap:wrap; align-items:center}
.sp{margin-left:auto}
.hide{display:none!important}

/* ------------------------------------------------------------------ TABLAS */
table{width:100%; border-collapse:collapse; font-size:.865rem}
th{
  text-align:left; font-size:.68rem; text-transform:uppercase; letter-spacing:.07em;
  color:var(--sso-muted-2); padding:.6rem .7rem; background:#F7F9FC; font-weight:800;
  border-bottom:1px solid var(--sso-line);
}
td{padding:.62rem .7rem; border-top:1px solid var(--sso-line); vertical-align:middle}
tbody tr:hover{background:#FAFBFD}
.tablewrap{overflow-x:auto; border:1px solid var(--sso-line); border-radius:11px; background:var(--sso-card)}

/* ------------------------------------------------------- CHIPS Y SEMÁFOROS */
.est{
  display:inline-block; font-size:.71rem; font-weight:700;
  padding:.2rem .55rem; border-radius:20px; white-space:nowrap; border:1px solid transparent;
}
.e-ok{background:var(--sso-okbg);   color:var(--sso-ok);   border-color:var(--sso-okline)}
.e-por{background:var(--sso-warnbg);color:var(--sso-warn); border-color:var(--sso-warnline)}
.e-mal{background:var(--sso-badbg); color:var(--sso-bad);  border-color:var(--sso-badline)}
.e-sin{background:#EEF1F5;      color:var(--sso-muted);border-color:var(--sso-line-2)}

.pill{font-size:.67rem; font-weight:800; padding:.18rem .55rem; border-radius:20px; border:1px solid}
.p-emp{background:var(--sso-infobg); color:var(--sso-info); border-color:var(--sso-infoline)}
.p-mono{background:#F5F1E8; color:#7A6440; border-color:#E4D9C4}

.sem{display:inline-block; width:10px; height:10px; border-radius:50%; flex:0 0 auto}
.sem.verde{background:var(--sso-ok)} .sem.amarillo{background:var(--sso-amber)} .sem.rojo{background:var(--sso-bad)}

/* ------------------------------------------------------------- MENSAJES */
.ok,.err,.falta,.aviso{
  border-radius:10px; padding:.7rem .9rem; font-size:.87rem; margin:.6rem 0; border:1px solid;
}
.ok{background:var(--sso-okbg); color:var(--sso-ok); border-color:var(--sso-okline)}
.err{background:var(--sso-badbg); color:var(--sso-bad); border-color:var(--sso-badline)}
.falta{background:var(--sso-badbg); color:#7D1F19; border-color:var(--sso-badline); margin-top:.6rem}
.aviso{background:var(--sso-warnbg); color:var(--sso-warn); border-color:var(--sso-warnline)}
.falta ul,.ok ul,.err ul{margin:.35rem 0 0 1.15rem}

/* ------------------------------------------------- FILA CLICKEABLE (listas) */
.cta{
  border:1px solid var(--sso-line); border-radius:11px; padding:.85rem 1rem;
  margin-bottom:.6rem; background:var(--sso-card); cursor:pointer;
  transition:border-color .12s, box-shadow .12s;
}
.cta:hover{border-color:var(--sso-line-2); box-shadow:var(--sso-sombra)}
.cta.sel{border-color:var(--sso-navy-3); box-shadow:0 0 0 2px rgba(30,58,84,.12)}
.cta .h{display:flex; align-items:center; gap:.55rem; flex-wrap:wrap}
.cta .rs{font-weight:800; font-size:.95rem}

/* ------------------------------------------------------------------ CELULAR */
@media(max-width:860px){
  .sso-side{transform:translateX(-100%); transition:transform .2s}
  .sso-side.abierto{transform:none; box-shadow:0 0 60px rgba(0,0,0,.4)}
  .sso-burger{display:block}
  body.sso-con-menu{padding-left:0}
  header.top{padding:.9rem 1rem .9rem 3.6rem}
  .wrap{padding:1rem}
  header.top .t{font-size:1.1rem}
}

/* ------------------------------------------------------------- IMPRESIÓN */
@media print{
  .sso-side,.sso-burger,header.top,.no-print{display:none!important}
  body.sso-con-menu{padding-left:0}
  body{background:#fff}
  .card{border:none; box-shadow:none; padding:0; margin-bottom:.8rem}
  .wrap{max-width:none; padding:0}
}

/* ============================================================================
   RESPUESTA AL CLIC — que nunca quede la duda de si apretaste
   ----------------------------------------------------------------------------
   Antes un botón que tardaba no daba ninguna señal y uno volvía a apretarlo.
   Tres capas:
     1. al apretar, se hunde y se aclara (visible aunque muevas el mouse)
     2. mientras trabaja, queda "ocupado" con su ruedita y no acepta más clics
     3. deshabilitado se ve deshabilitado
   ============================================================================ */
.btn:active, .tab-btn:active{ transform:translateY(1px) scale(.985); filter:brightness(.92) }

/* El pulso lo agrega comun_sso.js al apretar: dura un momento aunque saques el
   dedo enseguida, para que el ojo lo alcance a ver. */
.sso-pulso{ animation:ssoPulso .35s ease-out }
@keyframes ssoPulso{
  0%{ transform:translateY(1px) scale(.97); filter:brightness(.88) }
  100%{ transform:none; filter:none }
}

/* Ocupado: el botón dice que está trabajando y no se puede volver a apretar. */
.btn.sso-ocupado, .tab-btn.sso-ocupado{
  position:relative; pointer-events:none; cursor:progress;
  opacity:.85; filter:saturate(.6);
  box-shadow:inset 0 0 0 999px rgba(0,0,0,.06);
}
.btn.sso-ocupado::after, .tab-btn.sso-ocupado::after{
  content:""; display:inline-block; width:.72em; height:.72em; margin-left:.45em;
  vertical-align:-.06em; border:2px solid currentColor; border-right-color:transparent;
  border-radius:50%; animation:ssoGira .6s linear infinite;
}
@keyframes ssoGira{ to{ transform:rotate(360deg) } }

.btn:disabled, .btn[disabled], .tab-btn:disabled, .tab-btn[disabled]{
  opacity:.5; cursor:not-allowed; pointer-events:none;
}

/* Mientras algo carga, el cursor lo dice en toda la pantalla. */
body.sso-trabajando{ cursor:progress }