/* ===========================================================================
   HorariosClientes — la capa de interfaz
   ---------------------------------------------------------------------------
   Los TOKENS son de Ausarta y viven en `assets/ausarta.css`. Aquí no hay ni un
   color en hexadecimal: si hace falta un tono intermedio se deriva con
   `color-mix()` de una variable de marca. Un hex a mano es un color que el día
   que la marca cambie se queda antiguo sin que nadie se entere.

   MÓVIL PRIMERO, y no como fórmula: añadir un festivo desde el móvil es el uso
   normal de esta plataforma. Todo lo que hay antes del primer `@media` es la
   pantalla estrecha; las consultas de más abajo solo ENSANCHAN.

   Tres reglas de este fichero que conviene no deshacer:

   1. El verde claro de marca (`--brand`, #34B56A) NO se usa nunca detrás de
      texto. Sobre blanco da 2,3:1 de contraste, así que un botón verde con
      letra blanca es ilegible para bastante gente y no cumple. El relleno de
      los botones va en `--green-700` (5,1:1 con blanco) y el `--brand` se
      reserva para lo que NO lleva texto encima: las bandas de horario, el
      punto de «activo» y algún filete. Es la única lectura accesible de
      «el verde solo como acento».
   2. Objetivos de dedo de 44 px como mínimo, y 48 px (`--control-h-lg`) en todo
      lo que se toca de verdad: horas, fechas, botones. Lo usa gente de pie en
      un almacén con el móvil en una mano.
   3. Nada de iconos sin etiqueta. Cada icono de este fichero va al lado de una
      palabra. Quien entra dos veces al año no descifra pictogramas.
   =========================================================================== */

/* ─────────────────────────── Base de la página ─────────────────────────── */

:root {
  /* La hoja: una sola columna. Es un documento que se lee de arriba abajo, no
     un panel de control con widgets repartidos. */
  --hoja-ancho: 46rem;

  /* Derivados de marca que se usan en varios sitios. Se calculan aquí una vez
     para que no haya dos `color-mix` distintos diciendo lo mismo. */
  --verde-texto: var(--green-700);      /* verde legible sobre blanco (5,1:1) */
  --ambar-texto: color-mix(in srgb, var(--warning-500) 50%, var(--neutral-900));
  --rojo-texto: color-mix(in srgb, var(--danger-500) 78%, var(--neutral-900));

  /* Alto de las bandas de la semana. Sube en pantalla ancha. */
  --banda-alto: 0.75rem;

  color-scheme: light;
}

html {
  /* El desplazamiento suave lo pide el navegador, no el JS. */
  scroll-behavior: smooth;
  /* Deja hueco por debajo de la barra de cambios cuando se salta a un ancla. */
  scroll-padding-bottom: 8rem;
}

body {
  background: var(--surface-page);
  color: var(--text-body);
  font: var(--font-body);
  /* Las cifras de reloj y de fecha se leen en columna: sin cifras de ancho fijo
     las horas «bailan» y cuesta comparar dos días. */
  font-variant-numeric: tabular-nums;
  padding-bottom: env(safe-area-inset-bottom);
}

/* ── Las superficies que no dibujamos nosotros, pero que también son la marca ── */

::selection {
  background: var(--brand-subtle);
  color: var(--text-strong);
}

:where(input, textarea) {
  caret-color: var(--verde-texto);
}

/* El foco SIEMPRE visible: lo va a usar gente que navega con el teclado. Va con
   `:focus-visible` para que un clic con el ratón no deje el anillo puesto. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--verde-texto);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* Las casillas y los redondos nativos, en verde de marca. */
:where(input[type="checkbox"], input[type="radio"]) {
  accent-color: var(--verde-texto);
}

* {
  scrollbar-color: var(--border-default) transparent;
  scrollbar-width: thin;
}

.oculto { display: none !important; }

/* Solo para lectores de pantalla: etiquetas que la pantalla ya explica
   visualmente pero que sin texto dejarían un control mudo. */
.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.crece { flex: 1 1 auto; }

/* ─────────────────────────── Cintas de sistema ─────────────────────────── */

/* Grafito, y solo aquí: es información del SISTEMA (modo de pruebas, datos de
   ejemplo), no del cliente. El grafito la separa visualmente de todo lo que es
   suyo, que va sobre fondo claro. */
.cinta {
  background: var(--surface-inverse);
  color: var(--text-on-dark);
  font: var(--weight-regular) var(--text-xs)/var(--leading-snug) var(--font-sans);
}

.cinta__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-2) var(--space-5);
  max-width: var(--container-max);
  margin: 0 auto;
}

.cinta strong { color: var(--text-on-dark); }
.cinta__nota { color: var(--text-on-dark-mut); }

.cinta select {
  font: var(--weight-medium) var(--text-xs)/1 var(--font-sans);
  min-height: 30px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--neutral-0) 28%, transparent);
  background: color-mix(in srgb, var(--neutral-0) 12%, transparent);
  color: var(--text-on-dark);
}

/* ── La cinta de ámbito de Ausarta ──────────────────────────────────────────
   La que dice EN QUÉ EMPRESA está tocando alguien de Ausarta. Va pegada arriba
   (`sticky`) a propósito: desde esta pantalla se puede dejar sin teléfono a una
   empresa que no es la tuya, así que el nombre de la empresa no puede
   desaparecer al bajar. Un cliente NUNCA ve esta cinta ni nada que dé a
   entender que existe. */
.ambito {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--surface-inverse);
  color: var(--text-on-dark);
  box-shadow: var(--shadow-md);
}

.ambito__fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-3) var(--space-5);
  max-width: var(--container-max);
  margin: 0 auto;
}

/* Quién eres y en qué empresa estás, juntos y en la primera columna. */
.ambito__donde {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
  min-width: 0;
}

.ambito__quien {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font: var(--font-body-sm);
  color: var(--text-on-dark-mut);
  /* Azul tecnológico: es la marca de «esto es una herramienta interna». */
  border-right: 1px solid color-mix(in srgb, var(--neutral-0) 22%, transparent);
  padding-right: var(--space-4);
}

.ambito__quien svg { color: var(--blue-300); }

.ambito__empresa {
  font: var(--weight-bold) var(--text-md)/var(--leading-snug) var(--font-sans);
  color: var(--text-on-dark);
  letter-spacing: var(--tracking-snug);
}

.ambito__aviso {
  grid-column: 1 / -1;
  margin: 0;
  font: var(--weight-regular) var(--text-xs)/var(--leading-snug) var(--font-sans);
  color: var(--text-on-dark-mut);
}

/* El botón de cambiar de empresa, discreto sobre grafito. Blanco y relleno competía en
   peso con el nombre de la empresa, que es el dato que no se puede perder de vista. */
.ambito .boton {
  min-height: 36px;
  padding: 0 var(--space-4);
  background: transparent;
  border-color: color-mix(in srgb, var(--neutral-0) 42%, transparent);
  color: var(--text-on-dark);
  font-size: var(--text-sm);
}

.ambito .boton:hover {
  background: color-mix(in srgb, var(--neutral-0) 14%, transparent);
  border-color: var(--neutral-0);
}

/* ─────────────────────────── Cabecera y marca ─────────────────────────── */

.cabecera {
  background: var(--surface-card);
  border-bottom: 1px solid var(--border-subtle);
}

.cabecera__fila {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-5);
}

/* El logotipo es horizontal y ancho (3515×905). Se le da aire y NUNCA se mete
   en una caja pequeña ni se recorta: se fija el alto y el ancho sale solo. */
.logo {
  display: block;
  height: 1.75rem;
  width: auto;
}

.cabecera__quien {
  display: none;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  font: var(--font-body-sm);
  color: var(--text-muted);
  line-height: var(--leading-snug);
}

.cabecera__quien strong {
  color: var(--text-strong);
  font-weight: var(--weight-semibold);
}

/* ─────────────────────────── La hoja ─────────────────────────── */

.hoja {
  max-width: var(--hoja-ancho);
  margin: 0 auto;
  padding: var(--space-6) var(--space-5) var(--space-24);
}

/* Un bloque = una pregunta del hilo. Se separan con MUCHO aire y una línea
   fina, no con tarjetas: las tarjetas dentro de tarjetas convierten un
   documento en un panel de control, y esto es un documento. */
.bloque {
  margin-top: var(--space-12);
}

.bloque:first-child { margin-top: 0; }

.bloque__titulo {
  font: var(--weight-semibold) var(--text-lg)/var(--leading-snug) var(--font-sans);
  color: var(--text-strong);
  letter-spacing: var(--tracking-snug);
  margin: 0 0 var(--space-2);
}

.bloque__ayuda {
  font: var(--font-body);
  color: var(--text-muted);
  margin: 0 0 var(--space-6);
  max-width: 34em;   /* medida de lectura cómoda: ~65 caracteres */
}

/* La caja blanca donde vive el contenido de un bloque. Una sola, sin anidar. */
.panel {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

/* ── El titular: qué tiene puesto AHORA ────────────────────────────────────
   Es lo primero que se ve y responde a la única pregunta que trae en la cabeza
   quien entra dos veces al año. No es un formulario: es una frase. */
.titular {
  padding-top: var(--space-2);
}

.titular__empresa {
  font: var(--font-body-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
  letter-spacing: var(--tracking-snug);
  margin: 0 0 var(--space-2);
}

.titular__frase {
  font: var(--weight-bold) var(--text-xl)/var(--leading-snug) var(--font-sans);
  color: var(--text-strong);
  letter-spacing: var(--tracking-snug);
  margin: 0;
  text-wrap: pretty;
}

.titular__hoy {
  margin: var(--space-4) 0 0;
  font: var(--font-body);
  color: var(--text-body);
}

.titular__hoy strong {
  color: var(--text-strong);
  font-weight: var(--weight-semibold);
}

/* ─────────────────────────── El estado, inequívoco ───────────────────────
   Tres estados con tres mensajes y tres colores distintos. El peor resultado
   posible de esta plataforma es un «listo» falso: el cliente se va tranquilo
   creyendo que mañana cierra y al día siguiente el teléfono suena y nadie lo
   coge. Por eso el verde solo se pinta cuando la centralita lo ha confirmado. */

.estado {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: var(--surface-card);
}

.estado__icono { flex: 0 0 auto; margin-top: 1px; }
.estado__cuerpo { min-width: 0; }

.estado__titulo {
  font: var(--weight-semibold) var(--text-md)/var(--leading-snug) var(--font-sans);
  color: var(--text-strong);
  margin: 0 0 var(--space-1);
}

.estado__texto {
  font: var(--font-body-sm);
  color: var(--text-body);
  margin: 0;
  text-wrap: pretty;
}

.estado__texto + .estado__texto { margin-top: var(--space-2); }

/* Activo en la centralita. El ÚNICO verde de estado, y solo con confirmación. */
.estado--activo {
  border-color: color-mix(in srgb, var(--brand) 34%, var(--border-subtle));
  background: var(--success-bg);
}
.estado--activo .estado__icono { color: var(--verde-texto); }
.estado--activo .estado__titulo { color: color-mix(in srgb, var(--green-900) 88%, var(--neutral-900)); }

/* Sin guardar: no se ha enviado nada, la centralita sigue como estaba. */
.estado--sin-guardar {
  border-color: color-mix(in srgb, var(--warning-500) 42%, var(--border-subtle));
  background: var(--warning-bg);
}
.estado--sin-guardar .estado__icono { color: var(--ambar-texto); }

/* Guardado y NO activo, a medias, o no sabemos: rojo, aunque la escritura haya
   ido bien. Sin `pbx/apply` el cambio no mueve ni una llamada. */
.estado--no-activo {
  border-color: color-mix(in srgb, var(--danger-500) 46%, var(--border-subtle));
  background: var(--danger-bg);
}
.estado--no-activo .estado__icono { color: var(--rojo-texto); }
.estado--no-activo .estado__titulo { color: var(--rojo-texto); }

/* Informativo: datos de ejemplo, modo de pruebas, lectura sin confirmar. */
.estado--nota {
  border-color: color-mix(in srgb, var(--info-500) 32%, var(--border-subtle));
  background: var(--info-bg);
}
.estado--nota .estado__icono { color: var(--accent-hover); }

/* ─────────────────────────── La semana ───────────────────────────────────
   La rejilla de siete columnas NO vale en un móvil, así que aquí no existe en
   ningún tamaño: la semana es una LISTA DE DÍAS, y lo que la hace visual es que
   los siete días dibujan su horario sobre la MISMA regla de horas. Puestos uno
   debajo de otro y alineados, la forma de la semana se lee de un golpe sin leer
   una sola cifra. */

.semana { padding: var(--space-2) 0; }

/* La regla de horas, una sola para los siete días. */
.regla {
  display: block;
  padding: 0 var(--space-5) var(--space-2);
}

.regla__pista {
  position: relative;
  height: 1rem;
  /* Filetes a las 6, 12 y 18: las tres referencias que necesita la vista para
     medir una banda sin contar. */
  background-image: linear-gradient(
    to right,
    transparent calc(25% - 0.5px), var(--border-default) calc(25% - 0.5px),
    var(--border-default) calc(25% + 0.5px), transparent calc(25% + 0.5px),
    transparent calc(50% - 0.5px), var(--border-default) calc(50% - 0.5px),
    var(--border-default) calc(50% + 0.5px), transparent calc(50% + 0.5px),
    transparent calc(75% - 0.5px), var(--border-default) calc(75% - 0.5px),
    var(--border-default) calc(75% + 0.5px), transparent calc(75% + 0.5px),
    transparent 100%
  );
}

.regla__marca {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font: var(--weight-medium) var(--text-xs)/1 var(--font-sans);
  color: var(--text-muted);
}

/* ── Un día ─────────────────────────────────────────────────────────────── */

.dia {
  border-top: 1px solid var(--border-subtle);
}

.dia:first-of-type { border-top: 0; }

/* El resumen SIEMPRE visible: el nombre del día, si abre, la banda dibujada y
   las horas en cifras. Lo que se pliega son los CONTROLES de edición, nunca la
   información: quien entra dos veces al año tiene que poder leer su horario
   entero sin abrir nada ni descubrir ningún gesto. */
.dia__resumen {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  list-style: none;               /* fuera el triángulo del navegador */
  transition: background var(--dur-fast) var(--ease-standard);
}

.dia__resumen::-webkit-details-marker { display: none; }
.dia__resumen:hover { background: var(--surface-page); }

.dia__nombre {
  font: var(--font-h4);
  color: var(--text-strong);
  letter-spacing: var(--tracking-snug);
  min-width: 0;
}

/* El día de hoy, señalado: es el que el cliente puede comprobar por la ventana. */
.dia--hoy .dia__nombre::after {
  content: "hoy";
  display: inline-block;
  margin-left: var(--space-2);
  padding: 0.1em 0.5em;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  color: var(--text-body);
  font: var(--weight-semibold) var(--text-xs)/1.5 var(--font-sans);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  vertical-align: 0.15em;
}

/* «Cambiar» con su palabra y su chevrón. Un triángulo solo no dice nada.
   Va arriba a la derecha, a la altura del nombre del día: en la primera versión caía
   debajo de las horas y parecía un enlace suelto sin dueño. */
.dia__abrir {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font: var(--weight-medium) var(--text-sm)/1 var(--font-sans);
  color: var(--verde-texto);
  white-space: nowrap;
}

.dia__abrir svg { transition: transform var(--dur-base) var(--ease-standard); }
.dia[open] .dia__abrir svg { transform: rotate(180deg); }

/* La banda y las horas ocupan las dos columnas. */
.dia__pista { grid-column: 1 / -1; }
.dia__horas {
  grid-column: 1 / -1;
  font: var(--font-body-sm);
  color: var(--text-body);
  font-variant-numeric: tabular-nums;
}

.dia__horas strong {
  color: var(--text-strong);
  font-weight: var(--weight-semibold);
}

.dia--cerrado .dia__nombre { color: var(--text-muted); }
.dia--cerrado .dia__horas { color: var(--text-muted); }

/* ── La banda de 24 horas ──────────────────────────────────────────────────
   El fondo es el día entero; los trozos verdes son las horas en que suena el
   teléfono. Las posiciones vienen en variables (`--desde`, `--ancho`) que pone
   el JS con `setProperty`, así que no se construye ni una cadena de estilos. */
.banda {
  position: relative;
  height: var(--banda-alto);
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  overflow: hidden;
  /* Las mismas referencias de 6/12/18 que la regla, para poder medir la banda
     sin subir la vista. */
  background-image: linear-gradient(
    to right,
    transparent calc(25% - 0.5px), var(--border-subtle) calc(25% - 0.5px),
    var(--border-subtle) calc(25% + 0.5px), transparent calc(25% + 0.5px),
    transparent calc(50% - 0.5px), var(--border-subtle) calc(50% - 0.5px),
    var(--border-subtle) calc(50% + 0.5px), transparent calc(50% + 0.5px),
    transparent calc(75% - 0.5px), var(--border-subtle) calc(75% - 0.5px),
    var(--border-subtle) calc(75% + 0.5px), transparent calc(75% + 0.5px),
    transparent 100%
  );
}

.banda__tramo {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--desde);
  width: var(--ancho);
  border-radius: var(--radius-pill);
  background: var(--brand);
  /* EL MOMENTO CON AUTOR de esta pantalla: al cambiar una hora, la banda del día
     se mueve o se acorta a la vista. No es decoración; es la confirmación de que
     lo que has tocado es lo que crees que has tocado. */
  transition:
    left var(--dur-base) var(--ease-out),
    width var(--dur-base) var(--ease-out),
    background var(--dur-fast) var(--ease-standard);
}

/* Un día cerrado no tiene banda: se dice con palabras, no con un hueco. */
.banda--cerrada {
  background-image: none;
  background: repeating-linear-gradient(
    -45deg,
    var(--surface-sunken) 0 4px,
    color-mix(in srgb, var(--border-subtle) 60%, var(--surface-sunken)) 4px 8px
  );
}

/* Cuando el servidor dice que no puede afirmar el horario (`certeza.dibujo_fiable`), la
   banda NO se puede pintar con la trama de «cerrado»: esa trama afirma que ese día no
   suena el teléfono, y en una lectura fallida los siete días llegan cerrados a propósito
   (`_no_leido` en backend/app.py). Vacía y con el borde punteado no afirma nada. */
.banda--incierta {
  background-image: none;
  background: var(--surface-sunken);
  border: 1px dashed var(--border-default);
}

/* ── El detalle de un día: los controles ───────────────────────────────── */

.dia__detalle {
  padding: 0 var(--space-5) var(--space-6);
  border-top: 1px dashed var(--border-subtle);
  margin-top: var(--space-1);
  padding-top: var(--space-5);
}

/* Abierto / Cerrado. Dos botones de radio grandes con su palabra, no un
   interruptor: un interruptor no dice qué pasa cuando está apagado. */
.eleccion {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.eleccion input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.eleccion label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-h-lg);
  padding: 0 var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  color: var(--text-body);
  font: var(--weight-medium) var(--text-base)/1 var(--font-sans);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}

.eleccion label:hover { border-color: var(--border-strong); }

.eleccion input:checked + label {
  border-color: var(--verde-texto);
  background: var(--brand-subtle);
  color: color-mix(in srgb, var(--green-900) 90%, var(--neutral-900));
  font-weight: var(--weight-semibold);
  box-shadow: inset 0 0 0 1px var(--verde-texto);
}

.eleccion input:focus-visible + label {
  outline: 2px solid var(--verde-texto);
  outline-offset: 2px;
}

.eleccion input:disabled + label {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ── Un tramo (mañana / tarde) ─────────────────────────────────────────── */

.tramo {
  padding: var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-page);
}

.tramo + .tramo { margin-top: var(--space-3); }

.tramo__nombre {
  display: block;
  font: var(--weight-semibold) var(--text-sm)/1 var(--font-sans);
  color: var(--text-strong);
  letter-spacing: var(--tracking-snug);
  margin-bottom: var(--space-3);
}

/* Las dos horas, UNA DEBAJO DE OTRA en el móvil.
   No es una preferencia: el campo de hora lo dibuja el navegador, y en un navegador
   configurado en inglés mide «09:00 AM» más el iconito del reloj. A dos columnas en una
   pantalla de 390 px eso se recorta y se lee «09:00 A», que en una pantalla donde una
   hora mal puesta deja a una empresa sin teléfono no es un defecto cosmético.
   A partir de 40rem sí caben las dos al lado. */
.tramo__horas {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.hora {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.hora > span {
  font: var(--font-body-sm);
  color: var(--text-muted);
}

.hora input {
  width: 100%;
  min-height: var(--control-h-lg);
  padding: 0 var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  color: var(--text-strong);
  font: var(--weight-semibold) var(--text-md)/1 var(--font-sans);
  font-variant-numeric: tabular-nums;
}

.hora input:hover { border-color: var(--border-strong); }
.hora input:disabled { background: var(--surface-sunken); color: var(--text-body); }

.hora--mal input {
  border-color: var(--rojo-texto);
  box-shadow: inset 0 0 0 1px var(--rojo-texto);
}

.tramo__error {
  margin: var(--space-3) 0 0;
  font: var(--weight-medium) var(--text-sm)/var(--leading-normal) var(--font-sans);
  color: var(--rojo-texto);
}

.tramo__pie {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

/* ─────────────────────────── Festivos ─────────────────────────── */

.festivos {
  list-style: none;
  margin: 0;
  padding: 0;
}

.festivo {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border-subtle);
}

.festivo:first-child { border-top: 0; }

/* El bloque de fecha, como una hoja de calendario. Es lo primero que se busca
   en una lista de festivos: qué día es. */
.festivo__fecha {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 3.25rem;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  color: var(--text-strong);
  line-height: 1;
}

.festivo__dia {
  font: var(--weight-bold) var(--text-lg)/1 var(--font-sans);
  font-variant-numeric: tabular-nums;
}

.festivo__mes {
  margin-top: 2px;
  font: var(--weight-semibold) var(--text-xs)/1 var(--font-sans);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-body);
}

.festivo__datos { min-width: 0; }

.festivo__nombre {
  font: var(--weight-semibold) var(--text-base)/var(--leading-snug) var(--font-sans);
  color: var(--text-strong);
  overflow-wrap: anywhere;   /* el nombre lo escribe una persona: puede ser largo */
}

.festivo__cuando {
  font: var(--font-body-sm);
  color: var(--text-muted);
}

.festivo__acciones {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
  align-items: center;
}

/* Un festivo que ya pasó sigue estando en la centralita: se apaga un poco, pero
   NO se esconde. Esconderlo haría creer que se ha ido. */
.festivo--pasado .festivo__fecha { opacity: 0.6; }
.festivo--pasado .festivo__nombre { color: var(--text-muted); font-weight: var(--weight-medium); }

/* Un festivo que la plataforma no sabe editar. El porqué va AQUÍ, al lado de la
   fila, no en un aviso rojo arriba: arriba parecía decir que no funciona nada,
   cuando el resto de la pantalla se usa con normalidad. */
.festivo--intocable { background: var(--surface-page); }

.candado {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  color: var(--text-body);
  font: var(--weight-medium) var(--text-xs)/1.6 var(--font-sans);
}

.candado svg { color: var(--text-muted); }

.festivo__motivo {
  grid-column: 1 / -1;
  margin: 0;
  font: var(--font-body-sm);
  color: var(--text-body);
  text-wrap: pretty;
}

/* ── Añadir un festivo ─────────────────────────────────────────────────── */

.alta {
  padding: var(--space-5);
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-page);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.alta__titulo {
  font: var(--weight-semibold) var(--text-base)/1 var(--font-sans);
  color: var(--text-strong);
  margin: 0 0 var(--space-4);
}

.campo {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.campo > label {
  font: var(--weight-medium) var(--text-sm)/1 var(--font-sans);
  color: var(--text-strong);
}

.campo input,
.campo textarea,
.campo select {
  width: 100%;
  min-height: var(--control-h-lg);
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  color: var(--text-strong);
  font: var(--font-body);
  font-variant-numeric: tabular-nums;
}

.campo textarea {
  min-height: 7rem;
  line-height: var(--leading-normal);
  resize: vertical;
}

.campo input::placeholder,
.campo textarea::placeholder {
  /* `--text-muted` y no `--text-subtle`: el gris más claro no llega a 4,5:1 y un
     hueco vacío con letra ilegible es un campo que nadie rellena. */
  color: var(--text-muted);
}

.campo input:hover, .campo textarea:hover { border-color: var(--border-strong); }
.campo input:disabled, .campo textarea:disabled {
  background: var(--surface-sunken);
  color: var(--text-body);
}

.campo__pista {
  margin: 0;
  font: var(--font-body-sm);
  color: var(--text-muted);
}

/* El eco de la fecha en palabras. No es adorno: hay navegadores que pintan el
   campo de fecha en formato americano (mm/dd/yyyy), y en esta plataforma
   confundir el 12 de marzo con el 3 de diciembre es cerrar el día equivocado. */
.campo__eco {
  margin: 0;
  font: var(--weight-semibold) var(--text-sm)/var(--leading-normal) var(--font-sans);
  color: var(--verde-texto);
}

.contador {
  margin: var(--space-2) 0 0;
  font: var(--font-body-sm);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.contador--pasado { color: var(--rojo-texto); font-weight: var(--weight-semibold); }

.vacio {
  margin: 0;
  padding: var(--space-8) var(--space-5);
  text-align: center;
  color: var(--text-muted);
  font: var(--font-body);
}

.vacio strong { display: block; color: var(--text-strong); margin-bottom: var(--space-1); }

/* ─────────────────────────── El mensaje de festivo ─────────────────────── */

.mensaje { padding: var(--space-5); }

.reproductor { margin-top: var(--space-4); }
.reproductor audio { width: 100%; }

/* ─────────────────────────── Botones ─────────────────────────── */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-5);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  color: var(--text-strong);
  font: var(--weight-semibold) var(--text-base)/1 var(--font-sans);
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}

.boton:hover { border-color: var(--border-strong); background: var(--surface-page); }
.boton:active { background: var(--surface-sunken); }

.boton:disabled,
.boton[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--surface-card);
  border-color: var(--border-subtle);
}

/* El principal. Relleno en `--green-700`, NO en `--brand`: ver la nota de
   arriba del fichero sobre el contraste. */
.boton--principal {
  background: var(--verde-texto);
  border-color: var(--verde-texto);
  color: var(--brand-on);
}

.boton--principal:hover {
  background: var(--green-800);
  border-color: var(--green-800);
  box-shadow: var(--shadow-md);
}

.boton--principal:active { background: var(--green-900); border-color: var(--green-900); }

.boton--principal:disabled,
.boton--principal[aria-disabled="true"] {
  background: var(--neutral-300);
  border-color: var(--neutral-300);
  color: var(--neutral-0);
  opacity: 1;      /* el gris ya dice que no se puede; bajar la opacidad lo borra */
}

.boton--grande { min-height: var(--control-h-lg); padding: 0 var(--space-6); font-size: var(--text-md); }
.boton--bloque { width: 100%; }

.boton--texto {
  min-height: 44px;
  padding: 0 var(--space-2);
  border-color: transparent;
  background: transparent;
  color: var(--verde-texto);
  font-weight: var(--weight-medium);
}

.boton--texto:hover {
  background: var(--brand-subtle);
  border-color: transparent;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.boton--peligro { color: var(--rojo-texto); }
.boton--peligro:hover { background: var(--danger-bg); border-color: transparent; }

.boton__icono { flex: 0 0 auto; }

/* ─────────────────────────── La barra de cambios ─────────────────────────
   Aparece SOLO cuando hay algo cambiado, y lo primero que hace es contar
   cuántas cosas hay. Antes se quedaba puesta con «has cambiado 0 cosas» tapando
   el horario, que es justo lo contrario de lo que tiene que hacer una barra que
   solo existe para avisar. */
.barra {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 40;
  background: var(--surface-card);
  border-top: 1px solid var(--border-default);
  box-shadow: 0 -4px 8px rgba(37, 48, 59, 0.06), 0 -18px 40px rgba(37, 48, 59, 0.12);
  padding-bottom: env(safe-area-inset-bottom);
  /* Fuera de la pantalla mientras no haya nada que guardar, y sin capturar
     clics: una barra invisible que intercepta el dedo es un misterio. */
  transform: translateY(110%);
  visibility: hidden;
  transition: transform var(--dur-slow) var(--ease-out),
              visibility var(--dur-slow) step-end;
}

.barra--visible {
  transform: translateY(0);
  visibility: visible;
  transition: transform var(--dur-slow) var(--ease-out),
              visibility 0s;
}

.barra__fila {
  max-width: var(--hoja-ancho);
  margin: 0 auto;
  padding: var(--space-3) var(--space-5) var(--space-4);
  display: grid;
  gap: var(--space-3);
}

.barra__texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.barra__cuenta {
  font: var(--weight-semibold) var(--text-base)/1.2 var(--font-sans);
  color: var(--text-strong);
}

.barra__nota {
  font: var(--font-body-sm);
  color: var(--ambar-texto);
  font-weight: var(--weight-medium);
}

.barra__botones {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2);
}

/* ─────────────────────────── El diálogo de confirmación ─────────────────
   `<dialog>` nativo: trae el foco atrapado, el cierre con Escape y el fondo
   inerte sin JS. La versión anterior era un div con un telón a mano y el foco
   se escapaba a la página de detrás con el tabulador. */

.dialogo {
  width: min(34rem, calc(100vw - 2 * var(--space-4)));
  max-height: min(90dvh, 46rem);
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  color: var(--text-body);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}

/* El `display` va SOLO en el estado abierto, y esto no es cosmética.
   Un `display: flex` en `.dialogo` gana al `dialog:not([open]) { display: none }` que trae
   el navegador, y entonces el diálogo CERRADO se pinta en el flujo normal de la página:
   quedaba visible y operativo al final de todas las pantallas, con su casilla de confirmar
   sin texto (el texto solo se rellena al abrirlo) y sus botones en el orden de tabulación.
   Por ahí se podía guardar en la centralita sin haber visto ni una de las frases del
   cambio, que es justo el fallo nº1 de PRODUCT.md. `showModal()` pone `[open]`, así que el
   modal sigue funcionando igual. NO devolver el `display` al selector de arriba. */
.dialogo:not([open]) { display: none; }

.dialogo[open] {
  display: flex;
  flex-direction: column;
}

.dialogo::backdrop {
  background: color-mix(in srgb, var(--neutral-950) 62%, transparent);
  backdrop-filter: blur(2px);
}

.dialogo__cuerpo {
  flex: 1 1 auto;
  min-height: 0;            /* sin esto un hijo flexible no deja que el padre lo recorte */
  padding: var(--space-5);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.dialogo__titulo {
  font: var(--font-h3);
  color: var(--text-strong);
  letter-spacing: var(--tracking-snug);
  margin: 0 0 var(--space-3);
}

.dialogo__empresa {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--surface-inverse);
  color: var(--text-on-dark);
  font: var(--font-body-sm);
}

.dialogo__empresa strong { color: var(--text-on-dark); }

.dialogo__efecto {
  margin: 0 0 var(--space-5);
  font: var(--font-body);
  color: var(--text-body);
  text-wrap: pretty;
}

/* Las frases del cambio, en castellano y escritas por el servidor contra el
   estado que acaba de releer. La pantalla no calcula ni una. */
.cambios {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.cambios li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--surface-page);
  border: 1px solid var(--border-subtle);
  font: var(--font-body);
  color: var(--text-strong);
  text-wrap: pretty;
}

.cambios__marca { color: var(--verde-texto); margin-top: 2px; }

.horas-antes-despues {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-5);
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
}

.horas-antes-despues > div {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font: var(--font-body-sm);
  color: var(--text-body);
}

.horas-antes-despues strong {
  font: var(--weight-bold) var(--text-lg)/1 var(--font-sans);
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}

.horas-antes-despues svg { color: var(--text-muted); }

/* La confirmación explícita. Objetivo grande y la casilla a la vista: es el
   único paso que puede dejar a un cliente sin teléfono. */
.confirmacion {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  cursor: pointer;
  font: var(--font-body);
  color: var(--text-strong);
  text-wrap: pretty;
}

.confirmacion:hover { border-color: var(--border-strong); }

.confirmacion input {
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  flex: 0 0 auto;
}

.dialogo__botones {
  flex: 0 0 auto;
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-page);
  /* Costura hacia arriba: dice que el cuerpo sigue por encima del pliegue. */
  box-shadow: 0 -10px 14px -10px rgba(37, 48, 59, 0.22);
}

/* Por qué está apagado el botón de guardar. Va en el pie, que se ve siempre, porque la
   casilla que lo enciende puede haberse quedado más arriba en una pantalla pequeña. */
.dialogo__pista {
  grid-column: 1 / -1;
  margin: 0;
  font: var(--weight-medium) var(--text-sm)/var(--leading-normal) var(--font-sans);
  color: var(--ambar-texto);
  text-wrap: pretty;
}

/* ─────────────────────────── Avisos ─────────────────────────── */

.aviso {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: var(--surface-card);
  margin-bottom: var(--space-4);
}

.aviso:last-child { margin-bottom: 0; }

.aviso__icono { margin-top: 1px; }

.aviso h3 {
  font: var(--weight-semibold) var(--text-md)/var(--leading-snug) var(--font-sans);
  color: var(--text-strong);
  margin: 0 0 var(--space-1);
}

.aviso p {
  margin: 0;
  font: var(--font-body-sm);
  color: var(--text-body);
  text-wrap: pretty;
}

.aviso p + p { margin-top: var(--space-2); }
.aviso__quehacer { color: var(--text-muted); }

.aviso--info { background: var(--info-bg); border-color: color-mix(in srgb, var(--info-500) 28%, var(--border-subtle)); }
.aviso--info .aviso__icono { color: var(--accent-hover); }

.aviso--exito { background: var(--success-bg); border-color: color-mix(in srgb, var(--brand) 34%, var(--border-subtle)); }
.aviso--exito .aviso__icono { color: var(--verde-texto); }

.aviso--aviso { background: var(--warning-bg); border-color: color-mix(in srgb, var(--warning-500) 40%, var(--border-subtle)); }
.aviso--aviso .aviso__icono { color: var(--ambar-texto); }

.aviso--peligro { background: var(--danger-bg); border-color: color-mix(in srgb, var(--danger-500) 46%, var(--border-subtle)); }
.aviso--peligro .aviso__icono { color: var(--rojo-texto); }
.aviso--peligro h3 { color: var(--rojo-texto); }

/* ─────────────────────────── Cargando ─────────────────────────── */

/* Un esqueleto de la propia hoja, no una rueda girando en medio de la nada: así
   la pantalla no salta de sitio cuando llegan los datos. */
.cargando { padding: var(--space-8) 0; }

.hueso {
  border-radius: var(--radius-sm);
  background: linear-gradient(
    90deg,
    var(--surface-sunken) 0%,
    color-mix(in srgb, var(--surface-sunken) 55%, var(--surface-card)) 50%,
    var(--surface-sunken) 100%
  );
  background-size: 200% 100%;
  animation: hueso 1.4s var(--ease-standard) infinite;
}

@keyframes hueso {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

.hueso--titulo { height: 1.75rem; width: 70%; margin-bottom: var(--space-3); }
.hueso--linea { height: 1rem; width: 90%; margin-bottom: var(--space-6); }
.hueso--panel { height: 18rem; }

/* ─────────────────────────── Elegir empresa ─────────────────────────────
   Dos usos distintos con las MISMAS piezas: alguien de Ausarta eligiendo entre
   todos los clientes, y un cliente con más de una empresa eligiendo entre las
   suyas. Los textos los pone el JS; el aspecto es el mismo porque el trabajo es
   el mismo. */

.eleccion-empresa { max-width: 34rem; margin: 0 auto; }

.buscador {
  position: relative;
  margin-bottom: var(--space-4);
}

.buscador input {
  width: 100%;
  min-height: var(--control-h-lg);
  padding: 0 var(--space-4) 0 var(--space-10);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  color: var(--text-strong);
  font: var(--font-body);
}

.buscador svg {
  position: absolute;
  left: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

.empresas {
  list-style: none;
  margin: 0;
  padding: 0;
}

.empresas li { border-top: 1px solid var(--border-subtle); }
.empresas li:first-child { border-top: 0; }

.empresa {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 60px;
  padding: var(--space-4) var(--space-5);
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font: var(--font-body);
  transition: background var(--dur-fast) var(--ease-standard);
}

.empresa:hover { background: var(--surface-page); }

.empresa__datos { min-width: 0; }

.empresa__nombre {
  display: block;
  font: var(--weight-semibold) var(--text-md)/var(--leading-snug) var(--font-sans);
  color: var(--text-strong);
  overflow-wrap: anywhere;
}

/* El identificador solo se enseña al personal de Ausarta (lo pone el JS): es lo que
   distingue dos empresas que se llaman parecido, y para un cliente es ruido. */
.empresa__id {
  display: block;
  margin-top: 2px;
  font: var(--weight-regular) var(--text-xs)/1.4 var(--font-mono);
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

/* Una empresa cuya centralita todavía no está dada de alta de nuestro lado. Se dice en
   la fila para no gastar un clic en descubrirlo, en ámbar y no en rojo: no está roto, está
   sin terminar. */
.empresa__pendiente {
  display: block;
  font: var(--weight-medium) var(--text-xs)/1.5 var(--font-sans);
  color: var(--ambar-texto);
}

.empresa svg { color: var(--verde-texto); }

/* ─────────────────────────── Pantallas de acceso ─────────────────────── */

.acceso {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-5);
}

.acceso__marca { display: flex; justify-content: center; }
.acceso__marca .logo { height: 2rem; }

.acceso__medio {
  width: 100%;
  max-width: 26rem;
  margin: 0 auto;
  align-self: center;
}

.acceso__caja {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6) var(--space-5);
}

.acceso__titulo {
  font: var(--weight-bold) var(--text-xl)/var(--leading-snug) var(--font-sans);
  color: var(--text-strong);
  letter-spacing: var(--tracking-snug);
  margin: 0 0 var(--space-3);
}

.acceso__intro {
  margin: 0 0 var(--space-6);
  font: var(--font-body);
  color: var(--text-muted);
  text-wrap: pretty;
}

.acceso__pie { margin: var(--space-5) 0 0; text-align: center; }

.acceso__nota {
  margin: 0;
  text-align: center;
  font: var(--font-body-sm);
  color: var(--text-muted);
  text-wrap: pretty;
}

/* ─────────────────────────── Pantalla ancha ───────────────────────────────
   A partir de aquí solo se ENSANCHA. La lista de días se queda: en ancho se lee
   igual de bien y una rejilla de siete columnas obligaría a mantener dos
   interfaces distintas, que es como se desincronizan. */

@media (min-width: 40rem) {
  :root { --banda-alto: 0.875rem; }

  .hoja { padding: var(--space-10) var(--space-6) var(--space-24); }

  .logo { height: 2rem; }

  .cabecera__quien {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }

  .ambito__empresa { font: var(--font-h4); letter-spacing: var(--tracking-snug); }
  .ambito__aviso { font: var(--font-body-sm); }

  .titular__frase { font-size: var(--text-2xl); }
  .bloque__titulo { font-size: var(--text-xl); }

  /* Con sitio, el nombre del día, la banda y las horas caben en una sola línea:
     la semana entera se lee de un golpe sin desplazarse. */
  .dia__resumen {
    grid-template-columns: 8.5rem 1fr auto;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-6);
  }

  .dia__pista { grid-column: 2; }
  .dia__horas { grid-column: 2; grid-row: 2; }
  .dia__abrir { grid-column: 3; grid-row: 1 / span 2; }
  .dia__nombre { grid-row: 1 / span 2; }

  .regla { padding: 0 var(--space-6) var(--space-2); }
  .regla__pista { margin-left: calc(8.5rem + var(--space-4)); margin-right: 5.5rem; }

  .dia__detalle { padding-left: var(--space-6); padding-right: var(--space-6); }

  .eleccion { grid-template-columns: repeat(2, minmax(0, 14rem)); }

  /* Con sitio, las dos horas caben al lado sin recortar el «AM/PM» que pinta un
     navegador configurado en inglés. */
  .tramo__horas { grid-template-columns: repeat(2, minmax(0, 13rem)); }

  .festivo { grid-template-columns: auto 1fr auto; padding: var(--space-4) var(--space-6); }
  .festivo__acciones { grid-column: 3; }
  .festivo__motivo { grid-column: 2 / -1; }

  .alta { padding: var(--space-6); }
  /* «Añadir este día» a lo ancho de 780 px quedaba desproporcionado: es una acción
     local, no el botón de guardar. */
  .alta > .boton--bloque { width: auto; }
  .alta__campos {
    display: grid;
    grid-template-columns: 12rem 1fr;
    gap: var(--space-4);
    align-items: start;
  }
  .alta__campos .campo { margin-bottom: 0; }

  .barra__fila {
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: var(--space-4) var(--space-6);
  }
  .barra__botones { grid-template-columns: auto auto; }

  .dialogo__botones { grid-template-columns: 1fr auto; }
  .dialogo__cuerpo { padding: var(--space-8); }

  .acceso { padding: var(--space-12) var(--space-6); }
  .acceso__caja { padding: var(--space-8); }
}

@media (min-width: 64rem) {
  :root { --hoja-ancho: 52rem; --banda-alto: 1rem; }
  .dia__resumen { grid-template-columns: 10rem 1fr auto; }
  .regla__pista { margin-left: calc(10rem + var(--space-4)); }
}

/* ─────────────────────────── Movimiento reducido ─────────────────────────
   `ausarta.css` ya apaga las transiciones. Esto quita además el desplazamiento
   suave de la página, que marea a quien ha pedido no ver movimiento. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .barra { transition: none; }
}

/* ─────────────────────────── Impresión ───────────────────────────────────
   Un cliente que imprime esto lo hace para colgar su horario en la puerta o
   mandárselo a alguien. Se van los controles y se queda el horario. */
@media print {
  .cinta, .ambito, .barra, .dia__abrir, .alta, .boton, .cabecera__quien { display: none !important; }
  body { background: var(--surface-card); }
  .panel { box-shadow: none; border-color: var(--border-default); }
  .dia__detalle { display: none !important; }
}