/* Estilos de la app. Todo propio: sin CDNs, sin fuentes externas —
   tiene que verse igual sin internet. Mobile-first.

   Sistema visual:
   - La identidad del negocio entra SOLO por --acento / --acento-texto en :root
     (claro y oscuro). Todo lo demás está construido para verse bien con
     cualquier acento: los tintes se derivan con color-mix() del acento.
   - Tipografía display "Schibsted Grotesk" (variable, embebida abajo en
     base64: 100% offline) para títulos, números y botones; el cuerpo usa la
     sans del sistema.
   - Neutros CÁLIDOS (papel, no gris azulado de dashboard). */

@font-face {
  font-family: 'Schibsted Grotesk';
  src: url(data:font/woff2;base64,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) format('woff2-variations');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/* `body.publico` va en la MISMA lista que :root a propósito: lo público
   (portada, pedir, reservar, seguimientos) es SIEMPRE claro — es la vidriera
   del negocio, no una pantalla de trabajo. Con el teléfono en oscuro, :root
   toma los valores del bloque @media de abajo, pero body.publico (más cerca
   en el árbol) re-declara estos y todo lo de adentro queda claro. El modo
   oscuro es solo del equipo, adentro. */
:root,
body.publico {
  --fondo: #f6f4f0;
  --superficie: #ffffff;
  --superficie-2: #f0ede8;
  --borde: #e4e0d8;
  --texto: #211d18;
  --texto-suave: #6f685e;
  --acento: #14568f;
  --acento-texto: #ffffff;
  --ok-fondo: #e9f3eb;
  --ok-borde: #b5d8bf;
  --ok-texto: #1d5c33;
  --error-fondo: #fbecea;
  --error-borde: #ecb7b2;
  --error-texto: #8f231d;
  --aviso-fondo: #faf1dd;
  --aviso-borde: #e8cf9b;
  --aviso-texto: #7a5710;
  --peligro: #a32c25;
  --radio: 12px;
  --radio-chico: 9px;
  --sombra: 0 1px 2px rgba(33, 26, 16, 0.05), 0 2px 6px rgba(33, 26, 16, 0.04);
  --sombra-flotante: 0 2px 4px rgba(33, 26, 16, 0.05), 0 12px 32px -8px rgba(33, 26, 16, 0.12);
  --fuente-display: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #141210;
    --superficie: #1d1a17;
    --superficie-2: #262220;
    --borde: #363029;
    --texto: #ece8e2;
    --texto-suave: #a39b8f;
    --acento: #a1c9f1;
    --acento-texto: #0b1116;
    --ok-fondo: #182a1d;
    --ok-borde: #33593e;
    --ok-texto: #a9dcba;
    --error-fondo: #2c1815;
    --error-borde: #5e2d28;
    --error-texto: #f0b2ac;
    --aviso-fondo: #2a2313;
    --aviso-borde: #5a4a24;
    --aviso-texto: #e8cd94;
    --peligro: #e08a83;
    --sombra: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.25);
    --sombra-flotante: 0 2px 4px rgba(0, 0, 0, 0.4), 0 12px 32px -8px rgba(0, 0, 0, 0.5);
  }
}

/* ——— EL TEMA ES UNA DECISIÓN, NO EL SISTEMA OPERATIVO ————————————————
   Ficha 026, lote 6. Arriba, el oscuro entra solo por el `prefers-color-scheme`
   del teléfono. Acá abajo, lo que el dueño eligió en Ajustes (`negocio.tema` →
   `documento()` de lib/html.mjs pone `tema-claro` / `tema-oscuro` en el
   <body>) gana: con `tema = 'claro'`, un teléfono en modo oscuro ve la app
   clara.

   Van DESPUÉS del @media a propósito: misma especificidad (`body.x`), así que
   manda el orden. Y repiten el set COMPLETO —no un par de variables— porque
   una paleta a medias es un fondo oscuro con texto oscuro.

   `body.publico` no juega: lo público es SIEMPRE claro y `documento()` ni le
   pone la clase. */
body.tema-claro {
  color-scheme: light;
  --fondo: #f6f4f0;
  --superficie: #ffffff;
  --superficie-2: #f0ede8;
  --borde: #e4e0d8;
  --texto: #211d18;
  --texto-suave: #6f685e;
  --acento: #14568f;
  --acento-texto: #ffffff;
  --ok-fondo: #e9f3eb;
  --ok-borde: #b5d8bf;
  --ok-texto: #1d5c33;
  --error-fondo: #fbecea;
  --error-borde: #ecb7b2;
  --error-texto: #8f231d;
  --aviso-fondo: #faf1dd;
  --aviso-borde: #e8cf9b;
  --aviso-texto: #7a5710;
  --peligro: #a32c25;
  --sombra: 0 1px 2px rgba(33, 26, 16, 0.05), 0 2px 6px rgba(33, 26, 16, 0.04);
  --sombra-flotante: 0 2px 4px rgba(33, 26, 16, 0.05), 0 12px 32px -8px rgba(33, 26, 16, 0.12);
}

body.tema-oscuro {
  color-scheme: dark;
  --fondo: #141210;
  --superficie: #1d1a17;
  --superficie-2: #262220;
  --borde: #363029;
  --texto: #ece8e2;
  --texto-suave: #a39b8f;
  --acento: #a1c9f1;
  --acento-texto: #0b1116;
  --ok-fondo: #182a1d;
  --ok-borde: #33593e;
  --ok-texto: #a9dcba;
  --error-fondo: #2c1815;
  --error-borde: #5e2d28;
  --error-texto: #f0b2ac;
  --aviso-fondo: #2a2313;
  --aviso-borde: #5a4a24;
  --aviso-texto: #e8cd94;
  --peligro: #e08a83;
  --sombra: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.25);
  --sombra-flotante: 0 2px 4px rgba(0, 0, 0, 0.4), 0 12px 32px -8px rgba(0, 0, 0, 0.5);
}

/* ——— EL ACENTO DEL PRESET ————————————————————————————————————————————
   ⚠️ `:root` y `body.publico` NO se tocan: siguen siendo el azul #14568f de
   BASE. El contrato del template lo define así y las apps genéricas que ya
   corren lo usan — pisar `:root` las repintaría a todas en el próximo
   redeploy. El preset entra por la clase del <body>, encima.

   `--acento` es LA única perilla de marca: la IA generadora la cambia acá (en
   los DOS bloques, el claro y el oscuro) y en ningún otro lado. Los colores
   del EQUIPO (`--pro-1..8`) viven al final del archivo, con su propia nota.

   Va después de `body.tema-*` (misma especificidad) para ganarles el acento
   sin tocarles la paleta de neutros. */
body.preset-peluqueria {
  --acento: #8a4b12; /* marrón miel */
  --acento-texto: #ffffff;
}

/* El teléfono en oscuro, con el tema en "Automático". `:not(.tema-claro)`
   porque un dueño que eligió CLARO tiene que ver el marrón, no el miel, y
   `:not(.publico)` porque la vidriera del negocio es SIEMPRE clara — el resto
   de la paleta ya lo excluía y estas dos líneas no, así que una clienta con el
   teléfono en oscuro veía el turnero claro con el acento miel del modo oscuro
   (lo encontró el control nuevo de esquema de color, review del lote G). */
@media (prefers-color-scheme: dark) {
  body.preset-peluqueria:not(.tema-claro):not(.publico) {
    --acento: #f2b45a;
    --acento-texto: #241407;
  }
}

/* Y el oscuro ELEGIDO, que también manda en un teléfono en claro. */
body.preset-peluqueria.tema-oscuro:not(.publico) {
  --acento: #f2b45a;
  --acento-texto: #241407;
}

body.publico {
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

a {
  color: color-mix(in srgb, var(--acento) 82%, var(--texto));
  text-decoration-color: color-mix(in srgb, var(--acento) 40%, transparent);
  text-underline-offset: 2px;
}

a:hover {
  text-decoration-color: currentColor;
}

h1 {
  font-family: var(--fuente-display);
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
}

h2 {
  font-family: var(--fuente-display);
  font-size: 1.08rem;
  font-weight: 650;
  letter-spacing: -0.008em;
  margin: 1.9rem 0 0.75rem;
}

:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
  border-radius: 4px;
}

::placeholder {
  color: color-mix(in srgb, var(--texto-suave) 72%, transparent);
}

/* Accesibilidad -------------------------------------------------------- */

.saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--superficie);
  padding: 0.75rem 1rem;
  z-index: 40;
}

.saltar:focus {
  left: 0;
}

.oculto-visual {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Estructura ----------------------------------------------------------- */

.barra {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--superficie) 86%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--borde) 80%, transparent);
  padding: 0.55rem 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
}

.marca {
  font-family: var(--fuente-display);
  font-weight: 750;
  font-size: 1.06rem;
  letter-spacing: -0.015em;
  color: var(--texto);
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
}

/* El punto de la marca: la firma discreta de la casa, del color del negocio. */
.marca::after {
  content: '';
  width: 0.3em;
  height: 0.3em;
  border-radius: 999px;
  background: var(--acento);
  margin-left: 0.14em;
  transform: translateY(-0.05em);
}

.nav {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  margin-left: auto;
  overflow-x: auto;
}

.nav a,
.nav-salir {
  display: inline-block;
  padding: 0.42rem 0.7rem;
  border-radius: 999px;
  color: var(--texto-suave);
  text-decoration: none;
  white-space: nowrap;
  font-size: 0.92rem;
  font-weight: 500;
  transition: background-color 0.12s, color 0.12s;
}

.nav a:hover,
.nav-salir:hover {
  background: var(--superficie-2);
  color: var(--texto);
}

.nav a[aria-current='page'] {
  background: color-mix(in srgb, var(--acento) 13%, transparent);
  color: color-mix(in srgb, var(--acento) 72%, var(--texto));
  font-weight: 600;
}

.nav-salir {
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.92rem;
  cursor: pointer;
}

/* Barra plegada por seccion (`navegacion()` la usa cuando hay muchas
   secciones y vienen con `grupo`). Es el mismo pastilla-y-color de arriba:
   el `summary` se ve igual que un link y el desplegable flota sobre la
   pagina para no empujar el contenido. */
.nav-grupo {
  position: relative;
}

.nav-grupo > summary {
  display: inline-block;
  padding: 0.42rem 0.7rem;
  border-radius: 999px;
  color: var(--texto-suave);
  white-space: nowrap;
  font-size: 0.92rem;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}

.nav-grupo > summary::-webkit-details-marker {
  display: none;
}

.nav-grupo > summary::after {
  content: ' ▾';
}

.nav-grupo > summary:hover,
.nav-grupo[open] > summary {
  background: var(--superficie-2);
  color: var(--texto);
}

.nav-grupo-items {
  position: absolute;
  z-index: 20;
  top: calc(100% + 0.3rem);
  right: 0;
  display: flex;
  flex-direction: column;
  min-width: 11rem;
  padding: 0.3rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  background: var(--superficie);
  box-shadow: 0 10px 24px rgb(0 0 0 / 12%);
}

.nav-grupo-items a {
  display: block;
}

.contenedor {
  max-width: 60rem;
  margin: 0 auto;
  padding: 1.5rem 1rem 3.5rem;
}

/* Las paginas publicas (paginaPublica) son de UN solo proposito — reservar,
   pedir, consultar — y se leen mejor angostas, sobre todo en el telefono. */
.contenedor-publico {
  max-width: 36rem;
}

.pie {
  padding: 2rem 1rem 2.5rem;
  text-align: center;
  color: color-mix(in srgb, var(--texto-suave) 80%, transparent);
  font-size: 0.82rem;
}

.encabezado {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  margin: 0.25rem 0 1.25rem;
}

.encabezado h1 .apagado {
  font-size: 0.72em;
  font-weight: 500;
  letter-spacing: 0;
}

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 1.25rem;
  margin: 0 0 1rem;
}

.tarjeta > :first-child {
  margin-top: 0;
}

.tarjeta > :last-child {
  margin-bottom: 0;
}

.apagado {
  color: var(--texto-suave);
  font-weight: 400;
}

.detalle {
  display: block;
  color: var(--texto-suave);
  font-size: 0.84rem;
}

/* Botones -------------------------------------------------------------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
  font-family: var(--fuente-display);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.002em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(33, 26, 16, 0.05);
  transition: background-color 0.12s, border-color 0.12s, box-shadow 0.12s;
}

.boton:hover {
  background: var(--superficie-2);
  border-color: color-mix(in srgb, var(--texto-suave) 35%, var(--borde));
}

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

.boton-primario {
  background: var(--acento);
  border-color: color-mix(in srgb, var(--acento) 85%, var(--texto));
  color: var(--acento-texto);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 1px 2px color-mix(in srgb, var(--acento) 40%, transparent);
}

.boton-primario:hover {
  background: var(--acento);
  border-color: color-mix(in srgb, var(--acento) 85%, var(--texto));
  filter: brightness(1.07) saturate(1.04);
}

.boton-peligro {
  color: var(--peligro);
  border-color: color-mix(in srgb, var(--peligro) 42%, var(--borde));
}

.boton-peligro:hover {
  background: color-mix(in srgb, var(--peligro) 7%, var(--superficie));
  border-color: color-mix(in srgb, var(--peligro) 60%, var(--borde));
}

.boton-chico {
  min-height: 34px;
  padding: 0.28rem 0.7rem;
  font-size: 0.84rem;
  border-radius: 8px;
}

.boton-ancho {
  width: 100%;
}

.acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.1rem;
}

/* Los botones de una fila van dentro de un div: un <td> con display:flex
   rompe el layout de la tabla en pantallas grandes. */
.acciones-fila {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* Formularios ---------------------------------------------------------- */

.campo {
  display: block;
  margin: 0 0 1.05rem;
}

/* `campo({ compacto: true })`: el campo que vive DENTRO de una fila de
   controles —una celda de tabla con su botón "Guardar" al lado, un
   `.salon-fila`— donde el margen de abajo desalinea el campo del botón y le
   suma alto a cada fila. Es una clase de MÁS: el `.campo` de siempre no
   cambia. Va acá (y no bajo el preset) porque el margen que apaga es de acá. */
.campo-compacto {
  margin-bottom: 0;
}

.campo label {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

/* Todo select va dentro de un `.select-envoltorio` (lo arma `campo()` y lo
   repiten los filtros a mano): apuntarle AHÍ y no a `.campo select` es lo que
   hace que el filtro de una tabla se vea igual que el campo de un formulario
   — y, sobre todo, lo que le apaga la flecha nativa. Sin eso, los filtros de
   Ventas y Comisiones mostraban DOS flechas: la del navegador y la nuestra. */
.campo input,
.campo textarea,
.select-envoltorio select {
  width: 100%;
  min-height: 44px;
  padding: 0.55rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--borde) 80%, var(--texto-suave));
  border-radius: var(--radio-chico);
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
  box-shadow: inset 0 1px 2px rgba(33, 26, 16, 0.03);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.campo input:hover:not(:disabled),
.campo textarea:hover:not(:disabled),
.select-envoltorio select:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--texto-suave) 65%, var(--borde));
}

.campo input:focus-visible,
.campo textarea:focus-visible,
.select-envoltorio select:focus-visible {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 20%, transparent);
}

.campo textarea {
  resize: vertical;
}

/* Select: el nativo no se puede estilar por dentro, pero apagando su apariencia
   queda igual que los inputs y le ponemos nuestra flecha. Sigue siendo un
   <select> de verdad, asi que anda con teclado, lector de pantalla y sin JS. */
.select-envoltorio {
  position: relative;
  display: block;
}

/* Un select dentro de un buscador: ancho parejo y que pueda achicarse cuando
   el renglón envuelve. */
.buscador .select-envoltorio {
  flex: 0 1 12rem;
  min-width: 0;
}

.select-envoltorio select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.4rem;
  cursor: pointer;
}

.select-envoltorio::after {
  content: '';
  position: absolute;
  right: 0.95rem;
  top: 50%;
  width: 0.55rem;
  height: 0.55rem;
  margin-top: -0.42rem;
  border-right: 2px solid var(--texto-suave);
  border-bottom: 2px solid var(--texto-suave);
  transform: rotate(45deg);
  pointer-events: none;
}

.select-envoltorio select:disabled {
  background: var(--superficie-2);
  color: var(--texto-suave);
  cursor: not-allowed;
}

/* Campo con error: el mensaje va PEGADO al campo que falló, no solo arriba. */
.campo-con-error input,
.campo-con-error textarea,
.campo-con-error select {
  border-color: var(--peligro);
}

.campo-con-error input:focus-visible,
.campo-con-error textarea:focus-visible,
.campo-con-error select:focus-visible {
  border-color: var(--peligro);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--peligro) 18%, transparent);
}

.campo-error {
  display: block;
  color: var(--peligro);
  font-size: 0.82rem;
  font-weight: 500;
  margin-top: 0.3rem;
}

/* Subir un archivo (hoy: la foto del producto). El input nativo entra en la
   misma caja que los demás; lo único que se estila aparte es su botón, que sin
   esto queda con el gris del sistema en medio de un formulario nuestro. */
.campo input[type='file'] {
  padding: 0.45rem 0.55rem;
  cursor: pointer;
}

.campo input[type='file']::file-selector-button {
  margin-right: 0.7rem;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  background: var(--superficie-2);
  color: var(--texto);
  font: inherit;
  font-family: var(--fuente-display);
  font-weight: 600;
  cursor: pointer;
}

.campo input[type='file']:hover::file-selector-button {
  border-color: color-mix(in srgb, var(--acento) 45%, var(--borde));
}

.campo-check label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
}

.campo-check input {
  width: 1.15rem;
  min-height: 1.15rem;
  height: 1.15rem;
  accent-color: var(--acento);
}

/* El grupo de radios de `campo({ tipo: 'radio' })`. Es un <fieldset> porque un
   grupo de opciones se rotula con <legend>, no con <label> — pero un fieldset
   trae borde y padding de fábrica y acá tiene que verse como cualquier otro
   campo. `min-width: 0` es el arreglo viejo de fieldset dentro de un grid: sin
   eso el navegador le da el ancho de su contenido y desborda la columna. */
.campo-radios,
.campo-casillas {
  border: 0;
  padding: 0;
  min-width: 0;
}

.campo-radios > legend,
.campo-casillas > legend {
  padding: 0;
  margin-bottom: 0.35rem;
  font-size: 0.88rem;
  font-weight: 600;
}

.ayuda {
  display: block;
  color: var(--texto-suave);
  font-size: 0.82rem;
  margin-top: 0.3rem;
}

.requerido {
  color: var(--peligro);
}

.grilla-2 {
  display: grid;
  gap: 0 1rem;
}

.buscador {
  display: flex;
  /* ENVUELVE SIEMPRE. Sin esto, una pantalla con cuatro filtros (Clientes,
     Inventario, Servicios) arma una fila de 800 px y saca la PÁGINA ENTERA de
     ancho en el teléfono: medido con navegador a 390 px, `scrollWidth` 811.
     Cada filtro baja al renglón siguiente y nadie se desplaza de costado. */
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.1rem;
}

/* Un filtro no baja de ~10rem ni empuja a los demás: con `flex: 1` a secas, el
   buscador se comía el renglón y los selects quedaban ilegibles. */
.buscador input {
  flex: 1 1 10rem;
  min-width: 0;
  min-height: 44px;
  padding: 0.55rem 0.8rem;
  border: 1px solid color-mix(in srgb, var(--borde) 80%, var(--texto-suave));
  border-radius: var(--radio-chico);
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
  box-shadow: inset 0 1px 2px rgba(33, 26, 16, 0.03);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.buscador input:focus-visible {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 20%, transparent);
}

/* Avisos --------------------------------------------------------------- */

.alerta {
  border: 1px solid var(--borde);
  border-left-width: 4px;
  border-radius: var(--radio-chico);
  padding: 0.75rem 1rem;
  margin: 0 0 1rem;
  font-size: 0.95rem;
}

.alerta ul {
  margin: 0.4rem 0 0;
  padding-left: 1.1rem;
}

.alerta-ok {
  background: var(--ok-fondo);
  border-color: var(--ok-borde);
  border-left-color: color-mix(in srgb, var(--ok-texto) 55%, var(--ok-borde));
  color: var(--ok-texto);
}

.alerta-error {
  background: var(--error-fondo);
  border-color: var(--error-borde);
  border-left-color: color-mix(in srgb, var(--error-texto) 55%, var(--error-borde));
  color: var(--error-texto);
}

.alerta-aviso {
  background: var(--aviso-fondo);
  border-color: var(--aviso-borde);
  border-left-color: color-mix(in srgb, var(--aviso-texto) 50%, var(--aviso-borde));
  color: var(--aviso-texto);
}

.alerta a {
  color: inherit;
}

/* Un código para copiar (una contraseña recién generada, el link privado de un
   pedido o de un turno). No tiene espacios donde cortar, así que sin
   `overflow-wrap` se sale de su tarjeta en el teléfono. */
.credencial {
  display: inline-block;
  max-width: 100%;
  margin: 0 0.4rem;
  padding: 0.15rem 0.45rem;
  border-radius: 6px;
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.95rem;
  overflow-wrap: anywhere;
  user-select: all;
}

/* Chips de estado ------------------------------------------------------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.16rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--borde);
  background: var(--superficie-2);
  color: var(--texto-suave);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.015em;
  white-space: nowrap;
}

/* El puntito: solo en los chips que comunican ESTADO (ok/aviso/off/hecho),
   para leerlos de un vistazo. El chip neutro (etiquetas tipo "Web") va pelado. */
.chip-ok::before,
.chip-off::before,
.chip-aviso::before,
.chip-hecho::before {
  content: '';
  width: 0.44em;
  height: 0.44em;
  border-radius: 999px;
  background: currentColor;
  flex: 0 0 auto;
}

.chip-ok {
  background: var(--ok-fondo);
  border-color: var(--ok-borde);
  color: var(--ok-texto);
}

.chip-off {
  background: var(--error-fondo);
  border-color: var(--error-borde);
  color: var(--error-texto);
}

/* Estado intermedio (esperando pago, diferencia chica de caja): ámbar,
   porque rojo haría ver igual de grave lo pendiente que lo cancelado. */
.chip-aviso {
  background: var(--aviso-fondo);
  border-color: var(--aviso-borde);
  color: var(--aviso-texto);
}

/* Estado final ya resuelto (entregado, cumplido): "ok apagado", para que no
   compita visualmente con el verde de "pagado", que es el que pide acción. */
.chip-hecho {
  border-color: var(--ok-borde);
  color: var(--ok-texto);
}

.chip-hecho::before {
  opacity: 0.55;
}

/* Una venta ANULADA. Rojo y tachado: no es "pendiente" ni "ya está", es una
   operación que dejó de existir para la plata y para la comisión. El tachado
   hace el trabajo aunque el rojo no se distinga (daltonismo, impresión en
   blanco y negro). Ficha 026, lote 6. */
.chip-anulada {
  background: var(--error-fondo);
  border-color: var(--error-borde);
  color: var(--error-texto);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/* Secciones plegadas (el Historial de cada ficha). */
.tarjeta > summary {
  cursor: pointer;
  font-family: var(--fuente-display);
  font-weight: 650;
}

/* El número protagonista de una grilla de datos (el efectivo esperado). */
.dato-destacado {
  border-color: color-mix(in srgb, var(--acento) 35%, var(--borde));
  box-shadow: inset 0 3px 0 var(--acento), var(--sombra);
}

/* Tablas: en el celular cada fila se muestra como ficha ----------------- */

.tabla-caja {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  overflow-x: auto;
  /* `position: relative` NO es decorativo: sin él, un hijo posicionado dentro
     de una tabla ancha —el `<span class="oculto-visual">Acciones</span>` de los
     encabezados— toma como referencia la PÁGINA, se escapa de este scroll y
     estira el documento entero. Medido en /comisiones a 1366 px: la tabla
     scrolleaba bien acá adentro y el documento igual medía 1526. */
  position: relative;
  margin: 0 0 1rem;
  /* SOMBRA DE SCROLL (Lea Verou, sin una línea de JavaScript): cuando la tabla
     es más ancha que la caja, aparece una sombra del lado que tiene contenido
     escondido y se va cuando llegaste al final. Sin esto, una tabla de 13
     columnas (la liquidación) se veía CORTADA y nadie sabía que se podía
     deslizar — era el hallazgo del review del lote 6 a 1366 px.
     Las dos capas `local` tapan la sombra contra el borde; las dos `scroll`
     son la sombra. */
  background-image:
    linear-gradient(to right, var(--superficie) 30%, color-mix(in srgb, var(--superficie) 0%, transparent)),
    linear-gradient(to left, var(--superficie) 30%, color-mix(in srgb, var(--superficie) 0%, transparent)),
    radial-gradient(farthest-side at 0 50%, color-mix(in srgb, var(--texto) 14%, transparent), transparent),
    radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--texto) 14%, transparent), transparent);
  background-position: 0 0, 100% 0, 0 0, 100% 0;
  background-repeat: no-repeat;
  background-size: 2.5rem 100%, 2.5rem 100%, 0.9rem 100%, 0.9rem 100%;
  background-attachment: local, local, scroll, scroll;
}

/* Una tabla ADENTRO de una tarjeta no repite la sombra del contenedor. */
.tarjeta .tabla-caja {
  box-shadow: none;
  border-radius: var(--radio-chico);
}

.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.93rem;
}

.tabla th {
  text-align: left;
  /* Un encabezado NO se parte: "Fecha y hora" en tres renglones hace la fila
     el doble de alta y la tabla ilegible. Si por eso la tabla no entra, se
     desliza adentro de su `.tabla-caja` (que además muestra la sombra). */
  white-space: nowrap;
  font-size: 0.7rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--texto-suave);
  background: color-mix(in srgb, var(--superficie-2) 45%, transparent);
  padding: 0.65rem 0.95rem;
  border-bottom: 1px solid var(--borde);
}

.tabla td {
  padding: 0.75rem 0.95rem;
  border-bottom: 1px solid color-mix(in srgb, var(--borde) 60%, transparent);
  vertical-align: top;
}

.tabla tbody tr:hover td {
  background: color-mix(in srgb, var(--superficie-2) 45%, transparent);
}

.tabla tr:last-child td {
  border-bottom: 0;
}

.numero {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Listas LARGAS (comisiones, movimientos de stock, clientes, la matriz de
   permisos): la misma tabla, mas apretada, para que entren mas filas de un
   vistazo. Las fichas siguen con la densidad normal. */
.tabla-densa td {
  padding: 0.38rem 0.95rem;
}

.tabla-densa th {
  padding: 0.45rem 0.95rem;
}

/* Una GRILLA (agenda, calendario, matriz hora × columna) NO debe colapsar a
   fichas: colapsada es ensalada. Llevan `class="tabla tabla-grilla"` y en el
   telefono se deslizan a lo ancho dentro de su .tabla-caja (overflow-x). Si
   hace falta, dale un min-width a la grilla para que no se aplaste. */
@media (max-width: 720px) {
  .tabla:not(.tabla-grilla),
  .tabla:not(.tabla-grilla) tbody,
  .tabla:not(.tabla-grilla) tr,
  .tabla:not(.tabla-grilla) td {
    display: block;
    width: 100%;
  }

  .tabla:not(.tabla-grilla) thead {
    display: none;
  }

  .tabla:not(.tabla-grilla) tr {
    border-bottom: 1px solid var(--borde);
    padding: 0.55rem 0;
  }

  .tabla:not(.tabla-grilla) tr:last-child {
    border-bottom: 0;
  }

  .tabla:not(.tabla-grilla) tbody tr:hover td {
    background: transparent;
  }

  .tabla:not(.tabla-grilla) td {
    border: 0;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.3rem 0.95rem;
  }

  .tabla:not(.tabla-grilla) td::before {
    content: attr(data-etiqueta);
    color: var(--texto-suave);
    font-size: 0.7rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    flex: 0 0 auto;
  }

  .tabla:not(.tabla-grilla) td .celda {
    text-align: right;
  }

  .tabla:not(.tabla-grilla) td.acciones-celda {
    justify-content: flex-start;
    padding-top: 0.6rem;
  }

  .tabla:not(.tabla-grilla) td.acciones-celda::before {
    content: none;
  }
}

.paginador {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
}

.vacio {
  background: color-mix(in srgb, var(--superficie) 55%, transparent);
  border: 1.5px dashed color-mix(in srgb, var(--borde) 70%, var(--texto-suave));
  border-radius: var(--radio);
  padding: 2.75rem 1.25rem;
  text-align: center;
  color: var(--texto-suave);
}

.vacio p {
  margin: 0 0 0.5rem;
}

.vacio p:last-child {
  margin-bottom: 0;
}

/* Inicio --------------------------------------------------------------- */

.datos-grilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

/* En el teléfono, DOS columnas fijas (ficha 026, lote 6). Con `auto-fit`, una
   pantalla de 360 px dejaba los cuatro KPI uno abajo del otro: media pantalla
   de scroll antes de llegar a la tabla. `minmax(0, 1fr)` es lo que impide que
   un número largo estire la columna y saque la página de ancho. */
@media (max-width: 560px) {
  .datos-grilla {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.dato {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.dato-valor {
  font-family: var(--fuente-display);
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

/* Schibsted no trae cifras tabulares de verdad: forzarlas ahí abre huecos
   alrededor de puntos y comas. Donde el número va en display, cifras normales. */
.dato-valor.numero,
.dato-valor .numero {
  font-variant-numeric: normal;
}

/* EN EL TELÉFONO EL IMPORTE MANDA SOBRE EL TAMAÑO. Un KPI de plata grande
   ("$ 1.482.500,00") mide 192 px a 1.7rem y la media pantalla de un teléfono de
   390 px son 136: el número no tiene dónde cortarse (el espacio del símbolo es
   DURO, no rompe línea) y sacaba la página entera de ancho — medido con
   navegador en /productos. Se achica la cifra, que es lo único que no miente:
   partir un importe al medio sí. */
@media (max-width: 560px) {
  .dato-valor {
    font-size: clamp(0.95rem, 4.6vw, 1.7rem);
  }
}

.dato-etiqueta {
  color: var(--texto-suave);
  font-size: 0.72rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.lista {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}

.lista li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.55rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--borde) 60%, transparent);
}

.lista li:last-child {
  border-bottom: 0;
}

.datos {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.4rem 1.25rem;
  margin: 0;
}

.datos dt {
  color: var(--texto-suave);
  font-size: 0.88rem;
}

/* `min-width: 0` para que la columna pueda achicarse abajo de su contenido:
   sin eso, un dato largo sin espacios (un código) estira la grilla entera. */
.datos dd {
  margin: 0;
  min-width: 0;
}

/* Login ---------------------------------------------------------------- */

.acceso {
  max-width: 23rem;
  margin: 3.5rem auto;
  text-align: center;
}

.acceso h1 {
  font-size: 1.6rem;
  display: inline-flex;
  align-items: baseline;
}

/* El mismo punto de la marca, también en la puerta de entrada. */
.acceso h1::after {
  content: '';
  width: 0.28em;
  height: 0.28em;
  border-radius: 999px;
  background: var(--acento);
  margin-left: 0.14em;
}

.acceso .tarjeta {
  text-align: left;
  margin-top: 1.5rem;
  padding: 1.5rem;
}

.acceso .alerta {
  text-align: left;
}

/* Páginas públicas ------------------------------------------------------ */
/* La cara al cliente del negocio: tiene que sentirse una página de negocio
   cuidada, no un formulario de panel. El color del negocio tiñe el fondo
   arriba y se funde en el papel; la marca va centrada, como un cartel. */

body.publico {
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--acento) 16%, var(--fondo)),
    color-mix(in srgb, var(--acento) 5%, var(--fondo)) 200px,
    var(--fondo) 460px
  );
}

.barra-publica {
  position: static;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 0;
  justify-content: center;
  padding: 2.4rem 1rem 0.25rem;
}

.marca-publica {
  font-size: 1.35rem;
  font-weight: 800;
}

.contenedor-publico {
  padding-top: 0.75rem;
}

.contenedor-publico .encabezado {
  justify-content: center;
  text-align: center;
  margin-bottom: 0.75rem;
}

.contenedor-publico .encabezado h1 {
  font-size: 1.85rem;
  letter-spacing: -0.025em;
}

/* La línea de bienvenida bajo el título ("Atendemos martes a sábado…"). */
.contenedor-publico > .apagado {
  text-align: center;
  max-width: 28rem;
  margin: 0 auto 1.5rem;
}

.contenedor-publico .tarjeta {
  padding: 1.5rem 1.4rem;
  border-radius: 16px;
  box-shadow: var(--sombra-flotante);
}

.contenedor-publico .lista li {
  padding: 0.62rem 0;
}

.contenedor-publico .lista .numero {
  font-family: var(--fuente-display);
  font-weight: 650;
  font-variant-numeric: normal;
}

.contenedor-publico .boton-ancho {
  min-height: 50px;
  font-size: 1.02rem;
  border-radius: var(--radio);
}

.contenedor-publico .datos dd {
  font-weight: 500;
}

@media (max-width: 640px) {
  .contenedor-publico .tarjeta {
    padding: 1.25rem 1.1rem;
  }
}

/* Pantallas grandes ---------------------------------------------------- */

@media (min-width: 640px) {
  .grilla-2 {
    grid-template-columns: 1fr 1fr;
  }

  h1 {
    font-size: 1.7rem;
  }

  .contenedor-publico .encabezado h1 {
    font-size: 2.1rem;
  }
}

/* Fotos de productos (adentro del panel) ------------------------------- */

/* La miniatura del listado del catálogo. Cuadrada y con medida FIJA: la fila
   tiene que medir lo mismo tenga foto o no, si no la tabla late al hacer
   scroll. `flex: 0 0 auto` para que no se achique cuando el nombre es largo. */
.celda-con-foto {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
}

.celda-texto {
  min-width: 0;
}

.miniatura {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: var(--radio-chico);
  border: 1px solid var(--borde);
  object-fit: cover;
  background: var(--superficie-2);
}

/* Sin foto: la inicial sobre el tinte del acento. Mismo lenguaje que el
   monograma de la portada, en chiquito. */
.miniatura-vacia {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fuente-display);
  font-size: 1.15rem;
  font-weight: 750;
  line-height: 1;
  color: color-mix(in srgb, var(--acento) 72%, var(--texto));
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--acento) 22%, var(--superficie)),
    color-mix(in srgb, var(--acento) 8%, var(--superficie))
  );
}

/* La foto actual en la ficha: chica a propósito. Es para reconocerla, no para
   mirarla — quien la quiere ver grande abre su página. */
.foto-previa {
  margin: 0 0 1.05rem;
}

.foto-previa img {
  display: block;
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: var(--radio);
  border: 1px solid var(--borde);
  background: var(--superficie-2);
}

/* El título de la foto se ve igual que el <label> de cualquier otro campo:
   en esta pantalla todo lo que se puede tocar se anuncia con su nombre. */
.foto-previa figcaption {
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

/* ======================================================================
   AGENDA — los horarios libres del día, adentro del panel

   Es la MISMA información que ve el cliente en el turnero (sale de
   `slotsDisponibles`), pero acá es ayuda al lado del campo: adentro la hora se
   escribe a mano, porque el equipo a veces tiene que meter un turno fuera de
   la grilla.
   ====================================================================== */

.ag-libres {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin: -0.35rem 0 1.05rem;
  font-size: 0.88rem;
}

.ag-libres-titulo {
  color: var(--texto-suave);
  margin-right: 0.15rem;
}

.ag-libre {
  padding: 0.15rem 0.45rem;
  border: 1px solid color-mix(in srgb, var(--acento) 35%, var(--borde));
  border-radius: var(--radio-chico);
  background: color-mix(in srgb, var(--acento) 8%, transparent);
  font-family: var(--fuente-display);
  font-weight: 650;
}

.ag-libre-mas,
.ag-libres-vacio {
  color: var(--texto-suave);
}

.ag-libres-vacio {
  display: block;
  margin: -0.35rem 0 1.05rem;
  font-size: 0.88rem;
}

/* La agenda diaria conserva una escala de 15 minutos y separa al equipo en
   columnas. En pantallas chicas el eje horario queda fijo mientras las
   columnas se recorren hacia los costados. */
.ag-navegacion {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 1.1rem;
}

.ag-fecha {
  flex: 0 1 22rem;
  margin: 0;
}

.ag-fecha input[type='date'] {
  min-height: 34px;
  padding-block: 0.28rem;
}

.ag-dia-titulo {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.2rem;
}

.ag-dia-titulo h2 {
  margin-top: 0;
}

.ag-dia-titulo p {
  margin: 0;
}

.ag-filtros {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex: 0 0 auto;
}

.ag-filtros label {
  color: var(--texto-suave);
  font-size: 0.82rem;
  font-weight: 650;
}

.ag-filtros select {
  min-height: 34px;
  max-width: 12rem;
  padding: 0.28rem 2rem 0.28rem 0.65rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
  font-size: 0.84rem;
}

.ag-filtro {
  flex-wrap: nowrap;
  overflow-x: auto;
  margin-top: 0.35rem;
  margin-bottom: 0.8rem;
  padding-bottom: 0.2rem;
}

.ag-filtro .boton {
  flex: 0 0 auto;
}

.ag-calendario {
  overflow: auto;
  margin: 0 0 1rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
  box-shadow: var(--sombra);
  overscroll-behavior-x: contain;
  scrollbar-gutter: stable;
}

.ag-calendario:focus-visible {
  outline-offset: 3px;
}

.ag-grilla {
  display: flex;
  min-width: 100%;
  width: max-content;
}

.ag-eje-horario {
  position: sticky;
  left: 0;
  z-index: 5;
  flex: 0 0 4.25rem;
  border-right: 1px solid var(--borde);
  background: var(--superficie);
  box-shadow: 4px 0 8px -8px color-mix(in srgb, var(--texto) 45%, transparent);
}

.ag-eje-cabecera,
.ag-profesional-cabecera {
  height: 4.25rem;
  border-bottom: 1px solid var(--borde);
  background: color-mix(in srgb, var(--superficie-2) 55%, var(--superficie));
}

.ag-eje-cabecera {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--texto-suave);
  font-size: 0.69rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.ag-horas {
  display: flex;
  flex-direction: column;
}

.ag-hora {
  height: 2.25rem;
  flex: 0 0 2.25rem;
  padding: 0.14rem 0.45rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--borde) 64%, transparent);
  color: var(--texto-suave);
  font-size: 0.7rem;
  text-align: right;
}

.ag-columnas {
  display: flex;
  flex: 1 0 auto;
}

.ag-profesional {
  width: 15rem;
  min-width: 15rem;
  flex: 1 0 15rem;
  border-right: 1px solid var(--borde);
}

.ag-profesional:last-child {
  border-right: 0;
}

.ag-profesional-cabecera {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.55rem 0.7rem;
}

.ag-profesional-cabecera strong {
  max-width: 100%;
  overflow: hidden;
  font-family: var(--fuente-display);
  font-size: 0.93rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ag-profesional-estado {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--texto-suave);
  font-size: 0.7rem;
  font-weight: 650;
}

.ag-profesional-estado::before {
  content: '';
  width: 0.45rem;
  height: 0.45rem;
  flex: 0 0 auto;
  border-radius: 999px;
  background: currentColor;
}

.ag-disponible {
  color: var(--ok-texto);
}

.ag-no-disponible {
  color: var(--error-texto);
}

.ag-profesional-cuerpo {
  display: flex;
  min-height: 100%;
  background-image:
    repeating-linear-gradient(to bottom, transparent 0, transparent 35px, color-mix(in srgb, var(--borde) 62%, transparent) 35px, color-mix(in srgb, var(--borde) 62%, transparent) 36px),
    repeating-linear-gradient(to bottom, transparent 0, transparent 143px, color-mix(in srgb, var(--borde) 88%, transparent) 143px, color-mix(in srgb, var(--borde) 88%, transparent) 144px);
}

.ag-profesional-no-disponible .ag-profesional-cuerpo {
  background-color: color-mix(in srgb, var(--error-fondo) 38%, var(--superficie));
  background-image:
    repeating-linear-gradient(135deg, transparent 0, transparent 9px, color-mix(in srgb, var(--error-borde) 18%, transparent) 9px, color-mix(in srgb, var(--error-borde) 18%, transparent) 10px),
    repeating-linear-gradient(to bottom, transparent 0, transparent 35px, color-mix(in srgb, var(--borde) 62%, transparent) 35px, color-mix(in srgb, var(--borde) 62%, transparent) 36px);
}

.ag-pista {
  display: grid;
  grid-auto-flow: row;
  grid-auto-rows: 2.25rem;
  min-width: 0;
  flex: 1 1 0;
}

.ag-hueco {
  min-width: 0;
}

.ag-turno {
  position: relative;
  z-index: 1;
  display: block;
  min-width: 0;
  min-height: 0;
  margin: 2px 3px;
  padding: 0.18rem 0.35rem;
  overflow: hidden;
  border: 1px solid;
  border-left-width: 4px;
  border-radius: 7px;
  color: var(--texto);
  font-size: 0.7rem;
  line-height: 1.15;
  text-decoration: none;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--texto) 10%, transparent);
}

.ag-turno:hover {
  filter: brightness(1.02) saturate(1.04);
  box-shadow: 0 3px 8px color-mix(in srgb, var(--texto) 16%, transparent);
}

.ag-turno-linea {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  min-width: 0;
  font-size: 0.76rem;
}

.ag-turno-linea > span,
.ag-turno-servicio,
.ag-turno-meta {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ag-turno-linea > span {
  min-width: 0;
  font-weight: 700;
}

.ag-turno-servicio {
  margin-top: 0.08rem;
}

.ag-turno-meta {
  margin-top: 0.18rem;
  opacity: 0.78;
  font-size: 0.64rem;
}

.ag-turno-agendado {
  border-color: var(--aviso-borde);
  border-left-color: var(--aviso-texto);
  background: color-mix(in srgb, var(--aviso-fondo) 88%, var(--superficie));
  color: color-mix(in srgb, var(--aviso-texto) 75%, var(--texto));
}

.ag-turno-cumplido {
  border-color: var(--ok-borde);
  border-left-color: var(--ok-texto);
  background: color-mix(in srgb, var(--ok-fondo) 88%, var(--superficie));
  color: color-mix(in srgb, var(--ok-texto) 70%, var(--texto));
}

.ag-turno-cancelado {
  border-color: var(--error-borde);
  border-left-color: var(--error-texto);
  background: color-mix(in srgb, var(--error-fondo) 86%, var(--superficie));
  color: color-mix(in srgb, var(--error-texto) 72%, var(--texto));
  opacity: 0.78;
}

.ag-span-1 { grid-row: span 1; }
.ag-span-2 { grid-row: span 2; }
.ag-span-3 { grid-row: span 3; }
.ag-span-4 { grid-row: span 4; }
.ag-span-5 { grid-row: span 5; }
.ag-span-6 { grid-row: span 6; }
.ag-span-7 { grid-row: span 7; }
.ag-span-8 { grid-row: span 8; }
.ag-span-9 { grid-row: span 9; }
.ag-span-10 { grid-row: span 10; }
.ag-span-11 { grid-row: span 11; }
.ag-span-12 { grid-row: span 12; }
.ag-span-13 { grid-row: span 13; }
.ag-span-14 { grid-row: span 14; }
.ag-span-15 { grid-row: span 15; }
.ag-span-16 { grid-row: span 16; }
.ag-span-17 { grid-row: span 17; }
.ag-span-18 { grid-row: span 18; }
.ag-span-19 { grid-row: span 19; }
.ag-span-20 { grid-row: span 20; }
.ag-span-21 { grid-row: span 21; }
.ag-span-22 { grid-row: span 22; }
.ag-span-23 { grid-row: span 23; }
.ag-span-24 { grid-row: span 24; }
.ag-span-25 { grid-row: span 25; }
.ag-span-26 { grid-row: span 26; }
.ag-span-27 { grid-row: span 27; }
.ag-span-28 { grid-row: span 28; }
.ag-span-29 { grid-row: span 29; }
.ag-span-30 { grid-row: span 30; }
.ag-span-31 { grid-row: span 31; }
.ag-span-32 { grid-row: span 32; }
.ag-span-33 { grid-row: span 33; }
.ag-span-34 { grid-row: span 34; }
.ag-span-35 { grid-row: span 35; }
.ag-span-36 { grid-row: span 36; }
.ag-span-37 { grid-row: span 37; }
.ag-span-38 { grid-row: span 38; }
.ag-span-39 { grid-row: span 39; }
.ag-span-40 { grid-row: span 40; }
.ag-span-41 { grid-row: span 41; }

@media (max-width: 720px) {
  .ag-dia-titulo {
    align-items: stretch;
    flex-direction: column;
  }

  .ag-filtros {
    justify-content: space-between;
  }

  .ag-filtros select {
    flex: 1 1 auto;
  }

  .ag-calendario {
    margin-right: -1rem;
    margin-left: -1rem;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  .ag-eje-horario {
    flex-basis: 3.75rem;
  }

  .ag-profesional {
    width: 13rem;
    min-width: 13rem;
    flex-basis: 13rem;
  }
}
/* --- lo que el salón le suma a la grilla de Honey ---------------------- */

/* COLOR = QUIÉN. El borde izquierdo y un fondo tenue salen del token de la
   persona (`profesionales.color` → `.pro-3` → `--pro-color`); el ESTADO sigue
   mandando el resto del bloque. No se invierte: si el color dijera el estado,
   un salón de seis personas sería un semáforo sin información.
   Con `color` vacío (el default, y todo BASE) la clase ni se emite. */
.ag-turno-pro {
  border-left-width: 3px;
  border-left-color: var(--pro-color, currentColor);
  background-image: linear-gradient(
    to right,
    color-mix(in srgb, var(--pro-color, transparent) var(--pro-suave, 14%), transparent),
    transparent 55%
  );
}

.ag-profesional-cabecera strong {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

/* El puntito del color de la persona en su encabezado de columna. */
.ag-profesional[class*='pro-'] .ag-profesional-cabecera strong::before {
  content: '';
  width: 0.5em;
  height: 0.5em;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--pro-color);
}

/* Una franja en la que ESA persona no atiende (fuera del horario del negocio
   o del suyo propio). Rayada y apagada: se lee "acá no hay nada que agendar"
   sin tener que contar horas. */
.ag-hueco-cerrado {
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0,
    transparent 5px,
    color-mix(in srgb, var(--borde) 55%, transparent) 5px,
    color-mix(in srgb, var(--borde) 55%, transparent) 6px
  );
}


/* ======================================================================
   FLUJOS PÚBLICOS — pedir (/p/pedir) y reservar (/p/reservar)

   Son la continuación de la portada, no un panel: quien llega acá venía
   mirando la vidriera. Por eso el catálogo ES el formulario (una fila por
   producto, con su foto y su precio) y el servicio se elige tocando una card
   entera, no desplegando un menú.

   Todo el color sale de --acento, como el resto: cambiar la identidad del
   negocio en :root re-tiñe también estas dos pantallas.
   ====================================================================== */

/* --- /p/pedir: el catálogo con su cantidad ------------------------------ */

.pp-items {
  display: grid;
}

/* Tres columnas: foto · qué es · cuántos. En el teléfono angosto la cantidad
   se va sola a un segundo renglón (más abajo) — antes de eso el nombre del
   producto quedaba en una columna de dos palabras. */
.pp-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem 0.85rem;
  padding: 0.7rem 0.55rem;
  border-bottom: 1px solid color-mix(in srgb, var(--borde) 70%, transparent);
}

.pp-item:last-child {
  border-bottom: 0;
}

/* El producto que llegó elegido desde la portada (`?item=`), o al que apunta
   un `#item-N`: se marca, no se grita. Ya viene con cantidad 1. */
.pp-item-elegido,
.pp-item:target {
  background: color-mix(in srgb, var(--acento) 8%, transparent);
  border-radius: var(--radio-chico);
  box-shadow: inset 3px 0 0 var(--acento);
}

/* La misma miniatura del panel, más grande: acá es vidriera, no listado. */
.pp-mini,
.pr-mini {
  width: 56px;
  height: 56px;
  border-radius: var(--radio-chico);
  font-size: 1.45rem;
}

.pp-item-que {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.pp-item-nombre {
  font-family: var(--fuente-display);
  font-size: 1.02rem;
  font-weight: 650;
  letter-spacing: -0.012em;
  line-height: 1.25;
}

.pp-item-detalle {
  color: var(--texto-suave);
  font-size: 0.85rem;
  line-height: 1.35;
}

.pp-item-precio {
  font-family: var(--fuente-display);
  font-size: 0.98rem;
  font-weight: 700;
  font-variant-numeric: normal;
}

/* La cantidad es un `.campo` de verdad (así app.js le marca el error solo),
   pero acostado: la etiqueta va oculta porque el nombre del producto ya está
   al lado. Se envuelve para que un error largo caiga abajo y no estire la
   columna. */
.pp-item .pp-cantidad {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.3rem 0.35rem;
  max-width: 10rem;
}

.pp-item .pp-cantidad input {
  width: 3.6rem;
  padding-left: 0.35rem;
  padding-right: 0.35rem;
  text-align: center;
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: 1.02rem;
}

.pp-item .pp-cantidad .campo-error {
  flex: 1 0 100%;
  text-align: right;
  font-size: 0.78rem;
}

/* Los pasos − / + los inyecta publico.js: sin JavaScript no existen y el
   `number` se escribe a mano, que es como funciona la página de base. */
.pp-paso {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--borde) 80%, var(--texto-suave));
  border-radius: 999px;
  background: var(--superficie-2);
  color: var(--texto);
  font: inherit;
  font-family: var(--fuente-display);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.12s, border-color 0.12s;
}

.pp-paso:hover {
  background: color-mix(in srgb, var(--acento) 10%, var(--superficie-2));
  border-color: color-mix(in srgb, var(--acento) 45%, var(--borde));
}

/* Con los pasos puestos, la flechita nativa del `number` sobra (y en el
   escritorio se pisa con el botón +). Se apaga SOLO cuando el JS armó la
   barra: sin JavaScript la flecha del navegador es lo único que hay. */
.pp-con-barra .pp-cantidad input {
  appearance: textfield;
  -moz-appearance: textfield;
}

.pp-con-barra .pp-cantidad input::-webkit-outer-spin-button,
.pp-con-barra .pp-cantidad input::-webkit-inner-spin-button {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
}

/* La barra del total: `sticky` y no `fixed` a propósito. Vive DENTRO del
   formulario, así que se despega sola cuando el formulario se termina — con
   `fixed` habría que reservarle lugar al pie a mano y taparía el último campo
   en cuanto alguien cambiara el largo de la página. */
.pp-barra {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  margin-top: 0.5rem;
  padding: 0.7rem 0.9rem;
  padding-bottom: calc(0.7rem + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--superficie) 92%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-flotante);
}

.pp-barra-total {
  flex: 1 1 8rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.pp-barra-cuantos {
  color: var(--texto-suave);
  font-size: 0.82rem;
}

.pp-barra-plata {
  font-family: var(--fuente-display);
  font-size: 1.3rem;
  font-weight: 750;
  letter-spacing: -0.018em;
  font-variant-numeric: normal;
}

/* El botón de enviar es el MISMO que estaba al final del formulario: publico.js
   lo muda acá adentro. Un solo submit, siempre. */
.pp-barra .acciones {
  flex: 1 1 11rem;
  margin: 0;
}

/* --- /p/reservar: el servicio se elige tocando ------------------------- */

/* El grupo de servicios lleva la clase `campo` (así app.js le limpia el error
   solo cuando la persona elige): de ahí que casi todo lo de acá abajo tenga
   que ganarle en especificidad a las reglas genéricas de .campo. */
.pr-grupo > h2 {
  margin-bottom: 0.85rem;
}

.pr-servicios {
  display: grid;
  gap: 0.55rem;
}

.pr-grupo .pr-servicio {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 44px;
  margin: 0;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
  font-size: 1rem;
  font-weight: 400;
  cursor: pointer;
  transition: border-color 0.12s, background-color 0.12s, box-shadow 0.12s;
}

.pr-grupo .pr-servicio:hover {
  border-color: color-mix(in srgb, var(--acento) 45%, var(--borde));
  background: color-mix(in srgb, var(--acento) 4%, var(--superficie));
}

/* El radio se esconde de la VISTA, nunca del teclado ni del lector: sigue
   siendo el control que se enfoca y el que viaja en el formulario. */
.pr-grupo input[type='radio'] {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  padding: 0;
  margin: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

/* Lo que se ve del radio. Va pegado al input, así el foco y el tilde salen con
   un selector de hermano — que funciona en todos lados, incluso donde :has()
   todavía no llegó. */
.pr-tilde {
  flex: 0 0 auto;
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--texto-suave) 55%, var(--borde));
  background: var(--superficie);
  transition: border-color 0.12s, background-color 0.12s, box-shadow 0.12s;
}

.pr-grupo input[type='radio']:checked + .pr-tilde {
  border-color: var(--acento);
  background: var(--acento);
  box-shadow: inset 0 0 0 3.5px var(--superficie);
}

.pr-grupo input[type='radio']:focus-visible + .pr-tilde {
  outline: 2px solid var(--acento);
  outline-offset: 3px;
}

/* La card entera se tiñe con el acento cuando es la elegida, y toma el foco
   del teclado. Es de más (el tilde ya lo dice), así que si :has() no está no
   se pierde nada. */
.pr-grupo .pr-servicio:has(input:checked) {
  border-color: var(--acento);
  background: color-mix(in srgb, var(--acento) 7%, var(--superficie));
  box-shadow: 0 0 0 1px var(--acento);
}

.pr-grupo .pr-servicio:has(input:focus-visible) {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

.pr-servicio-que {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

.pr-servicio-que strong {
  font-family: var(--fuente-display);
  font-size: 1.02rem;
  font-weight: 650;
  letter-spacing: -0.012em;
  line-height: 1.25;
}

.pr-servicio-datos {
  color: var(--texto-suave);
  font-size: 0.85rem;
  line-height: 1.35;
}

.pr-servicio-precio {
  flex: 0 0 auto;
  font-family: var(--fuente-display);
  font-weight: 750;
  font-variant-numeric: normal;
}

/* El grupo entero en rojo cuando falta elegir: el borde de un campo de texto
   acá no aplica (el control está escondido), así que lo dice la caja. */
.pr-grupo.campo-con-error {
  border-color: var(--peligro);
}

.pr-grupo > .campo-error {
  margin-top: 0.7rem;
}

/* El horario, pegado a los campos de día y hora: es el dato que hace falta
   justo ahí y no tres pantallas más arriba. */
.pr-atencion {
  margin: -0.35rem 0 1rem;
  color: var(--texto-suave);
  font-size: 0.9rem;
}

/* --- /p/reservar: con quién ------------------------------------------- */

/* Las personas del equipo son pastillas, no cards: hay pocas y lo único que
   las distingue es el nombre. Se acuestan en una grilla que se acomoda sola
   al ancho del teléfono. */
.pr-personas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  gap: 0.55rem;
  margin-bottom: 0.55rem;
}

/* Misma mecánica que las cards de servicio (el radio va escondido y el tilde
   pegado al input), así el tilde, el foco y el teclado funcionan igual. */
.pr-grupo .pr-persona {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  margin: 0;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
  font-size: 1rem;
  font-weight: 400;
  cursor: pointer;
  transition: border-color 0.12s, background-color 0.12s, box-shadow 0.12s;
}

.pr-grupo .pr-persona:hover {
  border-color: color-mix(in srgb, var(--acento) 45%, var(--borde));
  background: color-mix(in srgb, var(--acento) 4%, var(--superficie));
}

.pr-grupo .pr-persona:has(input:checked) {
  border-color: var(--acento);
  background: color-mix(in srgb, var(--acento) 7%, var(--superficie));
  box-shadow: 0 0 0 1px var(--acento);
}

.pr-grupo .pr-persona:has(input:focus-visible) {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

.pr-persona-que {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.pr-persona-que strong {
  font-family: var(--fuente-display);
  font-size: 0.98rem;
  font-weight: 650;
  letter-spacing: -0.012em;
  line-height: 1.25;
}

/* --- /p/reservar: los horarios que quedan libres ---------------------- */

/* El paso de los horarios vive DENTRO de la card "Cuándo": es la respuesta al
   día que se acaba de elegir, no otra sección. Por eso se separa con una
   línea en vez de una caja nueva. */
.pr-horarios {
  margin: 1.2rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--borde);
}

.pr-horarios h3 {
  font-family: var(--fuente-display);
  font-size: 0.98rem;
  font-weight: 650;
  letter-spacing: -0.008em;
  margin: 0 0 0.7rem;
}

/* El botón de "Ver horarios" (sin JavaScript) va pegado al día: es lo que
   sigue después de elegirlo. */
.pr-ver {
  margin: 0.2rem 0 0;
}

/* publico.js lo esconde cuando puede traer los horarios solo. Hace falta la
   regla: `.acciones` declara `display: flex`, y un display propio le gana al
   [hidden] del navegador — el botón quedaría a la vista igual. */
.pr-ver[hidden] {
  display: none;
}

.pr-horas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4.6rem, 1fr));
  gap: 0.45rem;
}

.pr-horas-titulo {
  margin: 0.9rem 0 0.5rem;
  color: var(--texto-suave);
  font-size: 0.85rem;
}

.pr-horas-titulo:first-of-type {
  margin-top: 0;
}

/* Cada horario es un radio escondido con su pastilla al lado: se ve como un
   botón, pero el control sigue siendo nativo (teclado, lector de pantalla, y
   el formulario anda sin JavaScript). El tilde sale con el selector de
   hermano, que funciona en todos lados. */
.pr-hora {
  display: block;
  margin: 0;
  position: relative;
}

.pr-hora input[type='radio'] {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  padding: 0;
  margin: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.pr-hora-txt {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.35rem 0.4rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  background: var(--superficie);
  font-family: var(--fuente-display);
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: border-color 0.12s, background-color 0.12s, color 0.12s;
}

.pr-hora-txt:hover {
  border-color: color-mix(in srgb, var(--acento) 55%, var(--borde));
  background: color-mix(in srgb, var(--acento) 8%, var(--superficie));
}

.pr-hora input[type='radio']:checked + .pr-hora-txt {
  border-color: var(--acento);
  background: var(--acento);
  color: var(--acento-texto);
}

.pr-hora input[type='radio']:focus-visible + .pr-hora-txt {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

/* Los tres "todavía no" del turnero (falta el servicio, falta el día, ese día
   está completo). No son errores: se dicen en voz baja. */
.pr-vacio {
  margin: 0;
  padding: 0.9rem 0.2rem;
  color: var(--texto-suave);
  font-size: 0.93rem;
  line-height: 1.45;
}

/* El resumen de lo elegido, arriba del botón. Lo pone publico.js. */
.pr-resumen {
  margin: 1.1rem 0 -0.55rem;
  text-align: center;
  font-family: var(--fuente-display);
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: color-mix(in srgb, var(--acento) 76%, var(--texto));
}

/* --- Teléfono angosto -------------------------------------------------- */

@media (max-width: 30rem) {
  /* La cantidad baja a su propio renglón, alineada a la derecha: así el nombre
     del producto se lee entero en vez de repartirse en cuatro líneas. */
  .pp-item {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .pp-item .pp-cantidad {
    grid-column: 1 / -1;
    max-width: none;
  }

  .pp-mini,
  .pr-mini {
    width: 48px;
    height: 48px;
    font-size: 1.25rem;
  }

  .pr-grupo .pr-servicio {
    gap: 0.65rem;
    padding: 0.7rem;
  }
}

/* ======================================================================
   PORTADA — la página del negocio (lib/portada.mjs)
   La vidriera: siempre clara, tipografía display protagonista, y TODO el
   color derivado de --acento (cambiar la identidad del negocio en :root
   re-tiñe la portada entera, sin tocar nada de acá).
   ====================================================================== */

/* La cinta de arriba: la firma de color del negocio, como el toldo del local. */
body.portada {
  border-top: 6px solid var(--acento);
}

/* --- Hero: el cartel ---------------------------------------------------- */

.pt-hero {
  padding: clamp(3.25rem, 9vw, 5.5rem) 1.25rem clamp(2.5rem, 6vw, 3.75rem);
  text-align: center;
  background:
    radial-gradient(
      135% 125% at 50% -25%,
      color-mix(in srgb, var(--acento) 20%, var(--fondo)),
      color-mix(in srgb, var(--acento) 6%, var(--fondo)) 52%,
      transparent 88%
    );
}

/* Con fotos, la tira es el cierre del hero y ya trae su propio aire arriba:
   sumarle el respiro de abajo partía la página en dos mitades. */
.pt-hero-fotos {
  padding-bottom: clamp(1.75rem, 4vw, 2.5rem);
}

.pt-hero-adentro {
  max-width: 64rem;
  margin: 0 auto;
}

.pt-nombre {
  font-family: var(--fuente-display);
  font-size: clamp(2.7rem, 9vw, 4.4rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
}

/* El punto de la casa, en tamaño cartel. */
.pt-punto {
  display: inline-block;
  width: 0.16em;
  height: 0.16em;
  border-radius: 999px;
  background: var(--acento);
  margin-left: 0.09em;
}

/* El mismo punto, de firma al final de cada título de sección: la marca
   reaparece cada vez que la página cambia de tema. */
.pt-punto-chico {
  width: 0.2em;
  height: 0.2em;
  margin-left: 0.14em;
  vertical-align: 0.02em;
}

.pt-lema {
  font-family: var(--fuente-display);
  font-size: clamp(1.15rem, 3.2vw, 1.5rem);
  font-weight: 550;
  letter-spacing: -0.012em;
  color: color-mix(in srgb, var(--texto) 82%, var(--acento));
  max-width: 34rem;
  margin: 0.9rem auto 0;
  text-wrap: balance;
}

.pt-descripcion {
  color: var(--texto-suave);
  max-width: 38rem;
  margin: 0.9rem auto 0;
  font-size: 1.02rem;
}

.pt-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 1.9rem;
}

/* Botones de portada: más grandes y redondos que los del panel — se tocan
   con el pulgar, no con el mouse. */
.pt-boton {
  min-height: 52px;
  padding: 0.7rem 1.55rem;
  border-radius: 999px;
  font-size: 1.03rem;
}

.pt-horario {
  margin: 1.6rem 0 0;
  font-size: 0.92rem;
  color: var(--texto-suave);
}

/* --- La tira del hero: las fotos apoyadas sobre el mostrador ------------- */

/* Las fotos REALES del catálogo, con marco de papel y apenas rotadas, un poco
   montadas entre sí: la vidriera antes de que la persona baje. Sin fotos
   cargadas no existe (lo decide lib/portada.mjs) y el hero queda como estaba
   — que también se ve bien: esto SUMA, no tapa un agujero. */
.pt-tira {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 36rem;
  margin: clamp(2rem, 5vw, 2.75rem) auto 0;
}

.pt-tira-foto {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 14px;
  /* El marco es del color de la superficie, no blanco fijo: si el negocio
     cambia su paleta, las fotos siguen recortadas contra el papel. */
  border: 5px solid var(--superficie);
  background: color-mix(in srgb, var(--acento) 10%, var(--fondo));
  box-shadow: var(--sombra-flotante);
}

/* Dos fotos ocupando el mismo ancho que tres serían dos carteles: la tira se
   angosta para que pesen lo mismo en la página. */
.pt-tira-2 {
  max-width: 27rem;
}

.pt-tira-2 .pt-tira-foto {
  width: 47%;
}

.pt-tira-2 .pt-tira-foto:first-child {
  transform: rotate(-2.5deg);
}

.pt-tira-2 .pt-tira-foto:last-child {
  transform: rotate(2.5deg);
  margin-left: -1rem;
}

.pt-tira-3 .pt-tira-foto {
  width: 37%;
}

.pt-tira-3 .pt-tira-foto:nth-child(n + 2) {
  margin-left: -1.5rem;
}

.pt-tira-3 .pt-tira-foto:first-child {
  transform: rotate(-2.5deg) translateY(4px);
}

/* La del medio manda: derecha, un poco más grande y por encima de las otras
   dos (los items de un flex aceptan z-index sin position). */
.pt-tira-3 .pt-tira-foto:nth-child(2) {
  width: 40%;
  z-index: 2;
}

.pt-tira-3 .pt-tira-foto:last-child {
  transform: rotate(2.5deg) translateY(4px);
}

/* --- Secciones ---------------------------------------------------------- */

.pt-seccion {
  max-width: 64rem;
  margin: 0 auto;
  padding: clamp(1.75rem, 5vw, 3.25rem) 1.25rem;
}

.pt-seccion-cabeza {
  margin-bottom: 1.5rem;
}

.pt-kicker {
  margin: 0 0 0.4rem;
  font-size: 0.74rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: color-mix(in srgb, var(--acento) 80%, var(--texto));
}

/* La rayita del volante: separa la sección de la anterior sin gastar un
   borde de lado a lado. */
.pt-kicker::before {
  content: '';
  display: inline-block;
  width: 1.5rem;
  height: 2px;
  margin-right: 0.6rem;
  vertical-align: 0.24em;
  background: currentColor;
  opacity: 0.55;
}

.pt-titulo {
  font-family: var(--fuente-display);
  font-size: clamp(1.6rem, 4.5vw, 2.25rem);
  font-weight: 750;
  letter-spacing: -0.028em;
  line-height: 1.1;
  margin: 0;
}

.pt-seccion-pie {
  margin: 2rem auto 0;
  display: grid;
  justify-items: center;
  gap: 1rem;
  text-align: center;
  color: var(--texto-suave);
  max-width: 30rem;
}

/* --- La tienda: cards del catálogo -------------------------------------- */

.pt-grilla {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
}

.pt-card {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--sombra);
  transition: box-shadow 0.15s, transform 0.15s;
}

.pt-card:hover {
  box-shadow: var(--sombra-flotante);
  transform: translateY(-2px);
}

/* La cabecera de la card: o la foto del producto, o el monograma. Las dos
   miden EXACTAMENTE lo mismo — una grilla donde tres productos tienen foto y
   dos no tiene que verse igual de pareja que una donde tienen todos. */
.pt-card > .pt-foto,
.pt-card > .pt-monograma {
  height: 9.5rem;
}

.pt-foto {
  display: block;
  width: 100%;
  object-fit: cover;
  background: color-mix(in srgb, var(--acento) 8%, var(--fondo));
}

/* El monograma: la inicial del producto como pieza gráfica, tintes del
   acento. Tres tonos que rotan para que la grilla respire sin salirse de la
   identidad.

   NO es un hueco esperando la foto: es la versión sin foto de la vidriera, y
   tiene que verse elegida. De ahí las rayas — el toldo del local, el mismo
   gesto que la cinta de arriba de la portada. Van en un SVG embebido (nada de
   pedirle un archivo más al servidor) y en blanco, no en color: el blanco
   aclara CUALQUIER acento sin pelearse con él, así que el negocio puede poner
   el color que quiera y esto sigue funcionando. Lo público es siempre claro,
   así que el blanco siempre suma luz. */
.pt-monograma {
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='7' stroke-opacity='0.33'%3E%3Cpath d='M-4 26 26 -4M18 48 48 18'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--acento) 26%, var(--fondo)),
      color-mix(in srgb, var(--acento) 9%, var(--fondo))
    );
}

.pt-tono-2 .pt-monograma {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='6' stroke-opacity='0.30'%3E%3Ccircle cx='22' cy='22' r='9'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(
      315deg,
      color-mix(in srgb, var(--acento) 21%, var(--fondo)),
      color-mix(in srgb, var(--acento) 7%, var(--fondo))
    );
}

.pt-tono-3 .pt-monograma {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cg fill='%23ffffff' fill-opacity='0.34'%3E%3Ccircle cx='11' cy='11' r='3.2'/%3E%3Ccircle cx='33' cy='33' r='3.2'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(
      140% 130% at 20% 0%,
      color-mix(in srgb, var(--acento) 30%, var(--fondo)),
      color-mix(in srgb, var(--acento) 10%, var(--fondo))
    );
}

/* La inicial va sobre un disco claro: sin él, una letra apoyada en las rayas
   se lee peor justo donde cae una raya. */
.pt-monograma span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5.2rem;
  height: 5.2rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fondo) 72%, transparent);
  font-family: var(--fuente-display);
  font-size: 2.7rem;
  font-weight: 800;
  line-height: 1;
  color: color-mix(in srgb, var(--acento) 78%, var(--texto));
}

.pt-card-cuerpo {
  flex: 1;
  padding: 1.05rem 1.15rem 0.35rem;
}

.pt-card-nombre {
  font-family: var(--fuente-display);
  font-size: 1.13rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0;
}

.pt-card-detalle {
  color: var(--texto-suave);
  font-size: 0.9rem;
  margin: 0.35rem 0 0;
}

/* La lista de precios adentro de la card: la portada es también la carta. */
.pt-variantes {
  list-style: none;
  margin: 0.7rem 0 0;
  padding: 0;
  font-size: 0.88rem;
}

.pt-variantes li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.32rem 0;
  border-bottom: 1px dotted color-mix(in srgb, var(--borde) 80%, var(--texto-suave));
}

.pt-variantes li:last-child {
  border-bottom: 0;
}

.pt-card-pie {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1.15rem 1.05rem;
  margin-top: auto;
}

.pt-precio {
  font-family: var(--fuente-display);
  font-size: 1.14rem;
  font-weight: 750;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.pt-desde {
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--texto-suave);
}

/* --- Los servicios: la carta -------------------------------------------- */

.pt-servicios {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 18px;
  box-shadow: var(--sombra);
  overflow: hidden;
}

/* Toda la fila es el link: en el teléfono, un "Reservar" chiquito es lotería. */
.pt-servicio {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.05rem 1.25rem;
  color: var(--texto);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--borde) 70%, transparent);
  transition: background-color 0.12s;
}

.pt-servicio:last-child {
  border-bottom: 0;
}

.pt-servicio:hover {
  background: color-mix(in srgb, var(--acento) 5%, var(--superficie));
}

.pt-servicio-que {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.14rem;
  min-width: 0;
}

.pt-servicio-que strong {
  font-family: var(--fuente-display);
  font-size: 1.04rem;
  font-weight: 650;
  letter-spacing: -0.012em;
}

.pt-servicio-datos {
  color: var(--texto-suave);
  font-size: 0.86rem;
}

.pt-servicio-precio {
  font-family: var(--fuente-display);
  font-weight: 750;
  font-variant-numeric: normal;
}

.pt-servicio-flecha {
  color: var(--acento);
  font-weight: 700;
  transition: transform 0.15s;
}

.pt-servicio:hover .pt-servicio-flecha {
  transform: translateX(3px);
}

/* --- Cómo funciona: el circuito en tres pasos ---------------------------- */

/* Franja de fondo tenue: corta la página después del catálogo y le da ritmo
   (papel → tinte → papel → color). El tinte sale del acento, así que
   acompaña la identidad de cualquier negocio. */
.pt-franja {
  background: color-mix(in srgb, var(--acento) 6%, var(--fondo));
  border-top: 1px solid color-mix(in srgb, var(--borde) 75%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--borde) 75%, transparent);
  margin-top: clamp(1rem, 3vw, 2rem);
}

.pt-caminos {
  display: grid;
  gap: clamp(1.75rem, 4vw, 2.5rem);
}

.pt-camino-titulo {
  font-family: var(--fuente-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 1.1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid color-mix(in srgb, var(--acento) 30%, var(--borde));
  color: color-mix(in srgb, var(--acento) 75%, var(--texto));
}

.pt-pasos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.2rem;
}

.pt-paso {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

/* El número en su ficha: es lo que hace que tres párrafos se lean como un
   circuito y no como tres frases sueltas. */
.pt-paso-n {
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--acento) 13%, var(--superficie));
  border: 1px solid color-mix(in srgb, var(--acento) 30%, transparent);
  color: color-mix(in srgb, var(--acento) 82%, var(--texto));
  font-family: var(--fuente-display);
  font-size: 0.92rem;
  font-weight: 750;
  line-height: 1;
}

.pt-paso-que {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
}

.pt-paso-que strong {
  font-family: var(--fuente-display);
  font-size: 1.02rem;
  font-weight: 650;
  letter-spacing: -0.012em;
}

.pt-paso-que span {
  color: var(--texto-suave);
  font-size: 0.93rem;
}

/* En pantalla ancha: un solo camino se lee en fila (los tres pasos a la
   vista); dos caminos van en columnas, cada uno con su encabezado.
   Dos columnas entran antes que tres — de ahí los dos cortes distintos: con
   tres columnas apretadas cada paso se parte en cinco renglones. */
@media (min-width: 46rem) {
  .pt-caminos-2 {
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 3.5rem);
  }
}

@media (min-width: 52rem) {
  .pt-caminos-1 .pt-pasos {
    grid-template-columns: repeat(3, 1fr);
    gap: 2.25rem;
  }
}

/* --- La galería: fotos de verdad, nada de banco de imágenes ------------- */

/* Flex y no grid a propósito: la cantidad de fotos la pone el negocio (3 a 9)
   y con grilla fija la última fila queda coja, con un hueco al costado. Así
   las que sobran se centran y la franja se ve pareja con cualquier número. */
.pt-galeria {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
}

.pt-galeria-item {
  flex: 0 1 calc(50% - 0.35rem);
  max-width: 13rem;
  position: relative;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: color-mix(in srgb, var(--acento) 8%, var(--fondo));
  box-shadow: var(--sombra);
}

.pt-galeria-item img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 0.4s;
}

.pt-galeria-item:hover img {
  transform: scale(1.045);
}

/* El nombre encima de la foto: acá la foto está sola y sin el nombre nadie
   sabe qué es. El velo sale del texto (un neutro cálido de la paleta), no de
   un negro suelto. */
.pt-galeria-item figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.8rem 0.7rem 0.55rem;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--texto) 80%, transparent),
    color-mix(in srgb, var(--texto) 42%, transparent) 55%,
    transparent
  );
  color: var(--fondo);
  font-family: var(--fuente-display);
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.25;
}

/* --- El cierre: el botón al alcance de quien llegó hasta abajo ---------- */

/* Cierra en espejo del hero (el mismo degradé, ahora subiendo): la página
   abre y cierra con el color del negocio. */
.pt-cierre {
  text-align: center;
  padding: clamp(2.75rem, 7vw, 4.25rem) 1.25rem;
  background: radial-gradient(
    115% 110% at 50% 135%,
    color-mix(in srgb, var(--acento) 17%, var(--fondo)),
    color-mix(in srgb, var(--acento) 5%, var(--fondo)) 55%,
    transparent 85%
  );
}

.pt-cierre-adentro {
  max-width: 34rem;
  margin: 0 auto;
}

.pt-cierre-titulo {
  font-family: var(--fuente-display);
  font-size: clamp(1.9rem, 5.5vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0;
}

.pt-cierre-horario {
  margin: 0.7rem 0 0;
  color: var(--texto-suave);
  font-size: 0.95rem;
}

.pt-cierre .pt-cta {
  margin-top: 1.6rem;
}

/* --- Contacto: la franja del color del negocio -------------------------- */

.pt-contacto {
  background: linear-gradient(
    160deg,
    var(--acento),
    color-mix(in srgb, var(--acento) 86%, var(--texto))
  );
  color: var(--acento-texto);
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  padding: clamp(2.75rem, 8vw, 4.25rem) 1.25rem;
}

/* Con el cierre arriba, los dos degradés ya se tocan: un margen más los
   despegaría y quedaría una franja flotando. */
.pt-cierre + .pt-contacto {
  margin-top: 0;
}

.pt-contacto-adentro {
  max-width: 64rem;
  margin: 0 auto;
  text-align: center;
}

.pt-contacto h2 {
  font-family: var(--fuente-display);
  font-size: clamp(1.8rem, 5vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0 0 0.5rem;
}

.pt-contacto p {
  margin: 0 auto 1.5rem;
  max-width: 30rem;
  opacity: 0.88;
}

/* El botón invertido: sobre la franja del acento, el blanco es el que grita. */
.pt-wa {
  background: var(--acento-texto);
  border-color: transparent;
  color: var(--acento);
}

.pt-wa:hover {
  background: var(--acento-texto);
  border-color: transparent;
  filter: brightness(0.96);
}

.pt-contacto :focus-visible {
  outline-color: var(--acento-texto);
}

.pt-datos {
  margin-top: 1.7rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 1.8rem;
  font-size: 0.95rem;
}

.pt-dato {
  color: inherit;
  opacity: 0.92;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}

/* --- Pie ---------------------------------------------------------------- */

.pt-pie {
  max-width: 64rem;
  margin: 0 auto;
  padding: 1.7rem 1.25rem 2.3rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  font-size: 0.85rem;
  color: color-mix(in srgb, var(--texto-suave) 85%, transparent);
}

.pt-pie a {
  color: inherit;
}

/* ——— Preset del salón: los colores del EQUIPO —————————————————————————
   Ficha 026, lote 2. Van bajo `body.preset-peluqueria` (la clase que pone
   `documento()` de lib/html.mjs desde PRESET) y NO en `:root`: el contrato del
   template define el azul de BASE, y pisar `:root` repintaría en el próximo
   redeploy a todas las apps genéricas que ya corren.

   `profesionales.color` guarda el TOKEN (`pro-3`), nunca un hex: así el tema
   claro y el oscuro siguen mandando y nadie termina con un amarillo ilegible
   en modo oscuro. La clase del chip es ese mismo token. */

body.preset-peluqueria {
  --pro-1: #8a4b12;
  --pro-2: #2f6f4e;
  --pro-3: #1f5d8c;
  --pro-4: #7a3560;
  --pro-5: #9a6b0f;
  --pro-6: #55603f;
  --pro-7: #8d3a2a;
  --pro-8: #4b4a7a;
  /* Cuánto color lleva el fondo tenue del chip y del bloque de la agenda. */
  --pro-suave: 14%;
  --pro-color: var(--texto-suave);
}

/* Los mismos ocho, aclarados para fondo oscuro. Dos caminos llegan acá: el
   teléfono en oscuro con el tema en "Automático" (el @media, que NO aplica si
   el dueño eligió claro) y el oscuro ELEGIDO en Ajustes (la clase, que manda
   aunque el teléfono esté en claro). Ficha 026, lote 6. */
@media (prefers-color-scheme: dark) {
  body.preset-peluqueria:not(.tema-claro):not(.publico) {
    --pro-1: #e0a45f;
    --pro-2: #7fc39d;
    --pro-3: #8ebde0;
    --pro-4: #d79bc0;
    --pro-5: #e3c377;
    --pro-6: #b3c08f;
    --pro-7: #e8a094;
    --pro-8: #a9a8e0;
  }
}

body.preset-peluqueria.tema-oscuro:not(.publico) {
  --pro-1: #e0a45f;
  --pro-2: #7fc39d;
  --pro-3: #8ebde0;
  --pro-4: #d79bc0;
  --pro-5: #e3c377;
  --pro-6: #b3c08f;
  --pro-7: #e8a094;
  --pro-8: #a9a8e0;
}

/* El chip de una persona del equipo: el punto de su columna en la agenda + su
   nombre. El color entra por la CLASE (`pro-3`), no por un `style=` inline. */
.chip-pro {
  border-color: color-mix(in srgb, var(--pro-color) 30%, var(--borde));
  background: color-mix(in srgb, var(--pro-color) var(--pro-suave, 14%), var(--superficie));
  color: color-mix(in srgb, var(--pro-color) 70%, var(--texto));
}

.chip-pro::before {
  content: '';
  width: 0.5em;
  height: 0.5em;
  border-radius: 999px;
  background: var(--pro-color);
  flex: 0 0 auto;
}

.pro-1 { --pro-color: var(--pro-1); }
.pro-2 { --pro-color: var(--pro-2); }
.pro-3 { --pro-color: var(--pro-3); }
.pro-4 { --pro-color: var(--pro-4); }
.pro-5 { --pro-color: var(--pro-5); }
.pro-6 { --pro-color: var(--pro-6); }
.pro-7 { --pro-color: var(--pro-7); }
.pro-8 { --pro-color: var(--pro-8); }

/* La fila que le falta un dato (un servicio sin precio, una combinación sin
   porcentaje de comisión). Ámbar, no rojo: falta cargarlo, no está roto. */
.fila-aviso td {
  background: color-mix(in srgb, var(--aviso-fondo) 55%, transparent);
}

.fila-aviso td:first-child {
  box-shadow: inset 3px 0 0 var(--aviso-borde);
}

@media (max-width: 720px) {
  /* Colapsada a ficha, el ámbar es el borde izquierdo de la card entera. */
  .tabla:not(.tabla-grilla) tr.fila-aviso {
    box-shadow: inset 3px 0 0 var(--aviso-borde);
  }

  .fila-aviso td:first-child {
    box-shadow: none;
  }
}

/* ======================================================================
   PERÍODO, VENTAS Y CAJA — ficha 026, lote 3

   El filtro de período es UNO SOLO en toda la app (lib/periodo.mjs): los
   mismos cuatro atajos y el mismo par de fechas en cada pantalla que mira un
   rango. Agenda Pro tiene tres widgets distintos según dónde estés parado.
   ====================================================================== */

.periodo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
}

.periodo-atajos {
  margin: 0;
}

/* El par de fechas, plegado (ficha 026, lote 6): en el teléfono eran dos
   inputs date + dos labels + un botón empujando la tabla media pantalla para
   abajo, para un filtro que casi siempre se resuelve con los cuatro atajos.
   Se abre solo cuando el rango aplicado es uno escrito a mano. */
.periodo-caja {
  min-width: 0;
}

.periodo-caja > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 34px;
  padding: 0.2rem 0.7rem;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: var(--superficie);
  color: var(--texto-suave);
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 650;
  white-space: nowrap;
}

.periodo-caja > summary:hover {
  border-color: color-mix(in srgb, var(--acento) 45%, var(--borde));
}

.periodo-caja > summary:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

.periodo-caja[open] > summary {
  margin-bottom: 0.5rem;
}

.periodo-rango {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.84rem;
}

.periodo-rango label {
  color: var(--texto-suave);
  font-weight: 650;
}

.periodo-rango input[type='date'] {
  min-height: 34px;
  padding: 0.28rem 0.5rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
  font-size: 0.84rem;
}

/* Los filtros finos de Ventas (profesional, medio, estado, buscador): una
   sola fila que envuelve, no un panel plegable. El `flex-wrap` ya lo pone
   `.buscador` (que envuelve en TODAS las pantallas); acá queda el ancho de
   cada select, que es lo propio de esta pantalla. */
.ventas-filtros .select-envoltorio {
  flex: 0 1 12rem;
}

/* Una línea del carrito. Es un <fieldset> de verdad: sin JS, la única forma
   de que se entienda que esos cinco campos son UNA cosa. */
.venta-linea {
  margin: 0 0 0.9rem;
  padding: 0.75rem 0.9rem 0.2rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  background: var(--superficie-2);
}

.venta-linea > legend {
  padding: 0 0.4rem;
  color: var(--texto-suave);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.venta-subtotal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.75rem;
  font-size: 0.88rem;
}

.venta-pago {
  margin-bottom: 0.2rem;
}

/* El control segmentado que elige la lista de precios de toda la venta. */
.campo-segmentado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1.05rem;
  padding: 0;
  border: 0;
}

.campo-segmentado > legend {
  padding: 0;
  color: var(--texto-suave);
  font-size: 0.84rem;
  font-weight: 650;
}

.segmento {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 38px;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: var(--superficie);
  cursor: pointer;
  font-size: 0.88rem;
}

.segmento:has(input:checked) {
  border-color: color-mix(in srgb, var(--acento) 55%, var(--borde));
  background: color-mix(in srgb, var(--acento) 12%, var(--superficie));
  font-weight: 650;
}

.campo-segmentado .ayuda {
  flex: 1 0 100%;
}

/* Tres campos en una fila (cantidad · precio · descuento; medio · monto ·
   detalle). En el teléfono se apilan solos, como .grilla-2. */
.grilla-3 {
  display: grid;
  gap: 0 1rem;
}

@media (min-width: 620px) {
  .grilla-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Los cinco botones del día de caja: ingreso, egreso, traspaso, rectificar y
   el retiro de una persona. */
.caja-botones {
  margin-bottom: 1.1rem;
}

.lista-simple {
  margin: 0;
  padding-left: 1.1rem;
}

.lista-simple li {
  margin-bottom: 0.3rem;
}

/* --- el comprobante para imprimir (/ventas/:id/imprimir) --------------- */

.comprobante {
  max-width: 46rem;
  margin: 0 auto;
}

.comprobante-cabecera h1 {
  margin-bottom: 0.2rem;
}

.comprobante-cabecera p {
  margin: 0.1rem 0;
}

.comprobante-total {
  display: flex;
  justify-content: space-between;
  margin: 1rem 0;
  padding-top: 0.6rem;
  border-top: 2px solid var(--texto);
  font-family: var(--fuente-display);
  font-size: 1.1rem;
}

.comprobante-pie {
  margin-top: 1.6rem;
  font-size: 0.82rem;
}

/* La hoja: sin barra, sin botones y sin sombras que gasten tinta. */
@media print {
  .sin-imprimir,
  .pie {
    display: none !important;
  }

  .comprobante,
  .tabla-caja {
    border: 0;
    box-shadow: none;
  }
}

/* ======================================================================
   COMISIONES — ficha 026, lote 4

   El reporte es la liquidación: doce columnas de números que en el teléfono
   se colapsan a ficha con `data-etiqueta`, como el resto de las tablas. Lo
   único que esta pantalla agrega es un color: un total NEGATIVO (la persona
   retiró más de lo que generó) tiene que saltar a la vista sin leer el signo.
   ====================================================================== */

.plata-negativa {
  color: var(--peligro);
  font-weight: 650;
}

/* Los tres campos del ajuste (qué es · suma o resta · monto) y el input de
   presentismo del cierre entran en la fila sin estirar la tabla. */
.tabla input[type='text'],
.tabla input:not([type]) {
  max-width: 8rem;
  min-height: 34px;
  padding: 0.28rem 0.5rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
  font-size: 0.88rem;
}

/* ======================================================================
   EL SISTEMA DEL SALÓN — ficha 026, lote G (propuesta UX del 13/09/2026)

   Todo lo de acá abajo vive bajo `body.preset-peluqueria`, incluidos los
   @media de oscuro, de ancho y de impresión. Ni una regla global: `:root`,
   `body.publico`, `body.tema-*` y el `@font-face` de arriba quedan EXACTAMENTE
   como estaban, porque son el contrato del template y las apps genéricas que
   ya corren se repintarían solas en su próximo redeploy.

   Dos capas, en este orden:

     1. TOKENS + ALIAS. El set completo de variables del preset (claro y
        oscuro) y unos pocos ajustes a las clases VIEJAS (`.boton`, `.campo`,
        `.dato`, `.barra`) para que las veinte pantallas que todavía no se
        rehicieron se vean con el sistema nuevo mientras llegan sus lotes.
     2. COMPONENTES `salon-*`. El markup lo arman `lib/ui.mjs`, `lib/html.mjs`
        y `lib/periodo.mjs`; acá está su aspecto. Se agregan SIN borrar las
        clases viejas: durante las olas conviven.

   Nada de `overflow-x: hidden` para tapar un desborde: si algo se sale, se
   arregla dónde se sale. La única excepción al "sin scroll horizontal" es el
   interior de la agenda, que es una grilla y se desliza a propósito.
   ====================================================================== */

/* --- 1. Tokens del salón, set completo -------------------------------- */

body.preset-peluqueria {
  --superficie-2: #f0ede8;
  --acento: #8a4b12;
  --acento-texto: #ffffff;
  --acento-hover: #703b0e;
  --acento-activo: #5a2f0b;
  --acento-suave: #f2e8dc;
  --visitado: #694a32;
  /* El borde que IDENTIFICA un control (3:1 sobre superficie y sobre fondo).
     `--borde` separa bloques y no alcanza para decir "acá se escribe". */
  --control-borde: #8b8175;
  --foco: #8a4b12;
  --fuente-cifra: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --sombra: 0 1px 2px rgb(33 29 24 / 8%);
  --sombra-flotante: 0 8px 24px rgb(33 29 24 / 16%);
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-6: 24px;
  --e-8: 32px;
  --e-12: 48px;
  --radio-interior: 4px;
  --z-agenda: 10;
  --z-barra: 30;
  --z-menu: 40;
}

/* El teléfono en oscuro con el tema en "Automático". `:not(.tema-claro)`
   porque el dueño que eligió claro tiene que ver claro; `:not(.publico)`
   porque lo público es la vidriera del negocio y es SIEMPRE claro.

   ⚠️ `--superficie-2` VA EN LOS DOS BLOQUES OSCUROS (revisión de integración de
   la ola 4, hallazgo 1). El set claro de arriba lo redeclara —lo necesita: el
   `#f0ede8` del salón no es el de BASE— y esa línea vive DESPUÉS de
   `body.tema-oscuro` con la misma especificidad, así que en oscuro ganaba el
   valor CLARO. Con eso, todo lo que apoya sobre la segunda superficie (el `th`
   de cualquier tabla, el chip neutro, `.salon-resumen`, la línea de venta, el
   `:hover` de los botones y de la barra) quedaba con fondo casi blanco y texto
   claro encima: 1,05:1 en las etiquetas de la venta y 1,88:1 en los `th`.
   Si mañana el set claro suma otro token de color, tiene que aparecer acá y en
   el bloque de abajo, o vuelve el mismo agujero. */
@media (prefers-color-scheme: dark) {
  body.preset-peluqueria:not(.tema-claro):not(.publico) {
    --superficie-2: #262220;
    --borde: #494138;
    --texto-suave: #b7aea1;
    --acento: #f2b45a;
    --acento-texto: #241407;
    --acento-hover: #f6c783;
    --acento-activo: #e0a45f;
    --acento-suave: #372918;
    --visitado: #d3b28b;
    --control-borde: #958779;
    --foco: #f2b45a;
    --sombra: 0 1px 2px rgb(0 0 0 / 35%);
    --sombra-flotante: 0 8px 24px rgb(0 0 0 / 45%);
  }
}

/* Y el oscuro ELEGIDO en Ajustes, que manda aunque el teléfono esté claro. */
body.preset-peluqueria.tema-oscuro:not(.publico) {
  --superficie-2: #262220;
  --borde: #494138;
  --texto-suave: #b7aea1;
  --acento: #f2b45a;
  --acento-texto: #241407;
  --acento-hover: #f6c783;
  --acento-activo: #e0a45f;
  --acento-suave: #372918;
  --visitado: #d3b28b;
  --control-borde: #958779;
  --foco: #f2b45a;
  --sombra: 0 1px 2px rgb(0 0 0 / 35%);
  --sombra-flotante: 0 8px 24px rgb(0 0 0 / 45%);
}

/* LO PÚBLICO DEL SALÓN, SIEMPRE CLARO. Va al final del set a propósito: sin
   esta regla, un teléfono en oscuro le daba a la página de reservas el acento
   miel (pensado para fondo oscuro) sobre el fondo claro de la vidriera. */
body.publico.preset-peluqueria {
  --acento: #8a4b12;
  --acento-texto: #ffffff;
  --acento-hover: #703b0e;
  --acento-activo: #5a2f0b;
  --acento-suave: #f2e8dc;
  --visitado: #694a32;
  --control-borde: #8b8175;
  --foco: #8a4b12;
  --borde: #e4e0d8;
  --texto-suave: #6f685e;
  --pro-1: #8a4b12;
  --pro-2: #2f6f4e;
  --pro-3: #1f5d8c;
  --pro-4: #7a3560;
  --pro-5: #9a6b0f;
  --pro-6: #55603f;
  --pro-7: #8d3a2a;
  --pro-8: #4b4a7a;
}

/* --- 2. Utilidades del preset ----------------------------------------- */

/* `min-width: 0` en todo: es lo que evita que un hijo de flex/grid con un
   texto largo (un importe, el nombre de un servicio) estire su contenedor y
   saque la página de pantalla. No cambia nada que se vea. */
body.preset-peluqueria * {
  min-width: 0;
}

body.preset-peluqueria .salon-pila {
  display: grid;
  gap: 16px;
}

body.preset-peluqueria .salon-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

body.preset-peluqueria .salon-fila-entre {
  justify-content: space-between;
}

body.preset-peluqueria .salon-dos {
  display: grid;
  gap: 16px;
}

/* UN BOTÓN A LA ALTURA DEL CAMPO DE AL LADO, dentro de un `.salon-dos`.
   El caso: "Buscar cliente" + el botón que lo busca, o un precio + "Usar el de
   la lista". Sin esto el botón se pega al TECHO de la fila (donde está el
   `<label>` del campo) y queda flotando medio campo más arriba de la base del
   control.
   Los dos ingredientes: `align-self: end` lo baja al piso de la fila, y el
   margen inferior repite el `margin-bottom` de `.campo` (1,05rem), que es parte
   de la caja del campo en la grilla — sin él, el botón queda esa cantidad MÁS
   ABAJO que el control. Es para un campo SIN ayuda ni error debajo: con un
   renglón de texto abajo, las dos bases ya no coinciden (ahí el botón va en el
   pie del formulario). */
body.preset-peluqueria .salon-dos > .alineado-con-campo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  align-self: end;
  gap: 8px;
  margin-bottom: 1.05rem;
}

/* Adentro de los filtros el campo no lleva margen (`.salon-filtros .campo`),
   así que el botón tampoco. */
body.preset-peluqueria .salon-filtros .salon-dos > .alineado-con-campo {
  margin-bottom: 0;
}

body.preset-peluqueria .salon-chico {
  font-size: 14px;
}

/* El foco: anillo de 3 px separado 3 px, del color del acento (6,18:1 sobre el
   fondo claro, 10,19:1 sobre el oscuro). Uno solo para toda la app. */
body.preset-peluqueria :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  body.preset-peluqueria *,
  body.preset-peluqueria *::before {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* --- 3. Alias: las pantallas viejas, con el sistema nuevo --------------- */

/* La barra: fondo OPACO y sin blur (los números no compiten con lo que se
   transparenta detrás) y sin `sticky` en el teléfono — al abrir el menú, una
   lista larga tiene que poder desplazarse entera. */
body.preset-peluqueria .barra {
  position: static;
  padding: 12px 16px;
  border-bottom: 1px solid var(--borde);
  background: var(--superficie);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* El contenedor de trabajo. En una notebook de 13" la tabla de ventas entra
   entera; el formulario largo se queda angosto para no leer a 120 caracteres. */
body.preset-peluqueria .contenedor-formulario {
  max-width: 54rem;
}

body.preset-peluqueria .contenedor-angosto {
  max-width: 38rem;
}

/* EL ANCHO DE LECTURA (`pagina({ ancho: 'lectura' })`): un manual es texto
   corrido, y un renglón de más de ~70 caracteres hace perder la línea al bajar.
   Se mide en `ch` —la tipografía que se está usando— y no en `rem`: con el
   cuerpo agrandado por accesibilidad, o con 200 % de zoom, 38rem vuelven a ser
   120 caracteres. El `min(…, 100%)` es lo que lo deja entrar en un teléfono. */
body.preset-peluqueria .contenedor-lectura {
  max-width: min(70ch, 100%);
}

/* Botones viejos: 44 px de blanco táctil también en escritorio, el hover con
   el token del acento (y no un `filter: brightness`, que en oscuro aclaraba de
   más) y sin el salto de 1 px al apretar. */
body.preset-peluqueria .boton {
  border-color: var(--control-borde);
  box-shadow: var(--sombra);
  font-weight: 650;
}

body.preset-peluqueria .boton:hover {
  border-color: var(--texto-suave);
  background: var(--superficie-2);
}

body.preset-peluqueria .boton:active {
  transform: none;
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 20%);
}

body.preset-peluqueria .boton-primario {
  border-color: var(--acento);
  box-shadow: var(--sombra);
}

body.preset-peluqueria .boton-primario:hover {
  border-color: var(--acento-hover);
  background: var(--acento-hover);
  filter: none;
}

body.preset-peluqueria .boton-primario:active {
  background: var(--acento-activo);
}

body.preset-peluqueria .boton-chico {
  min-height: 44px;
  padding: 8px 12px;
  border-radius: var(--radio-chico);
  font-size: 14px;
}

/* Campos viejos: el borde de un control tiene que llegar a 3:1 contra el
   fondo. `--borde` (que separa bloques) daba 1,3:1 y en una notebook al sol el
   campo desaparecía. */
body.preset-peluqueria .campo input,
body.preset-peluqueria .campo textarea,
body.preset-peluqueria .select-envoltorio select,
body.preset-peluqueria .buscador input {
  border-color: var(--control-borde);
  box-shadow: none;
  font-size: 16px;
}

body.preset-peluqueria .campo input:hover:not(:disabled),
body.preset-peluqueria .campo textarea:hover:not(:disabled),
body.preset-peluqueria .select-envoltorio select:hover:not(:disabled) {
  border-color: var(--acento);
}

body.preset-peluqueria .campo input:focus-visible,
body.preset-peluqueria .campo textarea:focus-visible,
body.preset-peluqueria .select-envoltorio select:focus-visible,
body.preset-peluqueria .buscador input:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 3px;
  border-color: var(--acento);
  box-shadow: none;
}

/* El selector de día de la Agenda (`.ag-fecha`) es de los campos viejos y trae
   su propio `min-height: 34px`, más específico que el mínimo de la casa: en el
   teléfono el control quedaba en 38 px y es el que más se toca de la pantalla
   (revisión de integración de la ola 4, hallazgo 9). El `padding-block` vuelve
   al del resto de los campos para que los 44 px sean de alto real y no de
   caja vacía. */
body.preset-peluqueria .ag-fecha input[type='date'] {
  min-height: 44px;
  padding-block: 0.5rem;
}

/* Un radio y un checkbox NO son un campo de texto: `.campo input` les daba
   ancho 100 % y 44 px de alto, y salían círculos azules gigantes con opciones
   de proporciones distintas (hallazgo 3 de la propuesta). */
body.preset-peluqueria .campo input[type='radio'],
body.preset-peluqueria .campo input[type='checkbox'],
body.preset-peluqueria .segmento input,
body.preset-peluqueria .campo-check input {
  width: 20px;
  height: 20px;
  min-height: 0;
  flex: 0 0 auto;
  padding: 0;
  accent-color: var(--acento);
  box-shadow: none;
}

/* Los KPI viejos: la cifra a 1,7 rem no entraba en media pantalla de teléfono
   y se salía de la tarjeta ($ 1.372.000,00). 20 px en el teléfono, 25 en
   escritorio, y cifras tabulares para poder comparar columnas. */
body.preset-peluqueria .dato-valor {
  font-size: 20px;
  font-family: var(--fuente-cifra);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  line-height: 1.2;
  overflow-wrap: break-word;
}

body.preset-peluqueria .dato-etiqueta {
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
}

/* Los avisos viejos, con la geometría del sistema. */
body.preset-peluqueria .alerta {
  border-radius: var(--radio-chico);
  padding: 12px 16px;
}

/* --- 4. Botones del sistema ------------------------------------------- */

body.preset-peluqueria .salon-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--control-borde);
  border-radius: var(--radio-chico);
  background: var(--superficie);
  box-shadow: var(--sombra);
  color: var(--texto);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  line-height: 20px;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
}

body.preset-peluqueria .salon-boton:visited {
  color: var(--texto);
}

body.preset-peluqueria .salon-boton:hover {
  border-color: var(--texto-suave);
  background: var(--superficie-2);
  color: var(--texto);
  text-decoration: none;
}

body.preset-peluqueria .salon-boton:active {
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 20%);
}

body.preset-peluqueria .salon-boton.primario,
body.preset-peluqueria .salon-boton.primario:visited {
  border-color: var(--acento);
  background: var(--acento);
  color: var(--acento-texto);
}

body.preset-peluqueria .salon-boton.primario:hover {
  border-color: var(--acento-hover);
  background: var(--acento-hover);
  color: var(--acento-texto);
}

body.preset-peluqueria .salon-boton.primario:active {
  background: var(--acento-activo);
}

/* `secundario` ES el aspecto por defecto, con nombre: la alternativa al lado de
   la acción principal ("Nuevo turno" junto a "Nueva venta"). Se declara igual
   —y no como un no-op— para que el mapa cerrado de `boton()` tenga las seis
   variantes que promete la API congelada: antes `variante: 'secundario'` se
   descartaba en silencio y salía una clase sola. */
body.preset-peluqueria .salon-boton.secundario,
body.preset-peluqueria .salon-boton.secundario:visited {
  border-color: var(--control-borde);
  background: var(--superficie);
  box-shadow: var(--sombra);
  color: var(--texto);
}

body.preset-peluqueria .salon-boton.secundario:hover {
  border-color: var(--texto-suave);
  background: var(--superficie-2);
  color: var(--texto);
}

body.preset-peluqueria .salon-boton.terciario,
body.preset-peluqueria .salon-boton.terciario:visited {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: var(--acento);
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.preset-peluqueria .salon-boton.terciario:hover {
  background: var(--acento-suave);
  color: var(--acento);
  text-decoration: underline;
}

/* Peligro delineado en la ficha, peligro SÓLIDO recién en la confirmación. */
body.preset-peluqueria .salon-boton.peligro,
body.preset-peluqueria .salon-boton.peligro:visited {
  border-color: var(--peligro);
  box-shadow: none;
  color: var(--peligro);
}

body.preset-peluqueria .salon-boton.peligro:hover {
  background: var(--error-fondo);
  color: var(--peligro);
}

body.preset-peluqueria .salon-boton.peligro-firme,
body.preset-peluqueria .salon-boton.peligro-firme:visited {
  border-color: var(--peligro);
  background: var(--peligro);
  color: #ffffff;
}

body.preset-peluqueria .salon-boton.peligro-firme:hover {
  background: var(--error-texto);
  color: #ffffff;
}

body.preset-peluqueria .salon-boton.icono {
  width: 44px;
  flex: 0 0 44px;
  padding: 10px;
}

body.preset-peluqueria .salon-boton.grande {
  min-height: 48px;
  padding: 12px 20px;
  font-size: 16px;
}

/* Compacto achica el PADDING lateral, nunca el blanco táctil. */
body.preset-peluqueria .salon-boton.compacto {
  padding: 8px 12px;
}

body.preset-peluqueria .salon-boton:disabled {
  border-color: var(--borde);
  background: var(--superficie-2);
  box-shadow: none;
  color: var(--texto-suave);
  cursor: not-allowed;
  opacity: 0.7;
}

/* DÓNDE ESTÁS, FUERA DE LA BARRA (pedido del agente de Porcentajes de
   comisión, P16). Los cortes de una pantalla —"Por producto / Por vendedor" de
   /productos/vendidos, las cinco formas de mover plata de /caja/nuevo— son
   enlaces GET con `aria-current="page"`, y hasta la ronda 4 el estado se veía
   SOLO en el borde de la variante `secundario`: al lado de tres terciarios sin
   borde, cuál era el que estás mirando se adivinaba. Mismo tratamiento que el
   período elegido (fondo miel y subrayado del acento) y que la sección actual
   de la barra: el color no es la única señal, el subrayado grueso también está.
   Los enlaces de la barra no son `.salon-boton` (tienen su regla aparte, más
   abajo) y el período ya trae la suya con estos mismos valores. */
body.preset-peluqueria .salon-boton[aria-current='page'],
body.preset-peluqueria .salon-boton[aria-current='page']:visited,
body.preset-peluqueria .salon-boton[aria-current='true'],
body.preset-peluqueria .salon-boton[aria-current='true']:visited {
  border-color: var(--acento);
  background: var(--acento-suave);
  box-shadow: inset 0 -2px var(--acento);
  color: var(--acento);
}

/* "Cobrando…": el ancho queda reservado por salon.js, así el botón no salta. */
body.preset-peluqueria .salon-boton[aria-busy='true']::before {
  content: '';
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: salon-girar 0.8s linear infinite;
}

@keyframes salon-girar {
  to {
    transform: rotate(360deg);
  }
}

body.preset-peluqueria .salon-pie-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--borde);
}

/* "Recalcular el total" con la línea que lo explica al lado: un solo bloque,
   porque `salon.js` los retira juntos cuando el total ya es confiable (ficha
   026, hallazgo 10 de la revisión de integración). Ocupa el hueco que queda
   entre "Cancelar" y "Cobrar" y la frase envuelve adentro; nunca empuja a la
   acción principal fuera de su lugar. */
body.preset-peluqueria .salon-recalcular {
  display: flex;
  flex: 1 1 20rem;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

body.preset-peluqueria .salon-recalcular .ayuda {
  flex: 1 1 14rem;
  margin: 0;
  text-align: left;
}

/* HACE FALTA, y es el mismo caso que `.pr-ver[hidden]` de la página pública:
   `salon.js` retira este bloque con `hidden`, y un `display` propio del autor
   le gana al `[hidden] { display: none }` del navegador. Sin esta regla, el
   botón y su explicación se quedaban a la vista con el total ya confiable —
   justo lo contrario de lo que se vino a arreglar. */
body.preset-peluqueria .salon-recalcular[hidden] {
  display: none;
}

/* Todos los `summary` del salón se ven IGUAL: 44 px de alto (blanco táctil),
   color de acento y negrita. `.salon-panel details > summary` entró acá porque
   un `details` adentro de un panel salía como texto plano y no se leía como
   algo que se abre (pedido del agente de Comisiones, P7). El filtro de período
   queda AFUERA: tiene su propia caja (fondo, borde y padding de 16 px) y este
   selector, que es más específico, se la pisaba. */
body.preset-peluqueria .salon-mas-acciones > summary,
body.preset-peluqueria .salon-tabla summary,
body.preset-peluqueria .salon-panel details:not(.salon-periodo):not(.periodo-caja) > summary,
body.preset-peluqueria .salon-filtros-avanzados > summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 0;
  color: var(--acento);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}

/* --- 5. Campos del sistema --------------------------------------------- */

body.preset-peluqueria .salon-campo {
  display: grid;
  align-content: start;
  gap: 8px;
}

body.preset-peluqueria .salon-campo label {
  font-size: 14px;
  font-weight: 650;
}

body.preset-peluqueria .salon-campo :where(input:not([type='radio']):not([type='checkbox']), select, textarea) {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--control-borde);
  border-radius: var(--radio-chico);
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
  font-size: 16px;
  line-height: 22px;
}

body.preset-peluqueria .salon-campo .ayuda {
  color: var(--texto-suave);
  font-size: 14px;
}

body.preset-peluqueria .salon-campo .error {
  color: var(--error-texto);
  font-size: 14px;
}

body.preset-peluqueria .salon-campo [aria-invalid='true'] {
  border-color: var(--peligro);
}

/* El select nativo, estilado: se le apaga la apariencia y se le pone UNA
   flecha propia. Dos flechas era el hallazgo 2 de la propuesta. */
body.preset-peluqueria .salon-select {
  position: relative;
  display: block;
}

body.preset-peluqueria .salon-select select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
}

body.preset-peluqueria .salon-select::after {
  content: '';
  position: absolute;
  top: 17px;
  right: 16px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--texto-suave);
  border-bottom: 2px solid var(--texto-suave);
  transform: rotate(45deg);
  pointer-events: none;
}

/* Dinero: el signo va afuera del valor, la cifra alineada a la derecha y en
   tabular. El valor se escribe como lo acepta el validador de siempre. */
body.preset-peluqueria .salon-dinero {
  position: relative;
}

body.preset-peluqueria .salon-dinero > span {
  position: absolute;
  top: 10px;
  left: 12px;
  color: var(--texto-suave);
}

body.preset-peluqueria .salon-dinero input {
  padding-left: 32px;
  font-family: var(--fuente-cifra);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Porcentaje: el espejo de dinero (`campo({ porcentaje: true })`). El `%` va a
   la DERECHA de la cifra —el lado por el que se escribe— y afuera del valor:
   lo que se manda al servidor sigue siendo "40" o "7,5". La cifra queda
   tabular igual, que es lo que alinea una columna de porcentajes. */
body.preset-peluqueria .salon-porcentaje {
  position: relative;
}

body.preset-peluqueria .salon-porcentaje > span {
  position: absolute;
  top: 10px;
  right: 12px;
  color: var(--texto-suave);
}

body.preset-peluqueria .salon-porcentaje input {
  padding-right: 30px;
  font-family: var(--fuente-cifra);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

body.preset-peluqueria .salon-segmentado {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

body.preset-peluqueria .salon-segmentado legend {
  margin-bottom: 8px;
  padding: 0;
  font-size: 14px;
  font-weight: 650;
}

body.preset-peluqueria .salon-segmentado label {
  position: relative;
  flex: 1 1 auto;
}

body.preset-peluqueria .salon-segmentado input {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  margin: 0;
  opacity: 0;
}

body.preset-peluqueria .salon-segmentado span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--control-borde);
  border-radius: var(--radio-chico);
  font-size: 14px;
  font-weight: 650;
}

body.preset-peluqueria .salon-segmentado input:checked + span {
  border-color: var(--acento);
  background: var(--acento-suave);
  box-shadow: inset 0 0 0 1px var(--acento);
  color: var(--acento);
}

/* El tilde: la opción elegida no se distingue SOLO por el color. */
body.preset-peluqueria .salon-segmentado input:checked + span::before {
  content: '✓';
  margin-right: 8px;
}

body.preset-peluqueria .salon-segmentado input:focus-visible + span {
  outline: 3px solid var(--foco);
  outline-offset: 3px;
}

body.preset-peluqueria .salon-segmentado label:hover span {
  background: var(--superficie-2);
}

/* EL SEGMENTADO ADENTRO DE UN `.campo` (`campo({ tipo: 'casillas' })`, ronda 5).
   Las reglas de un campo de texto no valen para una pastilla: `.campo
   input[type='checkbox']` le da 20×20 px al control que acá tiene que estar
   oculto (y le gana en especificidad al `.salon-segmentado input` de arriba),
   y `.campo label` le mete el margen de abajo de una etiqueta a cada pastilla.
   Con esto, un `.salon-segmentado` se ve igual esté suelto o dentro de un
   campo. */
body.preset-peluqueria .campo .salon-segmentado input[type='checkbox'],
body.preset-peluqueria .campo .salon-segmentado input[type='radio'] {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
}

body.preset-peluqueria .campo .salon-segmentado label {
  margin-bottom: 0;
}


body.preset-peluqueria .salon-casilla {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  cursor: pointer;
  font-size: 14px;
}

body.preset-peluqueria .salon-casilla input {
  width: 20px;
  height: 20px;
  min-height: 0;
  flex: 0 0 auto;
  accent-color: var(--acento);
}

/* El <legend> de un grupo de radios —o de casillas— se lee como la etiqueta de
   un campo: mismo tamaño y mismo peso que un `<label>` del preset, no como un
   título. */
body.preset-peluqueria .campo-radios > legend,
body.preset-peluqueria .campo-casillas > legend {
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 650;
}

body.preset-peluqueria .salon-grupo {
  display: grid;
  gap: 16px;
  margin: 0 0 24px;
  padding: 0;
  border: 0;
}

body.preset-peluqueria .salon-grupo > legend {
  margin-bottom: 16px;
  padding: 0;
  font-family: var(--fuente-display);
  font-size: 20px;
  font-weight: 700;
}

/* --- 6. Encabezado, migas y panel -------------------------------------- */

body.preset-peluqueria .salon-titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

body.preset-peluqueria .salon-titulo > div:first-child {
  flex: 1 1 16rem;
}

body.preset-peluqueria .salon-titulo :where(h1, h2) {
  margin-bottom: 4px;
}

body.preset-peluqueria .salon-titulo p {
  margin: 0;
}

body.preset-peluqueria .salon-contador {
  color: var(--texto-suave);
  font-size: 14px;
  font-weight: 650;
}

body.preset-peluqueria .salon-migas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: var(--texto-suave);
  font-size: 14px;
}

body.preset-peluqueria .salon-migas a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

body.preset-peluqueria .salon-panel {
  display: grid;
  gap: 16px;
  margin-bottom: 24px;
  padding: 20px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
}

body.preset-peluqueria .salon-panel > :where(h2, h3, p) {
  margin: 0;
}

/* --- 7. KPI ------------------------------------------------------------ */

body.preset-peluqueria .salon-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 12px 0 16px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
}

body.preset-peluqueria .salon-kpi {
  padding: 16px;
  border-bottom: 1px solid var(--borde);
}

body.preset-peluqueria .salon-kpi:nth-child(odd) {
  border-right: 1px solid var(--borde);
}

body.preset-peluqueria .salon-kpi:nth-last-child(-n + 2) {
  border-bottom: 0;
}

body.preset-peluqueria .salon-kpi dt {
  margin-bottom: 8px;
  color: var(--texto-suave);
  font-size: 14px;
}

body.preset-peluqueria .salon-kpi dd {
  margin: 0;
}

body.preset-peluqueria .salon-kpi .valor {
  display: block;
  font-family: var(--fuente-display);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}

/* EL KPI DESTACADO: el número que la pantalla vino a contestar ("Facturado
   hoy"). `kpi({ destacado: true })` emitía la clase y no la pintaba nadie
   (pedido del agente de Comisiones, P7).

   Es una jerarquía SUAVE, no otro color de marca: la cifra sube un escalón de
   tamaño y toma el acento, y la celda un fondo de 6 % del mismo acento. No se
   usa el acento sólido de fondo porque al lado de los otros tres KPI grises
   parecería un estado (verde/ámbar/rojo son estados en esta app). Funciona
   igual en claro y en oscuro porque sale de `--acento`, que el tema redefine.
   El aviso: destacar TODO es no destacar nada — uno por fila de KPI. */
body.preset-peluqueria .salon-kpi-destacado {
  background: color-mix(in srgb, var(--acento) 6%, transparent);
}

/* En el TELÉFONO la cifra destacada mide lo mismo que las otras (20 px) y se
   distingue por el color y el fondo, no por el cuerpo: a 390 px la grilla es de
   dos columnas (~163 px útiles) y un `$ 631.000,00` de 25 px se salía 21 px de
   su celda (revisión de integración de la ola 4, hallazgo 2). El escalón de
   tamaño entra donde hay lugar: 25 px de 720 px para arriba y 30 px de 1120,
   donde TODOS los valores ya son de 25. */
body.preset-peluqueria .salon-kpi-destacado .valor {
  color: var(--acento);
  font-size: 20px;
}

body.preset-peluqueria .salon-kpi-destacado .etiqueta {
  color: var(--texto);
}

/* EL KPI QUE LLEVA A OTRA PANTALLA (`kpi({ href })`).

   El enlace real está en la ETIQUETA (el `<dt>`), que es lo que un lector de
   pantalla anuncia en su lista de enlaces ("Turnos hoy" dice a dónde va;
   "$ 605.000,00" no). Lo que hace tocable la TARJETA ENTERA es el `::after`
   estirado sobre la celda: el dedo cae en cualquier parte de los 88 px de alto
   y no sobre dos palabras de 14 px. No se puede al revés —envolver la tarjeta
   en un `<a>`— porque un `<dl>` solo acepta `dt`, `dd` y `div` como hijos.

   El foco se dibuja sobre la CELDA (donde está el área activa), no alrededor de
   la etiqueta. Si el navegador no entiende `:has()`, el `:focus-visible` global
   del preset le pone el anillo al `<a>`: nunca queda sin señal de foco. */
body.preset-peluqueria .salon-kpi-enlace {
  position: relative;
}

body.preset-peluqueria .salon-kpi-a {
  color: var(--acento);
  font-weight: 650;
  text-decoration: none;
}

body.preset-peluqueria .salon-kpi-a::after {
  content: '';
  position: absolute;
  inset: 0;
}

body.preset-peluqueria .salon-kpi-enlace:hover {
  background: color-mix(in srgb, var(--acento) 8%, transparent);
}

body.preset-peluqueria .salon-kpi-enlace:hover .salon-kpi-a {
  text-decoration: underline;
}

body.preset-peluqueria .salon-kpi-enlace:has(.salon-kpi-a:focus-visible) {
  outline: 3px solid var(--foco);
  outline-offset: -3px;
}

body.preset-peluqueria .salon-kpi-enlace:has(.salon-kpi-a:focus-visible) .salon-kpi-a {
  outline: none;
}

/* La cifra de plata usa la sans del sistema: Schibsted no trae cifras
   tabulares de verdad y las columnas de importes quedaban desalineadas. */
body.preset-peluqueria .salon-kpi .valor.numero {
  font-family: var(--fuente-cifra);
  font-variant-numeric: tabular-nums;
}

body.preset-peluqueria .salon-kpi .detalle {
  display: block;
  margin-top: 8px;
  color: var(--texto-suave);
  font-size: 14px;
}

/* --- 8. Chips ---------------------------------------------------------- */

body.preset-peluqueria .salon-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 3px 8px;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: var(--superficie-2);
  color: var(--texto-suave);
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
}

body.preset-peluqueria .salon-chip.ok {
  border-color: var(--ok-borde);
  background: var(--ok-fondo);
  color: var(--ok-texto);
}

body.preset-peluqueria .salon-chip.aviso {
  border-color: var(--aviso-borde);
  background: var(--aviso-fondo);
  color: var(--aviso-texto);
}

body.preset-peluqueria .salon-chip.error {
  border-color: var(--error-borde);
  background: var(--error-fondo);
  color: var(--error-texto);
}

/* El chip de una persona: el NOMBRE va en `--texto` (el dorado de una persona
   no llega a 4,5:1 como texto chico) y el color aparece en el punto. */
body.preset-peluqueria .salon-chip.pro {
  border-color: var(--borde);
  background: var(--superficie);
  color: var(--texto);
}

body.preset-peluqueria .salon-chip.pro::before {
  content: '';
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: var(--pro-color);
}

/* --- 9. Avisos y vacíos ------------------------------------------------ */

body.preset-peluqueria .salon-aviso {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-bottom: 16px;
  padding: 12px 16px;
  border: 1px solid var(--aviso-borde);
  border-radius: var(--radio-chico);
  background: var(--aviso-fondo);
  color: var(--aviso-texto);
}

body.preset-peluqueria .salon-aviso > div {
  flex: 1 1 14rem;
}

body.preset-peluqueria .salon-aviso.ok {
  border-color: var(--ok-borde);
  background: var(--ok-fondo);
  color: var(--ok-texto);
}

body.preset-peluqueria .salon-aviso.error {
  border-color: var(--error-borde);
  background: var(--error-fondo);
  color: var(--error-texto);
}

body.preset-peluqueria .salon-aviso.neutro {
  border-color: var(--borde);
  background: var(--superficie-2);
  color: var(--texto-suave);
}

body.preset-peluqueria .salon-aviso a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: inherit;
  font-weight: 650;
}

body.preset-peluqueria .salon-aviso .salon-cerrar {
  color: inherit;
  min-height: 44px;
}

body.preset-peluqueria .salon-vacio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  border-block: 1px solid var(--borde);
}

body.preset-peluqueria .salon-vacio p {
  flex: 1 1 13rem;
  margin: 0;
}

/* --- 10. Período y filtros de lista ------------------------------------ */

body.preset-peluqueria .salon-periodo {
  margin-bottom: 12px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  background: var(--superficie);
}

body.preset-peluqueria .salon-periodo > summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 12px 16px;
  cursor: pointer;
  font-weight: 600;
}

body.preset-peluqueria .salon-periodo > summary:hover {
  background: var(--superficie-2);
}

/* Los cuatro atajos y "Otras fechas" en UNA fila: el par de fechas plegado no
   tiene por qué ocupar su propio renglón y empujar la tabla 56 px más abajo.
   Al abrirlo pasa a la línea completa, que es cuando sí necesita el ancho. */
body.preset-peluqueria .salon-periodo-contenido {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px 12px;
  padding: 0 16px 12px;
}

body.preset-peluqueria .salon-periodo-contenido > .salon-fila {
  flex: 0 1 auto;
}

body.preset-peluqueria .salon-periodo .periodo-caja[open] {
  flex-basis: 100%;
}

/* El período elegido: fondo miel suave y subrayado. No ocupa el color sólido
   del primario, que en esta pantalla es "Nueva venta". */
body.preset-peluqueria .salon-periodo .seleccionado {
  border-color: var(--acento);
  background: var(--acento-suave);
  box-shadow: inset 0 -2px var(--acento);
  color: var(--acento);
}

body.preset-peluqueria .salon-periodo .periodo-caja > summary {
  min-height: 44px;
  border-radius: var(--radio-chico);
}

body.preset-peluqueria .salon-periodo-rango {
  display: grid;
  gap: 12px;
  margin-top: 8px;
}

body.preset-peluqueria .salon-filtros {
  display: grid;
  gap: 12px;
  align-items: end;
  margin: 12px 0;
}

body.preset-peluqueria .salon-filtros .campo {
  margin: 0;
}

body.preset-peluqueria .salon-filtros-avanzados {
  grid-column: 1 / -1;
}

body.preset-peluqueria .salon-filtros-campos {
  display: grid;
  gap: 12px;
  padding: 12px 0;
}

/* --- 11. Tablas -------------------------------------------------------- */

body.preset-peluqueria .salon-tabla {
  width: 100%;
  margin-bottom: 8px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  border-collapse: separate;
  border-spacing: 0;
  background: var(--superficie);
  font-size: 16px;
  line-height: 1.5;
}

body.preset-peluqueria .salon-tabla caption {
  padding-bottom: 12px;
  font-weight: 650;
  text-align: left;
}

body.preset-peluqueria .salon-tabla th {
  padding: 12px;
  background: var(--superficie-2);
  color: var(--texto-suave);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.5;
  text-align: left;
}

body.preset-peluqueria .salon-tabla td {
  padding: 8px 12px;
  border-top: 1px solid var(--borde);
  overflow-wrap: break-word;
  vertical-align: top;
}

body.preset-peluqueria .salon-tabla .numero {
  font-family: var(--fuente-cifra);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

body.preset-peluqueria .salon-tabla tbody tr:hover {
  background: var(--fondo);
}

/* `.texto-detalle` = EL SEGUNDO RENGLÓN DE UN DATO (el cliente abajo del número
   de venta, la nota abajo del concepto del movimiento).

   Vivía SOLO bajo `.salon-tabla`, así que un panel o una lista de definiciones
   que lo usara salía con el cuerpo y el color del texto normal — se leía como
   un dato más, del mismo peso (pedido del agente de Liquidación por persona,
   P8). Ahora el COLOR y el CUERPO valen en cualquier lado.

   El `display: block` —el que arma el renglón aparte— sigue ACOTADO a los dos
   lugares donde el segundo renglón ES la forma del dato: la celda de una tabla
   y la `dd` de un desglose. No es global a propósito: `fechaCorta()` mete un
   `.texto-detalle` con la hora ADENTRO del `<time>`, y ese `<time>` aparece en
   medio de una oración ("Turno #3 · 13/09/2026 19:32 · Corte"); un bloque ahí
   partiría el renglón al medio. Afuera de esos dos contextos el bloque lo pone
   el elemento (un `<p class="texto-detalle">` ya es bloque). */
body.preset-peluqueria .texto-detalle {
  color: var(--texto-suave);
  font-size: 14px;
}

body.preset-peluqueria .salon-tabla .texto-detalle,
body.preset-peluqueria .salon-desglose .texto-detalle {
  display: block;
}

/* La fecha de `fechaCorta()`: el día arriba y la hora debajo, sin cortar el
   "13/09/26" al medio.

   ⚠️ LA REGLA VA POR ELEMENTO, no por clase (bug del lote G que encontró el
   agente de P11): `celda({ tipo: 'fecha' })` le pone la MISMA clase al `<td>`,
   y un `display: inline-block` ahí saca la celda de la fila —en escritorio
   rompe la tabla y en el teléfono se pierde el `data-etiqueta`, porque la
   celda deja de ser la grilla de dos columnas de la ficha—. `.fecha` la emiten
   `fechaCorta()` (un `<time>`, o un `<span>` si el día no es un ISO) y
   `productos.mjs` (un `<span>`): los dos elementos entran, el `<td>` no. */
body.preset-peluqueria .salon-tabla :where(time, span).fecha {
  display: inline-block;
  white-space: nowrap;
}

/* La celda de la columna de fecha sí conserva el `nowrap` de la regla vieja:
   una hora suelta ("19:32", la columna de Caja) no se parte en dos. */
body.preset-peluqueria .salon-tabla td.fecha {
  white-space: nowrap;
}

/* ⚠️ `.acciones` es una clase de BASE (`display: flex; margin-top: 1.1rem`):
   adentro de una tabla eso saca la celda del flujo y le suma 18 px de alto a
   CADA fila. Acá vuelve a ser una celda y el helper `celda({ tipo:'acciones' })`
   pone adentro un `.salon-fila` para que los botones queden en una línea. */
body.preset-peluqueria .salon-tabla td.acciones {
  display: table-cell;
  /* 13rem = 208 px: los DOS desplegables más anchos de la app en UNA línea con
     su gap y el padding de la celda ("Rol y vínculo" + "Más acciones", la fila
     de /usuarios). Con 11rem entraban "Ver" + "Más acciones" pero no ese par:
     el segundo se iba a un renglón propio y la fila crecía a 113 px (pedido del
     agente de Usuarios, P17). Es un mínimo, no un ancho: una columna de
     acciones más corta sigue midiendo lo que mide su contenido. */
  min-width: 13rem;
  margin: 0;
}

body.preset-peluqueria .salon-tabla .salon-mas-acciones > summary {
  padding: 0;
}

body.preset-peluqueria .salon-tabla .celda-principal > a,
body.preset-peluqueria .salon-tabla .celda-principal a {
  font-weight: 650;
}

body.preset-peluqueria .salon-tabla .fila-aviso {
  background: var(--aviso-fondo);
}

body.preset-peluqueria .salon-paginador {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 16px 0;
  font-size: 14px;
}

body.preset-peluqueria .salon-desglose {
  display: grid;
  gap: 4px;
  padding: 8px 0;
  font-size: 14px;
}

body.preset-peluqueria .salon-desglose dt {
  color: var(--texto-suave);
}

/* UN VALOR LARGO SIN ESPACIOS no puede estirar la ficha: un mail de 40
   caracteres o un usuario de Instagram sacaban el scroll horizontal del
   documento a 390 px (pedido del agente de la Ficha de cliente, P11). `dd` es
   donde caen esos valores; `.salon-largo` es lo mismo a pedido, para un dato
   largo que esté fuera de un desglose. `anywhere` y no `break-word` porque
   además baja el ancho MÍNIMO del elemento: adentro de una grilla,
   `break-word` corta el texto pero la columna ya se estiró. */
body.preset-peluqueria .salon-desglose dd,
body.preset-peluqueria .salon-largo {
  overflow-wrap: anywhere;
}

/* UN CÓDIGO EN MEDIO DE UNA ORACIÓN (los `ejemplos` de los manuales:
   `GET /api/agente/ventas?desde&hasta`). Es lo mismo que `.credencial` —
   monoespaciado, envuelve donde sea, se selecciona entero con un toque— salvo
   el margen LATERAL de 0,4rem, que en una credencial suelta separa el código
   del texto y acá, con tres o cuatro por párrafo, descuadra los renglones y
   suma un espacio de más antes de cada coma. */
body.preset-peluqueria .salon-codigo {
  display: inline-block;
  max-width: 100%;
  margin: 0;
  padding: 0.15rem 0.45rem;
  border: 1px solid var(--borde);
  border-radius: 6px;
  background: var(--superficie-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.95rem;
  overflow-wrap: anywhere;
  user-select: all;
}

/* EL ÍNDICE de una pantalla larga (`indice()` / `indiceAnclas()` de lib/ui.mjs):
   la fila de enlaces del sistema, con un poco más de aire entre renglones
   cuando envuelve (son ocho bloques en Ajustes) y pegada a su rótulo. */
body.preset-peluqueria .salon-indice {
  row-gap: 8px;
}

body.preset-peluqueria .apagado + .salon-indice {
  margin-top: 4px;
}

body.preset-peluqueria .salon-indice-plegable > .salon-indice {
  padding-bottom: 8px;
}

body.preset-peluqueria .salon-desglose dd {
  margin: 0 0 8px;
}

/* --- 12. La barra de secciones del salón -------------------------------- */

/* ⚠️ NINGÚN ancestro del panel desplegable puede tener overflow: era lo que
   recortaba el menú (hallazgo 1). `overflow: visible` acá es la corrección,
   no una preferencia. */
body.preset-peluqueria .salon-nav {
  position: relative;
  z-index: var(--z-barra);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  overflow: visible;
}

body.preset-peluqueria .salon-nav-desktop {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  overflow: visible;
}

body.preset-peluqueria .salon-nav :where(a, summary) {
  min-height: 44px;
}

body.preset-peluqueria .salon-nav-desktop > a,
body.preset-peluqueria .salon-nav-grupo > summary {
  display: inline-flex;
  align-items: center;
  padding: 10px 12px;
  border-radius: var(--radio-chico);
  color: var(--texto-suave);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

body.preset-peluqueria .salon-nav-grupo {
  position: relative;
}

body.preset-peluqueria .salon-nav-grupo > summary {
  gap: 8px;
  list-style: none;
  cursor: pointer;
}

body.preset-peluqueria .salon-nav-grupo > summary::-webkit-details-marker {
  display: none;
}

body.preset-peluqueria .salon-nav-grupo > summary::after {
  content: '⌄';
}

/* La sección actual se marca con COLOR, no con el desplegable abierto. */
body.preset-peluqueria .salon-nav [aria-current='page'],
body.preset-peluqueria .salon-nav .grupo-actual > summary,
body.preset-peluqueria .salon-nav-movil [aria-current='page'],
body.preset-peluqueria .salon-nav-movil .grupo-actual > summary {
  background: var(--acento-suave);
  color: var(--acento);
}

body.preset-peluqueria .salon-nav :where(a, summary):hover {
  background: var(--superficie-2);
  text-decoration: none;
}

body.preset-peluqueria .salon-nav-panel {
  position: absolute;
  z-index: var(--z-menu);
  inset-block-start: calc(100% + 8px);
  inset-inline-end: 0;
  display: flex;
  flex-direction: column;
  min-width: 15rem;
  padding: 8px;
  border: 1px solid var(--control-borde);
  border-radius: var(--radio);
  background: var(--superficie);
  box-shadow: var(--sombra-flotante);
}

body.preset-peluqueria .salon-nav-panel a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: var(--radio-interior);
  color: var(--texto);
  font-size: 14px;
  text-decoration: none;
}

body.preset-peluqueria .salon-nav-panel .nav-salir {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: var(--radio-interior);
  color: var(--texto);
  font-size: 14px;
  text-align: left;
}

/* El menú del teléfono: en el FLUJO, sin overlay y sin trampa de foco. */
body.preset-peluqueria .salon-nav-movil {
  margin-left: auto;
}

body.preset-peluqueria .salon-nav-movil > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--control-borde);
  border-radius: var(--radio-chico);
  cursor: pointer;
  font-size: 14px;
  font-weight: 650;
  list-style: none;
}

body.preset-peluqueria .salon-nav-movil > summary::-webkit-details-marker {
  display: none;
}

body.preset-peluqueria .salon-nav-movil[open] {
  flex-basis: 100%;
}

body.preset-peluqueria .salon-nav-movil nav {
  display: grid;
  padding-top: 12px;
}

body.preset-peluqueria .salon-nav-movil nav > a,
body.preset-peluqueria .salon-nav-movil summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: var(--radio-chico);
  color: var(--texto);
  cursor: pointer;
  text-decoration: none;
}

body.preset-peluqueria .salon-nav-movil details > a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 12px 10px 28px;
  color: var(--texto);
  text-decoration: none;
}

body.preset-peluqueria .salon-nav-movil .nav-salir {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px 10px 28px;
  color: var(--texto);
  text-align: left;
}

body.preset-peluqueria .salon-nav-movil summary::after {
  content: ' ⌄';
}

/* --- 13. Agenda --------------------------------------------------------- */

/* La región tiene su PROPIO scroll: el documento no se desplaza de costado.
   El eje y los encabezados se quedan fijos adentro. */
body.preset-peluqueria .ag-calendario {
  max-height: min(34rem, 72vh);
  border-color: var(--control-borde);
}

body.preset-peluqueria .ag-eje-horario {
  z-index: 11;
}

body.preset-peluqueria .ag-eje-cabecera,
body.preset-peluqueria .ag-profesional-cabecera {
  position: sticky;
  top: 0;
  z-index: 12;
  background: var(--superficie-2);
}

body.preset-peluqueria .ag-eje-cabecera {
  z-index: 13;
}

body.preset-peluqueria .ag-eje-cabecera,
body.preset-peluqueria .ag-hora {
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
}

/* La franja de 3 px con el color de la persona es una CODIFICACIÓN, no un
   adorno: por eso el estado se escribe además en el bloque. */
/* LA FILA DE 15 MINUTOS ES UN BLANCO TÁCTIL (pedido del agente de Agenda, P2).
   En BASE la fila mide 2,25 rem (36 px) y el bloque, con sus 2 px de margen
   arriba y abajo, quedaba en 32: abajo de los 44 px que necesita un dedo. Acá
   la fila pasa a 2,75 rem (44 px) y el turno usa la fila ENTERA a lo alto.

   Las dos alturas van JUNTAS o el eje de horas se despega de las pistas: la
   columna de la izquierda es un flex de `.ag-hora` y las pistas son un grid de
   filas fijas; si una sola cambia, las 9:00 dejan de estar a la altura del
   turno de las 9:00. Las rayas del fondo son la tercera pata (una por fila y
   una más fuerte por hora = 4 filas), así que también se recalculan: 43/44 px
   la fina, 175/176 px la de la hora. */
body.preset-peluqueria .ag-hora {
  height: 2.75rem;
  flex: 0 0 2.75rem;
}

body.preset-peluqueria .ag-pista {
  grid-auto-rows: 2.75rem;
}

body.preset-peluqueria .ag-profesional-cuerpo {
  background-image:
    repeating-linear-gradient(to bottom, transparent 0, transparent 43px, color-mix(in srgb, var(--borde) 62%, transparent) 43px, color-mix(in srgb, var(--borde) 62%, transparent) 44px),
    repeating-linear-gradient(to bottom, transparent 0, transparent 175px, color-mix(in srgb, var(--borde) 88%, transparent) 175px, color-mix(in srgb, var(--borde) 88%, transparent) 176px);
}

body.preset-peluqueria .ag-profesional-no-disponible .ag-profesional-cuerpo {
  background-image:
    repeating-linear-gradient(135deg, transparent 0, transparent 9px, color-mix(in srgb, var(--error-borde) 18%, transparent) 9px, color-mix(in srgb, var(--error-borde) 18%, transparent) 10px),
    repeating-linear-gradient(to bottom, transparent 0, transparent 43px, color-mix(in srgb, var(--borde) 62%, transparent) 43px, color-mix(in srgb, var(--borde) 62%, transparent) 44px);
}

body.preset-peluqueria .ag-turno {
  /* Sin margen vertical: los 2 px de arriba y abajo son justo los que dejaban
     el turno de 15 minutos abajo del blanco táctil. La fila del fondo y el
     borde propio del bloque ya lo separan del de al lado. */
  margin: 0 3px;
  font-size: 13px;
}

body.preset-peluqueria .ag-turno-cancelado .ag-turno-linea span {
  text-decoration: line-through;
}

body.preset-peluqueria .salon-agenda-ayuda {
  margin: 0 0 8px;
  color: var(--texto-suave);
  font-size: 14px;
}

body.preset-peluqueria .salon-agenda-referencias {
  margin-bottom: 12px;
}

/* La grilla nueva (la de la propuesta): una columna por persona, eje sticky a
   la izquierda y cabeceras sticky arriba. La cantidad de columnas entra por
   clase (`ag-cols-7`), nunca por un `style=` inline. */
body.preset-peluqueria .salon-agenda-region {
  max-height: min(34rem, 72vh);
  overflow: auto;
  border: 1px solid var(--control-borde);
  border-radius: var(--radio-chico);
  background: var(--superficie);
  isolation: isolate;
  overscroll-behavior-x: contain;
}

body.preset-peluqueria .salon-agenda-grid {
  position: relative;
  display: grid;
  grid-template-columns: 3rem repeat(7, minmax(10rem, 1fr));
  grid-template-rows: 60px repeat(14, 48px);
  grid-auto-rows: 48px;
}

body.preset-peluqueria .salon-agenda-grid.ag-cols-1 {
  grid-template-columns: 3rem repeat(1, minmax(10rem, 1fr));
}

body.preset-peluqueria .salon-agenda-grid.ag-cols-2 {
  grid-template-columns: 3rem repeat(2, minmax(10rem, 1fr));
}

body.preset-peluqueria .salon-agenda-grid.ag-cols-3 {
  grid-template-columns: 3rem repeat(3, minmax(10rem, 1fr));
}

body.preset-peluqueria .salon-agenda-grid.ag-cols-4 {
  grid-template-columns: 3rem repeat(4, minmax(10rem, 1fr));
}

body.preset-peluqueria .salon-agenda-grid.ag-cols-5 {
  grid-template-columns: 3rem repeat(5, minmax(10rem, 1fr));
}

body.preset-peluqueria .salon-agenda-grid.ag-cols-6 {
  grid-template-columns: 3rem repeat(6, minmax(10rem, 1fr));
}

body.preset-peluqueria .salon-agenda-grid.ag-cols-8 {
  grid-template-columns: 3rem repeat(8, minmax(10rem, 1fr));
}

body.preset-peluqueria .salon-agenda-grid.ag-cols-9 {
  grid-template-columns: 3rem repeat(9, minmax(10rem, 1fr));
}

body.preset-peluqueria .salon-agenda-grid.ag-cols-10 {
  grid-template-columns: 3rem repeat(10, minmax(10rem, 1fr));
}

body.preset-peluqueria .salon-ag-cab {
  grid-row: 1;
  position: sticky;
  top: 0;
  z-index: 12;
  padding: 8px;
  border-right: 1px solid var(--borde);
  border-bottom: 1px solid var(--borde);
  background: var(--superficie-2);
  font-size: 14px;
}

body.preset-peluqueria .salon-ag-cab small {
  display: block;
  margin-top: 4px;
  color: var(--texto-suave);
  font-size: 12px;
}

body.preset-peluqueria .salon-ag-hora {
  grid-column: 1;
  position: sticky;
  left: 0;
  z-index: 11;
  padding: 4px;
  border-bottom: 1px solid var(--borde);
  background: var(--superficie);
  font-size: 12px;
  text-align: center;
}

body.preset-peluqueria .salon-ag-esquina {
  grid-column: 1;
  left: 0;
  z-index: 13;
  display: grid;
  padding: 4px;
  place-content: center;
  font-size: 12px;
}

body.preset-peluqueria .salon-ag-fondo {
  grid-row: 2 / 16;
  border-right: 1px solid var(--borde);
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 47px,
    var(--borde) 47px,
    var(--borde) 48px
  );
}

/* Una franja en la que esa persona no atiende: trama discreta, no un color
   que se confunda con un estado. */
body.preset-peluqueria .salon-ag-fondo.cerrado {
  background-image: repeating-linear-gradient(
      135deg,
      transparent 0,
      transparent 5px,
      color-mix(in srgb, var(--borde) 55%, transparent) 5px,
      color-mix(in srgb, var(--borde) 55%, transparent) 6px
    ),
    repeating-linear-gradient(to bottom, transparent 0, transparent 47px, var(--borde) 47px, var(--borde) 48px);
}

body.preset-peluqueria .salon-ag-turno {
  z-index: 2;
  display: flex;
  min-height: 44px;
  flex-direction: column;
  align-items: flex-start;
  margin: 2px 3px;
  padding: 6px 8px;
  border: 1px solid var(--aviso-borde);
  border-left: 3px solid var(--pro-color, var(--texto-suave));
  border-radius: var(--radio-interior);
  background: var(--aviso-fondo);
  color: var(--texto);
  font-size: 14px;
  line-height: 1.3;
  overflow: hidden;
  text-decoration: none;
}

body.preset-peluqueria .salon-ag-turno:visited {
  color: var(--texto);
}

body.preset-peluqueria .salon-ag-turno:hover {
  box-shadow: inset 0 0 0 1px var(--texto-suave);
  color: var(--texto);
  text-decoration: none;
}

body.preset-peluqueria .salon-ag-turno.ok {
  border-top-color: var(--ok-borde);
  border-right-color: var(--ok-borde);
  border-bottom-color: var(--ok-borde);
  background: var(--ok-fondo);
}

body.preset-peluqueria .salon-ag-turno.cancelado {
  border-top-color: var(--error-borde);
  border-right-color: var(--error-borde);
  border-bottom-color: var(--error-borde);
  background: var(--error-fondo);
}

/* Un turno cancelado se TACHA en el nombre, pero el texto se sigue leyendo: un
   importe o una hora tachada e ilegible no sirve para reclamar nada. */
body.preset-peluqueria .salon-ag-turno.cancelado strong {
  text-decoration: line-through;
}

body.preset-peluqueria .salon-ag-turno small {
  display: block;
  margin-top: 4px;
  font-size: 12px;
}

body.preset-peluqueria .ag-col-1 { grid-column: 1; }
body.preset-peluqueria .ag-col-2 { grid-column: 2; }
body.preset-peluqueria .ag-col-3 { grid-column: 3; }
body.preset-peluqueria .ag-col-4 { grid-column: 4; }
body.preset-peluqueria .ag-col-5 { grid-column: 5; }
body.preset-peluqueria .ag-col-6 { grid-column: 6; }
body.preset-peluqueria .ag-col-7 { grid-column: 7; }
body.preset-peluqueria .ag-col-8 { grid-column: 8; }
body.preset-peluqueria .ag-col-9 { grid-column: 9; }
body.preset-peluqueria .ag-col-10 { grid-column: 10; }
body.preset-peluqueria .ag-col-11 { grid-column: 11; }

body.preset-peluqueria .ag-row-1 { grid-row-start: 1; }
body.preset-peluqueria .ag-row-2 { grid-row-start: 2; }
body.preset-peluqueria .ag-row-3 { grid-row-start: 3; }
body.preset-peluqueria .ag-row-4 { grid-row-start: 4; }
body.preset-peluqueria .ag-row-5 { grid-row-start: 5; }
body.preset-peluqueria .ag-row-6 { grid-row-start: 6; }
body.preset-peluqueria .ag-row-7 { grid-row-start: 7; }
body.preset-peluqueria .ag-row-8 { grid-row-start: 8; }
body.preset-peluqueria .ag-row-9 { grid-row-start: 9; }
body.preset-peluqueria .ag-row-10 { grid-row-start: 10; }
body.preset-peluqueria .ag-row-11 { grid-row-start: 11; }
body.preset-peluqueria .ag-row-12 { grid-row-start: 12; }
body.preset-peluqueria .ag-row-13 { grid-row-start: 13; }
body.preset-peluqueria .ag-row-14 { grid-row-start: 14; }
body.preset-peluqueria .ag-row-15 { grid-row-start: 15; }

body.preset-peluqueria .ag-dura-1 { grid-row-end: span 1; }
body.preset-peluqueria .ag-dura-2 { grid-row-end: span 2; }
body.preset-peluqueria .ag-dura-3 { grid-row-end: span 3; }
body.preset-peluqueria .ag-dura-4 { grid-row-end: span 4; }
body.preset-peluqueria .ag-dura-5 { grid-row-end: span 5; }
body.preset-peluqueria .ag-dura-6 { grid-row-end: span 6; }
body.preset-peluqueria .ag-dura-8 { grid-row-end: span 8; }

/* --- 14. Resumen de cobro, confirmación y comprobante ------------------- */

body.preset-peluqueria .salon-resumen {
  margin: 16px 0;
  padding: 16px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  background: var(--superficie-2);
}

body.preset-peluqueria .salon-resumen dl {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 16px;
  margin: 0;
}

body.preset-peluqueria .salon-resumen dd {
  margin: 0;
  font-family: var(--fuente-cifra);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* El total orientativo no se muestra a medias: si algo no se pudo leer, se
   retira y queda "Recalcular total", que lo calcula el servidor. */
body.preset-peluqueria .salon-resumen-dudoso dl {
  opacity: 0.45;
}

body.preset-peluqueria .salon-confirmacion {
  max-width: 40rem;
}

body.preset-peluqueria .salon-recibo {
  max-width: 46rem;
  margin: 0 auto;
  padding: 24px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-interior);
  background: #ffffff;
  color: #211d18;
}

body.preset-peluqueria .salon-recibo .salon-tabla {
  border-color: #e4e0d8;
  background: #ffffff;
  font-size: 14px;
}

/* LA HOJA NO USA TOKENS DEL TEMA, NI PARA EL TEXTO SECUNDARIO (pedido del
   agente del Comprobante, P6).

   `.salon-recibo` fija su fondo y su texto con hexadecimales porque el papel es
   blanco siempre, pero adentro quedaban cosas atadas al tema: el `th` de la
   tabla (`--superficie-2` / `--texto-suave`), `.texto-detalle`, `.apagado` y
   —en el teléfono, donde cada fila se vuelve ficha— el rótulo de columna que el
   CSS dibuja con `td::before`. Con la app en oscuro, `--texto-suave` es
   `#b7aea1` y `--superficie-2` un marrón oscuro: sobre el blanco del recibo el
   encabezado de la tabla salía negro sobre negro, el texto chico casi no se
   veía y los rótulos de la ficha quedaban en 2,19:1 — en pantalla y en la
   impresión. Los valores son los MISMOS del tema claro, escritos a mano:
   #4a443c sobre #ffffff da 9,6:1 y sobre el #f3f1ec del `th`, 8,5:1.

   ⚠️ ESTE BLOQUE NO SE BORRA cuando se arregla un token del tema (revisión de
   integración de la ola 4, hallazgo 1). No es un parche que tape el `th` roto
   en oscuro: es la decisión de que el comprobante es UNA HOJA, blanco y negro,
   igual en los dos temas y en la impresora. Sin él, con `--superficie-2` ya
   bien puesto en oscuro, el `th` del recibo saldría igual —7,19:1, legible— pero
   como una banda marrón oscura sobre el papel blanco. */
body.preset-peluqueria .salon-recibo .salon-tabla th {
  background: #f3f1ec;
  color: #4a443c;
}

body.preset-peluqueria .salon-recibo .texto-detalle,
body.preset-peluqueria .salon-recibo .apagado,
body.preset-peluqueria .salon-recibo .salon-tabla td::before {
  color: #4a443c;
}

/* Y el `:hover` de una fila, que en toda tabla pinta `--fondo`: en oscuro eso
   es casi negro y sobre el papel se lee como un tachón encima del ítem que se
   está mirando. Acá es el mismo gris de papel del `th`. */
body.preset-peluqueria .salon-recibo .salon-tabla tbody tr:hover {
  background: #f8f7f4;
}

body.preset-peluqueria .salon-recibo-total {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 2px solid #211d18;
  font-size: 20px;
}

/* LA MARCA DE ANULADA EN LA HOJA (`recibo-anulada`, pedido del agente del
   Comprobante, P6).

   Es lo primero que hay que ver de un comprobante anulado y tiene que verse en
   BLANCO Y NEGRO: una impresora en escala de grises convierte cualquier rojo en
   un gris que no dice nada. Así que la señal es tipográfica y no de color: la
   palabra espaciada entre dos reglas negras (el `border-top` lo pone
   `.salon-recibo-total`, que es la clase con la que se combina) y el motivo en
   cuerpo de texto — a los 20 px de la fila se leía como parte del título, y el
   motivo es un dato, no un rótulo. */
body.preset-peluqueria .recibo-anulada {
  align-items: baseline;
  padding-bottom: 12px;
  border-bottom: 2px solid #211d18;
}

body.preset-peluqueria .recibo-anulada > strong {
  letter-spacing: 0.12em;
}

body.preset-peluqueria .recibo-anulada > span {
  font-size: 14px;
}

/* --- 14 bis. Inicio del salón y tira de medios de pago ------------------ */

/* Los turnos de hoy, una mini-columna por persona (ficha 026, lote 6). No es
   la grilla horaria de /agenda (esa no colapsa y se desliza de costado): acá
   son listas cortas, una por quien atiende, que en el teléfono se apilan solas.

   VIVE BAJO EL PRESET (review del lote G, ronda 2): el markup lo emite
   `tableroSalon()` de `modules/inicio.mjs`, que corre SOLO en el salón, pero
   las tres reglas estaban sueltas en la hoja y le entraban a cualquier app
   BASE que un día usara esos nombres de clase. El efecto en el salón es el
   mismo: nada más pinta `.inicio-columna*`. */
body.preset-peluqueria .inicio-columnas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.4rem 1.4rem;
}

body.preset-peluqueria .inicio-columna {
  min-width: 0;
}

body.preset-peluqueria .inicio-columna-titulo {
  margin: 0.6rem 0 0.2rem;
}

/* LA TIRA DE MEDIOS DE PAGO (`tiraMedios()` de lib/ui.mjs) — pedido del agente
   de Ventas facturadas (P4): en 390 px los cuatro chips envolvían a ~4
   renglones y empujaban la lista de ventas abajo del pliegue. Arriba de 720 px
   entran en una línea y verlos es gratis; abajo van plegados detrás de "Ver por
   medio", que es un `details` de verdad (funciona sin JS).

   Las DOS copias se emiten siempre y el CSS elige cuál se ve — el mismo patrón
   que la barra de navegación (menú de escritorio + menú del teléfono). La que
   sobra va con `display: none`, así que tampoco la lee un lector de pantalla.
   No se hace con un solo `details` "abierto por CSS" porque Chromium esconde su
   contenido desde el shadow DOM y ningún `display:` del autor lo revierte. */
body.preset-peluqueria .salon-medios-chips {
  display: none;
}

body.preset-peluqueria .salon-medios-plegable > summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--acento);
  cursor: pointer;
  font-weight: 600;
}

body.preset-peluqueria .salon-medios-plegable[open] > .salon-fila {
  padding-bottom: 8px;
}

/* --- 14 ter. Lo público del salón: los dos precios de un servicio -------- */

/* EL PAR DE PRECIOS de un servicio (efectivo y transferencia u otro), tal como
   lo emiten la carta de la portada y el turnero. Es una fila que ENVUELVE: con
   el ancho completo los dos importes entran en un renglón, y cuando no entran
   cada uno se lleva el suyo COMPLETO —nunca un "$ 105.000,00" solo al principio
   del renglón siguiente, sin la lista que lo nombra (el espacio entre la lista
   y el importe es duro en el HTML)—. */
body.preset-peluqueria .salon-precio-par {
  display: flex;
  flex-wrap: wrap;
  gap: 0 14px;
  color: var(--texto-suave);
  font-size: 0.85rem;
  line-height: 1.35;
}

/* LA TARJETA DEL TURNERO, A ANCHO COMPLETO PARA EL PAR (pedido del agente de
   Público: reservar y consultar turno, P20).

   La tarjeta era un flex de tres piezas —el tilde, la miniatura y la columna de
   texto— y los dos precios caían en esa columna, a la que a 390 px le quedan
   ~215 px: un renglón por precio, cuatro renglones de texto contra 48 px de
   miniatura, y la tarjeta medía 128 px ("Corte + tratamiento C.M"). Con la
   tarjeta en GRILLA, el par se lleva una fila propia de ancho completo: los dos
   importes entran en un renglón y la tarjeta baja a ~106 px. El radio sigue
   siendo `position: absolute`, así que no ocupa celda. */
body.preset-peluqueria .pr-grupo .pr-servicio {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  row-gap: 4px;
}

body.preset-peluqueria .pr-grupo .pr-servicio > .salon-precio-par {
  grid-column: 1 / -1;
}

/* --- 15. Anchos ---------------------------------------------------------- */

@media (min-width: 720px) {
  body.preset-peluqueria .salon-dos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* De 720 px para arriba la tira entra en una línea: chips a la vista y el
     plegable afuera (ver "14 bis"). */
  body.preset-peluqueria .salon-medios-chips {
    display: flex;
  }

  body.preset-peluqueria .salon-medios-plegable {
    display: none;
  }

  body.preset-peluqueria .salon-filtros {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  body.preset-peluqueria .salon-filtros-campos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.preset-peluqueria .salon-periodo-rango {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Acá la celda del KPI ya mide ~350 px: la cifra destacada puede subir el
     escalón sin cortarse (ver el comentario del bloque base). */
  body.preset-peluqueria .salon-kpi-destacado .valor {
    font-size: 25px;
  }
}

@media (min-width: 1024px) {
  /* El contenedor de trabajo del salón: 1.216 px. La tabla de ventas entra
     entera en una notebook de 13" sin desplazarse de costado. */
  body.preset-peluqueria .contenedor {
    max-width: 76rem;
  }

  body.preset-peluqueria .contenedor-formulario {
    max-width: 54rem;
  }

  body.preset-peluqueria .contenedor-angosto {
    max-width: 38rem;
  }

  body.preset-peluqueria .contenedor-lectura {
    max-width: min(70ch, 100%);
  }
}

@media (min-width: 1120px) {
  body.preset-peluqueria .salon-nav-desktop {
    display: flex;
  }

  body.preset-peluqueria .salon-nav-movil {
    display: none;
  }

  /* En escritorio la barra vuelve a acompañar el scroll: ahí no tapa nada
     porque el menú abre en un panel flotante, no en el flujo. */
  body.preset-peluqueria .barra {
    position: sticky;
    top: 0;
  }

  body.preset-peluqueria .salon-kpis {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  body.preset-peluqueria .salon-kpi {
    border-right: 1px solid var(--borde);
    border-bottom: 0;
  }

  body.preset-peluqueria .salon-kpi:last-child {
    border-right: 0;
  }

  body.preset-peluqueria .salon-kpi .valor {
    font-size: 25px;
  }

  /* De 1120 px para arriba TODOS los valores son de 25 px, así que el
     destacado sube otro escalón para seguir siendo el primero que se mira. */
  body.preset-peluqueria .salon-kpi-destacado .valor {
    font-size: 30px;
  }

  body.preset-peluqueria .dato-valor {
    font-size: 25px;
  }
}

/* El teléfono: cada fila de una tabla se vuelve una FICHA. Total y estado
   primero (es lo que se busca), después cliente y detalle, y al final las
   acciones. El nombre de la columna sale de `data-etiqueta`. */
@media (max-width: 719px) {
  body.preset-peluqueria .salon-tabla,
  body.preset-peluqueria .salon-tabla tbody {
    display: block;
  }

  body.preset-peluqueria .salon-tabla thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  body.preset-peluqueria .salon-tabla tr {
    display: flex;
    flex-direction: column;
    padding: 12px;
    border-top: 1px solid var(--borde);
  }

  body.preset-peluqueria .salon-tabla tbody tr:first-child {
    border-top: 0;
  }

  /* `order: 1` es el escalón NEUTRO de la ficha: los datos quedan en el orden
     del DOM (empatan entre sí) y las tres celdas de arriba (-3, -2, -1) y las
     de acción (0 y 2) se acomodan alrededor. Poner el default en 1 y no en 0 es
     lo que deja lugar para que la acción principal suba SIN tener que tocar
     ninguna otra celda: sin esto empataría con los datos y el DOM la mandaría
     al final igual. El resultado visible no cambió para ninguna tabla que ya
     existía (mismo orden relativo). */
  body.preset-peluqueria .salon-tabla td {
    display: grid;
    grid-template-columns: minmax(5rem, 0.75fr) minmax(0, 1.5fr);
    gap: 12px;
    padding: 6px 0;
    border: 0;
    order: 1;
    text-align: left;
    white-space: normal;
  }

  body.preset-peluqueria .salon-tabla td::before {
    content: attr(data-etiqueta);
    color: var(--texto-suave);
    font: 500 12px/1.5 var(--fuente-display);
    text-align: left;
  }

  body.preset-peluqueria .salon-tabla td.numero {
    text-align: left;
    white-space: nowrap;
  }

  body.preset-peluqueria .salon-tabla .celda-principal {
    order: -3;
  }

  body.preset-peluqueria .salon-tabla .celda-total {
    order: -2;
    font-weight: 700;
  }

  body.preset-peluqueria .salon-tabla .celda-estado {
    order: -1;
  }

  body.preset-peluqueria .salon-tabla td.acciones {
    display: block;
    order: 2;
    padding-top: 12px;
  }

  /* LA ACCIÓN PRINCIPAL SUBE (`celda({ tipo: 'accion-principal' })`): en la
     ficha del teléfono queda arriba, pegada al nombre / total / estado, y no al
     final de seis renglones de datos que hay que pasar con el pulgar. Va
     DESPUÉS de la regla de `.acciones` a propósito: misma especificidad, gana
     la última. En escritorio es la misma celda de acciones de siempre. */
  body.preset-peluqueria .salon-tabla td.celda-accion-principal {
    order: 0;
    padding-top: 6px;
  }

  body.preset-peluqueria .salon-tabla .acciones::before {
    display: none;
  }

  /* Una cifra larga ($ 1.372.000,00) ocupa las dos columnas en vez de
     recortarse. Nunca se abrevia con "k" ni se le sacan los centavos. */
  body.preset-peluqueria .salon-kpi.salon-kpi-ancho {
    grid-column: 1 / -1;
    border-right: 0;
  }

  body.preset-peluqueria .salon-periodo .salon-boton {
    flex: 1 1 40%;
  }

  /* La acción principal, arriba y a lo ancho: es la que se toca con el pulgar. */
  body.preset-peluqueria .salon-pie-acciones .primario {
    order: -1;
    flex-basis: 100%;
  }

  body.preset-peluqueria .salon-titulo > div:first-child {
    flex-basis: 100%;
  }

  body.preset-peluqueria h1 {
    font-size: 25px;
  }
}

/* Modo de alto contraste de Windows: los bordes no pueden ser la única señal. */
@media (forced-colors: active) {
  body.preset-peluqueria :where(.salon-boton, .salon-chip, .salon-ag-turno) {
    border: 1px solid ButtonText;
  }

  body.preset-peluqueria .salon-segmentado input:checked + span {
    outline: 2px solid Highlight;
  }
}

/* --- 16. La hoja: A4, negro sobre blanco -------------------------------- */

@media print {
  /* Decisión del dueño (13/09/2026): SOLO A4. Honey no tiene impresora de
     tickets, así que no hay variante de 80 mm que mantener.

     Es una página CON NOMBRE y se la asigna únicamente el body del preset: un
     `@page` suelto no lo limita ningún selector y le cambiaba el tamaño y el
     margen de impresión a TODA app BASE (review del lote G). Un navegador que
     no soporte páginas nombradas simplemente imprime como antes — en las dos
     familias de apps. */
  @page salon {
    size: A4;
    margin: 12mm;
  }

  body.preset-peluqueria {
    page: salon;
    background: #ffffff;
    color: #211d18;
    font-size: 10pt;
  }

  /* `.alerta` ENTRA EN ESTA LISTA (pedido del agente del Comprobante, P6): el
     aviso de "estás usando la contraseña inicial" lo emite `pagina()` en TODAS
     las pantallas menos /cuenta, así que también arriba del comprobante — y se
     imprimía, en la hoja que se le da a la clienta, contando que la cuenta del
     salón todavía tiene la contraseña que vino de fábrica. Ninguna franja de
     estado ("Venta cobrada.", un error de formulario) es parte de la hoja: son
     mensajes de la sesión de trabajo, no del documento. */
  body.preset-peluqueria .barra,
  body.preset-peluqueria .pie,
  body.preset-peluqueria .salon-nav,
  body.preset-peluqueria .salon-pie-acciones,
  body.preset-peluqueria .salon-paginador,
  body.preset-peluqueria .alerta,
  body.preset-peluqueria .sin-imprimir {
    display: none !important;
  }

  body.preset-peluqueria .contenedor {
    max-width: none;
    padding: 0;
  }

  body.preset-peluqueria .salon-recibo {
    max-width: none;
    padding: 0;
    border: 0;
  }

  /* La tabla NO colapsa a fichas dentro de la hoja: se imprime como tabla,
     con el encabezado repetido en cada página y sin cortar una fila al medio. */
  body.preset-peluqueria .salon-tabla {
    display: table;
    border: 1px solid #e4e0d8;
    font-size: 10pt;
  }

  body.preset-peluqueria .salon-tabla thead {
    position: static;
    width: auto;
    height: auto;
    display: table-header-group;
    overflow: visible;
    clip-path: none;
  }

  body.preset-peluqueria .salon-tabla tbody {
    display: table-row-group;
  }

  body.preset-peluqueria .salon-tabla tr {
    display: table-row;
    break-inside: avoid;
  }

  body.preset-peluqueria .salon-tabla td {
    display: table-cell;
    border-top: 1px solid #e4e0d8;
  }

  body.preset-peluqueria .salon-tabla td::before {
    display: none;
  }

  body.preset-peluqueria .salon-recibo-total,
  body.preset-peluqueria .salon-kpis {
    break-inside: avoid;
  }

  body.preset-peluqueria .salon-agenda-region,
  body.preset-peluqueria .ag-calendario {
    max-height: none;
    overflow: visible;
  }

  body.preset-peluqueria a {
    color: inherit;
  }
}
