/* RHEO PRS. Oscura primero: se usa de noche, en el boliche. Diseño en diseno/pantallas.html. */
:root {
  --bg: #120D15;
  --surface: #1B1520;
  --surface-2: #261D2C;
  --line: #34293B;
  --ink: #F5EEF3;
  --muted: #A596AB;
  --faint: #908498;
  --accent: #FF4F84;
  --accent-ink: #22060F;
  --ok: #43D99A;
  --warn: #FFB05C;
  --bad: #FF6B6B;
  --shadow: 0 22px 44px -22px rgba(255, 79, 132, .55);
  /* El azul del promedio y del team Ivo: claro sobre el fondo oscuro, oscuro sobre el claro. */
  --azul: #8EAFFF;
  --display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    /* **El claro va en rosa muy clarito, no en blanco** (Max, sep 2026: "le pondría un fondo no tan
       blanco, más bien tirando a un rosa muy clarito, para que tenga un poco más de onda"). Es el
       rosa de RHEO bajado casi a papel; medido, todo el texto sigue arriba del mínimo de contraste
       (lo más justo, `--faint` sobre `--surface-2`, da 4,66). */
    --bg: #F7DCE6; --surface: #FEF4F7; --surface-2: #F4DAE4; --line: #E7C6D5;
    --ink: #1B1220; --muted: #5C5163; --faint: #605568; --accent: #F2386F; --accent-ink: #24050F;
    --ok: #07603B; --warn: #7C3D04; --accent-texto: #B10C40; --bad: #B02020; --azul: #2A55B4; --shadow: 0 20px 36px -22px rgba(242, 56, 111, .55);
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #F7DCE6; --surface: #FEF4F7; --surface-2: #F4DAE4; --line: #E7C6D5;
  --ink: #1B1220; --muted: #5C5163; --faint: #605568; --accent: #F2386F; --accent-ink: #24050F;
  --ok: #07603B; --warn: #7C3D04; --accent-texto: #B10C40; --bad: #B02020; --azul: #2A55B4; --shadow: 0 20px 36px -22px rgba(242, 56, 111, .55);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  min-height: 100svh;
  isolation: isolate;
}
/* Dos luces lentas y una trama casi imperceptible: ambiente de club, sin video ni assets
   extras. Están detrás de todo y solo animan transform/opacity, lo más barato en celular. */
body::before, body::after { content: ""; position: fixed; pointer-events: none; z-index: 0; }
body::before {
  inset: -22vmax;
  background:
    radial-gradient(circle at 20% 25%, rgba(255, 79, 132, .18), transparent 25%),
    radial-gradient(circle at 78% 63%, rgba(103, 88, 255, .14), transparent 28%),
    radial-gradient(circle at 45% 110%, rgba(255, 176, 92, .08), transparent 27%);
  filter: blur(18px);
  animation: luces-club 18s ease-in-out infinite alternate;
}
body::after {
  inset: 0;
  opacity: .055;
  background-image: radial-gradient(rgba(255,255,255,.65) .55px, transparent .75px);
  background-size: 4px 4px;
  mix-blend-mode: soft-light;
}
#root { position: relative; z-index: 1; }
@keyframes luces-club { from { transform: translate3d(-2%, -1%, 0) scale(1); } to { transform: translate3d(3%, 2%, 0) scale(1.08); } }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }

/* Al abrir la app instalada, RHEO ocupa la pantalla un instante, como una marquesina que se
   enciende antes de entrar al boliche. La capa se destruye sola: no tapa ninguna interacción. */
.apertura { position: fixed; inset: 0; z-index: 50; display: grid; place-content: center; overflow: hidden; isolation: isolate; contain: layout paint; background: #120D15; animation: apertura-sale var(--salida-duracion, .27s) cubic-bezier(.3,.8,.35,1) var(--salida-demora, 3.78s) forwards; }
.apertura.preparando, .apertura.preparando *, .apertura.preparando::before, .apertura.preparando::after { animation-play-state: paused !important; }
/* La pantalla de atrás espera su turno, sin competir por cuadros mientras está cubierta. */
body.abriendo .app *, body.abriendo .app *::before, body.abriendo .app *::after { animation-play-state: paused !important; }
.apertura::before { content: ""; position: absolute; inset: -30%; z-index: 0; background: radial-gradient(circle, rgba(255, 79, 132, .68), transparent 27%), radial-gradient(circle at 70% 68%, rgba(91, 141, 239, .34), transparent 26%); filter: blur(22px); animation: apertura-luz var(--luz-duracion, 4.5s) ease-out both; }
.apertura::after { content: ""; position: absolute; inset: 15% -25%; z-index: 0; border-radius: 50%; background: conic-gradient(from 30deg, transparent 0 15%, rgba(255, 85, 45, .24) 24%, transparent 38% 60%, rgba(163, 71, 255, .2) 74%, transparent 88%); filter: blur(36px); animation: apertura-fondo var(--fondo-duracion, 4.25s) ease-out both; }
.apertura-tormenta { position: absolute; inset: -25%; z-index: 1; opacity: 0; pointer-events: none; background: radial-gradient(circle, #ff4f84 0 1px, transparent 2px) 3px 7px / 31px 37px, radial-gradient(circle, #ff9f43 0 1px, transparent 2px) 13px 19px / 47px 43px, radial-gradient(circle, #88a7ff 0 1px, transparent 2px) 23px 5px / 61px 53px; mix-blend-mode: screen; animation: apertura-tormenta var(--tormenta-duracion, 4.45s) cubic-bezier(.16,.8,.25,1) both; }
.apertura-destello { position: absolute; inset: -35%; z-index: 1; pointer-events: none; background: radial-gradient(circle, rgba(255,243,220,.96) 0 1%, rgba(255,102,61,.62) 6%, rgba(255,79,132,.2) 19%, transparent 41%); mix-blend-mode: screen; animation: apertura-destello var(--destello-duracion, 4.05s) cubic-bezier(.18,.8,.24,1) both; }
.apertura-ceniza { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; pointer-events: none; }
/* El corte: cuando los pedazos pasan al lado de la cámara, esto llena la pantalla de luz y
   sobre esa luz aparece la app. Es lo que hace que se sienta "me tapó todo y entré". */
.apertura-corte { position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 46%, #fff6f0 0%, #ff5b7f 38%, #7a1030 72%, #240c16 100%);
  animation: apertura-corte var(--corte-duracion, 1.7s) cubic-bezier(.6,0,.85,.3) both; }
@keyframes apertura-corte { 0%, 78% { opacity: 0; } 94% { opacity: .85; } to { opacity: 1; } }
.apertura-halo { position: absolute; top: 50%; left: 50%; width: min(94vw, 600px); aspect-ratio: 1; z-index: 1; border-radius: 50%; border: 1px solid rgba(255, 110, 65, .3); box-shadow: 0 0 60px 18px rgba(255,79,132,.2), inset 0 0 40px rgba(255,100,45,.18); animation: apertura-aro var(--aro-duracion, 3.7s) cubic-bezier(.16,.8,.3,1) both; }
.apertura-marca { position: relative; z-index: 2; width: min(78vw, 460px); aspect-ratio: 560 / 325; transform-style: preserve-3d; }
.apertura-marca img { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 28px rgba(255, 79, 132, .98)) drop-shadow(0 16px 28px rgba(0,0,0,.65)); }
.apertura-principal { animation: apertura-logo var(--logo-duracion, 3.8s) cubic-bezier(.16,.88,.25,1) both; }
.apertura span { position: relative; z-index: 2; margin-top: 10px; padding-left: .3em; color: rgba(245,238,243,.94); font-family: var(--display); font-size: clamp(25px, 7.4vw, 40px); font-weight: 800; letter-spacing: .3em; text-align: center; animation: apertura-prs var(--logo-duracion, 3.8s) ease both; }
/* El logo llega, se pasa un poco, se asienta y **queda quieto y entero** un buen rato (del 25%
   al 54%, más de medio segundo): recién ahí da el tirón y revienta. Lo pidió Max así. */
@keyframes apertura-logo {
  from { opacity: 0; transform: scale(.62) translateY(14px); }
  17% { opacity: 1; transform: scale(1.05) translateY(0); }
  25% { opacity: 1; transform: scale(1); }
  54% { opacity: 1; transform: scale(1); }      /* armado, consolidado y sin moverse */
  57% { opacity: 1; transform: scale(1.07); }   /* el tirón justo antes de romperse */
  59%, to { opacity: 0; transform: scale(1.07); }
}
@keyframes apertura-destello { 0%, 52% { opacity: 0; transform: scale(.22); } 60% { opacity: .95; transform: scale(.6); } 86%, to { opacity: 0; transform: scale(1.9); } }
@keyframes apertura-tormenta { 0%, 52% { opacity: 0; transform: scale(.5) rotate(-9deg); } 63% { opacity: .14; } 84% { opacity: .34; transform: scale(1.5) rotate(9deg); } to { opacity: 0; transform: scale(1.65) rotate(12deg); } }
@keyframes apertura-luz { from { opacity: 0; transform: scale(.25); } 50% { opacity: 1; transform: scale(1); } 68% { opacity: 1; transform: scale(1.02); } to { opacity: 0; transform: scale(1.12); } }
@keyframes apertura-aro { from { opacity: 0; transform: translate(-50%, -50%) scale(.1); } 74% { opacity: .9; } to { opacity: 0; transform: translate(-50%, -50%) scale(1.35); } }
@keyframes apertura-prs { 0%, 14% { opacity: 0; transform: translateY(12px); } 25%, 54% { opacity: 1; transform: translateY(0); } 64%, to { opacity: 0; transform: translateY(2px) scale(1.35); } }
@keyframes apertura-fondo { from { opacity: 0; transform: rotate(-35deg) scale(.65); } 55% { opacity: 1; } to { opacity: 0; transform: rotate(35deg) scale(1.5); } }
@keyframes apertura-sale { to { opacity: 0; visibility: hidden; } }
.apertura-ajuste label { display: grid; gap: 6px; margin-top: 12px; font-size: 14px; font-weight: 600; }
.apertura-ajuste output { color: var(--accent-texto, var(--accent)); font-family: var(--mono); font-size: 12px; font-weight: 700; }
.apertura-ajuste input[type="range"] { accent-color: var(--accent); padding: 0; }

.app {
  max-width: 460px;
  margin: 0 auto;
  /* **Debajo de la isla, no pegado a ella** (Max, sep 2026, con iOS 26 en el iPhone: "el logo de
     RHEO PRS y lo de arriba figura un poco cortado"). Con la app agregada al inicio la pantalla
     empieza arriba de todo, así que la altura de la isla se suma, no se compara: `max()` dejaba
     el encabezado tocando el borde del recorte. En el navegador el recorte es 0 y queda igual. */
  padding: calc(env(safe-area-inset-top) + 14px) 16px max(48px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.cargando { color: var(--muted); text-align: center; margin-top: 30vh; }

/* Encabezado */
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; }
.mark { display: flex; align-items: center; gap: 9px; }
.mark img { display: block; height: 37px; width: auto; filter: drop-shadow(0 5px 9px rgba(255, 79, 132, .22)); }
.mark small { font-family: var(--display); font-size: 19px; font-weight: 800; letter-spacing: .16em; color: var(--ink); line-height: 1; padding-top: 3px; }
.me { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--muted); min-width: 0; }
.me span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.link { background: none; border: 0; padding: 5px 0; color: var(--muted); font-size: 14px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.link.center { align-self: center; }

/* Fechas */
/* La tira de fechas: todas en una fila, se corre con el dedo. Entran dos en el celular con la
   siguiente asomada (así se ve que hay más) y cuatro desde 560 px. El scroll es **de la tira**,
   nunca de la página. */
.evs-tira { position: relative; }
/* Cuatro fechas en pantalla (dos columnas de dos, como le gusta a Max) y se corre de a una
   columna. Con `grid-auto-flow: column` y dos filas, cada columna lleva dos fechas: así entran
   cuatro y al arrastrar aparecen las siguientes. */
.evs {
  display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto);
  grid-auto-columns: calc(50% - 4px); gap: 8px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
  scrollbar-width: none; padding-bottom: 2px;
}
.evs::-webkit-scrollbar { display: none; }
.evs > .ev { scroll-snap-align: start; }
/* Las flechas **no van encima de las fechas** (Max, sep 2026: "esa flechita tapa un poco lo
   escrito de cada evento, están un poco molestas"). Van en un margen propio a los costados, que
   se le suma a la tira solo en la computadora, que es donde se muestran. Y son sobrias: sin caja
   ni borde hasta que se las toca. */
.evs-flecha {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 28px; height: 44px; display: none; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 10px;
  color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer;
  transition: color .15s ease, background-color .15s ease;
}
.evs-flecha:hover, .evs-flecha:focus-visible { color: var(--ink); background: var(--surface); }
.evs-flecha.izq { left: 0; }
.evs-flecha.der { right: 0; }
/* Siempre dos columnas de dos: así al abrir se ven dos pasadas y dos próximas, también
   en la computadora. Si se pasa a una sola fila, el hueco mezcla una pasada con una próxima. */
@media (min-width: 560px) { .evs { grid-auto-columns: calc(50% - 4px); } }
@media (hover: hover) and (min-width: 560px) {
  .evs-flecha { display: flex; }
  /* El margen donde viven las flechas: así la tira arranca después de ellas y nunca las pisa. */
  .evs-tira { padding-inline: 34px; }
}
.ev {
  text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 12px 13px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; min-width: 0;
  position: relative; overflow: hidden;
}
.brand-rheo { --event: #FF4F84; --event-ink: #22060F; }
.brand-human { --event: #5B8DEF; --event-ink: #0B1730; }
.brand-bagfest { --event: #B4E95A; --event-ink: #13200C; }
.ev::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px; border-radius: 99px; background: var(--event, var(--accent)); transform: scaleX(.24); transform-origin: left; opacity: .5; transition: transform .25s ease, opacity .25s ease; }
.ev[aria-pressed="true"]::after { transform: scaleX(1); opacity: 1; }
.ev b { font-weight: 650; font-size: 16.5px; line-height: 1.15; }
.ev span { font-family: var(--mono); font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.ev[aria-pressed="true"] { border-color: var(--event, var(--accent)); box-shadow: inset 0 0 0 1px var(--event, var(--accent)), 0 10px 22px -18px var(--event, var(--accent)); }
.mas { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: -10px; font-size: 16px; color: var(--muted); }
.mas select { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; font-size: 16px; max-width: 64%; }
.mas select.on { border-color: var(--accent); }
.dot-s { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--faint); }
.dot-s.live { background: var(--accent); animation: pulse 1.6s ease-in-out infinite; }
.dot-s.draft { background: var(--warn); }
.dot-s.done { background: var(--ok); }
@keyframes pulse { 50% { opacity: .35; } }

/* Talón de pulsera: lo único fuerte de la pantalla */
.stub { position: relative; overflow: hidden; background: var(--event, var(--accent)); color: var(--event-ink, var(--accent-ink)); border-radius: 18px; box-shadow: 0 22px 44px -22px color-mix(in srgb, var(--event, var(--accent)) 68%, transparent); }
.stub::before {
  content: attr(data-mark); position: absolute; inset: -60% -30%;
  font-family: var(--display); font-weight: 900; font-size: 30px; line-height: 1.15; letter-spacing: .08em; word-spacing: .3em;
  color: var(--event-ink, var(--accent-ink)); opacity: .06; transform: rotate(-14deg); pointer-events: none;
}
.stub > * { position: relative; }
.stub-main { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 4px; }
.stub-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: color-mix(in srgb, var(--event-ink, var(--accent-ink)) 92%, transparent); }
.stub-label { font-weight: 600; font-size: 16px; margin-top: 6px; }
.stub-amount { font-family: var(--display); font-weight: 900; font-size: clamp(58px, 18vw, 80px); line-height: .92; letter-spacing: -.02em; font-variant-numeric: tabular-nums; font-optical-sizing: auto; }
/* Fecha sin confirmar: la plata todavía no se muestra. */
.stub-amount.oculta { font-size: clamp(30px, 9vw, 40px); line-height: 1.05; letter-spacing: .01em; opacity: .85; }
.stub-status { font-size: 14.5px; display: flex; align-items: center; gap: 7px; margin-top: 6px; }
.stub-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--event-ink, var(--accent-ink)); flex: none; }
.stub-status.live i { animation: pulse 1.6s ease-in-out infinite; }
.stub-perf { height: 0; border-top: 2px dashed rgba(34, 6, 15, .32); margin: 0 16px; }
.stub-perf::before, .stub-perf::after { content: ""; position: absolute; top: -11px; width: 20px; height: 20px; border-radius: 50%; background: var(--bg); }
.stub-perf::before { left: -26px; }
.stub-perf::after { right: -26px; }
.stub-foot { padding: 12px 18px 15px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stub-foot div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.stub-foot small { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--event-ink, var(--accent-ink)) 88%, transparent); }
.stub-foot b { font-family: var(--display); font-weight: 800; font-size: 27px; line-height: 1; font-variant-numeric: tabular-nums; }

/* Secciones */
.sec { display: flex; flex-direction: column; gap: 10px; }
.sec-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.sec-h h2 { margin: 0; font-size: 19px; font-weight: 650; text-wrap: balance; }
.sec-h small { font-family: var(--mono); font-size: 12px; color: var(--faint); text-align: right; }
.box { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }

.row { display: grid; grid-template-columns: 1fr auto; column-gap: 14px; row-gap: 2px; padding: 12px 14px; border-top: 1px solid var(--line); align-items: center; }
.row:first-child { border-top: 0; }
.row .l { font-weight: 500; }
.row .c { grid-column: 1; font-size: 13.5px; color: var(--muted); }
.row .v { grid-column: 2; grid-row: 1 / span 2; font-family: var(--display); font-weight: 800; font-size: 25px; font-variant-numeric: tabular-nums; text-align: right; }
.row.soft .v { color: var(--faint); }
.row.total { background: var(--surface-2); border-radius: 0 0 13px 13px; }
.row.total .l { font-weight: 600; }
.row.total .v { color: var(--accent); font-size: 27px; }
.meter { grid-column: 1; position: relative; height: 6px; margin: 8px 0 3px; background: var(--surface-2); border-radius: 99px; }
.meter i { display: block; height: 100%; border-radius: inherit; background: var(--warn); }
.meter.ok i { background: var(--ok); }
.meter::after { content: ""; position: absolute; left: 50%; top: -4px; bottom: -4px; width: 2px; border-radius: 2px; background: var(--muted); }

/* Free: un cuadradito por QR enviado */
.qrs { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; padding: 14px 14px 4px; }
.qr { aspect-ratio: 1; border-radius: 5px; border: 1.5px solid var(--faint); position: relative; }
.qr.on { background: var(--ok); border-color: var(--ok); }
.qr.on::after { content: ""; position: absolute; inset: 28%; border-radius: 2px; background: var(--surface); opacity: .9; }
.free-hero { display: flex; align-items: center; gap: 13px; padding: 14px 14px 2px; }
.free-hero > div:last-child { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.free-hero > div:last-child b { font-size: 15px; }
.free-hero > div:last-child span { font-size: 13px; color: var(--muted); }
.free-ring { --avance: 0%; position: relative; flex: none; display: grid; place-items: center; width: 66px; height: 66px; border-radius: 50%; background: conic-gradient(var(--accent) var(--avance), var(--surface-2) 0); box-shadow: 0 8px 18px -14px var(--accent); transition: background .45s ease, transform .35s ease; }
.free-ring::before { content: ""; position: absolute; inset: 7px; border-radius: inherit; background: var(--surface); }
.free-ring span { position: relative; display: flex; align-items: baseline; font-family: var(--display); font-variant-numeric: tabular-nums; }
.free-ring b { font-size: 28px; line-height: 1; }
.free-ring small { font-family: var(--mono); font-size: 10px; color: var(--faint); }
.free-ring.complete { box-shadow: 0 0 0 5px color-mix(in srgb, var(--ok) 13%, transparent), 0 10px 22px -14px var(--ok); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: 13.5px; padding: 7px 11px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); }
/* **"Tu noche", en tres columnas centradas** (Max, sep 2026: "que quede bien centrado y no ocupe
   tantos renglones"). Los consumos se llevan el ancho que sobra, porque su texto es el largo
   ("2A 6C + 1 BOT SERNOVA PROMO"); los otros dos miden lo que dice su etiqueta. */
.noche-dan { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; margin-top: 10px; }
.noche-dan .dan { min-width: 0; text-align: center; padding: 9px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.noche-dan .dan b { display: block; font-size: 20px; font-weight: 700; line-height: 1.15; text-wrap: balance; }
.noche-dan .dan b.txt { font-size: 15px; }
.noche-dan .dan i { display: block; margin-top: 3px; font-style: normal; font-size: 11.5px; line-height: 1.3; color: var(--muted); }
/* **Una luz que da la vuelta al perímetro** (Max, sep 2026: "a los recuadraditos verdes me
   gustaría sumarles algún efecto, que tengan un perímetro de algún colorcito que se mueva por
   todo el perímetro del cuadrado"). Es un sector de luz que gira detrás y una tapa del color del
   fondo que deja ver solo el borde: anima **solo transform**, así que no cuesta nada. */
.noche-dan .ok { border-color: var(--ok); position: relative; overflow: hidden; isolation: isolate; }
.noche-dan .ok b { color: var(--ok); }
.noche-dan .ok b, .noche-dan .ok i { position: relative; z-index: 2; }
.noche-dan .ok::before { content: ""; position: absolute; inset: -70%; z-index: 0;
  background: conic-gradient(from 0deg, transparent 0 62%, var(--ok) 78%, #fff 84%, var(--ok) 90%, transparent 100%);
  opacity: .75; animation: vuelta 3.6s linear infinite; }
.noche-dan .ok::after { content: ""; position: absolute; inset: 2px; z-index: 1;
  border-radius: 10px; background: var(--surface); }
@keyframes vuelta { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) { .noche-dan .ok::before { animation: none; opacity: .35; } }

.pill { font-family: var(--mono); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; padding: 4px 8px; border-radius: 6px; white-space: nowrap; font-weight: 500; }
.pill.live { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.pill.draft { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.pill.done { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.pill.flat { background: var(--surface-2); color: var(--muted); }

/* Listas */
.li { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 11px 14px; border-top: 1px solid var(--line); }
.li:first-child { border-top: 0; }
.li.two { grid-template-columns: 1fr auto; }
.li .who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.li .who b { font-weight: 500; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.li .who span { font-size: 13.5px; color: var(--muted); }
.li .n { font-family: var(--display); font-weight: 800; font-size: 26px; font-variant-numeric: tabular-nums; min-width: 2ch; text-align: right; }
.li .m { font-size: 14.5px; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 72px; text-align: right; }
.li.head { padding-block: 8px; }
.li.head span { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); text-align: right; }
.li.head span:first-child { text-align: left; }
.li.click { cursor: pointer; }
.li.here { background: var(--surface-2); }
.grupo { font-family: var(--mono); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); padding: 12px 14px 4px; border-top: 1px solid var(--line); }
.grupo:first-child { border-top: 0; }

.bars { display: flex; flex-direction: column; gap: 12px; padding: 14px; }
.bar { display: grid; grid-template-columns: 78px 1fr auto; gap: 10px; align-items: center; }
.bar b { font-weight: 500; font-size: 14.5px; }
.bar .track { height: 10px; background: var(--surface-2); border-radius: 99px; overflow: hidden; }
.bar .fill { height: 100%; border-radius: inherit; background: var(--muted); transition: width .5s cubic-bezier(.2, .8, .2, 1); }
.bar.me .fill { background: var(--accent); }
.bar .n { font-family: var(--display); font-weight: 800; font-size: 20px; font-variant-numeric: tabular-nums; min-width: 3ch; text-align: right; }

.confirm { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px; overflow: hidden; padding: 13px 14px 13px 17px; border-color: color-mix(in srgb, var(--accent) 34%, var(--line)); background: linear-gradient(100deg, color-mix(in srgb, var(--accent) 12%, var(--surface)), var(--surface) 68%); }
.confirm::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--accent); box-shadow: 0 0 14px var(--accent); }
.confirm p { margin: 0; font-size: 15.5px; line-height: 1.45; color: var(--muted); min-width: 0; }
/* En el celular el botón ("Confirmar pagos") no entra al lado del texto y lo dejaba en una
   columna de cuatro palabras: ahí va abajo, ancho completo. */
@media (max-width: 460px) {
  .confirm { flex-direction: column; align-items: stretch; gap: 11px; }
  .confirm .btn { width: 100%; }
  .confirm .pill { align-self: flex-start; }
}
.btn { flex: none; font-size: 14.5px; font-weight: 600; padding: 10px 16px; border: 0; border-radius: 999px; background: var(--ink); color: var(--bg); cursor: pointer; }
.btn:disabled { opacity: .5; cursor: default; }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); font-weight: 500; font-size: 12.5px; padding: 6px 12px; }
.btn.big { width: 100%; padding: 13px 16px; font-size: 15px; background: var(--accent); color: var(--accent-ink); }
.code { font-family: var(--mono); font-size: 15px; letter-spacing: .12em; color: var(--ink); background: var(--surface-2); padding: 5px 9px; border-radius: 8px; }

/* Free: enviados / repartidos / entraron */
.qr.asig { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 22%, transparent); }
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 10px 14px 13px; }
.trio div { display: flex; flex-direction: column; gap: 3px; }
.trio b { font-family: var(--display); font-weight: 800; font-size: 26px; line-height: 1; font-variant-numeric: tabular-nums; }
.trio small { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.aviso {
  margin: 0; padding: 10px 12px; border-radius: 12px; font-size: 14.5px; color: var(--ink);
  background: color-mix(in srgb, var(--warn) 14%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
}
.box .aviso { margin: 0 14px 14px; }
.dist { display: flex; flex-direction: column; gap: 7px; padding: 11px 14px; border-top: 1px solid var(--line); }
.dist:first-child { border-top: 0; }
.dist .who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dist .who b { font-weight: 500; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Marca de un vistazo en la lista de free: quién ya repartió todo y a quién le falta. */
.estado-free { font-style: normal; font-family: var(--mono); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; padding: 3px 7px; border-radius: 999px; background: var(--surface-2); color: var(--muted); }
.estado-free.ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 13%, transparent); }
.estado-free.warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 13%, transparent); }
.estado-free.bad { color: var(--bad); background: color-mix(in srgb, var(--bad) 13%, transparent); }
.dist .who span { font-size: 13.5px; color: var(--muted); }
.dist .track { position: relative; height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.dist .track i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; }
.dist .track .asig { background: color-mix(in srgb, var(--ok) 38%, transparent); }
.dist .track .val { background: var(--ok); }

/* Por fecha / Historial de PRs (Jefe PR y organizadores) */
.tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; padding: 3px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; }
.tabs button { font-size: 16px; font-weight: 550; padding: 11px 8px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; }
.tabs button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.li.hist .who span + span { color: var(--faint); }
.prom { display: flex; flex-direction: column; align-items: flex-end; min-width: 62px; line-height: 1.1; }
.prom b { font-family: var(--display); font-weight: 800; font-size: 20px; font-variant-numeric: tabular-nums; }
.prom small { font-size: 11px; color: var(--faint); }
.tend { font-size: 11px; color: var(--faint); }
.tend.up { color: var(--ok); }
.tend.down { color: var(--bad); }
.bajas { margin-top: 10px; }
.bajas summary { cursor: pointer; padding: 12px 14px; font-weight: 500; font-size: 14px; color: var(--muted); }

/* Tu gente: datos de personas. Se ven y se usan de a uno, pero no se seleccionan ni copian en bloque. */
.gente-lista { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* Passline (solo organizadores) */
.sel { font-size: 13px; max-width: min(46vw, 240px); background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 6px 8px; }
.alias.falta { background: color-mix(in srgb, var(--warn) 7%, transparent); }
.sesion { margin-top: 10px; }
.sesion summary { cursor: pointer; padding: 12px 14px; font-weight: 500; font-size: 14px; }
.sesion .form { padding: 0 14px 14px; }
textarea.field { font-family: var(--mono); font-size: 12px; resize: vertical; min-height: 88px; }
.tg {
  appearance: none; -webkit-appearance: none; flex: none; width: 36px; height: 21px; margin: 0; border-radius: 99px;
  background: var(--surface-2); border: 1px solid var(--line); position: relative; cursor: pointer; transition: background .2s;
}
.tg::after { content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: var(--muted); transition: transform .2s; }
.tg:checked { background: var(--ok); border-color: var(--ok); }
.tg:checked::after { transform: translateX(15px); background: #fff; }
.tg:disabled { opacity: .5; cursor: default; }
.empty { padding: 14px; font-size: 15px; color: var(--muted); }
.foot { font-size: 15px; color: var(--muted); line-height: 1.55; border: 0; border-left: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); padding: 3px 0 3px 13px; margin: 0; }

/* Ingreso */
.login { display: flex; flex-direction: column; gap: 14px; }
.login h1 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 38px; line-height: 1; letter-spacing: .01em; text-wrap: balance; }
.login .sub { margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); }
.hint { margin: 0; font-size: 15.5px; color: var(--muted); line-height: 1.5; }
.field { width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font-size: 16px; }
.field:focus { border-color: var(--accent); outline: none; }
.form { display: flex; flex-direction: column; gap: 12px; }
.form label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--muted); }
.err { margin: 0; font-size: 15px; color: var(--bad); }
.pick { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: none; border: 0; border-top: 1px solid var(--line); padding: 12px 14px; text-align: left; cursor: pointer; }
.pick:first-child, .grupo + .pick { border-top: 0; }
.pick b { font-weight: 500; display: flex; align-items: center; gap: 8px; }
.pick .chev { color: var(--faint); font-size: 18px; }

.toast {
  position: fixed; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  max-width: calc(100% - 32px); background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 12px;
  font-size: 13.5px; box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .5); z-index: 10;
}

/* Celular: una columna. Computadora: resumen a la izquierda (fijo al scrollear), listas a la derecha. */
.vista, .col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
@media (min-width: 900px) {
  .app { max-width: 1060px; padding-inline: 32px; gap: 24px; }
  /* Ojo: acá NO va `grid-template-columns`. Con columnas explícitas de 1fr, las primeras cuatro
     se repartían lo que sobraba —o sea nada, porque las implícitas ya se llevaban media pantalla—
     y quedaban como tiritas donde solo se leía la inicial de la marca (Max, sep 2026: "no se ven
     todos los eventos cuando desplazo"). Todas las columnas las sigue midiendo `grid-auto-columns`. */
  .mas { justify-content: flex-end; }
  .vista { display: grid; grid-template-columns: minmax(0, 430px) minmax(0, 1fr); gap: 32px; align-items: start; }
  /* **Acá no se pega nada** (Max, sep 2026). Primero se pegaba la columna entera y, al abrir "Qué
     se está vendiendo", no se podía scrollear hasta el final: había que pasar toda la otra columna.
     Después se pegó solo el talón, y entonces el talón **tapaba** lo de abajo al scrollear ("queda
     ese cartel ahí tapando… que no se tapen"). Todo scrollea junto y nada se superpone. */
  .vista > .col:first-child { position: static; }
  .login { width: 100%; max-width: 440px; margin: 6vh auto 0; }
  .foot { text-align: center; border-left: 0; padding-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Ingreso en dos pasos: primero el equipo, después el nombre. Las filas llevan la inicial en
   un círculo (cada nombre tiene su tono, siempre el mismo) y entran de a una. */
.login .atras {
  align-self: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 14px; font-family: var(--mono); font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); cursor: pointer; transition: color .18s ease, border-color .18s ease, transform .18s ease;
}
.login .atras:hover { color: var(--ink); border-color: var(--accent); }
.login .atras:active { transform: scale(.97); }
.box.lista { overflow: hidden; }
.box.lista .pick { gap: 12px; padding: 13px 14px; min-height: 62px; transition: background .18s ease; }
.pick .ava {
  flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .02em;
  color: hsl(var(--tono, 330) 85% 86%);
  background: radial-gradient(120% 120% at 30% 20%, hsl(var(--tono, 330) 60% 34%), hsl(var(--tono, 330) 55% 18%));
  box-shadow: inset 0 0 0 1px hsl(var(--tono, 330) 60% 55% / .35), 0 6px 14px -9px hsl(var(--tono, 330) 60% 40%);
}
.pick .quien { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pick .quien b { display: block; font-weight: 600; font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick .cuantos { font-family: var(--mono); font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); }
.box.lista .pick:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.box.lista .pick:active { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.pick .chev { transition: transform .18s ease, color .18s ease; }
.box.lista .pick:hover .chev { transform: translateX(3px); color: var(--accent); }
.box.lista .pick { animation: entra .3s cubic-bezier(.22, .9, .3, 1) backwards; animation-delay: calc(var(--i, 0) * 30ms); }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .pick .ava {
    color: hsl(var(--tono, 330) 55% 30%);
    background: radial-gradient(120% 120% at 30% 20%, hsl(var(--tono, 330) 80% 93%), hsl(var(--tono, 330) 65% 85%));
    box-shadow: inset 0 0 0 1px hsl(var(--tono, 330) 50% 70% / .5);
  }
}
:root[data-theme="light"] .pick .ava {
  color: hsl(var(--tono, 330) 55% 30%);
  background: radial-gradient(120% 120% at 30% 20%, hsl(var(--tono, 330) 80% 93%), hsl(var(--tono, 330) 65% 85%));
  box-shadow: inset 0 0 0 1px hsl(var(--tono, 330) 50% 70% / .5);
}
@media (prefers-reduced-motion: reduce) {
  .box.lista .pick { animation: none; }
  .login .atras, .box.lista .pick, .pick .chev { transition: none; }
}

/* Portada del ingreso: el logo grande, que se prende como un neón de verdad. Dos luces lo
   recorren cruzadas cada tanto, el resplandor respira y las letras de "PRS" giran de a una.
   Todo con transform y opacity (lo barato para el celular) y con una sola imagen, que además
   hace de molde para las luces. */
.hero { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 0 2px; }
.hero .marca { position: relative; width: min(66vw, 252px); line-height: 0; }
.hero .halo {
  position: absolute; inset: -24% -16%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 30%, transparent), transparent 72%);
  animation: respirar 6s ease-in-out infinite;
}
@keyframes respirar { 0%, 100% { opacity: .55; transform: scale(.94); } 50% { opacity: .9; transform: scale(1.04); } }
.hero .logo { position: relative; width: 100%; height: auto; filter: drop-shadow(0 0 22px rgba(255, 70, 90, .45)) drop-shadow(0 10px 24px rgba(0, 0, 0, .5)); }
.hero .destello {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  -webkit-mask: url("/logo-hd.webp") center / 100% 100% no-repeat;
  mask: url("/logo-hd.webp") center / 100% 100% no-repeat;
}
.hero .destello::before {
  content: ""; position: absolute; top: -30%; bottom: -30%; width: 15%;
  background: linear-gradient(104deg, transparent, rgba(255, 248, 240, .92), transparent);
  filter: blur(1px);
}
.hero .destello::before { left: -18%; animation: barrer 7s cubic-bezier(.45, .05, .5, 1) 2.2s infinite; }
@keyframes barrer { 0% { transform: translateX(0); } 13%, 100% { transform: translateX(830%); } }
.hero .prs {
  display: flex; gap: .34em; padding-left: .34em; font-family: var(--display); font-weight: 800;
  font-size: 22px; letter-spacing: .3em; color: var(--muted); perspective: 400px;
}
.hero .prs span { display: inline-block; animation: giro 9s cubic-bezier(.45, 0, .2, 1) infinite; animation-delay: calc(4s + var(--i) * .16s); }
@keyframes giro { 0%, 82% { transform: rotateY(0); } 91% { transform: rotateY(180deg); } 100% { transform: rotateY(360deg); } }
/* El prendido va solo la primera vez que se abre la app. */
.hero.prende .logo { animation: prender 1.25s steps(1, end) both; }
.hero.prende .halo { animation: aparecer 1.4s ease .7s backwards, respirar 6s ease-in-out 1.4s infinite; }
.hero.prende .prs span {
  animation: letra .7s cubic-bezier(.2, .85, .25, 1) backwards, giro 9s cubic-bezier(.45, 0, .2, 1) 4s infinite;
  animation-delay: calc(1.05s + var(--i) * .1s), calc(4s + var(--i) * .16s);
}
@keyframes prender {
  0% { opacity: 0; } 12% { opacity: 1; } 16% { opacity: .1; } 24% { opacity: 1; }
  30% { opacity: .2; } 38% { opacity: 1; } 44% { opacity: .45; } 52%, 100% { opacity: 1; }
}
@keyframes aparecer { from { opacity: 0; } }
@keyframes letra { from { opacity: 0; transform: rotateX(-88deg) translateY(8px); } }
/* De día el logo va recortado sobre el fondo de la página: nada de cuadrado negro, y el
   resplandor apenas se insinúa. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .hero .logo { filter: drop-shadow(0 0 16px rgba(255, 90, 120, .3)) drop-shadow(0 12px 20px rgba(120, 30, 60, .18)); }
  :root:not([data-theme="dark"]) .hero .halo { opacity: .3; animation-name: none; }
}
:root[data-theme="light"] .hero .logo { filter: drop-shadow(0 0 16px rgba(255, 90, 120, .3)) drop-shadow(0 12px 20px rgba(120, 30, 60, .18)); }
:root[data-theme="light"] .hero .halo { opacity: .3; animation-name: none; }
@media (prefers-reduced-motion: reduce) {
  .hero .destello { display: none; }
  .hero .halo, .hero.prende .logo, .hero .prs span, .hero.prende .prs span { animation: none; }
}

/* Tablero de organizador: solapas para que no esté todo junto, y el detalle por team. */
.tabs.cuatro { grid-template-columns: repeat(4, 1fr); }
.tabs.cuatro button { font-size: 13.5px; padding: 9px 4px; }
.box.teams { padding: 0; }
.team + .team { border-top: 1px solid var(--line); }
.team-h { align-items: center; gap: 10px; }
.team-h .quien { flex: 1; }
.team-n { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; text-align: right; }
.team-n b { font-family: var(--display); font-size: 19px; font-weight: 800; line-height: 1; }
.team-n small { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.team.on .team-h { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.team-b { border-top: 1px solid var(--line); background: color-mix(in srgb, var(--ink) 3%, transparent); }
.team-tot { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); padding: 10px 14px 2px; }
@media (max-width: 420px) {
  .team-h { flex-wrap: wrap; }
  .team-h .quien { flex: 1 0 100%; }
  .team-n { align-items: flex-start; text-align: left; }
  .team-h .chev { position: absolute; right: 14px; top: 14px; }
  .team { position: relative; }
}

/* Cumpleaños de la gente que viene: se ve en una semana y se le escribe de una. */
.tabs.tres { grid-template-columns: repeat(3, 1fr); }
.semanas { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.semanas b { font-family: var(--mono); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.li.cumple { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; }
.li.cumple .acc { display: flex; align-items: center; gap: 10px; }
.li.cumple.lejos .who b { color: var(--muted); }
.btn.chico { font-size: 12.5px; padding: 6px 12px; border-radius: 999px; text-decoration: none; }
@media (max-width: 420px) {
  .li.cumple { grid-template-columns: 1fr; }
  .li.cumple .acc { justify-content: flex-end; }
}
/* **Panel de acciones** (Max, sep 2026: "quiero que parezcan diseñados más profesionalmente").
   Antes cada cosa era un link subrayado con un párrafo abajo: se leía como un documento, no como
   un panel. Ahora cada acción es una fila igual a la otra —qué hace, una línea de para qué sirve,
   y la flecha— que se toca entera. Al ser filas de una caja compartida se alinean solas, sin que
   el largo del texto corra nada. */
.acciones { margin: 10px 14px 4px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); }
.accion {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px;
  padding: 12px 14px; background: none; border: 0; border-top: 1px solid var(--line);
  text-align: left; cursor: pointer; color: var(--ink); font: inherit;
  transition: background-color .15s ease;
}
.accion:first-child { border-top: 0; }
.accion:hover, .accion:focus-visible { background: var(--surface-2); }
.accion-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.accion-txt b { font-size: 15px; font-weight: 600; line-height: 1.25; }
.accion-txt span { font-size: 13px; color: var(--muted); line-height: 1.3; }
.accion-ir { font-size: 20px; color: var(--faint); flex: none; }
.accion:hover .accion-ir, .accion:focus-visible .accion-ir { color: var(--ink); }

.sub-acc { padding: 0 14px 10px; }
.sub-acc .link { font-size: 12px; }
.sub-gente { padding: 0 10px 10px; }
.sub-gente .box { background: var(--surface-2); }
.li.cumple .viene { color: var(--ok); font-weight: 600; }
.periodo summary { cursor: pointer; padding: 10px 14px; font-size: 13.5px; color: var(--muted); }
.periodo .form { padding: 0 14px 14px; }
/* Dos campos al lado del otro. Los `input[type=date]` traen un ancho mínimo propio y, con el
   padding, se pasaban 11 px de la pantalla: el `min-width: 0` los deja achicarse. */
.form .dos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form .dos > * { min-width: 0; }
.form .dos .field { min-width: 0; }
.li.cumple .tipos { font-family: var(--mono); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-texto, var(--accent)); }
.prog { height: 6px; margin: 12px 14px 8px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.prog-fill { height: 100%; background: var(--accent); transition: width .4s ease; }
.sub-acc { display: flex; align-items: center; gap: 12px; }
.bars .bar b { display: flex; flex-direction: column; gap: 1px; }
.bars .bar b small { font-family: var(--mono); font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); font-weight: 400; }

/* Gráfico de las últimas fechas: una columna por fecha, partida por team. */
.graf-box { padding: 14px; }
.graf { display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; height: 190px; }
.col-graf { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; }
/* El carril es el lugar que le queda a la barra después del número y las etiquetas: el alto en
   % se mide contra esto, no contra la caja entera. Si no, las columnas grandes salen iguales. */
.col-graf .carril { flex: 1; width: 100%; min-height: 0; display: flex; align-items: flex-end; justify-content: center; }
.col-graf b { font-family: var(--display); font-size: 16px; font-weight: 800; line-height: 1; }
.col-graf .barra { width: 100%; max-width: 46px; flex: none; display: flex; flex-direction: column-reverse; border-radius: 8px 8px 4px 4px; overflow: hidden; background: var(--surface-2); }
.col-graf .barra i { display: block; width: 100%; }
.col-graf small { font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; color: var(--faint); text-align: center; line-height: 1.2; }
.col-graf em { font-family: var(--mono); font-size: 10.5px; font-style: normal; color: var(--muted); }
.leyenda { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.lg { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.lg i, .barra i { border-radius: 2px; }
.lg i { width: 10px; height: 10px; display: inline-block; }
.c0 { background: var(--accent); }
.c1 { background: #5B8DEF; }
.c2 { background: var(--ok); }
.c3 { background: var(--warn); }
.barra i.mio { box-shadow: inset 0 0 0 2px var(--ink); }
/* La fecha que se está mirando, en el gráfico del socio. */
.col-graf .barra.mia { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Historial de PRs: tabla de verdad en la computadora, tarjetas en el celular. */
.filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.filtros .field { flex: 1; min-width: 180px; }
.ordenes { display: flex; flex-wrap: wrap; gap: 6px; }
.orden { font-size: 13px; min-height: 40px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); cursor: pointer; }
.orden.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
/* La línea chiquita del costado: qué es cada consumición y cuánto vale en la carta. Va chica a
   propósito (Max, sep 2026: "súper chiquitito y detallado, pero que se vea"), sin bajar del
   mínimo de contraste. */
.chiquito { margin: 6px 14px 2px; font-size: 11.5px; line-height: 1.45; color: var(--muted); }
.chiquito b { color: var(--ink); font-weight: 650; }
/* Las flechas del gráfico del PR: sobrias, al costado, y se apagan en las puntas. */
.graf-corre { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px; }
.graf-flecha {
  min-width: 28px; min-height: 40px; padding: 0 4px; border: 0; background: transparent;
  color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; border-radius: 8px;
}
.graf-flecha:hover:not(:disabled) { color: var(--ink); background: var(--surface-2); }
.graf-flecha:disabled { opacity: .25; cursor: default; }
/* Las fechas que todavía no pasaron van rayadas, para que no se confundan con las cerradas
   (Max, sep 2026: "que estén de otro color, así ve cómo vienen sus ventas en los futuros"). */
.col-graf.porVenir .barra i {
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.35) 0 4px, transparent 4px 8px);
}
.col-graf.porVenir small { font-style: italic; }
/* Las secciones que están abajo del primer pantallazo entran cuando llegás scrolleando. Lo pone y
   lo saca el JS (`data-revelar`): si el efecto no corre, no hay nada escondido. */
[data-revelar] { opacity: 0; transform: translateY(18px); }
.sec { transition: opacity .45s ease, transform .45s cubic-bezier(.22,.8,.3,1); }
@media (prefers-reduced-motion: reduce) { [data-revelar] { opacity: 1; transform: none; } }
/* **En el tema claro, lo elegido se marca con el rosa de RHEO**, no con negro (Max, sep 2026:
   "me gusta cuando los botones se marcan con algún colorcito, para que sea más fácil
   identificarlos"). Medido: la tinta oscura sobre el rosa da 5,05, arriba del mínimo. En el
   oscuro queda como está, que es lo que él ya eligió. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .orden.on,
  :root:not([data-theme="dark"]) .tabs button[aria-pressed="true"],
  :root:not([data-theme="dark"]) .filtro-fila .orden.on {
    background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
  }
}
:root[data-theme="light"] .orden.on,
:root[data-theme="light"] .tabs button[aria-pressed="true"],
:root[data-theme="light"] .filtro-fila .orden.on {
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
}
.tabla-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.tabla { width: 100%; border-collapse: collapse; font-size: 15px; }
.tabla th { font-family: var(--mono); font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); font-weight: 500; text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line); }
.tabla th.num, .tabla td.num { text-align: right; white-space: nowrap; }
.tabla td { padding: 12px; border-top: 1px solid var(--line); vertical-align: middle; }
.tabla tbody tr:first-child td { border-top: 0; }
.tabla tbody tr:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.tabla td small { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); }
/* En la computadora va el texto largo y **no** los dos: se veía "por debajo de su promedio" y
   abajo "peor", lo mismo dicho dos veces (Max, sep 2026: "no entiendo esto, no está claro").
   En el celular es al revés, y eso lo hace el @media de abajo. */
.tabla td.ultimas small.corto { display: none; }
.tabla td strong { font-weight: inherit; }
.tabla td.fuerte { font-family: var(--display); font-size: 21px; font-weight: 800; }
.tabla td.nom b { font-weight: 600; }
.tabla td.acc { text-align: right; white-space: nowrap; }
.tabla .baja { color: var(--faint); opacity: .55; font-size: 12.5px; transition: opacity .15s, color .15s; }
.tabla tr:hover .baja, .tabla .baja:focus-visible { opacity: 1; color: var(--bad); }
@media (hover: none) { .tabla .baja { opacity: 1; } }
.bajas .li .acc { display: flex; align-items: center; gap: 12px; }
.team-tag { width: max-content; margin-top: 4px; padding: 3px 7px; border-radius: 999px; background: var(--surface-2); }
.team-tag.team-apa { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.team-tag.team-ivo { color: var(--azul); background: color-mix(in srgb, #5B8DEF 15%, transparent); }
.team-tag.team-lolo { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
@media (max-width: 1200px) {
  /* Cada PR es una tarjeta: antes ocupaba casi la pantalla entera y había que scrollear mucho
     para ver tres PRs (Max, sep 2026). Ahora va en columnas: el nombre arriba, la tira de los
     tres números que se miran (gente, promedio y cómo viene), abajo el resto chico y al pie la
     plata. Los colores quedan, que es lo que le gusta.
     El corte quedaba en 760px, pero la tabla entera (9 columnas) nunca entra en el ancho máximo
     de la app (1060px): a partir de una tablet ya se tenía que scrollear para el costado (Max,
     sep 2026: "no me gusta scrollear, quiero que se vea todo de una"). Con este corte la tarjeta
     se usa siempre que la app pueda mostrarse, así nunca hace falta correr la tabla. */
  .tabla, .tabla tbody, .tabla tr, .tabla td { display: block; width: 100%; }
  .tabla thead { display: none; }
  .tabla tr { padding: 11px 12px; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .tabla tbody tr:first-child { border-top: 0; }
  .tabla td { min-width: 0; border: 1px solid var(--line); border-radius: 9px; padding: 7px 8px; text-align: left; white-space: normal; background: color-mix(in srgb, var(--surface-2) 52%, transparent); }
  .tabla td.num { text-align: left; }
  .tabla td::before { content: attr(data-l); display: block; margin-bottom: 2px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); }
  .tabla td strong { display: inline-block; font-family: var(--display); font-size: 20px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ink); }
  .tabla td small { display: inline; margin-left: 4px; font-size: 10.5px; }

  /* Nombre y team, en una línea. */
  .tabla td.nom { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 7px; border: 0; border-radius: 0; padding: 0 0 2px; background: transparent; font-size: 16.5px; }
  .tabla td.nom::before { content: none; }
  .tabla td.nom .team-tag { margin-top: 0; }

  /* La tira de arriba: los tres números que se miran para decidir. */
  .tabla td.personas { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 17%, var(--surface-2)), var(--surface-2)); }
  .tabla td.personas strong { color: var(--accent); font-size: 24px; }
  .tabla td.promedio { background: color-mix(in srgb, #5B8DEF 10%, var(--surface-2)); border-color: color-mix(in srgb, #5B8DEF 30%, var(--line)); }
  .tabla td.promedio strong { color: var(--azul); font-size: 24px; }
  .tabla td.promedio small { display: none; }
  .tabla td.ultimas { border-color: color-mix(in srgb, var(--ok) 34%, var(--line)); background: color-mix(in srgb, var(--ok) 10%, var(--surface-2)); }
  .tabla td.ultimas.down { border-color: color-mix(in srgb, var(--bad) 40%, var(--line)); background: color-mix(in srgb, var(--bad) 10%, var(--surface-2)); }
  .tabla td.ultimas.flat { border-color: color-mix(in srgb, var(--warn) 34%, var(--line)); background: color-mix(in srgb, var(--warn) 8%, var(--surface-2)); }
  /* En la tarjeta del celular la celda ya va teñida de verde, rojo o naranja según cómo viene:
     la flecha encima de ese fondo no llega al contraste mínimo si va en gris. Va en --ink, que
     se lee en los dos temas; el color lo pone la celda y el número grande. (Medido con
     `npm run mirar`, sep 2026.) */
  .tabla td.ultimas .tend { font-size: 13px; line-height: 1; margin-right: 2px; color: var(--ink); }
  .tabla td.ultimas strong { color: var(--ok); font-size: 24px; }
  .tabla td.ultimas.down strong { color: var(--bad); }
  .tabla td.ultimas.flat strong { color: var(--warn); }
  /* En la tira no entra "por debajo de su promedio": va la palabra corta y el texto largo queda
     en la computadora (y en el title, para el que toca). */
  .tabla td.ultimas small.largo { display: none; }
  .tabla td.ultimas small.corto { display: inline; margin-left: 4px; font-size: 10.5px; text-transform: none; letter-spacing: 0; color: var(--ink); }

  /* Lo de abajo, chico: son datos de contexto, no de decisión. */
  .tabla td.fechas, .tabla td.desde, .tabla td.entradas { background: transparent; border-color: color-mix(in srgb, var(--line) 75%, transparent); }
  .tabla td.fechas strong, .tabla td.desde strong, .tabla td.entradas strong { font-size: 15px; }
  .tabla td.fechas small, .tabla td.desde small, .tabla td.entradas small { font-size: 10px; }

  /* La plata y el botón, al pie y en la misma línea. */
  .tabla td.gano { grid-column: 1 / span 2; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); background: color-mix(in srgb, var(--accent) 10%, var(--surface-2)); }
  .tabla td.gano::before { margin: 0; }
  .tabla td.gano strong { color: var(--accent-texto, var(--accent)); font-size: 20px; }
  .tabla td.acc { display: flex; align-items: center; justify-content: flex-end; border: 0; padding: 0; background: transparent; text-align: right; }
  .tabla td.acc::before { content: none; }
  .tabla .baja { font-size: 11.5px; line-height: 1.15; text-align: right; }
}

/* Mientras llegan los números de otra fecha: lo de abajo se apaga y no se puede tocar, pero la
   tira de fechas y las solapas quedan vivas, así se ve al toque cuál elegiste. */
.app[data-cargando="1"] .col { opacity: .4; pointer-events: none; }
.app .col { transition: opacity .18s ease; }

/* Movimiento de las pantallas de adentro. Solo transform y opacity (lo barato para el celular).
   La entrada corre cuando cambia lo que se mira (primera carga, otra fecha, otra solapa), nunca
   cuando solo se refrescan los números. Con "reducir movimiento" no corre nada (regla de arriba). */
.app[data-entra="todo"] > *,
.app[data-entra] .col > * { animation: subir .55s cubic-bezier(.2, .8, .2, 1) backwards; }
.app[data-entra="todo"] > :nth-child(2) { animation-delay: 50ms; }
.app[data-entra="todo"] > :nth-child(3) { animation-delay: 100ms; }
.app[data-entra="todo"] > :nth-child(n+4) { animation-delay: 150ms; }
.app[data-entra] .col > :nth-child(2) { animation-delay: 70ms; }
.app[data-entra] .col > :nth-child(3) { animation-delay: 140ms; }
.app[data-entra] .col > :nth-child(4) { animation-delay: 210ms; }
.app[data-entra] .col > :nth-child(n+5) { animation-delay: 280ms; }
@keyframes subir { from { opacity: 0; transform: translateY(12px); } }
/* El talón entra con un poco más de cuerpo y cada tanto le pasa un brillo, como una pulsera. */
.app[data-entra] .col > .stub { animation: talon .7s cubic-bezier(.2, .9, .25, 1) backwards; }
@keyframes talon { from { opacity: 0; transform: translateY(16px) scale(.965); } }
.stub::after {
  content: ""; position: absolute; top: -40%; bottom: -40%; left: -30%; width: 22%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .26), transparent);
  transform: translateX(0) skewX(-14deg);
  animation: brillo 9s cubic-bezier(.45, .05, .5, 1) 1.2s infinite;
}
@keyframes brillo { 0% { transform: translateX(0) skewX(-14deg); } 14%, 100% { transform: translateX(760%) skewX(-14deg); } }
/* Barras y medidores se llenan al entrar; los free que entraron se marcan de a uno. */
.app[data-entra] .meter i,
.app[data-entra] .bar .fill { transform-origin: left center; animation: llenar .9s cubic-bezier(.2, .8, .2, 1) .3s backwards; }
@keyframes llenar { from { transform: scaleX(0); } }
.app[data-entra] .qr.on { animation: marcar .45s cubic-bezier(.3, 1.5, .5, 1) backwards; animation-delay: calc(.35s + var(--i, 0) * 22ms); }
@keyframes marcar { from { opacity: 0; transform: scale(.4); } }
/* El gráfico de las últimas fechas: las columnas crecen de a una y después aparece el número. */
/* Crecen rápido: con 6 fechas y el escalón viejo la última tardaba más de un segundo. */
.app[data-entra] .col-graf .barra { transform-origin: bottom center; animation: crecer .45s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(.15s + var(--i, 0) * 40ms); }
.app[data-entra] .col-graf b { animation: aparecer .3s ease backwards; animation-delay: calc(.3s + var(--i, 0) * 40ms); }
@keyframes crecer { from { transform: scaleY(0); } }
/* Al tocar: se hunde apenas. Con mouse, el borde avisa qué se puede tocar. */
.ev, .btn, .tabs button, .li.click { transition: transform .16s ease, border-color .2s ease, background-color .2s ease; }
.ev:active, .btn:active:not(:disabled), .tabs button:active, .li.click:active { transform: scale(.97); }
@media (hover: hover) {
  .ev:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
  .li.click:hover { background: var(--surface-2); }
}
.box.lista.quieta .pick { animation: none; }

/* El sistema de Passline se ve como una pequeña cabina: deja muy claro qué está leyendo la
   app sin sumar peso ni obligar a Max a ir a otra pantalla. */
.cabina { overflow: hidden; }
.cabina-top { display: flex; align-items: center; gap: 8px; padding: 9px 14px; color: var(--faint); background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent); font-family: var(--mono); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; }
.cabina-luz { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 14%, transparent), 0 0 12px var(--ok); animation: pulso-senal 2.4s ease-in-out infinite; }
.cabina-luz.mal { background: var(--warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 14%, transparent), 0 0 12px var(--warn); }
@keyframes pulso-senal { 50% { transform: scale(.72); opacity: .6; } }

/* Que "Pers." y "Cobra" caigan justo arriba de sus números: cada fila es su propia grilla,
   así que las columnas se alinean dándoles el mismo ancho mínimo. */
.li .n, .li.head span:nth-child(2) { min-width: 52px; }
.li .m, .li.head span:nth-child(3) { min-width: 92px; }
@media (max-width: 420px) {
  .li .m, .li.head span:nth-child(3) { min-width: 78px; }
}
.periodos { margin-bottom: 14px; }
.foot .ver { font-family: var(--mono); font-size: 10px; color: var(--faint); }
.box.copiar { margin-top: 16px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.box.copiar textarea { font-family: var(--mono); font-size: 11px; }

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) body::before { opacity: .35; }
  :root:not([data-theme="dark"]) body::after { opacity: .025; }
}
:root[data-theme="light"] body::before { opacity: .35; }
:root[data-theme="light"] body::after { opacity: .025; }
.bars .fill.c1 { background: #5B8DEF; }
.bars .fill.c2 { background: var(--ok); }
.bars .fill.c3 { background: var(--warn); }
/* En el gráfico de PRs los nombres son largos: más lugar para el nombre y color por team. */
.bars.prs .bar { grid-template-columns: minmax(96px, 38%) 1fr auto; }
.bars .fill.c0 { background: var(--accent); }
/* El buscador de nombres de Passline: después de traer el historial son cientos. */
.field.buscar { margin: 0 0 8px; }

/* En la lista de mesas: la plata se lee de una, y quién la vendió no compite con el cliente. */
.li.cumple .plata { color: var(--ink); font-weight: 700; }
.li.cumple .quien { font-size: 12px; color: var(--muted); }
/* Nombres largos de promo ("2 VIP + botella vodka"): en el celular van arriba de su barra. */
@media (max-width: 560px) {
  .bars:not(.prs) .bar { grid-template-columns: 1fr auto; row-gap: 4px; }
  .bars:not(.prs) .bar b { grid-column: 1 / -1; }
}
/* El día del cumpleaños es lo que se busca de un vistazo: va arriba y se lee solo. */
.li.cumple .cuando { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-texto, var(--accent)); }
.li.cumple.lejos .cuando { color: var(--muted); }
/* Del segundo paso del ingreso en adelante el logo va chico: lo que importa ahí es tu nombre y
   el campo, y en un celular chico el botón "Entrar" tiene que entrar arriba del teclado. */
.hero.chico { padding-top: 2px; }
.hero.chico .marca { width: min(38vw, 148px); }
.hero.chico .prs { font-size: 13px; letter-spacing: .5em; }
/* En el celular, un título largo con su aclaración al lado quedaba en dos columnas apretadas
   ("La planilla / para gerencia" contra "copiar y pegar / en el Drive"). Si no entran los dos,
   la aclaración pasa abajo, entera y en una línea. */
@media (max-width: 560px) {
  .sec-h { flex-wrap: wrap; row-gap: 1px; }
  .sec-h h2 { flex: 1 1 auto; min-width: min(100%, max-content); }
  .sec-h small { flex: 0 1 auto; }
  .sec-h small:only-child, .sec-h > small { max-width: 100%; }
}

/* Cartelitos que explican lo que no se entiende solo (Max: "sin que yo tenga que explicar
   nada"). En la computadora salen al pasar el mouse o con el teclado; en el celular, al tocar,
   el texto sale abajo como aviso. */
.ayuda { position: relative; display: inline-flex; cursor: help; }
.ayuda::after {
  content: attr(data-ayuda);
  position: absolute; left: 0; top: calc(100% + 8px); z-index: 30;
  width: max-content; max-width: min(280px, 70vw); padding: 9px 11px;
  background: var(--ink); color: var(--bg); border-radius: 10px;
  font-family: var(--body); font-size: 12.5px; line-height: 1.35; letter-spacing: 0; text-transform: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .15s ease, transform .15s ease;
}
@media (hover: hover) {
  .ayuda:hover::after, .ayuda:focus-visible::after { opacity: 1; transform: none; }
}
/* La hora de llegada va en su propio renglón y con la palabra "Horario" adelante, para que no
   se mezcle con las entradas y los free (Max, sep 2026). */
.li .horario { display: inline-flex; align-items: baseline; gap: 6px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .03em; font-weight: 500; }
.li .horario small { font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); font-weight: 400; }
.li .horario.si { color: var(--ok); }
.li .horario.no { color: var(--muted); }
.li .horario.sin { color: var(--faint); font-style: italic; }
/* La fila con columna de horario: nombre · horario · personas · cobra, como en una planilla
   (Max, sep 2026: "que no se mezcle con los números, que sea una columna"). */
.li.conhora { grid-template-columns: 1fr auto auto auto; }
.li .h { font-family: var(--mono); font-size: 12px; letter-spacing: .02em; text-align: right; min-width: 56px; }
.li .h.si { color: var(--ok); }
.li .h.no { color: var(--muted); }
.li .h.sin { color: var(--faint); }
.li.head.conhora span:nth-child(2) { min-width: 56px; }
@media (max-width: 420px) {
  /* En pantallas muy angostas el nombre necesita todo el ancho: el horario pasa abajo. */
  .li.conhora { grid-template-columns: 1fr auto auto; }
  .li .h { grid-column: 1; grid-row: 2; text-align: left; min-width: 0; }
  .li.head.conhora span:nth-child(2) { display: none; }
}
/* El tablero del organizador al revés en la computadora: las solapas (lo que más se toca) a la
   izquierda y el talón a la derecha, siempre a la vista. En el celular no cambia nada. */
@media (min-width: 900px) {
  .vista.al-reves { grid-template-columns: minmax(0, 1fr) minmax(0, 430px); }
  .vista.al-reves > .col:first-child { order: 2; }
  .vista.al-reves > .col:last-child { order: 1; position: static; }
}

/* "Ver como": la barra tiene que cantar que lo que se está mirando no es lo propio, y dejar
   volver de un toque. Va arriba de todo, pegada, en los dos temas. */
.vercomo-barra {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 12px;
  margin: 0 0 6px; padding: 10px 14px; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--warn) 55%, var(--line));
  background: color-mix(in srgb, var(--warn) 16%, var(--surface));
  color: var(--ink); font-size: 14px; text-align: center;
}
.vercomo-barra b { font-weight: 700; }

/* Una nota adentro de una caja (ej. "los montos aparecen cuando se confirme la fecha"): va
   arriba de todo, separada de las filas, sin competir con ellas. */
.box > .nota { margin: 0; padding: 13px 14px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.row.sin-monto { grid-template-columns: 1fr; }

/* Una baja que pidió un Jefe PR y el organizador todavía no aprobó. */
.li.two.pendiente { border-left: 3px solid var(--warn); padding-left: 11px; }
.li.two.pendiente .quien { color: var(--warn); }
/* Accesos: de un vistazo, quién ya entró a la app y quién todavía no. */
.li.two.entro { border-left: 3px solid var(--ok); }
.li.two.entro .tipos { color: var(--ok); }
.li.two.sin-entrar { border-left: 3px solid color-mix(in srgb, var(--warn) 60%, transparent); }

/* "Toda la gente": cuatro números grandes con su etiqueta y el porcentaje al lado. */
.box.datos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); overflow: hidden; }
/* **Todas las celdas con las mismas filas** (Max, sep 2026: "no me gusta la tipografía de los
   cuadraditos chicos, no está centrada; que quede homogéneo, centrado, equilibrado"). Antes cada
   celda era una columna suelta: si una etiqueta ocupaba dos líneas, su número bajaba y las cuatro
   quedaban escalonadas. Con `subgrid` las cuatro comparten las mismas tres filas —etiqueta, número
   y nota—, así los números quedan a la misma altura aunque los textos midan distinto. */
.box.datos .dato { display: flex; flex-direction: column; gap: 2px; padding: 14px; background: var(--surface); }
/* La nota va **pegada al número**, no al piso de la celda: empujándola abajo, si una celda tenía
   la nota larga las demás quedaban con un hueco enorme en el medio. Las celdas ya terminan todas a
   la misma altura porque son celdas de una grilla. Y por eso las notas se escriben cortas.
   (Con `subgrid` quedaba más prolijo todavía, pero la celda ancha del total se encimaba con su
   propio número: lo agarró `npm run mirar`.) */
.box.datos .dato b { font-family: var(--display); font-size: 30px; font-weight: 800; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
/* La etiqueta, con el mismo acabado que las del talón: mono, chiquita y en mayúsculas. Es el
   estilo de "etiqueta" que ya usa la app, y tenerlo en un solo lugar es lo que hace que todo se
   vea de la misma familia. */
.box.datos .dato small {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); line-height: 1.3;
}
.box.datos .dato i { font-family: var(--mono); font-size: 11px; font-style: normal; color: var(--accent-texto, var(--accent)); }
@media (min-width: 560px) {
  .box.datos { grid-template-columns: repeat(4, 1fr); }
  /* Con dos datos abajo del total, cuatro columnas dejaban un cuadrado vacío al costado. */
  .box.datos.dos { grid-template-columns: repeat(2, 1fr); }
}
/* Los números del año en "Mesas y botellas": cuántas y por cuánta plata. */
.box.datos .dato span { font-family: var(--display); font-size: 17px; font-weight: 700; color: var(--muted); }
.box.datos .dato.acento b { color: var(--accent-texto, var(--accent)); }
.box.datos .dato.acento span { color: var(--accent-texto, var(--accent)); }
.box.datos .dato.ancho { grid-column: 1 / -1; }
/* **Sin cuadrados vacíos**: cuando son dos datos, la grilla va de a dos y no deja un hueco al
   costado (Max, sep 2026: "hay como un cuadrado vacío que es raro"). */
.box.datos.dos { grid-template-columns: repeat(2, 1fr); }
/* **El cuadro que lleva al detalle es un botón** (Max, sep 2026: "si hago click a mesas o a promos
   me gustaría que lleve a la parte de abajo, con algún efecto visual"). Se ve igual que los otros,
   pero se toca entero y avisa a dónde va. */
button.dato { border: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; width: 100%; }
button.dato:hover, button.dato:focus-visible { background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
button.dato .ver { font-family: var(--mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-texto, var(--accent)); }
button.dato:hover .ver { text-decoration: underline; }
/* Y cuando la pantalla baja hasta la sección, queda marcada un segundo: si no, uno no sabe si
   pasó algo. Anima solo opacidad, como el resto de los efectos. */
.sec.resaltada { position: relative; }
.sec.resaltada::after {
  content: ""; position: absolute; inset: -6px; border-radius: 16px; pointer-events: none;
  border: 2px solid var(--accent); opacity: 0; animation: resaltar 1.5s ease-out;
}
@keyframes resaltar { 0%, 55% { opacity: .85; } 100% { opacity: 0; } }
/* Un número que todavía no sabemos: nunca "$0", que se lee como "no se vendió nada". */
.box.datos .dato b.flojo { color: var(--faint); }
/* **"La noche"**: arriba el total, y abajo sus tres partes, una por columna. Con la grilla
   general de cuatro quedaba un cuadrado gris vacío al costado, que era lo que no cerraba
   (Max, sep 2026: "no sé si me gusta la claridad en la que se ven las cosas"). El total manda y
   las partes se leen un punto más chicas, así se entiende de un vistazo qué es qué. */
.box.datos.noche { grid-template-columns: repeat(3, 1fr); }
.box.datos.noche .dato.ancho b { font-size: 40px; }
.box.datos.noche .dato:not(.ancho) b { font-size: 25px; }
.box.datos.noche .dato:not(.ancho) span { font-family: var(--sans); font-size: 13.5px; font-weight: 500; line-height: 1.3; }
@media (max-width: 559px) {
  .box.datos.noche { grid-template-columns: repeat(2, 1fr); }
  .box.datos.noche .dato:last-child { grid-column: 1 / -1; }
}
/* **Que los tres números queden a la misma altura.** Una etiqueta que entra en una línea
   ("Passline") y otra que entra en dos ("Vendieron los PRs") empujaban el número para abajo y las
   columnas quedaban escalonadas (Max, sep 2026: "el texto no está centrado"). Con `subgrid` las
   tres celdas comparten las mismas filas —etiqueta, número, nota— así que se alinean solas, sin
   inventar alturas fijas. Donde no haya subgrid queda como antes, que se lee igual.
   **Solo desde 560 px**: en el celular las tres van en dos columnas y una abajo, así que las
   filas no son las mismas; forzándolas ahí se encimaban los textos unos sobre otros. */
@media (min-width: 560px) {
  @supports (grid-template-rows: subgrid) {
    .box.datos.noche { grid-template-rows: auto repeat(3, auto); }
    .box.datos.noche .dato.ancho { grid-row: 1; }
    .box.datos.noche .dato:not(.ancho) {
      grid-row: 2 / span 3; display: grid; grid-template-rows: subgrid; align-content: start;
    }
  }
}
/* El botón de copiar y su explicación: en el celular la explicación va abajo, no al costado. */
.sub-acc { flex-wrap: wrap; }
.sub-acc .hint { margin: 0; font-size: 12px; flex: 1 1 100%; }
@media (min-width: 560px) { .sub-acc .hint { flex: 0 1 auto; } }

/* Una lista larga que no tiene por qué estar a la vista (las treinta columnas de Passline). */
.box.plegado { padding: 0; }
.box.plegado > summary { padding: 13px 14px; cursor: pointer; font-size: 14px; font-weight: 600; }
.box.plegado > .hint { margin: 0; padding: 0 14px 14px; font-family: var(--mono); font-size: 11.5px; line-height: 1.7; word-break: break-word; }

/* Lo que pagó cada comprador, al lado de los botones de contacto. */
.li.cumple .acc { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.li.cumple .acc .m { font-family: var(--display); font-size: 19px; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }

/* El cumpleaños de un PR que cae esta semana. */
.li.two.pronto { border-left: 3px solid var(--accent); padding-left: 11px; }
.li.two .cuando { font-family: var(--mono); font-size: 12px; color: var(--accent-texto, var(--accent)); white-space: nowrap; }
.pedir-cumple { margin-bottom: 4px; border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.pedir-cumple p { margin: 0 0 10px; font-size: 15px; }
.pedir-cumple .dos { align-items: end; }

/* En el talón, la etiqueta con ayuda tiene que verse igual que las otras. */
.stub-foot small .ayuda { color: inherit; border-bottom-color: currentColor; }

/* La barra de abajo del celular: el acceso directo a lo que más se usa. En la computadora no
   va (ahí están las solapas de arriba). */
nav.abajo { display: none; }
@media (max-width: 899px) {
  nav.abajo {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    display: flex; gap: 2px;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    background: var(--bg); border-top: 1px solid var(--line);
    box-shadow: 0 -8px 24px rgba(0,0,0,.35);
  }
  nav.abajo button {
    flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 8px 4px 7px; border: 0; border-radius: 16px; background: none; color: var(--muted);
    font-size: 11.5px; font-weight: 600; cursor: pointer;
  }
  nav.abajo button svg { width: 22px; height: 22px; }
  nav.abajo button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  nav.abajo button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
  body.con-barra .app { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
}

/* Una lista de casillas (qué botones van en la barra). */
/* **Las casillas van como fichas, en fila** (Max, sep 2026: "esos botones se ven feos, mejorá el
   diseño"). Se veían la casilla arriba y el texto abajo, centrados: `.form label` pone
   `flex-direction: column` para los campos con su etiqueta, y `.check` no lo daba vuelta. Ahora
   cada opción es una ficha que se toca entera y se prende con el color de la marca. */
.form .checks { display: flex; flex-wrap: wrap; gap: 8px; }
.form .check {
  display: flex; flex-direction: row; align-items: center; gap: 9px; margin: 0;
  min-height: 44px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--ink); font-size: 15px; font-weight: 500; cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.form .check:hover { border-color: var(--muted); }
.form .check input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; margin: 0; }
.form .check:has(input:checked) {
  border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}

/* Una promo con botella que se abre para ver quiénes la compraron. */
.bars .bar.click { cursor: pointer; border-radius: 10px; }
.bars .bar.click:hover, .bars .bar.click.on { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.bars .bar b small { font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--muted); }
/* Ventas RHEO: cada promo resumida y, al tocarla, quiénes la compraron. */
.li.abrible { cursor: pointer; }
.li.abrible .who span { color: var(--faint); }
.li.abrible[aria-expanded="true"] { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.gente-lista.dentro { margin: 0 10px 10px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface-2); }
.gente-lista.dentro .li { padding: 9px 12px; }
.bars .gente-lista.abre { grid-column: 1 / -1; margin: 2px 0 10px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }

/* Con la barra de abajo completa, las solapas de arriba repiten lo mismo: en el celular no van. */
@media (max-width: 899px) { body.barra-completa nav.tabs.vistas { display: none; } }

/* "¿Les pagás el fijo?": lo que Max ya decidió queda marcado, aunque haya decidido que no.
   Así la próxima vez que abre la fecha sabe qué miró y qué no. */
.li.sin-decidir { border-left: 3px solid var(--warn); padding-left: 11px; }
.li.dec-no { opacity: .72; }
.li.dec-si { border-left: 3px solid var(--ok); padding-left: 11px; }
.li.dec-si .m { color: var(--ok); }
.btn.chico.ghost { background: none; border: 1px solid var(--line); color: var(--ink); }

/* La celda vacía que alinea las columnas de fechas (pasadas con pasadas, próximas con próximas). */
.evs .ev-hueco { display: block; }

/* Las carpetas de Drive donde la app busca planillas. Max suma las subcarpetas sueltas (las
   fechas pasadas, las mesas) pegando el link, así que la lista tiene que leerse de un vistazo. */
.carpetas { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.carpeta-fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.carpeta-fila .link { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link.chico { font-size: 12.5px; opacity: .8; flex: none; }
.form.fila { flex-direction: row; align-items: center; gap: 8px; }
.form.fila .field { flex: 1 1 auto; min-width: 0; }
.form.fila .btn { flex: none; }

/* Pulido (Grok, sep 2026): más consistencia visual, sin cambiar lo que Max ya definió
   (barra opaca de borde a borde, talón fuerte, solo transform/opacity). */
html { overflow-x: hidden; -webkit-tap-highlight-color: transparent; }
.btn { min-height: 44px; }
.btn.chico { min-height: 36px; }
.btn.big { min-height: 48px; letter-spacing: .01em; }
.field { min-height: 48px; }
.box.empty { text-align: center; padding: 28px 18px; color: var(--muted); line-height: 1.5; }
.evs .ev-hueco { min-height: 62px; }

/* Primera carga: huesos en vez de un "Cargando…" suelto. */
.esqueletos { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.esq {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  overflow: hidden; position: relative;
}
.esq::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ink) 8%, transparent), transparent);
  transform: translateX(-100%);
  animation: esq 1.4s ease-in-out infinite;
}
@keyframes esq { to { transform: translateX(100%); } }
.esq-talon { height: 168px; background: color-mix(in srgb, var(--accent) 22%, var(--surface)); border: 0; }
.esq-caja { height: 72px; }
.esq-caja.alta { height: 120px; }
@media (prefers-reduced-motion: reduce) {
  .esq::after { animation: none; }
}

@media (max-width: 899px) {
  nav.abajo { padding-left: max(6px, env(safe-area-inset-left)); padding-right: max(6px, env(safe-area-inset-right)); }
  nav.abajo button { min-height: 48px; }
  nav.abajo button:active { transform: scale(.97); }
  nav.abajo button[aria-pressed="true"] { box-shadow: 0 8px 18px -12px var(--ink); }
  body.con-barra .toast { z-index: 40; bottom: calc(72px + env(safe-area-inset-bottom)); }
}
.vercomo-barra { top: env(safe-area-inset-top); }

/* Mirando la app como otro: los botones que escriben se esconden. La API igual rechaza el POST. */
body.vercomo [data-confirmar],
body.vercomo [data-pagado],
body.vercomo [data-baja],
body.vercomo [data-aprobar-baja],
body.vercomo [data-codigo],
body.vercomo [data-excepcion],
body.vercomo [data-fijo-todos],
body.vercomo [data-socio],
body.vercomo .pedir-cumple { display: none !important; }

@media (max-width: 700px) {
  body::before { animation: none; filter: blur(12px); }
}

@media (min-width: 900px) {
  .app { padding-top: calc(env(safe-area-inset-top) + 22px); }
}

/* El detalle que se abre al tocar una línea (de dónde sale ese número): va metido para adentro y
   más apagado, para que se lea como "esto es parte de lo de arriba". */
.sub { padding-left: 12px; border-left: 2px solid var(--line); margin: 2px 0 6px 6px; }

/* **"Ver las 32 anteriores": un botón de verdad** (Max, sep 2026: "que sea más claro y más
   visible"). Ancho completo, a tamaño de dedo, con la flecha que se da vuelta al abrir. */
.ver-mas { margin: 8px 0 0; }
.ver-mas > summary { list-style: none; display: flex; align-items: center; justify-content: center;
  gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); font-weight: 650; font-size: 14.5px; cursor: pointer; }
.ver-mas > summary::-webkit-details-marker { display: none; }
.ver-mas > summary .chev { width: 9px; height: 9px; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .18s ease; }
.ver-mas[open] > summary .chev { transform: translateY(1px) rotate(225deg); }
.ver-mas > summary .txt-abierto, .ver-mas[open] > summary .txt { display: none; }
.ver-mas[open] > summary .txt-abierto { display: inline; }
.ver-mas > .box { margin-top: 8px; }
@media (prefers-reduced-motion: reduce) { .ver-mas > summary .chev { transition: none; } }
.sub .li { padding-top: 7px; padding-bottom: 7px; }
.sub .li b { font-weight: 600; font-size: 14.5px; }
[data-destino] { cursor: pointer; }

/* Todo lo que se toca entra en un dedo (mínimo 40 px de alto, medido con el script `npm run
   mirar`). Los links de texto y los botones chicos se veían bien pero eran de 27 a 30 px: en el
   celular se yerra el toque. Se agranda **el área**, no la letra, así no cambia el diseño. */
.link { min-height: 40px; display: inline-flex; align-items: center; }
.sub-acc .link { min-height: 40px; }
.tabs.cuatro button { padding: 11px 4px; }
.btn.chico { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
.me .link { padding-inline: 2px; }

/* Lo que se arrastra o se elige con el dedo también tiene que medir 40 px (medido con
   `npm run mirar`): el deslizador de la apertura venía en 20 y el menú de los nombres de
   Passline en 31. */
.apertura-ajuste input[type="range"] { height: 40px; }
.sel { min-height: 40px; }

/* Los campos de fecha en el iPhone. Safari los dibuja a su manera: centra el valor y lo agranda,
   así que "1 ene 2026" quedaba en el medio de una caja enorme y parecía un botón, no un campo
   (Max, sep 2026, mirando desde el teléfono). Se los deja alineados a la izquierda y con la misma
   altura que el resto, como en la computadora. */
input[type="date"].field {
  -webkit-appearance: none; appearance: none;
  text-align: left; min-height: 48px; line-height: 1.2;
}
/* Y en Safari el "reloj" interno empuja el texto: se lo saca del flujo. */
input[type="date"].field::-webkit-date-and-time-value { text-align: left; margin: 0; }
input[type="date"].field::-webkit-calendar-picker-indicator { margin-left: auto; }

/* **Cómo eran los teams antes**, un renglón por team (Max, sep 2026: "esa cantidad de personas es
   la que metió cada equipo en ese mes; no entiendo, no está claro"). Antes los tres teams iban
   apretados en una sola línea de texto corrido y no se sabía qué número era qué. Ahora el mes
   arriba y abajo cada team en su fila: nombre, cuántos PRs tenía y cuánta gente metió. */
.li.mes-team { display: block; }
.teams-mes { margin-top: 8px; display: grid; gap: 4px; }
.team-fila { display: grid; grid-template-columns: 1fr auto auto; align-items: baseline; gap: 10px; }
.team-fila b { font-size: 14px; font-weight: 600; }
.team-fila span { font-size: 12.5px; color: var(--muted); font-family: var(--mono); }
.team-fila .n { text-align: right; font-family: var(--display); font-size: 17px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
/* Y el número dice de qué es: "138 personas", no un 138 suelto. */
.team-fila .n small { font-family: var(--sans); font-size: 11.5px; font-weight: 500; color: var(--muted); }

/* **Las listas largas arrancan plegadas** (Max, sep 2026: "cuando hay demasiada información hacia
   abajo, que aparezca el botoncito para desglosarlo; si no hay que scrollear mucho y no queda
   cómodo"). Se ve el título con su resumen —los números de un vistazo— y el contenido se abre al
   tocar. El triángulo de fábrica se reemplaza por un signo que se lee igual en celular y compu. */
.sec.plegada { display: flex; flex-direction: column; gap: 10px; }
.sec.plegada > summary {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  list-style: none; cursor: pointer; min-height: 44px; padding: 8px 12px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--surface);
}
.sec.plegada > summary::-webkit-details-marker { display: none; }
.sec.plegada > summary .h2 { font-size: 19px; font-weight: 650; text-wrap: balance; }
.sec.plegada > summary small { font-family: var(--mono); font-size: 12px; color: var(--faint); text-align: right; margin-left: auto; }
/* El "+" / "−" al final: dice que hay más abajo, que es justo lo que faltaba. */
.sec.plegada > summary::after {
  content: "+"; flex: none; width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--line); font-size: 16px; line-height: 1; color: var(--muted);
}
.sec.plegada[open] > summary::after { content: "−"; }
.sec.plegada > summary:hover { border-color: var(--accent); }
.sec.plegada > summary:hover::after { color: var(--ink); border-color: var(--accent); }

/* "38" solo no decía de qué era (Max, sep 2026: "que al costadito diga pax, así se entiende que
   son 38 personas que metieron los PRs"). La unidad va pegada al número, chica y en la misma
   tinta del talón. */
.stub-foot b i { font-family: var(--sans); font-style: normal; font-size: 13px; font-weight: 600; margin-left: 4px; opacity: .72; }

/* **Free masivos: una fila por persona, de una sola línea.** Antes eran tres cosas metidas en una
   grilla de dos columnas, así que el "3 veces" caía abajo de los botones y cada persona ocupaba
   media pantalla: entraban seis (Max, sep 2026: "acá se puede mejorar mucho más el diseño"). Ahora
   el número va adelante, como una ficha, y se lee la lista de un saque. */
.li.masiva { grid-template-columns: 54px minmax(0, 1fr) auto; gap: 12px; padding: 9px 14px; }
.li.masiva .veces {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  padding: 6px 4px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line);
}
.li.masiva .veces b { font-family: var(--display); font-weight: 800; font-size: 20px; line-height: 1; font-variant-numeric: tabular-nums; }
.li.masiva .veces small { font-family: var(--mono); font-size: 9px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
/* El que volvió más de una vez es el que le responde al mailing: va marcado. */
.li.masiva .veces.repite { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: color-mix(in srgb, var(--accent) 12%, var(--surface-2)); }
.li.masiva .veces.repite b { color: var(--accent-texto, var(--accent)); }
.li.masiva .who b { font-size: 15px; }
.li.masiva .who span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.li.masiva .acc { display: flex; align-items: center; gap: 10px; }
/* La lista de fechas del mailing: fecha, barra para comparar y el número. Sin la frase repetida. */
.li.fila-mailing { grid-template-columns: minmax(0, 1fr) auto; padding: 9px 14px; }
.li.fila-mailing .barrita { display: block; height: 5px; margin-top: 6px; border-radius: 99px; background: var(--surface-2); position: relative; overflow: hidden; }
.li.fila-mailing .barrita::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p, 0%); border-radius: 99px; background: var(--accent); }
.li.fila-mailing .n { font-size: 22px; }
@media (max-width: 560px) {
  .li.masiva { grid-template-columns: 46px minmax(0, 1fr); row-gap: 6px; }
  .li.masiva .acc { grid-column: 2; justify-content: flex-start; }
}

/* **"Qué se vende más": el nombre arriba, la barra abajo.** Los nombres de las promos son largos
   ("2 ENTRADAS VIP 🍒 + 1 BOTELLA VODKA SERNOVA") y en la columna de 78 px quedaban partidos en
   seis renglones, con la barra perdida al costado (Max, sep 2026: "el diseño de acá lo podemos
   mejorar mucho; en la web y en el teléfono tiene que quedar increíble"). Ahora cada fila usa el
   ancho entero: nombre y plata en una línea, la barra debajo y el número a la derecha. */
.bars.nombres .bar {
  grid-template-columns: 1fr auto; grid-template-rows: auto auto;
  column-gap: 14px; row-gap: 7px; align-items: center;
}
.bars.nombres .bar > b { grid-area: 1 / 1; flex-direction: row; align-items: baseline; gap: 8px; min-width: 0; }
.bars.nombres .bar > b .nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bars.nombres .bar > b small { flex: none; }
.bars.nombres .bar > .track { grid-area: 2 / 1; }
.bars.nombres .bar > .n { grid-area: 1 / 2 / span 2 / 3; align-self: center; }

/* "Lo que viene": el evento que sigue, arriba de todo. Es lo que Max mira todos los días, así que
   el bloque va marcado con la luz de la marca y un poco más presente que el resto. */
.box.datos.noche.proximo { border-color: color-mix(in srgb, var(--accent) 34%, var(--line)); }

/* **Las fechas del historial, en la tira.** Van todas —Max quiere correr la tira y ver las de
   antes— pero se distinguen: son noches viejas que la app encontró en Passline, no fechas de
   trabajo. Solo cambia la etiqueta y el tono del borde; el color de marca queda. */
.ev.vieja { border-style: dashed; }
.ev.vieja b i { font-style: normal; font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); margin-left: 6px; }

/* **La fecha que sigue, marcada** (Max, sep 2026: "que se marque cuál es la fecha que sigue, con
   algún colorcito distinto, para identificarla rápido"). Un borde vivo y su etiqueta; el color de
   la marca queda, así no compite con el de la fiesta. */
.ev.proxima { border-color: var(--ok); }
.ev.proxima b i { font-style: normal; font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ok); margin-left: 6px; }
/* En el menú de "Ir a una fecha" el sistema dibuja las opciones, así que lo que se lee siempre es
   el "· la próxima" del texto; el color es un extra donde el navegador lo respeta. */
.mas select option.proxima { color: var(--ok); font-weight: 700; }
/* Cada tipo de entrada se toca y se abre quiénes lo compraron: el "quiénes" es la invitación. */
.li.two .m i.ver { display: block; font-style: normal; font-family: var(--mono); font-size: 10px;
  letter-spacing: .05em; text-transform: uppercase; color: var(--accent-texto, var(--accent)); }

/* **El panel de filtros de "Mesas y botellas"** (Max, sep 2026: "no me gustan esos botoncitos ahí
   aislados en la parte web; que queden excelentes"). Antes eran tres hileras de botones sueltos
   flotando sobre el fondo. Ahora es una caja con una fila por filtro, cada una con su rótulo y sus
   opciones dentro de una pista tipo interruptor. En la computadora el rótulo va a la izquierda; en
   el celular, arriba, que es lo único que entra. */
.panel-filtros { display: grid; gap: 12px; }
.filtro-fila { display: grid; gap: 7px; }
.filtro-rotulo { font-family: var(--mono); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); }
.filtro-fila .ordenes { display: inline-flex; gap: 4px; padding: 4px; max-width: 100%;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; }
.filtro-fila .orden { border: 0; background: transparent; min-height: 38px; padding: 8px 15px; font-weight: 550; }
.filtro-fila .orden.on { background: var(--ink); color: var(--bg); box-shadow: 0 8px 18px -12px rgba(0, 0, 0, .8); }
.panel-filtros .otro-periodo > summary { font-family: var(--mono); font-size: 10.5px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--faint); cursor: pointer; padding: 4px 0; }
.panel-filtros .otro-periodo .form { margin-top: 8px; }
@media (min-width: 680px) {
  .filtro-fila { grid-template-columns: 116px 1fr; align-items: center; gap: 14px; }
  .filtro-rotulo { text-align: right; }
  .panel-filtros .otro-periodo { padding-left: 130px; }
}

/* **Se ve cuándo un botón está trabajando** (Max, sep 2026: "cuando hago clic no queda ninguna
   barrita ni nada indicándome que está descargando algo"). Mientras dura el pedido el botón queda
   marcado y su flecha se convierte en un anillo que gira. Es solo transform y opacity. */
[data-yendo] { opacity: 1 !important; }
.accion[data-yendo] { background: var(--surface-2); }
.accion[data-yendo] .accion-ir { font-size: 0; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--accent); animation: gira .7s linear infinite; }
.btn[data-yendo], .link[data-yendo], .orden[data-yendo] { position: relative; }
.btn[data-yendo]::after, .link[data-yendo]::after, .orden[data-yendo]::after {
  content: ""; display: inline-block; vertical-align: -2px; margin-left: 8px; width: 13px; height: 13px;
  border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; opacity: .7;
  animation: gira .7s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { [data-yendo] .accion-ir, [data-yendo]::after { animation: none; } }

/* Los botones del panel de filtros entran en un dedo (40 px), como el resto. */
.filtro-fila .orden { min-height: 40px; }

/* ---------- El celular: los botones parejos y centrados (Max, sep 2026) ----------
   "Ver que los botones estén bien esparcidos, distribuidos de forma hegemónica y centrados."
   Las hileras de chips iban en `flex-wrap`: la última fila quedaba a medias y pegada a la
   izquierda, con anchos distintos según el largo del texto ("Todo" al lado de "Últimos 2 meses").
   En el celular van en **grilla de columnas iguales**: todas las filas ocupan el ancho completo,
   cada chip mide lo mismo y el texto va centrado. En la computadora se quedan como estaban, que
   ahí entran de una. */
@media (max-width: 679px) {
  .ordenes { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 6px; }
  .orden {
    display: flex; align-items: center; justify-content: center;
    text-align: center; padding: 8px 6px; line-height: 1.15;
  }
  /* El panel de filtros tiene su propia pista redondeada: la grilla va adentro. */
  .filtro-fila .ordenes { display: grid; grid-template-columns: repeat(auto-fit, minmax(82px, 1fr)); gap: 4px; border-radius: 22px; }
  .filtro-fila .orden { border-radius: 999px; }
  /* "Mesas y botellas" no entra en una línea con el tamaño de la computadora y esa solapa quedaba
     más alta que las otras dos, con la fila desprolija. */
  .tabs.tres button { font-size: 14px; padding: 10px 3px; }
}

/* En la tarjeta del historial, "sin comparar" se salía de la celda y quedaba cortado: la nota va
   debajo del número, no al costado. Así las tres celdas de la tira quedan del mismo alto. */
@media (max-width: 899px) {
  .tabla td.ultimas small.corto { display: block; margin-left: 0; margin-top: 2px; }
}

/* Los filtros plegados del celular: una línea que dice qué está puesto, y se abren de un toque. */
.panel-filtros.plegado { padding: 0; }
.panel-filtros.plegado > summary {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 13px 14px; min-height: 48px; list-style: none;
}
.panel-filtros.plegado > summary::-webkit-details-marker { display: none; }
.panel-filtros.plegado > summary i {
  font-style: normal; font-family: var(--mono); font-size: 10.5px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--faint); flex: none;
}
.panel-filtros.plegado > summary span {
  flex: 1; min-width: 0; font-size: 14px; font-weight: 550; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.panel-filtros.plegado > summary::after {
  content: "+"; flex: none; font-size: 19px; line-height: 1; color: var(--muted);
}
.panel-filtros.plegado[open] > summary::after { content: "−"; }
.panel-filtros.plegado[open] > summary { border-bottom: 1px solid var(--line); }
.panel-filtros.plegado > .filtro-fila, .panel-filtros.plegado > .otro-periodo { margin: 12px 14px; }

/* El rótulo "Ordenar por" al lado del buscador: la fila del filtro se estira con el ancho que
   sobra y en el celular pasa abajo, entera. */
.filtros .filtro-fila { flex: 1 1 260px; min-width: 0; }

/* Los chips de la grilla no pueden ser más anchos que su columna: sin esto, una etiqueta larga
   ("BAGFEST 11/09") empujaba la fila y aparecía scroll horizontal en el celular. */
@media (max-width: 679px) {
  .orden { min-width: 0; overflow-wrap: anywhere; }
}

/* "La gente": el nombre se toca y se abre abajo qué compró, sin salir de la pantalla. Los botones
   de WhatsApp y mail quedan afuera de lo que se toca, así no se abre el detalle sin querer. */
.li.cumple { flex-wrap: wrap; }
.quien-abre {
  flex: 1 1 auto; min-width: 0; display: block; text-align: left; cursor: pointer;
  border: 0; background: transparent; padding: 0; color: inherit; font: inherit;
}
.quien-abre::after { content: " +"; color: var(--faint); font-family: var(--mono); }
.li.cumple.abierta .quien-abre::after { content: " −"; }
.gente-mas { flex: 1 0 100%; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.gente-mas .chips { margin-bottom: 8px; }
.gente-mas .lista.chica .li.two { padding: 7px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.gente-mas .lista.chica .li.two:last-child { border-bottom: 0; }

/* El panel de filtros es una grilla: sin `minmax(0, 1fr)` su columna crece hasta el ancho natural
   de los chips (seis chips de 96 px = 576) y la pantalla se va de ancho. Medido: 406 > 390. */
.panel-filtros { grid-template-columns: minmax(0, 1fr); }
.filtro-fila, .filtro-fila .ordenes, .ordenes { min-width: 0; }

/* El PR que fue a las últimas fechas y no metió a nadie: es lo que el Jefe PR mira para decidir
   si sigue (Max, sep 2026). Va con el naranja de aviso, no con el rojo de error: no está roto. */
.pill.apagado { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }

/* El resumen del mes del PR (el buscador está más abajo, con el resto de "La gente"). */
.box.datos.dos.mes { margin-top: -4px; }

/* **El estado de Passline, en color solo cuando hay algo que hacer** (Max, sep 2026: "no sé si lo
   quiero ver todo el tiempo; más que nada que me muestre si se deslinkearon, con algún color").
   La sección va plegada cuando está todo bien, y cuando no, el resumen sale en naranja. */
.sec-h small .alerta { color: var(--warn); font-weight: 700; }

/* **La planilla de la fecha** (Max, sep 2026: "que sea tabular, como una planilla de Excel, para
   que sea súper fácil"). Las mismas columnas que la que hace a mano, con mesas y promos aparte.
   Va en su propia caja con scroll horizontal: nueve columnas no entran en un celular y el scroll
   de la página no se toca. */
/* **La caja tiene que poder achicarse.** Sin esto, la tabla de 620 px estiraba su columna: en el
   celular aparecía scroll horizontal de la página (474 > 390) y en la computadora la tabla se
   salía de su columna y se montaba sobre la de al lado. Es la regla de siempre acá: `min-width: 0`
   en lo de adentro, y el scroll va **dentro** de la caja, no en la página. */
/* **El `overflow: hidden` es el que lo contiene de verdad.** La columna del grid está limitada
   (`minmax(0, 1fr)`), pero un item más ancho que su pista **no la agranda: se desborda encima de
   la columna de al lado**, y eso era lo que `npm run mirar` marcaba como textos encimados. */
details.plegada[data-abre="planillafecha"] { min-width: 0; max-width: 100%; overflow: hidden; }
details.plegada[data-abre="planillafecha"] > * { min-width: 0; max-width: 100%; }
.planilla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line);
  border-radius: 14px; background: var(--surface); width: 100%; min-width: 0; max-width: 100%;
  box-sizing: border-box; }
/* **Sin `min-width`: la tabla tiene que ENTRAR en su columna.** Con 560 px las dos últimas
   columnas quedaban cortadas —y `npm run mirar` las veía encimadas con la columna de al lado,
   porque el recorte no mueve la caja—. El nombre puede cortar en dos renglones, que es lo que le
   da aire a las nueve columnas; los números nunca. */
.planilla { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.planilla th, .planilla td { padding: 8px 6px; text-align: right; white-space: nowrap;
  border-bottom: 1px solid var(--line); }
.planilla th.nom, .planilla td.nom { white-space: normal; }
.planilla th { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); text-align: right; position: sticky; top: 0; background: var(--surface-2); }
.planilla th.nom, .planilla th.tm, .planilla td.nom, .planilla td.tm { text-align: left; }
.planilla td.nom { font-weight: 650; }
.planilla td.tm { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.planilla td.tot { font-weight: 700; }
.planilla td.plata { font-family: var(--display); font-weight: 800; font-variant-numeric: tabular-nums; }
/* El "·" de una celda vacía va con el gris de los textos secundarios: `--faint` se queda en 4,44
   y el mínimo es 4,5 (lo midió `npm run mirar`). */
.planilla .cero { color: var(--muted); }
/* "Vino" es el que asistió sin llegar al mínimo: Max lo pinta de verde en su planilla y decide
   después si le paga el fijo igual, según cómo venga la noche. */
.planilla .vino { font-style: normal; font-family: var(--mono); font-size: 10.5px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ok); }
.planilla tr.click { cursor: pointer; }
.planilla tr.click:hover td, .planilla tr.abierta td { background: var(--surface-2); }
.planilla tr.jefe td { background: color-mix(in srgb, var(--azul) 8%, transparent); }
.planilla tr.subtotal td, .planilla tr.retotal td { font-weight: 800; background: var(--surface-2); }
.planilla tr.retotal td.plata { color: var(--accent-texto, var(--accent)); font-size: 18px; }
.planilla tr.detalle td { padding: 0 0 10px; background: var(--surface-2); }
/* En el celular nueve columnas no entran: se esconden Team y Asistencia —el team ya se ve en la
   lista de arriba y la asistencia es una decisión que Max toma en la computadora— y la tabla entra
   sin scroll. Desde 640 px están todas. */
@media (max-width: 639px) {
  .planilla { font-size: 13px; }
  .planilla th.tm, .planilla td.tm, .planilla thead th:nth-child(3), .planilla tbody td:nth-child(3) { display: none; }
  .planilla th, .planilla td { padding: 8px 5px; }
}
.planilla.aparte { margin-top: 10px; min-width: 0; }
.planilla.aparte td { color: var(--muted); border-bottom: 0; }

/* El buscador de personas de la fecha: nombre, mail o WhatsApp (Max, sep 2026). */
.buscar-gente { display: flex; gap: 8px; margin-bottom: 10px; }
.buscar-gente input { flex: 1; min-width: 0; height: 44px; padding: 0 12px; font-size: 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; color: inherit;
  /* El texto de adentro no se corta a la mitad (Max, sep 2026: "la parte de WhatsApp no se llega
     a leer"): en pantallas angostas se achica un punto y, si aun así no entra, termina en "…". */
  text-overflow: ellipsis; }
@media (max-width: 480px) { .buscar-gente input { font-size: 15px; padding: 0 10px; } }
.buscar-gente input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* **Preguntarle a la app** (Max, sep 2026: "que visualmente se entienda más, y acordate que me
   gusta sumar efectos visuales"). El campo y el botón en una sola fila desde 560px; los ejemplos,
   fichas que se tocan y llenan el campo (a tamaño de dedo, no la etiqueta chiquita de un chip). */
.box.preguntar { padding: 12px 14px 14px; }
.pregunta-fila { display: grid; gap: 10px; align-items: end; }
.pregunta-fila .crece { min-width: 0; }
@media (min-width: 560px) { .pregunta-fila { grid-template-columns: minmax(0, 1fr) auto; } }
.pregunta-fila .acciones { display: flex; gap: 8px; }
.pregunta-fila .acciones .btn[type="submit"] { flex: 1 1 auto; }
/* El micrófono: cuadrado, a tamaño de dedo, y mientras escucha late (solo opacidad y escala). */
.btn.micro { flex: 0 0 auto; width: 48px; min-height: 48px; padding: 0; display: inline-flex;
  align-items: center; justify-content: center; gap: 6px; }
.btn.micro.oyendo { width: auto; padding: 0 16px; }
.btn.micro.oyendo svg { animation: micro-late 1.2s ease-in-out infinite; }
.oyendo-hint { margin: 8px 0 0; }
@keyframes micro-late { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .btn.micro.oyendo svg { animation: none; opacity: 1; } }
.box.preguntar .tipos, .box.respuesta .tipos { font-family: var(--mono); font-size: 11px;
  letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.box.preguntar > form .tipos { margin: 14px 0 6px; }
/* Los ejemplos arrancan plegados: en el celular eran cinco fichas antes de poder escribir nada. */
.ejemplos { margin-top: 12px; }
.ejemplos > summary { font-family: var(--mono); font-size: 11px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted); cursor: pointer; min-height: 24px; }
.ejemplos[open] > summary { margin-bottom: 8px; }
.chip[data-ejemplo] { min-height: 40px; display: inline-flex; align-items: center; cursor: pointer;
  color: inherit; text-align: left; transition: transform .14s ease, opacity .14s ease; }
.chip[data-ejemplo]:hover { border-color: var(--accent); transform: translateY(-1px); }
.chip[data-ejemplo]:active { transform: translateY(0) scale(.98); }

/* La respuesta entra desde abajo, con su barra de color al costado: se nota que llegó algo
   nuevo sin que se mueva nada de lo que estabas por tocar. */
.box.respuesta { position: relative; margin-top: 12px; padding: 12px 14px 12px 16px;
  background: var(--surface-2); border-left: 3px solid var(--accent);
  animation: llega-respuesta .28s ease both; }
.box.respuesta .pregunta { margin: 0; font-family: var(--mono); font-size: 11.5px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.box.respuesta .dice { margin: 10px 0 0; font-size: 16px; line-height: 1.6; }
/* Cada punto en su renglón, con el número al costado: leído de un vistazo y no un párrafo
   apretado (Max, sep 2026: "está muy comprimido, me gustaría que esté más aislado"). */
.dice-lista { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.dice-lista li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px;
  align-items: start; padding: 10px 12px; border-radius: 12px; background: var(--surface);
  border: 1px solid var(--line); animation: llega-respuesta .3s ease both;
  animation-delay: calc(var(--i, 0) * 45ms); }
.dice-lista .n { display: inline-flex; align-items: center; justify-content: center; width: 26px;
  height: 26px; border-radius: 50%; background: var(--surface-2); color: var(--accent-texto, var(--accent));
  font-family: var(--mono); font-size: 12px; font-weight: 700; }
.dice-lista .q { font-size: 15.5px; line-height: 1.5; }
.dice-lista b, .box.respuesta .dice b { font-weight: 700; }
.box.respuesta .plata { font-style: normal; font-weight: 700; color: var(--accent-texto, var(--accent)); }
.box.respuesta .dice.suelta { margin-top: 10px; font-size: 14.5px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .dice-lista li { animation: none; } }
.box.respuesta .tipos { margin: 10px 0 0; }
.box.respuesta.pensando .dice { color: var(--muted); }
.puntos { display: inline-flex; gap: 3px; margin-left: 4px; vertical-align: baseline; }
.puntos i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .25;
  animation: late 1.1s ease-in-out infinite; }
.puntos i:nth-child(2) { animation-delay: .18s; }
.puntos i:nth-child(3) { animation-delay: .36s; }
@keyframes late { 0%, 70%, 100% { opacity: .25; } 35% { opacity: 1; } }
@keyframes llega-respuesta { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .box.respuesta { animation: none; }
  .puntos i { animation: none; opacity: .6; }
  .chip[data-ejemplo] { transition: none; }
}

.code-bloque { margin: 6px 14px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2);
  font-family: var(--mono); font-size: 12.5px; overflow-x: auto; }

/* **Un número y su unidad no van pegados** (Max, sep 2026, mirando el celular: "hay números que
   están muy pegados a las letras"). Pasa cuando el número y su unidad son dos etiquetas en la
   misma línea: "8personas", "$70.000c/u". La unidad va separada, chica y en mayúsculas, alineada
   con la base del número; no es un problema de ancho, es que faltaba el aire. */
.acc .n + .unidad, .m > small { margin-left: 6px; }
.acc .unidad, .m > small { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--faint); }

/* **La sub-pantalla para preguntar** (Max, sep 2026: "un botoncito que yo toco, le hablo, y la
   respuesta me la manda en una sub-pantalla, con el fondo negro para que no se mezcle"). En el
   celular sube desde abajo y ocupa lo que necesita; en la computadora queda centrada. El fondo
   tapa la app entera, así lo que se lee es la respuesta y nada más. Solo transform y opacity. */
.hoja-fondo { position: fixed; inset: 0; z-index: 60; background: rgba(6, 4, 8, .82);
  backdrop-filter: blur(3px); animation: hoja-fondo .18s ease both; }
.hoja { position: fixed; z-index: 61; left: 0; right: 0; bottom: 0;
  max-height: 88vh; overflow: auto; -webkit-overflow-scrolling: touch;
  padding: 16px 16px calc(20px + env(safe-area-inset-bottom));
  background: var(--bg); border-top: 1px solid var(--line);
  border-radius: 20px 20px 0 0; box-shadow: 0 -18px 40px rgba(0, 0, 0, .5);
  animation: hoja-sube .24s cubic-bezier(.2, .8, .3, 1) both; }
.hoja-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.hoja-top h2 { margin: 0; font-family: var(--display); font-size: 25px; font-weight: 800; }
.hoja > .tipos { margin: 2px 0 10px; }
@keyframes hoja-fondo { from { opacity: 0; } to { opacity: 1; } }
@keyframes hoja-sube { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (min-width: 700px) {
  .hoja { left: 50%; right: auto; top: 50%; bottom: auto; width: min(560px, calc(100vw - 48px));
    transform: translate(-50%, -50%); border-radius: 20px; border: 1px solid var(--line);
    animation: hoja-aparece .22s cubic-bezier(.2, .8, .3, 1) both; }
  @keyframes hoja-aparece {
    from { opacity: 0; transform: translate(-50%, calc(-50% + 12px)) scale(.985); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
}
@media (prefers-reduced-motion: reduce) { .hoja, .hoja-fondo { animation: none; } }
body.hoja-abierta { overflow: hidden; }
body.hoja-abierta nav.abajo { display: none; }

/* El lanzador: una línea al lado del talón, con el micrófono a mano. */
.box.preguntar-lanza { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.box.preguntar-lanza .acciones { display: flex; gap: 8px; }

/* **El micrófono flotante del celular**: abajo a la derecha, arriba de la barra. No tapa nada de
   lo que se lee y queda donde llega el pulgar. En la computadora no va: ahí está el lanzador. */
.fab-micro { position: fixed; z-index: 45; right: 16px;
  bottom: calc(18px + env(safe-area-inset-bottom)); width: 54px; height: 54px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--ink); box-shadow: 0 10px 24px rgba(0, 0, 0, .45);
  cursor: pointer; transition: transform .16s ease; }
body.con-barra .fab-micro { bottom: calc(86px + env(safe-area-inset-bottom)); }
.fab-micro:active { transform: scale(.94); }
@media (min-width: 900px) { .fab-micro { display: none; } }
@media (prefers-reduced-motion: reduce) { .fab-micro { transition: none; } }