/* =============================================================================
   VELCOM Intranet — sistema visual
   -----------------------------------------------------------------------------
   Misma estructura de siempre (barra bordó arriba, tarjetas, fondo claro), pero
   ejecutada con más cuidado: una sola familia tipográfica, una escala de
   espaciado de 4px, bordes de 1px en vez de sombras pesadas y el bordó reservado
   para lo que se puede accionar.

   Los números van con cifras tabulares en TODAS las tablas: sin eso las columnas
   se mueven cuando cambian los valores y un reporte se vuelve incómodo de leer.
   ============================================================================= */

:root{
  --fondo:#f5f6f8;
  --panel:#ffffff;
  --borde:#e6e8ec;
  --borde-fuerte:#d3d8df;
  --texto:#171a1f;
  --suave:#5b6472;
  --tenue:#8b95a3;

  --bordo:#7a1226;
  --bordo-osc:#5f0e1e;
  --bordo-tinte:#f9eff1;

  --ok:#166534;
  --ok-tinte:#eaf6ee;
  --alerta:#8a5a06;
  --alerta-tinte:#fdf3e2;
  --grave:#b3261e;
  --grave-tinte:#fdeeed;

  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --r-chico:6px; --r:8px; --r-grande:12px;
  --sombra:0 1px 2px rgba(16,24,40,.04);
  --sombra-alta:0 4px 14px rgba(16,24,40,.07);

  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:20px; --e6:28px; --e7:40px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--fondo);color:var(--texto);
  font:15px/1.55 var(--sans);
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--bordo);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:2px}
/* El foco nunca se saca: se lo hace bien visible. */
:focus-visible{outline:2px solid var(--bordo);outline-offset:2px;border-radius:var(--r-chico)}

/* ── barra superior ───────────────────────────────────────────────────────── */
/* El contenido de la barra se alinea con el de la página en vez de pegarse a
   los bordes de la pantalla: en un monitor ancho, un logo en el extremo
   izquierdo y un nombre en el derecho se leen como dos cosas sueltas. */
.barra{
  background:var(--bordo);color:#fff;
  display:flex;align-items:center;gap:var(--e5);
  padding:0 max(var(--e5), calc((100% - 1160px) / 2));
  height:58px;
  position:sticky;top:0;z-index:20;
}
.marca{display:flex;align-items:baseline;gap:7px;color:#fff;padding:10px 0}
.marca:hover{text-decoration:none;opacity:.9}
.marca b{font-size:17px;font-weight:600;letter-spacing:.01em}
.marca span{font-size:13px;font-weight:400;color:rgba(255,255,255,.62)}

.barra nav{display:flex;gap:var(--e1);flex:1;margin-left:var(--e3)}
.barra nav a{
  color:rgba(255,255,255,.82);font-size:13.5px;font-weight:500;
  padding:7px 13px;border-radius:var(--r);
  transition:background .15s ease,color .15s ease;
}
.barra nav a:hover{background:rgba(255,255,255,.12);color:#fff;text-decoration:none}
.barra nav a.acti{background:rgba(255,255,255,.17);color:#fff}
.yo{display:flex;align-items:center;gap:var(--e2);font-size:13.5px;
  color:rgba(255,255,255,.85);white-space:nowrap}
/* "Salir" se usa todos los días: necesita área de clic, no ser sólo texto. */
.yo a{color:rgba(255,255,255,.85);font-size:13px;padding:8px 11px;
  border-radius:var(--r);transition:background .15s ease,color .15s ease}
.yo a:hover{color:#fff;background:rgba(255,255,255,.12);text-decoration:none}

/* ── página ───────────────────────────────────────────────────────────────── */
main{max-width:1160px;margin:0 auto;padding:var(--e6) var(--e5) var(--e7)}
.encabezado{margin-bottom:var(--e6)}
h1{font-size:25px;font-weight:600;letter-spacing:-.02em;line-height:1.25}
.miga{font-size:13px;color:var(--tenue);margin-bottom:var(--e2)}
.miga a{color:var(--tenue);display:inline-block;padding:4px 0}
.bajada{color:var(--suave);font-size:14.5px;margin-top:var(--e2);max-width:64ch}
h2{font-size:16px;font-weight:600;letter-spacing:-.01em}
.rotulo{display:block;font-size:11.5px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--tenue);margin-bottom:var(--e3)}

/* ── tarjetas de sección ──────────────────────────────────────────────────── */
.tarjetas{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  gap:var(--e4)}
.tarjeta{
  background:var(--panel);border:1px solid var(--borde);border-radius:var(--r-grande);
  padding:var(--e5);color:inherit;display:block;box-shadow:var(--sombra);
  transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease;
}
.tarjeta:hover{text-decoration:none;border-color:var(--bordo);
  box-shadow:var(--sombra-alta);transform:translateY(-1px)}
.tarjeta h3{font-size:15.5px;font-weight:600;margin-bottom:var(--e2);
  display:flex;align-items:center;justify-content:space-between;gap:var(--e2)}
.tarjeta h3 .flecha{color:var(--borde-fuerte);transition:color .15s ease,transform .15s ease}
.tarjeta:hover h3 .flecha{color:var(--bordo);transform:translateX(2px)}
.tarjeta p{font-size:13.5px;color:var(--suave);line-height:1.5}

/* ── paneles (tablas y formularios) ───────────────────────────────────────── */
.panel{background:var(--panel);border:1px solid var(--borde);
  border-radius:var(--r-grande);box-shadow:var(--sombra);margin-bottom:var(--e4)}
.panel > h2{padding:var(--e4) var(--e5);border-bottom:1px solid var(--borde)}
.panel .cuerpo{padding:var(--e5)}
.panel .nota{font-size:12.5px;color:var(--tenue);padding:0 var(--e5) var(--e4)}
.panel .nota:first-child{padding-top:var(--e4)}

/* ── cifras ───────────────────────────────────────────────────────────────── */
.cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
  gap:var(--e3);margin-bottom:var(--e4)}
.cifra{background:var(--panel);border:1px solid var(--borde);
  border-radius:var(--r-grande);box-shadow:var(--sombra);padding:var(--e4) var(--e5)}
.cifra .n{display:block;font-size:29px;font-weight:600;letter-spacing:-.025em;
  line-height:1.15}
.cifra .r{display:block;font-size:12.5px;color:var(--suave);margin-top:var(--e1)}
.n.ok{color:var(--ok)} .n.grave{color:var(--grave)} .n.bordo{color:var(--bordo)}
.n.tenue{color:var(--tenue)}

/* ── tablas ───────────────────────────────────────────────────────────────── */
.tabla-scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{
  text-align:left;font-size:11.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--tenue);white-space:nowrap;
  padding:var(--e3) var(--e4);background:#fafbfc;
  border-bottom:1px solid var(--borde);
}
th:first-child{padding-left:var(--e5)} th:last-child{padding-right:var(--e5)}
td{padding:var(--e3) var(--e4);border-bottom:1px solid var(--borde);
  font-size:14px;vertical-align:middle}
td:first-child{padding-left:var(--e5)} td:last-child{padding-right:var(--e5)}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:#fafbfc}
td.der,th.der{text-align:right}
td.num{text-align:right;font-variant-numeric:tabular-nums}
td.clave{font-weight:600}
td.suave{color:var(--suave)}
.vacio{color:var(--tenue);font-size:13.5px;padding:var(--e6) 0;text-align:center}

/* ── formularios ──────────────────────────────────────────────────────────── */
.campo{display:flex;flex-direction:column;gap:6px}
label{font-size:12.5px;font-weight:500;color:var(--suave)}
input[type=text],input[type=email],input[type=password],input[type=date]{
  font:400 14.5px/1.4 var(--sans);color:var(--texto);background:var(--panel);
  border:1px solid var(--borde-fuerte);border-radius:var(--r);
  padding:10px 12px;min-height:42px;   /* alcanzable con el dedo */
  transition:border-color .15s ease,box-shadow .15s ease;
}
input:hover{border-color:var(--tenue)}
input:focus{border-color:var(--bordo);outline:none;
  box-shadow:0 0 0 3px var(--bordo-tinte)}
.fila{display:flex;gap:var(--e3);flex-wrap:wrap;align-items:flex-end}
.check{flex-direction:row;align-items:center;gap:var(--e2);font-size:14px;
  color:var(--suave);padding-bottom:11px}
.check input{width:16px;height:16px;min-height:0;accent-color:var(--bordo)}

button,.btn{
  font:500 14px/1 var(--sans);
  background:var(--bordo);color:#fff;border:1px solid var(--bordo);
  border-radius:var(--r);padding:0 18px;min-height:42px;cursor:pointer;
  transition:background .15s ease,border-color .15s ease;
}
button:hover{background:var(--bordo-osc);border-color:var(--bordo-osc)}
button.callado{background:var(--panel);color:var(--suave);border-color:var(--borde-fuerte)}
button.callado:hover{background:#fafbfc;color:var(--texto);border-color:var(--tenue)}
button.chico{min-height:32px;padding:0 11px;font-size:12.5px}
button:disabled{opacity:.45;cursor:not-allowed}

/* ── estados ──────────────────────────────────────────────────────────────── */
/* Pastilla con punto: el color no puede ser el único portador del dato. */
.estado{display:inline-flex;align-items:center;gap:5px;
  font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:999px;
  white-space:nowrap}
.estado::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.e-ok{background:var(--ok-tinte);color:var(--ok)}
.e-no{background:var(--grave-tinte);color:var(--grave)}
.e-pend{background:var(--alerta-tinte);color:var(--alerta)}
.e-gris{background:#eef0f3;color:var(--suave)}

.aviso,.error{border-radius:var(--r);padding:var(--e3) var(--e4);
  margin-bottom:var(--e4);font-size:14px;border:1px solid}
.aviso{background:var(--bordo-tinte);border-color:#eed7dc;color:#5f0e1e}
.error{background:var(--grave-tinte);border-color:#f3d3d1;color:#8c1c16}
.aviso code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13.5px;
  background:#fff;padding:2px 6px;border-radius:var(--r-chico)}

/* ── acceso ───────────────────────────────────────────────────────────────── */
.acceso{min-height:100vh;min-height:100dvh;display:flex;align-items:center;
  justify-content:center;padding:var(--e5)}
.acceso .caja{width:100%;max-width:392px}
.acceso .logo{text-align:center;margin-bottom:var(--e6)}
.acceso .logo b{font-size:22px;font-weight:600;color:var(--bordo);letter-spacing:-.01em}
.acceso .logo span{display:block;font-size:13.5px;color:var(--tenue);margin-top:2px}
.acceso .hoja{background:var(--panel);border:1px solid var(--borde);
  border-radius:14px;box-shadow:var(--sombra-alta);padding:var(--e6)}
.acceso h1{font-size:19px;margin-bottom:var(--e1)}
.acceso .ayuda{color:var(--suave);font-size:13.5px;margin-bottom:var(--e5)}
.acceso form{display:flex;flex-direction:column;gap:var(--e4)}
.acceso button{width:100%}
.acceso .abajo{margin-top:var(--e4);text-align:center;font-size:13px;color:var(--tenue)}
/* El código se tipea mirando el teléfono: grande y con aire entre dígitos. */
.acceso .codigo input{font-size:23px;letter-spacing:.36em;text-align:center;
  font-weight:500;padding:12px}
.qr{display:block;width:184px;height:184px;margin:0 auto var(--e3);
  border:1px solid var(--borde);border-radius:var(--r);padding:var(--e2);background:#fff}
.secreto{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;
  line-height:1.6;color:var(--suave);text-align:center;word-break:break-all;
  background:var(--fondo);border:1px solid var(--borde);border-radius:var(--r);
  padding:var(--e2) var(--e3);margin-bottom:var(--e4)}

/* ── pie ──────────────────────────────────────────────────────────────────── */
/* Acompaña el ancho del contenido, no el de la pantalla: así la línea del
   borde superior arranca y termina donde arranca y termina lo que se lee. */
.pie{max-width:1160px;margin:var(--e7) auto 0;padding:var(--e5) var(--e5) var(--e6);
  border-top:1px solid var(--borde);text-align:center;
  font-size:12.5px;color:var(--tenue)}

/* ── responsive ───────────────────────────────────────────────────────────── */
@media (max-width:680px){
  main{padding:var(--e5) var(--e4) var(--e6)}
  .barra{height:auto;flex-wrap:wrap;gap:var(--e3);padding:var(--e3) var(--e4)}
  .barra nav{order:3;width:100%;margin-left:0}
  .barra nav a{flex:1;text-align:center}
  .yo{margin-left:auto}
  h1{font-size:22px}
  .cifra .n{font-size:25px}
  th:first-child,td:first-child{padding-left:var(--e4)}
  th:last-child,td:last-child{padding-right:var(--e4)}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}