/* Turnos Barber — hoja de estilos compartida del prototipo.
 * Mobile first: el flujo de reserva se usa casi siempre desde el teléfono. */

/* =====================================================================
   1. FICHAS DE DISEÑO

   Todo el sistema visual sale de acá: una sola lista, para TODAS las
   pantallas. Antes vivía partida en dos —esta hoja pintaba la aplicación
   en oscuro y `tablero.css` repintaba Estadísticas y la administración en
   claro— y eso eran dos sistemas compitiendo por la misma pantalla.

   Los nombres llevan el prefijo `--t-` porque son los que ya usaban los
   dos tableros, que es el lenguaje que se extendió al resto. Durante una
   etapa convivieron con una capa de nombres viejos, como alias, para no
   reescribir las reglas que colgaban de ellos; esa capa se sacó el
   21/09/2026 y NO puede volver. El porqué está escrito justo debajo de
   la lista.

   TRES TEMAS Y UN ORDEN DE PRIORIDAD

     1. lo que eligió esa persona en ESE navegador (`data-tema`)
     2. `prefers-color-scheme` del sistema operativo
     3. claro, que es lo resuelto por defecto

   La elección vive en el navegador de quien mira: no viaja al servidor y
   no se comparte entre dispositivos. La pantalla lo dice con esas
   palabras, para no prometer una sincronización que no existe.
   ===================================================================== */

:root {
  /* El matiz define la identidad: cambiarlo repinta el sistema entero, y es
     exactamente lo que hace una barbería cuando elige su color. */
  --h: 40;

  /* La tipografía del sistema: la misma pila de siempre. Se usa la letra que
     el dispositivo ya tiene, no se descarga ninguna fuente y no se le pide
     nada a ningún servidor ajeno. */
  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --t-fondo: #faf7f2;
  --t-tarjeta: #ffffff;
  --t-texto: #202124;
  /* Dos grises de texto, y los DOS pasan 4.5:1 sobre blanco. Un gris más
     tranquilo no se puede leer, y es justo el que se usa en subtítulos,
     ayudas y rótulos de 12 a 14 px. */
  --t-suave: #585349;
  --t-tenue: #6a6459;
  --t-borde: #eae5dc;
  --t-borde-fuerte: #d8d1c5;
  /* El borde de un control no es decoración: es lo único que dice dónde
     empieza el campo, y la WCAG le pide 3:1 igual que a un ícono. */
  --t-borde-control: #8b8578;
  --t-serie-prev: #878075;
  --t-superficie: #f2eee7;

  /* El acento sale del matiz de la barbería. La luminosidad NO se eligió
     mirando el ámbar: se calculó para que las quince paletas pasen. Lo
     verifica `npm run contraste`. */
  --t-acento: hsl(var(--h), 62%, 37%);
  --t-acento-claro: hsl(var(--h), 62%, 58%);
  --t-acento-texto: hsl(var(--h), 72%, 28%);
  --t-acento-velo: hsla(var(--h), 62%, 37%, .12);
  --t-acento-velo-2: hsla(var(--h), 62%, 37%, .05);

  /* Colores de serie y de estado. Cada uno con su variante de texto, más
     oscura: el tono que sirve para pintar una barra no siempre llega a 4.5:1
     escrito en 12 px. */
  --t-ok: #23866f;          --t-ok-texto: #1a6c59;
  --t-ambar: #b77916;       --t-ambar-texto: #8a5a0f;
  --t-rojo: #c84c60;        --t-rojo-texto: #a83348;
  --t-azul: #4978c8;        --t-azul-texto: #33559b;
  --t-violeta: #8064c8;     --t-violeta-texto: #5f45a3;

  --t-globo-fondo: #202124;
  --t-globo-texto: #ffffff;
  --t-globo-borde: transparent;
  --t-globo-linea: rgba(255, 255, 255, .16);
  --t-globo-suave: rgba(255, 255, 255, .8);
  --t-globo-tenue: rgba(255, 255, 255, .6);
  --t-cabecera: rgba(250, 247, 242, .88);
  --t-brillo: #ece7de;
  /* La sombra que avisa que una tabla sigue hacia el costado. */
  --t-sombra-lateral: rgba(32, 33, 36, .22);
  --t-boton-tinta: #ffffff;
  --t-quitar: rgba(255, 255, 255, .7);
  --t-quitar-activo: #ffffff;
  --t-ok-velo: rgba(35, 134, 111, .12);
  --t-ambar-velo: rgba(183, 121, 22, .12);
  --t-rojo-velo: rgba(200, 76, 96, .12);
  --t-azul-velo: rgba(73, 120, 200, .12);
  --t-alerta-fondo: #fdf7ec;  --t-alerta-borde: #e8d6b0;
  --t-error-fondo: #fdf0f2;   --t-error-borde: #eec9d0;

  --t-radio: 20px;
  --t-radio-chico: 12px;
  --t-radio-pastilla: 999px;
  --t-sombra: 0 1px 2px rgba(32, 33, 36, .04), 0 6px 20px rgba(32, 33, 36, .05);
  --t-sombra-alta: 0 2px 4px rgba(32, 33, 36, .06), 0 16px 40px rgba(32, 33, 36, .12);
  --t-paso: 8px;
  --t-relleno: 22px;

  --t-rapido: 140ms;
  --t-medio: 220ms;
  --t-lento: 420ms;
  --t-curva: cubic-bezier(.2, .7, .3, 1);

  /* Cuánto ancho usa un tablero, que necesita más que una columna de lectura. */
  --t-ancho: 1320px;

  /* Ancho de una columna de lectura. NO es un alias de color: es una medida
     que el tablero pisa a propósito con `--t-ancho`, y por eso sigue siendo
     una ficha propia. */
  --ancho: 1080px;
}

/* ====================================================================
   POR QUÉ ACÁ NO HAY ALIASES, Y POR QUÉ NO PUEDEN VOLVER

   Hasta el 21/09/2026 esta lista terminaba con una capa de nombres
   viejos —`--texto-suave: var(--t-suave)`, `--superficie:
   var(--t-tarjeta)`, y así— para no reescribir las reglas que ya
   colgaban de ellos. Parecía inofensivo y no lo era.

   Una propiedad personalizada NO se resuelve donde se usa: se resuelve
   donde se DECLARA, y lo que hereda es ese resultado ya calculado. O
   sea que `--texto-suave` declarado en `:root` vale para siempre lo que
   `--t-suave` valía EN `:root`. Si un descendiente redefine `--t-suave`
   —y eso es exactamente lo que hace el lienzo de la administración en
   `tablero.css`—, el alias no se entera y sigue trayendo el color del
   nivel de arriba.

   El resultado medido, con el tema oscuro puesto y la administración
   abierta: `--t-suave` valía `#475569` (gris oscuro, el correcto sobre
   una tarjeta clara) y `--texto-suave` valía `#b0b6c2`, el gris claro
   del tema oscuro. Los correos, los rótulos y media tabla se pintaban
   casi blancos sobre blanco —1,9:1—, y la tapa de las tablas
   desplazables quedaba con el `#17191f` del tema oscuro, que son las
   bandas oscuras que se veían en los bordes.

   La corrección no fue tapar cada texto con una regla más: fue sacar la
   capa. Las 116 reglas que usaban los nombres viejos pasaron a usar las
   fichas `--t-*` directamente, así que ahora se resuelven en el elemento
   donde se pintan y siguen al lienzo que tengan encima.

   REGLA QUE QUEDA: ninguna ficha se define en términos de otra ficha
   fuera del bloque de tema. Si alguna vez hace falta un valor derivado,
   se declara en TODOS los bloques que redefinen su origen —los tres
   temas y cada lienzo—, nunca una sola vez en `:root`. Lo mismo vale
   para lo que cuelga de `--h`: ver el lienzo de la administración en
   `tablero.css`, que por eso repite los cinco acentos.
   ==================================================================== */

/* ---------------------------------------------------------- TEMA OSCURO

   La lista va DOS veces y tiene que seguir igual: una para la elección
   explícita de la persona y otra dentro de la consulta de medio, porque
   una `@media` no se puede meter en una lista de selectores.
   `:not([data-tema="claro"])` es lo que hace que elegir claro gane sobre
   la preferencia del sistema operativo.

   Ningún componente tiene una regla por tema: todos leen estas fichas. Si
   tocás una, tocá la otra copia.
   ---------------------------------------------------------------------- */

:root[data-tema="oscuro"] {
  --t-fondo: #0f1115;
  --t-tarjeta: #17191f;
  --t-texto: #f1f3f7;
  --t-suave: #b0b6c2;
  --t-tenue: #969db0;
  --t-borde: rgba(255, 255, 255, .09);
  --t-borde-fuerte: rgba(255, 255, 255, .17);
  --t-borde-control: rgba(255, 255, 255, .40);
  --t-serie-prev: rgba(255, 255, 255, .38);
  --t-superficie: #222633;

  --t-acento: hsl(var(--h), 68%, 62%);
  --t-acento-claro: hsl(var(--h), 78%, 74%);
  --t-acento-texto: hsl(var(--h), 78%, 72%);
  --t-acento-velo: hsla(var(--h), 68%, 62%, .16);
  --t-acento-velo-2: hsla(var(--h), 68%, 62%, .07);

  --t-ok: #4fbf9b;          --t-ok-texto: #6ed3b2;
  --t-ambar: #dfa441;       --t-ambar-texto: #eebb68;
  --t-rojo: #e8788c;        --t-rojo-texto: #f295a5;
  --t-azul: #7ea3ee;        --t-azul-texto: #9cb9f3;
  --t-violeta: #a992ec;     --t-violeta-texto: #bfacf4;

  --t-globo-fondo: #2b303d;
  --t-globo-texto: #f1f3f7;
  --t-globo-borde: rgba(255, 255, 255, .17);
  --t-globo-linea: rgba(255, 255, 255, .12);
  --t-globo-suave: #b0b6c2;
  --t-globo-tenue: #a2a9ba;
  --t-cabecera: rgba(15, 17, 21, .9);
  --t-brillo: #2a2f3c;
  --t-sombra-lateral: rgba(0, 0, 0, .5);
  --t-boton-tinta: #0f1115;
  --t-quitar: rgba(0, 0, 0, .3);
  --t-quitar-activo: rgba(0, 0, 0, .5);
  --t-ok-velo: rgba(79, 191, 155, .15);
  --t-ambar-velo: rgba(223, 164, 65, .15);
  --t-rojo-velo: rgba(232, 120, 140, .15);
  --t-azul-velo: rgba(126, 163, 238, .15);
  --t-alerta-fondo: rgba(223, 164, 65, .12);  --t-alerta-borde: rgba(223, 164, 65, .35);
  --t-error-fondo: rgba(232, 120, 140, .12);  --t-error-borde: rgba(232, 120, 140, .35);

  --t-sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .28);
  --t-sombra-alta: 0 2px 6px rgba(0, 0, 0, .5), 0 20px 48px rgba(0, 0, 0, .45);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --t-fondo: #0f1115;
    --t-tarjeta: #17191f;
    --t-texto: #f1f3f7;
    --t-suave: #b0b6c2;
    --t-tenue: #969db0;
    --t-borde: rgba(255, 255, 255, .09);
    --t-borde-fuerte: rgba(255, 255, 255, .17);
    --t-borde-control: rgba(255, 255, 255, .40);
    --t-serie-prev: rgba(255, 255, 255, .38);
    --t-superficie: #222633;

    --t-acento: hsl(var(--h), 68%, 62%);
    --t-acento-claro: hsl(var(--h), 78%, 74%);
    --t-acento-texto: hsl(var(--h), 78%, 72%);
    --t-acento-velo: hsla(var(--h), 68%, 62%, .16);
    --t-acento-velo-2: hsla(var(--h), 68%, 62%, .07);

    --t-ok: #4fbf9b;          --t-ok-texto: #6ed3b2;
    --t-ambar: #dfa441;       --t-ambar-texto: #eebb68;
    --t-rojo: #e8788c;        --t-rojo-texto: #f295a5;
    --t-azul: #7ea3ee;        --t-azul-texto: #9cb9f3;
    --t-violeta: #a992ec;     --t-violeta-texto: #bfacf4;

    --t-globo-fondo: #2b303d;
    --t-globo-texto: #f1f3f7;
    --t-globo-borde: rgba(255, 255, 255, .17);
    --t-globo-linea: rgba(255, 255, 255, .12);
    --t-globo-suave: #b0b6c2;
    --t-globo-tenue: #a2a9ba;
    --t-cabecera: rgba(15, 17, 21, .9);
    --t-brillo: #2a2f3c;
    --t-sombra-lateral: rgba(0, 0, 0, .5);
  --t-sombra-lateral: rgba(0, 0, 0, .5);
    --t-boton-tinta: #0f1115;
    --t-quitar: rgba(0, 0, 0, .3);
    --t-quitar-activo: rgba(0, 0, 0, .5);
    --t-ok-velo: rgba(79, 191, 155, .15);
    --t-ambar-velo: rgba(223, 164, 65, .15);
    --t-rojo-velo: rgba(232, 120, 140, .15);
    --t-azul-velo: rgba(126, 163, 238, .15);
    --t-alerta-fondo: rgba(223, 164, 65, .12);  --t-alerta-borde: rgba(223, 164, 65, .35);
    --t-error-fondo: rgba(232, 120, 140, .12);  --t-error-borde: rgba(232, 120, 140, .35);

    --t-sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .28);
    --t-sombra-alta: 0 2px 6px rgba(0, 0, 0, .5), 0 20px 48px rgba(0, 0, 0, .45);
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--t-fondo);
  color: var(--t-texto);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: 1.9rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 1em; }
/* Los enlaces van en la variante de TEXTO del acento, no en la de dibujo.
   `--t-acento` está calculado para una barra o una línea, donde la WCAG pide
   3:1; como texto de 14 px da 4,39:1 sobre blanco y no llega al mínimo. Lo
   encontró `npm run contraste:real` recorriendo las pantallas de verdad: el
   tablero ya usaba la variante correcta y el resto de la aplicación no. */
a { color: var(--t-acento-texto); text-decoration: none; }
a:hover { text-decoration: underline; }
small { font-size: .82rem; }

.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 16px; }
.angosto { max-width: 560px; }
.apilar > * + * { margin-top: 12px; }
.fila { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.fila-sep { justify-content: space-between; }
.crece { flex: 1; }
.suave { color: var(--t-suave); }
.centro { text-align: center; }
.oculto { display: none !important; }

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

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 18px; min-height: 46px;
  border: 1px solid transparent; border-radius: var(--t-radio);
  background: var(--t-acento); color: var(--t-boton-tinta);
  font: inherit; font-weight: 650; cursor: pointer;
  transition: filter .15s ease, background .15s ease;
}
.btn:hover:not(:disabled) { filter: brightness(1.08); text-decoration: none; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.secundario { background: var(--t-superficie); color: var(--t-texto); border-color: var(--t-borde); }
.btn.fantasma { background: transparent; color: var(--t-texto); border-color: var(--t-borde); }
.btn.peligro { background: transparent; color: var(--t-rojo); border-color: var(--t-rojo); }
.btn.bloque { width: 100%; }
.btn.chico { padding: 7px 12px; min-height: 36px; font-size: .86rem; }

/* -------------------------------------------------------------- tarjetas */

.tarjeta {
  background: var(--t-tarjeta);
  border: 1px solid var(--t-borde);
  border-radius: var(--t-radio);
  padding: 18px;
}
.tarjeta + .tarjeta { margin-top: 14px; }
.tarjeta.destacada { border-color: var(--t-acento); box-shadow: 0 0 0 1px var(--t-acento-velo); }

.etiqueta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  font-size: .76rem; font-weight: 650; letter-spacing: .01em;
  background: var(--t-superficie); color: var(--t-suave);
}
/* Cada estado con su variante de TEXTO. Los colores pelados —`--t-ok`,
   `--t-ambar`, `--t-rojo`— son para pintar una barra o un tramo de anillo, que
   es un objeto gráfico y necesita 3:1. Una etiqueta es texto de 12 px y
   necesita 4,5:1: medido, `--t-ambar` sobre su propio velo daba 4,05:1. */
.etiqueta.ok { background: var(--t-ok-velo); color: var(--t-ok-texto); }
.etiqueta.alerta { background: var(--t-ambar-velo); color: var(--t-ambar-texto); }
.etiqueta.error { background: var(--t-rojo-velo); color: var(--t-rojo-texto); }
.etiqueta.acento { background: var(--t-acento-velo); color: var(--t-acento-texto); }

/* Selector de color del sistema, en Mi negocio. La muestra es un círculo del
 * color; el nombre va escrito al lado para no depender de distinguirlo. */
.paletas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 8px;
}
.paleta {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  min-height: 44px;
  border: 1px solid var(--t-borde);
  border-radius: var(--t-radio-chico);
  background: var(--t-superficie);
  cursor: pointer;
  font-size: .85rem;
  font-weight: 400;
}
.paleta input { position: absolute; opacity: 0; width: 0; height: 0; }
.paleta .muestra {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex: none;
  box-shadow: inset 0 0 0 1px var(--t-borde-fuerte);
}
.paleta.elegida, .paleta:has(input:checked) {
  border-color: var(--t-acento);
  box-shadow: 0 0 0 1px var(--t-acento);
}
.paleta:focus-within { outline: 2px solid var(--t-acento-texto); outline-offset: 2px; }

/* La tarjeta de plan del formulario de registro y de la portada: mismo
 * criterio que la muestra de color, con borde y sombra en vez de un cambio de
 * fondo que en el tema oscuro se nota menos. */
.opcion-plan.elegida, .opcion-plan:has(input:checked) {
  border-color: var(--t-acento) !important;
  box-shadow: 0 0 0 1px var(--t-acento);
}
.opcion-plan:focus-within { outline: 2px solid var(--t-acento-texto); outline-offset: 2px; }

/* Semáforo de vencimientos, en la tabla de barberías de administración. El
 * color nunca va solo: al lado siempre está el estado escrito y los días que
 * faltan, para quien no distinga estos tres colores. */
/* Mismo criterio: el semáforo es una palabra, no un punto de color. */
.semaforo.al-dia { color: var(--t-ok-texto); }
.semaforo.por-vencer { color: var(--t-ambar-texto); }
.semaforo.vencida { color: var(--t-rojo-texto); }

/* ------------------------------------------------------------ formulario */

label { display: block; font-size: .86rem; font-weight: 600; margin-bottom: 6px; }
input, select, textarea {
  width: 100%; padding: 12px; min-height: 46px;
  background: var(--t-fondo); color: var(--t-texto);
  border: 1px solid var(--t-borde); border-radius: 10px;
  font: inherit;
}
input:focus, select:focus, textarea:focus, .btn:focus-visible, .opcion:focus-visible {
  outline: 2px solid var(--t-acento); outline-offset: 1px;
}
.campo + .campo { margin-top: 14px; }
.ayuda { font-size: .8rem; color: var(--t-suave); margin-top: 6px; }
.error-campo { font-size: .8rem; color: var(--t-rojo); margin-top: 6px; }

/* --------------------------------------------- buscador de clientes */

.buscador-cliente { position: relative; }
.buscador-cliente-lista {
  position: absolute; left: 0; right: 0; top: calc(100% + 2px); z-index: 5;
  margin: 0; padding: 4px; list-style: none;
  max-height: 260px; overflow-y: auto;
  background: var(--t-tarjeta); color: var(--t-texto);
  border: 1px solid var(--t-borde); border-radius: var(--t-radio);
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.buscador-cliente-opcion {
  padding: 10px 12px; border-radius: 8px; cursor: pointer; font-size: .92rem;
}
.buscador-cliente-opcion:hover, .buscador-cliente-opcion.activo {
  background: var(--t-acento-velo);
}

/* ------------------------------------------------- selección de opciones */

.opcion {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 14px; text-align: left;
  background: var(--t-tarjeta); color: var(--t-texto);
  border: 1px solid var(--t-borde); border-radius: var(--t-radio);
  font: inherit; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.opcion:hover { border-color: var(--t-acento); }
.opcion[aria-pressed="true"] { border-color: var(--t-acento); background: var(--t-acento-velo); }
.opcion .titulo { font-weight: 600; }
.opcion .meta { font-size: .85rem; color: var(--t-suave); }
.opcion .precio { margin-left: auto; font-weight: 650; white-space: nowrap; }

.avatar {
  width: 40px; height: 40px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--t-acento-velo); color: var(--t-acento); font-weight: 700;
}

.grilla-horarios {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px;
}
.grilla-horarios .opcion { justify-content: center; padding: 12px 6px; font-weight: 600; }

.tira-dias { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.dia {
  flex: none; width: 66px; padding: 10px 4px; text-align: center;
  background: var(--t-tarjeta); color: var(--t-texto);
  border: 1px solid var(--t-borde); border-radius: var(--t-radio);
  font: inherit; cursor: pointer;
}
.dia[aria-pressed="true"] { border-color: var(--t-acento); background: var(--t-acento-velo); }
.dia:disabled { opacity: .35; cursor: not-allowed; }
.dia .dsem { font-size: .72rem; color: var(--t-suave); text-transform: uppercase; }
.dia .dnum { font-size: 1.2rem; font-weight: 650; }
.dia .dlibre { font-size: .68rem; color: var(--t-suave); }

/* ---------------------------------------------------------------- avisos */

.aviso {
  padding: 12px 14px; border-radius: var(--t-radio);
  border: 1px solid var(--t-borde); background: var(--t-superficie);
  font-size: .9rem;
}
/* Los avisos leen las fichas de estado, que cambian con el tema. El rojo
   claro que había escrito a mano era ilegible sobre fondo claro. */
.aviso.error {
  border-color: var(--t-error-borde); background: var(--t-error-fondo);
  color: var(--t-rojo-texto);
}
.aviso.ok {
  border-color: var(--t-ok); background: var(--t-ok-velo); color: var(--t-ok-texto);
}
.aviso.alerta {
  border-color: var(--t-alerta-borde); background: var(--t-alerta-fondo);
  color: var(--t-ambar-texto);
}

.vacio { padding: 28px 16px; text-align: center; color: var(--t-suave); }

/* --------------------------------------------------------------- tablas */

table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { padding: 10px 8px; text-align: left; border-bottom: 1px solid var(--t-borde); }
th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--t-suave); font-weight: 600; }
.tabla-scroll { overflow-x: auto; }

/* --------------------------------------------- cabecera, cinta y pie */

.cinta {
  background: var(--t-acento-velo); border-bottom: 1px solid var(--t-borde);
  color: var(--t-acento); font-size: .8rem; text-align: center; padding: 7px 16px;
}
.cinta a { text-decoration: underline; }

.cabecera {
  position: sticky; top: 0; z-index: 10;
  background: var(--t-cabecera); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--t-borde);
}
.cabecera .contenedor { display: flex; align-items: center; gap: 12px; height: 60px; }
.marca { display: flex; align-items: center; gap: 9px; font-weight: 700; color: var(--t-texto); }
.marca:hover { text-decoration: none; }
.marca .tijera { color: var(--t-acento); }
.marca .logo-marca { display: block; width: auto; height: 28px; }
.nav { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.nav a { padding: 8px 10px; border-radius: 8px; color: var(--t-suave); font-size: .9rem; }
.nav a:hover { background: var(--t-superficie); color: var(--t-texto); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--t-acento); background: var(--t-acento-velo); }

/* ------------------------------------------------------ control de tema

   Automático / Claro / Oscuro, en la cabecera de todas las pantallas. Lo
   dibuja `tema.js`, así que nunca existe un botón que no pueda funcionar:
   sin ese archivo no aparece nada y el tema lo resuelve el sistema
   operativo. La opción activa se marca con `aria-pressed`, no solo con
   color: un lector de pantalla tiene que poder decir cuál está puesta. */
.tema {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--t-borde);
  border-radius: var(--t-radio-pastilla);
  background: var(--t-tarjeta);
}
.tema-rotulo {
  padding: 0 8px 0 9px;
  font-size: .72rem;
  font-weight: 650;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--t-tenue);
}
.tema-opcion {
  min-height: 30px;
  padding: 0 11px;
  border: 0;
  border-radius: var(--t-radio-pastilla);
  background: transparent;
  color: var(--t-suave);
  font: inherit;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-rapido) var(--t-curva), color var(--t-rapido) var(--t-curva);
}
.tema-opcion:hover { color: var(--t-texto); background: var(--t-superficie); }
.tema-opcion[aria-pressed="true"] {
  background: var(--t-acento-velo);
  color: var(--t-acento-texto);
}
.tema-opcion:focus-visible { outline: 2px solid var(--t-acento); outline-offset: 1px; }

/* En un teléfono el rótulo sobra: las tres opciones se entienden solas y
   ocupan menos. */
@media (max-width: 719px) {
  .tema-rotulo { display: none; }
  .tema-opcion { padding: 0 9px; font-size: .76rem; }
}

.pie {
  margin-top: 56px; padding: 28px 0 40px;
  border-top: 1px solid var(--t-borde); color: var(--t-suave); font-size: .86rem;
}

/* ------------------------------------------------------- pestañas panel */

/* ------------------------------------------------- navegación por secciones

   Once secciones del panel no entran en once botones con borde: en 1440 px se
   desbordaban y «Mi negocio» se partía en dos renglones, que es lo que hace
   que una barra de navegación se lea como un error de maquetación. Y en un
   teléfono se apilaban en cuatro filas de botones grandes, que empujaban el
   contenido debajo del pliegue.

   Acá son pastillas sin caja, en un riel que se desliza cuando no entra. La
   sección actual es la única pintada. Nada se parte nunca.

   Vale para TODAS las pantallas del panel y de la administración, no solo
   para los dos tableros: era la misma barra vestida de dos maneras. */

.pestanas {
  display: flex;
  gap: 2px;
  padding: 4px;
  margin: 0 0 22px;
  border: 1px solid var(--t-borde);
  border-radius: var(--t-radio-pastilla);
  background: var(--t-tarjeta);
  box-shadow: var(--t-sombra);
  overflow-x: auto;
  flex-wrap: nowrap;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.pestanas::-webkit-scrollbar { display: none; }

.pestanas .btn {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid transparent;
  border-radius: var(--t-radio-pastilla);
  background: transparent;
  box-shadow: none;
  color: var(--t-suave);
  font-size: .86rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background var(--t-rapido) var(--t-curva), color var(--t-rapido) var(--t-curva);
}
.pestanas .btn:hover {
  background: var(--t-superficie);
  color: var(--t-texto);
  border-color: transparent;
  box-shadow: none;
  filter: none;
}
/* La sección actual es el único `.btn` sin `.secundario` de la fila. */
.pestanas .btn:not(.secundario) {
  background: var(--t-acento-texto);
  color: var(--t-boton-tinta);
  box-shadow: none;
}
.pestanas .btn:focus-visible { outline: 2px solid var(--t-acento); outline-offset: 2px; }

/* ------------------------------------------------------------- landing */

.hero { padding: 56px 0 40px; }
.hero h1 { max-width: 16ch; }
.hero .bajada { font-size: 1.1rem; color: var(--t-suave); max-width: 52ch; }
.hero .acciones { margin-top: 24px; display: flex; gap: 12px; flex-wrap: wrap; }

.seccion { padding: 44px 0; }
.seccion > h2 { margin-bottom: 6px; }
.seccion > .bajada { color: var(--t-suave); margin-bottom: 24px; max-width: 60ch; }

.paso .num {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--t-acento-velo); color: var(--t-acento); font-weight: 700; font-size: .9rem;
  margin-bottom: 10px;
}

.precio-grande { font-size: 2.2rem; font-weight: 700; letter-spacing: -.02em; }
.precio-grande span { font-size: .95rem; font-weight: 500; color: var(--t-suave); }
.lista-check { list-style: none; padding: 0; margin: 16px 0 0; font-size: .92rem; }
.lista-check li { padding-left: 24px; position: relative; margin-bottom: 8px; }
.lista-check li::before { content: "✓"; position: absolute; left: 0; color: var(--t-acento); font-weight: 700; }
.lista-check li.no { color: var(--t-suave); }
.lista-check li.no::before { content: "—"; color: var(--t-suave); }

details.faq { border-bottom: 1px solid var(--t-borde); padding: 14px 0; }
details.faq summary { cursor: pointer; font-weight: 600; list-style: none; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; float: right; color: var(--t-acento); font-weight: 700; }
details.faq[open] summary::after { content: "−"; }
details.faq p { margin: 10px 0 0; color: var(--t-suave); font-size: .92rem; }

/* --------------------------------------------------------------- agenda */

.turno {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 14px; border: 1px solid var(--t-borde); border-radius: var(--t-radio);
  background: var(--t-tarjeta); border-left: 3px solid var(--t-acento);
}
.turno + .turno { margin-top: 8px; }
.turno.cancelada { opacity: .5; border-left-color: var(--t-suave); }
.turno.completada { border-left-color: var(--t-ok); }
.turno.ausente { border-left-color: var(--t-rojo); }
.turno .hora { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 52px; }
.turno .acciones { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }

/* Un bloqueo de disponibilidad en la Agenda: se distingue de un turno por el
   rayado de fondo y el borde punteado, nunca solo por el color, así que el
   texto «Bloqueado» siempre acompaña. */
.turno.bloqueo {
  border-left-style: dashed;
  border-left-color: var(--t-tenue);
  background: repeating-linear-gradient(135deg, var(--t-tarjeta), var(--t-tarjeta) 10px,
    var(--t-fondo) 10px, var(--t-fondo) 20px);
}

.resumen {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px;
}
.resumen .caja {
  background: var(--t-tarjeta); border: 1px solid var(--t-borde);
  border-radius: var(--t-radio); padding: 14px;
}
.resumen .caja .n { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.resumen .caja .t { font-size: .8rem; color: var(--t-suave); }

/* `contain`, no `cover`: un logo real no se puede recortar sin perder parte
   del dibujo. El fondo es blanco fijo y no el de la tarjeta: un logo con
   transparencia se dibuja para leerse sobre blanco, y en tema oscuro
   `--t-tarjeta` lo haría desaparecer si es de trazo oscuro. */
.logo-negocio {
  width: 72px; height: 72px; border-radius: 16px; object-fit: contain;
  border: 1px solid var(--t-borde); background: #fff; padding: 6px;
}

/* El logo PROVISORIO —el de Turnos Barber, puesto en el lugar del propio
   mientras una barbería no cargó el suyo— lleva fondo negro fijo, en los dos
   temas, a propósito: es la marca de que ESO es un isotipo puesto ahí y no
   la marca real de ese negocio. Un logo propio nunca lleva esta clase; el
   fondo blanco de `.logo-negocio` sigue siendo el de siempre para esos.
   `!important` porque `.logo-negocio` y esta comparten selector de una sola
   clase: sin él, cuál gana depende del orden de las clases en el HTML, que es
   justo el tipo de fragilidad que no se quiere acá. */
.logo-provisorio { background: #000 !important; }

/* El mismo criterio en el logo chico de la cabecera del barbero —ahí el logo
   va suelto sobre el fondo de la cabecera, sin caja propia—: el provisorio
   se envuelve en un cuadrado negro para no perderse en un tema claro. */
.logo-marca.logo-provisorio {
  border-radius: 4px; padding: 3px; box-sizing: content-box;
  height: 22px;
}

/* ------------------------------------------------------- comprobante */

.comprobante {
  border: 1px solid var(--t-acento); border-radius: var(--t-radio);
  background: var(--t-tarjeta); padding: 20px;
}
.comprobante .codigo {
  font-size: 1.6rem; font-weight: 700; letter-spacing: .12em;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; color: var(--t-acento);
}
.dato { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--t-borde); font-size: .92rem; }
.dato:last-child { border-bottom: none; }
.dato .k { color: var(--t-suave); }
.dato .v { font-weight: 600; text-align: right; }

/* --------------------------------------------------------------- pasos */

.migas { display: flex; gap: 6px; align-items: center; font-size: .78rem; color: var(--t-suave); margin-bottom: 16px; flex-wrap: wrap; }
.migas b { color: var(--t-acento); font-weight: 600; }

@media (min-width: 720px) {
  h1 { font-size: 2.6rem; }
  h2 { font-size: 1.7rem; }
  .cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
  .cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
  .cols-2 .tarjeta + .tarjeta, .cols-3 .tarjeta + .tarjeta { margin-top: 0; }
  .hero { padding: 80px 0 56px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* En el teléfono la cabecera deja solo la marca y la acción principal. */
@media (max-width: 719px) {
  .nav a:not(.btn) { display: none; }
}

/* ------------------------------------------- correcciones para el celular */

/* Lo que se desplaza en horizontal tiene que avisarlo. Las dos primeras capas
 * viajan con el contenido y tapan la sombra cuando ya no queda nada de ese
 * lado; las otras dos quedan fijas y aparecen solo si hay más para ver. */
.tabla-scroll, .tira-dias {
  --tapa: var(--t-tarjeta);
  background-image:
    linear-gradient(to right, var(--tapa), rgba(0, 0, 0, 0)),
    linear-gradient(to left, var(--tapa), rgba(0, 0, 0, 0)),
    linear-gradient(to right, var(--t-sombra-lateral), rgba(0, 0, 0, 0)),
    linear-gradient(to left, var(--t-sombra-lateral), rgba(0, 0, 0, 0));
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-size: 26px 100%, 26px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}

/* La tira de días vive sobre el fondo de la página, no sobre una tarjeta. */
.tira-dias { --tapa: var(--t-fondo); }

.solo-angosto { display: none; }

@media (max-width: 719px) {
  /* Las pestañas del panel se acomodan en varias líneas en vez de esconder
   * las últimas detrás de un desplazamiento que nadie descubre. */
  /* El riel NO envuelve en el teléfono: se desliza. Envolviendo, once
     secciones daban cuatro filas de botones y empujaban el contenido debajo
     del pliegue. */
  .pestanas { flex-wrap: nowrap; overflow-x: auto; }

  /* La cabecera lleva cuatro cosas: la marca, en qué negocio estás, el tema y
     Salir. A 390 px eso no entra en una línea, y salía cincuenta píxeles por
     fuera de la ventana: toda la pantalla se arrastraba de costado al querer
     bajar, que es lo peor que puede hacer una barra fija.

     Se acomoda en dos filas —la marca arriba, el resto abajo— en vez de
     encogerse: el nombre del negocio es el dato que dice dónde estás parado y
     no se recorta con puntos suspensivos. El  hace falta porque
     un elemento flexible no se encoge por debajo de su contenido salvo que se
     le diga. */
  .cabecera .contenedor {
    flex-wrap: wrap; gap: 8px; height: auto; min-height: 56px;
    padding-top: 8px; padding-bottom: 8px;
  }
  .marca { white-space: nowrap; font-size: .95rem; }
  .cabecera .nav {
    min-width: 0; flex: 1 1 100%; margin-left: 0;
    justify-content: flex-end; flex-wrap: wrap;
  }
  .cabecera .etiqueta { min-width: 0; line-height: 1.25; }

  .solo-angosto { display: block; }
}

/* Con el dedo, los botones chicos necesitan más superficie que con el ratón. */
@media (pointer: coarse) {
  .btn.chico { min-height: 44px; }
  .opcion { min-height: 48px; }
}


/* Un aviso necesita aire propio arriba y abajo. Sin esto queda pegado a lo que
 * tenga al lado —la pila de botones del comprobante, el formulario de ingreso— y
 * parece encimado. Los márgenes verticales se funden con los del vecino, así que
 * donde quien lo usa ya puso separación no se duplica. */
.aviso {
  margin-top: 16px;
  margin-bottom: 16px;
}

/* ======================================================================
   SUPERFICIES, CONTROLES Y PROFUNDIDAD

   Acá vivía otra cosa: fondo casi negro, dos halos de color fijos detrás
   de todo, un «horizonte» luminoso que respiraba en bucle, tarjetas de
   vidrio con un filo brillante arriba y botones con degradado, borde
   claro y una sombra de color que los levantaba al pasar por encima.

   POR QUÉ SE FUE

   Porque el tablero de Estadísticas ya no se veía así, y tener las dos
   cosas en la misma aplicación no es una decisión de estilo: es que la
   Agenda y las Estadísticas parecen dos productos. El pedido fue
   extender el lenguaje del tablero al resto, y este bloque era lo que lo
   impedía.

   Y porque casi nada de eso resistía el tema claro. Un velo blanco al
   7 % sobre una tarjeta blanca no se ve; un filo de luz sobre fondo
   marfil, tampoco; y un halo de color detrás de una pantalla de trabajo
   compite con los datos.

   QUÉ QUEDA EN SU LUGAR

   Superficie plana, un borde de un píxel, una sombra corta y el radio
   del sistema. La jerarquía la dan el espacio y el contraste, no la
   profundidad. Es lo mismo que hace el tablero, y ahora es una sola
   lista de reglas para toda la aplicación.
   ====================================================================== */

body { background: var(--t-fondo); }

/* --------------------------------------------------------------- tarjetas */

.tarjeta, .comprobante, .turno, .resumen .caja, .opcion, .dia {
  background: var(--t-tarjeta);
  border: 1px solid var(--t-borde);
  border-radius: var(--t-radio);
  position: relative;
}

.tarjeta, .comprobante { box-shadow: var(--t-sombra); }

.tarjeta.destacada {
  border-color: var(--t-acento);
  box-shadow: var(--t-sombra), 0 0 0 1px var(--t-acento-velo);
}

.cinta {
  background: var(--t-acento-velo);
  border-bottom: 1px solid var(--t-borde);
  color: var(--t-acento-texto);
}

.cabecera {
  background: var(--t-cabecera);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--t-borde);
}

.pie { border-top: 1px solid var(--t-borde); }

/* -------------------------------------------------------------- controles */

/* El botón principal usa el acento OSCURO de fondo y la tinta clara encima.
   Con el acento normal, el blanco encima queda en 3.5:1 con el ámbar por
   defecto: no alcanza para texto. Con el oscuro, las quince paletas pasan
   cómodas y el botón se lee igual de marcado. Lo mide `npm run contraste`. */
.btn {
  border-radius: var(--t-radio-chico);
  background: var(--t-acento-texto);
  color: var(--t-boton-tinta);
  border: 1px solid transparent;
  box-shadow: none;
  font-weight: 600;
  transition: filter var(--t-rapido) var(--t-curva),
              background var(--t-rapido) var(--t-curva),
              border-color var(--t-rapido) var(--t-curva);
}
.btn:hover:not(:disabled) { filter: brightness(1.12); text-decoration: none; }
.btn:focus-visible { outline: 2px solid var(--t-acento); outline-offset: 2px; }

.btn.secundario, .btn.fantasma {
  background: var(--t-tarjeta);
  color: var(--t-texto);
  border-color: var(--t-borde-control);
  box-shadow: none;
  filter: none;
}
.btn.secundario:hover:not(:disabled), .btn.fantasma:hover:not(:disabled) {
  border-color: var(--t-acento);
  color: var(--t-acento-texto);
  background: var(--t-tarjeta);
  filter: none;
}

.btn.peligro {
  background: transparent;
  color: var(--t-rojo-texto);
  border-color: var(--t-rojo);
  box-shadow: none;
}
.btn.peligro:hover:not(:disabled) { background: var(--t-rojo-velo); filter: none; }

/* Las opciones del flujo de reserva: sin salto ni sombra de color. Lo que
   marca que se puede tocar es el borde, que además es lo único que se ve con
   el dedo encima en un teléfono. */
.opcion, .dia {
  transition: border-color var(--t-rapido) var(--t-curva),
              background var(--t-rapido) var(--t-curva);
}
.opcion:hover, .dia:not(:disabled):hover {
  border-color: var(--t-acento);
  background: var(--t-acento-velo-2);
}
.opcion:focus-visible, .dia:focus-visible {
  outline: 2px solid var(--t-acento); outline-offset: 2px;
}
.opcion[aria-pressed="true"], .dia[aria-pressed="true"] {
  border-color: var(--t-acento);
  background: var(--t-acento-velo);
  box-shadow: none;
}

/* Cada opción de horario dice de cuándo a cuándo. El segundo horario sale de
   la duración REAL del servicio, no del intervalo de la grilla. */
.opcion-ini { display: block; font-weight: 650; }
.opcion-fin {
  display: block;
  font-size: .78rem;
  font-weight: 500;
  color: var(--t-tenue);
  font-variant-numeric: tabular-nums;
}

input, select, textarea {
  background: var(--t-tarjeta);
  color: var(--t-texto);
  border: 1px solid var(--t-borde-control);
  border-radius: var(--t-radio-chico);
  transition: border-color var(--t-rapido) var(--t-curva),
              box-shadow var(--t-rapido) var(--t-curva);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--t-acento);
  box-shadow: 0 0 0 3px var(--t-acento-velo);
  outline: none;
}
input::placeholder, textarea::placeholder { color: var(--t-tenue); }

.avatar {
  background: var(--t-acento-velo);
  color: var(--t-acento-texto);
  border: 1px solid var(--t-borde);
}

.etiqueta.acento {
  background: var(--t-acento-velo);
  color: var(--t-acento-texto);
  border: 1px solid transparent;
}

.codigo { color: var(--t-acento-texto); text-shadow: none; }

/* ---------------------------------------------------- tipografía y portada */

h1, h2, h3 { letter-spacing: -.02em; }

.hero { text-align: center; padding-top: 64px; }
.hero h1 {
  max-width: 18ch;
  margin-inline: auto;
  font-size: clamp(2.1rem, 7vw, 3.4rem);
  font-weight: 650;
  line-height: 1.08;
}
.hero .bajada {
  margin-inline: auto;
  max-width: 46ch;
  font-size: clamp(1rem, 2.4vw, 1.15rem);
}
.hero .acciones { justify-content: center; }
.hero .etiqueta { margin-bottom: 18px; }

.seccion { text-align: center; }
.seccion > .bajada { margin-inline: auto; }
/* El contenido de las tarjetas vuelve a leerse alineado a la izquierda. */
.seccion .tarjeta, .seccion .lista-check, .seccion details { text-align: left; }

.precio-grande { color: var(--t-texto); }
.precio-grande span { color: var(--t-suave); }

/* ------------------------------------------------------------- movimiento */

/* Una sola entrada, corta y sin escalonar. La cascada de retardos hacía que
   la pantalla terminara de armarse medio segundo después de estar lista, y en
   una pantalla de trabajo eso se siente como lentitud, no como diseño. */
@keyframes asomar {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.hero > *, .seccion > h2, .seccion > .bajada {
  animation: asomar var(--t-medio) var(--t-curva) backwards;
}

/* La tarjeta destacada ya no se levanta: la diferencia la hace su borde. */

/* Quien pidió menos movimiento no ve nada de esto: la regla global de
   prefers-reduced-motion apaga animaciones y transiciones. */

/* =====================================================================
   LA VISTA DE CALENDARIO DE LA AGENDA

   Un mes de un vistazo, para ubicarse. El detalle sigue estando en la
   Lista, que es el formato de siempre y no cambió.

   NADA DEPENDE DEL COLOR. Un día con turnos se distingue por el NÚMERO
   que dice cuántos hay; el fondo apenas lo acompaña. Es una `<table>` de
   verdad, con encabezados de columna, así que un lector de pantalla
   puede recorrerla y cada día lleva su propio rótulo.

   La grilla usa `table-layout: fixed` para que las siete columnas midan
   lo mismo aunque un día tenga seis turnos y otro ninguno: sin eso, las
   semanas quedan desalineadas entre sí y el calendario deja de leerse
   como una grilla.
   ===================================================================== */

.cal-cab { margin-bottom: 12px; }
.cal-sep { color: var(--t-tenue); padding: 0 2px; }

.cal {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 4px;
  /* En el teléfono la grilla no se puede achicar más allá de esto sin que
     los números dejen de leerse: por debajo se desplaza de costado, que es
     lo mismo que hace cualquier tabla del sistema. */
  min-width: 460px;
}

.cal-leyenda {
  caption-side: top;
  text-align: left;
  color: var(--t-suave);
  font-size: .82rem;
  padding: 0 2px 10px;
}

.cal thead th {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--t-tenue);
  text-align: center;
  padding: 0 0 2px;
  border: 0;
}

.cal thead abbr { text-decoration: none; border: 0; }

.cal-celda { padding: 0; border: 0; vertical-align: top; }

.cal-dia {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 84px;
  padding: 7px 8px 8px;
  border: 1px solid var(--t-borde);
  border-radius: var(--t-radio-chico);
  background: var(--t-tarjeta);
  color: var(--t-texto);
  text-decoration: none;
  transition: border-color var(--t-rapido) var(--t-curva),
              background var(--t-rapido) var(--t-curva);
}

.cal-dia:hover { border-color: var(--t-borde-fuerte); background: var(--t-superficie); }
.cal-dia:focus-visible { outline: 2px solid var(--t-acento); outline-offset: 2px; }

/* Los días del mes anterior y del siguiente están, porque tienen turnos y
   esconderlos sería mentir, pero no compiten con el mes que se mira. */
.cal-fuera { opacity: .5; }

.cal-num {
  font-weight: 650;
  font-size: .95rem;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: 5px;
}

/* «hoy» va ESCRITO y no como un punto de color: es la única forma de que se
   entienda sin ver los colores y de que un lector de pantalla lo diga. */
.cal-hoy-marca {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--t-acento-texto);
}

.cal-hoy { border-color: var(--t-acento); }
.cal-elegida {
  border-color: var(--t-acento);
  box-shadow: inset 0 0 0 1px var(--t-acento);
  background: var(--t-acento-velo-2);
}
.cal-con-turnos { background: var(--t-acento-velo-2); }

/* Un día con algún bloqueo lleva rayado, además del texto «Bloqueado» dentro:
   ninguna de las dos formas de verlo depende solo de un color. */
.cal-con-bloqueo {
  background-image: repeating-linear-gradient(135deg, transparent, transparent 8px,
    var(--t-borde) 8px, var(--t-borde) 9px);
}
.cal-bloqueo { color: var(--t-tenue); font-style: italic; }

.cal-cuenta {
  font-size: .72rem;
  font-weight: 600;
  color: var(--t-acento-texto);
}
.cal-vacio { font-size: .72rem; color: var(--t-tenue); }

.cal-turno {
  display: flex;
  gap: 5px;
  font-size: .72rem;
  line-height: 1.35;
  color: var(--t-suave);
  /* Un nombre largo no puede ensanchar la columna ni salirse de la celda. */
  min-width: 0;
}
.cal-hora { font-variant-numeric: tabular-nums; flex: none; }
.cal-quien { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-mas { font-size: .7rem; color: var(--t-tenue); }

/* La estrella de membresía vigente: acompaña al nombre, nunca lo reemplaza,
   y no depende del color solo —lleva aria-label y title en el propio marcado
   (ver estrellaMembresia en html.js)—. flex:none para que un nombre largo no
   la empuje fuera de la celda. */
.estrella-membresia { flex: none; color: var(--t-acento-texto); }

/* En el teléfono no entran los nombres: quedan el número del día y cuántos
   turnos hay, que es lo que sirve para elegir un día y tocarlo. */
@media (max-width: 719px) {
  .cal { min-width: 380px; border-spacing: 3px; }
  .cal-dia { min-height: 62px; padding: 6px; }
  .cal-turno, .cal-mas { display: none; }
}

/* A 380px de ancho de pantalla —un teléfono chico, no una excepción— el
   domingo quedaba completamente fuera de lo que se ve sin arrastrar el dedo,
   y ensanchar la ventana no lo arregla: es un problema de cuánto pesa cada
   celda, no del viewport. Acá se le saca peso a cada celda —se esconde la
   palabra «turnos» y queda el número solo, sin perder el dato para un lector
   de pantalla: el nombre accesible completo ya está en el `aria-label` del
   día, que no depende de lo que se vea— y se angosta el mínimo de la grilla
   a lo que de verdad entra en un teléfono con el resto de los márgenes de la
   página. En un 390px de ancho real la semana entra completa, sin arrastrar
   nada; en un 320px sigue quedando un desplazamiento chico, pero de un
   día, no de dos. */
@media (max-width: 420px) {
  .cal { min-width: 322px; border-spacing: 2px; }
  .cal-dia { padding: 4px; }
  .cal-cuenta-palabra { display: none; }
  .cal-num { flex-direction: column; align-items: flex-start; gap: 0; }
}

/* El aviso de que la grilla se desliza. Por defecto no se muestra: en la
   mayoría de los anchos —incluido un teléfono de 390px— la semana entra
   entera con el arreglo de arriba, y un aviso de "deslizá" ahí sería un
   dato falso. Se muestra solo por debajo de 386px, que es donde de verdad
   sigue haciendo falta un desplazamiento chico (ver comentario arriba): la
   sombra lateral de `.tabla-scroll` ya insinúa que hay más, pero un texto
   explícito no depende de que alguien note un degradé de 14px. */
.cal-aviso-scroll { display: none; }
@media (max-width: 386px) {
  .cal-aviso-scroll { display: block; }
}

/* =====================================================================
   LA PORTADA: ESCENAS, AGENDA DE EJEMPLO Y COMPARACIÓN DE PLANES

   Las «escenas» y la agenda de ejemplo se arman con los MISMOS componentes
   que ya tiene el producto —etiquetas, tarjetas, globos de chat propios—,
   para que la portada no sea un sistema de diseño aparte. Los datos que
   aparecen ahí son de ejemplo y las pantallas lo dicen con esas palabras.
   ===================================================================== */

/* Oculto visualmente, presente para lectores de pantalla. Sirve para el
   «Incluido» / «No incluido» de la tabla de planes, donde el símbolo (✓ / —)
   no alcanza por sí solo. */
.sr-solo {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.mockup-agenda {
  margin-top: 28px;
  background: var(--t-tarjeta);
  border: 1px solid var(--t-borde);
  border-radius: var(--t-radio);
  padding: var(--t-relleno);
  max-width: 360px;
  box-shadow: var(--t-sombra);
}
.mockup-agenda-cab {
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--t-tenue); margin: 0 0 10px;
}
.mockup-agenda-fila {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 0; border-top: 1px solid var(--t-borde);
}
.mockup-agenda-fila:first-of-type { border-top: 0; }
.mockup-agenda-hora {
  font-variant-numeric: tabular-nums; color: var(--t-suave); font-size: .88rem;
}

.mockup-escena .mockup-despues {
  margin-top: 10px; font-size: .88rem; padding-top: 10px; border-top: 1px solid var(--t-borde);
}

/* Los globos de chat de las escenas. Dos remitentes, dos alineaciones, igual
   que cualquier chat: no hace falta inventar un lenguaje visual nuevo para
   que se entienda quién dice qué. */
.mockup-chat {
  display: flex; flex-direction: column; gap: 6px; margin: 10px 0;
}
.mockup-globo {
  max-width: 80%;
  padding: 8px 12px;
  border-radius: var(--t-radio-chico);
  font-size: .86rem;
  line-height: 1.35;
}
.mockup-globo.cliente {
  align-self: flex-start;
  background: var(--t-superficie);
  color: var(--t-texto);
  border-bottom-left-radius: 4px;
}
.mockup-globo.negocio {
  align-self: flex-end;
  background: var(--t-acento-velo);
  color: var(--t-texto);
  border-bottom-right-radius: 4px;
}