/* ------------------------------------------------------------- tokens */
:root {
  --fondo: oklch(0.155 0.006 70);
  --superficie-1: oklch(0.195 0.007 70);
  --superficie-2: oklch(0.235 0.008 70);
  --superficie-3: oklch(0.275 0.009 70);
  --borde: oklch(0.31 0.01 70);
  --borde-control: oklch(0.55 0.012 70);
  --texto: oklch(0.93 0.008 70);
  --texto-2: oklch(0.78 0.01 70);
  --texto-3: oklch(0.68 0.012 70);
  --acento: oklch(0.8 0.13 75);
  --acento-fuerte: oklch(0.86 0.11 80);
  --acento-tinta: oklch(0.22 0.04 75);
  --acento-suave: oklch(0.8 0.13 75 / 0.14);
  --velo: oklch(0.1 0.005 70 / 0.6);
  --opacidad-inactiva: 0.4;

  --curva-salida: cubic-bezier(0.23, 1, 0.32, 1);
  --curva-cajon: cubic-bezier(0.32, 0.72, 0, 1);
  --duracion-entrada: 240ms;
  --duracion-salida: 160ms;

  --pueblo: oklch(0.77 0.11 160);
  --lobos: oklch(0.7 0.14 30);
  --ambiguo: oklch(0.76 0.08 220);
  --solitario: oklch(0.75 0.1 305);
  --peligro: oklch(0.68 0.16 25);

  --t-1: 0.75rem;
  --t-2: 0.875rem;
  --t-3: 1rem;
  --t-4: 1.25rem;
  --t-5: 1.5rem;
  --t-6: 2rem;
  --interlineado: 1.5;
  --interlineado-medio: 1.35;
  --interlineado-ajustado: 1.2;
  --peso-normal: 400;
  --peso-fuerte: 600;
  --tracking-titulo: -0.01em;
  --tracking-display: -0.02em;
  --medida: 68ch;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Emoji de personaje e iconos: tamaños de glifo, no de texto */
  --icono: 1.5rem;
  --icono-texto: 1.25em;
  --icono-alineacion: -0.25em;
  --glifo-s: 1.25rem;
  --glifo-m: 1.75rem;
  --glifo-l: 2.5rem;

  /* Mesa redonda del asistente */
  --ancho-mesa: 21rem;
  --asiento-grande: 3.5rem;
  --tam-hueco: 2rem;

  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;
  --esp-5: 24px;
  --esp-6: 32px;
  --esp-7: 48px;

  --alto-control-s: 44px;
  --alto-control: 48px;
  --alto-accion: 56px;
  --alto-jug: 60px;
  --alto-opcion: 96px;
  --alto-barra: 56px;
  --nav-h: 56px;
  --acc-h: 80px;
  --ancho-max: 720px;
  --seguro: env(safe-area-inset-bottom, 0px);

  --radio-control: 8px;
  --radio-superficie: 12px;
  --radio-hoja: 16px;
  --radio-pildora: 999px;
  --borde-fino: 1px;
  --borde-grueso: 2px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--fondo);
  color: var(--texto);
  font: var(--t-3)/var(--interlineado) var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; }
h1, h2, h3, h4 { margin: 0; font-weight: var(--peso-fuerte); line-height: var(--interlineado-ajustado); text-wrap: balance; }
h1 { font-size: var(--t-6); letter-spacing: var(--tracking-display); }
h2 { font-size: var(--t-5); letter-spacing: var(--tracking-titulo); }
h3, h4 { font-size: var(--t-3); }
p { margin: 0 0 var(--esp-3); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
a { color: var(--acento); }
[hidden] { display: none !important; }
:focus-visible { outline: var(--borde-grueso) solid var(--acento); outline-offset: var(--borde-grueso); }

/* ----------------------------------------------------------- estructura */
.barra {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--esp-3);
  height: var(--alto-barra); padding: 0 var(--esp-3);
  padding-top: env(safe-area-inset-top, 0px);
  box-sizing: content-box;
  background: var(--fondo);
  border-bottom: var(--borde-fino) solid var(--borde);
}
.marca {
  display: flex; align-items: center; gap: var(--esp-2);
  background: none; border: 0; padding: var(--esp-2) var(--esp-1);
  font-size: var(--t-3); font-weight: var(--peso-fuerte); letter-spacing: var(--tracking-titulo); color: var(--texto);
}
.marca svg { width: var(--glifo-s); height: var(--glifo-s); fill: var(--texto-2); }
.barra-der { margin-left: auto; display: flex; align-items: center; gap: var(--esp-2); min-width: 0; }

#vista {
  max-width: var(--ancho-max); margin: 0 auto;
  padding: var(--esp-4) var(--esp-4) calc(var(--nav-h) + var(--seguro) + var(--esp-6));
  outline: none;
}
body.con-acciones #vista { padding-bottom: calc(var(--nav-h) + var(--acc-h) + var(--seguro) + var(--esp-6)); }

.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: grid; grid-template-columns: repeat(4, 1fr);
  height: calc(var(--nav-h) + var(--seguro));
  padding-bottom: var(--seguro);
  background: var(--fondo);
  border-top: var(--borde-fino) solid var(--borde);
}
.nav button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--esp-1);
  padding: 0; background: none; border: 0; color: var(--texto-2); font-size: var(--t-1);
}
.nav svg { width: var(--icono); height: var(--icono); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav button:first-child svg { fill: currentColor; stroke: none; }
.nav button[aria-current="page"] { color: var(--acento); }

.acciones {
  position: fixed; left: 0; right: 0; z-index: 35;
  bottom: calc(var(--nav-h) + var(--seguro));
  padding: var(--esp-3) var(--esp-4);
  background: var(--fondo);
  border-top: var(--borde-fino) solid var(--borde);
}
.acciones-in { max-width: calc(var(--ancho-max) - 2 * var(--esp-4)); margin: 0 auto; display: flex; gap: var(--esp-3); }
.acciones-in .btn { min-height: var(--alto-accion); }
.acciones-in .btn.pri { flex: 1; font-size: var(--t-4); }

/* -------------------------------------------------------------- piezas */
.tarjeta {
  background: var(--superficie-1); border: var(--borde-fino) solid var(--borde);
  border-radius: var(--radio-superficie); padding: var(--esp-4);
}

/* Ritmo: 16 entre bloques, 32 antes de una sección sin tarjeta, 12 dentro */
#vista > * + * { margin-top: var(--esp-4); }
#vista > * + .seccion { margin-top: var(--esp-6); }
#listaRoles > * + * { margin-top: var(--esp-3); }
#listaRoles > .grupo-roles + .grupo-roles { margin-top: var(--esp-6); }
.tarjeta > * + *, .seccion > * + * { margin-top: var(--esp-3); }
.tarjeta > .etiqueta + *, .seccion > .etiqueta + *,
.interruptor + .interruptor, .fila-rol + .fila-rol { margin-top: 0; }
.seccion > .etiqueta { font-size: var(--t-3); color: var(--texto); }

.etiqueta {
  display: flex; align-items: center; gap: var(--esp-2);
  margin: 0 0 var(--esp-2);
  font-size: var(--t-2); font-weight: var(--peso-fuerte); letter-spacing: normal;
  line-height: var(--interlineado-ajustado); color: var(--texto-2);
}

.tenue { color: var(--texto-2); }
.debil { color: var(--texto-3); }
.peq { font-size: var(--t-2); }
.mini { font-size: var(--t-2); }
.centro { text-align: center; }
.sin-corte { white-space: nowrap; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico {
  width: var(--icono-texto); height: var(--icono-texto); flex: none;
  vertical-align: var(--icono-alineacion);
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.btn.icono .ico { width: var(--icono); height: var(--icono); }
.e .ico, .paso-emoji .ico { width: 1em; height: 1em; vertical-align: top; stroke-width: 1.5; }
.estado .ico, .jug .marcas .ico { width: 1em; height: 1em; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2);
  min-height: var(--alto-control); padding: 0 var(--esp-4);
  background: var(--superficie-2); border: var(--borde-fino) solid var(--borde); border-radius: var(--radio-control);
  color: var(--texto); font-weight: var(--peso-fuerte); font-size: var(--t-3); text-align: center;
}
.btn.pri { background: var(--acento); border-color: var(--acento); color: var(--acento-tinta); }
.btn.peligro { color: var(--peligro); border-color: var(--peligro); }
.btn.fantasma { background: transparent; border-color: transparent; color: var(--texto-2); }
.btn.contorno { background: transparent; border-color: var(--borde-control); }
.btn.bloque { width: 100%; }
.btn.icono { min-width: var(--alto-control); padding: 0; font-size: var(--t-4); }
.btn.chico { min-height: var(--alto-control-s); padding: 0 var(--esp-3); font-size: var(--t-2); }
.fila-btns { display: flex; gap: var(--esp-3); flex-wrap: wrap; }
.fila-btns > .btn { flex: 1 1 9rem; }

.chips { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.chip {
  display: inline-flex; align-items: center; gap: var(--esp-1);
  padding: var(--esp-1) var(--esp-3); border-radius: var(--radio-pildora);
  background: var(--superficie-2); border: var(--borde-fino) solid var(--borde);
  font-size: var(--t-2); color: var(--texto); white-space: nowrap;
}
.chips .chip, .sinergia .chip { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.chip.acento { border-color: var(--acento); color: var(--acento); background: var(--acento-suave); }
button.chip { min-height: var(--alto-control-s); }

.estado {
  display: inline-flex; align-items: center; gap: var(--esp-2);
  padding: var(--esp-1) var(--esp-3); border-radius: var(--radio-pildora); background: var(--superficie-2);
  border: var(--borde-fino) solid var(--borde); font-size: var(--t-2); font-variant-numeric: tabular-nums; color: var(--texto-2); white-space: nowrap;
}

.t-pueblo { color: var(--pueblo); }
.t-lobos { color: var(--lobos); }
.t-ambiguo { color: var(--ambiguo); }
.t-solitario { color: var(--solitario); }
.b-pueblo { --bando: var(--pueblo); }
.b-lobos { --bando: var(--lobos); }
.b-ambiguo { --bando: var(--ambiguo); }
.b-solitario { --bando: var(--solitario); }

input[type="text"], input[type="search"], select {
  width: 100%; min-height: var(--alto-control); padding: 0 var(--esp-4);
  background: var(--superficie-2); border: var(--borde-fino) solid var(--borde-control); border-radius: var(--radio-control);
  font-size: var(--t-3);
}
select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--texto-2) 50%), linear-gradient(135deg, var(--texto-2) 50%, transparent 50%);
  background-position: calc(100% - var(--esp-5)) 50%, calc(100% - var(--esp-5) + var(--esp-1)) 50%;
  background-size: var(--esp-1) var(--esp-1); background-repeat: no-repeat;
  padding-right: calc(var(--esp-6) + var(--esp-2));
}
input::placeholder { color: var(--texto-3); }

.aviso-caja {
  display: flex; align-items: flex-start; gap: var(--esp-2);
  border-radius: var(--radio-superficie); padding: var(--esp-3); font-size: var(--t-2);
  background: var(--superficie-2);
}
.aviso-caja .ico { margin-top: calc((1lh - var(--icono-texto)) / 2); }
.aviso-caja.error { color: var(--peligro); }
.aviso-caja.ojo { color: var(--texto); }
.aviso-caja.ojo .ico { color: var(--acento); }
.aviso-caja + .aviso-caja { margin-top: var(--esp-2); }

/* ------------------------------------------------------------ jugadores */
.rejilla-jug { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-2); }
@media (min-width: 520px) { .rejilla-jug { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.jug {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  min-height: var(--alto-jug); padding: var(--esp-2) var(--esp-3);
  background: var(--superficie-2); border: var(--borde-grueso) solid var(--borde); border-radius: var(--radio-control);
  text-align: left;
}
.jug .nom { font-weight: var(--peso-fuerte); font-size: var(--t-3); line-height: var(--interlineado-ajustado); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jug .sub { font-size: var(--t-1); color: var(--texto-2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jug .marcas { position: absolute; top: var(--esp-2); right: var(--esp-2); display: flex; gap: var(--esp-1); font-size: var(--t-2); color: var(--texto-2); }
.jug[aria-pressed="true"] .nom { color: var(--acento-fuerte); }
.jug.muerto .nom { text-decoration: line-through; color: var(--texto-3); }

/* --------------------------------------------------------------- noche */
.progreso { display: flex; gap: var(--esp-1); flex-wrap: wrap; align-items: center; margin-bottom: var(--esp-3); }
.punto { width: var(--esp-2); height: var(--esp-2); border-radius: var(--radio-pildora); background: var(--borde-control); }
.punto.hecho { background: var(--texto-3); }
.punto.actual { width: var(--esp-3); height: var(--esp-3); background: var(--acento); }
.punto.farol { background: transparent; border: var(--borde-grueso) dashed var(--texto-3); }

.paso {
  background: var(--superficie-1); border: var(--borde-fino) solid var(--borde); border-radius: var(--radio-superficie);
}
.paso-cab {
  display: flex; gap: var(--esp-4); align-items: center;
  padding: var(--esp-4); border-bottom: var(--borde-fino) solid var(--borde);
  background: var(--superficie-2);
  border-radius: calc(var(--radio-superficie) - var(--borde-fino)) calc(var(--radio-superficie) - var(--borde-fino)) 0 0;
}
.paso-cab h2 { color: var(--bando, var(--texto)); }
.paso-emoji { font-size: var(--glifo-l); line-height: 1; flex: none; color: var(--texto-2); }
.paso-cab .quien { margin-top: var(--esp-2); }
.frase {
  padding: var(--esp-4); border-bottom: var(--borde-fino) solid var(--borde);
  font-size: var(--t-4); font-style: italic; line-height: var(--interlineado-medio); color: var(--texto);
  text-wrap: pretty;
}
.frase::before { content: "“"; color: var(--texto-3); }
.frase::after { content: "”"; color: var(--texto-3); }
.paso-cuerpo { padding: var(--esp-4); }
.paso-cuerpo > * + * { margin-top: var(--esp-4); }
.subtitulo { font-size: var(--t-2); font-weight: var(--peso-fuerte); color: var(--texto-2); margin-bottom: var(--esp-2); }

.farol-caja {
  border-radius: var(--radio-superficie); padding: var(--esp-4); background: var(--superficie-2); color: var(--texto-2);
}
.farol-caja strong { display: block; color: var(--texto); font-size: var(--t-4); margin-bottom: var(--esp-1); }

.revelado {
  display: flex; align-items: center; gap: var(--esp-4);
  padding: var(--esp-4); border-radius: var(--radio-superficie);
  background: var(--superficie-2);
}
.revelado .e { font-size: var(--glifo-l); line-height: 1; }
.revelado .n { font-size: var(--t-5); font-weight: var(--peso-fuerte); letter-spacing: var(--tracking-titulo); color: var(--bando, var(--texto)); }

.grandes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-3); }
.grande {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--esp-1);
  min-height: var(--alto-opcion); padding: var(--esp-3);
  background: var(--superficie-2); border: var(--borde-grueso) solid var(--borde); border-radius: var(--radio-control);
  font-weight: var(--peso-fuerte);
}
.grande .e { font-size: var(--glifo-l); line-height: 1; }

.siguientes { margin-top: var(--esp-3); font-size: var(--t-2); color: var(--texto-3); }
.siguientes span + span::before { content: " · "; }

.identificar { background: var(--superficie-2); border-radius: var(--radio-superficie); padding: var(--esp-3); }
.identificar + .identificar { margin-top: var(--esp-3); }
.identificar h3 { font-size: var(--t-3); margin-bottom: var(--esp-2); }

/* ------------------------------------------------------- amanecer y día */
.muertes { list-style: none; margin: 0; padding: 0; }
.muertes li {
  display: flex; align-items: center; gap: var(--esp-3); flex-wrap: wrap;
  padding: var(--esp-3) 0; border-bottom: var(--borde-fino) solid var(--borde);
}
.muertes li:last-child { border-bottom: 0; }
.muertes .e { font-size: var(--glifo-m); }
.muertes .n { font-size: var(--t-4); font-weight: var(--peso-fuerte); }
.muertes .c { flex-basis: 100%; font-size: var(--t-2); color: var(--texto-3); padding-left: calc(var(--glifo-m) + var(--esp-3)); margin-top: calc(-1 * var(--esp-1)); }
.muertes select { flex: 1 1 11rem; }

details.secreto { background: var(--superficie-1); border-radius: var(--radio-superficie); padding: var(--esp-3) var(--esp-4); color: var(--texto-2); }
details.secreto summary { cursor: pointer; font-size: var(--t-2); }
details.secreto ul { margin: var(--esp-2) 0 0; padding-left: var(--esp-5); font-size: var(--t-2); }

.victoria {
  border: var(--borde-fino) solid var(--borde-control); background: var(--superficie-1);
  border-radius: var(--radio-superficie); padding: var(--esp-4);
}
.victoria h2 { margin-bottom: var(--esp-2); }

.oso { font-size: var(--t-4); font-weight: var(--peso-fuerte); }

/* --------------------------------------------------------- preparación */
.pasos-asistente { display: flex; gap: var(--esp-2); margin-bottom: var(--esp-4); }
.pasos-asistente span {
  flex: 1; height: var(--esp-1); border-radius: var(--radio-pildora); background: var(--borde-control);
}
.pasos-asistente span.on { background: var(--acento); }

.lista-nombres { list-style: none; margin: var(--esp-3) 0 0; padding: 0; counter-reset: asiento; }
.lista-nombres li {
  display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--esp-1);
  padding: var(--esp-1) 0 var(--esp-1) var(--esp-1); border-bottom: var(--borde-fino) solid var(--borde);
  counter-increment: asiento;
}
.lista-nombres li::before { content: counter(asiento); width: var(--esp-5); color: var(--texto-3); font-size: var(--t-2); font-variant-numeric: tabular-nums; }
.lista-nombres .n { flex: 1 1 5em; font-size: var(--t-3); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista-nombres .btn { min-width: var(--alto-control-s); min-height: var(--alto-control-s); }

/* Mesa redonda: el asiento 1 arriba y el resto en el sentido de las agujas del reloj.
   Cada botón recibe su posición con --i (y la mesa, el total con --n). */
.mesa {
  --tam-asiento: var(--asiento-grande);
  position: relative; container-type: inline-size;
  width: min(100%, var(--ancho-mesa)); aspect-ratio: 1; margin-inline: auto;
}
.mesa.compacta { --tam-asiento: var(--alto-control-s); }
.mesa > button {
  position: absolute; left: 50%; top: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0; border-radius: var(--radio-pildora);
  transform: translate(-50%, -50%) rotate(calc(var(--i) / var(--n) * 1turn)) translateY(calc(-1 * var(--r))) rotate(calc(var(--i) / var(--n) * -1turn));
}
.asiento {
  --r: calc(50cqi - var(--tam-asiento) / 2);
  width: var(--tam-asiento); height: var(--tam-asiento);
  background: var(--superficie-2); border: var(--borde-fino) solid var(--borde-control); color: var(--texto);
  line-height: var(--interlineado-ajustado);
}
.asiento .num { font-size: var(--t-2); font-weight: var(--peso-fuerte); font-variant-numeric: tabular-nums; }
.asiento .nom { max-width: calc(100% - var(--esp-2)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-1); color: var(--texto-2); }
.asiento.destino { border-style: dashed; }
.asiento[aria-pressed="true"] { border: var(--borde-grueso) solid var(--acento); background: var(--acento-suave); color: var(--acento-fuerte); }
.asiento[aria-pressed="true"] .nom { color: var(--acento-fuerte); }
.hueco {
  --r: calc(50cqi - var(--tam-asiento) - var(--tam-hueco) / 2 - var(--esp-1) / 2);
  width: var(--tam-hueco); height: var(--tam-hueco);
  background: var(--superficie-1); border: var(--borde-fino) dashed var(--acento); color: var(--acento);
}
.hueco .ico { width: 1em; height: 1em; }
.mesa-ayuda { margin-top: var(--esp-2); }

.fila-rol {
  display: flex; align-items: center; gap: var(--esp-3);
  padding: var(--esp-2) 0; border-bottom: var(--borde-fino) solid var(--borde);
}
.fila-rol .e { font-size: var(--glifo-m); width: var(--glifo-m); text-align: center; flex: none; }
.fila-rol .n { flex: 1; min-width: 0; }
.fila-rol .n b { display: block; font-weight: var(--peso-fuerte); }
.fila-rol .n small { display: block; color: var(--texto-3); font-size: var(--t-1); line-height: var(--interlineado-medio); }
.stepper { display: flex; align-items: center; }
.stepper button {
  width: var(--alto-control-s); height: var(--alto-control-s); padding: 0; font-size: var(--t-4); line-height: 1;
  background: var(--superficie-2); border: var(--borde-fino) solid var(--borde-control); color: var(--texto);
}
.stepper button:first-child { border-radius: var(--radio-control) 0 0 var(--radio-control); }
.stepper button:last-child { border-radius: 0 var(--radio-control) var(--radio-control) 0; }
.stepper output, .stepper .valor { min-width: var(--alto-control-s); height: var(--alto-control-s); display: grid; place-items: center; background: var(--fondo); border-top: var(--borde-fino) solid var(--borde-control); border-bottom: var(--borde-fino) solid var(--borde-control); font-weight: var(--peso-fuerte); font-size: var(--t-4); font-variant-numeric: tabular-nums; }
.stepper .valor.cero { color: var(--texto-3); font-weight: var(--peso-normal); }

.contador {
  position: sticky; top: calc(var(--alto-barra) + var(--borde-fino) + env(safe-area-inset-top, 0px)); z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4); margin: 0 calc(-1 * var(--esp-1)) var(--esp-3);
  background: var(--superficie-1); border: var(--borde-fino) solid var(--borde); border-radius: var(--radio-superficie);
}
.contador b { display: inline-flex; align-items: center; gap: var(--esp-1); font-size: var(--t-4); font-variant-numeric: tabular-nums; }
.contador b .ico { width: 1em; height: 1em; }
.contador.ok b { color: var(--pueblo); }
.contador.mal b { color: var(--peligro); }

.interruptor { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); padding: var(--esp-3) 0; border-bottom: var(--borde-fino) solid var(--borde); }
.interruptor:last-child { border-bottom: 0; }
.interruptor input { width: var(--icono); height: var(--icono); margin: 0; accent-color: var(--acento); flex: none; }

.hero { padding: var(--esp-6) 0 var(--esp-2); }
.hero .luna { display: block; width: var(--glifo-l); height: var(--glifo-l); fill: currentColor; color: var(--texto-2); }
.hero h1 { margin: var(--esp-4) 0 var(--esp-1); }

/* ---------------------------------------------------- roles y consulta */
.buscador { position: sticky; top: calc(var(--alto-barra) + var(--borde-fino) + env(safe-area-inset-top, 0px)); z-index: 5; padding: var(--esp-1) 0 var(--esp-3); background: var(--fondo); }
.segmentado { display: flex; gap: var(--esp-2); overflow-x: auto; padding-bottom: var(--esp-1); scrollbar-width: none; }
.segmentado::-webkit-scrollbar { display: none; }
.segmentado .chip:focus-visible { outline-offset: calc(-2 * var(--borde-grueso)); }

details.rol {
  background: var(--superficie-1); border: var(--borde-fino) solid var(--borde); border-radius: var(--radio-superficie);
}
details.rol + details.rol { margin-top: var(--esp-2); }
details.rol summary { list-style: none; display: flex; gap: var(--esp-3); align-items: center; padding: var(--esp-3) var(--esp-4); cursor: pointer; }
details.rol summary::-webkit-details-marker { display: none; }
details.rol summary .e { font-size: var(--glifo-m); width: var(--esp-6); text-align: center; flex: none; }
details.rol summary .n { flex: 1; min-width: 0; }
details.rol summary b { display: block; font-size: var(--t-3); }
details.rol summary small { display: block; color: var(--texto-2); font-size: var(--t-2); }
details.rol[open] summary { border-bottom: var(--borde-fino) solid var(--borde); }
.rol-cuerpo { padding: var(--esp-3) var(--esp-4) var(--esp-4); font-size: var(--t-3); }
.rol-cuerpo h4 { margin: var(--esp-4) 0 var(--esp-1); font-size: var(--t-2); color: var(--texto-2); }
.rol-cuerpo p, .rol-cuerpo ul, .sinergia span, details.faq p,
.tarjeta > p, .tarjeta > ol, .tarjeta > ul, .seccion > p, .seccion > ol, .seccion > ul,
.hoja-cuerpo > p:not(.centro), #listaRoles > p:not(.centro) { max-width: var(--medida); }
.rol-cuerpo ul { margin: 0; padding-left: var(--esp-4); }
.rol-cuerpo li + li { margin-top: var(--esp-1); }
.sinergia { display: flex; flex-wrap: wrap; gap: var(--esp-1) var(--esp-2); align-items: flex-start; margin-top: var(--esp-2); }
.sinergia button { flex: none; }
.sinergia span { flex: 1 1 11em; min-width: 0; }

.combo h3 { display: flex; align-items: center; gap: var(--esp-2); font-size: var(--t-3); margin: var(--esp-3) 0 var(--esp-1); }
.combo h3 .ico { color: var(--pueblo); }
.combo.cuidado h3 .ico { color: var(--peligro); }
.combo h3 + p { margin-top: 0; }

details.faq { background: var(--superficie-1); border: var(--borde-fino) solid var(--borde); border-radius: var(--radio-superficie); }
details.faq + details.faq { margin-top: var(--esp-2); }
details.faq summary { padding: var(--esp-3) var(--esp-4); font-weight: var(--peso-fuerte); cursor: pointer; list-style: none; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; float: right; color: var(--texto-3); font-size: var(--t-4); line-height: 1; }
details.faq[open] summary::after { content: "–"; }
/* La cabecera sigue la esquina de la tarjeta, para que el resaltado al pasar el ratón no asome */
details.rol summary, details.faq summary { border-radius: calc(var(--radio-superficie) - var(--borde-fino)); }
details.rol[open] summary, details.faq[open] summary {
  border-radius: calc(var(--radio-superficie) - var(--borde-fino)) calc(var(--radio-superficie) - var(--borde-fino)) 0 0;
}
details.faq p { padding: 0 var(--esp-4) var(--esp-4); margin: 0; color: var(--texto-2); }

.tabla-envoltorio { overflow-x: auto; }
table.tabla { width: 100%; border-collapse: collapse; font-size: var(--t-3); font-variant-numeric: tabular-nums; }
.tabla th, .tabla td { padding: var(--esp-2) var(--esp-3); border-bottom: var(--borde-fino) solid var(--borde); text-align: center; }
.tabla th { color: var(--texto-2); font-weight: var(--peso-fuerte); font-size: var(--t-2); }
.tabla tr.actual td { color: var(--texto); background: var(--superficie-2); font-weight: var(--peso-fuerte); }

.cifra {
  font-size: var(--t-6); font-weight: var(--peso-fuerte); letter-spacing: var(--tracking-display);
  line-height: 1; font-variant-numeric: tabular-nums; color: var(--texto);
}
.tarjeta.pendiente { border-color: var(--acento); }
.reparto-cabecera { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-4); }
.reparto-lobos { display: flex; align-items: baseline; gap: var(--esp-2); }
.reparto-texto { font-size: var(--t-4); }

ol.orden { margin: 0; padding-left: var(--esp-5); }
ol.orden li { padding: var(--esp-1) 0; }

.historial { list-style: none; margin: 0; padding: 0; font-size: var(--t-2); }
.historial li { padding: var(--esp-2) 0; border-bottom: var(--borde-fino) solid var(--borde); }
.historial li b { color: var(--texto-3); font-weight: var(--peso-fuerte); font-size: var(--t-1); margin-right: var(--esp-2); }

/* ----------------------------------------------------------- hoja y aviso */
dialog.hoja {
  width: 100%; max-width: var(--ancho-max); max-height: 88dvh;
  margin: auto auto 0; padding: 0;
  background: var(--superficie-1); color: var(--texto);
  border: var(--borde-fino) solid var(--borde); border-bottom: 0; border-radius: var(--radio-hoja) var(--radio-hoja) 0 0;
}
/* Hoja: entra desde abajo con curva de cajón y sale más rápido. Interrumpible. */
dialog.hoja {
  transform: translateY(100%); opacity: 0;
  transition:
    transform var(--duracion-salida) var(--curva-salida),
    opacity var(--duracion-salida) var(--curva-salida),
    overlay var(--duracion-salida) allow-discrete,
    display var(--duracion-salida) allow-discrete;
}
dialog.hoja[open] {
  display: flex; flex-direction: column;
  transform: none; opacity: 1;
  transition-duration: var(--duracion-entrada);
  transition-timing-function: var(--curva-cajon);
}
@starting-style { dialog.hoja[open] { transform: translateY(100%); opacity: 0; } }
dialog.hoja::backdrop {
  background: var(--velo); opacity: 0;
  transition:
    opacity var(--duracion-salida) var(--curva-salida),
    overlay var(--duracion-salida) allow-discrete,
    display var(--duracion-salida) allow-discrete;
}
dialog.hoja[open]::backdrop { opacity: 1; transition-duration: var(--duracion-entrada); }
@starting-style { dialog.hoja[open]::backdrop { opacity: 0; } }
.hoja-cab { display: flex; align-items: center; gap: var(--esp-2); padding: var(--esp-2) var(--esp-2) var(--esp-2) var(--esp-4); border-bottom: var(--borde-fino) solid var(--borde); }
.hoja-cab h2 { flex: 1; font-size: var(--t-4); }
.hoja-cuerpo { overflow-y: auto; padding: var(--esp-4) var(--esp-4) calc(var(--esp-4) + var(--seguro)); }
.hoja-cuerpo > * + * { margin-top: var(--esp-4); }

.toast {
  position: fixed; left: 50%; top: calc(var(--alto-barra) + var(--esp-2) + env(safe-area-inset-top, 0px)); z-index: 60;
  transform: translateX(-50%);
  max-width: calc(100% - var(--esp-6));
  padding: var(--esp-3) var(--esp-4); border-radius: var(--radio-pildora);
  background: var(--superficie-3); border: var(--borde-fino) solid var(--borde-control);
  font-size: var(--t-3);
  transition: opacity var(--duracion-salida) var(--curva-salida), transform var(--duracion-salida) var(--curva-salida);
}
@starting-style { .toast { opacity: 0; transform: translate(-50%, calc(-1 * var(--esp-2))); } }

/* ----------------------------------------------------------- símbolos */
.seccion > * + .simbolos-grupo { margin-top: var(--esp-5); }
.simbolos-grupo { font-size: var(--t-2); color: var(--texto-2); }
.simbolos-grupo + .simbolos { margin-top: var(--esp-2); }
.simbolos { display: grid; gap: var(--esp-2); margin: 0; }
.simbolos > div { display: flex; align-items: flex-start; gap: var(--esp-3); }
.simbolos dt { flex: none; color: var(--texto-2); }
.simbolos dt .ico { width: var(--icono); height: var(--icono); vertical-align: top; }
.simbolos dd { margin: 0; max-width: var(--medida); }

/* ------------------------------------------------------------ chuleta */
body.modo-chuleta .nav, body.modo-chuleta .acciones, body.modo-chuleta #barraDer { display: none; }
body.modo-chuleta #vista { padding-bottom: var(--esp-7); }
.chuleta-cab .fila-btns { margin-top: var(--esp-4); }
.chuleta-cab .fila-btns > .btn { flex-basis: auto; }
#vista > * + .chuleta-grupo { margin-top: var(--esp-6); }
.chuleta-rol { padding-block: var(--esp-4); border-bottom: var(--borde-fino) solid var(--borde); break-inside: avoid; }
.chuleta-rol:last-child { border-bottom: 0; }
.chuleta-rol h3 { display: flex; align-items: center; gap: var(--esp-2); font-size: var(--t-4); letter-spacing: var(--tracking-titulo); }
.chuleta-rol .e { font-size: var(--glifo-s); }
.chuleta-rol p { max-width: var(--medida); margin: var(--esp-1) 0 0; }
.chuleta-resumen { font-weight: var(--peso-fuerte); }

/* ------------------------------------------------------------ estados */
.vacio { font-size: var(--t-2); color: var(--texto-2); }

@media (hover: hover) and (pointer: fine) {
  .btn:hover:not(:disabled), button.chip:hover:not(:disabled), .jug:hover:not(:disabled),
  .grande:hover:not(:disabled), .stepper button:hover:not(:disabled) { background: var(--superficie-3); }
  .btn.fantasma:hover:not(:disabled):not([aria-pressed="true"]), .btn.contorno:hover:not(:disabled):not([aria-pressed="true"]),
  details.rol summary:hover, details.faq summary:hover { background: var(--superficie-2); }
  .btn.pri:hover:not(:disabled) { background: var(--acento-fuerte); border-color: var(--acento-fuerte); }
  .nav button:hover, .marca:hover { color: var(--texto); }
  .asiento:hover:not([aria-pressed="true"]) { background: var(--superficie-3); }
  .hueco:hover { background: var(--acento-suave); }
}

.btn:active:not(:disabled), button.chip:active:not(:disabled),
.jug:active:not(:disabled), .grande:active:not(:disabled) { transform: scale(0.97); }
.btn:active:not(:disabled), .jug:active:not(:disabled), .grande:active:not(:disabled),
.stepper button:active:not(:disabled) { background: var(--superficie-3); }
.btn.pri:active:not(:disabled) { background: var(--acento-fuerte); border-color: var(--acento-fuerte); }

.btn[aria-pressed="true"], button.chip[aria-pressed="true"], .jug[aria-pressed="true"], .grande[aria-pressed="true"],
.btn[aria-pressed="true"]:hover, button.chip[aria-pressed="true"]:hover, .jug[aria-pressed="true"]:hover, .grande[aria-pressed="true"]:hover {
  border-color: var(--acento); background: var(--acento-suave); color: var(--acento-fuerte);
}

.btn:disabled, button.chip:disabled, .jug:disabled, .grande:disabled, .stepper button:disabled {
  opacity: var(--opacidad-inactiva); cursor: default;
}
.barra .btn.icono { min-width: var(--alto-control-s); min-height: var(--alto-control-s); font-size: var(--t-4); }
@media (min-width: 720px) {
  .barra { padding-inline: max(var(--esp-3), calc((100% - var(--ancho-max)) / 2 + var(--esp-2))); }
  .nav { padding-inline: calc((100% - var(--ancho-max)) / 2); }
}
@media (max-width: 420px) {
  .marca span { display: none; }
  .barra .estado { font-size: var(--t-1); padding: var(--esp-1) var(--esp-2); }
}

/* Impresión (chuleta en PDF): paleta clara y sin la interfaz del ayudante */
@media print {
  :root {
    --fondo: oklch(0.995 0.002 70);
    --superficie-1: oklch(0.995 0.002 70);
    --superficie-2: oklch(0.96 0.004 70);
    --superficie-3: oklch(0.92 0.005 70);
    --borde: oklch(0.85 0.006 70);
    --borde-control: oklch(0.6 0.01 70);
    --texto: oklch(0.2 0.01 70);
    --texto-2: oklch(0.36 0.01 70);
    --texto-3: oklch(0.46 0.01 70);
    --pueblo: oklch(0.45 0.1 160);
    --lobos: oklch(0.5 0.16 30);
    --ambiguo: oklch(0.45 0.08 220);
    --solitario: oklch(0.45 0.12 305);
  }
  .barra, .nav, .acciones, .toast, dialog, .no-imprimir { display: none !important; }
  #vista, body.con-acciones #vista, body.modo-chuleta #vista { max-width: none; padding: 0; }
}

/* Movimiento reducido: la hoja y el aviso solo funden; nada se desplaza ni escala */
@media (prefers-reduced-motion: reduce) {
  dialog.hoja, dialog.hoja[open] { transform: none; }
  @starting-style {
    dialog.hoja[open] { transform: none; }
    .toast { transform: translateX(-50%); }
  }
  .btn:active:not(:disabled), button.chip:active:not(:disabled),
  .jug:active:not(:disabled), .grande:active:not(:disabled) { transform: none; }
}