/*
 * Agenda publica de Ópticas Quezada y Siles.
 *
 * TODO el CSS del flujo publico vive aqui. Ni un <style> ni un style="" en las
 * plantillas: la CSP va sin 'unsafe-inline' y un atributo de estilo no se
 * pintaria. Que sea una restriccion tecnica no lo hace un castigo -tener el
 * sistema visual en un solo archivo es lo que evita que cada pantalla invente
 * su propio gris-.
 *
 * DE DONDE SALEN LOS COLORES. Son los de la tienda de la optica: amarillo
 * #fccf00 y negro #1b1a1a. El amarillo se reserva para el acento y la accion
 * principal; el negro conserva el contraste de textos y controles.
 *
 * NADA DE AdminLTE. El panel interno carga las hojas reales de SGO a proposito.
 * Aqui no hay ni una: el paciente no tiene por que ver la interfaz con la que
 * trabaja el vendedor.
 *
 * CERO RECURSOS EXTERNOS. Sin @import ni tipografias remotas: las fuentes
 * oficiales de la marca -Bebas Neue para titulos, Poppins para el cuerpo- se
 * sirven localmente desde /assets/fonts/, en el mismo origen que esta hoja.
 *
 * MOBILE FIRST. Todo esta escrito para un pulgar en la calle y crece hacia
 * arriba con una sola consulta de medios. Los blancos tactiles no bajan de
 * 44px en ningun punto.
 */

/* ------------------------------------------------------------------ *
 * 1. Sistema
 * ------------------------------------------------------------------ */

@font-face {
  font-family: "Poppins";
  src: url("/assets/fonts/poppins-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("/assets/fonts/poppins-600.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("/assets/fonts/poppins-700.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Bebas Neue";
  src: url("/assets/fonts/bebas-neue-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  /* Superficies */
  --papel: #ffffff;
  --fondo: #f7f7f5;
  --fondo-hundido: #f0f0ed;

  /* Tinta. Un negro cálido en vez de #000: el negro puro sobre blanco puro
     vibra en pantallas OLED y cansa en una lectura larga. */
  --tinta: #1b1a1a;
  --tinta-2: #3f3e3f;
  --tinta-3: #6f6e6f;

  /* Lineas. Dos pesos y no cinco: mas variantes es como aparecen las cajas
     que se ven casi iguales pero no lo son. */
  --linea: #e6e6e6;
  --linea-fuerte: #cccccc;

  /* Marca QS */
  --marca: #1b1a1a;
  --marca-oscura: #1b1a1a;
  --marca-clara: #fccf00;
  --marca-linea: #d9b200;
  --marca-lavado: #fff8d6;

  /* Alerta */
  --alerta: #8a5300;
  --alerta-fondo: #fdf4e5;
  --alerta-linea: #f0d9a8;

  /* Error */
  --error: #a3231b;
  --error-fondo: #fdeceb;
  --error-linea: #f3c9c5;

  /* Confirmado */
  --exito: #0f6b3f;

  /* Escala tipografica. Nunca por debajo de 1rem en nada que se escriba:
     iOS hace zoom automatico en cualquier input menor a 16px y el formulario
     salta de lugar justo mientras alguien tipea su RUT. */
  --t-micro: 0.75rem;
  --t-chica: 0.8125rem;
  --t-menor: 0.9375rem;
  --t-base: 1rem;
  --t-media: 1.0625rem;
  --t-mayor: 1.25rem;
  --t-titulo: 2rem;
  --t-cifra: 1.75rem;

  /* El codigo de reserva escala con el ancho en vez de saltar en un punto de
     corte. Con un tamaño fijo, un codigo de doce caracteres se partia en dos
     lineas en pantallas de 320px —justo el dato que la persona tiene que
     transcribir— y ahi el corte cae a mitad de un bloque. Con clamp entra en
     una sola linea desde 320px y sigue creciendo despues.

     El minimo esta calculado para que quepan quince caracteres a 320px, no
     doce: el largo del codigo lo decide el backend y esta hoja no puede
     suponerlo. */
  --t-codigo: clamp(1.25rem, 6.2vw, 2rem);

  /* Ritmo. Multiplos de 4px, sin excepciones. */
  --e1: 0.25rem;
  --e2: 0.5rem;
  --e3: 0.75rem;
  --e4: 1rem;
  --e5: 1.25rem;
  --e6: 1.5rem;
  --e8: 2rem;
  --e10: 2.5rem;

  --radio-chico: 8px;
  --radio: 12px;
  --radio-grande: 16px;

  /* Alto minimo de cualquier cosa que se toque. */
  --toque: 3rem;
  --toque-grande: 3.5rem;

  --sombra: 0 1px 2px rgba(20, 24, 29, 0.05), 0 1px 3px rgba(20, 24, 29, 0.04);
  --sombra-alta: 0 2px 4px rgba(20, 24, 29, 0.06), 0 4px 12px rgba(20, 24, 29, 0.07);

  --fuente: "Poppins", Arial, sans-serif;
  --fuente-titulo: "Bebas Neue", Impact, "Arial Black", sans-serif;

  /* Monoespaciada SOLO para identificadores -RUT, codigo de reserva-. No es
     decoracion: marca lo que se copia caracter por caracter y donde un 0 y una
     O no son intercambiables. */
  --fuente-dato: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
}

/* ------------------------------------------------------------------ *
 * 2. Base
 * ------------------------------------------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* Evita que iOS agrande el texto al girar el telefono. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body.publica {
  margin: 0;
  padding: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--fuente);
  font-size: var(--t-base);
  line-height: 1.5;
  /* Rendimiento del subpixel en fondos claros; el texto queda mas parejo. */
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

a {
  color: var(--marca);
  text-decoration: none;
}

img {
  max-width: 100%;
}

/*
 * Foco visible y con contraste, en TODO lo que reciba foco.
 *
 * :focus-visible y no :focus: asi el anillo aparece cuando se navega con
 * teclado y no cada vez que un dedo toca un boton. Quitarlo no era opcion —
 * sin el, esta pantalla no se puede completar sin mouse.
 */
:focus-visible {
  outline: 3px solid var(--marca-clara);
  outline-offset: 2px;
  border-radius: 4px;
  box-shadow: 0 0 0 5px var(--marca);
}

/* Texto solo para lectores de pantalla. */
.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------------ *
 * 3. Estructura
 * ------------------------------------------------------------------ */

.marco {
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;
  padding: var(--e5) var(--e4) var(--e10);
}

.barra-marca {
  padding: var(--e5) var(--e4) var(--e4);
  text-align: center;
  background: var(--papel);
  border-bottom: 1px solid var(--linea);
}

.barra-marca-logo {
  display: block;
  width: min(15rem, 100%);
  height: auto;
  margin: 0 auto;
}

.barra-marca-lema {
  margin-top: var(--e1);
  font-size: var(--t-chica);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

.pie {
  padding: 0 var(--e4) var(--e8);
  text-align: center;
}

.pie-texto {
  font-size: var(--t-chica);
  color: var(--tinta-3);
}

/*
 * Modo embebido: la pagina vive dentro de un iframe en la tienda.
 *
 * El encabezado y el pie no se pintan -la tienda ya tiene los suyos y
 * repetirlos deja dos marcas encima de otra-. Solo queda el flujo, y con menos
 * aire arriba porque el iframe no tiene barra de navegador que compensar.
 */
body.embebido .marco {
  padding-top: var(--e4);
  padding-bottom: var(--e8);
}

/* En modo embebido el documento crece a su alto natural: es la tienda la que
   recibe ese alto por postMessage y ajusta el iframe a el. */

/* ------------------------------------------------------------------ *
 * 4. Indicador de pasos
 * ------------------------------------------------------------------ */

.pasos {
  max-width: 34rem;
  margin: 0 auto;
  padding: var(--e5) var(--e4) 0;
}

.pasos-lista {
  display: flex;
}

.paso {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
}

/*
 * El conector se dibuja hacia atras desde cada paso, no hacia adelante.
 *
 * Asi la linea que llega a un paso toma el color de ESE paso, que es lo que se
 * quiere: el tramo recorrido queda con la marca hasta el circulo actual y el resto
 * gris. Dibujandola hacia adelante habria que consultar el estado del paso
 * siguiente, que en CSS no se puede.
 */
.paso::before {
  content: "";
  position: absolute;
  top: 0.8125rem;
  right: 50%;
  left: -50%;
  height: 2px;
  background: var(--linea-fuerte);
}

.paso:first-child::before {
  display: none;
}

.paso-hecho::before,
.paso-actual::before {
  background: var(--marca);
}

.paso-marca {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  margin: 0 auto var(--e2);
  border-radius: 50%;
  border: 2px solid var(--linea-fuerte);
  background: var(--fondo);
  font-size: var(--t-chica);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--tinta-3);
}

.paso-hecho .paso-marca {
  border-color: var(--marca);
  background: var(--marca);
  color: var(--papel);
}

.paso-actual .paso-marca {
  border-color: var(--marca-clara);
  background: var(--marca-clara);
  color: var(--marca-oscura);
  box-shadow: 0 0 0 4px var(--marca-lavado);
}

/*
 * El visto de los pasos completados se dibuja con dos bordes rotados.
 *
 * Un carácter "✓" dependeria de que la fuente del sistema lo traiga, y en
 * Android no siempre pasa: donde falta aparece el rectangulo de glifo ausente
 * justo en el indicador de progreso. Dos bordes se ven igual en todas partes.
 */
.paso-marca-hecho::after {
  content: "";
  width: 0.3125rem;
  height: 0.5625rem;
  border: solid var(--papel);
  border-width: 0 2px 2px 0;
  transform: translateY(-1px) rotate(45deg);
}

.paso-nombre {
  display: block;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--tinta-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.paso-actual .paso-nombre {
  color: var(--marca-oscura);
  font-weight: 700;
}

.paso-hecho .paso-nombre {
  color: var(--tinta-2);
}

/* ------------------------------------------------------------------ *
 * 5. Encabezados de paso
 * ------------------------------------------------------------------ */

.servicio-reserva {
  margin-bottom: var(--e2);
}

.aviso-edad {
  text-align: center;
}

.encabezado-paso {
  margin-bottom: var(--e5);
}

.paso-etiqueta {
  margin-bottom: var(--e2);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--marca);
}

.titulo {
  font-size: var(--t-titulo);
  font-weight: 700;
  /* Tracking negativo en los tamaños grandes: la fuente del sistema viene
     espaciada para texto corrido y a 24px se ve suelta. */
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--tinta);
  /* Corta por palabras completas, no a mitad de "disponibles". */
  text-wrap: balance;
}

.bajada {
  margin-top: var(--e2);
  font-size: var(--t-menor);
  color: var(--tinta-2);
}

.destacado {
  font-weight: 600;
  color: var(--tinta);
}

.volver {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  min-height: 2.75rem;
  margin-bottom: var(--e1);
  padding-right: var(--e2);
  font-size: var(--t-menor);
  font-weight: 600;
  color: var(--tinta-2);
}

.volver-flecha {
  width: 0.5rem;
  height: 0.5rem;
  border: solid var(--tinta-3);
  border-width: 0 2px 2px 0;
  transform: rotate(135deg);
}

.volver:hover,
.volver:focus-visible {
  color: var(--marca);
}

.volver:hover .volver-flecha {
  border-color: var(--marca);
}

.enlace {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Identidad del operativo cerrado. El logo acompaña a QS; no reemplaza el
   encabezado de la óptica ni cambia los colores del proceso. */
.marca-operativo {
  display: flex;
  align-items: center;
  gap: var(--e3);
  margin-bottom: var(--e5);
  padding: var(--e3) var(--e4);
  background: var(--papel);
  border: 1px solid var(--linea);
  border-left: 4px solid var(--marca-clara);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}

.marca-operativo-logo {
  flex: none;
  width: 4rem;
  height: 3rem;
  object-fit: contain;
}

.marca-operativo-rotulo {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

.marca-operativo-nombre {
  margin-top: 2px;
  font-size: var(--t-media);
  font-weight: 700;
  color: var(--tinta);
}

/* ------------------------------------------------------------------ *
 * 6. Tarjeta
 * ------------------------------------------------------------------ */

.tarjeta {
  padding: var(--e4);
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}

.tarjeta + .tarjeta,
.tarjeta + .aviso,
.aviso + .tarjeta,
.tarjeta + .zona-peligro,
.aviso + .zona-peligro {
  margin-top: var(--e4);
}

/* ------------------------------------------------------------------ *
 * 7. Paso 1 · sucursales
 * ------------------------------------------------------------------ */

.lista-tarjetas > li + li {
  margin-top: var(--e3);
}

/*
 * Toda la tarjeta es el enlace.
 *
 * En un celular la diferencia entre "hay un boton adentro" y "toda la tarjeta
 * navega" es la diferencia entre acertar y volver a intentar. El area util
 * pasa de 44px a los 90px completos de la tarjeta.
 */
.tarjeta-sucursal {
  display: flex;
  align-items: center;
  gap: var(--e3);
  min-height: var(--toque-grande);
  padding: var(--e4);
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  color: var(--tinta);
  transition: border-color 0.15s ease, box-shadow 0.15s ease,
    transform 0.1s ease;
}

.tarjeta-sucursal:hover {
  border-color: var(--marca-clara);
  box-shadow: var(--sombra-alta);
}

/* El hundido al presionar es la unica respuesta tactil que queda sin JS.
   En un telefono sustituye al hover, que no existe. */
.tarjeta-sucursal:active {
  transform: translateY(1px);
  box-shadow: var(--sombra);
}

.tarjeta-cuerpo {
  flex: 1 1 auto;
  min-width: 0;
}

.tarjeta-titulo {
  display: block;
  font-size: var(--t-media);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.tarjeta-dato {
  display: block;
  margin-top: var(--e1);
  font-size: var(--t-chica);
  color: var(--tinta-2);
}

.tarjeta-dato-apagado {
  color: var(--tinta-3);
}

.tarjeta-lado {
  flex: none;
  text-align: right;
}

.precio {
  display: block;
  font-size: var(--t-media);
  font-weight: 700;
  /* Cifras de ancho fijo: los precios de una columna quedan alineados por la
     coma y no bailan entre tarjetas. */
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
}

.precio-nota {
  display: block;
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

.precio-beneficio {
  max-width: 10rem;
  margin-top: 2px;
  letter-spacing: 0;
  line-height: 1.25;
  text-transform: none;
}

/* Sucursal sin horas publicadas. Sigue siendo un enlace -el paso siguiente
   explica que no hay- pero deja de competir con las que si tienen. */
.tarjeta-apagada {
  background: var(--fondo-hundido);
  box-shadow: none;
}

.tarjeta-apagada .tarjeta-titulo,
.tarjeta-apagada .precio {
  color: var(--tinta-2);
}

.flecha {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border: solid var(--linea-fuerte);
  border-width: 0 2px 2px 0;
  transform: rotate(-45deg);
}

.tarjeta-sucursal:hover .flecha,
.dia:hover .flecha {
  border-color: var(--marca);
}

/* ------------------------------------------------------------------ *
 * 8. Paso 2 · dias
 * ------------------------------------------------------------------ */

.grupo-mes + .grupo-mes {
  margin-top: var(--e6);
}

.grupo-mes-titulo {
  margin-bottom: var(--e2);
  padding-left: var(--e1);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

/*
 * Los dias van como una lista continua con separadores internos, no como
 * tarjetas sueltas. Una lista de veinte tarjetas con sombra es ruido; con
 * hairlines se escanea de arriba abajo sin que cada fila pida atencion.
 */
.lista-dias {
  overflow: hidden;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}

.lista-dias > li + li {
  border-top: 1px solid var(--linea);
}

.dia {
  display: flex;
  align-items: center;
  gap: var(--e3);
  min-height: var(--toque-grande);
  padding: var(--e3) var(--e4);
  color: var(--tinta);
  transition: background-color 0.12s ease;
}

.dia:hover {
  background: var(--marca-lavado);
}

.dia:active {
  background: var(--fondo-hundido);
}

/* Columna del numero, de ancho fijo. Es lo que se recorre con la vista, y una
   columna que cambia de ancho entre el 9 y el 30 obliga a leer cada fila. */
.dia-caja {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 5.25rem;
  padding: var(--e1) var(--e1);
  background: var(--fondo);
  border-radius: var(--radio-chico);
}

.dia-numero {
  font-size: var(--t-mayor);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: var(--marca-oscura);
}

.dia-mes {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

.dia-texto {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e2);
}

.dia-semana {
  font-size: var(--t-menor);
  font-weight: 600;
}

/* ------------------------------------------------------------------ *
 * 9. Paso 3 · horas
 * ------------------------------------------------------------------ */

.bloque-horas + .bloque-horas {
  margin-top: var(--e6);
}

.bloque-titulo {
  margin-bottom: var(--e3);
  padding-left: var(--e1);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

/*
 * Cada hora viaja en su propio <form>, asi que el elemento de la rejilla es el
 * formulario y el boton lo llena. Se evita display:contents sobre el form a
 * proposito: en varios navegadores eso todavia le quita la semantica de
 * formulario al arbol de accesibilidad.
 */
.rejilla-horas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4.75rem, 1fr));
  gap: var(--e2);
}

.rejilla-horas-detalle {
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
}

.hora-boton {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  min-height: var(--toque);
  padding: var(--e2) var(--e1);
  background: var(--papel);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-chico);
  box-shadow: var(--sombra);
  font-family: inherit;
  color: var(--tinta);
  cursor: pointer;
  transition: border-color 0.12s ease, background-color 0.12s ease,
    transform 0.1s ease;
}

.rejilla-horas-detalle .hora-boton {
  min-height: var(--toque-grande);
}

.hora-boton:hover {
  border-color: var(--marca);
  background: var(--marca-lavado);
}

.hora-boton:active {
  transform: translateY(1px);
  box-shadow: none;
}

.hora-valor {
  font-size: var(--t-media);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  /* Un poco de tracking: los dos puntos de "14:30" se leen mejor con aire y
     una rejilla de horas es lo unico que se mira en esta pantalla. */
  letter-spacing: 0.01em;
}

.hora-detalle {
  font-size: var(--t-micro);
  font-variant-numeric: tabular-nums;
  color: var(--tinta-2);
}

/* ------------------------------------------------------------------ *
 * 10. Paso 4 · resumen y formulario
 * ------------------------------------------------------------------ */

.resumen-fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e4);
  padding: var(--e2) 0;
}

.resumen-fila + .resumen-fila {
  border-top: 1px solid var(--linea);
}

.resumen-clave {
  flex: none;
  font-size: var(--t-chica);
  color: var(--tinta-2);
}

.resumen-valor {
  margin: 0;
  text-align: right;
  font-size: var(--t-menor);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.resumen-valor-fuerte {
  font-size: var(--t-media);
  font-weight: 700;
}

.resumen-menor {
  margin-left: var(--e1);
  font-size: var(--t-chica);
  font-weight: 400;
  color: var(--tinta-2);
}

/* Version suelta, fuera de tarjeta, para el resumen de una sola linea. */
.resumen-linea {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e4);
  margin-bottom: var(--e5);
  padding: var(--e3) var(--e4);
  background: var(--marca-lavado);
  border-radius: var(--radio-chico);
}

.resumen-linea .resumen-clave {
  font-weight: 600;
  color: var(--marca-oscura);
}

.resumen-linea .resumen-valor {
  color: var(--marca-oscura);
}

.formulario {
  margin-top: var(--e4);
}

.campo + .campo {
  margin-top: var(--e5);
}

.campo-etiqueta {
  display: block;
  margin-bottom: var(--e2);
  font-size: var(--t-chica);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--tinta);
}

/* "opcional" en la etiqueta y no como un asterisco en los obligatorios: es
   informacion util antes de tipear, no una nota al pie del formulario. */
.campo-opcional {
  margin-left: var(--e1);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

.campo-entrada {
  display: block;
  width: 100%;
  min-height: var(--toque);
  padding: var(--e3);
  background: var(--papel);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-chico);
  font-family: inherit;
  /* 1rem exacto y no menos: por debajo de 16px, iOS hace zoom al enfocar el
     campo y descoloca la pagina entera mientras alguien escribe. */
  font-size: var(--t-base);
  color: var(--tinta);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.campo-entrada:hover {
  border-color: var(--tinta-3);
}

.campo-entrada:focus {
  outline: none;
  border-color: var(--marca);
  box-shadow: 0 0 0 3px var(--marca-lavado);
}

.campo-entrada:focus-visible {
  outline: 3px solid var(--marca-clara);
  outline-offset: 1px;
}

/* Monoespaciada para los dos campos que son identificadores y no prosa. */
.campo-mono {
  font-family: var(--fuente-dato);
  letter-spacing: 0.04em;
}

.campo-codigo {
  text-transform: uppercase;
}

.campo-ayuda {
  margin-top: var(--e2);
  font-size: var(--t-chica);
  color: var(--tinta-2);
}

/* ------------------------------------------------------------------ *
 * 11. Botones
 * ------------------------------------------------------------------ */

.boton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--toque-grande);
  padding: var(--e3) var(--e5);
  border: 1px solid transparent;
  border-radius: var(--radio-chico);
  font-family: inherit;
  font-size: var(--t-media);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease,
    transform 0.1s ease;
}

.boton-principal {
  margin-top: var(--e6);
  border-color: var(--marca-linea);
  background: var(--marca-clara);
  color: var(--marca-oscura);
}

.boton-principal:hover {
  background: #ee8f00;
}

.boton-principal:active {
  transform: translateY(1px);
}

.boton-secundario {
  background: var(--papel);
  border-color: var(--linea-fuerte);
  color: var(--marca-oscura);
}

.boton-secundario:hover {
  border-color: var(--marca);
  background: var(--marca-lavado);
}

.boton-peligro {
  background: var(--error);
  color: var(--papel);
}

.boton-peligro:hover {
  background: #8b1c15;
}

.boton-peligro:active {
  transform: translateY(1px);
}

.acciones-finales {
  margin-top: var(--e5);
}

.acciones-finales .boton + .boton,
.acciones-finales .boton + .nota {
  margin-top: var(--e3);
}

/* ------------------------------------------------------------------ *
 * 12. Avisos, pildoras y vacios
 * ------------------------------------------------------------------ */

.aviso {
  padding: var(--e4);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
}

.aviso-titulo {
  font-size: var(--t-menor);
  font-weight: 700;
}

.aviso-texto,
.aviso-lista {
  margin-top: var(--e2);
  font-size: var(--t-menor);
  line-height: 1.5;
}

.aviso-lista {
  padding-left: var(--e5);
  list-style: disc;
}

.aviso-lista li + li {
  margin-top: var(--e1);
}

.aviso-error {
  background: var(--error-fondo);
  border-color: var(--error-linea);
  border-left: 4px solid var(--error);
  color: var(--error);
  margin-bottom: var(--e4);
}

.aviso-info {
  background: var(--marca-lavado);
  border-color: #ead278;
  border-left: 4px solid var(--marca);
  color: var(--marca-oscura);
  margin-bottom: var(--e5);
}

.aviso-alerta {
  background: var(--alerta-fondo);
  border-color: var(--alerta-linea);
  border-left: 4px solid var(--alerta);
  color: var(--alerta);
}

.aviso-alerta strong {
  color: var(--alerta);
}

.aviso-neutro {
  background: var(--fondo-hundido);
  color: var(--tinta-2);
}

/* Aviso que va cosido a la tarjeta de arriba: mismo bloque, no dos cajas. */
.aviso-pegado {
  margin-top: var(--e4);
}

.pildora {
  display: inline-block;
  padding: 2px var(--e2);
  border-radius: 999px;
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.pildora-cerca {
  background: var(--marca-clara);
  color: var(--marca-oscura);
}

.pildora-viva {
  background: var(--marca-lavado);
  color: var(--marca-oscura);
}

.pildora-hecha {
  background: #e6f4ec;
  color: var(--exito);
}

.pildora-cancelada {
  background: var(--error-fondo);
  color: var(--error);
}

.pildora-perdida {
  background: var(--alerta-fondo);
  color: var(--alerta);
}

.pildora-neutra {
  background: var(--fondo-hundido);
  color: var(--tinta-2);
}

.vacio {
  padding: var(--e6) var(--e2);
  text-align: center;
}

.vacio-titulo {
  font-size: var(--t-media);
  font-weight: 700;
}

.vacio-texto {
  margin-top: var(--e2);
  font-size: var(--t-menor);
  color: var(--tinta-2);
}

.vacio .boton {
  margin-top: var(--e5);
}

.nota {
  margin-top: var(--e4);
  font-size: var(--t-chica);
  line-height: 1.5;
  color: var(--tinta-2);
}

.nota-suelta {
  margin-top: var(--e5);
  text-align: center;
}

.nota-formulario {
  margin-top: var(--e4);
  text-align: center;
}

/* ------------------------------------------------------------------ *
 * 13. Confirmacion · el talon
 * ------------------------------------------------------------------ */

.encabezado-confirmado {
  text-align: center;
}

/*
 * El visto de "confirmado", dibujado igual que el de los pasos: dos bordes
 * rotados dentro de un circulo. Sin glifos, sin imagenes, sin sorpresas de
 * fuente.
 */
.marca-lista {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin: 0 auto var(--e4);
  border-radius: 50%;
  background: var(--exito);
  box-shadow: 0 0 0 6px #e6f4ec;
}

.marca-lista::after {
  content: "";
  width: 0.625rem;
  height: 1.125rem;
  border: solid var(--papel);
  border-width: 0 3px 3px 0;
  transform: translateY(-2px) rotate(45deg);
}

/*
 * EL TALON.
 *
 * Es el unico elemento con personalidad de toda la interfaz, y es deliberado:
 * el codigo se muestra una sola vez y no se puede recuperar, asi que la
 * pantalla tiene un solo trabajo -que la persona lo guarde-. Un talon de papel
 * comunica "esto se arranca y se guarda" antes de que nadie lea una palabra.
 *
 * Las muescas son dos circulos del color de la tarjeta montados sobre el
 * bloque oscuro. Todo con gradientes y border-radius: ni una imagen, que
 * ademas la CSP tampoco dejaria traer de fuera.
 */
.boleta {
  position: relative;
  /* Menos aire lateral que el resto de las cajas: cada pixel de padding aqui
     es un pixel menos para el codigo, que es lo unico que importa de esta
     pantalla. Se recupera en el breakpoint ancho. */
  padding: var(--e6) var(--e4);
  border-radius: var(--radio);
  background: var(--marca-oscura);
  background-image: linear-gradient(
    160deg,
    #2d2b24 0%,
    var(--marca-oscura) 55%,
    #000000 100%
  );
  color: var(--papel);
  overflow: hidden;
}

.boleta-rotulo {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--marca-clara);
}

/*
 * El codigo.
 *
 * Monoespaciado porque se transcribe caracter por caracter y ahi un 0 y una O
 * no son lo mismo. Con tracking generoso por la misma razon. El text-indent
 * compensa el espacio que letter-spacing agrega DESPUES del ultimo caracter,
 * que sin esto descentra el bloque completo hacia la izquierda.
 *
 * user-select:all convierte un toque largo en "seleccionado entero": es lo mas
 * cerca de un boton de copiar que se puede llegar sin JavaScript.
 */
.boleta-codigo {
  margin-top: var(--e2);
  font-family: var(--fuente-dato);
  font-size: var(--t-codigo);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-indent: 0.12em;
  line-height: 1.2;
  /* Un codigo largo en una pantalla de 320px tiene que cortarse en vez de
     desbordar la tarjeta. */
  word-break: break-all;
  -webkit-user-select: all;
  user-select: all;
}

/* La linea de corte con sus dos muescas. Los circulos van del color de la
   tarjeta que contiene el talon, que es lo que crea la ilusion de mordida. */
/* El margen negativo tiene que igualar al padding lateral del talon: es lo que
   lleva la linea de corte hasta el borde. Si dejan de coincidir, la muesca se
   despega del canto y el efecto de papel rasgado se pierde. */
.boleta-corte {
  position: relative;
  height: 0;
  margin: var(--e5) calc(var(--e4) * -1);
  border-top: 2px dashed rgba(255, 255, 255, 0.3);
}

.boleta-corte::before,
.boleta-corte::after {
  content: "";
  position: absolute;
  top: -0.6875rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--papel);
}

.boleta-corte::before {
  left: -0.625rem;
}

.boleta-corte::after {
  right: -0.625rem;
}

.boleta-fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e4);
}

.boleta-fila + .boleta-fila {
  margin-top: var(--e2);
}

.boleta-clave {
  flex: none;
  font-size: var(--t-chica);
  color: rgba(255, 255, 255, 0.66);
}

.boleta-valor {
  margin: 0;
  text-align: right;
  font-size: var(--t-menor);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.boleta-valor-fuerte {
  font-size: var(--t-mayor);
  font-weight: 700;
}

/* ------------------------------------------------------------------ *
 * 14. Ficha de la cita y zona de peligro
 * ------------------------------------------------------------------ */

.ficha-destacada {
  padding-bottom: var(--e4);
  margin-bottom: var(--e2);
  border-bottom: 1px solid var(--linea);
}

.ficha-fecha {
  font-size: var(--t-menor);
  font-weight: 600;
  color: var(--tinta-2);
}

.ficha-hora {
  font-size: var(--t-cifra);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--marca-oscura);
}

/*
 * Cancelar, detras de un <details>.
 *
 * Sin JavaScript no hay confirm(), y tampoco hace falta: <details> abre y
 * cierra solo, funciona con teclado y lo anuncian los lectores de pantalla.
 * El resumen se ve como un enlace discreto -no como un boton rojo listo para
 * el pulgar- y solo al abrirlo aparecen la consecuencia escrita y el boton
 * real. Dos toques deliberados, ninguno accidental.
 */
.zona-peligro {
  margin-top: var(--e5);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--papel);
  overflow: hidden;
}

.zona-peligro[open] {
  border-color: var(--error-linea);
}

.zona-peligro-resumen {
  display: flex;
  align-items: center;
  min-height: var(--toque);
  padding: var(--e3) var(--e4);
  font-size: var(--t-menor);
  font-weight: 600;
  color: var(--tinta-2);
  cursor: pointer;
  list-style: none;
}

/* El triangulo por omision del <summary>: fuera en ambos motores, que la
   flecha se dibuja abajo con el mismo lenguaje que el resto. */
.zona-peligro-resumen::-webkit-details-marker {
  display: none;
}

.zona-peligro-resumen::marker {
  content: "";
}

.zona-peligro-resumen::after {
  content: "";
  margin-left: auto;
  width: 0.5rem;
  height: 0.5rem;
  border: solid var(--tinta-3);
  border-width: 0 2px 2px 0;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.15s ease;
}

.zona-peligro[open] .zona-peligro-resumen {
  color: var(--error);
  background: var(--error-fondo);
}

.zona-peligro[open] .zona-peligro-resumen::after {
  border-color: var(--error);
  transform: translateY(2px) rotate(225deg);
}

.zona-peligro-cuerpo {
  padding: var(--e4);
  border-top: 1px solid var(--error-linea);
}

.zona-peligro-texto {
  font-size: var(--t-menor);
  color: var(--tinta);
}

.zona-peligro-texto + .zona-peligro-texto {
  margin-top: var(--e2);
}

.zona-peligro-cuerpo form {
  margin-top: var(--e5);
}

.zona-peligro-salida {
  margin-top: var(--e3);
  font-size: var(--t-chica);
  text-align: center;
  color: var(--tinta-2);
}

/* ------------------------------------------------------------------ *
 * 15. Error
 * ------------------------------------------------------------------ */

.tarjeta-error {
  padding: var(--e6) var(--e5);
  text-align: center;
}

.marca-error {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin: 0 auto var(--e4);
  border-radius: 50%;
  background: var(--alerta-fondo);
  border: 2px solid var(--alerta-linea);
}

/* Signo de exclamacion dibujado: barra mas punto. Mismo motivo que el visto —
   no depender de que la fuente del sistema traiga el glifo. */
.marca-error::before {
  content: "";
  width: 3px;
  height: 0.75rem;
  border-radius: 2px;
  background: var(--alerta);
  box-shadow: 0 1rem 0 0 var(--alerta);
  transform: translateY(-0.25rem);
}

.titulo-error {
  font-size: var(--t-mayor);
}

.texto-error {
  margin-top: var(--e3);
  font-size: var(--t-menor);
  color: var(--tinta-2);
}

.tarjeta-error .acciones-finales {
  margin-top: var(--e6);
}

.tarjeta-error .boton-principal {
  margin-top: 0;
}

/* ------------------------------------------------------------------ *
 * 16. Entrada
 * ------------------------------------------------------------------ */

/*
 * Una sola animacion en todo el flujo, y en el unico momento que la justifica:
 * cuando la pantalla aparece. Sirve para algo concreto —la carga de una pagina
 * nueva se percibe como una transicion y no como un parpadeo— y no vuelve a
 * ocurrir mientras alguien completa el formulario.
 *
 * El escalonado de las listas se corta en el sexto elemento. Sin ese tope, una
 * lista de veinte dias tardaria mas de un segundo en terminar de aparecer y la
 * animacion pasaria de sugerir orden a hacer esperar.
 */
@keyframes entrada {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.marco > * {
  animation: entrada 0.28s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.lista-tarjetas > li,
.lista-dias > li {
  animation: entrada 0.3s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.lista-tarjetas > li:nth-child(1),
.lista-dias > li:nth-child(1) {
  animation-delay: 0.03s;
}
.lista-tarjetas > li:nth-child(2),
.lista-dias > li:nth-child(2) {
  animation-delay: 0.06s;
}
.lista-tarjetas > li:nth-child(3),
.lista-dias > li:nth-child(3) {
  animation-delay: 0.09s;
}
.lista-tarjetas > li:nth-child(4),
.lista-dias > li:nth-child(4) {
  animation-delay: 0.12s;
}
.lista-tarjetas > li:nth-child(5),
.lista-dias > li:nth-child(5) {
  animation-delay: 0.15s;
}
.lista-tarjetas > li:nth-child(n + 6),
.lista-dias > li:nth-child(n + 6) {
  animation-delay: 0.18s;
}

.titulo {
  font-family: var(--fuente-titulo);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.05;
}

.paso-etiqueta,
.grupo-mes-titulo,
.bloque-titulo,
.barra-marca-lema,
.boleta-rotulo,
.vacio-titulo {
  font-family: var(--fuente-titulo);
  font-weight: 400;
  letter-spacing: 0.08em;
}

/* ------------------------------------------------------------------ *
 * 17. Pantallas mas anchas
 * ------------------------------------------------------------------ */

/*
 * Una sola consulta de medios en toda la hoja.
 *
 * Esto se usa desde el celular; el escritorio es el caso raro. Lo unico que
 * cambia es un poco mas de aire y titulos algo mayores: nada de reorganizar el
 * flujo en columnas, que obligaria a mantener dos disposiciones para que la
 * secundaria se vea bien.
 */
@media (min-width: 40rem) {
  :root {
    --t-titulo: 2.5rem;
    --t-codigo: 2.5rem;
    --t-cifra: 2rem;
  }

  .marco {
    padding: var(--e6) var(--e5) var(--e10);
  }

  .pasos {
    padding: var(--e6) var(--e5) 0;
  }

  .tarjeta,
  .tarjeta-sucursal {
    padding: var(--e5);
  }

  /* Con espacio de sobra el talon recupera su aire lateral. El margen del
     corte lo sigue para que la muesca no se despegue del borde. */
  .boleta {
    padding: var(--e6) var(--e5);
  }

  .boleta-corte {
    margin: var(--e5) calc(var(--e5) * -1);
  }

  .paso-nombre {
    font-size: var(--t-chica);
  }

  .dia {
    padding: var(--e3) var(--e5);
  }
}

/* ------------------------------------------------------------------ *
 * 18. Movimiento reducido e impresion
 * ------------------------------------------------------------------ */

/*
 * Quien pidio menos movimiento recibe menos movimiento. No se desactiva la
 * animacion con `animation: none`: se acorta, porque `none` con fill-mode both
 * podria dejar visible el estado inicial en algun motor y ahi la pantalla
 * quedaria en blanco.
 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/*
 * Impresion. Existe por una pantalla concreta: la confirmacion.
 *
 * El codigo se muestra una sola vez, y hay gente que en vez de sacar una foto
 * imprime o guarda como PDF. Si ese papel sale sin el talon —los fondos
 * oscuros no se imprimen por omision— sale sin lo unico que importaba.
 */
@media print {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  body.publica {
    background: #ffffff;
  }

  .pasos,
  .volver,
  .zona-peligro,
  .acciones-finales,
  .pie {
    display: none;
  }

  .tarjeta,
  .lista-dias {
    box-shadow: none;
  }

  .boleta {
    /* Fuerza el fondo del talon: sin esto el navegador lo imprime en blanco y
       el codigo, que es texto blanco, desaparece del papel. */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}