/* Presente · EFMN — estándar profesional al nivel de un dashboard bien hecho.
   Guinda para marca y acción, dorado para lo que ocurre "ahora", estados con ícono + texto. */

/* Onest (licencia OFL, fonts/OFL.txt) servida desde el propio sistema: las páginas no se conectan a terceros. */
@font-face {
  font-family: 'Onest'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/onest-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Onest'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/onest-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light;
  --bg: #F6F6F7;
  --surface: #FFFFFF;
  --surface-2: #FAFAFB;
  --surface-3: #F1F1F3;
  --border: #E5E5E8;
  --border-strong: #D2D2D7;
  --text: #161A1D;
  --text-2: #565A61;
  --text-3: #686C73;

  --brand: #9B2247;
  --brand-hover: #82193A;
  --brand-dark: #611232;
  --brand-soft: #F7E9EE;
  --brand-ink: #7E1B3A;
  --gold: #A57F2C;
  --gold-soft: #F7F0DC;
  --gold-light: #E6D194;
  --gold-ink: #6F5419;

  --ok: #217A5B;      --ok-soft: #E5F2EC;    --ok-ink: #1A6049;
  --info: #3D5A80;    --info-soft: #E9EEF5;  --info-ink: #33506F;
  --warn: #B7791F;    --warn-soft: #FBF1DC;  --warn-ink: #7C5310;
  --bad: #C2410C;     --bad-soft: #FDEDE4;   --bad-ink: #9A3412;
  --rest-soft: #F0F0F2;

  --wine: #6E1736;
  --wine-deep: #4E0D24;
  --neural: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='240' viewBox='0 0 520 240'%3E%3Cg stroke='%23E6D194' stroke-opacity='.28' fill='none'%3E%3Cpath d='M20 60 110 96 190 40 290 104 380 58 500 92'/%3E%3Cpath d='M110 96 96 182 214 160 290 104'/%3E%3Cpath d='M214 160 190 40'/%3E%3Cpath d='M96 182 40 226'/%3E%3Cpath d='M214 160 316 206 420 168 500 92'/%3E%3Cpath d='M290 104 420 168'/%3E%3Cpath d='M380 58 446 14'/%3E%3Cpath d='M316 206 290 104'/%3E%3C/g%3E%3Cg fill='%23E6D194' fill-opacity='.55'%3E%3Ccircle cx='20' cy='60' r='2.5'/%3E%3Ccircle cx='110' cy='96' r='3.2'/%3E%3Ccircle cx='190' cy='40' r='2.5'/%3E%3Ccircle cx='290' cy='104' r='4'/%3E%3Ccircle cx='380' cy='58' r='2.6'/%3E%3Ccircle cx='500' cy='92' r='2.5'/%3E%3Ccircle cx='96' cy='182' r='2.6'/%3E%3Ccircle cx='214' cy='160' r='3.2'/%3E%3Ccircle cx='40' cy='226' r='2'/%3E%3Ccircle cx='316' cy='206' r='2.6'/%3E%3Ccircle cx='420' cy='168' r='3'/%3E%3Ccircle cx='446' cy='14' r='2'/%3E%3C/g%3E%3C/svg%3E");
  --chart-ok: #2E8B6A;
  --chart-warn: #D9A21B;
  --chart-bad: #E0602F;

  --r-sm: 8px;
  --r: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --shadow-sm: 0 1px 2px rgba(22, 26, 29, .06);
  --shadow: 0 1px 2px rgba(22, 26, 29, .05), 0 4px 12px -2px rgba(22, 26, 29, .06);
  --shadow-md: 0 2px 4px rgba(22, 26, 29, .04), 0 12px 28px -8px rgba(22, 26, 29, .14);
  --shadow-lg: 0 4px 8px rgba(22, 26, 29, .05), 0 32px 64px -16px rgba(22, 26, 29, .28);

  --f-ui: 'Onest', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--border-strong) transparent; }
body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--f-ui);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  caret-color: var(--brand);
  accent-color: var(--brand);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'ss01';
}
::selection { background: var(--brand-soft); color: var(--brand-dark); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--brand); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--brand-hover); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.num, time { font-variant-numeric: tabular-nums; }
.muted { color: var(--text-2); }
.label { font-weight: 600; font-size: .875rem; }
svg.i { width: 1.1em; height: 1.1em; flex: none; vertical-align: -.18em; }

/* ── Marca ── */
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); min-width: 0; }
.brand:hover { color: var(--text); }
.logo { width: 34px; height: 34px; flex: none; display: block; border-radius: 9px; box-shadow: 0 1px 2px rgba(22, 26, 29, .2); }
.brand-text { display: grid; line-height: 1.15; min-width: 0; }
.brand-text b { font-weight: 650; font-size: .98rem; letter-spacing: -.01em; }
.brand-text small { font-size: .75rem; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Superficies ── */
.sticker, .card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.card { padding: 20px; }

/* ── Botones ── */
.btn {
  --bg: var(--surface); --fg: var(--text); --bd: var(--border-strong);
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 36px; padding: 7px 14px;
  border: 1px solid var(--bd); border-radius: var(--r-sm);
  background: var(--bg); color: var(--fg);
  font-weight: 550; font-size: .875rem; text-decoration: none; line-height: 1.2;
  cursor: pointer; white-space: nowrap; box-shadow: var(--shadow-sm);
  transition: background-color .15s, border-color .15s, box-shadow .15s, transform .12s var(--ease-out);
}
.btn:hover { background: var(--surface-2); border-color: var(--text-3); color: var(--fg); }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn[disabled] { cursor: not-allowed; opacity: .5; transform: none; }
.btn svg.i { color: var(--text-3); }
.btn-primary { --bg: var(--brand); --fg: #fff; --bd: var(--brand-dark); box-shadow: 0 1px 2px rgba(22, 26, 29, .18), inset 0 1px 0 rgba(255, 255, 255, .12); }
.btn-primary:hover { background: var(--brand-hover); border-color: var(--brand-dark); }
.btn-primary svg.i, .btn-melon svg.i { color: currentColor; opacity: .85; }
.btn-melon { --bg: var(--ok); --fg: #fff; --bd: var(--ok-ink); }
.btn-melon:hover { background: var(--ok-ink); }
.btn-danger { --fg: var(--bad-ink); }
.btn-danger:hover { background: var(--bad-soft); border-color: #F2B9A0; }
.btn-ghost { --bg: transparent; --bd: transparent; box-shadow: none; color: var(--text-2); }
.btn-ghost:hover { background: var(--surface-3); border-color: transparent; color: var(--text); }
.btn-sm { min-height: 30px; padding: 4px 10px; font-size: .8125rem; }
.btn-icon { width: 32px; padding: 0; }

/* ── Pills de estado (ícono + texto) ── */
.pill {
  --c: var(--text-2); --s: var(--rest-soft);
  display: inline-flex; align-items: center; gap: 5px;
  padding: 1px 8px 1px 6px; border-radius: 6px;
  background: var(--s); color: var(--c);
  font-size: .75rem; font-weight: 550; line-height: 1.7; white-space: nowrap;
}
.pill svg.i { width: 12px; height: 12px; }
.pill-entrada { --c: var(--ok-ink); --s: var(--ok-soft); }
.pill-salida { --c: var(--info-ink); --s: var(--info-soft); }
.pill-a_tiempo, .pill-presente, .pill-zone-in, .pill-normal { --c: var(--ok-ink); --s: var(--ok-soft); }
.pill-se_fue { --c: var(--info-ink); --s: var(--info-soft); }
.pill-retardo, .pill-pendiente { --c: var(--warn-ink); --s: var(--warn-soft); }
.pill-salida_anticipada, .pill-falta, .pill-zone-out { --c: var(--bad-ink); --s: var(--bad-soft); }
.pill-presencial { --c: var(--brand-ink); --s: var(--brand-soft); }
.pill-en_linea { --c: var(--info-ink); --s: var(--info-soft); }
.pill-campo { --c: var(--gold-ink); --s: var(--gold-soft); }
.pill-manual { --c: var(--text-2); --s: transparent; box-shadow: inset 0 0 0 1px var(--border-strong); }
/* Hora de otra zona horaria, junto a la hora (ej. «Pacífico −1 h») */
.tz-tag {
  display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 5px; vertical-align: 1px;
  background: var(--surface-3); color: var(--text-2); box-shadow: inset 0 0 0 1px var(--border);
  font-size: .7rem; font-weight: 600; line-height: 1.6; letter-spacing: 0; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.rp-time .tz-tag { margin-left: 0; background: rgba(0, 0, 0, .5); color: #fff; box-shadow: none; }

/* ── Formularios ── */
.field { display: grid; gap: 6px; align-content: start; }
.field > span { font-weight: 550; font-size: .8125rem; color: var(--text); }
.field small { color: var(--text-2); font-size: .78rem; }
.input, select.input, textarea.input {
  width: 100%; min-height: 38px; padding: 8px 11px;
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--surface); font-size: .9rem;
  box-shadow: var(--shadow-sm);
  transition: border-color .15s, box-shadow .15s;
}
.input::placeholder { color: var(--text-3); }
.input:hover { border-color: var(--text-3); }
.input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(155, 34, 71, .14); }
textarea.input { min-height: 84px; resize: vertical; }
/* Fecha y hora: con su apariencia nativa, Safari de iPad y iPhone les pone un ancho mínimo propio
   y les suma el relleno al ancho, así que se salían de su casilla y se encimaban con el campo de al lado.
   Sin esa apariencia se acomodan igual que los demás campos (el calendario y el reloj siguen abriendo). */
input.input:is([type="date"], [type="time"]) { -webkit-appearance: none; appearance: none; min-width: 0; max-width: 100%; }
input.input::-webkit-date-and-time-value { margin: 0; text-align: start; }
.field, .field > .input { min-width: 0; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip > span {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px;
  border: 1px solid var(--border-strong); border-radius: var(--r); background: var(--surface);
  font-weight: 550; font-size: .9rem; cursor: pointer; box-shadow: var(--shadow-sm);
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}
.chip > span svg.i { color: var(--text-3); transition: color .15s; }
.chip:hover > span { border-color: var(--text-3); }
.chip input:checked + span { background: var(--c-soft, var(--brand-soft)); border-color: var(--c, var(--brand)); color: var(--c-ink, var(--brand-ink)); box-shadow: inset 0 0 0 1px var(--c, var(--brand)); }
.chip input:checked + span svg.i { color: currentColor; }
.chip input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }

.switch { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.switch input { appearance: none; flex: none; width: 36px; height: 20px; margin: 2px 0 0; border-radius: 999px; background: var(--border-strong); position: relative; cursor: pointer; transition: background-color .2s; }
.switch input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(22, 26, 29, .3); transition: transform .25s var(--ease-out); }
.switch input:checked { background: var(--brand); }
.switch input:checked::after { transform: translateX(16px); }
.switch b { display: block; font-weight: 550; font-size: .9rem; }
.switch small { color: var(--text-2); font-size: .82rem; }

/* ── Avatar ── */
.avatar {
  --size: 40px;
  width: var(--size); height: var(--size); flex: none;
  border-radius: 50%; display: grid; place-items: center; overflow: hidden;
  background: var(--av-bg, var(--brand-soft)); color: var(--av-fg, var(--brand-ink));
  font-weight: 650; font-size: calc(var(--size) * .36);
  box-shadow: inset 0 0 0 1px rgba(22, 26, 29, .05);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-gold { --av-bg: var(--gold-light); --av-fg: var(--wine-deep); }

/* ── Íconos de estado ── */
.state-ic {
  width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; flex: none;
  background: var(--brand-soft); color: var(--brand);
  transition: background-color .3s, color .3s;
}
.state-ic svg { width: 24px; height: 24px; }
.state-ic[data-mood="happy"] { background: var(--ok-soft); color: var(--ok); }
.state-ic[data-mood="worried"] { background: var(--warn-soft); color: var(--warn-ink); }
.state-ic.pop { animation: state-pop .45s var(--ease-out); }
@keyframes state-pop { from { transform: scale(.8); } }
.empty-ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--surface-3); color: var(--text-2); margin-bottom: 4px; }
.empty-ic svg { width: 22px; height: 22px; }

/* ── Mascota: cerebro ── */
.brain { width: 100%; height: auto; overflow: visible; display: block; }
.brain .face > g { display: none; }
.brain[data-mood="look"] .m-look, .brain[data-mood="sleep"] .m-sleep,
.brain[data-mood="happy"] .m-happy, .brain[data-mood="worried"] .m-worried { display: inline; }
.brain .b-body { transform-box: fill-box; transform-origin: 50% 100%; animation: float 3.8s ease-in-out infinite; }
.brain .eyes { transform-box: fill-box; transform-origin: center; animation: eye-blink 5.2s infinite; }
.brain .syn path { stroke-dasharray: 60 0; transition: stroke .35s; }
.brain.thinking .syn path { stroke: #C9A24A; stroke-dasharray: 7 9; animation: synapse .9s linear infinite; }
.brain.thinking .syn path:nth-child(even) { animation-direction: reverse; }
.brain .sparks path { opacity: 0; transform-box: fill-box; transform-origin: center; }
.brain[data-mood="happy"] .sparks path { animation: spark 1.2s var(--ease-out) both; }
.brain[data-mood="happy"] .sparks path:nth-child(2) { animation-delay: .07s; }
.brain[data-mood="happy"] .sparks path:nth-child(3) { animation-delay: .14s; }
.brain[data-mood="happy"] .sparks path:nth-child(4) { animation-delay: .21s; }
.brain[data-mood="happy"] .sparks path:nth-child(5) { animation-delay: .1s; }
.brain[data-mood="happy"] .b-body { animation: hop .7s var(--ease-out), float 3.8s .7s ease-in-out infinite; }
.brain[data-mood="worried"] .b-body { animation: shake .5s ease-in-out, float 3.8s .5s ease-in-out infinite; }
.brain[data-mood="sleep"] .b-body { animation: float 5s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-3px); } }
@keyframes eye-blink { 0%, 93%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes synapse { to { stroke-dashoffset: -32; } }
@keyframes spark { 0% { opacity: 0; transform: scale(.2) rotate(0deg); } 35% { opacity: 1; transform: scale(1.2) rotate(40deg); } 100% { opacity: 0; transform: scale(.5) rotate(90deg); } }
@keyframes hop { 35% { transform: translateY(-7px) scale(1.04, .96); } 70% { transform: translateY(0) scale(.98, 1.02); } }
@keyframes shake { 20% { transform: rotate(-4deg); } 50% { transform: rotate(3deg); } 80% { transform: rotate(-2deg); } }
.mascot { width: 84px; flex: none; }
.brain .glasses rect { transition: fill .3s; }
.brain.thinking .glasses rect { fill: rgba(230, 209, 148, .35); }
.quiet .brain .b-body { animation: float 3.8s ease-in-out infinite; }
.quiet .brain .sparks path { animation: none; }
.empty-brain { width: 76px; margin-bottom: 4px; }
.auth-brain { width: 84px; margin: -66px auto 0; }

/* ── Indicador en vivo (dorado = ahora) ── */
.live { display: inline-flex; align-items: center; gap: 7px; }
.live::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--gold);
  animation: live 1.6s var(--ease-out) 2;
}
@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(165, 127, 44, .45); } 70%, 100% { box-shadow: 0 0 0 7px rgba(165, 127, 44, 0); } }

/* ── Carga ── */
.skeleton { display: grid; gap: 14px; padding: 4px 0; }
.sk { height: 14px; border-radius: 6px; background: linear-gradient(90deg, var(--surface-3) 25%, #E9E9EC 50%, var(--surface-3) 75%); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; }
.sk.lg { height: 30px; width: 40%; }
.sk.block { height: 110px; border-radius: var(--r-lg); }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ── Entrada de vistas (contenido visible desde el inicio, solo se asienta) ── */
.enter > * { animation: settle .5s var(--ease-out) both; }
.enter > *:nth-child(2) { animation-delay: .04s; }
.enter > *:nth-child(3) { animation-delay: .08s; }
.enter > *:nth-child(4) { animation-delay: .12s; }
.enter > *:nth-child(5) { animation-delay: .16s; }
@keyframes settle { from { opacity: .001; transform: translateY(6px); } }

/* ── Toasts ── */
.toasts { position: fixed; z-index: 1000; left: 50%; bottom: 24px; transform: translateX(-50%); display: grid; gap: 8px; width: min(92vw, 380px); pointer-events: none; }
.toast { pointer-events: auto; padding: 11px 14px; font-weight: 550; font-size: .875rem; display: flex; gap: 10px; align-items: center; border-radius: var(--r); background: var(--text); color: #fff; border: 0; box-shadow: var(--shadow-lg); animation: toast-in .4s var(--ease-out); }
.toast .t-ic { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; flex: none; color: #fff; }
.toast .t-ic svg { width: 12px; height: 12px; }
.toast.ok .t-ic { background: var(--ok); }
.toast.err .t-ic { background: var(--bad); }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(.97); } }

/* ── Diálogos ── */
dialog.modal {
  width: min(94vw, 580px); max-height: 92dvh; padding: 0;
  border: 0; border-radius: var(--r-xl); box-shadow: var(--shadow-lg);
  background: var(--surface); color: var(--text); overflow: auto;
}
dialog.modal.wide { width: min(96vw, 860px); }
dialog.modal::backdrop { background: rgba(22, 26, 29, .38); }
dialog.modal[open] { animation: pop-in .32s var(--ease-out); }
dialog.modal[open]::backdrop { animation: fade-in .25s ease-out; }
@keyframes pop-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@keyframes fade-in { from { opacity: 0; } }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 0; }
.modal-head h2 { margin: 0; font-weight: 650; font-size: 1.1rem; letter-spacing: -.01em; }
.modal-body { padding: 14px 20px 20px; display: grid; gap: 16px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; padding: 14px 20px; border-top: 1px solid var(--border); background: var(--surface-2); }

/* ════════════════════════ CHECADOR ════════════════════════ */
.kiosk { position: relative; display: flex; flex-direction: column; background: var(--bg); }
.band {
  position: relative; z-index: 0; overflow: hidden; padding-bottom: 210px; margin-bottom: -210px;
  background-color: var(--wine-deep);
  background-image: linear-gradient(160deg, #8A1E43 0%, var(--wine) 45%, var(--wine-deep) 100%);
}
.band::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(230, 209, 148, .5), transparent); }
canvas.neural { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.k-top, .k-main, .k-foot { position: relative; z-index: 1; }
.band canvas.neural { z-index: 0; }
.k-top { color: #fff; }
.k-top .brand, .k-top .brand:hover { color: #fff; }
.k-top .brand-text small { color: rgba(255, 255, 255, .72); }
.k-top .k-clock span { color: rgba(255, 255, 255, .78); }
.logo-light { box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
.k-top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px clamp(16px, 4vw, 40px);
  max-width: 1320px; width: 100%; margin: 0 auto;
}
.k-brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.k-clock { display: grid; justify-items: end; line-height: 1.05; }
.k-clock time { font-weight: 600; font-size: clamp(1.7rem, 3.2vw, 2.5rem); letter-spacing: -.035em; }
.k-clock span { font-size: .84rem; color: var(--text-2); font-weight: 500; }
.k-clock span::first-letter { text-transform: uppercase; }

.k-main {
  flex: 1;
  display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(330px, 1fr);
  gap: clamp(16px, 2.2vw, 28px); align-items: start;
  padding: 4px clamp(16px, 4vw, 40px) 24px;
  max-width: 1320px; width: 100%; margin: 0 auto;
}

/* Cámara */
.booth { position: relative; }
.frame {
  position: relative; padding: 8px; box-shadow: var(--shadow-lg);
  background: var(--surface); border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
}
.stage { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 12px; background: #1D1A22; }
.stage::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 0 transparent; transition: box-shadow .35s var(--ease-out); pointer-events: none; z-index: 2; }
.stage[data-state="matched"]::after, .stage[data-state="saving"]::after { box-shadow: inset 0 0 0 3px var(--ok); }
.stage[data-state="unknown"]::after { box-shadow: inset 0 0 0 3px var(--bad); }
.stage video, .stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.stage canvas { pointer-events: none; z-index: 1; }
/* Guía de encuadre: cuatro esquinas que respiran mientras espera y se cierran al reconocer */
.guide { position: absolute; inset: 16% 27%; z-index: 1; pointer-events: none; transition: inset .5s var(--ease-out), opacity .3s; }
.guide i { position: absolute; width: 26px; height: 26px; border: 2.5px solid rgba(255, 255, 255, .85); }
.guide i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 12px; }
.guide i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 12px; }
.guide i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 12px; }
.guide i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 12px; }
.stage[data-state="idle"] .guide { animation: breathe 3.2s ease-in-out infinite; }
.stage:not([data-state="idle"]):not([data-state="loading"]) .guide { opacity: 0; inset: 22% 32%; }
@keyframes breathe { 50% { inset: 14.5% 25.5%; } }
.scan {
  position: absolute; left: 0; right: 0; height: 30%; top: -30%; z-index: 1;
  background: linear-gradient(to bottom, transparent, rgba(230, 209, 148, .14) 80%, rgba(230, 209, 148, .55));
  opacity: 0; pointer-events: none;
}
.stage[data-state="scanning"] .scan, .stage[data-state="identifying"] .scan { opacity: 1; animation: scan 1.3s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes scan { to { top: 100%; } }
.stage-badge {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 11px 5px 9px;
  border-radius: 999px; background: rgba(22, 26, 29, .6); backdrop-filter: blur(10px);
  color: #fff; font-size: .8rem; font-weight: 550;
}
.stage-badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #B9BBC1; transition: background-color .3s; }
.stage[data-state="scanning"] .stage-badge::before, .stage[data-state="identifying"] .stage-badge::before { background: var(--gold-light); animation: blink .9s ease-in-out infinite; }
.stage[data-state="matched"] .stage-badge::before, .stage[data-state="done"] .stage-badge::before, .stage[data-state="saving"] .stage-badge::before { background: #5ED3A2; }
.stage[data-state="unknown"] .stage-badge::before { background: #FF9A7A; }
@keyframes blink { 50% { opacity: .3; } }
.stage-msg {
  position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; text-align: center; padding: 24px;
  color: #fff; font-weight: 500; font-size: .95rem; background: rgba(29, 26, 34, .86);
}
.stage-msg p { margin: 0; max-width: 36ch; }
.flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 3; }
.flash.go { animation: flash .45s ease-out; }
/* Cuenta 3-2-1 antes de cada foto automática */
.cam-count {
  position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; pointer-events: none;
  color: #fff; font-size: clamp(4.5rem, 22vw, 8rem); font-weight: 750; line-height: 1; font-variant-numeric: tabular-nums;
  text-shadow: 0 4px 24px rgba(0, 0, 0, .55), 0 0 2px rgba(0, 0, 0, .6);
}
.cam-count.go { animation: count-pop .7s var(--ease-out) both; }
@keyframes count-pop { from { opacity: 0; transform: scale(1.6); } 30% { opacity: 1; transform: scale(1); } to { opacity: .85; transform: scale(.94); } }
@media (prefers-reduced-motion: reduce) { .cam-count.go { animation: none; } }
@keyframes flash { 0% { opacity: .8; } 100% { opacity: 0; } }

.loc { display: flex; align-items: center; gap: 10px; padding: 12px 8px 6px; font-weight: 550; font-size: .875rem; }
.loc .dot { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex: none; background: var(--warn-soft); color: var(--warn-ink); transition: background-color .3s, color .3s; }
.loc .dot svg { width: 15px; height: 15px; }
.loc[data-state="in"] .dot { background: var(--ok-soft); color: var(--ok-ink); }
.loc[data-state="out"] .dot { background: var(--bad-soft); color: var(--bad-ink); }
.loc[data-state="off"] .dot { background: var(--rest-soft); color: var(--text-2); }
.loc small { color: var(--text-2); font-weight: 450; margin-left: auto; text-align: right; font-size: .8rem; white-space: nowrap; font-variant-numeric: tabular-nums; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.loc > span:nth-child(2) { flex: none; }
.loc > span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Panel de registro */
.panel { display: grid; gap: 22px; padding: 24px; border-radius: var(--r-xl); border-color: transparent; box-shadow: var(--shadow-md); }
.talk { display: grid; grid-template-columns: 84px 1fr; gap: 16px; align-items: center; }
.greet { margin: 0; font-weight: 650; font-size: 1.45rem; letter-spacing: -.025em; line-height: 1.2; }
.bubble { margin: 4px 0 0; font-size: .95rem; color: var(--text-2); line-height: 1.45; min-height: 2.9em; }
.bubble.pop { animation: fade-up .35s var(--ease-out); }
@keyframes fade-up { from { opacity: .15; transform: translateY(3px); } }

.who { display: flex; gap: 14px; align-items: center; padding: 12px 14px; border-radius: var(--r-lg); background: var(--surface-2); border: 1px solid var(--border); animation: who-in .45s var(--ease-out); }
@keyframes who-in { from { opacity: 0; transform: translateY(6px) scale(.98); } }
.who .avatar { --size: 46px; background: var(--ok-soft); color: var(--ok-ink); box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--ok); }
.who h2 { margin: 0; font-weight: 650; font-size: 1.1rem; line-height: 1.25; letter-spacing: -.01em; }
.who p { margin: 2px 0 0; color: var(--text-2); font-size: .84rem; }

.modes { border: 0; margin: 0; padding: 0; display: grid; }
.modes legend { padding: 0; margin-bottom: 10px; font-weight: 600; font-size: .875rem; }
.modes .chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.modes .chip > span { width: 100%; justify-content: center; }
.mode-presencial { --c: var(--brand); --c-soft: var(--brand-soft); --c-ink: var(--brand-ink); }
.mode-en_linea { --c: var(--info); --c-soft: var(--info-soft); --c-ink: var(--info-ink); }
.mode-campo { --c: var(--gold); --c-soft: var(--gold-soft); --c-ink: var(--gold-ink); }

.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.btn-big {
  position: relative; overflow: hidden;
  display: grid; justify-items: start; gap: 2px; padding: 16px 18px; min-height: 104px; text-align: left;
  border-radius: var(--r-lg); cursor: pointer;
  font-weight: 650; font-size: 1.25rem; letter-spacing: -.015em;
  transition: transform .16s var(--ease-out), box-shadow .2s, background-color .2s, border-color .2s, opacity .2s;
}
.btn-big .ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; margin-bottom: 8px; transition: background-color .2s; }
.btn-big .ic svg { width: 18px; height: 18px; }
.btn-big small { font-size: .8rem; font-weight: 450; letter-spacing: 0; }
.btn-big.entrada { background: var(--brand); color: #fff; border: 1px solid var(--brand-dark); box-shadow: 0 1px 2px rgba(22, 26, 29, .16), 0 8px 18px -8px rgba(22, 26, 29, .32), inset 0 1px 0 rgba(255, 255, 255, .14); }
.btn-big.entrada .ic { background: rgba(255, 255, 255, .16); }
.btn-big.entrada small { color: rgba(255, 255, 255, .78); }
.btn-big.salida { background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); box-shadow: var(--shadow); }
.btn-big.salida .ic { background: var(--info-soft); color: var(--info); }
.btn-big.salida small { color: var(--text-2); }
.btn-big:hover:not([disabled]) { transform: translateY(-2px); }
.btn-big.entrada:hover:not([disabled]) { background: var(--brand-hover); }
.btn-big.salida:hover:not([disabled]) { border-color: var(--text-3); }
.btn-big:active:not([disabled]) { transform: translateY(0) scale(.985); }
.btn-big[disabled] { background: var(--surface-3); color: var(--text-3); border-color: var(--border); box-shadow: none; cursor: not-allowed; }
.btn-big[disabled] .ic { background: rgba(22, 26, 29, .04); color: var(--text-3); }
.btn-big[disabled] small { color: var(--text-3); }
.btn-big.suggested:not([disabled])::after { content: 'Sugerido'; position: absolute; top: 12px; right: 12px; padding: 1px 7px; border-radius: 5px; font-size: .68rem; font-weight: 600; letter-spacing: .01em; background: var(--gold-light); color: var(--gold-ink); }
.panel .hint { margin: -8px 0 0; font-size: .82rem; color: var(--text-2); }
.btn-big.suggested:not([disabled])::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .32) 50%, transparent 70%); transform: translateX(-110%); animation: shine 1.1s .25s var(--ease-out) both; }
.btn-big.salida.suggested:not([disabled])::before { background: linear-gradient(110deg, transparent 30%, rgba(155, 34, 71, .08) 50%, transparent 70%); }
@keyframes shine { to { transform: translateX(110%); } }
.k-main.enter > * { animation: settle .6s var(--ease-out) both; }
.k-main.enter > *:nth-child(2) { animation-delay: .08s; }
.panel > * { animation: settle .5s var(--ease-out) both; }
.panel > *:nth-child(2) { animation-delay: .12s; }
.panel > *:nth-child(3) { animation-delay: .16s; }
.panel > *:nth-child(4) { animation-delay: .2s; }
.panel > *:nth-child(5) { animation-delay: .24s; }

/* Comprobante: el momento firmado del producto */
.print {
  position: absolute; inset: 8px; z-index: 20;
  display: grid; place-items: center; padding: 16px;
  border-radius: 12px; background: rgba(22, 26, 29, .5); backdrop-filter: blur(8px);
  cursor: pointer;
}
.print.go { animation: fade-in .25s ease-out; }
.print-card { position: relative; width: min(100%, 420px); background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); }
.print-brain { position: absolute; right: 14px; top: -46px; width: 72px; z-index: 1; }
.print-top { border-radius: var(--r-xl) var(--r-xl) 0 0; }
.print-bar { border-radius: 0 0 var(--r-xl) var(--r-xl); overflow: hidden; }
.print.go .print-card { animation: card-in .6s var(--ease-out) both; }
@keyframes card-in { from { opacity: 0; transform: translateY(24px) scale(.95); } }
.print-top { display: flex; align-items: center; gap: 10px; padding: 14px 18px; font-weight: 600; font-size: .92rem; color: #fff; background: linear-gradient(120deg, #A3264F, var(--brand) 60%); }
.print-top .ok-ic { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--brand); }
.print-top .ok-ic svg { width: 15px; height: 15px; }
.print-top.salida { background: linear-gradient(120deg, #4D6E99, var(--info) 60%); }
.print-top.salida .ok-ic { color: var(--info); }
.print.go .ok-ic { animation: state-pop .5s .2s var(--ease-out) both; }
.print.go .ok-ic svg path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: draw .45s .35s var(--ease-out) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.print-folio { margin-left: auto; margin-right: 70px; font-size: .78rem; color: rgba(255, 255, 255, .8); font-weight: 500; font-variant-numeric: tabular-nums; }
.print-body { display: grid; grid-template-columns: 108px 1fr; gap: 16px; padding: 18px; align-items: center; }
.print-photo { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--rest-soft); box-shadow: 0 0 0 1px var(--border); }
.print-photo img { width: 100%; height: 100%; object-fit: cover; }
.print-name { margin: 0; font-weight: 600; font-size: 1rem; line-height: 1.3; }
.print-time { margin: 2px 0 0; font-weight: 650; font-size: 2.6rem; letter-spacing: -.045em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.print-meta { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 18px 16px; }
.print.go .print-meta .pill { animation: settle .4s var(--ease-out) both; }
.print.go .print-meta .pill:nth-child(1) { animation-delay: .35s; }
.print.go .print-meta .pill:nth-child(2) { animation-delay: .42s; }
.print.go .print-meta .pill:nth-child(3) { animation-delay: .49s; }
.print-caption { margin: 0; padding: 12px 18px; border-top: 1px solid var(--border); background: var(--surface-2); color: var(--text-2); font-size: .85rem; }
.print-bar { height: 3px; background: var(--border); }
.print-bar i { display: block; height: 100%; width: 100%; background: var(--gold); transform-origin: left; }
.print.go .print-bar i { animation: countdown 7s linear forwards; }
@keyframes countdown { to { transform: scaleX(0); } }

.k-foot { padding: 0 clamp(16px, 4vw, 40px) 18px; display: flex; justify-content: center; align-items: center; gap: 16px; }
.k-foot a { font-weight: 500; color: var(--text-2); font-size: .84rem; text-decoration: none; }
.k-foot a:hover { color: var(--text); }

@media (max-width: 920px) {
  .k-main { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .band { padding-bottom: 150px; margin-bottom: -150px; }
  .k-top { padding-block: 12px; }
  .brand-text small { max-width: 46vw; }
  .k-clock span { font-size: .76rem; }
  .frame { padding: 6px; border-radius: 14px; }
  .stage { border-radius: 10px; }
  .panel { padding: 18px; gap: 18px; }
  .greet { font-size: 1.2rem; }
  .talk { grid-template-columns: 60px 1fr; gap: 12px; }
  .mascot { width: 60px; }
  .modes .chip > span { padding-inline: 6px; font-size: .82rem; gap: 6px; }
  .btn-big { min-height: 92px; font-size: 1.1rem; padding: 14px; }
  .print-body { grid-template-columns: 84px 1fr; }
  .print-time { font-size: 2.1rem; }
}

/* ════════════════════════ PANEL ════════════════════════ */
.admin-shell { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100dvh; }
/* La columna guinda ocupa todo el alto de la página; el contenido se queda fijo al hacer scroll. */
.side {
  position: relative; color: #fff; isolation: isolate; min-width: 0;
  background: linear-gradient(170deg, #7A1A3D, var(--wine) 40%, var(--wine-deep)) var(--wine-deep);
}
.side-inner {
  position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; gap: 20px; padding: 16px 12px;
  background: var(--neural) left 110% / 460px auto no-repeat;
}
.side .brand, .side .brand:hover { color: #fff; }
.side .brand-text small { color: rgba(255, 255, 255, .7); }
.side .brand { padding: 4px 8px 8px; }
.nav { position: relative; display: grid; gap: 1px; }
.nav-ind { position: absolute; left: 0; top: 0; border-radius: var(--r-sm); background: rgba(255, 255, 255, .13); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); opacity: 0; pointer-events: none; transition: transform .45s var(--ease-out), opacity .2s; }
.nav a { z-index: 1; }
.nav-label { margin: 10px 0 4px; padding: 0 10px; font-size: .72rem; font-weight: 600; color: rgba(255, 255, 255, .6); }
.nav a {
  position: relative; display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 6px 10px;
  border-radius: var(--r-sm); color: rgba(255, 255, 255, .82); font-weight: 500; font-size: .875rem; text-decoration: none;
  transition: background-color .15s, color .15s;
}
.nav a svg.i { width: 16px; height: 16px; color: rgba(255, 255, 255, .62); transition: color .15s; }
.nav a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.nav a[aria-current="page"] { color: #fff; font-weight: 600; }
.nav a[aria-current="page"]:hover { background: transparent; }
.nav a[aria-current="page"] svg.i { color: var(--gold-light); }
.side-foot { margin-top: auto; display: grid; gap: 8px; }
.me { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--r); }
.me .avatar { --size: 30px; }
.me b { display: block; font-size: .85rem; font-weight: 600; line-height: 1.2; }
.me small { color: rgba(255, 255, 255, .68); font-size: .75rem; }
.side .btn { --bg: rgba(255, 255, 255, .1); --fg: #fff; --bd: rgba(255, 255, 255, .2); box-shadow: none; }
.side .btn:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .3); color: #fff; }
.side .btn svg.i { color: var(--gold-light); }
.side .btn-ghost { --bg: transparent; --bd: transparent; }
.side .btn-ghost svg.i { color: rgba(255, 255, 255, .75); }

.main { padding: 28px clamp(16px, 3.2vw, 44px) 56px; min-width: 0; }
.main-sheet { max-width: 1200px; margin: 0 auto; }
.view-head { position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; } /* encima de lo que sigue: menús que se despliegan */
.view-head h1 { margin: 0; font-weight: 650; font-size: clamp(1.4rem, 2.2vw, 1.75rem); line-height: 1.2; letter-spacing: -.03em; }
.view-head h1::first-letter { text-transform: uppercase; }
.view-head p { margin: 4px 0 0; color: var(--text-2); font-size: .9rem; }
.view-head .tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.section-title { margin: 0 0 12px; font-size: .95rem; font-weight: 600; display: flex; align-items: center; justify-content: space-between; gap: 8px; letter-spacing: -.005em; }

/* Encabezado del resumen */
.hero {
  position: relative; overflow: hidden; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
  padding: 26px 28px 24px; margin-bottom: 16px; border-radius: var(--r-xl); color: #fff;
  background: var(--neural) right -40px center / 560px auto no-repeat, linear-gradient(135deg, #8A1E43, #6E1736 50%, var(--wine-deep));
  box-shadow: var(--shadow-md);
}
.hero h1 { margin: 0; font-weight: 650; font-size: clamp(1.45rem, 2.4vw, 1.95rem); line-height: 1.15; letter-spacing: -.03em; }
.hero-sub { margin: 6px 0 0; color: rgba(255, 255, 255, .78); font-size: .9rem; }
.hero .live::before { background: var(--gold-light); }
.hero-sum { margin: 14px 0 0; font-size: 1.02rem; color: rgba(255, 255, 255, .92); }
.hero-sum b { color: var(--gold-light); font-weight: 650; font-variant-numeric: tabular-nums; }
.hero-tools { margin-top: 16px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.hero .input { min-height: 34px; padding: 5px 10px; font-size: .86rem; color-scheme: dark; color: #fff; background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .24); box-shadow: none; }
.hero .input:focus { border-color: var(--gold-light); box-shadow: 0 0 0 3px rgba(230, 209, 148, .25); }
.hero-tools .input[type="date"] { width: 152px; }
/* La lista que se despliega es blanca: sin esto sus opciones heredaban el texto blanco del encabezado y no se veían */
.hero select.input option, .hero select.input optgroup { color: var(--text); background-color: var(--surface); }
.hero .btn { --bg: rgba(255, 255, 255, .12); --fg: #fff; --bd: rgba(255, 255, 255, .25); box-shadow: none; }
.hero-brain { width: 128px; flex: none; margin: -8px 6px -14px 0; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .28)); }

/* Métricas */
.stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.stat {
  --c: var(--text-2); --s: var(--rest-soft);
  position: relative; padding: 16px 18px 18px; background: transparent; border: 0; border-right: 1px solid var(--border);
  display: grid; gap: 4px; text-align: left; cursor: pointer; color: var(--text); text-decoration: none; font: inherit;
  transition: background-color .15s;
}
.stat:last-child { border-right: 0; }
.stat:hover { background: var(--surface-2); color: var(--text); }
.stat::after { content: ''; position: absolute; left: 18px; right: 18px; bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: var(--c); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease-out); }
.stat[aria-pressed="true"]::after { transform: scaleX(1); }
.stat .s-top { display: flex; align-items: center; gap: 7px; font-size: .8125rem; font-weight: 500; color: var(--text-2); }
.stat .s-ic { width: 18px; height: 18px; border-radius: 5px; display: grid; place-items: center; background: var(--s); color: var(--c); }
.stat .s-ic svg { width: 11px; height: 11px; }
.stat b { font-weight: 600; font-size: 1.85rem; line-height: 1.1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.stat small { color: var(--text-3); font-size: .75rem; }
.stat-presentes { --c: var(--ok); --s: var(--ok-soft); }
.stat-se_fueron { --c: var(--info); --s: var(--info-soft); }
.stat-retardos { --c: var(--warn); --s: var(--warn-soft); }
.stat-faltas { --c: var(--bad); --s: var(--bad-soft); }
.stat-fuera { --c: var(--gold); --s: var(--gold-soft); }

.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 18px; align-items: start; }

/* Personas */
.people { list-style: none; margin: 0 -8px; padding: 0; display: grid; }
.person { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 8px; border-radius: var(--r); transition: background-color .15s; }
.person + .person { box-shadow: 0 -1px 0 var(--border); }
.person:hover { background: var(--surface-2); }
.person .avatar { --size: 34px; }
.nm { font-weight: 550; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sub { font-size: .78rem; color: var(--text-2); }
.person .times { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }

/* Actividad */
.feed { list-style: none; margin: 0 -8px; padding: 0; display: grid; }
.feed li + li { box-shadow: 0 -1px 0 var(--border); }
.feed-item {
  display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; align-items: start;
  padding: 10px 8px; width: 100%; border: 0; border-radius: var(--r); background: transparent;
  cursor: pointer; text-align: left; transition: background-color .15s;
}
.feed-item:hover { background: var(--surface-2); }
.feed li.is-new .feed-item { animation: new-row 2.4s var(--ease-out); }
@keyframes new-row { 0% { background: var(--gold-soft); } 100% { background: transparent; } }
.mini-print { width: 48px; height: 48px; border-radius: 10px; overflow: hidden; background: var(--surface-3); display: grid; place-items: center; color: var(--text-3); box-shadow: inset 0 0 0 1px rgba(22, 26, 29, .06); }
.mini-print img { width: 100%; height: 100%; object-fit: cover; }
.feed-item .top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.feed-item .nm { white-space: normal; }
.feed-item .hr { font-weight: 600; font-variant-numeric: tabular-nums; margin-left: auto; color: var(--text); font-size: .9rem; }
.feed-item .tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; }
.feed-item .where { margin-top: 6px; font-size: .78rem; color: var(--text-2); display: flex; gap: 5px; align-items: flex-start; }
.feed-item .where svg.i { margin-top: 2px; color: var(--text-3); width: 13px; height: 13px; }

/* Gráfica semanal */
.week { margin-top: 18px; }
.chart { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 14px; align-items: end; height: 200px; margin-top: 30px; padding: 0 4px 0 24px; border-bottom: 1px solid var(--border-strong); position: relative; }
.chart .gridline { position: absolute; left: 24px; right: 0; border-top: 1px dashed var(--border); pointer-events: none; }
.chart .gridline span { position: absolute; left: -24px; top: -8px; font-size: .7rem; color: var(--text-3); width: 18px; text-align: right; font-variant-numeric: tabular-nums; }
.bar-col { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; z-index: 1; }
.bar { position: relative; width: min(36px, 62%); display: flex; flex-direction: column-reverse; gap: 2px; transform-origin: bottom; animation: grow .7s var(--ease-out) both; }
.bar-col:nth-child(n) .bar { animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes grow { from { transform: scaleY(0); } }
.quiet .bar, .quiet.enter > *, .quiet .stagger > * { animation: none; }
.stagger > * { animation: settle .45s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 32ms); }
.seg { border-radius: 3px; min-height: 0; transition: opacity .15s; }
.seg:last-child { border-radius: 4px 4px 3px 3px; }
.bar:hover .seg { opacity: .5; }
.bar:hover .seg:hover { opacity: 1; }
.seg.a_tiempo { background: var(--chart-ok); }
.seg.retardo { background: var(--chart-warn); }
.seg.falta { background: var(--chart-bad); }
.bar-total { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 5px; font-size: .74rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.chart-x { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 14px; padding: 8px 4px 0 24px; text-align: center; font-size: .74rem; font-weight: 500; color: var(--text-2); }
.chart-x .today { color: var(--brand); font-weight: 650; }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: .8rem; font-weight: 500; color: var(--text-2); }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; }
.tip {
  position: fixed; z-index: 900; pointer-events: none; padding: 6px 10px; font-size: .8rem; font-weight: 550;
  background: var(--text); color: #fff; border-radius: 7px; transform: translate(-50%, calc(-100% - 10px)); white-space: nowrap;
  box-shadow: var(--shadow-md); animation: fade-in .15s ease-out;
}
details summary { cursor: pointer; font-weight: 550; font-size: .84rem; color: var(--text-2); }
details summary:hover { color: var(--text); }

/* Filtros */
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 14px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.filters .field { min-width: 140px; flex: 1 1 140px; }
.filters .field > span { font-size: .75rem; color: var(--text-2); font-weight: 500; }
.filters .input { min-height: 34px; padding: 5px 10px; font-size: .86rem; }

/* Tabla */
.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
table.tbl { width: 100%; border-collapse: collapse; font-size: .86rem; }
.tbl th { text-align: left; padding: 10px 14px; background: var(--surface-2); color: var(--text-2); font-size: .75rem; font-weight: 550; border-bottom: 1px solid var(--border); white-space: nowrap; }
.tbl td { padding: 10px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr { cursor: pointer; transition: background-color .12s; }
.tbl tbody tr:hover td { background: var(--surface-2); }
.tbl .thumb { width: 40px; height: 40px; border-radius: 8px; overflow: hidden; background: var(--surface-3); display: grid; place-items: center; color: var(--text-3); }
.tbl .thumb img { width: 100%; height: 100%; object-fit: cover; }
.tbl .where { max-width: 280px; }

.empty { text-align: center; padding: 36px 16px; display: grid; justify-items: center; gap: 6px; }
.empty h3 { margin: 0; font-weight: 600; font-size: 1rem; }
.empty p { margin: 0 0 8px; color: var(--text-2); max-width: 42ch; font-size: .88rem; }

/* Personas (tarjetas) */
.people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.id-card { padding: 18px; display: grid; gap: 14px; align-content: start; transition: box-shadow .2s, border-color .2s, transform .2s var(--ease-out); }
.id-card:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.id-card.off { opacity: .6; }
.id-top { display: flex; gap: 12px; align-items: center; }
.id-top .avatar { --size: 48px; }
.id-top h3 { margin: 0; font-size: .98rem; font-weight: 600; line-height: 1.25; }
.id-top p { margin: 2px 0 0; color: var(--text-2); font-size: .84rem; }
.id-meta { display: grid; gap: 7px; font-size: .84rem; margin: 0; padding-top: 12px; border-top: 1px solid var(--border); }
.id-meta div { display: grid; grid-template-columns: 74px 1fr; gap: 8px; }
.id-meta dt { color: var(--text-2); }
.id-meta dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.id-meta .warn { color: var(--bad-ink); }
.id-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* Registro de rostro */
.enroll-stage { position: relative; aspect-ratio: 4/3; border-radius: 12px; overflow: hidden; background: #1D1A22; }
.enroll-stage video, .enroll-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.samples { display: flex; gap: 10px; flex-wrap: wrap; }
.sample { position: relative; width: 76px; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--border); animation: who-in .4s var(--ease-out); }
.sample img { width: 100%; height: 100%; object-fit: cover; }
.sample.bad img { opacity: .45; filter: grayscale(1); }
.sample .tag { position: absolute; left: 4px; bottom: 4px; right: 4px; font-size: .64rem; font-weight: 600; padding: 1px 6px; border-radius: 5px; background: var(--bad-soft); color: var(--bad-ink); text-align: center; }
.sample button { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(22, 26, 29, .72); color: #fff; cursor: pointer; display: grid; place-items: center; padding: 0; }
.sample button svg { width: 12px; height: 12px; }
.tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r); background: var(--surface-3); justify-self: start; }
.tabs button { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border: 0; border-radius: 7px; background: transparent; font-weight: 550; font-size: .85rem; color: var(--text-2); cursor: pointer; transition: background-color .15s, color .15s; }
.tabs button[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.dropzone { display: grid; place-items: center; gap: 6px; padding: 32px; text-align: center; border: 1px dashed var(--border-strong); border-radius: var(--r-lg); background: var(--surface-2); cursor: pointer; transition: background-color .15s, border-color .15s; }
.dropzone svg.i { width: 24px; height: 24px; color: var(--brand); }
.dropzone.over, .dropzone:hover { background: var(--brand-soft); border-color: var(--brand); }

/* Mapa */
.map { height: 480px; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; z-index: 0; box-shadow: var(--shadow-sm); }
.map.tall { height: min(70dvh, 640px); }
.map.small { height: 230px; }
.leaflet-tile-pane { filter: saturate(.8); }
.mk { width: 22px; height: 22px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); border: 2.5px solid #fff; box-shadow: 0 2px 6px rgba(22, 26, 29, .35); }
.mk.entrada { background: var(--ok); }
.mk.salida { background: var(--info); }
.mk.office { width: 30px; height: 30px; background: var(--brand); border-radius: 9px; transform: none; display: grid; place-items: center; color: #fff; }
.mk.office svg { width: 16px; height: 16px; }
.leaflet-popup-content-wrapper { border-radius: 12px !important; box-shadow: var(--shadow-lg) !important; font-family: var(--f-ui); }
.leaflet-popup-content { margin: 12px 14px; font-size: .84rem; line-height: 1.5; }

/* Tarjeta de registro en el mapa */
.rec-pop-wrap .leaflet-popup-content-wrapper { padding: 0; overflow: hidden; border-radius: var(--r-lg) !important; }
.rec-pop-wrap .leaflet-popup-content { margin: 0; width: 280px !important; font-size: .84rem; }
.rec-pop-wrap .leaflet-popup-tip { box-shadow: none; }
.rec-pop-wrap a.leaflet-popup-close-button { top: 8px; right: 8px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: rgba(22, 26, 29, .55); backdrop-filter: blur(6px); color: #fff; font: 600 16px/1 var(--f-ui); z-index: 2; transition: background-color .15s; }
.rec-pop-wrap a.leaflet-popup-close-button:hover { background: rgba(22, 26, 29, .8); color: #fff; }
.rec-pop { --tone: var(--ok); animation: pop-in .3s var(--ease-out); }
.rec-pop.salida { --tone: var(--info); }
.rp-media { position: relative; aspect-ratio: 16 / 10; background: var(--wine) var(--neural) center / cover; display: grid; place-items: center; overflow: hidden; }
.rp-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22, 26, 29, 0) 45%, rgba(22, 26, 29, .72)); pointer-events: none; }
.rp-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rp-noimg { display: grid; justify-items: center; gap: 6px; color: var(--gold-light); font-weight: 550; font-size: .8rem; }
.rp-noimg svg.i { width: 26px; height: 26px; }
.rp-type { position: absolute; top: 10px; left: 10px; z-index: 1; display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 7px; border-radius: 999px; background: var(--tone); color: #fff; font-size: .72rem; font-weight: 600; box-shadow: 0 2px 8px rgba(22, 26, 29, .25); }
.rp-type svg.i { width: 12px; height: 12px; }
.rp-time { position: absolute; left: 12px; bottom: 9px; z-index: 1; display: flex; align-items: baseline; gap: 8px; color: rgba(255, 255, 255, .85); font-size: .78rem; font-weight: 500; }
.rp-time b { color: #fff; font-size: 1.5rem; font-weight: 650; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1; }
.rp-body { display: grid; gap: 10px; padding: 12px 14px 14px; }
.rp-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rp-who b { font-size: .95rem; font-weight: 620; letter-spacing: -.01em; line-height: 1.25; color: var(--text); }
.rp-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.rec-pop .rp-place { display: flex; gap: 7px; margin: 0; padding: 8px 10px; border-radius: var(--r-sm); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); color: var(--text-2); font-size: .8rem; line-height: 1.45; }
.rp-place svg.i { flex: none; width: 14px; height: 14px; margin-top: 2px; color: var(--brand); }
.rp-more { justify-self: stretch; justify-content: center; }
.rp-more svg.i { width: 14px; height: 14px; }

/* Detalle */
.detail { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 22px; align-items: start; }
.detail-photo { position: relative; aspect-ratio: 1; border-radius: var(--r-lg); overflow: hidden; background: var(--surface-3); display: grid; place-items: center; color: var(--text-2); font-weight: 500; }
.detail-photo img { width: 100%; height: 100%; object-fit: cover; }
.detail-photo .when { position: absolute; left: 10px; bottom: 10px; padding: 3px 9px; border-radius: 6px; background: rgba(22, 26, 29, .72); backdrop-filter: blur(6px); color: #fff; font-weight: 600; font-size: .8rem; font-variant-numeric: tabular-nums; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 9px 16px; margin: 0; font-size: .875rem; }
.kv dt { color: var(--text-2); }
.kv dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }

/* Territorios */
.terr-sub { display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.terr-sub svg.i { width: 12px; height: 12px; color: var(--brand); }
.terr-group + .terr-group { margin-top: 4px; }
.terr-region { display: flex; align-items: baseline; gap: 8px; margin: 6px 0 2px; font-size: .78rem; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); }
.person.terr-row { grid-template-columns: minmax(0, 1fr) auto; }
.terr-row .times { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.file-btn { position: relative; cursor: pointer; justify-self: start; }
.qr-modal { display: grid; justify-items: center; gap: 10px; text-align: center; }
.qr-modal img { border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--border); background: #fff; padding: 8px; }
.qr-modal p { margin: 0; }
.import-table { max-height: min(56dvh, 520px); overflow: auto; margin-top: 12px; }
.import-table td { vertical-align: top; }
.import-table td:first-child { max-width: 260px; }
.import-table .nm { white-space: normal; overflow: visible; text-overflow: clip; }
.import-table td:nth-child(2) { min-width: 200px; }
.import-table .nowrap { white-space: nowrap; }
.import-table code { font-size: .82rem; font-weight: 600; color: var(--brand-ink); background: var(--brand-soft); padding: 1px 6px; border-radius: 5px; }
.su-terr { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; border-radius: var(--r); background: var(--brand-soft); color: var(--brand-ink); font-size: .9rem; }
.su-terr svg.i { flex: none; width: 16px; height: 16px; }
.sb-for { max-width: 340px; }
.signup-banner .sb-for > span { color: rgba(255, 255, 255, .82); }
.signup-banner .input { color: var(--text); background-color: #fff; }
.accounts .person .sub { overflow-wrap: anywhere; }

/* Nombres: vista previa de cómo se guardará */
.field .name-hint { color: var(--brand-ink); font-weight: 550; }
.pill-dup { --c: var(--warn-ink); --s: var(--warn-soft); }

/* Menú de exportar */
.menu { position: relative; }
.menu > summary { list-style: none; cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 1200; min-width: 250px; padding: 6px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg); display: grid; gap: 2px; animation: pop-in .2s var(--ease-out); }
.menu-pop a { display: grid; gap: 1px; padding: 8px 10px; border-radius: var(--r-sm); color: var(--text); font-size: .86rem; font-weight: 550; text-decoration: none; }
.menu-pop a small { color: var(--text-2); font-size: .76rem; font-weight: 450; }
.menu-pop a:hover, .menu-pop a:focus-visible { background: var(--surface-3); }

/* Avisos del resumen (espacio en disco, respaldo pendiente) */
.notice { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; padding: 12px 14px; border-radius: var(--r-lg); border: 1px solid var(--n-bd); background: var(--n-bg); color: var(--n-fg); text-decoration: none; box-shadow: var(--shadow-sm); transition: border-color .15s, transform .15s var(--ease-out); }
.notice:hover { border-color: currentColor; }
.notice:active { transform: scale(.995); }
.notice > svg.i:first-child { flex: none; width: 20px; height: 20px; }
.notice > svg.i:last-child { flex: none; width: 16px; height: 16px; opacity: .55; }
.notice span { flex: 1; min-width: 0; display: grid; gap: 2px; }
.notice b { color: var(--text); font-size: .9rem; font-weight: 620; }
.notice small { color: var(--text-2); font-size: .82rem; line-height: 1.45; }
.notice-bad { --n-bg: var(--bad-soft); --n-bd: #F2C6B2; --n-fg: var(--bad-ink); }
.notice-warn { --n-bg: var(--warn-soft); --n-bd: #EED9AE; --n-fg: var(--warn-ink); }
.notice-info { --n-bg: var(--surface); --n-bd: var(--border); --n-fg: var(--brand); }

/* Almacenamiento */
.disk { display: grid; gap: 8px; }
.disk-top { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; }
.disk-top b { font-size: 1.05rem; font-weight: 650; letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.disk-top span { color: var(--text-2); font-size: .84rem; }
.disk-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--border); }
.disk-bar i { display: block; height: 100%; transition: width .7s var(--ease-out); }
.disk-bar .seg-app { background: var(--brand); }
.disk-bar .seg-other { background: #C9C9D0; }
.disk-bar.bajo .seg-other { background: var(--warn); }
.disk-bar.critico .seg-other { background: var(--bad); }
.disk-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--text-2); font-size: .8rem; }
.disk-legend span { display: inline-flex; align-items: center; gap: 6px; }
.disk-legend .dot { width: 8px; height: 8px; border-radius: 3px; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--border-strong); }
.disk-legend .dot.app { background: var(--brand); box-shadow: none; }
.disk-legend .dot.other { background: #C9C9D0; box-shadow: none; }
.store-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.store-item { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--r); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); }
.store-item small { color: var(--text-2); font-size: .78rem; }
.store-item b { font-size: 1.1rem; font-weight: 650; letter-spacing: -.015em; }
.backup-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.backup-row .field { flex: 1 1 280px; min-width: 0; }
.backup-row .btn svg.i { width: 16px; height: 16px; }
.backup-last { margin: 0; color: var(--text-2); font-size: .82rem; line-height: 1.55; }
.warn-text { color: var(--warn-ink); font-weight: 550; }
.set-block.sub h2 svg.i { width: 24px; height: 24px; padding: 5px; }
@media (max-width: 560px) {
  .store-grid { gap: 0; border-radius: var(--r); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); }
  .store-item { grid-template-columns: 1fr auto; grid-template-areas: "l v" "s v"; align-items: center; column-gap: 12px; padding: 10px 12px; border-radius: 0; background: none; box-shadow: none; }
  .store-item + .store-item { border-top: 1px solid var(--border); }
  .store-item small:first-child { grid-area: l; color: var(--text); font-size: .86rem; font-weight: 550; }
  .store-item b { grid-area: v; font-size: 1rem; }
  .store-item small:last-child { grid-area: s; }
  .backup-row .btn { width: 100%; justify-content: center; }
}

/* Ajustes */
.settings { display: grid; gap: 14px; }
.set-block { padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); display: grid; gap: 16px; }
.set-block h2 { margin: 0; font-size: .98rem; font-weight: 600; display: flex; gap: 10px; align-items: center; }
.set-block h2 svg.i { width: 28px; height: 28px; padding: 6px; border-radius: 8px; background: var(--brand-soft); color: var(--brand); }
.set-block > p { margin: -8px 0 0; color: var(--text-2); font-size: .86rem; }
.set-block.sub { box-shadow: none; background: var(--surface-2); }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.range-row { display: flex; align-items: center; gap: 14px; }
.range-row input[type="range"] { flex: 1; accent-color: var(--brand); }
.range-row output { min-width: 120px; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.days .chip > span { min-width: 44px; justify-content: center; padding-inline: 10px; }
.save-bar { position: sticky; bottom: 14px; z-index: 1100; display: flex; justify-content: flex-end; gap: 10px; padding: 8px; border-radius: var(--r-lg); background: rgba(255, 255, 255, .9); backdrop-filter: blur(10px); box-shadow: var(--shadow-md); justify-self: end; }

/* Acceso */
.auth { position: relative; min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; overflow: hidden; background: linear-gradient(160deg, #8A1E43, var(--wine) 45%, var(--wine-deep)); }
.auth-card { position: relative; z-index: 1; }
.auth-card { width: min(100%, 380px); padding: 28px; display: grid; gap: 16px; border-radius: var(--r-xl); border-color: transparent; box-shadow: var(--shadow-md); animation: pop-in .45s var(--ease-out); }
.auth-card .logo { width: 44px; height: 44px; margin: 0 auto; border-radius: 12px; }
.auth-card h1 { margin: 0; text-align: center; font-weight: 650; font-size: 1.3rem; letter-spacing: -.025em; }
.auth-card > p { margin: -8px 0 4px; text-align: center; color: var(--text-2); font-size: .9rem; }
.auth-card .btn { min-height: 40px; }
.form-err { margin: 0; padding: 9px 12px; border-radius: var(--r-sm); background: var(--bad-soft); color: var(--bad-ink); font-weight: 500; font-size: .86rem; }

.loading { padding: 60px 20px; text-align: center; font-weight: 500; color: var(--text-2); }

@media (max-width: 1150px) {
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stat { border-bottom: 1px solid var(--border); }
  .two-col { grid-template-columns: 1fr; }
}
@media (max-width: 840px) {
  .admin-shell { grid-template-columns: minmax(0, 1fr); }
  .person { grid-template-columns: auto minmax(0, 1fr); }
  .person .times { grid-column: 2; justify-content: flex-start; }
  .person .nm { white-space: normal; }
  .side { position: sticky; top: 0; z-index: 50; background: linear-gradient(180deg, var(--wine), var(--wine-deep)); }
  .side-inner { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px 0; background: none; }
  .side .brand { padding: 0; }
  .side .brand-text small { max-width: 52vw; }
  .nav-label { display: none; }
  .nav { order: 3; width: calc(100% + 28px); margin: 0 -14px; padding: 4px 14px 8px; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
  .nav a { flex: none; min-height: 32px; padding: 5px 11px; font-size: .84rem; }
  .side-foot { margin: 0 0 0 auto; display: flex; }
  .side-foot .me > div, .side-foot .me .avatar, .side-foot .kiosk-link { display: none; }
  .side-foot .me { padding: 0; }
  .main { padding: 18px 14px 48px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { padding: 14px; }
  .stat:nth-child(2n) { border-right: 0; }
  .stat:last-child:nth-child(odd) { grid-column: span 2; }
  .stat b { font-size: 1.6rem; }
  .hero { padding: 20px 18px; }
  .hero-brain { width: 84px; margin: 0 -4px -8px 0; }
  .card { padding: 16px; }
  .detail { grid-template-columns: 1fr; }
  .detail-photo { max-width: 220px; }
  .chart { gap: 6px; height: 160px; }
  .chart-x { gap: 6px; }
  .tbl .hide-sm { display: none; }
  .map.tall { height: 60dvh; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
  .stage[data-state="scanning"] .scan, .stage[data-state="identifying"] .scan { animation: none; opacity: 0; }
  .print.go .print-bar i { animation: countdown 7s linear forwards !important; }
}

/* ════════════════════════ AUTORREGISTRO Y EVIDENCIA ════════════════════════ */
.btn-lg { min-height: 46px; padding: 10px 20px; font-size: .95rem; }
.btn-gold { --bg: var(--gold-light); --fg: var(--wine-deep); --bd: var(--gold-light); }
.btn-gold:hover { background: #EEDDAA; color: var(--wine-deep); }
.btn-gold svg.i { color: var(--wine-deep); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: .86rem; color: var(--text-2); cursor: pointer; line-height: 1.45; }
.check input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--brand); }

/* Checador: invitación a registrarse cuando no reconoce */
.newbie { display: flex; gap: 14px; align-items: center; padding: 12px; border-radius: var(--r-lg); background: var(--gold-soft); animation: who-in .45s var(--ease-out); }
.newbie img { width: 104px; height: 104px; flex: none; border-radius: 10px; background: #fff; padding: 6px; box-shadow: var(--shadow-sm); }
.newbie b { display: block; font-size: 1rem; color: var(--wine-deep); }
.newbie p { margin: 3px 0 0; font-size: .84rem; color: var(--gold-ink); }

/* Página de registro */
.signup-page .k-top { justify-content: space-between; }
.su-steps { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
.su-steps li { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 6px; border-radius: 999px; font-size: .8rem; font-weight: 550; color: rgba(255, 255, 255, .72); background: rgba(255, 255, 255, .08); transition: background-color .3s, color .3s; }
.su-steps li span { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: .72rem; font-weight: 700; background: rgba(255, 255, 255, .16); }
.su-steps li[aria-current="step"] { background: #fff; color: var(--wine-deep); }
.su-steps li[aria-current="step"] span { background: var(--gold-light); color: var(--wine-deep); }
.su-steps li.done span { background: var(--gold-light); color: var(--wine-deep); }
.su-main { position: relative; z-index: 1; width: 100%; max-width: 640px; margin: 0 auto; padding: 4px 16px 32px; flex: 1; }
.su-card { padding: 26px; border-radius: var(--r-xl); border-color: transparent; box-shadow: var(--shadow-lg); display: grid; gap: 20px; }
.su-head { display: grid; grid-template-columns: 84px 1fr; gap: 16px; align-items: center; }
.su-head h1 { margin: 0; font-weight: 650; font-size: 1.4rem; letter-spacing: -.025em; line-height: 1.2; }
.su-head p { margin: 4px 0 0; color: var(--text-2); font-size: .92rem; min-height: 2.8em; }
.su-step { display: grid; gap: 14px; animation: settle .4s var(--ease-out) both; }
.su-stage { border-radius: 14px; }
.su-stage .guide { inset: 12% 25%; }
.su-stage[data-state="idle"] .guide { animation: breathe 3.2s ease-in-out infinite; }
.su-stage[data-state="scanning"] .guide i { border-color: #5FD39C; }
.su-stage[data-state="matched"] .guide { opacity: 0; }
.su-poses { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.su-poses li { position: relative; padding: 8px 10px 8px 30px; border-radius: var(--r); background: var(--surface-3); font-size: .78rem; font-weight: 550; color: var(--text-2); line-height: 1.3; transition: background-color .3s, color .3s; }
.su-poses li::before { content: ''; position: absolute; left: 10px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; border: 2px solid var(--text-3); transition: background-color .3s, border-color .3s; }
.su-poses li.now { background: var(--brand-soft); color: var(--brand-ink); }
.su-poses li.now::before { border-color: var(--brand); animation: blink 1s ease-in-out infinite; }
.su-poses li.done { background: var(--ok-soft); color: var(--ok-ink); }
.su-poses li.done::before { background: var(--ok); border-color: var(--ok); }
.su-step .samples .sample { width: 110px; aspect-ratio: 4 / 3; }
.su-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.su-actions #back { margin-right: auto; }
.su-done { justify-items: center; text-align: center; padding: 8px 0; }
.su-done-text { margin: 0; max-width: 44ch; color: var(--text-2); }
.su-foot { margin: 14px 4px 0; text-align: center; font-size: .8rem; color: var(--text-2); }

/* Banner para compartir el registro */
.signup-banner { display: flex; gap: 20px; align-items: center; padding: 18px 20px; margin-bottom: 18px; border-radius: var(--r-xl); color: #fff;
  background: var(--neural) right -60px center / 520px auto no-repeat, linear-gradient(135deg, #8A1E43, #6E1736 50%, var(--wine-deep)); box-shadow: var(--shadow-md); }
.signup-banner .qr { width: 132px; height: 132px; flex: none; border-radius: 12px; background: #fff; padding: 8px; box-shadow: 0 6px 16px rgba(0, 0, 0, .25); }
.sb-copy { min-width: 0; display: grid; gap: 6px; }
.sb-copy h2 { margin: 0; font-size: 1.15rem; font-weight: 650; letter-spacing: -.015em; }
.sb-copy p { margin: 0; color: rgba(255, 255, 255, .82); font-size: .88rem; }
.sb-state { display: flex; align-items: center; gap: 7px; }
.sb-state b { color: var(--gold-light); }
.sb-state svg.i { color: var(--gold-light); }
.sb-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.signup-banner .btn { --bg: rgba(255, 255, 255, .12); --fg: #fff; --bd: rgba(255, 255, 255, .24); box-shadow: none; }
.signup-banner .btn:hover { background: rgba(255, 255, 255, .2); color: #fff; }
.signup-banner .btn svg.i { color: var(--gold-light); }
.signup-banner .btn-ghost { --bg: transparent; --bd: transparent; color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.signup-banner .btn-ghost:hover { background: rgba(255, 255, 255, .1); }
.sb-url { font-size: .76rem; color: rgba(255, 255, 255, .7); overflow-wrap: anywhere; }
.group-title { margin-top: 6px; }
.group-title .muted { font-weight: 500; }
.people-grid + .group-title { margin-top: 22px; }

/* Tarjetas de diplomante: origen y pendientes */
.id-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; }
.id-tags:empty { display: none; }
.pill-self { --c: var(--brand-ink); --s: var(--brand-soft); }
.id-card.pending { border-color: var(--gold-light); box-shadow: 0 0 0 3px var(--gold-soft), var(--shadow-sm); opacity: 1; }

/* Evidencia: fotos completas con su fondo */
.detail { grid-template-columns: 300px minmax(0, 1fr); }
.detail-photo { aspect-ratio: 4 / 3; background: #1D1A22; }
.detail-photo a { display: block; width: 100%; height: 100%; }
.detail-photo img { object-fit: contain; }
.photo-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: .82rem; font-weight: 550; text-decoration: none; }
.photo-note { margin: 8px 0 0; font-size: .78rem; line-height: 1.45; color: var(--text-2); }
.ev-head { display: flex; gap: 14px; align-items: center; }
.ev-head b { font-size: 1.02rem; }
.ev-head p { margin: 2px 0 0; font-size: .84rem; }
.ev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.ev-photo { display: grid; gap: 6px; text-decoration: none; color: var(--text-2); font-size: .76rem; }
.ev-photo img, .ev-none { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); background: #1D1A22; box-shadow: var(--shadow-sm); transition: transform .2s var(--ease-out), box-shadow .2s; }
.ev-none { display: grid; place-items: center; background: var(--surface-3); color: var(--text-2); font-weight: 550; }
.ev-photo:hover img { transform: translateY(-2px); box-shadow: var(--shadow-md); }

@media (max-width: 840px) {
  .signup-banner { flex-direction: column; align-items: flex-start; }
  .detail { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .su-steps li { padding: 4px 6px; font-size: 0; gap: 0; }
  .su-steps li span { font-size: .72rem; }
  .su-card { padding: 18px; }
  .su-head { grid-template-columns: 64px 1fr; gap: 12px; }
  .su-poses { grid-template-columns: 1fr; }
  .newbie img { width: 88px; height: 88px; }
}

@media (max-width: 840px) { .detail-photo { max-width: none; } }

/* Logo: la mascota en miniatura, animada */
.logo-brain { width: 38px; height: 38px; border-radius: 11px; background: #fff; display: grid; place-items: center; flex: none; overflow: visible; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
/* Emblema de la EFMN (sombrero y rombos) en su recuadro blanco */
.logo-efmn { width: 40px; height: 40px; padding: 3px; border-radius: 11px; background: #fff; display: grid; place-items: center; flex: none; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
.logo-efmn img { width: 100%; height: 100%; object-fit: contain; display: block; }
.brand .logo-efmn { width: 40px; height: 40px; }
/* Logo completo y barra institucional (Gobierno de México · Bienestar · Sembrando Vida) */
.efmn-logo { display: block; width: 100%; height: auto; }
.auth-logo { width: min(240px, 80%); margin: 0 auto 2px; }
.inst-bar { position: relative; z-index: 1; display: flex; justify-content: center; padding: 6px 16px 12px; }
.inst-bar img { display: block; width: min(340px, 86vw); height: auto; }
.auth .inst-bar { margin-top: 18px; padding: 10px 18px; border-radius: 12px; background: rgba(255, 255, 255, .92); box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, .12)); }
.logo-brain .brain { width: 33px; margin-top: 1px; }
.brand .logo-brain { width: 38px; height: 38px; }
.brain-mini .sparks { display: none; }
.brain-mini .syn path { animation: idle-think 7s ease-in-out infinite; }
.brain-mini .syn path:nth-child(odd) { animation-delay: .3s; }
@keyframes idle-think { 0%, 80%, 100% { stroke: #B2496B; } 87% { stroke: #C9A24A; } }
@media (max-width: 560px) { .brand .logo-brain { width: 34px; height: 34px; } .logo-brain .brain { width: 29px; } }

/* Entrada automática: barra que se llena en el botón mientras cuenta */
.btn-big.counting::after { content: ''; position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: var(--gold-light); transform-origin: left; animation: auto-fill 1.6s linear both; }
@keyframes auto-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.btn-big.counting.suggested::after { top: auto; right: auto; padding: 0; border-radius: 0; content: ''; }

.tbl.audit td { white-space: nowrap; }
.tbl.audit td.sub { white-space: normal; }

/* Recuperar la contraseña con el rostro */
.auth-card.face-card, .auth-card:has(.face-stage) { width: min(100%, 420px); }
.auth-card .face-stage { border-radius: var(--r-lg); }
.face-stage .face-still { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; }
p.face-hint { margin: -4px 0 0; min-height: 1.4em; text-align: center; font-weight: 600; font-size: .92rem; color: var(--brand-ink); }
p.fine { margin: 0; text-align: center; color: var(--text-3); font-size: .78rem; line-height: 1.45; }
.auth-actions { display: grid; gap: 8px; }
.modal .auth-actions { display: flex; justify-content: flex-end; gap: 8px; }
.fsm-pw { display: grid; gap: 12px; }
.face-status { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; font-size: .88rem; color: var(--warn-ink); }
.face-status.on { color: var(--ok-ink); }
.face-status svg.i { flex: none; width: 18px; height: 18px; }
.row-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.acc-search { max-width: 360px; }
.temp-pass dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; align-items: center; }
.temp-pass dt { color: var(--text-2); font-size: .86rem; }
.temp-pass dd { margin: 0; }
.temp-pass code { font-size: 1.05rem; font-weight: 700; letter-spacing: .02em; color: var(--brand-ink); background: var(--brand-soft); padding: 3px 9px; border-radius: 6px; user-select: all; }

/* Mapa por territorios: un segmentador a un lado, como en un tablero */
.legend.dots i { border-radius: 50%; }
.map-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 16px; align-items: start; }
.map-wrap { position: relative; min-width: 0; }
.map-empty { position: absolute; left: 50%; top: 14px; z-index: 500; transform: translateX(-50%); max-width: calc(100% - 32px); margin: 0; padding: 8px 14px; border-radius: 999px; background: rgba(22, 26, 29, .8); color: #fff; font-size: .84rem; font-weight: 550; text-align: center; pointer-events: none; }
.terr-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.terr-panel > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; font-size: .9rem; }
.terr-panel > summary::-webkit-details-marker { display: none; }
.terr-panel > summary > span { display: flex; align-items: center; gap: 8px; min-width: 0; }
.terr-panel > summary b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.terr-panel > summary svg.i { flex: none; width: 16px; height: 16px; color: var(--brand); }
.terr-panel[open] > summary > svg.i { transform: rotate(180deg); }
.tp-body { display: grid; gap: 10px; padding: 12px; }
.tp-list { display: grid; align-content: start; gap: 2px; max-height: calc(min(70dvh, 640px) - 74px); overflow: auto; overscroll-behavior: contain; }
.tp-group { display: grid; gap: 2px; padding-top: 8px; }
.tp-group[hidden], .tp-row[hidden] { display: none; }
.tp-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; width: 100%; padding: 7px 10px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text); font: inherit; font-size: .86rem; text-align: left; cursor: pointer; }
.tp-row:hover { background: var(--surface-3); }
.tp-row:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.tp-row[aria-pressed="true"] { background: var(--brand-soft); color: var(--brand-ink); font-weight: 650; }
.tp-row.all { font-weight: 600; }
.tp-row.region { padding-top: 5px; padding-bottom: 5px; color: var(--text-2); font-size: .72rem; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; }
.tp-row.zero:not([aria-pressed="true"]) .tp-name { color: var(--text-3); }
.tp-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-n { color: var(--text-2); font-size: .8rem; font-variant-numeric: tabular-nums; }
.tp-bar { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: var(--surface-3); overflow: hidden; }
.tp-bar i { display: block; height: 100%; min-width: 0; border-radius: 2px; background: var(--c, var(--brand)); opacity: .8; }
.tp-row[aria-pressed="true"] .tp-bar i { opacity: 1; }
@media (min-width: 901px) {
  .terr-panel > summary { display: none; }
}
@media (max-width: 900px) {
  .map-layout { grid-template-columns: 1fr; gap: 12px; }
  .tp-list { max-height: 48dvh; }
}
.bub { display: grid; place-items: center; border-radius: 50%; background: var(--brand); color: #fff; font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2.5px #fff, 0 3px 10px rgba(22, 26, 29, .3); cursor: pointer; transition: transform .15s var(--ease-out); }
.bub:hover { transform: scale(1.08); }
.legend i.bub-key { width: 12px; height: 12px; background: conic-gradient(#eda100 0 33%, #2a78d6 0 66%, #e87ba4 0); box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px var(--border); }
.legend i.lg-solid { background: #6b7079; }
.legend i.lg-ring { background: #fff; box-shadow: inset 0 0 0 2.5px #6b7079; }
.tp-dot { display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; background: var(--c); vertical-align: 0; }
.rec-pop .rp-terr { display: flex; align-items: center; gap: 7px; margin: -4px 0 0; color: var(--text-2); font-size: .8rem; font-weight: 600; }
.rec-pop .rp-terr i { flex: none; width: 9px; height: 9px; border-radius: 50%; }
.map.pointer-focus:focus-visible { outline: none; }

/* Botones acomodados: menús por fila, filas que no se amontonan y tablas que caben en el celular */
.menu-pop button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--r-sm); background: none; color: var(--text); font: inherit; font-size: .86rem; font-weight: 550; text-align: left; cursor: pointer; }
.menu-pop button:hover, .menu-pop button:focus-visible { background: var(--surface-3); }
.menu-pop button svg.i { flex: none; width: 16px; height: 16px; color: var(--text-2); }
.menu-pop button.danger, .menu-pop button.danger svg.i { color: var(--bad-ink); }
.row-menu > summary svg.i { width: 14px; height: 14px; margin: 0 -2px 0 2px; transition: transform .15s; }
.row-menu[open] > summary svg.i { transform: rotate(180deg); }
.row-menu .menu-pop { min-width: 236px; }
.menu-pop.from-left { left: 0; right: auto; }
.person:has(.menu[open]) { position: relative; z-index: 5; } /* el menú abierto queda encima de las filas de abajo */
.id-actions .btn { flex: 1 1 auto; justify-content: center; }
.tbl .rec-when { margin-top: 4px; white-space: nowrap; }
.tbl .where-txt { margin-top: 4px; }
@media (max-width: 1150px) {
  /* Registros en tableta y celular: cada uno como tarjeta, para que la tabla no se corte a la derecha.
     Arriba la foto, el diplomante, el movimiento, la modalidad y la puntualidad; abajo desde dónde registró. */
  .tbl.records thead { display: none; }
  .tbl.records, .tbl.records tbody { display: block; }
  .tbl.records tr { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
  .tbl.records tr:last-child { border-bottom: 0; }
  .tbl.records tbody tr:hover { background: var(--surface-2); }
  .tbl.records td, .tbl.records tbody tr:hover td { display: block; padding: 0; border: 0; background: none; }
  .tbl.records td:nth-child(2) { flex: 1 1 200px; min-width: 0; }
  .tbl.records td.rec-type { display: flex; align-items: center; gap: 8px; }
  .tbl.records .rec-when { margin: 0; }
  .tbl.records td.where { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; flex: 1 1 100%; max-width: none; padding-left: 52px; }
  .tbl.records .where-txt { margin: 0; }
  .tbl.records td.hide-sm { display: none; }
}
@media (max-width: 840px) {
  .accounts .person { grid-template-columns: auto minmax(0, 1fr) auto; }
  .accounts .person .times { grid-column: 3; }
}
@media (max-width: 640px) {
  .tbl.records td:nth-child(2) { flex-basis: calc(100% - 60px); }
  .tbl.records td.where { padding-left: 0; }
}
@media (max-width: 560px) {
  .person.terr-row { grid-template-columns: minmax(0, 1fr); }
  .person.terr-row .times { grid-column: 1; justify-content: flex-start; }
  .view-head .tools { width: 100%; }
  .view-head .tools > .field { flex: 1 1 100%; }
  .accounts .person .times:has(> .btn) { grid-column: 2; } /* «Contraseña temporal» sola va debajo del nombre */
}

/* ════════════════════════ AVISO DE PRIVACIDAD Y TÉRMINOS ════════════════════════ */
.legal-page .band { padding-bottom: 150px; margin-bottom: -150px; }
.legal-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.legal-tabs a { padding: 6px 12px; border-radius: 999px; font-size: .84rem; font-weight: 550; color: rgba(255, 255, 255, .8); background: rgba(255, 255, 255, .08); text-decoration: none; transition: background-color .2s, color .2s; }
.legal-tabs a:hover { color: #fff; background: rgba(255, 255, 255, .16); }
.legal-tabs a[aria-current="page"] { background: #fff; color: var(--wine-deep); }
.legal-main { position: relative; z-index: 1; width: 100%; max-width: 860px; margin: 0 auto; padding: 4px 16px 28px; flex: 1; }
.legal-doc { padding: clamp(20px, 5vw, 48px); border-radius: var(--r-xl); border-color: transparent; box-shadow: var(--shadow-lg); font-size: .95rem; line-height: 1.65; }
.legal-doc section { scroll-margin-top: 16px; }
.legal-doc section + section { margin-top: 34px; }
.legal-doc h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 1.16rem; font-weight: 650; letter-spacing: -.015em; line-height: 1.3; }
.legal-doc h2 .n { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--brand-soft); color: var(--brand-ink); font-size: .82rem; font-weight: 700; }
.legal-doc h3 { margin: 20px 0 8px; font-size: .98rem; font-weight: 650; }
.legal-doc p { margin: 0 0 12px; }
.legal-doc p:last-child { margin-bottom: 0; }
.legal-head { padding-bottom: 22px; margin-bottom: 26px; border-bottom: 1px solid var(--border); }
.legal-kicker { display: flex; align-items: center; gap: 7px; margin: 0 0 8px !important; font-size: .8rem; font-weight: 600; color: var(--brand-ink); text-transform: uppercase; letter-spacing: .04em; }
.legal-kicker svg.i { color: var(--brand); }
.legal-head h1 { margin: 0 0 6px; font-size: clamp(1.55rem, 4.4vw, 2.1rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.15; }
.legal-meta { color: var(--text-2); font-size: .85rem; }
.legal-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.legal-summary { padding: 18px 20px; border-radius: var(--r-lg); background: var(--gold-soft); border: 1px solid var(--gold-light); }
.legal-summary h2 { font-size: 1rem; color: var(--wine-deep); margin-bottom: 10px; }
.legal-summary ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.legal-summary li { display: flex; gap: 10px; align-items: flex-start; }
.legal-summary li > span:first-child { flex: none; width: 22px; height: 22px; margin-top: 1px; display: grid; place-items: center; border-radius: 50%; background: var(--ok); color: #fff; }
.legal-summary li svg.i { width: 14px; height: 14px; }
.legal-toc { margin-top: 26px; padding: 16px 20px; border-radius: var(--r-lg); background: var(--surface-2); border: 1px solid var(--border); }
.legal-toc h2 { font-size: .9rem; margin-bottom: 8px; color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; }
.legal-toc ol { margin: 0; padding-left: 22px; columns: 2 260px; column-gap: 28px; font-size: .9rem; }
.legal-toc li { break-inside: avoid; padding: 2px 0; }
.legal-toc a { text-decoration: none; }
.legal-toc a:hover { text-decoration: underline; }
.legal-toc + section { margin-top: 34px; }
.legal-list { margin: 0 0 12px; padding-left: 22px; display: grid; gap: 6px; }
.legal-list li::marker { color: var(--brand); font-weight: 650; }
.legal-no li::marker { content: '✕  '; color: var(--bad); }
.legal-data { margin: 0 0 12px; display: grid; gap: 8px; }
.legal-data > div { display: grid; grid-template-columns: minmax(150px, 30%) 1fr; gap: 4px 18px; padding: 12px 14px; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--border); }
.legal-data dt { font-weight: 650; }
.legal-data dd { margin: 0; color: var(--text-2); }
.legal-data .sensitive { background: var(--brand-soft); border-color: #EBCBD6; }
.legal-data .tag { display: inline-block; margin-top: 4px; padding: 1px 8px; border-radius: 999px; background: var(--brand); color: #fff; font-size: .7rem; font-weight: 650; letter-spacing: .02em; white-space: nowrap; }
.legal-data.arco { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.legal-data.arco > div { grid-template-columns: 1fr; }
.legal-data.arco dt { display: flex; align-items: center; gap: 8px; }
.arco-l { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: var(--wine); color: var(--gold-light); font-weight: 700; font-size: .85rem; }
.legal-contact { margin: 0 0 12px; display: grid; gap: 6px; }
.legal-contact > div { display: grid; grid-template-columns: minmax(150px, 30%) 1fr; gap: 2px 18px; }
.legal-contact dt { font-weight: 600; color: var(--text-2); }
.legal-contact dd { margin: 0; }
.legal-note, .legal-tip { padding: 10px 14px; border-radius: var(--r); background: var(--info-soft); color: var(--info-ink); font-size: .9rem; }
.legal-tip { background: var(--ok-soft); color: var(--ok-ink); }
.legal-legend { padding: 10px 14px; border-left: 3px solid var(--gold); background: var(--gold-soft); color: var(--gold-ink); font-size: .88rem; font-style: italic; }
.legal-simple { margin-top: 40px !important; padding-top: 28px; border-top: 1px dashed var(--border-strong); }
.simple-card { padding: 18px 20px; border-radius: var(--r-lg); border: 2px solid var(--wine); font-size: .9rem; }
.legal-url { overflow-wrap: anywhere; }
.legal-foot { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 18px; margin: 18px 0 0; font-size: .85rem; }
.legal-foot a { color: var(--text-2); font-weight: 500; text-decoration: none; }
.legal-foot a:hover { color: var(--text); }
@media (max-width: 640px) {
  .legal-page .k-top { flex-direction: column; align-items: flex-start; gap: 10px; }
  .legal-data > div, .legal-contact > div { grid-template-columns: 1fr; }
  .legal-data.arco { grid-template-columns: 1fr; }
}
@media print {
  .legal-page { background: #fff; }
  .legal-page .band, .legal-page .legal-actions, .legal-page .legal-foot, .legal-page .legal-toc { display: none; }
  .legal-page .legal-main { max-width: none; padding: 0; }
  .legal-page .legal-doc { box-shadow: none; padding: 0; font-size: 10.5pt; }
  .legal-page .legal-doc section { break-inside: auto; }
  .legal-page .legal-doc h2, .legal-page .legal-doc h3 { break-after: avoid; }
  .legal-page .legal-data > div, .legal-page .legal-contact > div, .legal-page .legal-summary, .legal-page .simple-card, .legal-page .legal-list li, .legal-page .legal-doc p { break-inside: avoid; }
  .legal-page .legal-simple { break-before: page; border-top: 0; }
  .legal-page a { color: inherit; text-decoration: none; }
}

/* Avisos de privacidad donde se toman los datos */
.privacy-mini { margin: 0; padding: 12px 14px; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--border); font-size: .8rem; line-height: 1.5; color: var(--text-2); }
.privacy-mini b { color: var(--text); }
.check a, .fine a, .privacy-mini a { font-weight: 600; }
.k-legal { position: relative; z-index: 1; margin: 0 auto; padding: 0 16px 6px; max-width: 980px; text-align: center; font-size: .78rem; color: var(--text-2); text-wrap: balance; }
.k-legal a { color: var(--text-2); font-weight: 600; white-space: nowrap; }
.auth-legal { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 14px; margin-top: 2px; font-size: .78rem; }
.auth-legal a { color: var(--text-2); font-weight: 500; text-decoration: none; }
.auth-legal a:hover { color: var(--text); text-decoration: underline; }