/* Barullo · la web del barulleiro, vestida segun el handoff de `turno`
 * (specs/features/turno/disenno/LEEME.md). Cada clase cita el apartado
 * o el criterio que la explica. Texto en rem, forma en px (§4). */

:root {
  /* §4: los tokens de texto, en rem, con la raiz a 16 px. */
  --texto-turno-medio: 5.75rem;
  --texto-titular: 2.125rem;
  --texto-titular-compacto: 1.875rem;
  --texto-subtitulo: 1.375rem;
  --texto-accion: 1.25rem;
  --texto-cuerpo: 1.0625rem;
  --texto-cuerpo-compacto: 1rem;
  --texto-apoyo: 0.875rem;
  --texto-etiqueta: 0.6875rem;
  /* Pedidos al sistema (T2, T3): hasta que entren en tokens.json. */
  --toque-urgente: 76px;
  --velo: rgba(26, 10, 22, 0.55);
  /* T5: los tiempos de la web del barulleiro. */
  --duracion-giro: 14000ms;
  --duracion-llamada: 900ms;
  --duracion-brinco: 6000ms;
  --duracion-pulso: 300ms;
}

@keyframes barullo-respira { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes barullo-gira { to { transform: rotate(360deg); } }
@keyframes barullo-brinca { 0%, 11%, 100% { transform: translateY(0); } 4% { transform: translateY(-9%); } }
@keyframes barullo-llama {
  0%, 100% { transform: rotate(-7deg) scale(1); }
  25% { transform: rotate(7deg) scale(1.06); }
  50% { transform: rotate(-5deg) scale(1); }
  75% { transform: rotate(5deg) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) { .web * { animation: none !important; } }

/* ---------------------------------------------------------------- marco */

html, body { height: 100%; }
body.web { display: block; padding: 0; min-height: 100%; }
.web main.portada { display: none; }

/* Una pantalla: columna a toda altura, con la zona segura (§6). */
.pantalla {
  min-height: 100vh; min-height: 100dvh;
  box-sizing: border-box;
  display: flex; flex-direction: column;
  padding: var(--espacio-4) max(var(--espacio-5), env(safe-area-inset-right)) max(var(--espacio-6), env(safe-area-inset-bottom)) max(var(--espacio-5), env(safe-area-inset-left));
  background: var(--color-background);
  color: var(--color-text);
  transition: background var(--duracion-transicion) var(--curva-fundido);
  position: relative;
  /* En un movil ocupa todo; en un escritorio no se estira mas que una pantalla de movil ancha. */
  max-width: 32rem; margin: 0 auto;
}
.pantalla.centrada { align-items: center; text-align: center; padding-top: var(--espacio-8); }
/* §4: los primeros 48 px son la banda del idioma; el logotipo arranca a 60. */
.pantalla.con-logotipo { padding-top: calc(var(--espacio-8) + var(--espacio-3)); }
.pantalla.fondo-siguiente { padding-top: var(--espacio-8); }
/* §2.1: los tres fondos a sangre del kit del barulleiro. */
.pantalla.fondo-espera { background: var(--color-primary); color: var(--color-crema); }
.pantalla.fondo-siguiente { background: var(--color-warning); color: var(--color-tinta); }
.pantalla.fondo-tetoca { background: var(--color-alert); color: var(--color-tinta); }
.pantalla.fondo-espera :focus-visible { outline-color: var(--color-tinta); }

.al-pie { margin-top: auto; width: 100%; padding-top: var(--espacio-5); }
.aire { flex: 1 1 0; min-height: var(--espacio-5); }

/* ------------------------------------------------------------- texto */

.logotipo { display: block; width: 132px; height: auto; }
.logotipo.grande { width: 140px; }
.titular {
  font-family: var(--fuente-titular); font-weight: var(--peso-titular);
  font-size: var(--texto-titular-compacto); line-height: var(--interlinea-titular);
  letter-spacing: var(--interletra-titular); max-width: 22ch; margin: 0;
}
.titular.grande { font-size: var(--texto-titular); font-weight: var(--peso-turno); }
.titular .puntos { margin-left: var(--espacio-1); }
.cuerpo { font-size: var(--texto-cuerpo-compacto); line-height: var(--interlinea-texto); color: var(--color-text-muted); max-width: 30ch; margin: 0; }
.nota { font-size: var(--texto-apoyo); line-height: var(--interlinea-texto); color: var(--color-text-subtle); max-width: 32ch; margin: 0; }
.numero {
  font-family: var(--fuente-titular); font-weight: var(--peso-turno);
  font-size: var(--texto-turno-medio); line-height: var(--interlinea-turno);
  /* Valor propio, no el token (-0.05em): a 92px el 1 se pegaba al 0 y el 11 se fundia.
     Se probaron cifras tabulares y Vero descarto la barra bajo el 1 (16/09). */
  letter-spacing: -0.02em;
}
.numero.apagado { color: var(--color-text-subtle); }
/* El guion del numero respira: el interletrado negativo del token lo pegaba a la letra y a la cifra. */
.numero .guion { margin: 0 0.07em; }
.local {
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: var(--fuente-titular); font-weight: var(--peso-medio);
  font-size: var(--texto-cuerpo-compacto); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-text-muted);
}
.fondo-espera .cuerpo, .fondo-espera .local, .fondo-espera .nota { color: var(--color-crema); }
.fondo-siguiente .cuerpo, .fondo-siguiente .local, .fondo-tetoca .cuerpo, .fondo-tetoca .local { color: var(--color-tinta); }
.fondo-espera .cuerpo, .fondo-siguiente .cuerpo, .fondo-tetoca .cuerpo { font-weight: var(--peso-medio); }
.mt-2 { margin-top: var(--espacio-2); } .mt-3 { margin-top: var(--espacio-3); } .mt-4 { margin-top: var(--espacio-4); }
.mt-5 { margin-top: var(--espacio-5); } .mt-6 { margin-top: var(--espacio-6); } .mt-7 { margin-top: var(--espacio-7); } .mt-8 { margin-top: var(--espacio-8); }

/* ------------------------------------------------------------- chips */

.chip {
  display: inline-flex; align-items: center; gap: var(--espacio-2);
  border: var(--borde) solid var(--color-border); border-radius: var(--radio-chip);
  padding: 10px 14px; background: var(--color-surface);
  font-family: var(--fuente-mono); font-size: var(--texto-etiqueta);
  letter-spacing: var(--interletra-etiqueta); text-transform: uppercase; color: var(--color-text-muted);
  max-width: 100%; box-sizing: border-box;
}
.chip .signo { font-family: var(--fuente-titular); font-weight: 900; }
.chip .recorta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip.muro { background: var(--color-surface-alt); }
.chip.alerta { background: var(--color-alert); color: var(--color-tinta); }
.chip.timer { font-size: var(--texto-apoyo); padding: 10px 16px; color: var(--color-text); }
.chip.final { font-family: var(--fuente-titular); font-weight: var(--peso-accion); font-size: var(--texto-cuerpo-compacto); text-transform: none; letter-spacing: 0; }
.chip.final .signo { width: 18px; text-align: center; }
.chip.final.atendido { background: var(--color-success); color: var(--color-crema); }
.chip.final.ausente { background: var(--color-warning); color: var(--color-tinta); }
.chip.final.saltado { background: var(--color-alert); color: var(--color-tinta); }
.chip.final.cerrada { background: var(--color-muro); color: var(--color-tinta); }
.meta { font-family: var(--fuente-mono); font-size: var(--texto-etiqueta); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-subtle); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meta.etiqueta { letter-spacing: var(--interletra-etiqueta); }

/* ------------------------------------------------------------ botones */

.boton {
  font-family: var(--fuente-titular); font-weight: var(--peso-accion);
  border: var(--borde) solid var(--color-border); border-radius: var(--radio-pastilla);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--espacio-2);
  text-align: center; box-sizing: border-box; text-decoration: none;
  transition: transform var(--duracion-toque), box-shadow var(--duracion-toque);
  min-height: var(--toque-local); padding: 0 22px; font-size: 1.0625rem; line-height: 1.2;
}
.boton.principal { min-height: var(--toque-principal); padding: 0 26px; font-size: var(--texto-accion); }
.boton.urgente { min-height: var(--toque-urgente); padding: 0 26px; font-size: var(--texto-accion); }
.boton.compacto { min-height: var(--toque-minimo); padding: 0 18px; font-size: 0.9375rem; }
.boton.ancho { width: 100%; }
.boton.primario { background: var(--color-primary); color: var(--color-crema); box-shadow: var(--sombra); }
.boton.primario:active { transform: translateY(2px); box-shadow: var(--sombra-hundida); }
.boton.secundario { background: var(--color-crema); color: var(--color-text); }
.boton.contorno { background: transparent; color: var(--color-text); border-color: var(--color-tinta); }
.boton.fantasma { background: transparent; color: var(--color-text-muted); border-color: transparent; text-decoration: underline; text-underline-offset: 3px; }
.boton.tinta { background: var(--color-tinta); color: var(--color-crema); border-color: var(--color-tinta); }
.boton.tinta:active { transform: translateY(2px); }
.boton:disabled { background: var(--color-muro); color: var(--color-text); box-shadow: none; cursor: not-allowed; }
/* §1.6, T1: «Saltar turno» sobre fondo de senal. */
.boton.saltar { min-height: var(--toque-minimo); padding: 0 var(--espacio-4); background: transparent; font-size: var(--texto-cuerpo-compacto); }
.fondo-espera .boton.saltar { color: var(--color-crema); border-color: var(--color-crema); }
.fondo-siguiente .boton.saltar { color: var(--color-tinta); border-color: var(--color-tinta); font-size: var(--texto-apoyo); }
/* El estado armado (AC-33) y el silenciado (AC-15): pastillas, no botones. */
.pastilla {
  width: 100%; min-height: var(--toque-principal); box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; gap: var(--espacio-2); padding: 0 26px;
  background: var(--color-crema); border: var(--borde) solid var(--color-tinta); border-radius: var(--radio-pastilla);
  font-family: var(--fuente-titular); font-weight: var(--peso-accion); font-size: var(--texto-accion); color: var(--color-text);
}
.pastilla.urgente { min-height: var(--toque-urgente); font-size: var(--texto-cuerpo-compacto); }
.volver {
  width: var(--toque-minimo); height: var(--toque-minimo); display: flex; align-items: center; justify-content: center;
  border: var(--borde) solid var(--color-border); border-radius: var(--radio-pastilla); background: var(--color-surface);
  font-family: var(--fuente-titular); font-weight: var(--peso-titular); font-size: var(--texto-accion); color: var(--color-text); cursor: pointer; text-decoration: none;
}
.enlace { display: inline-flex; align-items: center; min-height: var(--toque-minimo); font-family: var(--fuente-titular); font-weight: var(--peso-accion); font-size: var(--texto-cuerpo-compacto); color: inherit; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; text-decoration-skip-ink: none; }
/* El subrayado no esquiva las patas de la p (Vero, 16/09): partido en tres trozos se leia raro. */
.boton.fantasma { text-decoration-skip-ink: none; text-decoration-thickness: 2px; }

/* -------------------------------------------------------------- campo */

.campo { display: flex; flex-direction: column; gap: var(--espacio-2); width: 100%; }
.campo label { font-family: var(--fuente-titular); font-weight: var(--peso-accion); font-size: 0.9375rem; color: var(--color-text); }
.campo input {
  border: var(--borde) solid var(--color-border); border-radius: var(--radio-campo); padding: 14px 16px;
  font-family: var(--fuente-mono); font-size: 1.5rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--color-text); background: var(--color-surface); min-height: var(--toque-local); box-sizing: border-box; width: 100%;
}
.campo input[aria-invalid="true"] { border-color: var(--color-primary-strong); }
.campo .ayuda { font-size: var(--texto-apoyo); color: var(--color-text-subtle); min-height: 1.4em; }
.campo .ayuda.error { color: var(--color-primary-strong); }

/* ------------------------------------------------- selector de idioma (AC-30) */

/* Una ranura fija, la misma en todas las pantallas: esquina superior
 * izquierda, en absoluto, sin ocupar alto (§12.5 bis, tercera ronda). */
.idiomas { position: absolute; top: var(--espacio-1); left: var(--espacio-4); z-index: 2; display: flex; align-items: center; gap: var(--espacio-1); margin: 0; }
.idiomas .activo, .idiomas .otro {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--toque-minimo);
  font-family: var(--fuente-mono); font-size: var(--texto-cuerpo-compacto); letter-spacing: var(--interletra-etiqueta);
  text-decoration: none; padding: 0; border: 0; background: transparent; cursor: pointer;
}
.idiomas .activo { min-width: 28px; font-weight: 500; color: var(--color-primary); cursor: default; }
.idiomas .otro { min-width: var(--toque-minimo); color: var(--color-text-subtle); }
.idiomas .punto { font-family: var(--fuente-mono); font-size: var(--texto-cuerpo-compacto); color: var(--color-text-subtle); }
/* Sobre fondo de color el activo lleva pastilla crema, porque fucsia sobre
 * fucsia no se ve y tinta sobre fucsia da 3,91:1. En la espera el activo va
 * en fucsia; en mandarina y amarillo, en tinta como todo lo demas. */
.fondo-espera .idiomas .activo, .fondo-siguiente .idiomas .activo, .fondo-tetoca .idiomas .activo {
  min-height: 32px; min-width: 38px; background: var(--color-crema); border-radius: var(--radio-chip);
}
.fondo-espera .idiomas .otro, .fondo-espera .idiomas .punto { color: var(--color-crema); }
.fondo-siguiente .idiomas .activo, .fondo-tetoca .idiomas .activo,
.fondo-siguiente .idiomas .otro, .fondo-tetoca .idiomas .otro,
.fondo-siguiente .idiomas .punto, .fondo-tetoca .idiomas .punto { color: var(--color-tinta); }

/* -------------------------------------------------------- la espera (§5) */

/* La cabecera es solo de los controles (§3): «Saltar turno» a la derecha,
 * en la esquina opuesta a la ranura del idioma. */
.barra { flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end; min-height: var(--toque-minimo); }
/* Pantalla 13: lo que va debajo de la banda, con su propia ranura de idioma. */
.tras-banda { position: relative; flex: 1 1 auto; width: 100%; display: flex; flex-direction: column; align-items: center; padding-top: var(--espacio-8); }
.centro { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--espacio-4); padding: var(--espacio-6) 0; text-align: center; }
.pie { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: var(--espacio-2); text-align: center; }
/* La linea de la app (AC-17) no puede quedar pegada al borde de abajo: en un
 * movil con barra gestual se comia el margen (Vero, 16/09). Menos hueco por
 * encima, mas por debajo. */
/* `-AC-17`: una linea y debajo el enlace. Sin caja, sin relleno y
   separado por aire del bloque de armar los avisos (ficha §1.6). */
.pie.app { margin-top: var(--espacio-6); padding-bottom: var(--espacio-4); }
.pie.app .enlace { min-height: var(--toque-minimo); text-underline-offset: 3px; }
.mascota { display: block; }
.mascota.gira { animation: barullo-gira var(--duracion-giro) linear infinite; }
.mascota.brinca { animation: barullo-brinca var(--duracion-brinco) ease-out infinite; }
.mascota.llama { animation: barullo-llama var(--duracion-llamada) ease-in-out infinite; }
.mascota.respira { animation: barullo-respira 3400ms cubic-bezier(0.42, 0, 0.58, 1) infinite; }
.bloque-rafaga { display: flex; flex-direction: column; align-items: center; gap: var(--espacio-2); transition: transform var(--duracion-pulso) var(--curva-transicion); }
.bloque-rafaga.pulso { transform: scale(1.06); }
.hueco-chip { height: 30px; display: flex; align-items: center; }
.chip.sonando { padding: 6px 14px; background: var(--color-tinta); color: var(--color-crema); border: 0; }
@media (prefers-reduced-motion: reduce) { .bloque-rafaga.pulso { transform: none; } }

/* ------------------------------------------------------- banda (AC-23) */

.banda {
  position: sticky; top: 0; z-index: 2;
  margin: calc(-1 * var(--espacio-4)) calc(-1 * max(var(--espacio-5), env(safe-area-inset-right))) var(--espacio-4) calc(-1 * max(var(--espacio-5), env(safe-area-inset-left)));
  background: var(--color-alert); border-bottom: var(--borde) solid var(--color-border);
  padding: 10px var(--espacio-4); font-size: var(--texto-apoyo); line-height: 1.4; color: var(--color-tinta);
}

/* ---------------------------------------------------------- hoja (AC-27) */

/* Fijo y por encima de la ranura del idioma (z 2) y de la banda (z 2): la
 * hoja tiene que taparlo todo, o `aria-modal` miente. */
.velo { position: fixed; inset: 0; z-index: 5; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; background: var(--velo); }
.hoja {
  width: 100%; max-width: 32rem;
  display: flex; flex-direction: column; gap: var(--espacio-3);
  padding: var(--espacio-6) max(var(--espacio-5), env(safe-area-inset-right)) max(var(--espacio-6), env(safe-area-inset-bottom)) max(var(--espacio-5), env(safe-area-inset-left));
  box-sizing: border-box; background: var(--color-background); color: var(--color-text);
  border-top: var(--borde) solid var(--color-border); border-radius: var(--radio-tarjeta-grande) var(--radio-tarjeta-grande) 0 0;
  animation: hoja-entra var(--duracion-transicion) var(--curva-transicion);
}
.hoja .titular { max-width: none; }
.hoja .cuerpo { max-width: none; }
.hoja .botones { margin-top: var(--espacio-2); display: flex; flex-direction: column; gap: var(--espacio-2); }
@keyframes hoja-entra { from { transform: translateY(100%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .hoja { animation: none; } }

/* ------------------------------------------------------- tachado (AC-21) */

.tachado { position: relative; display: inline-block; }
.tachado .numero { color: var(--color-text-muted); }
.tachado .raya { position: absolute; top: 50%; left: -10px; right: -10px; height: 5px; margin-top: -3px; background: var(--color-tinta); border-radius: var(--radio-pastilla); }

/* --------------------------------------------------- portada (AC-25, §1.1) */

main.portada {
  min-height: 100vh; min-height: 100dvh; box-sizing: border-box; position: relative;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  /* §7: 56 de padding mas 4 de margen en el logotipo, para que baje solo el
   * logotipo a los 60 y el separador flexible se coma los 4. */
  padding: calc(var(--espacio-8) + var(--espacio-2)) max(var(--espacio-5), env(safe-area-inset-right)) max(var(--espacio-6), env(safe-area-inset-bottom)) max(var(--espacio-5), env(safe-area-inset-left));
  max-width: 32rem; margin: 0 auto;
}
main.portada .logotipo { width: 140px; margin-top: var(--espacio-1); }
main.portada .mascota { width: 152px; height: 152px; }
main.portada nav { margin-top: var(--espacio-5); display: flex; gap: var(--espacio-4); font-size: var(--texto-apoyo); }
@media (max-height: 640px) { main.portada .mascota { width: 132px; height: 132px; } }

/* ------------------------------------------------------ pruebas (/estados) */

.mando { text-align: left; background: var(--color-surface-alt); padding: var(--espacio-2) var(--espacio-3); border-bottom: var(--borde) solid var(--color-border-soft); font-size: var(--texto-apoyo); color: var(--color-text); }
.mando .fila { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.mini { font: inherit; font-size: 13px; padding: 6px 10px; border: 1px solid var(--color-gris); border-radius: 6px; background: var(--color-surface); cursor: pointer; }

/* ------------------------------------------- escritorio: el marco de la maqueta */

/* En una pantalla ancha la web no se estira: se ensena como un movil, con el
 * marco que usa la propia maqueta del handoff (420 de ancho, contorno de 2 px,
 * esquinas de tarjeta grande) sobre el fondo muro. El alto **crece con el
 * contenido** desde los 760 de la maqueta (Vero, 12/10): con 760 fijos la
 * pantalla del turno no cabia y habia que hacer scroll dentro del marco.
 * Solo si la ventana es mas baja que el contenido vuelve el scroll interno. */
@media (min-width: 640px) and (min-height: 700px) {
  /* `margin: auto` en el marco y no `align-items: center`: centrar con
   * `align-items` recorta por arriba lo que no cabe, y con una ventana de
   * 784 px el marco de 760 mas sus margenes no cabia: el borde superior
   * quedaba fuera y sin forma de llegar a el (visto el 12/10). */
  body.web, body.escritorio { background: var(--color-surface-alt); min-height: 100vh; display: flex; justify-content: center; padding: var(--espacio-5) 0; box-sizing: border-box; }
  /* Las pantallas montadas viven dentro de `#app`, y es `#app` quien tiene
   * que centrarse en el cuerpo; la portada es hija directa y se centra sola. */
  body.web > #app { margin: auto; }
  .pantalla, main.portada {
    width: 420px; max-width: 420px;
    /* Nunca mas alto que la ventana: hasta 760 si caben, menos con scroll dentro si no. */
    height: auto; min-height: min(760px, calc(100vh - 2 * var(--espacio-5))); max-height: calc(100vh - 2 * var(--espacio-5));
    overflow-y: auto; overflow-x: hidden; margin: auto;
    border: var(--borde) solid var(--color-border); border-radius: var(--radio-tarjeta-grande);
  }
  main.portada { background: var(--color-background); }
  .banda { position: static; margin: calc(-1 * var(--espacio-4)) calc(-1 * var(--espacio-5)) var(--espacio-4); }
  .pantalla.centrada { padding-top: var(--espacio-8); }
  .pantalla.con-logotipo { padding-top: calc(var(--espacio-8) + var(--espacio-3)); }
  .hoja { max-width: 420px; }
}

/* PERFIL-BARULLEIRO-AC-25: el pie con «Borrar mi cuenta», un enlace de texto discreto. */
.pie-borrar { margin: 32px 0 0; text-align: center; }
.pie-borrar .enlace-borrar {
  background: none; border: 0; padding: 12px; min-height: 44px;
  /* 16 px, no 14: sobre fucsia el sistema no deja bajar de ahi (ficha
     §1.8), y a 14 px el subrayado en crema se emborronaba. */
  font: inherit; font-size: var(--texto-cuerpo-compacto); color: var(--tinta-suave, #4A3640);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
/* GENERICO-R-02: sobre fucsia daba 2,27:1 y sobre mandarina 4,25:1, por
   debajo del 4,5:1 exigido. En esos dos fondos va en crema y en tinta,
   como el resto del texto de esas pantallas. */
.fondo-espera .pie-borrar .enlace-borrar { color: var(--color-crema); }
.fondo-siguiente .pie-borrar .enlace-borrar,
.fondo-tetoca .pie-borrar .enlace-borrar { color: var(--color-tinta); }