/* FIT&+ · Control de acceso. Marca: negro, blanco y rojo #E10600 (#FF2A1F sobre oscuro); títulos en Barlow Condensed
   cursiva, texto en Inter. Tema claro/oscuro: automático según Windows (prefers-color-scheme) o el elegido en Ajustes. */

@font-face { font-family: 'Barlow Condensed'; src: url('fonts/BarlowCondensed-BoldItalic.ttf') format('truetype'); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url('fonts/BarlowCondensed-ExtraBoldItalic.ttf') format('truetype'); font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url('fonts/BarlowCondensed-SemiBoldItalic.ttf') format('truetype'); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/Inter-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/Inter-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/Inter-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/Inter-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }

:root {
  --bg: #F4F4F2;
  --bg-2: #ECECE9;
  --surface: #FFFFFF;
  --surface-2: #F7F7F5;
  --border: #E2E2DE;
  --text: #121212;
  --text-2: #5C5C58;
  --text-3: #8A8A85;
  --brand: #E10600;
  --brand-text: #C40500;
  --on-brand: #FFFFFF;
  --green: #12A150;
  --green-bg: #E6F6EC;
  --green-strong: #0B8A42;
  --red: #D92D20;
  --red-bg: #FDECEA;
  --amber: #D98A00;
  --amber-bg: #FFF4DB;
  --info: #2563EB;
  --info-bg: #E8EFFE;
  --cc-booked-bg: rgba(22, 101, 52, .10); --cc-booked-fg: #166534;
  --cc-wait-bg: rgba(29, 78, 216, .10); --cc-wait-fg: #1D4ED8;
  --cc-few-bg: rgba(138, 79, 0, .10); --cc-few-fg: #8A4F00;
  --shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 8px 28px rgba(0, 0, 0, .07);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, .16);
  --radius: 18px;
  --radius-sm: 12px;
  --topbar: 76px;
  --font-title: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #0B0B0C; --bg-2: #121214; --surface: #17171A; --surface-2: #1E1E22; --border: #2A2A2F;
    --text: #F5F5F4; --text-2: #B4B4B0; --text-3: #85857F; --brand: #E10600; --brand-text: #FF2A1F;
    --green: #22C55E; --green-bg: rgba(34, 197, 94, .14); --green-strong: #16A34A;
    --red: #F04438; --red-bg: rgba(240, 68, 56, .15); --amber: #FDB022; --amber-bg: rgba(253, 176, 34, .14);
    --info: #60A5FA; --info-bg: rgba(96, 165, 250, .14); --cc-booked-bg: rgba(52, 209, 112, .14); --cc-booked-fg: #34D170; --cc-wait-bg: rgba(85, 174, 255, .14); --cc-wait-fg: #55AEFF; --cc-few-bg: rgba(255, 178, 36, .14); --cc-few-fg: #FFB224;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px rgba(0, 0, 0, .35); --shadow-lg: 0 24px 70px rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}
:root[data-theme='dark'] {
  --bg: #0B0B0C; --bg-2: #121214; --surface: #17171A; --surface-2: #1E1E22; --border: #2A2A2F;
  --text: #F5F5F4; --text-2: #B4B4B0; --text-3: #85857F; --brand: #E10600; --brand-text: #FF2A1F;
  --green: #22C55E; --green-bg: rgba(34, 197, 94, .14); --green-strong: #16A34A;
  --red: #F04438; --red-bg: rgba(240, 68, 56, .15); --amber: #FDB022; --amber-bg: rgba(253, 176, 34, .14);
  --info: #60A5FA; --info-bg: rgba(96, 165, 250, .14); --cc-booked-bg: rgba(52, 209, 112, .14); --cc-booked-fg: #34D170; --cc-wait-bg: rgba(85, 174, 255, .14); --cc-wait-fg: #55AEFF; --cc-few-bg: rgba(255, 178, 36, .14); --cc-few-fg: #FFB224;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px rgba(0, 0, 0, .35); --shadow-lg: 0 24px 70px rgba(0, 0, 0, .6);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 400 15px/1.45 var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  user-select: none;
}
input, select, button { font: inherit; color: inherit; }
button { cursor: pointer; }
.display { font-family: var(--font-title); font-style: italic; font-weight: 800; letter-spacing: .01em; text-transform: uppercase; line-height: 1; margin: 0; }
.muted { color: var(--text-2); }
.small { font-size: 12.5px; }
.mono { font-family: Consolas, 'Cascadia Mono', monospace; }
.ok { color: var(--green); font-weight: 600; }
.ic { width: 20px; height: 20px; flex: none; }
.ic-lg { width: 30px; height: 30px; }
.ic-xl { width: 46px; height: 46px; }
.ic-xxl { width: 72px; height: 72px; }

/* ── Botones y campos ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px;
  border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); font-weight: 600;
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
}
.btn:hover { border-color: var(--text-3); }
.btn:active { transform: scale(.98); }
.btn:focus-visible, .icon-btn:focus-visible, .chip:focus-visible, .nav-item:focus-visible, .pin-key:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.btn[disabled] { opacity: .6; cursor: default; }
.btn-primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.btn-primary:hover { background: #C40500; border-color: #C40500; }
.btn-outline { background: transparent; border-color: currentColor; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn-ghost:hover { color: var(--text); background: var(--surface-2); }
.btn-danger { background: var(--red-bg); color: var(--red); border-color: transparent; }
.btn-sm { min-height: 34px; padding: 0 12px; font-size: 13px; }
.btn-lg { min-height: 52px; font-size: 16px; }
.link { background: none; border: 0; color: var(--brand-text); font-weight: 600; padding: 4px; }
.icon-btn {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text);
}
.icon-btn:hover { border-color: var(--text-3); }
.icon-btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.input {
  width: 100%; min-height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--surface); outline: none; user-select: text;
}
.input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent); }
select.input { padding-right: 8px; }
.field { display: grid; gap: 6px; margin: 12px 0; }
.field > span { font-size: 13px; font-weight: 600; color: var(--text-2); }

/* ── Pantallas centradas (PIN y entrada) ─────────────────────────────────────── */
.center-screen {
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background: radial-gradient(1200px 600px at 50% -10%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 60%), var(--bg);
}
.logo-mark { width: 92px; height: 92px; border-radius: 22px; box-shadow: var(--shadow); }
.pin-card, .login-card {
  width: min(420px, 100%); display: grid; justify-items: center; gap: 10px; text-align: center; padding: 34px 30px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 26px; box-shadow: var(--shadow-lg);
}
.login-card { justify-items: stretch; text-align: left; }
.login-card .logo-mark { justify-self: center; }
.warn-text { color: var(--red); font-weight: 600; }
/* Qué hace cada descarga de Ajustes (22/10/2026) */
.dl-help { margin: 4px 0 0; padding-left: 18px; display: grid; gap: 6px; color: var(--text-2); font-size: 13px; line-height: 1.45; }
.dl-help strong { color: var(--text); }
/* Registro de «Borrar todos los datos» (22/10/2026) */
.reset-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.reset-step { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.reset-step small { font-weight: 500; color: var(--text-2); }
.reset-icon { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 999px; }
.reset-icon .ic { width: 16px; height: 16px; }
.reset-ok .reset-icon { background: var(--green); color: #fff; }
.reset-fail .reset-icon { background: var(--red); color: #fff; }
.reset-fail { color: var(--red); }
.spinner-sm { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border); border-top-color: var(--brand); animation: reset-spin .8s linear infinite; }
@keyframes reset-spin { to { transform: rotate(360deg); } }
/* Aviso en móviles y tabletas (22/10/2026) */
.mobile-url { margin-top: 6px; padding: 8px 14px; border-radius: 12px; background: var(--bg); border: 1px solid var(--border); font-weight: 700; word-break: break-all; }
.login-card h1 { text-align: center; font-size: 38px; margin-top: 6px; }
.login-card p { margin: 0 0 6px; }
.pin-card h1 { font-size: 36px; margin-top: 6px; }
.pin-card p { margin: 0; max-width: 320px; }
.pin-boxes { display: flex; gap: 12px; margin: 16px 0 4px; }
.pin-box {
  width: 58px; height: 68px; border-radius: 16px; border: 2px solid var(--border); background: var(--surface-2);
  display: grid; place-items: center; font-size: 22px; color: var(--text); transition: border-color .12s ease, transform .12s ease;
}
.pin-box.filled { border-color: var(--text-3); }
.pin-box.current { border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent); }
.pin-dots { display: flex; gap: 12px; margin: 14px 0 4px; min-height: 18px; }
.pin-dots span { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--text-3); transition: all .12s ease; }
.pin-dots span.on { background: var(--brand); border-color: var(--brand); transform: scale(1.1); }
.pin-error { min-height: 20px; margin: 0; color: var(--red); font-weight: 600; font-size: 14px; }
.pin-pad { display: grid; grid-template-columns: repeat(3, 76px); gap: 12px; margin: 4px 0 8px; }
.pin-key {
  height: 64px; border-radius: 18px; border: 1px solid var(--border); background: var(--surface-2);
  font: 600 24px var(--font-body); display: grid; place-items: center;
}
.pin-key:hover { border-color: var(--text-3); }
.pin-key:active { transform: scale(.96); }
.pin-ok { background: var(--brand); border-color: var(--brand); color: #fff; }
.shake { animation: shake .35s ease; }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }

/* ── Estructura ──────────────────────────────────────────────────────────────── */
.shell { height: 100vh; display: grid; grid-template-rows: var(--topbar) auto 1fr; }
.topbar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 0 22px;
  background: var(--surface); border-bottom: 1px solid var(--border); app-region: drag;
}
.topbar button, .topbar .pill { app-region: no-drag; }
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; background: none; border: 0; padding: 0; color: inherit; text-align: left; justify-self: start; }
.brand-logo { width: 46px; height: 46px; border-radius: 12px; }
.brand-title { font: italic 800 24px/1 var(--font-title); text-transform: uppercase; }
.brand-text { display: grid; gap: 3px; min-width: 0; }
.brand-sub { color: var(--text-2); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Quién tiene la sesión del PC (22/10/2026): rol en una píldora de color y el nombre al lado. */
.session-chip { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; width: fit-content; height: 24px; padding: 0 10px 0 3px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-size: 12.5px; color: var(--text); min-width: 0; }
.session-chip-role { height: 18px; padding: 0 8px; border-radius: 999px; background: var(--brand); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; display: inline-flex; align-items: center; flex: none; }
.session-chip-coach { background: var(--info-bg); color: var(--info); }
.session-chip-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.clock { text-align: center; }
.clock-time { font: italic 800 34px/1 var(--font-title); letter-spacing: .02em; }
.clock-date { color: var(--text-2); font-size: 12.5px; }
.top-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.pill {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 999px;
  font-weight: 600; font-size: 13px; white-space: nowrap;
}
.pill .ic { width: 17px; height: 17px; }
.pill-ok { background: var(--green-bg); color: var(--green-strong); }
.pill-warn { background: var(--amber-bg); color: var(--amber); }
.pill-sub { font-weight: 500; opacity: .8; }
.pill-count { background: var(--amber); color: #111; border-radius: 999px; padding: 1px 8px; font-size: 12px; }
#banner { min-height: 0; }
.banner { display: flex; align-items: center; gap: 10px; padding: 10px 22px; font-weight: 500; }
.banner-info { background: var(--info-bg); color: var(--info); }
.banner-error { background: var(--red-bg); color: var(--red); }
.banner-warn { background: var(--amber-bg); color: var(--amber); }
.banner .btn { margin-left: auto; }
.main { min-height: 0; display: grid; grid-template-columns: 1fr minmax(300px, 380px); gap: 22px; padding: 22px; }
.main[data-view]:not([data-view='door']) { grid-template-columns: 1fr; }

/* ── Puerta ──────────────────────────────────────────────────────────────────── */
.stage { min-height: 0; display: grid; }
.idle {
  display: grid; place-content: center; justify-items: center; text-align: center; gap: 14px; padding: 30px;
  border-radius: 28px; border: 2px dashed var(--border); background: var(--surface);
}
.idle-rings { position: relative; width: clamp(190px, 24vw, 300px); aspect-ratio: 1; display: grid; place-items: center; margin-bottom: 10px; }
.ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--brand) 55%, transparent); animation: ring 2.6s ease-out infinite; }
.ring.r2 { animation-delay: 1.3s; }
@keyframes ring { from { transform: scale(.55); opacity: 1; } to { transform: scale(1.05); opacity: 0; } }
/* QR y llave en rojo, sin fondo (18/10/2026, petición del usuario: el círculo rojo llamaba mucho), los dos a la misma altura. */
.idle-icons { display: flex; align-items: center; justify-content: center; gap: 8%; width: 70%; color: var(--brand-text); }
.idle-icons .ic { width: auto; height: clamp(64px, 8vw, 104px); stroke-width: 1.8; }
.idle-title { font-size: clamp(40px, 5vw, 76px); }
.idle-sub { color: var(--text-2); font-size: clamp(15px, 1.4vw, 19px); margin: 0; }
.idle-stats { display: flex; gap: 22px; color: var(--text-2); margin-top: 10px; }
.idle-stats strong { color: var(--text); font-size: 20px; }
.idle-cam { margin-top: 20px; }
@media (prefers-reduced-motion: reduce) { .ring { animation: none; opacity: .4; } }

.result {
  --tone: var(--green); --tone-bg: var(--green-bg);
  position: relative; display: grid; grid-template-rows: auto 1fr; overflow: hidden;
  border-radius: 28px; background: var(--surface); border: 3px solid var(--tone); box-shadow: var(--shadow-lg);
  animation: pop .22s ease-out;
}
.result-rojo { --tone: var(--red); --tone-bg: var(--red-bg); }
.result-ambar { --tone: var(--amber); --tone-bg: var(--amber-bg); }
@keyframes pop { from { transform: scale(.97); opacity: .4; } to { transform: none; opacity: 1; } }
.result-band {
  display: flex; align-items: center; justify-content: center; gap: 14px; padding: clamp(14px, 2vh, 22px);
  background: var(--tone); color: #fff; font: italic 800 clamp(34px, 4.4vw, 68px)/1 var(--font-title); letter-spacing: .03em;
}
.result-ambar .result-band { color: #1B1300; }
.result-body { display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 3vw, 44px); align-items: center; padding: clamp(20px, 3.4vw, 48px); min-height: 0; }
.result-info { display: grid; gap: 14px; align-content: center; min-width: 0; }
.result-name { font-size: clamp(42px, 5.4vw, 92px); overflow-wrap: anywhere; }
.result-summary { margin: 0; color: var(--text-2); font-size: clamp(15px, 1.4vw, 20px); font-weight: 500; }
.reasons { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.reasons li {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px;
  background: var(--tone-bg, var(--red-bg)); color: var(--tone, var(--red)); font-weight: 700; font-size: clamp(16px, 1.5vw, 22px);
}
.class-box { padding: 16px 18px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--border); display: grid; gap: 4px; }
.class-box-soft { opacity: .9; }
.class-label { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); }
.class-name { font: italic 800 clamp(26px, 2.6vw, 40px)/1.05 var(--font-title); text-transform: uppercase; }
.checkin { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-top: 4px; }
.checkin-ok { color: var(--green); }
.checkin-wait { color: var(--text-2); }
.checkin-none { color: var(--text-3); }
.result-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.result-timer { position: absolute; left: 0; bottom: 0; height: 5px; width: 100%; background: var(--tone); transform-origin: left; animation: timer linear forwards; opacity: .55; }
@keyframes timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }

.avatar { position: relative; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: var(--surface-2); color: var(--text-2); flex: none; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-initials { font: italic 800 1em/1 var(--font-title); }
.avatar-hero { width: clamp(180px, 22vw, 340px); aspect-ratio: 1; border-radius: 28px; border: 5px solid var(--tone, var(--border)); font-size: clamp(64px, 8vw, 120px); box-shadow: var(--shadow); }
.avatar-xl { width: 150px; height: 150px; border-radius: 24px; font-size: 56px; }
.avatar-lg { width: 96px; height: 96px; border-radius: 20px; font-size: 36px; }
.avatar-lg .ic { width: 40px; height: 40px; }
.avatar-md { width: 56px; height: 56px; font-size: 22px; }
.avatar-sm { width: 40px; height: 40px; font-size: 16px; }

.recent { min-height: 0; display: grid; grid-template-rows: auto 1fr; background: var(--surface); border: 1px solid var(--border); border-radius: 22px; overflow: hidden; }
.recent-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 8px; }
.recent-head h2 { margin: 0; font: italic 800 22px/1 var(--font-title); text-transform: uppercase; }
.recent-list { list-style: none; margin: 0; padding: 4px 10px 14px; overflow: auto; display: grid; gap: 4px; align-content: start; }
.recent-item { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 12px; }
/* «Últimos accesos» por clase, en acordeón (22/10/2026) */
.recent-groups { display: grid; gap: 8px; }
.recent-group { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.recent-group-head { width: 100%; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 0; background: var(--surface-2, var(--bg)); color: var(--text); font: inherit; font-weight: 700; font-size: 14px; text-align: left; cursor: pointer; }
.recent-group-head:focus-visible { outline: 3px solid var(--brand); outline-offset: -3px; }
.recent-group-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.recent-group-tag { padding: 2px 8px; border-radius: 999px; background: var(--border); color: var(--text-2); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.recent-group-now { background: var(--green); color: #fff; }
.recent-group-count { min-width: 24px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--bg); color: var(--text-2); font-size: 12px; display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
.recent-group-chev { width: 18px; height: 18px; flex: none; transition: transform .2s; }
.recent-group-open .recent-group-chev { transform: rotate(180deg); }
.recent-group .recent-list { padding: 6px; }
.recent-group .recent-empty { padding: 10px 12px; margin: 0; }
/* Número de llegada a la clase en «Últimos accesos» (22/10/2026): el punto verde con su número */
.recent-num { flex: none; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 999px; background: var(--green); color: #fff; font-weight: 800; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 3px var(--green-bg, rgba(18, 161, 80, .18)); }
/* Anular una entrada desde «Últimos accesos» (22/10/2026) */
.recent-cancel { margin-left: auto; order: 0; flex: none; color: var(--red); border-color: var(--red); }
.recent-cancelled .recent-name { text-decoration: line-through; opacity: .7; }
.warn-banner { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: var(--amber-bg); border: 1px solid var(--amber); }
.warn-banner > .ic { flex: none; width: 24px; height: 24px; color: var(--amber); margin-top: 2px; }
.warn-banner p { margin: 6px 0 0; color: var(--text-2); font-size: 14px; }
.recent-item:hover { background: var(--surface-2); }
.recent-text { min-width: 0; flex: 1; }
.recent-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recent-sub { color: var(--text-3); font-size: 12.5px; }
.recent-empty { padding: 0 18px; }
.dot { width: 12px; height: 12px; border-radius: 50%; flex: none; background: var(--amber); }
.res-verde .dot { background: var(--green); }
.res-rojo .dot { background: var(--red); }

/* ── Panel lateral ───────────────────────────────────────────────────────────── */
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(380px, 92vw); z-index: 40; display: grid; grid-template-rows: auto 1fr auto;
  background: var(--surface); border-left: 1px solid var(--border); box-shadow: var(--shadow-lg);
  transform: translateX(105%); transition: transform .22s ease;
}
.drawer.open { transform: none; }
.drawer-backdrop { position: fixed; inset: 0; z-index: 30; background: rgba(0, 0, 0, .45); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 20px 10px; }
.drawer-head h2 { font-size: 30px; }
.nav { display: grid; gap: 6px; padding: 8px 14px; align-content: start; }
.nav-item { display: flex; align-items: center; gap: 14px; text-align: left; padding: 14px; border-radius: 14px; border: 1px solid transparent; background: none; }
.nav-item:hover { background: var(--surface-2); }
.nav-item.active { background: color-mix(in srgb, var(--brand) 10%, transparent); border-color: color-mix(in srgb, var(--brand) 35%, transparent); }
.nav-item.active .ic { color: var(--brand-text); }
.nav-label { font-weight: 700; }
.nav-sub { color: var(--text-3); font-size: 12.5px; }
.drawer-foot { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-top: 1px solid var(--border); }

/* ── Páginas ─────────────────────────────────────────────────────────────────── */
.page { min-height: 0; overflow: auto; display: grid; align-content: start; gap: 12px; }
.page-body { display: grid; gap: 16px; align-content: start; }
.page-title { font-size: clamp(34px, 3.6vw, 52px); }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; justify-content: space-between; }
.toolbar .search { max-width: 360px; }
/* Al hacer scroll en Personas y Hoy, el título y la frase se van y los chips, el buscador y las vistas quedan fijos arriba
   (18/10/2026, petición del usuario). El contenido deja hueco a la barra de scroll. */
.page { padding-right: 14px; scrollbar-gutter: stable; }
.page .toolbar { position: sticky; top: 0; z-index: 5; margin: 0 -2px; padding: 10px 2px; background: var(--bg); box-shadow: 0 8px 12px -12px rgba(0, 0, 0, .35); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-weight: 600; font-size: 13.5px; }
.chip-on { background: var(--text); color: var(--bg); border-color: var(--text); }
.chip { display: inline-flex; align-items: center; gap: 8px; }
.chip-count { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--surface-2, var(--border)); color: var(--text-2); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
.hero-photo { position: relative; flex: none; }
.hero-camera { position: absolute; right: -4px; bottom: -4px; width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; background: var(--text); color: var(--bg); border: 3px solid var(--surface); box-shadow: var(--shadow-lg); }
.hero-camera:hover { background: var(--brand); color: #fff; }
.hero-camera:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.cam-video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.cam-video.mirror { transform: scaleX(-1); }
/* La cámara se ve en un lienzo; el vídeo sigue en la página, invisible, para leer el QR y la foto (22/10/2026) */
.cam-view { display: contents; }
.cam-src { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cam-dock { position: fixed; left: 20px; bottom: 20px; z-index: 30; width: 220px; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; border: 3px solid var(--border); background: #000; box-shadow: var(--shadow-lg); }
.cam-dock-label { position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 12px; font-weight: 700; }
.cam-dock-label .ic { width: 14px; height: 14px; }
.cam-dock-stop { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 999px; background: rgba(0, 0, 0, .6); color: #fff; cursor: pointer; }
.cam-dock-stop:hover, .cam-dock-stop:focus-visible { background: var(--brand); }
.cam-dock-stop .ic { width: 18px; height: 18px; }
@media (max-width: 820px) { .cam-dock { width: 140px; left: 12px; bottom: 12px; } }
/* Webcam en el centro de la puerta en reposo, encima de «Pasa tu QR» (22/10/2026) */
.idle-cam-slot { width: min(560px, 46vw, 52vh); aspect-ratio: 4 / 3; margin-bottom: 10px; }
.cam-dock.cam-center { position: relative; left: auto; bottom: auto; z-index: auto; width: 100%; height: 100%; border-color: var(--brand); box-shadow: var(--shadow-lg); }
.cam-dock.cam-center .cam-dock-label { font-size: 14px; }
.modal-wide { width: min(640px, 100%); }
.photo-stage { position: relative; width: min(420px, 100%); aspect-ratio: 1; border-radius: 22px; overflow: hidden; background: var(--surface-2); display: grid; place-items: center; }
.photo-stage .cam-video { position: absolute; inset: 0; }
.photo-guide { position: absolute; inset: 12%; border-radius: 50%; border: 3px dashed rgba(255, 255, 255, .8); pointer-events: none; }
.photo-shot { width: 100%; height: 100%; object-fit: cover; }
.photo-actions { justify-content: center; flex-wrap: wrap; }
.nm-form { text-align: left; justify-items: stretch; }
.nm-form h2, .nm-form > p { text-align: center; }
.nm-top { display: flex; align-items: center; justify-content: center; gap: 16px; }
.nm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.nm-grid .field { margin: 6px 0; }
@media (max-width: 560px) { .nm-grid { grid-template-columns: 1fr; } }
.nm-form .row-actions { justify-content: flex-end; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.phone { display: flex; align-items: stretch; }
.phone-prefix { display: grid; place-items: center; padding: 0 12px; border: 1px solid var(--border); border-right: 0; border-radius: 12px 0 0 12px; background: var(--surface-2); color: var(--text-2); font-weight: 700; }
.phone .phone-input { border-radius: 0 12px 12px 0; min-width: 0; flex: 1; }
.danger-zone { display: flex; justify-content: flex-end; padding-top: 8px; }
.btn-danger-ghost { background: transparent; color: var(--red); border: 1px solid var(--red); }
.btn-danger-ghost:hover { background: var(--red-bg); }
.btn-danger { background: var(--red); color: #fff; border-color: var(--red); }
.btn-danger:disabled { opacity: .45; cursor: not-allowed; }
.chip-on .chip-count { background: var(--bg); color: var(--text); }
.chip-info { display: inline-flex; align-items: center; height: 30px; width: fit-content; background: var(--info-bg); color: var(--info); border: 0; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.stat { padding: 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); }
.stat-value { font: italic 800 44px/1 var(--font-title); }
.stat-label { color: var(--text-2); font-weight: 600; }
.stat-verde .stat-value { color: var(--green); }
.stat-rojo .stat-value { color: var(--red); }
.stat-ambar .stat-value { color: var(--amber); }
.stat-info .stat-value { color: var(--info); }
.table { display: grid; gap: 6px; }
.row {
  display: grid; grid-template-columns: 64px 40px minmax(160px, 1.4fr) 90px minmax(120px, 1fr) 120px 28px; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); text-align: left; border-left: 5px solid var(--amber);
}
.row.res-verde { border-left-color: var(--green); }
.row.res-rojo { border-left-color: var(--red); }
.row:hover { border-color: var(--text-3); }
.row-time { font-weight: 700; font-variant-numeric: tabular-nums; }
.row-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-method, .row-class { color: var(--text-2); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-sync { color: var(--text-3); }
.badge { display: inline-flex; align-items: center; justify-content: center; height: 28px; padding: 0 12px; border-radius: 999px; font-weight: 700; font-size: 12.5px; width: fit-content; }
.badge-verde { background: var(--green-bg); color: var(--green-strong); }
.badge-rojo { background: var(--red-bg); color: var(--red); }
.badge-ambar { background: var(--amber-bg); color: var(--amber); }
.empty { padding: 20px 4px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.member-card {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; text-align: left;
  background: var(--surface); border: 1px solid var(--border);
}
.member-card:hover { border-color: var(--text-3); box-shadow: var(--shadow); }
.toolbar-right { display: flex; align-items: center; gap: 10px; flex: 1; justify-content: flex-end; min-width: 260px; }
.view-switch { display: flex; gap: 4px; padding: 4px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); }
.view-btn { width: 38px; height: 38px; border: 0; background: transparent; color: var(--text-3); }
.view-btn.on { background: var(--text); color: var(--bg); }
.members-body { display: grid; gap: 22px; }
.members-section { display: grid; gap: 10px; }
.members-title { margin: 0; display: flex; align-items: center; gap: 10px; font: italic 800 22px/1 var(--font-title); text-transform: uppercase; }
.members-count { font: 600 12.5px var(--font-body); font-style: normal; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); }
/* Solo caras: fotos grandes con el nombre debajo; el semáforo en el borde de la foto. */
.faces { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.face-card { display: grid; gap: 8px; justify-items: center; text-align: center; padding: 10px; border-radius: 18px; border: 1px solid transparent; background: none; }
.face-card:hover { background: var(--surface); border-color: var(--border); }
.face-photo { position: relative; width: 100%; }
.avatar-face { width: 100%; aspect-ratio: 1; height: auto; border-radius: 20px; font-size: 44px; border: 4px solid var(--amber); }
.face-card.res-verde .avatar-face { border-color: var(--green); }
.face-card.res-rojo .avatar-face { border-color: var(--red); }
.face-photo .dot { position: absolute; right: 8px; bottom: 8px; width: 16px; height: 16px; border: 3px solid var(--surface); }
.face-key { position: absolute; left: 8px; bottom: 8px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--text-2); }
.face-key .ic { width: 15px; height: 15px; }
.face-name { font-weight: 700; font-size: 14px; line-height: 1.25; overflow-wrap: anywhere; }
.member-text { min-width: 0; flex: 1; }
.member-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.member-sub { color: var(--text-3); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.member-key { position: absolute; top: 8px; right: 30px; color: var(--text-3); }
.member-key .ic { width: 15px; height: 15px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; align-items: start; }
/* Ajustes con menú a la izquierda (22/10/2026): el menú solo ocupa lo que miden sus textos. */
.settings-layout { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 16px; align-items: start; }
.settings-nav { display: grid; gap: 4px; padding: 8px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); position: sticky; top: 0; }
.settings-nav-item { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 14px; background: transparent; color: var(--text-2); font: inherit; font-weight: 600; font-size: 14px; text-align: left; white-space: nowrap; cursor: pointer; }
.settings-nav-item:hover { background: var(--bg); color: var(--text); }
.settings-nav-item:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.settings-nav-on, .settings-nav-on:hover { background: var(--text); color: var(--bg); }
.settings-pane { min-width: 0; max-width: 860px; }
/* Título de la página dentro del menú, arriba, con una línea debajo (23/10/2026) */
.settings-nav-title { margin: 6px 14px 2px; font-size: clamp(26px, 2.4vw, 36px); line-height: 1; }
.settings-nav-rule { margin: 6px 6px 4px; border: 0; border-top: 1px solid var(--border); }
@media (max-width: 720px) {
  .settings-layout { grid-template-columns: minmax(0, 1fr); }
  .settings-nav { display: flex; flex-wrap: wrap; overflow-x: auto; position: static; }
  .settings-nav-title, .settings-nav-rule { flex-basis: 100%; }
}
.card { padding: 20px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); display: grid; gap: 10px; }
.card h2 { margin: 0 0 4px; font: italic 800 24px/1 var(--font-title); text-transform: uppercase; display: flex; align-items: center; gap: 8px; }
.card p { margin: 0; }
.kv { display: grid; grid-template-columns: 170px 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.kv:last-of-type { border-bottom: 0; }
.kv-label { color: var(--text-3); font-weight: 600; font-size: 13.5px; }
.kv-value { font-weight: 500; overflow-wrap: anywhere; user-select: text; }
.plain { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cred { display: flex; align-items: center; gap: 10px; }
.cred span { flex: 1; font-family: Consolas, monospace; }
.person-hero { display: flex; gap: 24px; align-items: center; padding: 20px; border-radius: 24px; background: var(--surface); border: 1px solid var(--border); --tone: var(--amber); --tone-bg: var(--amber-bg); }
.person-hero.res-verde { --tone: var(--green); --tone-bg: var(--green-bg); }
.person-hero.res-rojo { --tone: var(--red); --tone-bg: var(--red-bg); }
.person-hero .avatar-xl { border: 4px solid var(--tone); }
.person-hero > div { display: grid; gap: 10px; }
.person-hero-info { min-width: 0; }
.person-hero { position: relative; padding-left: 64px; }
.hero-back {
  position: absolute; top: 14px; left: 14px; width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2);
}
.hero-back:hover { color: var(--text); border-color: var(--text-3); }
.hero-back:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
@media (max-width: 820px) { .person-hero { padding-left: 20px; padding-top: 60px; } }
.reasons-sm li { font-size: 15px; padding: 8px 12px; }
.person-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.person-col { display: grid; gap: 14px; min-width: 0; }
.fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px 20px; }
.fld { min-width: 0; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.fld-wide { grid-column: 1 / -1; }
.fld-label { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin-bottom: 4px; }
.fld-value { font-size: 16px; font-weight: 500; overflow-wrap: anywhere; user-select: text; }
.hist { display: flex; align-items: center; gap: 8px; }
.card-sub { margin: 10px 0 0; font-size: 14px; font-weight: 700; }
.steps { margin: 0; padding-left: 20px; display: grid; gap: 6px; color: var(--text-2); font-size: 13.5px; }
/* Tarjetas de clase con los colores de la app (verde reservada, azul en espera, ámbar plaza ofrecida) y el color del tipo. */
.class-list { display: grid; gap: 8px; }
.class-card {
  --cc-bg: var(--cc-booked-bg); --cc-fg: var(--cc-booked-fg);
  display: grid; grid-template-columns: 96px 1fr auto; align-items: center; gap: 14px; padding: 12px 14px 12px 16px;
  border-radius: 14px; background: var(--cc-bg); border-left: 6px solid var(--type, var(--cc-fg));
}
.cc-espera { --cc-bg: var(--cc-wait-bg); --cc-fg: var(--cc-wait-fg); }
.cc-ofrecida { --cc-bg: var(--cc-few-bg); --cc-fg: var(--cc-few-fg); }
.cc-hour { font: italic 800 26px/1 var(--font-title); }
.cc-day { font-size: 12.5px; color: var(--text-2); margin-top: 2px; }
.cc-name { font: italic 800 22px/1.05 var(--font-title); text-transform: uppercase; overflow-wrap: anywhere; }
.cc-state { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--cc-fg); font-size: 13.5px; white-space: nowrap; }
.cc-state .ic { width: 17px; height: 17px; }
.btn-door { min-height: 40px; }
@media (max-width: 1100px) {
  .person-grid { grid-template-columns: 1fr; }
  .btn-door span { display: none; }
}

.row-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.toggle { display: flex; align-items: center; gap: 12px; cursor: pointer; font-weight: 500; padding: 4px 0; }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-track { width: 46px; height: 28px; border-radius: 999px; background: var(--border); position: relative; transition: background .15s ease; flex: none; }
.toggle-thumb { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .15s ease; }
.toggle input:checked + .toggle-track { background: var(--green); }
.toggle input:checked + .toggle-track .toggle-thumb { transform: translateX(18px); }
.toggle input:focus-visible + .toggle-track { outline: 3px solid var(--brand); outline-offset: 2px; }

/* ── Ventanas ────────────────────────────────────────────────────────────────── */
.modal-backdrop { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; background: rgba(0, 0, 0, .55); backdrop-filter: blur(4px); }
.modal { width: min(440px, 100%); display: grid; justify-items: center; gap: 12px; text-align: center; padding: 30px; border-radius: 26px; background: var(--surface); box-shadow: var(--shadow-lg); }
.modal-wide { width: min(620px, 100%); justify-items: stretch; text-align: left; max-height: 86vh; grid-template-rows: auto auto 1fr auto; }
.modal h2 { font-size: 32px; }
.pin-overlay-card { box-shadow: var(--shadow-lg); }
.pulse-ring { width: 110px; height: 110px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: #fff; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 18px color-mix(in srgb, var(--brand) 18%, transparent); } }
.pick-list { overflow: auto; display: grid; gap: 4px; min-height: 120px; }
.pick-item { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 12px; border: 0; background: none; text-align: left; font-weight: 600; }
.pick-item:hover { background: var(--surface-2); }

/* Avisos abajo a la derecha (21/10/2026, petición del usuario: en el centro tapaban la puerta). */
#toasts { position: fixed; right: 24px; bottom: 24px; z-index: 80; display: grid; gap: 8px; justify-items: end; pointer-events: none; max-width: calc(100vw - 48px); }
/* Avisos en una sola línea (22/10/2026, petición del usuario): solo si no caben en la pantalla se cortan con «…». */
.toast { padding: 12px 18px; border-radius: 14px; background: var(--text); color: var(--bg); font-weight: 600; box-shadow: var(--shadow-lg); animation: pop .2s ease-out; transition: opacity .4s ease; max-width: calc(100vw - 48px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toast-ok { background: var(--green-strong); color: #fff; }
.toast-error { background: var(--red); color: #fff; }
.toast.out { opacity: 0; }

/* ── Tamaños de ventana ──────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .main { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .recent { max-height: 220px; }
}
@media (max-width: 820px) {
  :root { --topbar: 64px; }
  .topbar { grid-template-columns: 1fr auto; padding: 0 14px; }
  .clock { display: none; }
  .pill-sub { display: none; }
  .brand-title { font-size: 20px; }
  .main { padding: 14px; gap: 14px; }
  .result-body { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .result-actions { justify-content: center; }
  .reasons li { justify-content: center; }
  .row { grid-template-columns: 52px 40px 1fr 90px 24px; }
  .row-method, .row-class { display: none; }
  .kv { grid-template-columns: 1fr; gap: 2px; }
  .person-hero { flex-direction: column; text-align: center; }
}
@media (max-height: 640px) {
  .result-band { padding: 10px; }
  .avatar-hero { width: clamp(140px, 18vw, 220px); }
}

/* Puerta: «Últimos accesos» plegado en un lateral, cerrado por defecto (19/10/2026) */
.main.recent-closed { grid-template-columns: 1fr; }
.recent-toggle { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 20; display: grid; place-items: center; gap: 4px; width: 52px; padding: 14px 0; border: 1px solid var(--border); border-right: 0; border-radius: 16px 0 0 16px; background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); cursor: pointer; }
.recent-toggle:hover, .recent-toggle:focus-visible { background: var(--surface-2); }
.recent-toggle .ic { width: 22px; height: 22px; }
.recent-toggle-count { min-width: 24px; padding: 2px 6px; border-radius: 999px; background: var(--brand); color: #fff; font-size: 12px; font-weight: 700; text-align: center; }
.recent-head-actions { display: flex; align-items: center; gap: 6px; }
.icon-btn-sm { width: 34px; height: 34px; }

/* Salvapantallas (19/10/2026) */
.saver { position: fixed; inset: 0; z-index: 25; background: #000; animation: saver-in .8s ease; }
@keyframes saver-in { from { opacity: 0; } to { opacity: 1; } }
.saver-box { position: absolute; display: grid; justify-items: center; gap: 6px; color: #fff; opacity: .78; transition: left 2s ease, top 2s ease; }
.saver-logo { width: clamp(200px, 26vw, 420px); height: auto; margin-bottom: 14px; }
.saver-time { font: italic 800 clamp(64px, 9vw, 140px)/1 var(--font-title); letter-spacing: .02em; }
.saver-date { font-size: clamp(16px, 1.6vw, 22px); color: #bbb; }

/* Estadísticas (19/10/2026) */
.stats-body { display: grid; gap: 16px; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.bars { display: flex; align-items: flex-end; gap: 4px; height: 190px; padding-top: 8px; overflow-x: auto; }
.bar { flex: 1 0 22px; display: grid; grid-template-rows: auto 1fr auto; height: 100%; text-align: center; }
.bars-dense .bar { flex-basis: 10px; }
.bars-dense .bar-label, .bars-dense .bar-value { font-size: 0; }
.bar-value { font-size: 11px; color: var(--text-2); min-height: 14px; }
.bar-track { display: flex; align-items: flex-end; min-height: 0; }
.bar-fill { width: 100%; min-height: 2px; border-radius: 6px 6px 2px 2px; background: var(--brand); }
.bar-label { font-size: 11px; color: var(--text-3); padding-top: 4px; white-space: nowrap; }
.row.row-stat { grid-template-columns: 40px minmax(0, 1fr) auto; border-left: 1px solid var(--border); }
.row.row-stat-2 { grid-template-columns: minmax(0, 1fr) auto; }

/* ── Entrar o desbloquear con el QR de la app (19/10/2026, migración 174) ─────────────────────────────────────── */
.pair-card {
  width: min(560px, 100%); display: grid; justify-items: center; gap: 12px; text-align: center; padding: 30px 30px 26px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 26px; box-shadow: var(--shadow-lg);
}
.pair-card h1 { font-size: 38px; margin: 4px 0 0; }
.pair-card > p { margin: 0; }
.pair { display: grid; justify-items: center; gap: 8px; width: 100%; }
.pair-qr {
  width: min(58vh, 380px); aspect-ratio: 1; display: grid; place-items: center; background: #fff; border-radius: 18px;
  border: 1px solid var(--border); overflow: hidden;
}
.pair-qr svg { width: 100%; height: 100%; display: block; }
.pair-qr.pair-off { background: var(--surface-2); color: var(--text-3); }
.pair-qr.pair-off svg { width: 30%; height: 30%; }
.pair-code { font-family: var(--font-title); font-weight: 800; font-style: italic; font-size: 40px; letter-spacing: .12em; min-height: 48px; }
.pair-status { margin: 0; color: var(--text-2); font-size: 14px; }
.pair-hint { display: flex; gap: 8px; align-items: flex-start; text-align: left; margin: 4px 0 0; color: var(--text-2); font-size: 13.5px; }
.pair-hint svg { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.pair-steps { text-align: left; justify-self: stretch; }
.subtle-corner {
  position: fixed; right: 14px; bottom: 14px; width: 34px; height: 34px; display: grid; place-items: center;
  border: 0; border-radius: 10px; background: transparent; color: var(--text-3); opacity: .22; cursor: pointer;
}
.subtle-corner:hover, .subtle-corner:focus-visible { opacity: .9; background: var(--surface-2); }
.subtle-corner svg { width: 18px; height: 18px; }

/* ── Pantalla para el socio (monitor extendido, 19/10/2026, migración 175) ───────────────────────────────────────── */
.icon-btn-on { background: var(--green-bg); color: var(--green-strong); border-color: var(--green); }
.disp-root { position: fixed; inset: 0; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(1400px 700px at 50% -10%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 60%), var(--bg); }
.disp-idle { display: grid; justify-items: center; gap: 2.2vh; text-align: center; transition: opacity .3s; }
.disp-idle.disp-dim { opacity: .08; }
.disp-logo { width: 13vh; height: 13vh; border-radius: 3vh; box-shadow: var(--shadow); }
.disp-time { font-family: var(--font-title); font-weight: 800; font-style: italic; font-size: 16vh; line-height: 1; }
.disp-date { color: var(--text-2); font-size: 3vh; }
.disp-welcome { font-family: var(--font-title); font-weight: 700; font-style: italic; font-size: 5vh; margin: 0; }
.disp-qr { display: flex; gap: 3vw; align-items: center; }
.disp-qr:empty { display: none; }
.disp-qr-code { width: 30vh; height: 30vh; background: #fff; border-radius: 2vh; padding: 1vh; }
.disp-qr-code svg { width: 100%; height: 100%; display: block; }
.disp-qr-text { display: grid; gap: 1vh; text-align: left; max-width: 38vw; font-size: 2.6vh; color: var(--text-2); }
.disp-qr-text strong { font-family: var(--font-title); font-style: italic; font-size: 5vh; color: var(--text); }
.disp-card { position: absolute; inset: 5vh 5vw; display: flex; gap: 4vw; align-items: center; padding: 5vh 4vw;
  background: var(--surface); border: 0.6vh solid var(--border); border-radius: 4vh; box-shadow: var(--shadow-lg); }
.disp-card[hidden] { display: none; }
.disp-card.disp-verde { border-color: var(--green); }
.disp-card.disp-rojo { border-color: var(--red); }
.disp-card.disp-ambar { border-color: var(--amber); }
.disp-photo { width: 38vh; height: 38vh; object-fit: cover; border-radius: 3vh; flex: none; }
.disp-info { display: grid; gap: 2vh; min-width: 0; }
.disp-state { display: flex; align-items: center; gap: 1.5vh; font-family: var(--font-title); font-weight: 800; font-style: italic; font-size: 7vh; }
.disp-state svg { width: 7vh; height: 7vh; }
.disp-verde .disp-state { color: var(--green); }
.disp-rojo .disp-state { color: var(--red); }
.disp-ambar .disp-state { color: var(--amber); }
.disp-name { font-size: 6vh; margin: 0; }
.disp-reason { font-size: 3.4vh; margin: 0; color: var(--red); font-weight: 600; }
.disp-class, .disp-checkin { display: flex; align-items: center; gap: 1vh; font-size: 3vh; margin: 0; color: var(--text-2); }
.disp-class svg, .disp-checkin svg { width: 3vh; height: 3vh; }
.disp-checkin { color: var(--green-strong); }
.disp-plan { display: grid; gap: 1.5vh; }
.disp-plan-item { padding: 1.6vh 2vh; border-radius: 2vh; background: var(--surface-2); border-left: 1vh solid var(--green); display: grid; gap: .8vh; font-size: 2.6vh; }
.disp-plan-item.luz-amarillo { border-left-color: var(--amber); background: var(--amber-bg); }
.disp-plan-item.luz-rojo { border-left-color: var(--red); background: var(--red-bg); }
.disp-plan-name { font-weight: 700; font-size: 3vh; }
.disp-plan-detail { color: var(--text-2); }
.disp-usage { display: flex; align-items: center; gap: 1.5vh; }
.disp-bar { flex: 1; height: 1.6vh; border-radius: 1vh; background: var(--border); overflow: hidden; max-width: 30vw; }
.disp-bar-fill { height: 100%; background: var(--brand); }
.disp-expiry { display: flex; align-items: center; gap: 1vh; font-weight: 600; }
.luz-amarillo .disp-expiry { color: var(--amber); }
.luz-rojo .disp-expiry { color: var(--red); }
.disp-dot { width: 2vh; height: 2vh; border-radius: 50%; background: currentColor; }
.disp-toast { position: absolute; left: 50%; bottom: 5vh; transform: translateX(-50%); display: flex; align-items: center; gap: 1.5vh;
  padding: 2vh 3vw; border-radius: 2vh; font-size: 3.4vh; font-weight: 700; background: var(--surface); box-shadow: var(--shadow-lg); }
.disp-toast[hidden] { display: none; }
.disp-toast.ok { color: var(--green-strong); border: .4vh solid var(--green); }
.disp-toast svg { width: 4vh; height: 4vh; }
.disp-fs { position: absolute; right: 2vh; bottom: 2vh; display: flex; gap: 1vh; align-items: center; padding: 1vh 2vh; border-radius: 1.2vh;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font: inherit; cursor: pointer; opacity: .7; }
.disp-fs[hidden] { display: none; }
.disp-fs svg { width: 2.4vh; height: 2.4vh; }

/* Rueda de carga (al entrar con el QR, 20/10/2026) */
.spinner { width: 72px; height: 72px; border-radius: 50%; border: 6px solid color-mix(in srgb, var(--brand) 20%, transparent); border-top-color: var(--brand); animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; } }

/* Paneles de Estadísticas plegables (20/10/2026): sin estirarse a la altura del de al lado */
.stats-grid { align-items: start; }
.card-top { align-content: start; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card-head h2 { margin: 0; }
.fold-btn svg { transform: rotate(-90deg); transition: transform .2s; }
.fold-btn.open svg { transform: rotate(90deg); }
.fold-more { justify-self: start; }

/* ── Ventana sin maximizar (20/10/2026, informado por el usuario: se cortaba por abajo) ───────────────────────────
   Todo se ajusta a la altura de la ventana y, si aun así no cabe, se puede desplazar en lugar de cortarse. */
.center-screen { height: 100vh; min-height: 0; overflow-y: auto; align-items: safe center; }
.pair-qr { width: min(42vh, 380px); }
.idle { min-height: 0; overflow-y: auto; align-content: safe center; place-content: safe center; }
.idle-rings { width: clamp(110px, min(24vw, 30vh), 300px); }
.idle-icons .ic { height: clamp(40px, min(8vw, 10vh), 104px); }
.idle-title { font-size: clamp(28px, min(5vw, 8vh), 76px); }
.result-body { overflow-y: auto; }
@media (max-height: 760px) {
  .center-screen { padding: 12px; }
  .pair-card { padding: 18px 22px; gap: 8px; }
  .pair-card .logo-mark { width: 56px; height: 56px; border-radius: 14px; }
  .pair-qr { width: min(34vh, 380px); }
  .pair-code { font-size: 30px; min-height: 36px; }
  .idle { gap: 8px; padding: 16px; }
  .idle-cam { margin-top: 8px; }
  .main { gap: 14px; padding: 14px; }
  .avatar-xl { width: 110px; height: 110px; font-size: 42px; }
  .result-band { font-size: clamp(28px, 4vw, 48px); padding: 10px; }
  .result-name { font-size: clamp(32px, 4.4vw, 64px); }
}
@media (max-height: 560px) {
  .pair-steps { display: none; }
  .idle-sub, .idle-stats { display: none; }
}

/* ── Pantalla para el socio por bloques (20/10/2026, migración 176): clases | quién ha entrado | QR ─────────────── */
.disp-root { place-items: stretch; }
.disp-idle { position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr; gap: 2.4vh; padding: 3vh 2.6vw; justify-items: stretch; text-align: left; }
.disp-top { display: flex; align-items: center; gap: 2vw; }
.disp-top .disp-logo { width: 8vh; height: 8vh; border-radius: 2vh; }
.disp-top .disp-welcome { flex: 1; font-size: 5vh; }
.disp-top .disp-clock { text-align: right; }
.disp-top .disp-time { font-size: 7vh; }
.disp-top .disp-date { font-size: 2.2vh; }
.disp-body { min-height: 0; display: grid; gap: 2vw; }
.disp-block { min-height: 0; min-width: 0; display: grid; grid-template-rows: auto 1fr auto; gap: 2vh; padding: 2.6vh 1.8vw; border-radius: 3vh;
  background: var(--surface); border: 1px solid var(--border); overflow: hidden; }
.disp-block[hidden] { display: none; }
.disp-h2 { margin: 0; display: flex; align-items: center; gap: 1.2vh; font: italic 800 4vh/1 var(--font-title); text-transform: uppercase; }
.disp-count { font: 700 2.4vh/1 var(--font-body); padding: .6vh 1.4vh; border-radius: 99px; background: var(--surface-2); color: var(--text-2); }
.disp-empty { margin: 0; align-self: center; text-align: center; color: var(--text-3); font-size: 2.8vh; }
.disp-done { margin: 0; color: var(--text-3); font-size: 2vh; }
/* Clases de hoy */
.disp-classes { min-height: 0; display: grid; align-content: start; gap: 1.2vh; overflow: hidden; }
.disp-cls { display: grid; grid-template-columns: auto 1fr; gap: 1.6vw; align-items: center; padding: 1.4vh 1.4vw; border-radius: 2vh; background: var(--surface-2); border-left: .8vh solid var(--border); }
.disp-cls.now { border-left-color: var(--green); background: var(--green-bg); }
.disp-cls-time { display: grid; font: italic 800 4vh/1 var(--font-title); }
.disp-cls-time small { font: 500 1.8vh/1.3 var(--font-body); color: var(--text-3); }
.disp-cls-info { min-width: 0; }
.disp-cls-name { font-weight: 700; font-size: 2.8vh; line-height: 1.15; overflow-wrap: anywhere; }
.disp-cls-sub { color: var(--text-2); font-size: 2vh; }
.disp-cls.now .disp-cls-sub { color: var(--green-strong); font-weight: 600; }
/* Quién ha entrado */
.disp-faces { min-height: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--tile, 18vh), 1fr)); align-content: start; justify-content: center; gap: 1.6vh; overflow: hidden; }
.disp-face { display: grid; gap: .8vh; justify-items: center; text-align: center; animation: pop .3s ease-out; }
.disp-face img, .disp-face-ini { width: 100%; aspect-ratio: 1; border-radius: 2vh; object-fit: cover; border: .5vh solid var(--green); background: var(--surface-2); }
.disp-face-ini { display: grid; place-items: center; font: italic 800 calc(var(--tile, 18vh) * .35)/1 var(--font-title); color: var(--text-2); }
.disp-face-name { font-weight: 700; font-size: clamp(1.4vh, calc(var(--tile, 18vh) * .13), 2.6vh); line-height: 1.2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* QR de la clase, siempre a la vista */
.disp-block.disp-qr { grid-template-rows: auto 1fr auto; justify-items: center; text-align: center; }
.disp-block.disp-qr .disp-qr-code { width: auto; height: auto; max-width: 100%; max-height: 100%; aspect-ratio: 1; align-self: center; }
.disp-block.disp-qr .disp-qr-text { text-align: center; max-width: none; font-size: 2.2vh; }
.disp-block.disp-qr .disp-qr-text strong { font-size: 3.6vh; }
/* Sin clases ni cuadrícula: la pantalla de siempre, todo centrado y grande */
.disp-classic .disp-idle { grid-template-rows: auto auto; align-content: center; justify-items: center; text-align: center; }
.disp-classic .disp-top { flex-direction: column; gap: 2.2vh; }
.disp-classic .disp-top .disp-logo { width: 13vh; height: 13vh; border-radius: 3vh; }
.disp-classic .disp-top .disp-clock { order: 1; text-align: center; }
.disp-classic .disp-top .disp-welcome { order: 2; }
.disp-classic .disp-top .disp-time { font-size: 16vh; }
.disp-classic .disp-top .disp-date { font-size: 3vh; }
.disp-classic .disp-body { justify-content: center; }
.disp-classic .disp-block.disp-qr { grid-template-columns: auto auto; grid-template-rows: auto; align-items: center; gap: 3vw; background: transparent; border: 0; }
.disp-classic .disp-block.disp-qr .disp-h2 { display: none; }
.disp-classic .disp-block.disp-qr .disp-qr-code { width: 30vh; height: 30vh; }
.disp-classic .disp-block.disp-qr .disp-qr-text { text-align: left; max-width: 38vw; }
.pair-actions { justify-content: center; }

/* Pantallas de entrada y bloqueo (20/10/2026): fondo negro con el logo a la izquierda (su fondo ya es negro) y el
   panel del QR sin logo, para que el QR suba y sea más grande. En ventanas estrechas, sin logo de fondo. */
.center-screen.pair-screen { background: #000; }  /* sin el logo de fondo: solo en el centro del QR (20/10/2026) */
.pair-screen .pair-qr { width: min(52vh, 420px); }
@media (max-height: 760px) { .pair-screen .pair-qr { width: min(44vh, 420px); } }
/* Logo en el centro del QR y PIN en la esquina del panel (20/10/2026) */
.pair-card { position: relative; }
.pair-qr { position: relative; }
.pair-qr-logo { position: absolute; left: 50%; top: 50%; width: 22%; height: 22%; transform: translate(-50%, -50%); border-radius: 14%; box-shadow: 0 0 0 5px #fff; }
.pair-off .pair-qr-logo { display: none; }
.pair-pin { position: absolute; top: 16px; right: 16px; }

/* Teclado del PIN a la altura de la ventana (20/10/2026, petición del usuario: sin pantalla completa no cabía) */
.pin-card { padding: clamp(16px, 3.4vh, 34px) 30px; gap: clamp(4px, 1vh, 10px); }
.pin-card .logo-mark { width: clamp(44px, 9vh, 92px); height: clamp(44px, 9vh, 92px); border-radius: clamp(10px, 2.2vh, 22px); }
.pin-card h1 { font-size: clamp(24px, 4.4vh, 36px); margin-top: 0; }
.pin-card p { font-size: clamp(13px, 1.9vh, 15px); }
.pin-boxes { gap: clamp(8px, 1.4vh, 12px); margin: clamp(6px, 1.6vh, 16px) 0 2px; }
.pin-box { width: clamp(40px, 6.6vh, 58px); height: clamp(46px, 7.6vh, 68px); border-radius: clamp(10px, 1.8vh, 16px); }
.pin-error { min-height: clamp(16px, 2.4vh, 20px); }
.pin-pad { grid-template-columns: repeat(3, clamp(56px, 9.6vh, 76px)); gap: clamp(6px, 1.4vh, 12px); margin: 2px 0 clamp(2px, 1vh, 8px); }
.pin-key { height: clamp(40px, 7.4vh, 64px); border-radius: clamp(12px, 2vh, 18px); font-size: clamp(18px, 3vh, 24px); }
@media (max-height: 600px) { .pin-card .logo-mark { display: none; } }
/* Botones con pausa de 2 s (pantalla del socio y pantalla completa, 20/10/2026): cuenta atrás dentro del botón */
.icon-btn { position: relative; }
.icon-btn.cooling { opacity: .55; cursor: wait; }
.icon-btn.cooling svg { opacity: .25; }
.cool-count { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800; font-size: 17px; color: var(--text); }
/* Estado de conexión: solo la nube, verde o roja, y un aviso al pulsarla (20/10/2026) */
.pill-cloud { border: 0; cursor: pointer; padding: 0 12px; font: inherit; font-weight: 700; }
.pill-cloud .ic { width: 22px; height: 22px; }
.pill-bad { background: var(--red-bg); color: var(--red); }
.pill-syncing .ic { animation: pulse-cloud 1.2s ease-in-out infinite; }
@keyframes pulse-cloud { 50% { opacity: .35; } }
.status-tip { position: fixed; z-index: 60; width: min(340px, calc(100vw - 24px)); display: grid; gap: 8px; padding: 14px 16px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--border); border-top: 4px solid var(--green); box-shadow: var(--shadow-lg); font-size: 14px; }
.status-tip.tip-bad { border-top-color: var(--red); }
.status-tip p { margin: 0; color: var(--text-2); }
.status-tip .tip-error { color: var(--red); font-weight: 600; }
.status-tip .btn { justify-self: start; }
/* Salvapantallas: la fecha pegada a la hora (20/10/2026) */
.saver-box { gap: 0; }
.saver-date { margin-top: 2px; }
/* El candado del PIN, arriba a la derecha del panel (la regla .icon-btn { position: relative } de la cuenta atrás lo pisaba) */
.icon-btn.pair-pin { position: absolute; top: 16px; right: 16px; }
/* Sin segundo monitor: el botón de la pantalla del socio, tachado y apagado (20/10/2026) */
.icon-btn-off { color: var(--text-3); opacity: .7; }
/* Nube con el mismo botón que el resto de la cabecera; búsqueda en una lupa; «+» para la ficha nueva (20/10/2026) */
.cloud-btn { width: auto; min-width: 44px; padding: 0 10px; gap: 8px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
.cloud-btn .ic { width: 22px; height: 22px; }
.cloud-ok { color: var(--green-strong); border-color: color-mix(in srgb, var(--green) 45%, var(--border)); background: var(--green-bg); }
.cloud-bad { color: var(--red); border-color: color-mix(in srgb, var(--red) 45%, var(--border)); background: var(--red-bg); }
.cloud-syncing .ic { animation: pulse-cloud 1.2s ease-in-out infinite; }
.cloud-btn .pill-count { margin-left: 2px; }
/* Modo sin conexión al lado de la nube (24/10/2026): la puerta sigue funcionando con lo guardado en el PC */
#status { display: flex; align-items: center; gap: 8px; }
.offline-chip { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--amber) 55%, var(--border)); background: var(--amber-bg); color: var(--text); font-weight: 800; font-size: 14px; cursor: pointer; white-space: nowrap; }
.offline-chip .ic { width: 20px; height: 20px; color: var(--amber); }
.offline-chip small { font-weight: 600; color: var(--text-2); }
.tip-actions { display: flex; justify-content: flex-end; }
.search-wrap { display: flex; align-items: center; gap: 8px; }
.search-wrap .search { width: 0; padding-left: 0; padding-right: 0; border-width: 0; opacity: 0; transition: width .2s ease, opacity .2s ease, padding .2s ease; }
.search-wrap.open .search { width: min(320px, 50vw); padding-left: 14px; padding-right: 14px; border-width: 1px; opacity: 1; }
.search-wrap.open .search-btn { color: var(--brand-text); }
.icon-btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.icon-btn-primary:hover { filter: brightness(1.08); }
/* Búsqueda: con el campo abierto, sin la lupa; los botones de al lado no se aplastan */
.toolbar-right > * { flex: none; }
.search-wrap.open .search-btn { display: none; }
.search-wrap.open .search { width: min(300px, 32vw); }
/* Ficha nueva: se pulsa la propia foto, con la cámara en el centro (20/10/2026) */
.nm-photo-btn { position: relative; border: 0; padding: 0; background: none; border-radius: 20px; cursor: pointer; }
.nm-photo-btn .avatar { border: 2px dashed var(--border); }
.nm-photo-btn:hover .avatar { border-color: var(--text-3); }
.nm-photo-cam { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; }
.nm-photo-cam .ic { width: 34px; height: 34px; padding: 8px; box-sizing: content-box; border-radius: 50%; background: rgba(0, 0, 0, .55); }
/* Ficha sin foto: la cámara en el centro de la foto (con foto, en la esquina para no taparla) */
.hero-camera.hero-camera-center { right: auto; bottom: auto; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; }
/* Clases de hoy con el código de colores de la app: amarillo pocas plazas, rojo cancelada, gris terminada (20/10/2026) */
.disp-cls.now { border-left-color: var(--text); background: var(--surface-2); }
.disp-cls.now .disp-cls-sub { color: var(--text-2); font-weight: 500; }
/* «Ya están aquí» con la clase en grande arriba, solo en horizontal (22/10/2026) */
.disp-here-class { display: grid; gap: .6vh; padding: 1.6vh 1.6vw; border-radius: 2vh; background: var(--surface-2); border-left: .8vh solid var(--green); }
.disp-here-name { font: italic 800 6vh/1 var(--font-title); text-transform: uppercase; overflow-wrap: anywhere; }
.disp-here-sub { font-size: 2.6vh; font-weight: 600; color: var(--text-2); }
.disp-block.disp-with-class { grid-template-rows: auto auto 1fr auto; }
@media (orientation: portrait) {
  .disp-here-class { display: none; }
  .disp-block.disp-with-class { grid-template-rows: auto 1fr auto; }
}
/* Clase en curso: barra abajo que se llena hasta el final, con lo que queda (22/10/2026) */
.disp-cls-progress { grid-column: 1 / -1; display: grid; gap: .6vh; }
.disp-cls-bar { height: 1.1vh; min-height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; }
.disp-cls-fill { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--green); transition: width 1s linear; }
.disp-cls-left { font-size: 1.9vh; font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; }
.disp-cls.few { border-left-color: var(--amber); background: var(--amber-bg); }
.disp-cls.cancelled { border-left-color: var(--red); background: var(--red-bg); }
.disp-cls.cancelled .disp-cls-name, .disp-cls.cancelled .disp-cls-time { text-decoration: line-through; opacity: .8; }
.disp-cls.ended { opacity: .45; }
.disp-cls-tag { display: inline-block; margin-top: .6vh; padding: .3vh 1.1vh; border-radius: 99px; font-size: 1.7vh; font-weight: 700; background: var(--surface); color: var(--text-2); }
.disp-cls.now .disp-cls-tag { background: var(--text); color: var(--bg); }
.disp-cls.few .disp-cls-tag { background: var(--amber); color: #1B1300; }
.disp-cls.cancelled .disp-cls-tag { background: var(--red); color: #fff; }
.disp-cls-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ── Pantalla para el socio en un monitor vertical (20/10/2026): arriba clases | QR, debajo quién ha entrado a todo el
   ancho. Los tamaños cambian vh por vw para que en un monitor de 1080 × 1920 se vean igual que en horizontal. ─────── */
@media (orientation: portrait) {
  .disp-idle { padding: 3vw 2.6vh; gap: 2.4vw; }
  .disp-top { gap: 2vh; }
  .disp-top .disp-logo { width: 8vw; height: 8vw; border-radius: 2vw; }
  .disp-top .disp-welcome { font-size: 5vw; }
  .disp-top .disp-time { font-size: 7vw; }
  .disp-top .disp-date { font-size: 2.2vw; }
  .disp-body { gap: 2.4vw; }
  .disp-body > .disp-clases { grid-area: clases; }
  .disp-body > .disp-dentro { grid-area: dentro; }
  .disp-body > .disp-qr { grid-area: qr; }
  .disp-block { gap: 2vw; padding: 2.6vw 2.4vw; border-radius: 3vw; }
  .disp-h2 { font-size: 4vw; gap: 1.2vw; }
  .disp-count { font-size: 2.4vw; padding: .6vw 1.4vw; }
  .disp-empty { font-size: 2.8vw; }
  .disp-done { font-size: 2vw; }
  .disp-classes { gap: 1.2vw; }
  .disp-cls { gap: 2vw; padding: 1.4vw 1.8vw; border-radius: 2vw; border-left-width: .8vw; }
  .disp-cls-time { font-size: 4vw; }
  .disp-cls-time small { font-size: 1.8vw; }
  .disp-cls-name { font-size: 2.8vw; }
  .disp-cls-sub { font-size: 2vw; }
  .disp-cls-left { font-size: 1.9vw; }
  .disp-cls-bar { height: 1.1vw; }
  .disp-cls-tag { margin-top: .6vw; padding: .3vw 1.1vw; font-size: 1.7vw; }
  .disp-face { gap: .8vw; }
  .disp-face img, .disp-face-ini { border-radius: 2vw; border-width: .5vw; }
  .disp-face-name { font-size: clamp(1.4vw, calc(var(--tile, 18vw) * .13), 2.6vw); }
  .disp-block.disp-qr .disp-qr-code { border-radius: 2vw; padding: 1vw; }
  .disp-block.disp-qr .disp-qr-text { font-size: 2.2vw; gap: 1vw; }
  .disp-block.disp-qr .disp-qr-text strong { font-size: 3.6vw; }
  /* Pantalla de siempre: reloj, bienvenida y el QR con su texto debajo */
  .disp-classic .disp-top .disp-logo { width: 22vw; height: 22vw; border-radius: 5vw; }
  .disp-classic .disp-top .disp-time { font-size: 26vw; }
  .disp-classic .disp-top .disp-date { font-size: 4.4vw; }
  .disp-classic .disp-top .disp-welcome { font-size: 8vw; }
  .disp-classic .disp-block.disp-qr { grid-template-columns: auto; justify-items: center; gap: 3vw; }
  .disp-classic .disp-block.disp-qr .disp-qr-code { width: 55vw; height: 55vw; }
  .disp-classic .disp-block.disp-qr .disp-qr-text { text-align: center; max-width: 80vw; font-size: 3.4vw; }
  .disp-classic .disp-block.disp-qr .disp-qr-text strong { font-size: 6vw; }
  /* Al fichar: la foto arriba y los datos debajo */
  .disp-card { inset: 4vw; flex-direction: column; justify-content: center; gap: 4vw; padding: 6vw 5vw; border-width: .8vw; border-radius: 5vw; }
  .disp-photo { width: 62vw; height: 62vw; border-radius: 5vw; }
  .disp-info { gap: 2.4vw; justify-items: center; text-align: center; width: 100%; }
  .disp-state { gap: 2vw; font-size: 9vw; }
  .disp-state svg { width: 9vw; height: 9vw; }
  .disp-name { font-size: 8vw; }
  .disp-reason { font-size: 4.4vw; }
  .disp-class, .disp-checkin { gap: 1.4vw; font-size: 3.8vw; }
  .disp-class svg, .disp-checkin svg { width: 3.8vw; height: 3.8vw; }
  .disp-plan { gap: 2vw; width: 100%; text-align: left; }
  .disp-plan-item { padding: 2.4vw 3vw; border-radius: 3vw; border-left-width: 1.4vw; gap: 1vw; font-size: 3.4vw; }
  .disp-plan-name { font-size: 4vw; }
  .disp-usage { gap: 2vw; }
  .disp-bar { height: 2vw; max-width: none; }
  .disp-dot { width: 2.6vw; height: 2.6vw; }
  .disp-toast { bottom: 5vw; gap: 2vw; padding: 3vw 4vw; font-size: 4vw; border-radius: 3vw; max-width: 90vw; }
  .disp-toast svg { width: 5vw; height: 5vw; }
}
/* Número de llegada en la esquina de cada cara (1 = el primero en entrar, 20/10/2026) */
.disp-face-pic { position: relative; width: 100%; }
.disp-face-pic > img { display: block; }
.disp-face-num { position: absolute; top: calc(var(--tile, 18vh) * -.04); left: calc(var(--tile, 18vh) * -.04); min-width: calc(var(--tile, 18vh) * .26);
  height: calc(var(--tile, 18vh) * .26); padding: 0 calc(var(--tile, 18vh) * .05); box-sizing: border-box; display: grid; place-items: center;
  border-radius: 99px; background: var(--text); color: var(--bg); border: calc(var(--tile, 18vh) * .025) solid var(--bg);
  font: italic 800 calc(var(--tile, 18vh) * .15)/1 var(--font-title); }

/* ── Pantalla del socio sin nada que enseñar (21/10/2026, petición del usuario): fondo negro como el del logo, el logo
   bien grande y la hora y la fecha debajo. ───────────────────────────────────────────────────── */
.disp-root.disp-idle-only { background: #000; color: #fff; }
.disp-idle-only .disp-body { display: none; }
.disp-idle-only .disp-idle { grid-template-rows: 1fr; align-content: center; padding: 3vh 3vw; }
.disp-idle-only .disp-top { flex-direction: column; justify-content: center; gap: 1.5vh; height: 100%; }
/* Sin «¡Bienvenido!» (21/10/2026, petición del usuario: no dejaba lucir el logo). */
.disp-idle-only .disp-top .disp-welcome { display: none; }
.disp-idle-only .disp-top .disp-logo { order: 0; width: auto; height: min(64vh, 80vw); aspect-ratio: 1; border-radius: 0; box-shadow: none; }
.disp-idle-only .disp-top .disp-clock { order: 1; text-align: center; }
.disp-idle-only .disp-top .disp-time { font-size: 13vh; color: #fff; }
.disp-idle-only .disp-top .disp-date { font-size: 3vh; color: rgba(255, 255, 255, .7); }
.disp-idle-only .disp-fs { top: 2vh; bottom: auto; background: rgba(255, 255, 255, .12); color: #fff; }
@media (orientation: portrait) {
  .disp-idle-only .disp-idle { padding: 3vh 3vw; }
  .disp-idle-only .disp-top { gap: 2vh; }
  .disp-idle-only .disp-top .disp-logo { width: 96vw; height: auto; max-height: 62vh; }
  .disp-idle-only .disp-top .disp-time { font-size: 22vw; }
  .disp-idle-only .disp-top .disp-date { font-size: 4.4vw; }
}

/* Pantalla del socio girada (21/10/2026): un marco girado ocupa todo el monitor. */
.disp-frame { position: fixed; top: 0; left: 0; border: 0; transform-origin: top left; background: #000; }

/* Ajustes → Orientación de la pantalla del socio */
.orient-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.orient-opt { display: grid; justify-items: center; gap: 6px; padding: 12px 8px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-weight: 600; font-size: 13px; text-align: center; cursor: pointer; }
.orient-opt svg { width: 48px; height: 48px; }
.orient-opt:hover { border-color: var(--text-3); }
.orient-opt.orient-on { border: 2px solid var(--brand); color: var(--text); background: color-mix(in srgb, var(--brand) 8%, var(--surface)); }
.orient-opt:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

/* QR de la clase en el PC (22/10/2026) */

/* Felicitación de cumpleaños en la pantalla del socio (22/10/2026) */
.disp-bday { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 40%, #2a0b0b 0%, #000 70%); color: #fff; }
.disp-bday[hidden] { display: none; }
.disp-bday-confetti i { position: absolute; top: -4vh; width: 1.2vh; height: 2.2vh; border-radius: .3vh; animation-name: bday-fall; animation-timing-function: linear; animation-iteration-count: infinite; }
@keyframes bday-fall { to { transform: translateY(110vh) rotate(720deg); } }
.disp-bday-box { position: relative; z-index: 1; display: grid; justify-items: center; gap: 2vh; text-align: center; padding: 4vh; animation: bday-pop .6s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes bday-pop { from { transform: scale(.6); opacity: 0; } }
.disp-bday-photo { width: 30vh; height: 30vh; border-radius: 50%; object-fit: cover; border: .8vh solid #FFD23F; box-shadow: 0 0 6vh rgba(255, 210, 63, .5); }
.disp-bday-cake { font-size: 22vh; line-height: 1; }
.disp-bday-kicker { margin: 0; font-family: var(--font-title); font-style: italic; font-weight: 800; font-size: 9vh; color: #FFD23F; text-transform: uppercase; letter-spacing: .02em; }
.disp-bday-name { margin: 0; font-size: 12vh; line-height: 1; }
.disp-bday-text { margin: 0; font-size: 4vh; color: rgba(255, 255, 255, .85); }
/* Con «reducir movimiento» (p. ej. animaciones de Windows apagadas), el confeti queda quieto y repartido. */
@media (prefers-reduced-motion: reduce) { .disp-bday-confetti i { animation: none; top: var(--y); transform: rotate(35deg); } .disp-bday-box { animation: none; } }

/* QR de la clase en la puerta (22/10/2026): en el sitio del icono del QR, o al lado de la webcam */
.idle-top { display: flex; align-items: center; justify-content: center; gap: 32px; flex-wrap: wrap; max-width: 100%; }
.idle-class-qr { display: grid; justify-items: center; gap: 6px; text-align: center; }
.idle-class-qr-code { width: min(34vh, 300px); aspect-ratio: 1; background: #fff; border-radius: 16px; padding: 10px; box-shadow: var(--shadow, 0 4px 20px rgba(0, 0, 0, .15)); }
.idle-class-qr-code svg { width: 100%; height: 100%; display: block; }
.idle-class-qr strong { font-family: var(--font-title); font-style: italic; font-size: 22px; }
.idle-class-qr small { color: var(--text-2); }

/* Cuenta atrás del QR de la clase (23/10/2026) */
.idle-class-qr-count { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 20px; color: var(--accent, #E10600); }
.disp-qr-count { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 3vh; color: #FF2A1F; }
.icon-btn.active { color: var(--accent, #E10600); }

/* QR de la clase con el panel partido en dos (23/10/2026): QR grande a la izquierda, clase y cuenta atrás a la derecha */
.idle.idle-split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; justify-items: stretch;
  place-content: stretch; gap: clamp(16px, 3vw, 48px); padding: clamp(16px, 3vh, 36px); text-align: left; overflow: hidden;
}
.split-qr { min-width: 0; min-height: 0; height: 100%; display: grid; place-items: center; }
.split-qr-code {
  width: min(100%, calc(100vh - 230px)); aspect-ratio: 1; background: #fff; border-radius: 20px; padding: clamp(10px, 1.6vh, 20px);
  box-shadow: var(--shadow-lg, 0 4px 20px rgba(0, 0, 0, .15));
}
.split-qr-code svg { width: 100%; height: 100%; display: block; }
.split-info { min-width: 0; display: grid; align-content: center; gap: clamp(8px, 2vh, 22px); }
.split-label { text-transform: uppercase; letter-spacing: .12em; font-weight: 700; color: var(--text-2); font-size: clamp(13px, 1.3vw, 18px); }
.split-title { display: flex; align-items: baseline; gap: .4em; white-space: nowrap; overflow: hidden; font-size: clamp(30px, min(5vw, 9vh), 88px); }
.split-class { margin: 0; font-size: 1em; line-height: 1.05; }
.split-time { font-family: var(--font-title); font-style: italic; font-weight: 800; font-size: .8em; color: var(--text-2); font-variant-numeric: tabular-nums; }
.split-count { margin: 0; font-variant-numeric: tabular-nums; font-weight: 800; font-size: clamp(26px, min(3.6vw, 7vh), 64px); line-height: 1.1; color: var(--brand-text, #E10600); }
.split-how { margin: 0; font-size: clamp(16px, min(1.6vw, 3vh), 26px); color: var(--text); }
.split-door { margin: 0; font-size: clamp(14px, min(1.2vw, 2.4vh), 20px); color: var(--text-2); }
@media (max-width: 900px) {
  .idle.idle-split { grid-template-columns: 1fr; text-align: center; }
  .split-qr-code { width: min(100%, 40vh); }
}
/* La webcam debajo de la cuenta atrás (23/10/2026): cabe en lo que queda de alto */
.split-info .split-cam { width: min(100%, calc((100vh - 480px) * 4 / 3)); min-width: 220px; margin: 0; }
.split-cam-btn { justify-self: start; }
@media (max-width: 900px) { .split-title { justify-content: center; } .split-cam-btn { justify-self: center; } .split-info .split-cam { justify-self: center; } }
/* Cuenta atrás de la puerta en varias líneas (23/10/2026) */
.split-count { display: grid; gap: 2px; }
.split-count-title { font-size: 1em; line-height: 1.05; }
.split-count-sub { font-size: .42em; font-weight: 600; color: var(--text-2); line-height: 1.2; }
.split-count-detail { font-size: .62em; line-height: 1.15; }
/* Con la webcam encendida (23/10/2026): más ancho para la derecha y la cámara ocupa todo el alto que queda */
.idle.idle-split.with-cam { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
.idle-split.with-cam .split-info { height: 100%; min-height: 0; display: flex; flex-direction: column; justify-content: flex-start; gap: clamp(6px, 1.4vh, 16px); }
.idle-split.with-cam .split-how { font-size: clamp(14px, min(1.2vw, 2.2vh), 20px); }
.split-info .split-cam { flex: 1 1 0; min-height: 0; width: 100%; min-width: 0; display: flex; justify-content: flex-start; }
.split-cam .cam-dock.cam-center { width: auto; height: 100%; max-width: 100%; aspect-ratio: 4 / 3; }
@media (max-width: 900px) { .split-cam { justify-content: center; } }
/* Tarjetas de «Clases de hoy» (23/10/2026): el nombre al lado de la hora o, si no cabe, arriba a todo el ancho;
   «Termina a las …» siempre debajo de lo que queda */
.disp-cls { grid-template-areas: 'time name' 'time info' 'prog prog'; row-gap: .4vh; }
.disp-cls.name-top { grid-template-areas: 'name name' 'time info' 'prog prog'; }
.disp-cls-time { grid-area: time; }
.disp-cls-name { grid-area: name; min-width: 0; align-self: end; }
.disp-cls-info { grid-area: info; align-self: start; }
.disp-cls-progress { grid-area: prog; }
.disp-cls-left { display: grid; }
.disp-cls-ends { font-weight: 500; }
/* Con la webcam encendida (23/10/2026, petición del usuario): solo la clase y la cuenta atrás, sin textos de ayuda, y la
   webcam lo más grande posible, acabando a la altura de la parte baja del QR */
.idle-split.with-cam .split-label, .idle-split.with-cam .split-how, .idle-split.with-cam .split-door, .idle-split.with-cam .split-count-sub { display: none; }
.idle-split.with-cam .split-info { height: auto; align-self: center; }
.idle-split.with-cam .split-cam { justify-content: flex-start; align-items: flex-end; }
/* Felicitación de cumpleaños (23/10/2026, rediseñada): tarta con velas, foto, texto grande y confeti en un lienzo.
   Vale para la pantalla del socio y para la pantalla principal del PC (unidades vmin). */
.bday { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; overflow: hidden; color: #fff; cursor: pointer;
  background: radial-gradient(ellipse at 50% 35%, #4a0d0d 0%, #1a0505 45%, #000 80%); animation: bday-in .5s ease-out; }
.bday.bday-out { animation: bday-fade .4s ease-in forwards; }
.bday-glow { position: absolute; inset: -20%; background: conic-gradient(from 0deg, transparent 0 8%, rgba(255, 210, 63, .08) 8% 12%, transparent 12% 20%, rgba(225, 6, 0, .08) 20% 24%, transparent 24% 33%, rgba(255, 210, 63, .08) 33% 37%, transparent 37% 45%, rgba(225, 6, 0, .08) 45% 49%, transparent 49% 58%, rgba(255, 210, 63, .08) 58% 62%, transparent 62% 70%, rgba(225, 6, 0, .08) 70% 74%, transparent 74% 83%, rgba(255, 210, 63, .08) 83% 87%, transparent 87%);
  animation: bday-spin 40s linear infinite; }
.bday-confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.bday-box { position: relative; z-index: 1; display: grid; justify-items: center; gap: 1.6vmin; text-align: center; padding: 3vmin; animation: bday-pop .7s cubic-bezier(.2, 1.4, .4, 1); }
.bday-art { position: relative; display: grid; place-items: center; }
.bday-cake { width: 42vmin; height: 42vmin; filter: drop-shadow(0 2vmin 4vmin rgba(0, 0, 0, .6)); animation: bday-bob 3s ease-in-out infinite; }
.bday-photo { position: absolute; right: -14vmin; top: 4vmin; width: 20vmin; height: 20vmin; border-radius: 50%; object-fit: cover; border: .8vmin solid #FFD23F; box-shadow: 0 0 5vmin rgba(255, 210, 63, .55); animation: bday-pop .9s .2s both cubic-bezier(.2, 1.4, .4, 1); }
.bday-flame { animation: bday-flicker .35s ease-in-out infinite alternate; }
.bday-kicker { margin: 0; font-family: var(--font-title); font-style: italic; font-weight: 800; font-size: 9vmin; line-height: 1; text-transform: uppercase; letter-spacing: .02em;
  background: linear-gradient(90deg, #FFD23F, #FFF3B0, #FFB703, #FFD23F); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: bday-shine 2.5s linear infinite; text-shadow: none; }
.bday-name { margin: 0; font-size: 13vmin; line-height: 1; text-shadow: 0 .6vmin 3vmin rgba(225, 6, 0, .7); }
.bday-text { margin: 0; font-size: 3.6vmin; color: rgba(255, 255, 255, .88); }
@keyframes bday-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes bday-fade { to { opacity: 0; } }
@keyframes bday-spin { to { transform: rotate(360deg); } }
@keyframes bday-bob { 50% { transform: translateY(-1.2vmin) rotate(-1deg); } }
@keyframes bday-flicker { from { transform: scale(1, 1) rotate(-3deg); opacity: .95; } to { transform: scale(.9, 1.12) rotate(3deg); opacity: 1; } }
@keyframes bday-shine { to { background-position: -200% 0; } }
/* Navidad (23/10/2026, migración 185): guirnalda a todo el ancho arriba y nieve por encima de todo, sin tapar los clics */
.xmas-snow { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 20; pointer-events: none; }
.xmas-garland { position: fixed; left: 0; right: 0; top: 0; z-index: 21; pointer-events: none; line-height: 0; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .35)); }
.xmas-garland svg { display: block; width: 100%; height: auto; overflow: visible; }
.xmas-bulb { animation: xmas-blink 2.2s ease-in-out infinite; }
@keyframes xmas-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
/* Con la Navidad, hueco arriba para la guirnalda: no tapa la cabecera del PC ni el reloj de la pantalla del socio */
/* En el PC cuelga debajo de la cabecera, en un hueco fijo de 56 px encima del contenido. */
/* Hueco justo para la guirnalda (52 px con las bombillas) sin que salga la barra de desplazamiento: lo que gana arriba
   lo devuelven los márgenes interiores del panel de la puerta (23/10/2026, petición del usuario). */
html.season-xmas .main { padding-top: 58px; }
html.season-xmas .idle { gap: 8px; padding: 14px 24px; }
html.season-xmas .idle-cam { margin-top: 6px; }
/* Salvapantallas con Navidad: «¡Feliz Navidad!» fijo arriba (el reloj se mueve por debajo). */
.saver-xmas { position: absolute; left: 0; right: 0; display: grid; justify-items: center; gap: 4px; text-align: center; color: #fff; pointer-events: none; }
.saver-xmas-title { font: italic 800 clamp(44px, 6vw, 96px)/1 var(--font-title); text-transform: uppercase; color: #FFD23F; text-shadow: 0 0 24px rgba(225, 6, 0, .55); }
.saver-xmas-text { font-size: clamp(16px, 1.6vw, 24px); color: #ddd; max-width: 80vw; }
html.season-xmas .disp-idle, html.season-xmas .disp-idle-only .disp-idle { padding-top: 11vh; }
/* Pantalla del socio en espera con Navidad: el mensaje arriba y el logo algo más pequeño para que quepa todo */
.disp-xmas-msg { display: none; }
html.season-xmas .disp-idle-only .disp-xmas-msg { display: grid; order: -1; justify-items: center; gap: .6vh; text-align: center; }
html.season-xmas .disp-idle-only .disp-top .disp-logo { height: min(36vh, 60vw); }
.disp-xmas-title { font: italic 800 15vh/1 var(--font-title); text-transform: uppercase; color: #FFD23F; text-shadow: 0 0 3vh rgba(225, 6, 0, .55); }
.disp-xmas-text { font-size: 3.4vh; color: rgba(255, 255, 255, .85); max-width: 80vw; }
/* La nieve por detrás del panel de la puerta (con el QR) y del QR de la pantalla del socio: no estorba al escanear */
html.season-xmas .idle, html.season-xmas .result { position: relative; z-index: 22; }
html.season-xmas .disp-qr { position: relative; z-index: 22; }
/* Con el salvapantallas (z 25), la nieve y la guirnalda por encima de él */
html.saver-on .xmas-snow, html.saver-on .xmas-garland { z-index: 26; }
html.season-xmas .disp-card { z-index: 22; }
/* «Equipo del box» plegable en Personas (23/10/2026) */
.members-fold { background: none; border: 0; padding: 0; color: inherit; cursor: pointer; text-align: left; }
.members-fold .ic { width: 20px; height: 20px; transform: rotate(-90deg); transition: transform .15s; }
.members-fold.open .ic { transform: none; }
.members-fold:focus-visible { outline: 3px solid var(--brand); outline-offset: 4px; border-radius: 8px; }
html.season-xmas .idle-cam-slot { width: min(560px, 46vw, 46vh); }
html.season-xmas .idle-rings { width: clamp(100px, min(22vw, 26vh), 280px); }

/* ── Publicidad del box (23/10/2026, petición del cliente, src/promo.ts): pase de diapositivas en el salvapantallas y
   en la pantalla del socio en reposo. Todo en unidades del contenedor: sirve en vertical, horizontal y en miniatura. */
.promo { position: absolute; inset: 0; container-type: size; overflow: hidden; background: #000; color: #fff; font-family: 'Inter', system-ui, sans-serif; text-align: left; }
.promo-bg { position: absolute; inset: -4%; background: #000 center / cover no-repeat; opacity: 0; transition: opacity 1.6s ease; will-change: transform, opacity; }
.promo-bg.on { opacity: 1; animation: promo-kb var(--kb-dur, 14s) ease-out forwards; }
.promo-bg[data-kb="1"].on { animation-name: promo-kb1; }
.promo-bg[data-kb="2"].on { animation-name: promo-kb2; }
.promo-bg[data-kb="3"].on { animation-name: promo-kb3; }
@keyframes promo-kb { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.14) translate(-2%, -1%); } }
@keyframes promo-kb1 { from { transform: scale(1.14) translate(2%, 1%); } to { transform: scale(1.03) translate(0, 0); } }
@keyframes promo-kb2 { from { transform: scale(1.04) translate(2%, -1%); } to { transform: scale(1.16) translate(-1%, 2%); } }
@keyframes promo-kb3 { from { transform: scale(1.12) translate(-2%, 2%); } to { transform: scale(1.02) translate(1%, -1%); } }
.promo-shade { position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .35) 22%, rgba(0, 0, 0, .45) 55%, rgba(0, 0, 0, .9) 100%),
    linear-gradient(125deg, rgba(225, 6, 0, .38) 0%, rgba(225, 6, 0, 0) 45%); }
.promo.promo-nophoto .promo-bg { display: none; }
.promo.promo-nophoto { background:
  repeating-linear-gradient(115deg, rgba(255, 255, 255, .025) 0 2cqmin, transparent 2cqmin 6cqmin),
  radial-gradient(circle at 85% 10%, #5a0400 0%, transparent 55%),
  radial-gradient(circle at 0% 100%, #3a0200 0%, transparent 50%), #070707; }

.promo-top { position: absolute; left: 6cqw; right: 6cqw; top: 4cqh; display: flex; align-items: center; justify-content: space-between; z-index: 2; }
.promo-logo { height: clamp(22px, 7cqmin, 150px); width: auto; display: block; filter: drop-shadow(0 .4cqmin 1.4cqmin rgba(0, 0, 0, .75)); }
.promo-clock { font: italic 800 clamp(16px, 6cqmin, 120px)/1 'Barlow Condensed', sans-serif; letter-spacing: .02em; text-shadow: 0 .3cqmin 1.2cqmin rgba(0, 0, 0, .6); }

.promo-stage { position: absolute; left: 6cqw; right: 6cqw; top: 15cqh; bottom: 9cqh; z-index: 1; }
.promo-slide { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 3.2cqh;
  transition: opacity .8s ease, transform .9s cubic-bezier(.2, .8, .2, 1), filter .9s ease; }
.promo-slide > *, .promo-grid > *, .promo-classes > *, .promo-week > * { transition: opacity .7s ease, transform .8s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i, 0) * 90ms + 150ms); }
.promo-enter > *, .promo-enter .promo-grid > *, .promo-enter .promo-classes > *, .promo-enter .promo-week > * { opacity: 0; transform: translateY(3cqh); }
.promo[data-tr="fundido"] .promo-enter, .promo[data-tr="fundido"] .promo-leave { opacity: 0; }
.promo[data-tr="deslizar"] .promo-enter { opacity: 0; transform: translateX(30cqw); }
.promo[data-tr="deslizar"] .promo-leave { opacity: 0; transform: translateX(-30cqw); }
.promo[data-tr="zoom"] .promo-enter { opacity: 0; transform: scale(.88); filter: blur(1.2cqmin); }
.promo[data-tr="zoom"] .promo-leave { opacity: 0; transform: scale(1.1); filter: blur(1.2cqmin); }
.promo-leave > * { transition-delay: 0s !important; }

.promo-kicker { font: 600 clamp(9px, 2.6cqmin, 48px)/1.2 'Inter', sans-serif; letter-spacing: .28em; text-transform: uppercase; color: #FF2A1F; }
.promo-title { margin: 0; font: italic 800 clamp(26px, 13cqmin, 260px)/.9 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .005em; text-shadow: 0 .6cqmin 2.4cqmin rgba(0, 0, 0, .55); }
.promo-sub { margin: 0; font-size: clamp(11px, 3.2cqmin, 60px); color: #e6e6e6; max-width: 40ch; }
.promo-head { display: grid; gap: 1.4cqh; }

.promo-hero { margin: 0; display: grid; font: italic 800 clamp(40px, 22cqmin, 420px)/.84 'Barlow Condensed', sans-serif; text-transform: uppercase; text-shadow: 0 1cqmin 3cqmin rgba(0, 0, 0, .55); }
.promo-hero-red { color: #FF2A1F; }
.promo-cover-logo { width: min(78cqw, 70cqh); height: auto; display: block; margin-bottom: 1cqh; filter: drop-shadow(0 1cqmin 3cqmin rgba(0, 0, 0, .7)); }
/* En horizontal (23/10/2026): portada en dos columnas, el texto a la izquierda y el logo grande a la derecha. */
@container (orientation: landscape) {
  .promo-cover { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); align-content: center; column-gap: 5cqw; row-gap: 2.4cqh; }
  .promo-cover > * { grid-column: 1; justify-self: start; }
  .promo-cover-logo { grid-column: 2; grid-row: 1 / span 6; align-self: center; width: 100%; margin: 0; }
  .promo-stage { top: 17cqh; bottom: 11cqh; }
}
/* En la portada, el logo pequeño de arriba se aparta (ya está el grande). */
.promo-logo { transition: opacity .6s ease; }
.promo[data-slide="portada"] .promo-logo { opacity: 0; }
@container (orientation: landscape) { .promo-hero { font-size: clamp(36px, 14cqmin, 300px); } .promo-cover { gap: 2.4cqh; } .promo-title { font-size: clamp(24px, 10cqmin, 220px); } }
.promo-bar { width: 22cqmin; height: 1.1cqmin; background: #E10600; border-radius: 1cqmin; }
.promo-cover-list { margin: 0; font: italic 700 clamp(14px, 4.4cqmin, 84px)/1.15 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .03em; color: #f2f2f2; max-width: 30ch; }
.promo-pill { align-self: flex-start; padding: 1.6cqmin 3.6cqmin; border-radius: 99cqmin; background: #E10600; font-size: clamp(12px, 3.6cqmin, 68px); box-shadow: 0 1cqmin 4cqmin rgba(225, 6, 0, .45); }
.promo-pill strong { font: italic 800 1.35em/1 'Barlow Condensed', sans-serif; margin-left: .2em; }

.promo-grid { display: grid; gap: 2.4cqmin; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@container (orientation: landscape) { .promo-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .promo-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.promo-card { display: grid; gap: 1.2cqmin; align-content: start; padding: 3.4cqmin 3.6cqmin; border-radius: 3cqmin;
  background: linear-gradient(160deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .05)); border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2); box-shadow: 0 1.4cqmin 5cqmin rgba(0, 0, 0, .35); }
.promo-big { display: flex; align-items: baseline; gap: 1.4cqmin; flex-wrap: wrap; }
.promo-big-n { font: italic 800 clamp(30px, 14cqmin, 260px)/.85 'Barlow Condensed', sans-serif; color: #FF2A1F; }
.promo-big-u { font: 600 clamp(10px, 2.8cqmin, 52px)/1.1 'Inter', sans-serif; text-transform: uppercase; letter-spacing: .08em; color: #ddd; max-width: 9ch; }
.promo-big-name { font: italic 800 clamp(18px, 6cqmin, 110px)/.95 'Barlow Condensed', sans-serif; text-transform: uppercase; }
.promo-price { display: flex; align-items: baseline; gap: .8cqmin; padding-top: 1.2cqmin; border-top: 1px solid rgba(255, 255, 255, .18); }
.promo-price span { font: italic 800 clamp(22px, 9cqmin, 170px)/1 'Barlow Condensed', sans-serif; }
.promo-price small { font-size: clamp(10px, 2.8cqmin, 52px); color: #ccc; }
.promo-note { font-size: clamp(9px, 2.4cqmin, 44px); color: #cfcfcf; }

.promo-classes { display: grid; gap: 2cqmin; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@container (orientation: landscape) { .promo-classes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.promo-class { position: relative; display: grid; gap: .8cqmin; padding: 3cqmin 3cqmin 3cqmin 4.4cqmin; border-radius: 2.4cqmin; overflow: hidden;
  background: linear-gradient(160deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .04)); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.promo-class::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1.2cqmin; background: var(--c, #E10600); }
.promo-class-name { font: italic 800 clamp(16px, 6cqmin, 110px)/.95 'Barlow Condensed', sans-serif; text-transform: uppercase; }
.promo-class-sub { font-size: clamp(9px, 2.4cqmin, 44px); color: #d6d6d6; }

.promo-week { display: grid; gap: 1.4cqmin; }
@container (orientation: landscape) { .promo-week { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.promo-day { display: grid; grid-template-columns: minmax(14cqmin, max-content) minmax(0, 1fr); gap: 2cqmin; align-items: center; padding: 1.8cqmin 2.6cqmin; border-radius: 2cqmin;
  background: rgba(0, 0, 0, .38); border: 1px solid rgba(255, 255, 255, .12); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.promo-day-name { font: italic 800 clamp(14px, 5cqmin, 96px)/1 'Barlow Condensed', sans-serif; text-transform: uppercase; color: #FF2A1F; }
.promo-day-body { display: grid; gap: .8cqmin; }
.promo-day-class { font: italic 700 clamp(11px, 3.4cqmin, 64px)/1 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .04em; }
.promo-times { display: flex; flex-wrap: wrap; gap: 1cqmin; }
.promo-time { padding: .5cqmin 1.4cqmin; border-radius: 99cqmin; background: rgba(255, 255, 255, .14); font: 600 clamp(9px, 2.6cqmin, 48px)/1.3 'Inter', sans-serif; font-variant-numeric: tabular-nums; }

.promo-contact-body { display: grid; gap: 4cqmin; align-items: center; }
@container (orientation: landscape) { .promo-contact-body { grid-template-columns: auto minmax(0, 1fr); } }
.promo-qr { justify-self: start; display: grid; justify-items: center; gap: 1.4cqmin; padding: 2.4cqmin; border-radius: 3cqmin; background: #fff; color: #000; box-shadow: 0 1.4cqmin 6cqmin rgba(0, 0, 0, .5); }
.promo-qr-svg { width: clamp(80px, 34cqmin, 640px); height: auto; display: block; }
.promo-qr-label { font: italic 800 clamp(12px, 4cqmin, 76px)/1 'Barlow Condensed', sans-serif; text-transform: uppercase; }
.promo-contact-list { display: grid; gap: 2.4cqmin; }
.promo-contact-row { display: grid; gap: .6cqmin; padding-left: 2.4cqmin; border-left: .8cqmin solid #E10600; }
.promo-contact-k { font: 600 clamp(9px, 2.4cqmin, 44px)/1 'Inter', sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #FF2A1F; }
.promo-contact-v { font-size: clamp(12px, 3.8cqmin, 70px); line-height: 1.25; }

.promo-foot { position: absolute; left: 6cqw; right: 6cqw; bottom: 4cqh; z-index: 2; }
.promo-dots { display: flex; gap: 1.2cqmin; }
.promo-dot { flex: 1; height: max(3px, .7cqmin); border-radius: 1cqmin; background: rgba(255, 255, 255, .25); overflow: hidden; }
.promo-dot i { display: block; height: 100%; width: 0; background: #fff; }
.promo-dot.done i { width: 100%; }
.promo-dot.now i { animation: promo-dot var(--dur, 10s) linear forwards; }
@keyframes promo-dot { to { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .promo-bg.on { animation: none; } .promo-slide, .promo-slide > * { transition: opacity .4s ease !important; transform: none !important; filter: none !important; } }

/* Dónde sale: salvapantallas del PC, pantalla del socio en reposo y la vista previa de Ajustes. */
.disp-promo { position: absolute; inset: 0; }
.disp-promo[hidden] { display: none; }
.promo-preview-wrap { display: flex; gap: 20px; align-items: flex-end; flex-wrap: wrap; margin: 6px 0 10px; }
.promo-preview { position: relative; flex: none; box-sizing: content-box; width: 216px; height: 384px; border-radius: 14px; overflow: hidden; border: 3px solid var(--border); background: #000; box-shadow: var(--shadow-lg); }
.promo-preview.land { width: 384px; height: 216px; }
.promo-preview-screen { position: absolute; left: 0; top: 0; width: 1080px; height: 1920px; transform: scale(.2); transform-origin: 0 0; }
.promo-preview.land .promo-preview-screen { width: 1920px; height: 1080px; }
.promo-preview-cap { margin-top: 6px; font-size: 13px; color: var(--text-2); text-align: center; }
.promo-full { position: fixed; inset: 0; z-index: 70; cursor: pointer; background: #000; }

/* ── Logo sin el fondo negro (23/10/2026, petición del usuario): en el tema oscuro y sobre negro, el logo recortado
   (icons/logo-sin-fondo.svg); en el tema claro sigue el del cuadro negro, que se lee mejor sobre gris claro. El del
   centro del QR de inicio de sesión no cambia (va sobre el QR blanco). */
:root[data-theme="dark"] .brand-logo { content: url('icons/logo-sin-fondo.svg'); width: auto; height: 34px; border-radius: 0; }
:root[data-theme="dark"] .logo-mark { content: url('icons/logo-sin-fondo.svg'); width: 160px; height: auto; border-radius: 0; box-shadow: none; }
:root[data-theme="dark"] .pin-card .logo-mark { width: clamp(96px, 18vh, 160px); height: auto; }
:root[data-theme="dark"] .disp-top .disp-logo { content: url('icons/logo-sin-fondo.svg'); width: auto; height: 6vh; border-radius: 0; box-shadow: none; }
:root[data-theme="dark"] .disp-classic .disp-top .disp-logo { width: auto; height: 10vh; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand-logo { content: url('icons/logo-sin-fondo.svg'); width: auto; height: 34px; border-radius: 0; }
  :root:not([data-theme="light"]) .logo-mark { content: url('icons/logo-sin-fondo.svg'); width: 160px; height: auto; border-radius: 0; box-shadow: none; }
  :root:not([data-theme="light"]) .pin-card .logo-mark { width: clamp(96px, 18vh, 160px); height: auto; }
  :root:not([data-theme="light"]) .disp-top .disp-logo { content: url('icons/logo-sin-fondo.svg'); width: auto; height: 6vh; border-radius: 0; box-shadow: none; }
  :root:not([data-theme="light"]) .disp-classic .disp-top .disp-logo { width: auto; height: 10vh; }
}
@media (orientation: portrait) {
:root[data-theme="dark"] .disp-top .disp-logo { width: 20vw; height: auto; }
  :root[data-theme="dark"] .disp-classic .disp-top .disp-logo { width: 62vw; height: auto; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .disp-top .disp-logo { width: 20vw; height: auto; }
    :root:not([data-theme="light"]) .disp-classic .disp-top .disp-logo { width: 62vw; height: auto; }
  }
}
/* La pantalla del socio en espera es siempre negra: logo sin fondo con cualquier tema. */
:root:root .disp-root.disp-idle-only .disp-top img.disp-logo { content: url('icons/logo-sin-fondo.svg'); width: min(84vw, 120vh); height: auto; max-height: 48vh; aspect-ratio: auto; object-fit: contain; }
@media (orientation: portrait) { :root:root .disp-root.disp-idle-only .disp-top img.disp-logo { width: 92vw; height: auto; max-height: 40vh; } }
:root:root.season-xmas .disp-root.disp-idle-only .disp-top img.disp-logo { max-height: 30vh; }

/* Prueba del llavero (24/10/2026): barra de tiempo por velocidad, resultados y envío al desarrollador. */
.fob-test h3 { margin: 18px 0 8px; font-size: 15px; }
.fob-run { display: grid; gap: 12px; margin-top: 8px; }
.fob-step { margin: 0; font-size: 16px; }
.fob-now { margin: 0; font-size: 20px; font-weight: 700; color: var(--brand-text); display: flex; align-items: center; gap: 8px; }
.fob-bar { height: 18px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.fob-bar-fill { height: 100%; width: 0; background: var(--brand); transition: width .1s linear; }
.fob-live { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.fob-live .kv-value { font-size: 20px; font-weight: 700; }
.fob-result { margin-top: 16px; }
.fob-verdict { font-size: 18px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.fob-verdict.warn { color: var(--amber); }
.fob-table { width: 100%; }
.fob-table td, .fob-table th { white-space: nowrap; }
.fob-best td { font-weight: 700; background: var(--green-bg); }
.fob-send { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); display: flex; justify-content: center; }
.fob-send .btn-lg { font-size: 17px; padding: 14px 22px; }
.fob-more { margin-top: 16px; }
.fob-more summary { cursor: pointer; font-weight: 600; }
.table-wrap { overflow-x: auto; }