/* Identidad de MB Studio, sobre el sistema de `app.css` y `tablero.css`.
 *
 * Se carga en TODAS las pantallas de MB Studio —reserva, comprobante, panel
 * y profesional—, nunca en una barbería de prueba genérica: lo decide
 * `esMarcaPropia()` (src/marca.js) en cada ruta. No inventa componentes ni
 * pisa la estructura que usan las pruebas (`.opcion`, `.tarjeta`,
 * `.pestanas`, `.cal-*`, `.turno`…): repinta lo que ya existe.
 *
 * La fuente de verdad es el logo («MB Studio · Monkey · Barbershop»): dorado
 * sobre negro, con un aro de neón azul. De ahí salen las tres reglas:
 *  - fondo negro azulado muy oscuro (#05070d), texto casi blanco cálido;
 *  - el DORADO #E8C21A es el acento principal: el botón principal (dorado
 *    con tinta negra), la pestaña actual, precios y cifras destacadas;
 *  - el AZUL NEÓN #2E9BFF es el secundario y se usa poco: el halo de foco y
 *    de selección, el borde del paso actual, brillos sutiles. Nunca un
 *    relleno grande: si todo brilla, nada brilla.
 * Figtree auto-hospedada, igual que la web (../Voltage-MB Studio).
 *
 * Contraste (WCAG 2.1, medido sobre --t-fondo y --t-tarjeta):
 *   texto #f3f1ea ........ 16,8:1    dorado #E8C21A ..... 11:1
 *   suave #a9adb8 ......... 8,5:1    azul #2E9BFF ....... 6,6:1
 *   tenue #8d93a1 ......... 6,2:1    borde control ...... 3,5:1
 *   tinta #05070d sobre dorado (botón principal) ........ 11,7:1
 *
 * El tema queda FIJO en oscuro (lo pone cada ruta al llamar a `layout()`):
 * la marca no tiene versión clara, así que el selector de tema se esconde
 * más abajo, en vez de tocar `tema.js`. */

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('/assets/fonts/Figtree-Variable.woff2') format('woff2');
}

/* `:root[data-tema]` y no solo `:root`: el tema oscuro de app.css se declara
   con `:root[data-tema="oscuro"]`, y esto tiene que ganarle. */
:root, :root[data-tema] {
  --h: 49;  /* matiz de #E8C21A: alimenta lo que tablero.css calcula con hsl() */
  --fuente: 'Figtree', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --t-fondo: #05070d;          /* negro azulado del fondo del logo */
  --t-tarjeta: #0c1019;
  --t-superficie: #141a26;     /* un punto más claro que la tarjeta: botones secundarios, rellenos */
  --t-texto: #f3f1ea;
  --t-suave: #a9adb8;          /* 8,4:1 sobre la tarjeta */
  --t-tenue: #8d93a1;          /* 6:1 sobre la tarjeta */
  --t-borde: #1c2333;
  --t-borde-fuerte: #2a3347;
  --t-borde-control: #5d6a85;  /* el borde de un campo necesita 3:1 */
  --t-serie-prev: rgba(243, 241, 234, .38);

  /* El dorado del logo. Sobre este negro se lee como texto (11:1), así que
     la variante «texto» es el mismo color. */
  --t-acento: #e8c21a;
  --t-acento-claro: #f2d75a;
  --t-acento-texto: #e8c21a;
  --t-acento-velo: rgba(232, 194, 26, .14);
  --t-acento-velo-2: rgba(232, 194, 26, .06);

  /* El aro de neón: los estados «azules» del sistema (confirmada, etc.)
     toman este azul en vez del celeste genérico de app.css. */
  --c-neon: #2e9bff;
  --c-neon-texto: #6cb8ff;
  --t-azul: #2e9bff;  --t-azul-texto: #6cb8ff;
  --t-azul-velo: rgba(46, 155, 255, .15);

  --t-cabecera: rgba(5, 7, 13, .88);
  --t-brillo: #1c2333;
  --t-globo-fondo: #141a26;
  --t-globo-borde: #2a3347;
  --t-boton-tinta: #05070d;    /* tinta negra sobre el botón dorado */

  /* contenido.js de la web → marca.radio = 12 */
  --t-radio: 12px;
  --t-radio-chico: 10px;

  /* Sombras negras: sobre un fondo casi negro, la profundidad la da el
     borde, no la sombra. */
  --t-sombra: 0 1px 2px rgba(0, 0, 0, .6), 0 10px 26px rgba(0, 0, 0, .5);
  --t-sombra-alta: 0 4px 10px rgba(0, 0, 0, .65), 0 26px 60px rgba(0, 0, 0, .6);

  /* El halo de foco/selección, en azul neón: el brillo del aro del logo,
     reservado para lo que se toca. */
  --c-glow: 0 0 0 1px rgba(46, 155, 255, .55), 0 0 0 5px rgba(46, 155, 255, .13);
  --c-glow-alto: 0 0 0 1px rgba(46, 155, 255, .8), 0 10px 30px rgba(46, 155, 255, .22);

  /* El botón principal: dorado con tinta negra. */
  --c-dorado: #e8c21a;
  --c-dorado-hover: #f2d03a;
}

/* El control de tema no tiene nada para elegir: la marca es siempre oscura. */
#tema-lugar { display: none; }

/* app.css escribe la pila de fuentes en duro en `body { font: … }`. */
body { font-family: var(--fuente); background: var(--t-fondo); }

/* `.m-ambiente` mide 100vw para llegar de borde a borde, y en escritorio
   100vw incluye la barra de desplazamiento: sin esto la página se corría
   unos píxeles de costado. `clip` no crea un contenedor de scroll, así que
   lo pegajoso sigue funcionando. */
html { overflow-x: clip; }

/* ======================================================================
   TIPOGRAFÍA: Figtree, títulos pesados con el tracking cerrado.
   ====================================================================== */

h1, h2, h3 { font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
h3 { font-weight: 700; }

.m-titular {
  font-family: var(--fuente);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.05;
  margin: 0;
}
.m-etiqueta {
  display: block;
  font-weight: 600;
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--t-acento-texto);
}
.m-divisor { border: none; border-top: 1px solid var(--t-borde); width: 100%; margin: 0; }

/* ======================================================================
   BOTONES: el principal es dorado con tinta negra; los demás quedan como
   contorno. El foco es el aro azul.
   ====================================================================== */

.btn:not(.secundario):not(.fantasma):not(.peligro) {
  background: var(--c-dorado); color: var(--t-boton-tinta);
  box-shadow: 0 10px 26px -14px rgba(232, 194, 26, .55);
}
.btn:not(.secundario):not(.fantasma):not(.peligro):hover:not(:disabled) {
  background: var(--c-dorado-hover); filter: none;
  box-shadow: 0 16px 34px -14px rgba(232, 194, 26, .6);
}
.btn.secundario:hover:not(:disabled), .btn.fantasma:hover:not(:disabled) {
  background: var(--t-acento-velo); border-color: var(--t-acento); filter: none;
}
.btn:focus-visible { outline: 2px solid var(--c-neon); outline-offset: 2px; box-shadow: var(--c-glow-alto); }
.btn:not(:disabled):active { transform: translateY(1px); }

a:focus-visible, summary:focus-visible { outline: 2px solid var(--c-neon); outline-offset: 2px; }

/* ======================================================================
   MOVIMIENTO: las MISMAS fichas de tiempo y curva que el resto del sistema.
   El apagado por `prefers-reduced-motion` ya es global, en app.css.
   ====================================================================== */

.btn, .opcion, .dia, .tarjeta, .turno, .resumen .caja, .cal-dia,
.pestanas .btn, input, select, textarea {
  transition-duration: var(--t-rapido), var(--t-rapido);
  transition-timing-function: var(--t-curva);
}

.tarjeta, .comprobante, .resumen .caja {
  transition-property: border-color, box-shadow, transform;
  transition-duration: var(--t-medio);
  transition-timing-function: var(--t-curva);
}
.tarjeta:hover, .comprobante:hover { border-color: var(--t-borde-fuerte); }

.opcion, .dia, .cal-dia { transition-property: border-color, background, box-shadow, transform; }
.opcion:hover, .dia:not(:disabled):hover, .cal-dia:hover { box-shadow: var(--c-glow); }
.opcion:active, .dia:not(:disabled):active { transform: scale(.99); }
.opcion[aria-pressed="true"], .dia[aria-pressed="true"] { box-shadow: var(--c-glow); }

.tarjeta, .comprobante, .opcion, .turno, .resumen .caja {
  animation: asomar var(--t-medio) var(--t-curva) backwards;
}

/* Una línea dorada que crece arriba de cada opción del recorrido al
   pasarle por encima. */
.opcion { position: relative; overflow: hidden; }
.opcion::before {
  content: ''; position: absolute; left: 0; top: 0; height: 2px; width: 0;
  background: var(--t-acento); transition: width .4s var(--t-curva);
}
.opcion:hover::before, .opcion:focus-visible::before { width: 72px; }

/* ======================================================================
   DESTACADOS: lo que ya se distinguía (el comprobante, el aviso recién
   confirmado) lleva el borde dorado y un brillo azul apenas visible, como
   el aro del logo; una tarjeta común, no.
   ====================================================================== */

.tarjeta.destacada, .comprobante {
  border: 1px solid var(--t-acento);
  box-shadow: var(--t-sombra), 0 0 0 1px var(--t-acento-velo), 0 0 28px -6px rgba(46, 155, 255, .18);
  background: linear-gradient(160deg, rgba(232, 194, 26, .06), transparent 55%), var(--t-tarjeta);
}

/* Las cifras del día, en Inicio: el número es protagonista. */
.resumen .caja .n { color: var(--t-texto); font-weight: 800; letter-spacing: -.02em; }

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

.pestanas { box-shadow: var(--t-sombra), inset 0 0 0 1px rgba(46, 155, 255, .07); }
/* La sección actual: dorada con tinta negra, como el botón principal. */
.pestanas .btn:not(.secundario) {
  background: var(--c-dorado); color: var(--t-boton-tinta);
  box-shadow: none;
}
.pestanas .btn.secundario:hover { background: var(--t-acento-velo); color: var(--t-texto); }

.nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 0 var(--t-acento); }

input[type="checkbox"], input[type="radio"] { accent-color: var(--t-acento); }

/* --------------------------------------------------------------- cabecera */

.cabecera {
  background: var(--t-cabecera);
  border-bottom-color: var(--t-borde);
  box-shadow: 0 1px 0 rgba(46, 155, 255, .12);
}
/* El logo es dorado con aro azul sobre transparente: va sobre el negro de la
   marca, nunca sobre el blanco que app.css le pone a `.logo-negocio`. */
.logo-negocio { background: var(--t-fondo) !important; border: 0; border-radius: 50%; padding: 2px; }
.marca { font-weight: 800; letter-spacing: -.01em; }

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

input:focus, select:focus, textarea:focus {
  border-color: var(--c-neon); box-shadow: var(--c-glow-alto); outline: none;
}

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

.tabla-scroll table thead th { color: var(--t-tenue); }
tr:hover > td { background: var(--t-acento-velo-2); }

/* ------------------------------------------------------- calendario */

.cal-hoy { box-shadow: var(--c-glow); }
.cal-elegida { box-shadow: var(--c-glow-alto); }

/* =====================================================================
   EL RECORRIDO DE RESERVA: servicio → profesional → día y hora → datos
   ===================================================================== */

.reserva-pasos {
  display: flex; gap: 4px; flex-wrap: nowrap; overflow-x: auto;
  font-size: .73rem; color: var(--t-tenue);
  border: none; padding: 14px 0 20px; margin: 20px 0 28px;
  scrollbar-width: none;
}
.reserva-pasos::-webkit-scrollbar { display: none; }
.reserva-pasos span {
  flex: none; display: flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--t-radio-pastilla);
  border: 1px solid var(--t-borde); white-space: nowrap;
  transition: border-color var(--t-rapido) var(--t-curva),
              color var(--t-rapido) var(--t-curva),
              box-shadow var(--t-rapido) var(--t-curva);
}
.reserva-pasos span + span::before {
  content: ""; width: 14px; height: 1px; background: var(--t-borde); margin-right: 4px;
}
.reserva-pasos span.activo {
  color: var(--t-texto); border-color: var(--c-neon);
  box-shadow: var(--c-glow); font-weight: 650;
}

/* Sin fotografía de fondo: el marco del recorrido es el negro del logo, con
   un velo azul apenas visible arriba (el aro de neón) y un toque dorado
   abajo. Adentro, todo sigue siendo `.tarjeta`, `.opcion` y `.dia` de
   siempre. */
.m-ambiente {
  position: relative;
  margin: 0 calc(50% - 50vw) 0;
  width: 100vw;
  padding: 28px max(16px, calc(50vw - 344px)) 40px;
  background:
    radial-gradient(120% 60% at 15% 0%, rgba(46, 155, 255, .10), transparent 60%),
    radial-gradient(90% 50% at 90% 100%, rgba(232, 194, 26, .05), transparent 60%),
    var(--t-fondo);
}
.m-ambiente .tarjeta, .m-ambiente .opcion, .m-ambiente .dia {
  background-color: rgba(12, 16, 25, .9);
}

/* =====================================================================
   INICIO DEL PANEL — las cifras del día en una sola superficie
   ===================================================================== */

.resumen {
  display: flex; flex-wrap: wrap; gap: 0;
  background: var(--t-tarjeta); border: 1px solid var(--t-borde);
  border-radius: var(--t-radio); overflow: hidden;
}
.resumen .caja {
  flex: 1 1 180px; background: transparent; border: none; border-radius: 0;
  border-right: 1px solid var(--t-borde);
}
.resumen .caja:last-child { border-right: none; }
@media (max-width: 640px) {
  .resumen .caja { flex-basis: 100%; border-right: none; border-bottom: 1px solid var(--t-borde); }
  .resumen .caja:last-child { border-bottom: none; }
}

/* =====================================================================
   LISTAS DEL PANEL — una superficie con divisores, no una pila de cajas
   ===================================================================== */

.apilar:has(> .tarjeta) {
  background: var(--t-tarjeta); border: 1px solid var(--t-borde);
  border-radius: var(--t-radio); overflow: hidden;
}
.apilar:has(> .tarjeta) > .tarjeta {
  background: transparent; border: none; border-radius: 0; box-shadow: none;
  border-bottom: 1px solid var(--t-borde); margin-top: 0 !important;
}
.apilar:has(> .tarjeta) > .tarjeta:last-child { border-bottom: none; }

/* =====================================================================
   PRODUCTOS QUE TE INTERESAN — paso «Tus datos» de la reserva.
   Solo aparece con PRODUCTOS_PUBLICOS="si" en el Worker público (hoy
   apagado: los productos de MB Studio son ropa y los maneja la web).
   ===================================================================== */

.productos-interes {
  margin: 4px 0 22px; padding: 16px 0 18px; border-top: 1px solid var(--t-borde);
  border-bottom: 1px solid var(--t-borde);
}
.producto-interes-fila {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--t-borde);
}
.producto-interes-fila:last-child { border-bottom: none; }
.producto-interes-foto {
  width: 52px; height: 52px; border-radius: 10px; object-fit: cover; flex: none;
  border: 1px solid var(--t-borde); background: var(--t-superficie);
}
.producto-interes-foto--vacia { display: block; }
.producto-interes-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.producto-interes-desc { font-size: .82rem; color: var(--t-suave); }
.producto-interes-precio { font-size: .85rem; color: var(--t-acento-texto); font-weight: 600; }
.producto-interes-cant { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.producto-interes-cant label { font-size: .72rem; }
.producto-interes-cant input[type="number"] { width: 64px; min-height: auto; padding: 7px 6px; text-align: center; }
.producto-interes-resumen:not([hidden]) { margin-top: 4px; padding-top: 10px; border-top: 1px dashed var(--t-borde); }

.js-productos .producto-interes-cant input[type="number"] { display: none; }
.producto-interes-agregar {
  border: 1px solid var(--t-borde-control); background: transparent; color: var(--t-acento-texto);
  border-radius: var(--t-radio-pastilla, 999px); padding: 7px 14px; font-size: .82rem; font-weight: 650;
  cursor: pointer; white-space: nowrap;
}
.producto-interes-agregar:hover { background: var(--t-acento-velo); }
.producto-interes-stepper { display: flex; align-items: center; gap: 8px; }
.producto-interes-stepper button {
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--t-borde-control);
  background: var(--t-superficie); color: var(--t-texto); font-size: 1rem; line-height: 1; cursor: pointer;
}
.producto-interes-stepper button:hover { border-color: var(--t-acento); color: var(--t-acento); }
.producto-interes-stepper output { min-width: 1.4em; text-align: center; font-weight: 650; }
.producto-interes-quitar {
  background: none; border: none; color: var(--t-suave); font-size: .78rem; text-decoration: underline;
  cursor: pointer; padding: 2px;
}

.producto-interes-grupo {
  border: 1px solid var(--t-borde); border-radius: var(--t-radio);
  background: rgba(12, 16, 25, .7); margin-top: 10px;
}
.producto-interes-grupo > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; cursor: pointer; list-style: none; min-height: 48px;
  font-weight: 650; color: var(--t-texto);
}
.producto-interes-grupo > summary::-webkit-details-marker { display: none; }
.producto-interes-grupo > summary::after {
  content: ""; width: 9px; height: 9px; flex: none; margin-left: 4px;
  border-right: 2px solid var(--t-acento); border-bottom: 2px solid var(--t-acento);
  transform: rotate(45deg); transition: transform var(--t-rapido) var(--t-curva);
}
.producto-interes-grupo[open] > summary::after { transform: rotate(-135deg); }
.producto-interes-grupo > summary:hover { background: var(--t-acento-velo-2); }
.producto-interes-grupo > summary:focus-visible { outline: 2px solid var(--c-neon); outline-offset: -2px; border-radius: var(--t-radio); }
.producto-interes-grupo-nombre { font-weight: 800; font-size: 1.02rem; letter-spacing: -.01em; }
.producto-interes-grupo-meta { margin-left: auto; font-size: .8rem; font-weight: 500; color: var(--t-suave); white-space: nowrap; }
.producto-interes-grupo-meta [data-elegidos] { color: var(--t-acento-texto); font-weight: 650; }
.producto-interes-grupo > .apilar { padding: 0 14px 6px; border-top: 1px solid var(--t-borde); }
.producto-interes-grupo .producto-interes-fila:last-child { border-bottom: none; }
.producto-interes-info > .etiqueta { align-self: flex-start; }

@media (max-width: 560px) {
  .producto-interes-fila { flex-wrap: wrap; row-gap: 8px; }
  .producto-interes-info { flex: 1 1 60%; }
  .producto-interes-cant { width: 100%; flex-direction: row; justify-content: flex-end; align-items: center; gap: 10px; }
  .producto-interes-cant label { margin-right: auto; padding-left: 64px; }
}

/* =====================================================================
   EL CARRITO DE VOLTAGE EN EL TURNO — paso «Tus datos». Lo dibuja
   `carrito-turno.js` cuando la web dejó una bolsa en el navegador: una
   sección plegable, misma piel que los grupos de productos de arriba.
   ===================================================================== */

.carrito-turno {
  border: 1px solid var(--t-borde); border-radius: var(--t-radio);
  background: rgba(12, 16, 25, .7); margin: 4px 0 22px;
}
.carrito-turno > summary {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer;
  list-style: none; min-height: 48px; font-weight: 800; font-size: 1.02rem; letter-spacing: -.01em;
  color: var(--t-texto);
}
.carrito-turno > summary::-webkit-details-marker { display: none; }
.carrito-turno > summary:hover { background: var(--t-acento-velo-2); }
.carrito-turno > summary:focus-visible { outline: 2px solid var(--c-neon); outline-offset: -2px; border-radius: var(--t-radio); }
.carrito-turno-cuerpo { padding: 0 14px 12px; border-top: 1px solid var(--t-borde); }
.carrito-turno-casilla {
  display: flex; align-items: flex-start; gap: 10px; margin: 12px 0 8px; font-size: .9rem; font-weight: 600;
}
.carrito-turno-casilla input { width: 22px; height: 22px; min-height: 0; padding: 0; flex: none; margin-top: 1px; }
.carrito-turno-lista { list-style: none; margin: 0; padding: 0; }
.carrito-turno-lista li {
  display: flex; justify-content: space-between; gap: 12px; padding: 8px 0;
  border-bottom: 1px solid var(--t-borde); font-size: .9rem;
}
.carrito-turno-lista li:last-child { border-bottom: none; }
.carrito-turno-precio { color: var(--t-acento-texto); font-weight: 600; white-space: nowrap; }
.carrito-turno-subtotal { margin: 8px 0 0; padding-top: 8px; border-top: 1px dashed var(--t-borde); font-weight: 650; text-align: right; }

/* =====================================================================
   VOLVER A LA WEB: la salida explícita del recorrido, también en el
   teléfono. El destino lo pone el servidor (`URL_LANDING`).
   ===================================================================== */

.cabecera .volver-web { white-space: nowrap; }
@media (max-width: 480px) {
  .cabecera .volver-web { padding: 6px 10px; font-size: .78rem; min-height: 34px; }
}