:root {
  --fondo: #f3f1ec; --panel: #ffffff; --tinta: #1c2126; --tenue: #68707a; --linea: #dedad1;
  --acento: #14524a; --acento-suave: #e2efec; --ok: #1f7a4d; --aviso: #b26a00; --mal: #b3261e;
  --radio: 14px; --sombra: 0 1px 2px rgba(20,25,30,.06), 0 6px 20px rgba(20,25,30,.06);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
body.reparto { --acento: #9a3b12; --acento-suave: #f6e7de; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--fondo); color: var(--tinta); font-size: 16px; line-height: 1.45; -webkit-tap-highlight-color: transparent; }
h1, h2, h3 { margin: 0; line-height: 1.2; letter-spacing: -.01em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
.oculto { display: none !important; }
.tenue { color: var(--tenue); }
.num { font-variant-numeric: tabular-nums; }

.btn { border: 1px solid var(--linea); background: var(--panel); border-radius: 10px; padding: .55em 1em; font-weight: 600; }
.btn:hover { border-color: #b9b4a8; }
.btn.primario { background: var(--acento); border-color: var(--acento); color: #fff; }
.btn.primario:hover { filter: brightness(1.1); }
.btn.peligro { color: var(--mal); }
.btn.mini { padding: .3em .7em; font-size: .86rem; }
.btn:disabled { opacity: .5; cursor: default; }
input, select, textarea { border: 1px solid var(--linea); border-radius: 10px; padding: .55em .7em; background: #fff; width: 100%; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible { outline: 3px solid color-mix(in srgb, var(--acento) 45%, transparent); outline-offset: 1px; }
label { display: block; font-size: .86rem; font-weight: 600; color: var(--tenue); margin-bottom: .9em; }
label > input, label > select, label > textarea { margin-top: .3em; font-weight: 400; color: var(--tinta); }

/* ============ portada ============ */
.portada { min-height: 100%; display: grid; place-items: center; padding: 24px; }
.portada .caja { max-width: 560px; width: 100%; }
.portada h1 { font-size: 2rem; margin-bottom: .3em; }
.portada a.opcion { display: block; background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 22px 24px; margin-top: 14px; text-decoration: none; color: inherit; box-shadow: var(--sombra); }
.portada a.opcion strong { display: block; font-size: 1.2rem; color: var(--acento); }

/* ============ quiosco ============ */
.kiosko { height: 100%; display: flex; flex-direction: column; user-select: none; font-size: 18px; }
.capa { font-size: 18px; }
.k-cab { display: flex; align-items: center; gap: 20px; padding: 18px 28px; background: var(--acento); color: #fff; }
.k-cab .marca { font-weight: 700; font-size: 1.25rem; }
.k-cab .centro { opacity: .85; }
.k-cab .reloj { margin-left: auto; text-align: right; }
.k-cab .reloj b { display: block; font-size: 2.3rem; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.k-cab .reloj span { opacity: .85; font-size: .95rem; display: block; }
.k-cab .reloj span::first-letter { text-transform: uppercase; }
.k-cuerpo { flex: 1; overflow: auto; padding: 24px 28px 32px; }
.k-titulo { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.k-titulo h2 { font-size: 1.5rem; }
.k-titulo input { max-width: 300px; margin-left: auto; font-size: 1.05rem; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.persona { background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 18px 14px; text-align: center; box-shadow: var(--sombra); min-height: 132px; }
.persona:active { transform: scale(.98); border-color: var(--acento); }
.persona .ini { width: 54px; height: 54px; border-radius: 50%; background: var(--acento-suave); color: var(--acento); font-weight: 700; font-size: 1.2rem; display: grid; place-items: center; margin: 0 auto 10px; }
.persona b { display: block; font-size: 1.08rem; }
.persona span { color: var(--tenue); font-size: .92rem; }
.separador { grid-column: 1 / -1; color: var(--tenue); font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-top: 10px; }
.k-pie { padding: 8px 28px; display: flex; gap: 16px; align-items: center; font-size: .82rem; color: var(--tenue); }
.k-pie button { background: none; border: 0; color: inherit; text-decoration: underline; padding: 6px; }
.k-pie .estado-red { margin-left: auto; }
.k-pie .estado-red.caida { color: var(--mal); font-weight: 700; }

.capa { position: fixed; inset: 0; background: rgba(28,33,38,.55); display: grid; place-items: center; padding: 20px; z-index: 10; }
.tarjeta { background: var(--panel); border-radius: 22px; box-shadow: 0 20px 60px rgba(0,0,0,.25); width: 100%; max-width: 500px; padding: 30px; max-height: 96vh; overflow: auto; }
.tarjeta.ancha { max-width: 760px; }
.tarjeta h2 { font-size: 1.45rem; text-align: center; }
.tarjeta .sub { text-align: center; color: var(--tenue); margin: .3em 0 1em; }
.puntos { display: flex; justify-content: center; gap: 16px; margin: 18px 0; height: 22px; }
.puntos i { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--tenue); }
.puntos i.lleno { background: var(--acento); border-color: var(--acento); }
.puntos.error { animation: temblor .35s; }
.puntos.error i { border-color: var(--mal); }
@keyframes temblor { 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
.teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.teclado button { height: 72px; font-size: 1.7rem; font-weight: 600; border-radius: 16px; border: 1px solid var(--linea); background: #faf9f6; }
.teclado button:active { background: var(--acento-suave); }
.teclado button.aux { font-size: 1rem; color: var(--tenue); background: none; border-color: transparent; }
.msg-error { color: var(--mal); text-align: center; min-height: 1.5em; font-weight: 600; margin-top: 12px; }

.situacion { text-align: center; border-radius: 14px; padding: 14px; margin: 14px 0 18px; background: #f1f0ec; font-weight: 600; }
.situacion.dentro { background: #e1f1e8; color: var(--ok); }
.situacion.pausa { background: #fbeed6; color: var(--aviso); }
.situacion small { display: block; font-weight: 400; color: var(--tinta); opacity: .8; margin-top: 2px; }
.acciones { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.accion { border: 0; border-radius: 16px; padding: 24px 12px; font-size: 1.3rem; font-weight: 700; color: #fff; background: var(--acento); }
.accion.sola { grid-column: 1 / -1; padding: 30px 12px; font-size: 1.5rem; }
.accion.salida { background: var(--mal); }
.accion.pausa { background: var(--aviso); }
.accion:active { filter: brightness(.9); }
.recientes { margin-top: 18px; border-top: 1px solid var(--linea); padding-top: 12px; }
.recientes h3 { font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tenue); margin-bottom: 6px; }
.recientes table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.recientes td { padding: 4px 0; }
.recientes td:not(:first-child) { text-align: right; }
.cerrar-x { display: block; margin: 16px auto 0; background: none; border: 0; color: var(--tenue); text-decoration: underline; padding: 10px; }
.confirmado { text-align: center; padding: 20px 0; }
.confirmado .marca-ok { width: 96px; height: 96px; border-radius: 50%; background: var(--ok); color: #fff; font-size: 3.2rem; display: grid; place-items: center; margin: 0 auto 16px; }
.confirmado .hora { font-size: 3.4rem; font-weight: 700; letter-spacing: -.02em; }
.activar { max-width: 460px; margin: 8vh auto; background: var(--panel); border-radius: 22px; padding: 32px; box-shadow: var(--sombra); }
.activar input { font-size: 1.6rem; text-align: center; letter-spacing: .25em; text-transform: uppercase; margin: 14px 0; }

/* ============ panel ============ */
.panel { display: grid; grid-template-columns: 232px 1fr; min-height: 100%; }
.lateral { background: #1c2126; color: #d9dde2; padding: 20px 12px; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; height: 100vh; overflow: auto; }
.lateral .logo { font-weight: 700; color: #fff; font-size: 1.1rem; padding: 4px 12px 18px; }
.lateral .logo small { display: block; font-weight: 400; color: #9aa3ad; font-size: .8rem; }
.lateral button { text-align: left; background: none; border: 0; color: inherit; padding: 9px 12px; border-radius: 9px; font-weight: 500; }
.lateral button:hover { background: #2a3138; }
.lateral button.activo { background: #fff; color: #1c2126; font-weight: 700; }
.lateral .grupo { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: #808a95; padding: 16px 12px 4px; }
.lateral .abajo { margin-top: auto; font-size: .85rem; color: #9aa3ad; padding: 12px; }
.principal { padding: 24px 32px 60px; min-width: 0; }
.barra { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.barra h1 { font-size: 1.6rem; margin-right: auto; }
.barra select, .barra input { width: auto; }
.filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; margin-bottom: 16px; }
.filtros label { margin: 0; }
.filtros input, .filtros select { width: auto; min-width: 150px; }
.caja { background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 18px 20px; margin-bottom: 18px; }
.caja > h2 { font-size: 1.05rem; margin-bottom: 12px; }
.tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 18px; }
.dato { background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 14px 18px; }
.dato b { display: block; font-size: 1.9rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.dato span { color: var(--tenue); font-size: .88rem; }
.tabla-scroll { overflow-x: auto; }
table.t { width: 100%; border-collapse: collapse; font-size: .93rem; }
table.t th { text-align: left; font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tenue); padding: 8px 10px; border-bottom: 1px solid var(--linea); white-space: nowrap; }
table.t td { padding: 8px 10px; border-bottom: 1px solid #eceae3; vertical-align: middle; }
table.t tr:last-child td { border-bottom: 0; }
table.t td.d, table.t th.d { text-align: right; font-variant-numeric: tabular-nums; }
table.t tr.detalle td { background: #faf9f6; }
table.t tr.inactivo td { color: var(--tenue); }
table.t tfoot td { font-weight: 700; border-top: 2px solid var(--linea); }
.chip { display: inline-block; border-radius: 99px; padding: .12em .65em; font-size: .78rem; font-weight: 700; background: #eceae3; color: #4b525a; white-space: nowrap; }
.chip.ok { background: #e1f1e8; color: var(--ok); }
.chip.aviso { background: #fbeed6; color: var(--aviso); }
.chip.mal { background: #f9e1df; color: var(--mal); }
.vacio { color: var(--tenue); padding: 18px 4px; }
.cuadrante td, .cuadrante th { text-align: center; }
.cuadrante td:first-child, .cuadrante th:first-child { text-align: left; white-space: nowrap; }
.cuadrante select { padding: .3em .2em; min-width: 68px; font-weight: 700; text-align: center; }
.cuadrante th.hoy { color: var(--acento); }
.cuadrante td.finde { background: #faf9f6; }
dialog { border: 0; border-radius: 18px; padding: 0; width: min(560px, 94vw); box-shadow: 0 20px 60px rgba(0,0,0,.3); color: var(--tinta); }
dialog::backdrop { background: rgba(28,33,38,.5); }
dialog form { padding: 24px; }
dialog h2 { font-size: 1.25rem; margin-bottom: 16px; }
dialog .dos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
dialog .pie { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
dialog .codigo { font-size: 2rem; font-weight: 700; letter-spacing: .2em; text-align: center; padding: 16px; background: var(--acento-suave); border-radius: 12px; margin: 12px 0; font-family: ui-monospace, Menlo, Consolas, monospace; }
.aviso-barra { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: #1c2126; color: #fff; padding: 12px 20px; border-radius: 12px; z-index: 50; box-shadow: var(--sombra); max-width: 90vw; }
.aviso-barra.mal { background: var(--mal); }
.acceso { min-height: 100%; display: grid; place-items: center; padding: 20px; }
.acceso form { background: var(--panel); border-radius: 20px; padding: 32px; width: min(420px, 100%); box-shadow: var(--sombra); }
.acceso h1 { font-size: 1.5rem; margin-bottom: .3em; }
.acceso p { color: var(--tenue); margin: 0 0 1.2em; }
@media (max-width: 860px) {
  .panel { grid-template-columns: 1fr; }
  .lateral { position: static; height: auto; flex-direction: row; flex-wrap: wrap; }
  .lateral .grupo, .lateral .abajo { display: none; }
  .principal { padding: 16px; }
}