/* Un solo archivo de estilos para el reloj y el panel. */
:root {
  --fondo: #f4f6f9; --papel: #fff; --tinta: #1b2330; --suave: #566173; --linea: #d8dee7;
  --acento: #1d5bbf; --acento-osc: #174a9c;
  --ok: #17703f; --ok-f: #e2f4e9; --mal: #b3261e; --mal-f: #fde9e7; --aviso: #7d5200; --aviso-f: #fff0cc;
  --info: #1d5bbf; --info-f: #e3edfc; --neutro: #55399e; --neutro-f: #ece7fa; --gris-f: #e9edf2;
}
* { box-sizing: border-box; }
html { font-size: 16px; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: var(--tinta); background: var(--fondo); line-height: 1.45; }
a { color: var(--acento); }
h1 { font-size: 1.5rem; margin: 0; }
h2 { font-size: 1.1rem; margin: 0 0 .5rem; }
h1 small, h2 small { font-size: .85rem; font-weight: 400; color: var(--suave); margin-left: .4rem; }
small { color: var(--suave); }
input, select, button { font: inherit; color: inherit; }
input, select { border: 1px solid #aeb7c4; border-radius: 6px; padding: .45rem .55rem; background: #fff; min-height: 2.4rem; max-width: 100%; }
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid #8ab4f8; outline-offset: 1px; }
[hidden] { display: none !important; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .3rem; min-height: 2.4rem; padding: .4rem .85rem; border: 1px solid #aeb7c4; border-radius: 6px; background: #fff; color: var(--tinta); text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn:hover { background: #eef2f7; }
.btn.primario { background: var(--acento); border-color: var(--acento); color: #fff; font-weight: 600; }
.btn.primario:hover { background: var(--acento-osc); }
.btn.peligro { color: var(--mal); border-color: #d99a95; }
.btn.chico { min-height: 2rem; padding: .2rem .6rem; font-size: .9rem; }
button.link { background: none; border: 0; padding: 0; color: var(--acento); text-decoration: underline; cursor: pointer; }

.chip { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .85rem; font-weight: 600; white-space: nowrap; background: var(--gris-f); color: var(--suave); }
.chip.ok { background: var(--ok-f); color: var(--ok); } .chip.mal { background: var(--mal-f); color: var(--mal); }
.chip.aviso { background: var(--aviso-f); color: var(--aviso); } .chip.info { background: var(--info-f); color: var(--info); }
.chip.neutro { background: var(--neutro-f); color: var(--neutro); }
.pos { color: var(--ok); font-weight: 600; } .neg { color: var(--mal); font-weight: 600; } .cero { color: #8a94a3; }

/* ---------- Panel ---------- */
.barra { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.25rem; padding: .5rem 1.25rem; background: #16202e; color: #fff; }
.barra a { color: #d5deea; text-decoration: none; }
.barra .marca { font-size: 1.05rem; color: #fff; }
.barra nav { display: flex; flex-wrap: wrap; gap: .15rem; flex: 1; }
.barra nav a { padding: .4rem .7rem; border-radius: 6px; }
.barra nav a:hover { background: #26354a; }
.barra nav a.activa { background: #fff; color: #16202e; font-weight: 600; }
.quien { display: flex; align-items: center; gap: .6rem; font-size: .9rem; }
.quien small { color: #a9b6c8; } .quien form { display: inline; } .quien button.link { color: #d5deea; }
main { max-width: 1400px; margin: 0 auto; padding: 1.25rem; }
.titulo { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-bottom: 1rem; }
.titulo h1 { margin-right: auto; }
.miga { margin: 0 0 .3rem; font-size: .9rem; color: var(--suave); }
.mes { display: inline-flex; align-items: center; gap: .5rem; } .mes strong { min-width: 9.5rem; text-align: center; }
.filtro { display: inline-flex; align-items: center; gap: .5rem; } .filtro label { display: inline-flex; align-items: center; gap: .4rem; }
.flash { padding: .7rem .9rem; border-radius: 8px; margin: 0 0 1rem; background: var(--info-f); border: 1px solid #b9cdf0; }
.flash.ok { background: var(--ok-f); border-color: #a9d9bd; } .flash.mal { background: var(--mal-f); border-color: #eab5b0; }
.flash.aviso { background: var(--aviso-f); border-color: #e6c877; }
.nota { color: var(--suave); font-size: .9rem; } .vacio { color: var(--suave); padding: 1.2rem; text-align: center; background: var(--papel); border: 1px dashed var(--linea); border-radius: 8px; }
.caja { background: var(--papel); border: 1px solid var(--linea); border-radius: 10px; padding: 1rem 1.1rem; margin-bottom: 1.1rem; }
.caja.angosta { max-width: 26rem; margin: 3rem auto; } .caja.angosta label { display: block; margin: .8rem 0; } .caja.angosta input { display: block; width: 100%; margin-top: .25rem; }
.grupo { margin-bottom: 1.6rem; }
.plegable { margin: 1rem 0; } .plegable summary, details.caja summary { cursor: pointer; padding: .3rem 0; }

.tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .7rem; margin-bottom: 1.1rem; }
.tarjeta { background: var(--papel); border: 1px solid var(--linea); border-radius: 10px; padding: .7rem .9rem; }
.tarjeta b { display: block; font-size: 1.55rem; line-height: 1.2; font-variant-numeric: tabular-nums; } .tarjeta span { font-size: .88rem; color: var(--suave); }
.tarjeta.mal { background: var(--mal-f); border-color: #eab5b0; } .tarjeta.mal b { color: var(--mal); }
.tarjeta.aviso { background: var(--aviso-f); border-color: #e6c877; } .tarjeta.aviso b { color: var(--aviso); }

.tabla-scroll { overflow-x: auto; background: var(--papel); border: 1px solid var(--linea); border-radius: 10px; margin-bottom: .8rem; }
table { border-collapse: collapse; width: 100%; font-size: .94rem; }
th, td { padding: .5rem .7rem; text-align: left; border-bottom: 1px solid #e7ebf1; vertical-align: middle; }
thead th { background: #eef1f6; font-size: .82rem; text-transform: uppercase; letter-spacing: .02em; color: #3d4756; white-space: nowrap; position: sticky; top: 0; }
tbody tr:hover { background: #f7f9fc; } tbody tr:last-child td { border-bottom: 0; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.num.alerta { background: var(--mal-f); font-weight: 700; color: var(--mal); }
.fila-mal td { background: #fff6f5; } .fila-gris td { color: #8a94a3; } .anulada td { text-decoration: line-through; color: #8a94a3; } .anulada small { text-decoration: none; display: inline-block; }
tr.sep th { background: #f7f9fc; font-size: .82rem; color: var(--suave); padding: .3rem .7rem; }
tfoot td, tfoot th { border-top: 2px solid #c5cdd9; font-weight: 600; background: #f7f9fc; }
.acciones { white-space: nowrap; text-align: right; } .acciones > * { margin-left: .3rem; }
form.enlinea { display: inline-flex; gap: .3rem; align-items: center; }
.planilla td, .planilla th { padding: .45rem .5rem; } .planilla td:first-child { white-space: nowrap; } .planilla thead th { cursor: help; }
.jornada input[type=time] { width: 7.2rem; } .jornada input[type=number] { width: 5rem; }

.grilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .8rem 1rem; align-items: end; margin-top: .6rem; }
.grilla label, .fila-form label { display: flex; flex-direction: column; gap: .25rem; font-size: .92rem; font-weight: 600; }
.grilla label small, .fila-form label small { font-weight: 400; }
.grilla .ancho, .fila-form .ancho { grid-column: 1 / -1; flex: 1; }
label.tilde { flex-direction: row !important; align-items: center; gap: .5rem; font-weight: 400 !important; } label.tilde input { min-height: 0; width: 1.1rem; height: 1.1rem; }
fieldset { border: 1px solid var(--linea); border-radius: 8px; display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; } legend { font-size: .9rem; font-weight: 600; padding: 0 .4rem; }
.fila-form { display: flex; flex-wrap: wrap; align-items: end; gap: .7rem 1rem; margin-top: .7rem; } .fila-form strong { align-self: center; }
.datos { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; margin: .7rem 0; } .datos dt { color: var(--suave); } .datos dd { margin: 0; font-weight: 600; }
.estado-dia { margin: 0; font-size: 1.05rem; } .estado-dia .chip { font-size: .95rem; }
.que-hacer { border-top: 1px solid var(--linea); margin-top: .8rem; padding-top: .3rem; } .que-hacer p { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .6rem 0; }
.glosario { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; font-size: .92rem; } .glosario dt { font-weight: 600; } .glosario dd { margin: 0; color: #3d4756; }
.pestanas { display: flex; flex-wrap: wrap; gap: .2rem; border-bottom: 2px solid var(--linea); margin-bottom: 1rem; }
.pestanas a { padding: .5rem .9rem; text-decoration: none; color: var(--suave); border-radius: 8px 8px 0 0; }
.pestanas a.activa { background: var(--papel); color: var(--tinta); font-weight: 600; border: 2px solid var(--linea); border-bottom-color: var(--papel); margin-bottom: -2px; }

@media (max-width: 700px) {
  main { padding: .8rem; } .barra { padding: .5rem .8rem; } .titulo h1 { width: 100%; }
  .datos, .glosario { grid-template-columns: 1fr; } .glosario dd { margin-bottom: .4rem; }
}
@media print { .barra, .btn, form, .pestanas { display: none !important; } body { background: #fff; } }

/* ---------- Reloj ---------- */
body.reloj { background: #101a28; color: #fff; min-height: 100vh; display: flex; }
body.reloj main { width: 100%; max-width: 34rem; margin: auto; padding: 1.5rem 1.2rem; text-align: center; }
.reloj .equipo { margin: 0; color: #a9b6c8; font-size: .95rem; }
.reloj .hora { margin: .4rem 0 0; font-size: clamp(3.2rem, 15vw, 5.6rem); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.05; }
.reloj .fecha { margin: 0 0 1.4rem; color: #c8d2e0; font-size: 1.15rem; text-transform: capitalize; }
.reloj label { display: block; color: #c8d2e0; margin-bottom: .35rem; }
.reloj input { width: 100%; font-size: 2rem; text-align: center; letter-spacing: .25em; text-transform: uppercase; padding: .7rem; min-height: 4rem; border: 2px solid #5d6f88; border-radius: 12px; color: #101a28; }
.reloj .botones { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; margin-top: 1rem; }
.reloj .botones button { min-height: 5.5rem; font-size: 1.5rem; font-weight: 700; border: 0; border-radius: 14px; color: #fff; cursor: pointer; }
.reloj .entrada { background: #1a8a4c; } .reloj .salida { background: #c2410c; }
.reloj .botones button:active { transform: scale(.98); } .reloj .botones button:disabled { opacity: .5; }
.reloj .mensaje { min-height: 4.2rem; margin: 1.1rem 0 0; padding: .8rem; border-radius: 12px; font-size: 1.25rem; font-weight: 600; }
.reloj .mensaje:empty { visibility: hidden; }
.reloj .mensaje.ok { background: #d9f5e3; color: #0f5a30; } .reloj .mensaje.mal { background: #fde2df; color: #8f1d17; } .reloj .mensaje.aviso { background: #fff0cc; color: #6b4600; }
.reloj .mensaje .aviso { display: block; margin-top: .4rem; font-size: 1rem; font-weight: 500; }
.reloj .cola { margin-top: 1rem; padding: .8rem 1rem; border-radius: 12px; background: #fff0cc; color: #5c3c00; text-align: left; font-size: .95rem; }
.reloj .cola p { margin: 0; } .reloj .cola ul { margin: .4rem 0; padding-left: 1.2rem; } .reloj .cola button.link { color: #5c3c00; }
.reloj .alta { background: #1b2a3f; border-radius: 14px; padding: 1.2rem; } .reloj .alta h2 { font-size: 1.2rem; }
.reloj .alta button { margin-top: .8rem; width: 100%; min-height: 3.2rem; font-size: 1.1rem; font-weight: 700; border: 0; border-radius: 10px; background: var(--acento); color: #fff; cursor: pointer; }