/* Estilo común de toda la aplicación.
   Sigue el lenguaje de la portada (20/09/2026): blanco, sin un solo degradado,
   tipografía del sistema, líneas finas en vez de sombras y pesos suaves.
   Los nombres de las variables y de las clases son los de siempre: aquí solo
   cambia el aspecto, nunca el HTML de las plantillas. */
:root{
  /* Casi negro, no negro: cansa menos la vista. Es el mismo de la portada. */
  --ink:#1d1d1f; --ink2:#424245; --muted:#6d6d72; --line:#e8e8ed;
  --bg:#fbfbfd; --card:#ffffff;
  --brand:#0071e3; --brand-dk:#0062c4;
  --ok:#1b8245; --ok-bg:#f0f9f3; --ok-line:#d6efe0;
  --warn:#b05d09; --warn-bg:#fff8ec; --warn-line:#f5e3c0;
  --bad:#c1332b; --bad-bg:#fdf0ef; --bad-line:#f5cfcb;
  --r:12px; --r-lg:18px;
  /* Márgenes que reserva iOS para la Dynamic Island, el notch y el borde
     redondeado. Sin esto, con viewport-fit=cover el contenido se mete
     debajo de la barra de estado y no se puede pulsar. */
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bot:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);
  /* Una sombra que apenas se ve: el relieve lo dan las líneas, no las sombras. */
  --sh:0 1px 2px rgba(0,0,0,.04);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,
              "Helvetica Neue",Arial,sans-serif;
  font-size:16px; line-height:1.5; -webkit-text-size-adjust:100%;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{color:var(--brand); text-decoration:none; font-weight:500}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0 0 .5rem; line-height:1.15; letter-spacing:-.025em; font-weight:600}
h1{font-size:1.7rem;letter-spacing:-.032em} h2{font-size:1.28rem} h3{font-size:1.03rem;letter-spacing:-.018em}
p{margin:0 0 .75rem}

/* ---------- layout ---------- */
.shell{max-width:960px;margin:0 auto;
  padding:20px calc(20px + var(--safe-r)) calc(56px + var(--safe-bot)) calc(20px + var(--safe-l))}
.shell.narrow{max-width:480px}
.shell.wide{max-width:1180px}

/* La barra de arriba es una barra de sistema: blanca, translúcida y con una
   línea fina debajo. Como la cabecera de la portada. */
.topbar{
  background:rgba(255,255,255,.82); color:var(--ink);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  position:sticky; top:0; z-index:20;
  border-bottom:1px solid var(--line);
  /* Safari se atraganta con sticky dentro de contenedores flex; aquí el
     padre es el body, así que aguanta. Si algún día falla, pasar a fixed
     y compensar con padding-top en .shell. */
  will-change:transform;
}
.topbar .in{
  max-width:1180px;margin:0 auto;
  padding:calc(11px + var(--safe-top)) calc(20px + var(--safe-r)) 11px calc(20px + var(--safe-l));
  display:flex;align-items:center;gap:12px;justify-content:space-between;flex-wrap:wrap
}
/* Si va la banda de superadmin encima, ella ya reserva el hueco de arriba */
.imperso + .topbar .in{padding-top:11px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:600;letter-spacing:-.02em}
.brand:hover{text-decoration:none}
.mark{width:28px;height:28px;flex:0 0 auto;background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 32 32%22%3E%3Crect width=%2232%22 height=%2232%22 rx=%228.6%22 fill=%22%231d1d1f%22/%3E%3Ccircle cx=%2216%22 cy=%2216%22 r=%228.4%22 fill=%22none%22 stroke=%22%23fff%22 stroke-width=%222%22/%3E%3Cpath d=%22M16 16V10.3M16 16l4 2.4%22 stroke=%22%23fff%22 stroke-width=%222.1%22 stroke-linecap=%22round%22 fill=%22none%22/%3E%3C/svg%3E") center/contain no-repeat}
.brand b{font-size:1rem;font-weight:600}
.brand span{display:block;font-size:.72rem;font-weight:400;color:var(--muted);letter-spacing:0}
.tnav{display:flex;gap:4px;flex-wrap:wrap}
.tnav a{
  color:var(--ink); font-size:.85rem; font-weight:500;
  padding:7px 13px;border-radius:999px;border:1px solid transparent;background:none
}
.tnav a:hover{background:#f0f0f4;text-decoration:none}

/* ---------- cards ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;box-shadow:var(--sh);margin:0 0 16px}
.card.tight{padding:16px}
.card h2,.card h3{margin-top:0}
.sub{color:var(--muted);font-size:.91rem;letter-spacing:-.005em}
.hr{height:1px;background:var(--line);border:0;margin:16px 0}

/* ---------- forms ---------- */
label{display:block;font-size:.66rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin:16px 0 6px}
label:first-child{margin-top:0}
input,select,textarea{
  width:100%;padding:12px 14px;font-size:16px;font-family:inherit;color:var(--ink);
  background:#fff;border:1px solid #d2d2d7;border-radius:var(--r);outline:none;appearance:none
}
input:focus,select:focus,textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(0,113,227,.16)}
/* Las casillas y los radios necesitan el dibujo nativo del navegador:
   la regla general de arriba lleva appearance:none y los dejaba invisibles. */
input[type=checkbox],input[type=radio]{
  appearance:auto;-webkit-appearance:auto;
  width:20px;height:20px;min-width:20px;padding:0;margin:0;
  border:0;border-radius:0;flex:0 0 auto;
  accent-color:var(--brand);cursor:pointer
}
input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{
  outline:3px solid var(--brand);outline-offset:2px;box-shadow:none}
label[for]{cursor:pointer}
/* Botón de píldora, como los de la portada. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:13px 22px;font-size:.98rem;font-weight:500;font-family:inherit;
  border:1px solid transparent;border-radius:999px;cursor:pointer;
  background:var(--brand);color:#fff;text-decoration:none;line-height:1.2;
  letter-spacing:-.01em;transition:opacity .18s,background .18s
}
.btn:hover{background:var(--brand);opacity:.86;text-decoration:none}
.btn:active{opacity:.75}
.btn.ghost{background:#fff;color:var(--ink);border-color:#d2d2d7;opacity:1}
.btn.ghost:hover{background:#f5f5f7;opacity:1}
.btn.ok{background:var(--ok)}.btn.ok:hover{background:var(--ok)}
.btn.bad{background:var(--bad)}.btn.bad:hover{background:var(--bad)}
.btn.sm{width:auto;padding:8px 16px;font-size:.86rem}
.btn.dark{background:var(--ink)}.btn.dark:hover{background:var(--ink)}
.row{display:flex;gap:10px;flex-wrap:wrap}
.row>*{flex:1 1 160px}

/* ---------- big punch button ----------
   Colores planos, sin degradado: el color sigue diciendo lo mismo que antes
   (verde entrar, ámbar pausa, naranja salir), solo que más sobrio. */
.punch{
  width:100%;padding:28px 20px;font-size:1.45rem;font-weight:600;letter-spacing:-.025em;
  border:0;border-radius:16px;color:#fff;cursor:pointer;font-family:inherit;
  box-shadow:none;transition:opacity .18s
}
.punch:hover{opacity:.9}
.punch:active{opacity:.8}
.punch.in{background:var(--ok)}
.punch.out{background:#c1521a}
.punch.pause{background:var(--warn)}
.punch.slim{padding:17px 20px;font-size:1.08rem;opacity:.94}
.punch small{display:block;font-size:.85rem;font-weight:400;opacity:.88;margin-top:6px;letter-spacing:-.005em}

/* ---------- kpis ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:12px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.kpi .t{font-size:.63rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.kpi .v{font-size:1.7rem;font-weight:600;margin-top:4px;letter-spacing:-.035em;font-variant-numeric:tabular-nums}

/* ---------- table ---------- */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -4px}
table{width:100%;border-collapse:collapse;font-size:.92rem}
th,td{padding:12px 10px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
th{font-size:.63rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;white-space:nowrap}
tr:last-child td{border-bottom:0}
td.num{font-variant-numeric:tabular-nums}

/* ---------- pills / alerts ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;font-size:.76rem;font-weight:500;white-space:nowrap;border:1px solid;letter-spacing:-.005em}
.pill.ok{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-line)}
.pill.warn{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line)}
.pill.bad{background:var(--bad-bg);color:var(--bad);border-color:var(--bad-line)}
.pill.mute{background:#f0f0f4;color:var(--muted);border-color:var(--line)}
.dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 auto}
.alert{padding:13px 16px;border-radius:var(--r);font-weight:500;font-size:.92rem;margin:0 0 16px;border:1px solid;letter-spacing:-.005em}
.alert.ok{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-line)}
.alert.bad{background:var(--bad-bg);color:var(--bad);border-color:var(--bad-line)}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 16px}
.tabs a{
  padding:8px 15px;border-radius:999px;font-size:.87rem;font-weight:500;
  background:#fff;border:1px solid var(--line);color:var(--ink2);letter-spacing:-.008em
}
.tabs a:hover{text-decoration:none;background:#f5f5f7}
.tabs a.on{background:var(--ink);color:#fff;border-color:var(--ink)}

.foot{text-align:center;color:var(--muted);font-size:.83rem;margin-top:26px}
.legalfoot{text-align:center;margin-top:20px;padding-top:18px;border-top:1px solid var(--line);font-size:.78rem;color:var(--muted);display:flex;gap:6px 18px;justify-content:center;flex-wrap:wrap}
.legalfoot a{font-weight:400;color:var(--muted)}
.legalfoot a:hover{color:var(--ink);text-decoration:none}
/* La banda de suplantación tiene que cantar: avisa de que lo que se ve no es
   tuyo. Índigo, que es el único color fuera de la paleta y por eso destaca. */
.imperso{position:sticky;top:0;z-index:60;background:#5e5ce6;color:#fff;font-size:.84rem;font-weight:500;
  padding:calc(9px + var(--safe-top)) calc(16px + var(--safe-r)) 9px calc(16px + var(--safe-l));
  display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;text-align:center}
.imperso a{color:#fff;text-decoration:underline;font-weight:600;white-space:nowrap}
.imperso + .topbar{top:calc(37px + var(--safe-top))}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;background:#fff;padding:11px 18px;border-radius:10px;z-index:99;box-shadow:0 6px 20px rgba(0,0,0,.25);font-weight:600}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.foot a{font-weight:500}
.stack{display:flex;flex-direction:column;gap:10px}
.between{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.85rem}
.empty{text-align:center;color:var(--muted);padding:30px 10px;font-size:.92rem}
@media(max-width:560px){
  h1{font-size:1.4rem}
  .card{padding:17px;border-radius:16px}
  .shell{padding:14px calc(16px + var(--safe-r)) calc(40px + var(--safe-bot)) calc(16px + var(--safe-l))}
}