/* Inessentia — Pacientes · publico/estilo.css
   ===========================================================================
   La opción 2a del documento «Reja Disponibilidad» (modo reserva, día) con su
   variante de noche 2b, atada a `prefers-color-scheme` y no a un interruptor.

   Las tres ideas que gobiernan este archivo, y que hay que conservar aunque
   cambie todo lo demás:

     1. EL COLOR DE UN BLOQUE LIBRE ES LA HORA DEL DÍA. De la mañana en oro
        claro a la noche en morado. Es lo que permite leer la reja de un vistazo
        sin leyenda — y por eso el diseño quitó la leyenda. Los nueve tintes
        están abajo, en `--t0`…`--t8`, y son valores exactos del documento: no
        se derivan de una fórmula, no se interpolan y no se «ajustan un poco».
     2. LO OCUPADO NO SE DIBUJA: es el papel. Sin trama, sin contorno, sin
        etiqueta. Lo que ya pasó, todavía más tenue.
     3. NO HAY UN SOLO AVISO HASTA QUE HACE FALTA. La barra de confirmar aparece
        al elegir un bloque; el aviso del pie sólo existe cuando hay algo que
        decir.

   ── EL COLOR NO ES EL ÚNICO PORTADOR DE SIGNIFICADO ────────────────────────
   El diseño lee por color, y eso está bien para quien lo ve; no puede ser lo
   único. Cada estado lleva, además del tinte, una señal de forma:

     · libre         → filete interior de 1 px. En gris, y en alto contraste,
                       es una casilla con borde; el hueco no lo tiene.
     · ocupado / no_disponible → nada. Es la ausencia de forma, y es una señal.
     · mío           → contorno de 2 px MÁS un glifo: sólido con ✓ si está
                       confirmada, discontinuo con ◌ si está por confirmar.
                       Sólido/discontinuo distingue las dos sin usar color.
     · elegido       → anillo de 3 px, y `aria-pressed` para quien no lo ve.

   Y hay un bloque `forced-colors` al final: cuando el sistema sustituye la
   paleta entera, los nueve tintes desaparecen de golpe y la reja se quedaría
   muda. Ahí los estados se redibujan con los colores del sistema.
   =========================================================================== */

/* ── Paleta de la reja ───────────────────────────────────────────────────── */

:root {
  /* Los nueve tintes de la hora, en claro. */
  --t0: #F4E3BE;  /* 08:30 */
  --t1: #F0DBAB;  /* 09:45 */
  --t2: #EDD29A;  /* 11:00 */
  --t3: #E9C78D;  /* 12:15 */
  --t4: #E4BB88;  /* 13:30 */
  --t5: #DBAC86;  /* 15:30 */
  --t6: #CE9A87;  /* 16:45 */
  --t7: #B98292;  /* 18:00 */
  --t8: #9A6E96;  /* 19:15 */

  /* El papel: lo ocupado y lo que ya pasó. */
  --hueco:        rgba(70, 39, 110, .06);
  --hueco-pasado: rgba(70, 39, 110, .035);

  --tarjeta-bg:   var(--warm);
  --reja-bg:      linear-gradient(180deg, var(--warm) 0%, #F7F1E4 100%);
  --tarjeta-sombra: 0 18px 50px rgba(70, 39, 110, .13);

  --tinta:        var(--ink);
  --tinta-suave:  rgba(38, 35, 33, .55);
  --tinta-tenue:  rgba(38, 35, 33, .34);
  --tinta-dia:    rgba(38, 35, 33, .7);
  --titular:      var(--purple);
  --hoy:          var(--wine);
  --punto:        var(--purple);

  --boton-bg:       rgba(70, 39, 110, .06);
  --boton-bg-hover: rgba(70, 39, 110, .14);
  --barra-bg:       var(--cream-2);
  --barra-borde:    rgba(70, 39, 110, .08);
  --anillo:         var(--wine);
  --filete:         rgba(70, 39, 110, .10);
  --mio-contorno:   var(--purple);
  --mio-glifo:      var(--purple-d);

  --pastilla-bg:      rgba(70, 39, 110, .08);
  --pastilla-tinta:   var(--purple);
  --primario-bg:      var(--purple);
  --primario-tinta:   var(--cream-2);
}

@media (prefers-color-scheme: dark) {
  :root {
    --t0: #E8C98A;
    --t1: #E7C083;
    --t2: #E2B27A;
    --t3: #DDA476;
    --t4: #D69777;
    --t5: #CB8A7F;
    --t6: #B87A8E;
    --t7: #94709E;
    --t8: #6E63A6;

    --hueco:        rgba(244, 240, 230, .075);
    --hueco-pasado: rgba(244, 240, 230, .045);

    --tarjeta-bg:   #1B1029;
    --reja-bg:      linear-gradient(180deg, #241436 0%, #1B1029 46%, #170D22 100%);
    --tarjeta-sombra: 0 18px 50px rgba(27, 16, 41, .3);

    --tinta:        var(--cream-2);
    --tinta-suave:  rgba(244, 240, 230, .55);
    --tinta-tenue:  rgba(244, 240, 230, .34);
    --tinta-dia:    rgba(244, 240, 230, .7);
    --titular:      var(--cream-2);
    --hoy:          var(--sand);
    --punto:        var(--sand);

    --boton-bg:       rgba(244, 240, 230, .08);
    --boton-bg-hover: rgba(244, 240, 230, .18);
    --barra-bg:       rgba(244, 240, 230, .05);
    --barra-borde:    rgba(244, 240, 230, .1);
    --anillo:         var(--cream-2);
    --filete:         rgba(244, 240, 230, .12);
    --mio-contorno:   var(--cream-2);
    --mio-glifo:      var(--cream-2);

    --pastilla-bg:      rgba(244, 240, 230, .09);
    --pastilla-tinta:   var(--cream-2);
    --primario-bg:      var(--sand);
    --primario-tinta:   var(--ink);
  }
}

/* ── Página ──────────────────────────────────────────────────────────────── */

body {
  margin: 0;
  padding: 20px 14px 40px;
  background: var(--warm);
  color: var(--tinta);
  font-family: var(--font-sans);
  -webkit-text-size-adjust: 100%;
}

@media (prefers-color-scheme: dark) {
  body { background: #140B1F; }
}

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

/* ── Los estados de la página entera ─────────────────────────────────────────
   Una sola fuente de verdad: `<html data-estado>`, que pone el JS. `sin-js` es
   el estado de partida del documento, antes de que ningún script lo toque.

   El retraso de 0.8 s del `#fallo` merece su explicación: `reja.js` es un
   módulo, y los módulos se ejecutan SIEMPRE después de analizar el documento.
   Si el estado por omisión fuera el error —que es lo correcto: un script que no
   arranca tiene que dejar un aviso honesto y no un «Un momento…» eterno—, todo
   el mundo vería un parpadeo rojo en cada carga buena. Y si fuera «cargando»,
   un script roto dejaría a la persona esperando para siempre. El retraso
   resuelve las dos: el error existe desde el primer byte pero tarda en
   enseñarse más de lo que tarda un módulo en correr. No es una animación —no
   hay movimiento, sólo un cambio de visibilidad diferido— y por eso no se
   desactiva con `prefers-reduced-motion`.
   ────────────────────────────────────────────────────────────────────────── */

#app, #cargando, #fallo { display: none; }

html.sin-js #fallo {
  display: flex;
  opacity: 0;
  animation: aparecer 1ms linear 800ms forwards;
}
@keyframes aparecer { to { opacity: 1; } }

html[data-estado="cargando"] #cargando { display: flex; }
html[data-estado="reja"] #app { display: block; }
html[data-estado="error"] #fallo,
html[data-estado="sin-enlace"] #fallo { display: flex; }
/* Sin enlace no hay nada que reintentar: reintentar da exactamente lo mismo. */
html[data-estado="sin-enlace"] #reintentar { display: none; }
/* Y sin JS tampoco: `sin-js` significa que el módulo no llegó a correr, así que
   nadie escuchó ese botón. Un botón que no hace nada al pulsarlo es peor que no
   tenerlo — el `<noscript>` de al lado sí dice qué pasa y a quién escribirle. */
html.sin-js #reintentar { display: none; }

.pantalla {
  max-width: 420px;
  margin: 12vh auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  font-size: 14px;
  line-height: 1.6;
  color: var(--tinta-suave);
}
.pantalla img { border-radius: 50%; opacity: .8; }
.pantalla--noscript { display: flex; }

/* ── La tarjeta ──────────────────────────────────────────────────────────── */

#app {
  max-width: 560px;
  margin: 0 auto;
}

.tarjeta {
  border-radius: 36px 36px 0 0;
  overflow: hidden;
  background: var(--reja-bg);
  box-shadow: var(--tarjeta-sombra);
  padding: 26px 22px 22px;
}

/* Sin nada elegido, la tarjeta se cierra sola por abajo. */
#barra[hidden] { display: none; }
#app:not(:has(.barra:not([hidden]))) .tarjeta { border-radius: 36px; }

@media (prefers-color-scheme: dark) {
  .tarjeta { background-color: #1B1029; }
}

/* ── Cabecera ────────────────────────────────────────────────────────────── */

.cabecera {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 24px;
}
.marca { border-radius: 50%; display: block; }
.titulos { min-width: 0; }
.titulo {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--titular);
}
.subtitulo {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.35;
  color: var(--tinta-suave);
}
.subtitulo:empty { display: none; }

/* ── Modalidad ───────────────────────────────────────────────────────────── */

.modalidad {
  display: flex;
  gap: 6px;
  margin: -12px 0 20px;
}
/* `display: flex` de aquí arriba le gana al `[hidden] { display: none }` de la
   hoja del navegador, así que `el.modalidad.hidden = true` no escondía nada:
   quien tiene UNA sola modalidad permitida veía igualmente las dos píldoras y
   podía pulsar la que sus reglas no le dan. `#barra[hidden]` ya llevaba este
   candado; éste se había quedado sin él. */
.modalidad[hidden] { display: none; }
.modalidad button {
  flex: 1;
  min-height: 34px;
  border: 0;
  border-radius: 999px;
  background: var(--boton-bg);
  color: var(--tinta-dia);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .04em;
  cursor: pointer;
}
.modalidad button:hover { background: var(--boton-bg-hover); }
.modalidad button[aria-pressed="true"] {
  background: var(--primario-bg);
  color: var(--primario-tinta);
}

/* ── Barra de semana ─────────────────────────────────────────────────────── */

.semana {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}
.rango {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 13px;
  color: var(--titular);
}
.nav { display: flex; align-items: center; gap: 10px; }
.punto {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--punto);
  display: block;
}
.flechas { display: flex; gap: 6px; }
.flechas button {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: var(--boton-bg);
  color: var(--tinta-dia);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.flechas button:hover:not(:disabled) { background: var(--boton-bg-hover); }
.flechas button:disabled { opacity: .3; cursor: default; }

/* ── La reja ─────────────────────────────────────────────────────────────────
   `border-collapse: separate` + `border-spacing: 5px` reproduce el `gap: 5px`
   de la rejilla del diseño; `table-layout: fixed` con un `width` en la primera
   columna reproduce `36px repeat(7, minmax(0, 1fr))`.
   ────────────────────────────────────────────────────────────────────────── */

.reja {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 5px;
  margin: -5px;
}
.reja__esquina, .reja__hora { width: 36px; }

.reja__hora {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 9.5px;
  color: var(--tinta-tenue);
  font-variant-numeric: tabular-nums;
  text-align: right;
  padding-right: 8px;
  vertical-align: middle;
}

.reja__dia {
  padding: 0 0 4px;
  vertical-align: bottom;
  font-weight: 400;
}
.reja__dia-nombre {
  display: block;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 8.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
}
.reja__dia-numero {
  display: block;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--tinta-dia);
}
.reja__dia--hoy .reja__dia-numero,
.reja__dia--hoy .reja__dia-nombre { color: var(--hoy); }

/* Un día fuera de la temporada no se dibuja: no es una celda gris, es papel. */
.reja__fuera { padding: 0; }

/* ── Las celdas ──────────────────────────────────────────────────────────── */

.reja td.celda { padding: 0; }

.celda__caja {
  display: block;
  width: 100%;
  height: 38px;
  border: 0;
  padding: 0;
  border-radius: 4px;
  background: var(--hueco);
  position: relative;
  font: inherit;
  color: inherit;
}
button.celda__caja { cursor: pointer; }

/* 2 · Lo ocupado y lo no_disponible NO se dibujan. Comparten exactamente el
   mismo aspecto, a propósito: para ella las dos son «no puedo», y distinguirlas
   con color le diría cuáles bloques existen para otras personas. */
.celda--ocupado .celda__caja,
.celda--no_disponible .celda__caja { background: var(--hueco); }
.celda--pasado .celda__caja { background: var(--hueco-pasado); }

/* 1 · El color de un bloque libre ES la hora del día. */
.celda--libre.h0 .celda__caja { background: var(--t0); }
.celda--libre.h1 .celda__caja { background: var(--t1); }
.celda--libre.h2 .celda__caja { background: var(--t2); }
.celda--libre.h3 .celda__caja { background: var(--t3); }
.celda--libre.h4 .celda__caja { background: var(--t4); }
.celda--libre.h5 .celda__caja { background: var(--t5); }
.celda--libre.h6 .celda__caja { background: var(--t6); }
.celda--libre.h7 .celda__caja { background: var(--t7); }
.celda--libre.h8 .celda__caja { background: var(--t8); }

/* La segunda señal de «libre», la que no es color: un filete interior. */
.celda--libre .celda__caja { box-shadow: inset 0 0 0 1px var(--filete); }
.celda--libre.celda--pasado .celda__caja { opacity: .3; box-shadow: none; }

/* Lo suyo. Tercera señal: contorno de 2 px, sólido o discontinuo, y un glifo. */
.celda--mio.h0 .celda__caja { background: var(--t0); }
.celda--mio.h1 .celda__caja { background: var(--t1); }
.celda--mio.h2 .celda__caja { background: var(--t2); }
.celda--mio.h3 .celda__caja { background: var(--t3); }
.celda--mio.h4 .celda__caja { background: var(--t4); }
.celda--mio.h5 .celda__caja { background: var(--t5); }
.celda--mio.h6 .celda__caja { background: var(--t6); }
.celda--mio.h7 .celda__caja { background: var(--t7); }
.celda--mio.h8 .celda__caja { background: var(--t8); }

.celda--mio .celda__caja {
  outline: 2px solid var(--mio-contorno);
  outline-offset: -2px;
  box-shadow: none;
}
.celda--por_confirmar .celda__caja { outline-style: dashed; }

.celda__glifo {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  color: var(--mio-glifo);
}

/* El bloque elegido. */
.celda--elegida .celda__caja {
  box-shadow: 0 0 0 3px var(--anillo);
  outline: none;
}

/* Foco visible de verdad, y por encima de las celdas vecinas. */
.celda__caja:focus-visible,
.flechas button:focus-visible,
.modalidad button:focus-visible,
.acciones button:focus-visible,
#reintentar:focus-visible {
  outline: 3px solid var(--hoy);
  outline-offset: 2px;
  z-index: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .celda__caja { transition: box-shadow .12s ease, opacity .12s ease; }
  .modalidad button, .flechas button, .acciones button { transition: background-color .12s ease; }
}

/* ── El pie y el aviso ───────────────────────────────────────────────────── */

.pie {
  margin: 18px 0 0;
  font-size: 10.5px;
  color: var(--tinta-tenue);
}

.aviso {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--tinta-suave);
  border-left: 2px solid var(--anillo);
  padding-left: 10px;
}
/* 3 · No hay un solo aviso hasta que hace falta. */
.aviso:empty { display: none; }
.aviso[data-tono="exito"] { border-left-color: var(--punto); }

/* ── La barra de confirmar ───────────────────────────────────────────────── */

.barra {
  padding: 18px 22px 24px;
  background: var(--barra-bg);
  border-top: 1px solid var(--barra-borde);
  border-radius: 0 0 36px 36px;
  box-shadow: var(--tarjeta-sombra);
}
/* En oscuro el diseño pide que la barra sea la tarjeta con un levantón de
   `rgba(244,240,230,.05)` encima, no un color plano. `--barra-bg` ES ese
   levantón —translúcido—, así que necesita algo opaco debajo: el
   `background-color` de la tarjeta. Ponerlo a secas borraría el levantón
   (`background-color` gana sobre el color que fijó `background`), y la barra
   quedaría exactamente del mismo tono que la reja, separada sólo por su filete
   de 1 px. Por eso el levantón se repite como capa de imagen. */
@media (prefers-color-scheme: dark) {
  .barra {
    background-color: #1B1029;
    background-image: linear-gradient(var(--barra-bg), var(--barra-bg));
  }
}

.cuando {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 14px;
  color: var(--titular);
}
.detalle, .nota {
  margin: 4px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--tinta-suave);
}
.nota { margin-top: 8px; }
.detalle:empty, .nota:empty { display: none; }

.acciones {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}
.acciones button, #reintentar {
  flex: 1;
  min-height: 46px;
  border: 0;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
.apartar {
  background: var(--primario-bg);
  color: var(--primario-tinta);
}
.descartar {
  background: var(--pastilla-bg);
  color: var(--pastilla-tinta);
}
.acciones button:disabled { opacity: .5; cursor: default; }
#reintentar { flex: 0 0 auto; padding: 0 28px; }

/* ── Cuando el sistema sustituye la paleta ────────────────────────────────────
   En alto contraste forzado los nueve tintes desaparecen y la reja se quedaría
   siendo una cuadrícula de casillas idénticas. Aquí los estados se vuelven a
   dibujar con los colores del sistema, que es la única paleta que se respeta.
   ────────────────────────────────────────────────────────────────────────── */

@media (forced-colors: active) {
  .celda__caja { forced-color-adjust: none; background: Canvas; }
  .celda--ocupado .celda__caja,
  .celda--no_disponible .celda__caja,
  .celda--pasado .celda__caja { background: Canvas; border: 1px dotted GrayText; }
  .celda--libre .celda__caja { background: ButtonFace; border: 1px solid ButtonBorder; }
  .celda--mio .celda__caja { background: Canvas; border: 2px solid Highlight; }
  .celda--por_confirmar .celda__caja { border-style: dashed; }
  .celda--elegida .celda__caja { border: 3px solid Highlight; background: Highlight; }
  .celda__glifo { color: CanvasText; }
}