/* =====================================================================
   componentes.css — piezas reutilizables.
   Todo color, medida, radio, sombra y tiempo sale de tokens.css.
   ===================================================================== */

/* ─── Base ──────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--color-fondo);
  color: var(--color-texto);
  font-family: var(--fuente-texto);
  font-size: var(--texto-base);
  line-height: var(--interlineado);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p {
  margin: 0;
}

/* Barras de desplazamiento y controles del navegador del color del tema */
:root {
  color-scheme: light;
}
:root[data-tema="oscuro"],
[data-tema="publico-oscuro"] {
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  [data-tema="publico"] {
    color-scheme: dark;
  }
}

img,
svg {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

a {
  color: var(--color-acento-texto);
  text-underline-offset: var(--espacio-0);
}

:focus-visible {
  outline: var(--foco-ancho) solid var(--color-foco);
  outline-offset: var(--foco-separacion);
}

[hidden] {
  display: none !important;
}

.solo-lector {
  position: absolute;
  width: var(--borde-fino);
  height: var(--borde-fino);
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ─── Texto ─────────────────────────────────────────────────────────── */

.titulo-1,
.titulo-2,
.titulo-3 {
  font-family: var(--fuente-titulo);
  font-weight: var(--peso-titulo);
  letter-spacing: var(--letras-titulo);
  line-height: var(--interlineado-apretado);
}

.titulo-1 { font-size: var(--texto-xl); }
.titulo-2 { font-size: var(--texto-lg); }
.titulo-3 { font-size: var(--texto-md); }

/* Libreta: el filete corto bajo un título, en el color del detalle. */
.con-filete::after {
  content: "";
  display: block;
  width: var(--filete-ancho);
  height: var(--filete-alto);
  margin-top: var(--espacio-3);
  background: var(--color-detalle);
}

.texto-suave { color: var(--color-texto-suave); }
.texto-chico { font-size: var(--texto-sm); }

.sobretitulo {
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--letras-etiqueta);
  text-transform: uppercase;
  color: var(--color-texto-suave);
}

.letra-chica {
  font-size: var(--texto-xs);
  color: var(--color-texto-suave);
  line-height: var(--interlineado-medio);
}

/* Horas, precios y cifras: Figtree con números tabulares, alineadas en columna. */
.cifra {
  font-family: var(--fuente-cifras);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  letter-spacing: 0;
  white-space: nowrap;
}

/* ─── Íconos ────────────────────────────────────────────────────────── */

.icono {
  width: var(--icono-md);
  height: var(--icono-md);
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icono-trazo);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icono-sm { width: var(--icono-sm); height: var(--icono-sm); }
.icono-lg { width: var(--icono-lg); height: var(--icono-lg); }
.icono-xl { width: var(--icono-xl); height: var(--icono-xl); }

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

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-2);
  min-height: var(--alto-control);
  min-width: var(--toque-min);
  padding: 0 var(--espacio-5);
  border: var(--borde-fino) solid transparent;
  border-radius: var(--radio-control);
  background: transparent;
  font-size: var(--texto-base);
  font-weight: var(--peso-fuerte);
  line-height: var(--interlineado-apretado);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--duracion) var(--curva),
              border-color var(--duracion) var(--curva),
              color var(--duracion) var(--curva);
}

/* La acción principal: una por pantalla, en el color del negocio. */
.boton-principal {
  background: var(--color-acento);
  color: var(--color-sobre-acento);
}
.boton-principal:hover {
  background: color-mix(in srgb, var(--color-acento) 88%, var(--color-texto));
}

.boton-secundario {
  background: var(--color-tarjeta);
  border-color: var(--color-linea-control);
  color: var(--color-texto);
}
.boton-secundario:hover {
  background: var(--color-hundido);
}

.boton-texto {
  color: var(--color-texto-suave);
  padding: 0 var(--espacio-3);
}
.boton-texto:hover {
  background: var(--color-hundido);
  color: var(--color-texto);
}

/* Solo para borrar algo definitivo (lo demás se deshace). */
.boton-peligro {
  background: var(--color-tarjeta);
  border-color: var(--color-peligro);
  color: var(--color-peligro);
}
.boton-peligro:hover {
  background: var(--aviso-error-fondo);
}

.boton-grande {
  min-height: var(--alto-control-grande);
  font-size: var(--texto-md);
  padding: 0 var(--espacio-6);
}

.boton-bloque {
  width: 100%;
}

.boton-icono {
  width: var(--toque-min);
  min-width: var(--toque-min);
  min-height: var(--toque-min);
  padding: 0;
}

.boton:disabled,
.boton[aria-disabled="true"] {
  background: var(--color-hundido);
  border-color: transparent;
  color: var(--color-texto-suave);
  cursor: not-allowed;
}

.boton[aria-busy="true"] {
  cursor: progress;
  opacity: 0.7;
}

.grupo-botones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-3);
  align-items: center;
}

/* Botón flotante "Bloquear": siempre visible, pero no compite con el acento. */
.boton-flotante {
  position: fixed;
  right: var(--margen-pantalla);
  bottom: calc(var(--alto-barra-inferior) + var(--espacio-4) + env(safe-area-inset-bottom));
  z-index: var(--capa-flotante);
  min-height: var(--alto-control-grande);
  padding: 0 var(--espacio-6) 0 var(--espacio-5);
  border-radius: var(--radio-pastilla);
  background: var(--color-texto);
  color: var(--color-fondo);
  box-shadow: var(--sombra-3);
}
.boton-flotante:hover {
  background: color-mix(in srgb, var(--color-texto) 85%, var(--color-fondo));
}

@media (min-width: 768px) {
  .boton-flotante {
    bottom: var(--espacio-6);
    right: var(--espacio-6);
  }
}

/* ─── Opciones: fichas, segmentos y mosaicos de servicio ────────────── */

.fichas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
}

.fichas-deslizables {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: var(--espacio-1);
}
.fichas-deslizables::-webkit-scrollbar {
  display: none;
}

.ficha {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-2);
  min-height: var(--toque-min);
  padding: 0 var(--espacio-4);
  border: var(--borde-fino) solid var(--color-linea-control);
  border-radius: var(--radio-pastilla);
  background: var(--color-tarjeta);
  font-weight: var(--peso-medio);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--duracion) var(--curva), border-color var(--duracion) var(--curva);
}
.ficha:hover {
  background: var(--color-hundido);
}
.ficha[aria-pressed="true"],
.ficha[aria-checked="true"] {
  background: var(--color-acento);
  border-color: var(--color-acento);
  color: var(--color-sobre-acento);
}
/* Cuántos hay de cada opción ("Diego 3", etapa 6a): suave, y en la escogida
   del mismo color que su texto (sobre el acento, el suave no se lee). */
.ficha-cuenta {
  font-family: var(--fuente-cifras);
  font-variant-numeric: tabular-nums;
  color: var(--color-texto-suave);
}
.ficha[aria-pressed="true"] .ficha-cuenta {
  color: inherit;
}
.ficha:disabled {
  border-style: dashed;
  color: var(--color-texto-suave);
  text-decoration: line-through;
  cursor: not-allowed;
}

.ficha-hora {
  font-family: var(--fuente-cifras);
  font-variant-numeric: tabular-nums;
  min-width: calc(var(--toque-min) * 2);
}

.segmentado {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  gap: var(--espacio-1);
  padding: var(--espacio-1);
  border-radius: var(--radio-control);
  background: var(--color-hundido);
}
.segmento {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-2);
  min-height: var(--toque-min);
  padding: 0 var(--espacio-3);
  border: 0;
  border-radius: calc(var(--radio-control) - var(--espacio-1));
  background: transparent;
  color: var(--color-texto-suave);
  font-weight: var(--peso-fuerte);
  cursor: pointer;
  transition: background-color var(--duracion) var(--curva), color var(--duracion) var(--curva);
}
/* Un segmento también puede ser un enlace (pestañas de /admin). */
a.segmento {
  text-decoration: none;
}
.segmento[aria-pressed="true"],
.segmento[aria-checked="true"],
.segmento[aria-current="page"] {
  background: var(--color-tarjeta);
  color: var(--color-texto);
  box-shadow: var(--sombra-1), inset 0 0 0 var(--borde-grueso) var(--color-acento);
}

/* Servicio: botones grandes, no lista desplegable. */
.mosaico-servicios {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--ancho-tarjeta-servicio), 1fr));
  gap: var(--espacio-2);
}

.opcion-servicio {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--espacio-1);
  min-height: calc(var(--toque-min) * 2);
  padding: var(--espacio-3) var(--espacio-4);
  border: var(--borde-fino) solid var(--color-linea);
  border-radius: var(--radio-control);
  background: var(--color-tarjeta);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--duracion) var(--curva), background-color var(--duracion) var(--curva);
}
.opcion-servicio:hover {
  border-color: var(--color-linea-control);
}
.opcion-servicio[aria-pressed="true"] {
  border-color: var(--color-acento);
  background: var(--color-acento-tenue);
  box-shadow: inset 0 0 0 var(--borde-fino) var(--color-acento);
}
/* No cabe en el hueco elegido */
.opcion-servicio:disabled {
  border-style: dashed;
  background: var(--color-hundido);
  color: var(--color-texto-suave);
  cursor: not-allowed;
}
.opcion-servicio-nombre {
  font-weight: var(--peso-fuerte);
  line-height: var(--interlineado-medio);
}
.opcion-servicio-detalle {
  display: flex;
  gap: var(--espacio-2);
  font-size: var(--texto-sm);
  color: var(--color-texto-suave);
}
.opcion-servicio .icono-marca {
  position: absolute;
  top: var(--espacio-2);
  right: var(--espacio-2);
  color: var(--color-acento-texto);
  opacity: 0;
  transition: opacity var(--duracion) var(--curva);
}
.opcion-servicio[aria-pressed="true"] .icono-marca {
  opacity: 1;
}

/* ─── Avatares ──────────────────────────────────────────────────────── */

.avatar {
  display: inline-grid;
  place-items: center;
  width: var(--avatar-md);
  height: var(--avatar-md);
  flex: none;
  border-radius: var(--radio-pastilla);
  background: var(--color-hundido);
  color: var(--color-texto);
  font-size: var(--texto-sm);
  font-weight: var(--peso-fuerte);
  object-fit: cover;
}
.avatar-sm {
  width: var(--avatar-sm);
  height: var(--avatar-sm);
  font-size: var(--texto-xs);
}
.avatar-lg {
  width: var(--avatar-lg);
  height: var(--avatar-lg);
  font-size: var(--texto-base);
}

/* ─── Etiquetas de estado ───────────────────────────────────────────── */

.etiqueta-estado {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
  padding: var(--espacio-1) var(--espacio-3) var(--espacio-1) var(--espacio-2);
  border-radius: var(--radio-pastilla);
  font-size: var(--texto-sm);
  font-weight: var(--peso-fuerte);
  line-height: var(--interlineado-apretado);
  white-space: nowrap;
}
.etiqueta-estado::before {
  content: "";
  width: var(--punto);
  height: var(--punto);
  border-radius: var(--radio-pastilla);
  background: currentColor;
}

.etiqueta-estado.estado-apartada      { background: var(--estado-apartada-fondo);      color: var(--estado-apartada-texto); }
.etiqueta-estado.estado-por-confirmar { background: var(--estado-por-confirmar-fondo); color: var(--estado-por-confirmar-texto); }
.etiqueta-estado.estado-confirmada    { background: var(--aviso-info-fondo);           color: var(--estado-confirmada-texto); }
.etiqueta-estado.estado-atendida      { background: var(--estado-atendida-fondo);      color: var(--estado-atendida-texto); }
.etiqueta-estado.estado-no-llego      { background: var(--estado-no-llego-fondo);      color: var(--estado-no-llego-texto); }
.etiqueta-estado.estado-cancelada     { background: var(--estado-cancelada-fondo);     color: var(--estado-cancelada-texto); }
.etiqueta-estado.estado-bloqueo       { background: var(--estado-bloqueo-fondo);       color: var(--estado-bloqueo-texto); }

.etiqueta-estado.estado-apartada::before      { background: var(--estado-apartada); }
.etiqueta-estado.estado-por-confirmar::before { background: var(--estado-por-confirmar); }
.etiqueta-estado.estado-confirmada::before    { background: var(--estado-confirmada); }
.etiqueta-estado.estado-atendida::before      { background: var(--estado-atendida); }
.etiqueta-estado.estado-no-llego::before      { background: var(--estado-no-llego); }
.etiqueta-estado.estado-cancelada::before     { background: var(--estado-cancelada); }
.etiqueta-estado.estado-bloqueo::before {
  background: repeating-linear-gradient(135deg, var(--estado-bloqueo) 0 var(--borde-grueso), transparent 0 calc(var(--borde-grueso) * 2));
  box-shadow: inset 0 0 0 var(--borde-fino) var(--estado-bloqueo);
}

/* Marca pequeña (por ejemplo, "Demo", "Nuevo", "Recepción") */
.marca {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-1);
  padding: var(--espacio-0) var(--espacio-2);
  border-radius: var(--radio-pastilla);
  background: var(--color-hundido);
  color: var(--color-texto-suave);
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--letras-etiqueta);
  text-transform: uppercase;
}
/* "Por reponer" (inventario, etapa 5g) */
.marca-atencion {
  background: var(--aviso-atencion-fondo);
  color: var(--aviso-atencion);
}

/* ─── Citas ─────────────────────────────────────────────────────────── */

.cita {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--espacio-0);
  min-width: 0;
  padding: var(--espacio-2) var(--espacio-3);
  /* clip (no hidden): así la hora y el nombre se quedan pegados arriba. */
  overflow: clip;
  border: var(--borde-fino) solid var(--color-linea);
  border-radius: var(--radio-cita);
  background: var(--cita-fondo);
  color: var(--color-texto);
  font-family: inherit;
  font-size: var(--texto-sm);
  line-height: var(--interlineado-medio);
  text-align: left;
  cursor: pointer;
  transition: box-shadow var(--duracion) var(--curva), transform var(--duracion) var(--curva);
}
button.cita,
button.bloqueo {
  width: 100%;
  align-items: stretch;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.cita:hover {
  box-shadow: var(--sombra-2);
}

/* Etapa 6n: en una cita larga, la hora y el nombre se quedan a la vista
   debajo de los nombres de las columnas al deslizar la agenda. */
.cita-fija {
  position: sticky;
  top: var(--alto-cabeza-rejilla);
  display: flex;
  flex-direction: column;
  gap: var(--espacio-0);
  min-width: 0;
  background: inherit;
}

.cita-encabezado {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 var(--espacio-2);
  min-width: 0;
}
.cita-hora {
  font-family: var(--fuente-cifras);
  font-variant-numeric: tabular-nums;
  font-size: var(--texto-xs);
  color: var(--color-texto-suave);
  white-space: nowrap;
}
/* El estado, en pastilla redonda de su color (Libreta). */
.cita-estado {
  padding: 0 var(--espacio-2);
  border-radius: var(--radio-pastilla);
  background: var(--aviso-info-fondo);
  color: var(--estado-confirmada-texto);
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
  white-space: nowrap;
}
.cita-nombre {
  font-weight: var(--peso-fuerte);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cita-servicio {
  color: var(--color-texto-suave);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Apartada: temporal, con borde punteado y cuenta regresiva. */
.cita-apartada {
  border: var(--borde-fino) dashed var(--estado-apartada);
}
.cita-apartada .cita-estado { background: var(--estado-apartada-fondo); color: var(--estado-apartada-texto); }

.cita-por-confirmar .cita-estado { background: var(--estado-por-confirmar-fondo); color: var(--estado-por-confirmar-texto); }

/* Atendida: se queda en el papel, en gris; lo que falta resalta. */
.cita-atendida {
  background: var(--cita-hecha-fondo);
}
.cita-atendida .cita-nombre {
  font-weight: var(--peso-medio);
}
.cita-atendida .cita-estado { background: var(--estado-atendida-fondo); color: var(--estado-atendida-texto); }

/* No llegó: hundida y tachada. */
.cita-no-llego {
  background: var(--estado-no-llego-fondo);
  color: var(--estado-no-llego-texto);
}
.cita-no-llego .cita-nombre,
.cita-no-llego .cita-servicio {
  text-decoration: line-through;
  text-decoration-thickness: var(--borde-fino);
}
.cita-no-llego .cita-estado { background: var(--cita-fondo); color: var(--estado-no-llego-texto); }

/* Llegó sola por la página y nadie la ha abierto (campanita): punto rojo
   en la esquina y "Nueva" en lugar del estado, hasta que alguien la abre. */
.cita-nueva::after {
  content: "";
  position: absolute;
  top: var(--espacio-2);
  right: var(--espacio-2);
  width: var(--punto);
  height: var(--punto);
  border-radius: var(--radio-pastilla);
  background: var(--color-nuevo);
  box-shadow: 0 0 0 var(--borde-grueso) var(--color-tarjeta);
}
.cita-nueva .cita-estado {
  padding-inline: 0;
  background: none;
  color: var(--color-nuevo-texto);
}
.cita-nueva .cita-encabezado {
  padding-right: var(--espacio-3);
}

/* El cliente dijo "Confirmo" desde su enlace (etapa 6k): "✓ Confirmó" en
   verde en lugar de "Confirmada" (en las cortas, la palomita junto a la hora). */
.cita-confirmo {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-1);
  min-width: 0;
}
.cita-confirmo > .icono {
  flex: none;
  color: var(--estado-atendida);
}
.cita .cita-estado.cita-confirmo {
  background: var(--estado-atendida-fondo);
  color: var(--estado-atendida-texto);
}
.ficha-renglon.renglon-confirmo > .icono {
  color: var(--estado-atendida);
}

/* Etapa 6k: el cliente ya faltó las veces que marca el dueño ("Faltó 2
   veces"): la marca antes del nombre y su renglón en el detalle. */
.cita-nombre > .cita-faltas {
  display: inline-block;
  margin-right: var(--espacio-1);
  color: var(--aviso-atencion);
  vertical-align: text-bottom;
}
.ficha-renglon.renglon-faltas > .icono {
  color: var(--aviso-error);
}
/* En la ficha del cliente: sus faltas, la regla que le aplica y "Perdonar
   faltas", en una caja de ladrillo suave. */
.ficha-faltas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--espacio-3);
  padding: var(--espacio-3) var(--espacio-4);
  border-radius: var(--radio-control);
  background: var(--aviso-error-fondo);
}
/* Sobre el ladrillo suave, "Perdonar faltas" en tinta (el gris no alcanza). */
.ficha-faltas > .boton-texto {
  color: var(--color-texto);
  text-decoration: underline;
  text-underline-offset: var(--espacio-1);
}
.ficha-faltas-regla {
  display: block;
  font-weight: var(--peso-fuerte);
}

/* Etapa 6k: "¿Quién cancela?" dentro de las horas del negocio. */
.quien-cancela {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--ancho-tarjeta-servicio), 1fr));
  gap: var(--espacio-2);
}

/* La está apartando alguien más, en otro dispositivo. */
.cita-ajena {
  cursor: not-allowed;
}

/* Guardada sin conexión: todavía no llega a la base ("· por subir"). */
.por-subir {
  outline: var(--borde-grueso) dashed var(--color-texto-suave);
  outline-offset: calc(var(--borde-fino) * -1);
}
.cita-ajena .cita-nombre {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  font-weight: var(--peso-medio);
  color: var(--estado-apartada-texto);
}

/* Citas cortas (15 min): una sola línea. */
.cita-compacta {
  flex-direction: row;
  align-items: center;
  gap: var(--espacio-2);
  padding-top: 0;
  padding-bottom: 0;
}

/* Donde no cabe la pastilla (citas cortas y la semana), el estado va en un
   punto o una raya de su color, además del texto para el lector de pantalla. */
.cita,
.cita-confirmada { --cita-punto: var(--estado-confirmada); }
.cita-apartada { --cita-punto: var(--estado-apartada); }
.cita-por-confirmar { --cita-punto: var(--estado-por-confirmar); }
.cita-atendida { --cita-punto: var(--estado-atendida); }
.cita-no-llego { --cita-punto: var(--estado-no-llego); }
.cita-compacta::before {
  content: "";
  flex: none;
  width: var(--punto);
  height: var(--punto);
  border-radius: var(--radio-pastilla);
  background: var(--cita-punto);
}
.rejilla-semana .cita::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--borde-estado);
  height: auto;
  border-radius: 0;
  background: var(--cita-punto);
}

/* Bloqueo: rayado gris, con el motivo. */
.bloqueo {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--espacio-0);
  padding: var(--espacio-2) var(--espacio-3);
  overflow: hidden;
  border: var(--borde-fino) solid var(--color-linea);
  border-radius: var(--radio-cita);
  background: repeating-linear-gradient(
    135deg,
    var(--estado-bloqueo-raya) 0 var(--borde-grueso),
    var(--estado-bloqueo-fondo) 0 var(--raya-bloqueo)
  );
  color: var(--estado-bloqueo-texto);
  font-size: var(--texto-sm);
}
.bloqueo-motivo {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-1);
  align-self: flex-start;
  padding: 0 var(--espacio-2);
  border-radius: var(--radio-pastilla);
  background: var(--color-tarjeta);
  font-weight: var(--peso-fuerte);
}

/* ─── Rejilla de la agenda ──────────────────────────────────────────── */

.rejilla {
  display: grid;
  grid-template-columns: var(--ancho-hora) repeat(var(--columnas, 1), minmax(var(--ancho-columna-min), 1fr));
  border: var(--borde-fino) solid var(--color-linea);
  border-radius: var(--radio-tarjeta);
  background: var(--color-tarjeta);
  overflow: auto;
}

.rejilla-cabeza {
  position: sticky;
  top: 0;
  z-index: var(--capa-pegajosa);
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  min-height: var(--alto-cabeza-rejilla);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 var(--espacio-3);
  border-bottom: var(--borde-fino) solid var(--color-linea);
  border-left: var(--borde-fino) solid var(--color-linea);
  background: var(--color-tarjeta);
  font-weight: var(--peso-fuerte);
}
.rejilla-cabeza:first-child {
  border-left: 0;
}
.rejilla-cabeza-hueca {
  border-left: 0;
}

.rejilla-horas {
  display: flex;
  flex-direction: column;
}
.rejilla-hora {
  height: calc(var(--alto-cuarto) * 4);
  padding: var(--espacio-1) var(--espacio-2) 0 0;
  border-top: var(--borde-fino) solid var(--color-linea);
  font-family: var(--fuente-cifras);
  font-variant-numeric: tabular-nums;
  font-size: var(--texto-xs);
  color: var(--color-texto-suave);
  text-align: right;
}
.rejilla-hora:first-child {
  border-top: 0;
}

.rejilla-columna {
  position: relative;
  display: flex;
  flex-direction: column;
  border-left: var(--borde-fino) solid var(--color-linea);
  container-type: inline-size;
}

/* Etapa 6n: en tablet las columnas se reparten en el ancho (8 personas
   caben a 1024 px); si no caben, se desliza de lado. Angostas: solo la
   hora y el nombre. */
@media (min-width: 768px) {
  .rejilla:not(.rejilla-semana) {
    grid-template-columns: var(--ancho-hora) repeat(var(--columnas, 1), minmax(var(--ancho-columna-min-tablet), 1fr));
  }
}
@container (max-width: 8.5rem) {
  .cita .cita-estado,
  .cita .cita-servicio {
    display: none;
  }
  .cita {
    padding-right: var(--espacio-2);
  }
}

/* Cada hueco de 15 min es un botón: tocarlo aparta el horario. */
.hueco {
  display: flex;
  align-items: center;
  height: var(--alto-cuarto);
  padding: 0 var(--espacio-3);
  border: 0;
  border-top: var(--borde-fino) dashed var(--color-linea);
  background: transparent;
  color: transparent;
  font-family: var(--fuente-cifras);
  font-size: var(--texto-xs);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--duracion) var(--curva), color var(--duracion) var(--curva);
}
.hueco.en-punto {
  border-top-style: solid;
}
.hueco:first-child {
  border-top: 0;
}
.hueco:hover,
.hueco:focus-visible {
  background: var(--color-acento-tenue);
  color: var(--color-acento-texto);
}
.hueco:focus-visible {
  outline-offset: calc(var(--foco-ancho) * -1);
}
.hueco:disabled {
  cursor: default;
}
.hueco:disabled:hover {
  background: transparent;
}
/* Fuera del horario de esa persona */
.hueco-fuera,
.hueco-fuera:disabled:hover {
  background: var(--color-hundido);
}
/* Ya pasó */
.hueco-pasado,
.hueco-pasado:disabled:hover {
  background: color-mix(in srgb, var(--color-hundido) 50%, var(--color-tarjeta));
}

/* La columna de horas y la esquina se quedan fijas al desplazarse. */
.rejilla-horas {
  position: sticky;
  left: 0;
  z-index: var(--capa-pegajosa);
  background: var(--color-tarjeta);
}
.rejilla-cabeza-hueca {
  left: 0;
  z-index: var(--capa-esquina);
}

/* Una "no llegó" debajo de otra cita: lado a lado. */
.rejilla-columna > .cita-mitad-izquierda {
  right: 50%;
}
.rejilla-columna > .cita-mitad-derecha {
  left: 50%;
}

/* Citas y bloqueos se acomodan por minutos: js pone --min-inicio y --min-duracion. */
.rejilla-columna > .cita,
.rejilla-columna > .bloqueo {
  position: absolute;
  top: calc(var(--min-inicio, 0) * var(--alto-minuto) + var(--margen-cita));
  left: var(--margen-cita);
  right: var(--margen-cita);
  width: auto;
  height: calc(var(--min-duracion, 15) * var(--alto-minuto) - var(--margen-cita) * 2);
}

/* Línea de "ahora" */
.rejilla-ahora {
  position: absolute;
  top: calc(var(--min-inicio, 0) * var(--alto-minuto));
  left: 0;
  right: 0;
  z-index: var(--capa-pegajosa);
  height: var(--borde-grueso);
  background: var(--color-ahora);
  pointer-events: none;
}
.rejilla-ahora::before {
  content: "";
  position: absolute;
  left: calc(var(--punto) / -2);
  top: calc(var(--punto) / -2 + var(--borde-fino));
  width: var(--punto);
  height: var(--punto);
  border-radius: var(--radio-pastilla);
  background: var(--color-ahora);
}

/* En celular se ve una columna (la del estilista elegido). */
@media (max-width: 767px) {
  .rejilla {
    grid-template-columns: var(--ancho-hora) minmax(0, 1fr);
  }
  .rejilla > .rejilla-columna:not(.es-visible),
  .rejilla > .rejilla-cabeza:not(.es-visible):not(.rejilla-cabeza-hueca) {
    display: none;
  }
  /* Cobre: quien se ve ya está escogido en su ficha de arriba; la columna
     no repite el nombre (en la semana, la cabeza es la fecha y se queda). */
  [data-estilo~="cobre"] .rejilla:not(.rejilla-semana) > .rejilla-cabeza {
    display: none;
  }
  /* Sin esa cabeza, la hora y el nombre se pegan hasta arriba; si no, la
     primera cita del día se encimaba con su servicio. */
  [data-estilo~="cobre"] .rejilla:not(.rejilla-semana) .cita-fija {
    top: 0;
  }
}

/* ─── Semana (etapa 6a): una persona, 7 días ────────────────────────── */

.rejilla-semana {
  grid-template-columns: var(--ancho-hora) repeat(7, minmax(var(--ancho-columna-semana-min), 1fr));
}
/* El encabezado de cada día es un botón: abre ese día con todo el equipo. */
.rejilla-cabeza-dia {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  padding: var(--espacio-1) var(--espacio-2);
  border-top: 0;
  border-right: 0;
  color: var(--color-texto);
  font-family: inherit;
  font-size: var(--texto-sm);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--duracion) var(--curva);
}
.rejilla-cabeza-dia:hover {
  background: var(--color-hundido);
}
.rejilla-cabeza-dia.es-hoy {
  border-bottom: var(--borde-grueso) solid var(--color-acento);
  color: var(--color-acento-texto);
}
.rejilla-cabeza-fecha {
  white-space: nowrap;
}
.rejilla-cabeza-nota {
  font-size: var(--texto-xs);
  font-weight: var(--peso-normal);
  color: var(--color-texto-suave);
}
.rejilla-semana .hueco {
  padding: 0 var(--espacio-2);
}
.rejilla-semana .cita {
  padding: var(--espacio-1) var(--espacio-2) var(--espacio-1) calc(var(--espacio-2) + var(--borde-estado));
  font-size: var(--texto-xs);
}
/* Día cerrado para esa persona: todo en el tono de "no trabaja". */
.rejilla-columna-cerrada {
  background: var(--color-hundido);
}

/* En celular: un renglón por día. */
.semana-lista {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--espacio-2);
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}
.semana-dia {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  width: 100%;
  min-height: var(--toque-min);
  padding: var(--espacio-3) var(--espacio-4);
  border: var(--borde-fino) solid var(--color-linea);
  border-radius: var(--radio-tarjeta);
  background: var(--color-tarjeta);
  color: var(--color-texto);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--duracion) var(--curva);
}
.semana-dia:hover {
  background: var(--color-hundido);
}
.semana-dia.es-hoy {
  border: var(--borde-grueso) solid var(--color-acento);
}
.semana-dia-cerrado {
  background: var(--color-hundido);
  color: var(--color-texto-suave);
}
.semana-dia-texto {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--espacio-0);
  min-width: 0;
}
.semana-dia-renglon {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.semana-dia-nombre {
  font-weight: var(--peso-fuerte);
}
.semana-dia-detalle {
  color: var(--color-texto-suave);
}
.semana-dia-libres {
  font-size: var(--texto-xs);
  color: var(--color-texto-suave);
}
.semana-dia > .icono {
  flex: none;
  color: var(--color-texto-suave);
}

/* ─── Mes (8 oct 2026): el calendario, cada cita en el color de quien
   atiende. Celular: puntos y cuántas son; tablet: hora y cliente. ──── */

.mes-agenda {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--espacio-3);
  min-height: 0;
  overflow-y: auto;
}
.mes-rejilla {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border-top: var(--borde-fino) solid var(--color-linea);
  border-left: var(--borde-fino) solid var(--color-linea);
}
.mes-cabeza {
  padding: var(--espacio-1) 0;
  border-right: var(--borde-fino) solid var(--color-linea);
  border-bottom: var(--borde-fino) solid var(--color-linea);
  color: var(--color-texto-suave);
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
  text-align: center;
  text-decoration: none;
}
.mes-dia {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espacio-1);
  min-width: 0;
  min-height: var(--alto-dia-mes);
  padding: var(--espacio-1);
  border: 0;
  border-right: var(--borde-fino) solid var(--color-linea);
  border-bottom: var(--borde-fino) solid var(--color-linea);
  background: var(--color-tarjeta);
  color: var(--color-texto);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--duracion) var(--curva);
}
.mes-dia:hover {
  background: var(--color-hundido);
}
.mes-dia.es-hoy {
  box-shadow: inset 0 0 0 var(--borde-grueso) var(--color-acento);
}
.mes-dia.es-hoy .mes-numero {
  color: var(--color-acento-texto);
}
.mes-dia-cerrado {
  background: var(--color-hundido);
}
.mes-dia-fuera,
.mes-dia-paso .mes-numero {
  color: var(--color-texto-suave);
}
.mes-numero {
  font-size: var(--texto-sm);
  font-weight: var(--peso-fuerte);
  line-height: var(--interlineado-apretado);
}
.mes-nota,
.mes-mas,
.mes-cuenta {
  color: var(--color-texto-suave);
  font-size: var(--texto-xs);
}
.mes-citas {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-0);
  width: 100%;
  min-width: 0;
}
.mes-cita {
  display: flex;
  gap: var(--espacio-1);
  min-width: 0;
  padding: 0 var(--espacio-1);
  border: var(--borde-fino) solid transparent;
  border-radius: var(--radio-cita);
  font-size: var(--texto-xs);
  line-height: var(--interlineado-medio);
  white-space: nowrap;
}
.mes-cita-hora {
  flex: none;
  font-weight: var(--peso-fuerte);
}
.mes-cita-nombre {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Solicitud por confirmar: con orilla punteada; no llegó: tachada y gris. */
.mes-cita.mes-cita-por-confirmar {
  border-color: currentColor;
  border-style: dashed;
}
.mes-cita.mes-cita-no-llego {
  background: var(--color-hundido);
  color: var(--color-texto-suave);
  text-decoration: line-through;
}
.mes-mas {
  padding: 0 var(--espacio-1);
}
.mes-puntos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-0);
}
.mes-punto {
  flex: none;
  width: var(--punto-mes);
  height: var(--punto-mes);
  border-radius: var(--radio-pastilla);
}
/* El punto, del color fuerte de la persona (el avatar trae el suave). */
.mes-agenda .mes-punto.avatar-naranja  { background: var(--avatar-naranja); }
.mes-agenda .mes-punto.avatar-azul     { background: var(--avatar-azul); }
.mes-agenda .mes-punto.avatar-rosa     { background: var(--avatar-rosa); }
.mes-agenda .mes-punto.avatar-verde    { background: var(--avatar-verde); }
.mes-agenda .mes-punto.avatar-morado   { background: var(--avatar-morado); }
.mes-agenda .mes-punto.avatar-amarillo { background: var(--avatar-amarillo); }
.mes-agenda .mes-punto.avatar-rojo     { background: var(--avatar-rojo); }
.mes-agenda .mes-punto.avatar-grafito  { background: var(--avatar-grafito); }
.mes-leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2) var(--espacio-4);
  margin: 0;
  padding: 0;
  color: var(--color-texto-suave);
  font-size: var(--texto-sm);
  list-style: none;
}
.mes-leyenda-persona {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-1);
}
@media (max-width: 767px) {
  .mes-citas,
  .mes-nota {
    display: none;
  }
}
@media (min-width: 768px) {
  .mes-dia {
    align-items: stretch;
    min-height: var(--alto-dia-mes-tablet);
  }
  .mes-puntos {
    display: none;
  }
}

/* Encabezado de la agenda: fecha y flechas */
.navegador-fecha {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
}
.navegador-fecha-texto {
  flex: 1;
  min-width: 0;
}
.navegador-fecha-texto > * {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.navegador-fecha-dia {
  font-family: var(--fuente-titulo);
  font-size: var(--texto-md);
  font-weight: var(--peso-titulo);
  letter-spacing: var(--letras-titulo);
  line-height: var(--interlineado-apretado);
}
@media (min-width: 768px) {
  .navegador-fecha-dia {
    font-size: var(--texto-lg);
  }
}

/* ─── Formularios ───────────────────────────────────────────────────── */

.campo {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
  min-width: 0;
}

.campo-etiqueta {
  font-size: var(--texto-sm);
  font-weight: var(--peso-fuerte);
}

.campo-ayuda {
  font-size: var(--texto-sm);
  color: var(--color-texto-suave);
}

.campo-error {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  color: var(--aviso-error);
}

/* Casilla de Cloudflare Turnstile ("soy una persona", etapa 8): crear la
   cuenta, entrar, pedir contraseña nueva y unirse. Vacía, no ocupa lugar. */
.casilla-persona:empty {
  display: none;
}

/* Libreta: los campos van subrayados, como renglón de libreta (la línea
   tiene 3:1 de contraste). 16 px de letra: así el iPhone no hace zoom. */
.entrada {
  width: 100%;
  min-height: var(--alto-control);
  padding: 0 var(--espacio-1);
  border: 0;
  border-bottom: var(--anillo-detalle) solid var(--color-linea-control);
  border-radius: 0;
  background: transparent;
  font-size: var(--texto-base);
  transition: border-color var(--duracion) var(--curva), box-shadow var(--duracion) var(--curva);
}
.entrada::placeholder {
  color: var(--color-texto-suave);
}
.entrada:focus {
  outline: none;
  border-bottom-color: var(--color-foco);
  box-shadow: 0 var(--borde-fino) 0 0 var(--color-foco);
}
.entrada[aria-invalid="true"] {
  border-bottom-color: var(--aviso-error);
}
.entrada:disabled {
  border-bottom-style: dashed;
  color: var(--color-texto-suave);
  cursor: not-allowed;
}
/* Las notas y las listas desplegables sí llevan su recuadro (una hoja). */
textarea.entrada,
select.entrada {
  padding: var(--espacio-3) var(--espacio-4);
  border: var(--borde-fino) solid var(--color-linea-control);
  border-radius: var(--radio-control);
  background: var(--color-tarjeta);
}
select.entrada {
  padding-block: 0;
}
textarea.entrada {
  min-height: calc(var(--alto-control) * 2);
  resize: vertical;
}
textarea.entrada:focus,
select.entrada:focus {
  border-color: var(--color-foco);
  box-shadow: 0 0 0 var(--foco-ancho) var(--color-foco);
}
textarea.entrada:disabled,
select.entrada:disabled {
  border-style: solid;
  background: var(--color-hundido);
}
.entrada.cifra {
  font-family: var(--fuente-cifras);
}
/* Elegir archivo (importar la libreta en CSV) */
.entrada-archivo {
  padding: var(--espacio-1);
  cursor: pointer;
}
.entrada-archivo::file-selector-button {
  min-height: var(--toque-min);
  margin-right: var(--espacio-3);
  padding: 0 var(--espacio-4);
  border: var(--borde-fino) solid var(--color-linea-control);
  border-radius: calc(var(--radio-control) - var(--espacio-1));
  background: var(--color-hundido);
  color: var(--color-texto);
  font: inherit;
  font-weight: var(--peso-fuerte);
  cursor: pointer;
}

/* Campo con prefijo (+52, $) o ícono */
.entrada-compuesta {
  position: relative;
  display: flex;
  align-items: center;
}
.entrada-compuesta > .entrada {
  padding-left: calc(var(--espacio-4) * 2.5);
}
.entrada-prefijo {
  position: absolute;
  left: var(--espacio-1);
  display: flex;
  align-items: center;
  color: var(--color-texto-suave);
  font-family: var(--fuente-cifras);
  pointer-events: none;
}

/* Monto grande en la pantalla de cobro */
.entrada-monto {
  min-height: calc(var(--alto-control) * 1.5);
  font-family: var(--fuente-cifras);
  font-size: var(--texto-2xl);
  font-weight: var(--peso-medio);
  font-variant-numeric: tabular-nums;
}
.entrada-compuesta > .entrada-monto {
  padding-left: calc(var(--espacio-4) * 2.5);
}
.entrada-compuesta > .entrada-monto + .entrada-prefijo,
.entrada-prefijo-monto {
  font-size: var(--texto-2xl);
}

/* Cliente reconocido al escribir su teléfono */
.cliente-reconocido {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  padding: var(--espacio-3);
  border-radius: var(--radio-control);
  background: var(--color-hundido);
  font-size: var(--texto-sm);
}
.cliente-reconocido strong {
  font-weight: var(--peso-fuerte);
}

/* Interruptor (sí / no) con zona tocable de 44 px */
.interruptor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-4);
  min-height: var(--toque-min);
  cursor: pointer;
}
.interruptor input {
  appearance: none;
  position: relative;
  width: calc(var(--toque-min) + var(--espacio-2));
  height: calc(var(--avatar-sm) + var(--espacio-0));
  flex: none;
  margin: 0;
  border-radius: var(--radio-pastilla);
  background: var(--color-linea-control);
  cursor: pointer;
  transition: background-color var(--duracion) var(--curva);
}
.interruptor input::after {
  content: "";
  position: absolute;
  top: var(--espacio-0);
  left: var(--espacio-0);
  width: var(--avatar-sm);
  height: var(--avatar-sm);
  border-radius: var(--radio-pastilla);
  background: var(--color-tarjeta);
  box-shadow: var(--sombra-1);
  transition: transform var(--duracion) var(--curva);
}
.interruptor input:checked {
  background: var(--color-acento);
}
.interruptor input:checked::after {
  transform: translateX(calc(var(--toque-min) + var(--espacio-2) - var(--avatar-sm) - var(--espacio-0) * 2));
}

.casilla {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  min-height: var(--toque-min);
  cursor: pointer;
}
.casilla input {
  width: var(--icono-lg);
  height: var(--icono-lg);
  margin: 0;
  accent-color: var(--color-acento);
}
/* Opciones con su explicación debajo (etapa 6k: "Qué pasa" con las faltas). */
.grupo-opciones {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.casilla-con-ayuda {
  align-items: flex-start;
  padding-block: var(--espacio-2);
}
.casilla-con-ayuda input {
  flex: none;
  margin-top: var(--espacio-0);
}

.buscador {
  position: relative;
}
.buscador > .icono {
  position: absolute;
  left: var(--espacio-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-texto-suave);
  pointer-events: none;
}
.buscador > .entrada {
  padding-left: calc(var(--espacio-4) + var(--icono-md) + var(--espacio-3));
}

.formulario {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-5);
}
/* Giro del negocio: el menú y, con "Otro", su campo de texto. */
.campo-giro {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-5);
}
.formulario-paso {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
}
.formulario-paso-titulo {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  font-size: var(--texto-base);
  font-weight: var(--peso-fuerte);
}
.formulario-paso-numero {
  display: inline-grid;
  place-items: center;
  width: var(--avatar-sm);
  height: var(--avatar-sm);
  border-radius: var(--radio-pastilla);
  background: var(--color-hundido);
  font-family: var(--fuente-cifras);
  font-size: var(--texto-sm);
}
.formulario-acciones {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
}
@media (min-width: 768px) {
  .formulario-acciones {
    flex-direction: row-reverse;
    justify-content: flex-start;
  }
}

/* ─── Tarjetas y panel ──────────────────────────────────────────────── */

.tarjeta {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-4);
  min-width: 0;
  padding: var(--espacio-5);
  border: var(--borde-fino) solid var(--color-linea);
  border-radius: var(--radio-tarjeta);
  background: var(--color-tarjeta);
}
.tarjeta-encabezado {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--espacio-3);
}
.tarjeta-titulo {
  font-size: var(--texto-base);
  font-weight: var(--peso-fuerte);
}

/* Libreta: un solo número grande ("Vendido hoy") y los demás chicos a su
   lado, sin cajitas; el resumen cierra con una línea. En el celular el
   grande va solo en su renglón. */
.panel-datos {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--espacio-4) var(--espacio-8);
  padding-bottom: var(--espacio-4);
  border-bottom: var(--borde-fino) solid var(--color-linea);
}
.dato {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-1);
  min-width: 0;
}
.panel-datos:not(.panel-datos-compacto) > .dato:first-child {
  flex: 1 0 100%;
}
@media (min-width: 768px) {
  .panel-datos:not(.panel-datos-compacto) > .dato:first-child {
    flex: none;
  }
}
.dato-etiqueta {
  font-size: var(--texto-sm);
  color: var(--color-texto-suave);
}
.dato-valor {
  order: -1;
  font-family: var(--fuente-cifras);
  font-variant-numeric: tabular-nums;
  font-size: var(--texto-lg);
  font-weight: var(--peso-cifra-grande);
  line-height: var(--interlineado-apretado);
  letter-spacing: var(--letras-titulo);
  white-space: nowrap;
}
.panel-datos:not(.panel-datos-compacto) > .dato:first-child .dato-valor {
  font-size: var(--texto-cifra-grande);
  letter-spacing: var(--letras-cifra-grande);
}
.dato-cambio {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-1);
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
  color: var(--color-texto-suave);
}
.dato-cambio.sube { color: var(--grafica-sube); }
.dato-cambio.baja { color: var(--grafica-baja); }
@media (min-width: 768px) {
  .dato-valor {
    font-size: var(--texto-xl);
  }
}

/* Datos chicos en franja, dos por renglón (ficha del cliente): la etiqueta
   arriba y el valor abajo, todos del mismo tamaño. */
.panel-datos-compacto {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  padding-bottom: 0;
  border-bottom: 0;
  border-top: var(--borde-fino) solid var(--color-linea);
}
.panel-datos-compacto > .dato {
  padding: var(--espacio-3) var(--espacio-4);
  border-bottom: var(--borde-fino) solid var(--color-linea);
}
.panel-datos-compacto > .dato:nth-child(2n) {
  border-left: var(--borde-fino) solid var(--color-linea);
}
.panel-datos-compacto > .dato:nth-child(2n + 1) {
  padding-left: 0;
}
.panel-datos-compacto .dato-valor {
  order: 0;
  font-size: var(--texto-lg);
  letter-spacing: var(--letras-titulo);
}
.dato-valor-chico,
.panel-datos-compacto .dato-valor-chico {
  font-size: var(--texto-md);
  white-space: normal;
  overflow-wrap: anywhere;
}
/* Cuando el dato es texto ("hace 3 semanas", "Corte dama") y no cifra */
.dato-valor-texto {
  font-family: var(--fuente-texto);
  font-variant-numeric: normal;
  letter-spacing: normal;
}

/* Gráfica de barras por día: js pone --valor (0 a 1) en cada barra. */
.grafica-barras {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  align-items: end;
  gap: var(--espacio-2);
  height: var(--alto-barra-grafica);
  padding-top: var(--espacio-5);
  border-bottom: var(--borde-fino) solid var(--grafica-guia);
}
.grafica-columna {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: var(--espacio-1);
  height: 100%;
  min-width: 0;
}
.grafica-barra {
  width: 100%;
  height: calc(var(--valor, 0) * 100%);
  min-height: var(--borde-grueso);
  border-radius: var(--radio-celda) var(--radio-celda) 0 0;
  background: var(--grafica-barra-suave);
}
.grafica-columna.es-hoy .grafica-barra {
  background: var(--grafica-barra);
}
.grafica-valor {
  font-family: var(--fuente-cifras);
  font-variant-numeric: tabular-nums;
  font-size: var(--texto-xs);
  color: var(--color-texto-suave);
  white-space: nowrap;
}
.grafica-ejes {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: var(--espacio-2);
  padding-top: var(--espacio-2);
  font-size: var(--texto-xs);
  color: var(--color-texto-suave);
  text-align: center;
}
.grafica-ejes .es-hoy {
  color: var(--color-texto);
  font-weight: var(--peso-fuerte);
}
/* 30 días: barras más juntas y un rótulo por semana, centrado aunque no quepa */
.grafica-barras.grafica-densa,
.grafica-ejes.grafica-densa {
  gap: var(--espacio-0);
}
.grafica-ejes.grafica-densa > span {
  display: flex;
  justify-content: center;
  white-space: nowrap;
}

/* Barra apilada (nuevos contra los que regresaron) */
.barra-apilada {
  display: flex;
  height: var(--alto-barra-apilada);
  overflow: hidden;
  border-radius: var(--radio-pastilla);
  background: var(--color-hundido);
}
.barra-apilada > span {
  flex: var(--valor, 0) 0 0;
}
.barra-apilada > .tramo-principal {
  background: var(--grafica-barra);
}
.barra-apilada > .tramo-secundario {
  background: var(--grafica-barra-suave);
}

.leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2) var(--espacio-5);
  font-size: var(--texto-sm);
}
.leyenda-elemento {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
}
.leyenda-elemento::before {
  content: "";
  width: var(--punto);
  height: var(--punto);
  border-radius: var(--radio-pastilla);
  background: var(--grafica-barra-suave);
}
.leyenda-elemento.tramo-principal::before {
  background: var(--grafica-barra);
}

/* Ranking con barrita (servicios más vendidos) */
.ranking {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ranking-fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--espacio-1) var(--espacio-3);
  align-items: baseline;
}
.ranking-barra {
  grid-column: 1 / -1;
  height: var(--alto-barra-ranking);
  border-radius: var(--radio-pastilla);
  background: var(--color-hundido);
  overflow: hidden;
}
.ranking-barra > span {
  display: block;
  width: calc(var(--valor, 0) * 100%);
  height: 100%;
  border-radius: var(--radio-pastilla);
  background: var(--grafica-barra);
}

/* Mapa de calor: horas más ocupadas (día × hora) */
.mapa-calor {
  display: grid;
  grid-template-columns: auto repeat(var(--horas, 11), minmax(var(--celda-calor), 1fr));
  gap: var(--espacio-1);
  overflow-x: auto;
  font-size: var(--texto-xs);
  color: var(--color-texto-suave);
}
.mapa-calor-dia {
  display: flex;
  align-items: center;
  padding-right: var(--espacio-2);
}
.mapa-calor-hora {
  font-family: var(--fuente-cifras);
  text-align: center;
}
.calor {
  aspect-ratio: 1;
  min-height: var(--celda-calor);
  border-radius: var(--radio-celda);
  background: var(--calor-0);
}
.calor-1 { background: var(--calor-1); }
.calor-2 { background: var(--calor-2); }
.calor-3 { background: var(--calor-3); }
.calor-4 { background: var(--calor-4); }
.escala-calor {
  display: flex;
  align-items: center;
  gap: var(--espacio-1);
  font-size: var(--texto-xs);
  color: var(--color-texto-suave);
}
.escala-calor .calor {
  width: var(--icono-sm);
  min-height: var(--icono-sm);
}

/* ─── Tablas ────────────────────────────────────────────────────────── */

.tabla-contenedor {
  overflow-x: auto;
  margin: 0 calc(var(--espacio-5) * -1);
  padding: 0 var(--espacio-5);
}
.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--texto-sm);
}
.tabla th {
  padding: var(--espacio-2) var(--espacio-3);
  border-bottom: var(--borde-fino) solid var(--color-linea);
  color: var(--color-texto-suave);
  font-weight: var(--peso-medio);
  text-align: left;
  white-space: nowrap;
}
.tabla td {
  padding: var(--espacio-3);
  border-bottom: var(--borde-fino) solid var(--color-linea);
  white-space: nowrap;
}
.tabla tr:last-child td {
  border-bottom: 0;
}
.tabla th:first-child,
.tabla td:first-child {
  padding-left: 0;
}
.tabla th:last-child,
.tabla td:last-child {
  padding-right: 0;
}
.tabla .num {
  font-family: var(--fuente-cifras);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.tabla tfoot td {
  border-top: var(--borde-grueso) solid var(--color-linea);
  font-weight: var(--peso-fuerte);
}
.celda-persona {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
}
/* El nombre lleva a su reporte (solo el dueño) */
a.celda-persona {
  min-height: var(--toque-min);
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--color-linea);
}
a.celda-persona:hover {
  text-decoration-color: currentColor;
}

/* ─── Listas (clientes, recordatorios) ──────────────────────────────── */

.lista {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  border: var(--borde-fino) solid var(--color-linea);
  border-radius: var(--radio-tarjeta);
  background: var(--color-tarjeta);
  overflow: hidden;
}
.fila {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  min-height: calc(var(--toque-min) + var(--espacio-4));
  padding: var(--espacio-3) var(--espacio-4);
  border-top: var(--borde-fino) solid var(--color-linea);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--duracion) var(--curva);
}
.lista > li:first-child > .fila,
.lista > .fila:first-child {
  border-top: 0;
}
a.fila:hover,
button.fila:hover {
  background: var(--color-hundido);
}
/* Coincidencias del campo "Cliente" (etapa 6a): la escogida con las flechas */
.fila[aria-selected="true"] {
  background: var(--color-acento-tenue);
}
button.fila {
  width: 100%;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.fila-texto {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}
.fila-titulo {
  font-weight: var(--peso-fuerte);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Etapa 6n: un título que se lee completo (la fórmula de la clienta). */
.fila-titulo-completo {
  white-space: normal;
  overflow-wrap: anywhere;
}
.fila-detalle {
  font-size: var(--texto-sm);
  color: var(--color-texto-suave);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fila-dato {
  font-family: var(--fuente-cifras);
  font-variant-numeric: tabular-nums;
  font-size: var(--texto-sm);
  text-align: right;
  white-space: nowrap;
}
.fila > .icono:last-child {
  color: var(--color-texto-suave);
}
/* La propina abajo del monto, más chica */
/* Nómina: el recibo ya pagado, en verde bajo su cifra. */
.fila-dato-pagado {
  color: var(--aviso-exito);
}
.fila-dato-extra {
  display: block;
  font-size: var(--texto-xs);
  color: var(--color-texto-suave);
}
/* Botones al final de la fila ("No llegó", "Cobrar") */
.fila-acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--espacio-2);
  margin-left: auto;
}
.fila-acciones:empty {
  display: none;
}
/* Lista de espera (etapa 6a): los botones van abajo, alineados con el texto. */
.fila-espera {
  flex-wrap: wrap;
  align-items: flex-start;
}
.fila-espera > .fila-acciones {
  flex-basis: 100%;
  justify-content: flex-start;
  padding-left: calc(var(--avatar-md) + var(--espacio-3));
}
/* Nota corta a la derecha ("No acepta mensajes") */
.fila-nota {
  flex: none;
  max-width: 40%;
  text-align: right;
}
/* Renglón de la bitácora: el texto puede ocupar varias líneas */
.fila-actividad {
  align-items: flex-start;
}
.fila-actividad > .icono {
  margin-top: var(--espacio-1);
  color: var(--color-texto-suave);
}
/* Fila con un botón grande adentro y otro chico al lado (usuarios recientes) */
.fila-reciente {
  padding-top: 0;
  padding-bottom: 0;
}
.fila-boton {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--espacio-3);
  min-width: 0;
  min-height: calc(var(--toque-min) + var(--espacio-4));
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.fila-hora-grande {
  min-width: var(--avatar-lg);
  font-size: var(--texto-md);
  font-weight: var(--peso-medio);
}
.lista-compacta .fila {
  min-height: var(--toque-min);
  padding: var(--espacio-2) 0;
}
.lista-compacta {
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* Resumen del cobro: total con propina */
.resumen-cobro {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--espacio-3);
  padding: var(--espacio-3) 0;
  border-top: var(--borde-fino) solid var(--color-linea);
  color: var(--color-texto-suave);
}
.resumen-cobro-total {
  color: var(--color-texto);
  font-size: var(--texto-lg);
  font-weight: var(--peso-medio);
}

/* Pago dividido (etapa 5f): un renglón por forma, hasta 3 */
.pagos-dividir {
  align-self: flex-start;
}
.pagos-divididos {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
}
.pago-renglon {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) var(--toque-min);
  align-items: center;
  gap: var(--espacio-2);
}
.pago-renglon .entrada-compuesta > .entrada {
  padding-left: calc(var(--espacio-4) * 2);
}
.pagos-cuadre {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  color: var(--aviso-exito);
  font-size: var(--texto-sm);
}
.pagos-cuadre-mal {
  color: var(--color-peligro);
}
/* Descuento manual (etapa 5f): tipo y cantidad en un renglón */
.descuento-renglon {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  align-items: center;
  gap: var(--espacio-2);
}
.descuento-resultado:not(.pagos-cuadre-mal) {
  color: var(--color-texto-suave);
}
.entrada-sufijo {
  position: absolute;
  right: var(--espacio-4);
  display: flex;
  align-items: center;
  color: var(--color-texto-suave);
  font-family: var(--fuente-cifras);
  pointer-events: none;
}
.entrada-compuesta > .entrada.entrada-con-sufijo {
  padding-left: var(--espacio-4);
  padding-right: calc(var(--espacio-4) * 2.5);
}
/* Servicios extra al cobrar (etapa 5f): el servicio arriba (con quitar);
   quién lo hizo y su precio abajo */
.extras-lista {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
}
.extra-renglon {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) var(--toque-min);
  grid-template-areas:
    "servicio servicio quitar"
    "estilista precio precio";
  align-items: center;
  gap: var(--espacio-2);
  padding-bottom: var(--espacio-3);
  border-bottom: var(--borde-fino) solid var(--color-linea);
}
.extra-servicio { grid-area: servicio; }
/* Etapa 6n: el producto ya escogido (del buscador), con su nombre. */
.extra-nombre {
  font-weight: var(--peso-medio);
  overflow-wrap: anywhere;
}
.extra-estilista { grid-area: estilista; }
.extra-precio { grid-area: precio; }
.extra-quitar { grid-area: quitar; }
.extra-renglon .entrada-compuesta > .entrada {
  padding-left: calc(var(--espacio-4) * 2);
}
/* Receta de un servicio (etapa 5g, fase 2): producto, cuánto usa y quitar */
.receta-renglon {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(var(--ancho-hora) * 2) var(--toque-min);
  align-items: center;
  gap: var(--espacio-2);
}
.receta-agregar {
  align-self: flex-start;
}
/* Etapa 6n: "Lo que se usó" (resumen con "Cambiar") y el buscador de
   productos del cobro, con su lista debajo. */
.uso-resumen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-2);
  min-width: 0;
}
.buscador-producto {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-1);
}
.extras-suma {
  color: var(--color-texto-suave);
}
.pagos-botones {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--espacio-2);
}

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

.aviso {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--espacio-3);
  padding: var(--espacio-3) var(--espacio-4);
  border-radius: var(--radio-control);
  background: var(--aviso-info-fondo);
  color: var(--aviso-info);
  font-size: var(--texto-sm);
  line-height: var(--interlineado-medio);
}
.aviso > .icono {
  margin-top: var(--espacio-0);
}
/* Si no cabe junto al botón, el botón baja a su propio renglón. */
.aviso-texto {
  flex: 1 1 var(--ancho-texto-min);
  min-width: 0;
  color: var(--color-texto);
}
.aviso-texto strong {
  display: block;
  font-weight: var(--peso-fuerte);
}
.aviso-accion {
  align-self: center;
  flex: none;
  margin-left: auto;
}
.aviso-exito    { background: var(--aviso-exito-fondo);    color: var(--aviso-exito); }
.aviso-atencion { background: var(--aviso-atencion-fondo); color: var(--aviso-atencion); }
.aviso-error    { background: var(--aviso-error-fondo);    color: var(--aviso-error); }
.aviso-discreto {
  background: transparent;
  border: var(--borde-fino) solid var(--color-linea);
  color: var(--color-texto-suave);
}
/* Etapa 8: lo que no se subió por solo lectura, uno por renglón. */
.aviso-lista {
  margin: var(--espacio-1) 0 0;
  padding-left: var(--espacio-5);
}
/* Etapa 8: la gracia de la prueba (días 15 a 17), grande arriba de cada pantalla. */
.aviso-grande {
  padding: var(--espacio-4) var(--espacio-5);
  font-size: var(--texto-base);
}
.aviso-grande .aviso-texto strong {
  font-size: var(--texto-md);
}

/* Franja de conexión: "Sin conexión · 3 cambios por subir" */
.aviso-conexion {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-2);
  min-height: var(--toque-min);
  padding: var(--espacio-2) var(--margen-pantalla);
  background: var(--aviso-atencion-fondo);
  color: var(--color-texto);
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
}
.aviso-conexion > .icono {
  color: var(--aviso-atencion);
}

/* Brindis: "Cita cancelada · Deshacer" durante 5 segundos */
.brindis {
  position: fixed;
  left: 50%;
  bottom: calc(var(--alto-barra-inferior) + var(--espacio-4) + env(safe-area-inset-bottom));
  z-index: var(--capa-aviso);
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  width: max-content;
  max-width: calc(100% - var(--margen-pantalla) * 2);
  min-height: var(--alto-control);
  padding: var(--espacio-1) var(--espacio-1) var(--espacio-1) var(--espacio-4);
  border-radius: var(--radio-control);
  background: var(--brindis-fondo);
  color: var(--brindis-texto);
  box-shadow: var(--sombra-3);
  font-weight: var(--peso-medio);
  transform: translate(-50%, 0);
  transition: opacity var(--duracion) var(--curva), transform var(--duracion) var(--curva);
}
.brindis.oculto {
  opacity: 0;
  transform: translate(-50%, var(--espacio-4));
  pointer-events: none;
}
/* Etapa 6n: "Cobrado $1,760 · Lucía" y, si hubo algo raro, una línea más chica. */
.brindis:has(.brindis-texto) {
  flex-wrap: wrap;
  justify-content: flex-end;
  padding-top: var(--espacio-2);
}
.brindis-texto {
  display: flex;
  flex: 1 0 100%;
  flex-direction: column;
  gap: var(--espacio-0);
  padding-right: var(--espacio-3);
}
.brindis-detalle {
  font-size: var(--texto-sm);
  font-weight: var(--peso-normal);
  color: color-mix(in srgb, var(--brindis-texto) 85%, transparent);
}
.brindis-accion {
  min-height: var(--toque-min);
  padding: 0 var(--espacio-4);
  border: 0;
  border-radius: calc(var(--radio-control) - var(--espacio-1));
  background: transparent;
  color: var(--brindis-accion);
  font-weight: var(--peso-fuerte);
  cursor: pointer;
}
.brindis-accion:hover {
  background: color-mix(in srgb, var(--brindis-texto) 10%, transparent);
}
@media (min-width: 768px) {
  .brindis {
    bottom: var(--espacio-6);
  }
}

/* "Datos de ejemplo": va en la esquina del encabezado del negocio demo
   (junto al nombre), así nunca tapa quién está conectado. */
.marca-demo {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--espacio-1);
  padding: var(--espacio-1) var(--espacio-3);
  border: var(--borde-fino) dashed var(--aviso-atencion);
  border-radius: var(--radio-pastilla);
  background: var(--aviso-atencion-fondo);
  color: var(--aviso-atencion);
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
  white-space: nowrap;
}

/* ─── Utilidades de acomodo por tamaño ──────────────────────────────── */

@media (min-width: 768px) {
  .solo-celular {
    display: none !important;
  }
}
@media (max-width: 767px) {
  .solo-tablet {
    display: none !important;
  }
}

/* ─── Ventanas emergentes ───────────────────────────────────────────── */
/* En celular sube desde abajo; en tablet y computadora va al centro. */

.ventana {
  width: 100%;
  max-width: 100%;
  max-height: var(--alto-ventana-max);
  margin: auto 0 0;
  padding: 0;
  border: 0;
  border-radius: var(--radio-tarjeta) var(--radio-tarjeta) 0 0;
  background: var(--color-tarjeta);
  color: var(--color-texto);
  box-shadow: var(--sombra-3);
  overflow: auto;
}
.ventana::backdrop {
  background: var(--color-velo);
}
.ventana[open] {
  animation: ventana-entra var(--duracion) var(--curva);
}
@keyframes ventana-entra {
  from {
    opacity: 0;
    transform: translateY(var(--espacio-4));
  }
}
@media (min-width: 768px) {
  .ventana {
    width: calc(100% - var(--espacio-8));
    max-width: var(--ancho-ventana);
    margin: auto;
    border-radius: var(--radio-tarjeta);
  }
}

.ventana-encabezado {
  position: sticky;
  top: 0;
  z-index: var(--capa-pegajosa);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-2) var(--espacio-3);
  padding: var(--espacio-3) var(--espacio-3) var(--espacio-3) var(--espacio-5);
  border-bottom: var(--borde-fino) solid var(--color-linea);
  background: var(--color-tarjeta);
}
.ventana-cuerpo {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-5);
  padding: var(--espacio-5);
}
.ventana-titulo {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--espacio-1);
  min-width: 0;
}

/* Botones de la cita: la principal a todo lo ancho; las otras dos, lado a lado. */
.ventana-acciones.acciones-cita {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.acciones-cita > :first-child {
  grid-column: 1 / -1;
}
.acciones-cita > .boton {
  white-space: normal;
}
/* En tablet: Cancelar a la izquierda; "Dejar por confirmar" y "Confirmar" a la derecha. */
@media (min-width: 768px) {
  .ventana-acciones.acciones-cita {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .acciones-cita > :nth-child(1) { order: 3; }
  .acciones-cita > :nth-child(2) { order: 2; }
  .acciones-cita > :nth-child(3) { order: 1; margin-right: auto; }
}
/* Ficha del cliente: "Corregir datos" y "Borrar cliente" lado a lado */
.ventana-acciones.acciones-ficha {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}
/* Ficha del cliente (Libreta): sus iniciales con anillo del detalle, su
   nombre en letra de título, WhatsApp como botón principal y cada parte
   con su título y su filete. Notas y fórmula van como apuntes. */
.ficha-cabeza {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--espacio-3);
  min-width: 0;
}
.avatar-ficha {
  width: var(--avatar-ficha);
  height: var(--avatar-ficha);
  background: var(--color-acento-tenue);
  box-shadow: inset 0 0 0 var(--anillo-detalle) var(--color-detalle);
  font-size: var(--texto-md);
}
.ficha-contacto {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--espacio-2);
}
.ficha-seccion {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
}
.ficha-seccion-titulo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--espacio-3);
  font-family: var(--fuente-titulo);
  font-size: var(--texto-md);
  font-weight: var(--peso-titulo);
  letter-spacing: var(--letras-titulo);
}
.ficha-seccion-detalle {
  font-family: var(--fuente-texto);
  font-size: var(--texto-xs);
  color: var(--color-texto-suave);
}
.apunte {
  padding: var(--espacio-3) var(--espacio-4);
  border: var(--borde-fino) solid var(--color-linea);
  border-radius: var(--radio-control);
  background: var(--color-fondo);
  line-height: var(--interlineado);
  overflow-wrap: anywhere;
}
.apunte-detalle {
  display: block;
  margin-top: var(--espacio-1);
  font-size: var(--texto-xs);
  color: var(--color-texto-suave);
}

/* "¿Borrar para siempre?": los botones en su propio renglón */
.confirmar-borrado > .grupo-botones {
  flex-basis: 100%;
}
.formulario-avisos {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
}
.formulario-avisos:empty {
  display: none;
}

/* Renglones de la ficha de una cita (ícono + dato) */
.ficha-renglon {
  display: flex;
  align-items: flex-start;
  gap: var(--espacio-3);
}
.ficha-renglon > .icono {
  margin-top: var(--espacio-1);
  color: var(--color-texto-suave);
}

/* Fidelidad (etapa 5h): las estrellas del cliente. En la meta (ya puede
   canjear su servicio gratis) se marcan de verde. */
.fidelidad-insignia {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-1);
  margin-left: var(--espacio-2);
  padding: 0 var(--espacio-2);
  border-radius: var(--radio-pastilla);
  background: var(--color-hundido);
  color: var(--color-texto-suave);
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
  vertical-align: middle;
  white-space: nowrap;
}
.fidelidad-insignia .icono,
.fidelidad-renglon > .icono {
  color: var(--color-estrella);
}
.fidelidad-insignia.fidelidad-meta {
  background: var(--fidelidad-meta-fondo);
  color: var(--fidelidad-meta);
}
.fidelidad-renglon.fidelidad-meta,
.fidelidad-meta .icono,
.fidelidad-renglon.fidelidad-meta > .icono {
  color: var(--fidelidad-meta);
}
.fidelidad-renglon.fidelidad-meta {
  font-weight: var(--peso-fuerte);
}
/* Ficha del cliente (Libreta): un circulito por estrella de la meta. */
.fidelidad-circulos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-1);
  margin-top: var(--espacio-2);
}
.fidelidad-circulo {
  width: var(--circulo-fidelidad);
  height: var(--circulo-fidelidad);
  border: var(--anillo-detalle) solid var(--color-estrella);
  border-radius: var(--radio-pastilla);
}
.fidelidad-circulo.llena {
  background: var(--color-estrella);
}
.fidelidad-meta .fidelidad-circulo {
  border-color: var(--fidelidad-meta);
}
.fidelidad-meta .fidelidad-circulo.llena {
  background: var(--fidelidad-meta);
}

/* En la ventana de cobro: "Fidelidad / Puntos" (solo si ya llegó a la meta). */
.cobro-fidelidad {
  padding: var(--espacio-3) var(--espacio-4);
  border-radius: var(--radio-control);
  background: var(--fidelidad-meta-fondo);
}
.cobro-fidelidad-titulo {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-1);
  color: var(--fidelidad-meta);
}
.cobro-fidelidad input:checked {
  background: var(--fidelidad-meta);
}
.ficha-estado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-2) var(--espacio-3);
}

/* Empieza / termina, desde / hasta */
.ajuste-hora {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--espacio-3);
}

/* Botón con aspecto de enlace ("Ajustar hora") */
.enlace-boton {
  align-self: flex-start;
  min-height: var(--toque-min);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-acento-texto);
  font-weight: var(--peso-fuerte);
  text-decoration: underline;
  text-underline-offset: var(--espacio-0);
  cursor: pointer;
}

/* Quién está conectado (ventana de la sesión) */
.sesion-persona {
  display: flex;
  align-items: center;
  gap: var(--espacio-4);
}
.ventana-acciones {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
  padding: var(--espacio-4) var(--espacio-5) calc(var(--espacio-4) + env(safe-area-inset-bottom));
  border-top: var(--borde-fino) solid var(--color-linea);
  background: var(--color-tarjeta);
}

/* Menú de opciones rápidas (por ejemplo, el de "Bloquear") */
.menu-opciones {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: var(--espacio-2);
  list-style: none;
}
.menu-opcion {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  width: 100%;
  min-height: var(--alto-control-grande);
  padding: 0 var(--espacio-3);
  border: 0;
  border-radius: var(--radio-control);
  background: transparent;
  font-weight: var(--peso-medio);
  text-align: left;
  cursor: pointer;
}
.menu-opcion:hover {
  background: var(--color-hundido);
}
.menu-opcion-detalle {
  margin-left: auto;
  font-size: var(--texto-sm);
  color: var(--color-texto-suave);
}

/* ─── Pantallas vacías que enseñan ──────────────────────────────────── */

.vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espacio-3);
  padding: var(--espacio-10) var(--espacio-6);
  border: var(--borde-fino) dashed var(--color-linea-control);
  border-radius: var(--radio-tarjeta);
  text-align: center;
}
.vacio > .icono {
  color: var(--color-texto-suave);
}
.vacio-titulo {
  font-family: var(--fuente-titulo);
  font-size: var(--texto-md);
  font-weight: var(--peso-titulo);
}
.vacio-texto {
  max-width: var(--ancho-lectura);
  color: var(--color-texto-suave);
}
.vacio-compacto {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--espacio-1) var(--espacio-2);
  padding: var(--espacio-3) var(--espacio-4);
}
.vacio-compacto .vacio-titulo {
  font-size: var(--texto-base);
}

/* ─── Esqueletos (mientras carga; nunca la palabra "cargando") ─────── */

.esqueleto {
  display: block;
  border-radius: var(--radio-celda);
  background: var(--color-hundido);
}
.esqueleto-linea {
  height: var(--espacio-3);
}
.esqueleto-linea.corta { width: 40%; }
.esqueleto-linea.media { width: 65%; }
.esqueleto-circulo {
  width: var(--avatar-md);
  height: var(--avatar-md);
  flex: none;
  border-radius: var(--radio-pastilla);
}
.esqueleto-cita {
  height: calc(var(--alto-cuarto) * 2);
  border-radius: var(--radio-cita);
}
.esqueleto-dato {
  height: calc(var(--alto-control) * 2);
  border-radius: var(--radio-tarjeta);
}
.esqueleto-ficha {
  width: calc(var(--toque-min) * 2);
  height: var(--toque-min);
  border-radius: var(--radio-pastilla);
}
.esqueleto-fila {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
}
.esqueleto-textos {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--espacio-2);
}

/* ─── Navegación ────────────────────────────────────────────────────── */

/* Barra de arriba: negocio, quién está conectado y "Cambiar de usuario" */
.encabezado {
  position: sticky;
  top: 0;
  z-index: var(--capa-barra);
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  min-height: var(--alto-encabezado);
  padding: var(--espacio-2) var(--margen-pantalla);
  padding-top: calc(var(--espacio-2) + env(safe-area-inset-top));
  border-bottom: var(--borde-fino) solid var(--color-linea);
  background: var(--color-tarjeta);
}
.encabezado-negocio {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  min-width: var(--avatar-sm);
  font-family: var(--fuente-titulo);
  font-weight: var(--peso-titulo);
  letter-spacing: var(--letras-titulo);
}
.encabezado-negocio span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* En celular, el demo cambia el nombre por "Datos de ejemplo" para que quepa quién está conectado. */
@media (max-width: 767px) {
  .encabezado:has(.marca-demo) .encabezado-negocio > span:not(.logo-inicial) {
    display: none;
  }
}
.logo-negocio {
  width: var(--avatar-sm);
  height: var(--avatar-sm);
  flex: none;
  border-radius: var(--radio-celda);
  object-fit: cover;
}
.logo-inicial {
  display: inline-grid;
  place-items: center;
  width: var(--avatar-sm);
  height: var(--avatar-sm);
  flex: none;
  border-radius: var(--radio-celda);
  background: var(--color-acento);
  color: var(--color-sobre-acento);
  font-family: var(--fuente-titulo);
  font-size: var(--texto-sm);
}
.encabezado-relleno {
  flex: 1;
}
/* Los botones del encabezado en un solo renglón; el nombre es el que se corta */
.encabezado > .grupo-botones {
  flex: none;
  flex-wrap: nowrap;
  gap: var(--espacio-2);
}

/* Campanita ("Avisos"): citas que llegaron solas por la página, cambios
   del cliente y lugares que se liberaron. El número rojo solo sale si hay
   algo sin ver; la lista se abre debajo (en celular, a lo ancho). */
.campana {
  position: relative;
  flex: none;
}
.campana-boton {
  position: relative;
  color: var(--color-texto);
}
.campana-numero {
  position: absolute;
  top: var(--espacio-1);
  right: var(--espacio-1);
  display: inline-grid;
  place-items: center;
  min-width: var(--campana-numero);
  height: var(--campana-numero);
  padding: 0 var(--espacio-1);
  border-radius: var(--radio-pastilla);
  background: var(--color-nuevo);
  color: var(--color-sobre-nuevo);
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
  line-height: 1;
  box-shadow: 0 0 0 var(--borde-grueso) var(--color-tarjeta);
}
.campana-panel {
  position: absolute;
  top: calc(100% + var(--espacio-2));
  right: 0;
  z-index: var(--capa-flotante);
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
  width: var(--ancho-campana);
  max-height: var(--alto-campana-max);
  overflow-y: auto;
  padding: var(--espacio-3);
  border: var(--borde-fino) solid var(--color-linea);
  border-radius: var(--radio-tarjeta);
  background: var(--color-tarjeta);
  box-shadow: var(--sombra-3);
  overscroll-behavior: contain;
}
@media (max-width: 767px) {
  .campana-panel {
    position: fixed;
    top: calc(var(--alto-encabezado) + env(safe-area-inset-top));
    right: var(--margen-pantalla);
    left: var(--margen-pantalla);
    width: auto;
  }
}
.campana-encabezado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-2);
}
.campana-titulo {
  margin: 0;
  font-weight: var(--peso-fuerte);
}
.campana-encabezado .boton-texto {
  min-height: var(--toque-min);
  padding: 0 var(--espacio-2);
  font-size: var(--texto-sm);
}
.campana-lista {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.campana-fila {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  width: 100%;
  min-height: calc(var(--toque-min) + var(--espacio-2));
  padding: var(--espacio-2);
  border: 0;
  border-radius: var(--radio-control);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--duracion) var(--curva);
}
.campana-fila:hover {
  background: var(--color-hundido);
}
.campana-fila-nueva {
  background: var(--color-acento-tenue);
}
/* El ícono de cada tipo (llegó, cambió, se liberó) y, si no se ha visto,
   el punto rojo en su esquina. */
.campana-tipo {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--avatar-md);
  height: var(--avatar-md);
  border-radius: var(--radio-pastilla);
  background: var(--color-hundido);
  color: var(--color-texto-suave);
}
.campana-fila:hover .campana-tipo,
.campana-fila-nueva .campana-tipo {
  background: var(--color-tarjeta);
  color: var(--color-texto);
}
.campana-punto {
  position: absolute;
  top: 0;
  right: 0;
  width: var(--punto);
  height: var(--punto);
  border-radius: var(--radio-pastilla);
}
.campana-fila-nueva .campana-punto {
  background: var(--color-nuevo);
  box-shadow: 0 0 0 var(--borde-grueso) var(--color-acento-tenue);
}
/* Todo completo ("Fernanda cambió su cita", "… · Hay 2 en espera"): baja de renglón. */
.campana-fila .fila-titulo,
.campana-fila .fila-detalle {
  white-space: normal;
}
.campana-cuando {
  flex: none;
  align-self: flex-start;
  margin-top: var(--espacio-0);
  color: var(--color-texto-suave);
  font-family: var(--fuente-cifras);
  font-size: var(--texto-xs);
  white-space: nowrap;
}
.campana-estado {
  color: var(--color-texto-suave);
  font-size: var(--texto-xs);
}
/* Etapa 6k: la opinión baja no es un botón; trae WhatsApp y Llamar. */
.campana-fila-opinion {
  flex-wrap: wrap;
  align-items: flex-start;
  cursor: default;
}
.campana-fila-opinion > .fila-texto {
  flex: 1 1 0;
}
.campana-fila-opinion:hover {
  background: transparent;
}
.campana-fila-opinion.campana-fila-nueva:hover {
  background: var(--color-acento-tenue);
}
/* Debajo del texto, a todo lo ancho (así caben las dos juntas). */
.campana-acciones {
  display: flex;
  flex: 1 0 100%;
  flex-wrap: wrap;
  gap: var(--espacio-2);
}
.campana-vacio,
.campana-nota {
  margin: 0;
  color: var(--color-texto-suave);
  font-size: var(--texto-sm);
}
.campana-nota {
  font-size: var(--texto-xs);
}
.campana-cargando {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
  padding: var(--espacio-2);
}

/* "Karla · Recepción": siempre a la vista para no agendar con la cuenta de otro. */
.quien-conectado {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
  min-height: var(--toque-min);
  padding: var(--espacio-1) var(--espacio-3) var(--espacio-1) var(--espacio-1);
  border: var(--borde-fino) solid var(--color-linea);
  border-radius: var(--radio-pastilla);
  background: var(--color-tarjeta);
  font-size: var(--texto-sm);
  white-space: nowrap;
  cursor: pointer;
  /* Etapa 6n: un nombre largo se corta con "…" (sin deslizar la pantalla de lado). */
  min-width: 0;
  max-width: 100%;
}
/* En celular, nombre y rol en dos renglones para que siempre quepan. */
.quien-conectado-texto {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: var(--interlineado-apretado);
  text-align: left;
}
.quien-conectado-nombre {
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: var(--peso-fuerte);
}
.quien-conectado-rol {
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--color-texto-suave);
  font-size: var(--texto-xs);
}
@media (min-width: 768px) {
  .quien-conectado-texto {
    flex-direction: row;
    gap: var(--espacio-1);
    line-height: inherit;
  }
  .quien-conectado-rol {
    font-size: inherit;
  }
  .quien-conectado-rol::before {
    content: "· ";
  }
}

.boton-cambiar-usuario {
  flex: none;
  min-height: var(--alto-control);
}
/* En tablet no cabe el texto junto a lo demás: solo el ícono, redondo. */
@media (max-width: 1099px) {
  .boton-cambiar-usuario {
    width: var(--alto-control);
    padding: 0;
    border-radius: var(--radio-pastilla);
  }
  .boton-cambiar-usuario-texto {
    display: none;
  }
}

/* Barra inferior (celular): Agenda · Clientes · Cobrar · Panel */
.barra-inferior {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--capa-barra);
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  height: calc(var(--alto-barra-inferior) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  border-top: var(--borde-fino) solid var(--color-linea);
  background: var(--color-tarjeta);
}
.barra-inferior-enlace {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-1);
  color: var(--color-texto-suave);
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
button.barra-inferior-enlace {
  padding: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
}
.barra-inferior-enlace > .icono {
  box-sizing: content-box;
  padding: var(--espacio-1) var(--espacio-5);
  border-radius: var(--radio-pastilla);
  transition: background-color var(--duracion) var(--curva);
}
.barra-inferior-enlace[aria-current="page"] {
  color: var(--color-texto);
}
.barra-inferior-enlace[aria-current="page"] > .icono {
  background: var(--color-acento-tenue);
  color: var(--color-acento-texto);
}
@media (min-width: 768px) {
  .barra-inferior {
    display: none;
  }
}

/* Menú lateral (tablet y computadora) */
.menu-lateral {
  display: none;
  flex-direction: column;
  gap: var(--espacio-1);
  width: var(--ancho-lateral);
  padding: var(--espacio-4) var(--espacio-3);
  border-right: var(--borde-fino) solid var(--color-linea);
  background: var(--color-tarjeta);
}
@media (min-width: 768px) {
  .menu-lateral {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: var(--capa-barra);
    display: flex;
    /* Con muchas opciones (o la pantalla con zoom) el menú se recorre solo,
       sin mover la página. */
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}
/* Arriba: el negocio y el botón para compactar el menú. */
.menu-lateral-cabeza {
  display: flex;
  align-items: center;
  gap: var(--espacio-1);
  padding: var(--espacio-1) 0 var(--espacio-2) var(--espacio-3);
}
.menu-lateral-cabeza > .encabezado-negocio {
  flex: 1;
  min-width: 0;
}
.menu-lateral-compactar {
  color: var(--color-texto-suave);
}
.menu-lateral-negocio {
  padding: var(--espacio-2) var(--espacio-3) var(--espacio-3);
}
/* El menú va por secciones: Mostrador, Mi negocio… */
.menu-lateral-seccion {
  padding: var(--espacio-4) var(--espacio-3) var(--espacio-1);
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--letras-etiqueta);
  text-transform: uppercase;
  color: var(--color-texto-suave);
}
.menu-lateral-enlace {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--espacio-3);
  width: 100%;
  min-height: var(--alto-control);
  padding: 0 var(--espacio-3);
  border: 0;
  border-radius: var(--radio-control);
  background: transparent;
  color: var(--color-texto-suave);
  font: inherit;
  font-weight: var(--peso-fuerte);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duracion) var(--curva), color var(--duracion) var(--curva);
}
.menu-lateral-texto {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.menu-lateral-enlace:hover {
  background: var(--color-hundido);
  color: var(--color-texto);
}
.menu-lateral-enlace[aria-current="page"] {
  background: var(--color-acento-tenue);
  color: var(--color-texto);
}
.menu-lateral-enlace[aria-current="page"] > .icono {
  color: var(--color-acento-texto);
}

/* Grupos (Dinero, Productos, Equipo): se abren y se cierran. */
.menu-lateral-grupo {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: var(--espacio-1);
}
.menu-lateral-grupo-boton.tiene-actual {
  color: var(--color-texto);
}
.menu-lateral-flecha {
  transition: transform var(--duracion) var(--curva);
}
.menu-lateral-grupo-boton[aria-expanded="true"] > .menu-lateral-flecha {
  transform: rotate(180deg);
}
/* Las opciones del grupo cuelgan de un filete, como renglones de libreta. */
.menu-lateral-sub {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-1);
  margin-left: calc(var(--espacio-3) + var(--icono-md) / 2);
  padding-left: var(--espacio-3);
  border-left: var(--borde-fino) solid var(--color-linea);
}
.menu-lateral-grupo:not([data-abierto]) > .menu-lateral-sub {
  display: none;
}
.menu-lateral-sub-titulo {
  display: none;
}
.menu-lateral-subenlace {
  display: flex;
  align-items: center;
  min-height: var(--toque-min);
  padding: 0 var(--espacio-3);
  border-radius: var(--radio-control);
  color: var(--color-texto-suave);
  font-weight: var(--peso-normal);
  text-decoration: none;
  transition: background-color var(--duracion) var(--curva), color var(--duracion) var(--curva);
}
.menu-lateral-subenlace:hover {
  background: var(--color-hundido);
  color: var(--color-texto);
}
.menu-lateral-subenlace[aria-current="page"] {
  background: var(--color-acento-tenue);
  color: var(--color-texto);
  font-weight: var(--peso-fuerte);
}

.menu-lateral-pie {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
  margin-top: auto;
  padding-top: var(--espacio-4);
  border-top: var(--borde-fino) solid var(--color-linea);
}
.menu-lateral-globo {
  display: none;
}

/* ── Menú compacto: solo íconos ──
   data-menu-compacto va en <html> (o en una maqueta de estilos.html). El
   ancho cambia de golpe (no se anima) para que la agenda no brinque. */
[data-menu-compacto] .menu-lateral {
  width: var(--ancho-lateral-compacto);
  padding-right: var(--espacio-2);
  padding-left: var(--espacio-2);
}
[data-menu-compacto] .menu-lateral-cabeza {
  flex-direction: column;
  padding: var(--espacio-1) 0 var(--espacio-2);
}
[data-menu-compacto] .menu-lateral-cabeza > .encabezado-negocio {
  flex: none;
}
[data-menu-compacto] .menu-lateral-cabeza > .encabezado-negocio > span:not(.logo-inicial),
[data-menu-compacto] .menu-lateral-enlace > .menu-lateral-texto,
[data-menu-compacto] .menu-lateral-seccion > .menu-lateral-texto,
[data-menu-compacto] .menu-lateral-pie .menu-lateral-texto,
[data-menu-compacto] .menu-lateral-flecha {
  display: none;
}
[data-menu-compacto] .menu-lateral-compactar > .icono {
  transform: scaleX(-1);
}
/* Las secciones quedan como un filete. */
[data-menu-compacto] .menu-lateral-seccion {
  margin: var(--espacio-2) var(--espacio-2) 0;
  padding: var(--espacio-2) 0 0;
  border-top: var(--borde-fino) solid var(--color-linea);
}
[data-menu-compacto] .menu-lateral-enlace {
  justify-content: center;
  padding: 0;
}
[data-menu-compacto] .menu-lateral-grupo-boton.tiene-actual {
  background: var(--color-acento-tenue);
}
[data-menu-compacto] .menu-lateral-grupo-boton.tiene-actual > .icono {
  color: var(--color-acento-texto);
}
[data-menu-compacto] .menu-lateral-grupo-boton[aria-expanded="true"] {
  background: var(--color-hundido);
  color: var(--color-texto);
}
[data-menu-compacto] .menu-lateral-pie .boton {
  padding: 0;
}
/* El grupo abre su lista a un lado, a la altura de su botón. */
[data-menu-compacto] .menu-lateral-sub {
  display: none;
}
[data-menu-compacto] .menu-lateral-grupo[data-flotante] > .menu-lateral-sub {
  position: fixed;
  top: var(--flotante-arriba, var(--espacio-2));
  left: calc(var(--ancho-lateral-compacto) + var(--espacio-2));
  z-index: var(--capa-flotante);
  display: flex;
  width: var(--ancho-menu-flotante);
  margin: 0;
  padding: var(--espacio-2);
  border: var(--borde-fino) solid var(--color-linea);
  border-radius: var(--radio-tarjeta);
  background: var(--color-tarjeta);
  box-shadow: var(--sombra-3);
}
[data-menu-compacto] .menu-lateral-grupo[data-flotante] .menu-lateral-sub-titulo {
  display: block;
  padding: var(--espacio-1) var(--espacio-3) var(--espacio-2);
  border-bottom: var(--borde-fino) solid var(--color-linea);
  font-family: var(--fuente-titulo);
  font-weight: var(--peso-titulo);
  color: var(--color-texto);
}
/* Globito con el nombre de cada ícono (ratón y teclado). */
[data-menu-compacto] .menu-lateral-globo:not([hidden]) {
  position: fixed;
  top: var(--globo-arriba, 0);
  left: calc(var(--ancho-lateral-compacto) + var(--espacio-1));
  z-index: var(--capa-flotante);
  display: block;
  padding: var(--espacio-1) var(--espacio-2);
  border-radius: var(--radio-celda);
  background: var(--color-texto);
  color: var(--color-tarjeta);
  font-size: var(--texto-sm);
  font-weight: var(--peso-fuerte);
  white-space: nowrap;
  pointer-events: none;
  transform: translateY(-50%);
}

/* Pie "Hecho por Localiapps" */
.pie-localiapps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--espacio-2) var(--espacio-5);
  padding: var(--espacio-6) var(--margen-pantalla) calc(var(--espacio-6) + env(safe-area-inset-bottom));
  font-size: var(--texto-xs);
  color: var(--color-texto-suave);
}
.pie-localiapps a {
  color: inherit;
  font-weight: var(--peso-fuerte);
  text-decoration: none;
}
.pie-localiapps a:hover {
  color: var(--marca-acento);
}
.pie-localiapps-marca {
  color: var(--marca-acento-texto);
}

/* ─── Personalización ───────────────────────────────────────────────── */

/* Las 8 paletas (Configuración → Página). Cada opción trae data-paleta: se
   pinta con su propio papel, tinta, acento y detalle (de noche, su noche). */
.selector-paleta {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--ancho-opcion-paleta), 1fr));
  gap: var(--espacio-2);
}
.paleta-opcion {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--espacio-2);
  min-height: var(--alto-control-grande);
  padding: var(--espacio-3);
  border: var(--borde-fino) solid var(--color-linea);
  border-radius: var(--radio-control);
  background: var(--color-fondo);
  color: var(--color-texto);
  text-align: left;
  cursor: pointer;
  transition: box-shadow var(--duracion) var(--curva), border-color var(--duracion) var(--curva);
}
.paleta-opcion:hover {
  border-color: var(--color-linea-control);
}
.paleta-opcion[aria-pressed="true"] {
  border-color: var(--color-texto);
  box-shadow: inset 0 0 0 var(--borde-fino) var(--color-texto);
}
.paleta-opcion:disabled {
  cursor: not-allowed;
}
.paleta-opcion-muestras {
  display: flex;
  flex: none;
}
.paleta-opcion-acento,
.paleta-opcion-detalle {
  width: var(--muestra-paleta);
  height: var(--muestra-paleta);
  border-radius: var(--radio-pastilla);
  box-shadow: 0 0 0 var(--borde-grueso) var(--color-fondo);
}
.paleta-opcion-acento {
  background: var(--color-acento);
}
.paleta-opcion-detalle {
  margin-left: calc(var(--muestra-paleta) / -3);
  background: var(--color-detalle);
}
.paleta-opcion-texto {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: var(--interlineado-medio);
}
.paleta-opcion-nombre {
  font-family: var(--fuente-titulo);
  font-weight: var(--peso-titulo);
}
.paleta-opcion-giro {
  font-size: var(--texto-xs);
  color: var(--color-texto-suave);
}
.paleta-opcion-marca {
  position: absolute;
  top: var(--espacio-3);
  right: var(--espacio-3);
  color: var(--color-texto);
  opacity: 0;
  transition: opacity var(--duracion) var(--curva);
}
.paleta-opcion[aria-pressed="true"] .paleta-opcion-marca {
  opacity: 1;
}

/* Logo grande (vista previa al subirlo) */
.logo-grande {
  width: var(--avatar-lg);
  height: var(--avatar-lg);
  border-radius: var(--radio-control);
}
img.logo-grande {
  object-fit: contain;
  background: var(--color-tarjeta);
  box-shadow: 0 0 0 var(--borde-fino) var(--color-linea);
}
.logo-inicial.logo-grande {
  font-size: var(--texto-lg);
}

/* "Otro color": el selector de color del navegador, del tamaño de las muestras */
.entrada-color {
  width: var(--toque-min);
  height: var(--toque-min);
  padding: var(--espacio-1);
  border: var(--borde-fino) solid var(--color-linea-control);
  border-radius: var(--radio-pastilla);
  background: var(--color-tarjeta);
  cursor: pointer;
}
.entrada-color::-webkit-color-swatch-wrapper {
  padding: 0;
}
.entrada-color::-webkit-color-swatch {
  border: 0;
  border-radius: var(--radio-pastilla);
}

/* Color de un servicio en la lista */
.punto-servicio {
  width: var(--icono-md);
  height: var(--icono-md);
  flex: none;
  border-radius: var(--radio-pastilla);
  background: var(--color-servicio, var(--color-hundido));
}
.punto-servicio.sin-color {
  border: var(--borde-fino) dashed var(--color-linea-control);
  background: transparent;
}

/* Vista previa de un mensaje de WhatsApp */
.vista-mensaje {
  padding: var(--espacio-3) var(--espacio-4);
  border-radius: var(--radio-control);
  background: var(--color-hundido);
  color: var(--color-texto);
  font-size: var(--texto-sm);
  line-height: var(--interlineado-medio);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Grupo de casillas ("¿Quién lo hace?") */
.grupo-casillas {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.grupo-casillas > .campo-etiqueta {
  padding: 0;
  margin-bottom: var(--espacio-1);
}

/* Número con su unidad a la derecha ("10 min") */
.entrada-con-unidad {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
}
.entrada-numero {
  max-width: calc(var(--ancho-hora) * 2);
}


/* ═══════════════════════════════════════════════════════════════════════
   Página pública de reservas (etapa 5): perfil del negocio y cita en pasos
   ═══════════════════════════════════════════════════════════════════════ */

/* Controles del navegador del color del tema de la página pública */
[data-tema="publico-oscuro"] {
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  [data-tema="publico"] {
    color-scheme: dark;
  }
}

/* ─── Perfil: portada, logo y nombre ─── */

.perfil-portada {
  position: relative;
  margin: 0;
  aspect-ratio: var(--proporcion-portada);
  max-height: var(--alto-portada-max);
  overflow: hidden;
  background: var(--portada-sin-foto);
}
.perfil-portada > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.perfil-portada::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--portada-sombra), transparent 55%);
  pointer-events: none;
}

/* Compartir la página: arriba a la derecha, sobre la portada si la hay. */
.perfil-compartir {
  position: absolute;
  top: var(--espacio-3);
  right: var(--espacio-3);
  z-index: var(--capa-esquina);
}

.perfil-identidad {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--espacio-2);
}
/* Con portada, el logo se monta sobre su borde de abajo. */
.perfil-portada + .perfil-identidad {
  margin-top: calc(var(--logo-perfil) / -2);
  position: relative;
}
.perfil-logo {
  width: var(--logo-perfil);
  height: var(--logo-perfil);
  flex: none;
  border: var(--borde-logo) solid var(--color-fondo);
  border-radius: var(--radio-pastilla);
  background: var(--color-tarjeta);
  object-fit: cover;
  box-shadow: var(--sombra-2);
}
.perfil-logo.logo-inicial {
  background: var(--color-acento);
  color: var(--color-sobre-acento);
  font-size: var(--texto-2xl);
}
.perfil-nombre {
  font-family: var(--fuente-titulo);
  font-size: var(--texto-xl);
  font-weight: var(--peso-titulo);
  letter-spacing: var(--letras-titulo);
  line-height: var(--interlineado-apretado);
  overflow-wrap: anywhere;
}
.perfil-colonia {
  color: var(--color-texto-suave);
}
/* Insignia con el giro del negocio ("Barbería", "Salón de uñas"). */
.insignia-giro {
  display: inline-flex;
  align-items: center;
  padding: var(--espacio-1) var(--espacio-3);
  border: var(--borde-fino) solid var(--color-linea);
  border-radius: var(--radio-pastilla);
  background: var(--color-hundido);
  color: var(--color-texto);
  font-size: var(--texto-sm);
  font-weight: var(--peso-fuerte);
  line-height: var(--interlineado-apretado);
  white-space: nowrap;
}
@media (min-width: 900px) {
  .perfil-nombre {
    font-size: var(--texto-2xl);
  }
}

/* ─── Cliente que regresa: "Reservar lo mismo" ─── */

.lo-mismo {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-1);
  padding: var(--espacio-4);
  border: var(--borde-fino) solid var(--color-linea);
  border-radius: var(--radio-tarjeta);
  background: var(--color-tarjeta);
}
.lo-mismo-titulo {
  font-family: var(--fuente-titulo);
  font-size: var(--texto-md);
  font-weight: var(--peso-titulo);
}
.lo-mismo-detalle {
  margin-bottom: var(--espacio-2);
  color: var(--color-texto-suave);
}

/* "Revise su cita": hasta cuándo puede cancelar sin que cuente como falta. */
.aviso-cancelacion {
  padding: var(--espacio-3) var(--espacio-4);
  border-radius: var(--radio-control);
  background: var(--color-hundido);
  font-size: var(--texto-sm);
}

/* ─── Calificación y reseñas ─── */

.calificacion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-1) var(--espacio-2);
}
.calificacion-numero {
  font-family: var(--fuente-cifras);
  font-size: var(--texto-lg);
  font-weight: var(--peso-fuerte);
}
.estrellas {
  color: var(--color-estrella);
  letter-spacing: var(--espacio-0);
  white-space: nowrap;
}
.estrellas-apagadas {
  color: var(--color-linea-control);
}
.calificacion-total {
  color: var(--color-texto-suave);
  font-size: var(--texto-sm);
}

/* Tarjetas que se deslizan de lado (llegan hasta la orilla de la pantalla). */
.resenas {
  display: flex;
  gap: var(--espacio-3);
  margin: 0 calc(var(--margen-pantalla) * -1);
  padding: var(--espacio-1) var(--margen-pantalla) var(--espacio-2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 var(--margen-pantalla);
  scrollbar-width: none;
}
.resenas::-webkit-scrollbar {
  display: none;
}
.resena {
  display: flex;
  flex: 0 0 var(--ancho-resena);
  flex-direction: column;
  gap: var(--espacio-2);
  padding: var(--espacio-4);
  border: var(--borde-fino) solid var(--color-linea);
  border-radius: var(--radio-tarjeta);
  background: var(--color-tarjeta);
  scroll-snap-align: start;
}
.resena-autor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-2);
  font-weight: var(--peso-fuerte);
}
.resena-texto {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--lineas-resena);
  overflow: hidden;
  color: var(--color-texto-suave);
  font-size: var(--texto-sm);
  line-height: var(--interlineado-medio);
}

/* ─── Botones de contacto: WhatsApp · Cómo llegar · Instagram · Llamar ─── */

.acciones-perfil {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(var(--toque-min) * 1.4), 1fr));
  gap: var(--espacio-2);
}
.accion-perfil {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-1);
  min-height: calc(var(--toque-min) * 1.5);
  padding: var(--espacio-2) var(--espacio-1);
  border-radius: var(--radio-control);
  background: var(--color-hundido);
  color: var(--color-texto);
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
  text-align: center;
  text-decoration: none;
  transition: background-color var(--duracion) var(--curva);
}
.accion-perfil:hover {
  background: var(--color-acento-tenue);
}
.accion-perfil > .icono {
  color: var(--color-acento-texto);
}

/* Dirección que abre Google Maps */
.perfil-direccion {
  display: flex;
  align-items: flex-start;
  gap: var(--espacio-3);
  min-height: var(--toque-min);
  padding: var(--espacio-2) 0;
  color: var(--color-texto);
  text-decoration: none;
}
.perfil-direccion > .icono {
  margin-top: var(--espacio-0);
  color: var(--color-acento-texto);
}
.perfil-direccion:hover .perfil-direccion-texto {
  text-decoration: underline;
}

/* ─── Plegables (horario de la semana y categorías de servicios) ─── */

.plegable {
  border-bottom: var(--borde-fino) solid var(--color-linea);
}
.plegable > summary {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  min-height: calc(var(--toque-min) + var(--espacio-2));
  cursor: pointer;
  list-style: none;
  font-weight: var(--peso-fuerte);
}
.plegable > summary::-webkit-details-marker {
  display: none;
}
.plegable > summary::after {
  content: "";
  width: var(--espacio-2);
  height: var(--espacio-2);
  margin-left: auto;
  margin-right: var(--espacio-1);
  border-right: var(--borde-grueso) solid var(--color-texto-suave);
  border-bottom: var(--borde-grueso) solid var(--color-texto-suave);
  transform: rotate(45deg);
  transition: transform var(--duracion) var(--curva);
}
.plegable[open] > summary::after {
  transform: rotate(-135deg);
}
.plegable-detalle {
  color: var(--color-texto-suave);
  font-size: var(--texto-sm);
  font-weight: var(--peso-normal);
}
.plegable-cuerpo {
  padding-bottom: var(--espacio-3);
}

.horario-semana {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--espacio-2) var(--espacio-6);
  margin: 0;
  font-size: var(--texto-sm);
}
.horario-semana dt {
  color: var(--color-texto-suave);
}
.horario-semana dd {
  margin: 0;
  font-family: var(--fuente-cifras);
}
.horario-semana .es-hoy {
  color: var(--color-texto);
  font-weight: var(--peso-fuerte);
}

/* ─── Barra de arriba: regresar, lo escogido y el avance ─── */

.barra-reserva {
  position: sticky;
  top: 0;
  z-index: var(--capa-barra);
  background: var(--color-fondo);
  border-bottom: var(--borde-fino) solid var(--color-linea);
}
.barra-reserva-fila {
  display: flex;
  align-items: center;
  gap: var(--espacio-1);
  min-height: var(--alto-encabezado);
  padding: var(--espacio-1) var(--margen-pantalla) var(--espacio-1) var(--espacio-1);
  padding-top: calc(var(--espacio-1) + env(safe-area-inset-top));
}
.chips-reserva {
  display: flex;
  flex: 1;
  gap: var(--espacio-1);
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.chips-reserva::-webkit-scrollbar {
  display: none;
}
.chip-reserva {
  display: inline-flex;
  flex: none;
  align-items: center;
  max-width: calc(var(--ancho-resena) * 0.8);
  min-height: var(--toque-min);
  padding: 0 var(--espacio-3);
  border: 0;
  border-radius: var(--radio-pastilla);
  background: var(--color-hundido);
  color: var(--color-texto);
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.chip-reserva:hover {
  background: var(--color-acento-tenue);
}
.progreso {
  height: var(--alto-progreso);
  background: var(--color-hundido);
  overflow: hidden;
}
.progreso-relleno {
  height: 100%;
  background: var(--color-acento);
  transform: scaleX(var(--avance, 0));
  transform-origin: left center;
  transition: transform var(--duracion) var(--curva);
}

/* "Su horario está apartado 9:41 minutos" */
.contador-apartado {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-2);
  padding: var(--espacio-1) var(--margen-pantalla) var(--espacio-2);
  color: var(--color-texto-suave);
  font-size: var(--texto-sm);
}
.contador-apartado > .icono {
  color: var(--color-acento-texto);
}
.contador-apartado.poco-tiempo {
  color: var(--aviso-atencion);
}

/* ─── Pasos: entran de lado en 150 ms ─── */

.paso {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-5);
}
.paso-adelante {
  animation: paso-desde-derecha var(--duracion) var(--curva);
}
.paso-atras {
  animation: paso-desde-izquierda var(--duracion) var(--curva);
}
@keyframes paso-desde-derecha {
  from { opacity: 0; transform: translateX(var(--desplazamiento-paso)); }
  to { opacity: 1; transform: none; }
}
@keyframes paso-desde-izquierda {
  from { opacity: 0; transform: translateX(calc(var(--desplazamiento-paso) * -1)); }
  to { opacity: 1; transform: none; }
}
.paso-titulo {
  font-family: var(--fuente-titulo);
  font-size: var(--texto-lg);
  font-weight: var(--peso-titulo);
  letter-spacing: var(--letras-titulo);
  scroll-margin-top: calc(var(--alto-encabezado) + var(--espacio-6));
}
.paso-titulo:focus {
  outline: none;
}
.paso-titulo:focus-visible {
  outline: var(--foco-ancho) solid var(--color-foco);
}

/* ─── Paso 1: servicios ─── */

.lista-servicios {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.opcion-servicio-publica {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  width: 100%;
  min-height: calc(var(--toque-min) + var(--espacio-4));
  padding: var(--espacio-3) var(--espacio-1);
  border: 0;
  border-bottom: var(--borde-fino) solid var(--color-linea);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--duracion) var(--curva);
}
.lista-servicios > li:last-child > .opcion-servicio-publica {
  border-bottom: 0;
}
.opcion-servicio-publica:hover {
  background: var(--color-hundido);
}
.opcion-servicio-publica[aria-pressed="true"] {
  background: var(--color-acento-tenue);
}
.opcion-servicio-publica > .icono {
  color: var(--color-texto-suave);
}
.opcion-servicio-publica:disabled {
  cursor: not-allowed;
  color: var(--color-texto-suave);
}
.opcion-servicio-publica:disabled:hover {
  background: transparent;
}
.opcion-servicio-publica:disabled .foto-servicio {
  opacity: 0.5;
}
.foto-servicio {
  width: var(--foto-servicio);
  height: var(--foto-servicio);
  flex: none;
  border-radius: var(--radio-control);
  background: var(--color-hundido);
  object-fit: cover;
}
.opcion-servicio-texto {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--espacio-0);
  min-width: 0;
}
.opcion-servicio-titulo {
  font-weight: var(--peso-fuerte);
  line-height: var(--interlineado-medio);
}
.opcion-servicio-datos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-1) var(--espacio-3);
  color: var(--color-texto-suave);
  font-size: var(--texto-sm);
}
.nota-sin-horario {
  color: var(--color-texto-suave);
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--letras-etiqueta);
  text-transform: uppercase;
}

/* ─── Paso 2: estilistas ─── */

.lista-estilistas {
  display: grid;
  gap: var(--espacio-2);
}
@media (min-width: 600px) {
  .lista-estilistas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.opcion-estilista {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  min-height: calc(var(--avatar-estilista) + var(--espacio-6));
  padding: var(--espacio-3) var(--espacio-4);
  border: var(--borde-fino) solid var(--color-linea);
  border-radius: var(--radio-tarjeta);
  background: var(--color-tarjeta);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--duracion) var(--curva), background-color var(--duracion) var(--curva);
}
.opcion-estilista:hover {
  border-color: var(--color-linea-control);
}
.opcion-estilista[aria-pressed="true"] {
  border-color: var(--color-acento);
  box-shadow: inset 0 0 0 var(--borde-fino) var(--color-acento);
}
/* "El que esté libre": primero y distinto */
.opcion-libre {
  border-style: dashed;
  background: var(--color-acento-tenue);
}
.opcion-libre .avatar-estilista {
  background: var(--color-acento);
  color: var(--color-sobre-acento);
}
.opcion-estilista-texto {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.opcion-estilista-nombre {
  font-weight: var(--peso-fuerte);
}
.opcion-estilista-detalle {
  color: var(--color-texto-suave);
  font-size: var(--texto-sm);
}
.avatar-estilista {
  display: inline-grid;
  place-items: center;
  width: var(--avatar-estilista);
  height: var(--avatar-estilista);
  flex: none;
  border-radius: var(--radio-pastilla);
  background: var(--color-hundido);
  color: var(--color-texto);
  font-family: var(--fuente-titulo);
  font-size: var(--texto-md);
  font-weight: var(--peso-titulo);
  object-fit: cover;
}
.avatar-chico {
  width: var(--avatar-md);
  height: var(--avatar-md);
  font-size: var(--texto-sm);
}
/* Iniciales sobre el color de cada quien (nunca un hueco gris) */
.avatar-naranja  { background: color-mix(in srgb, var(--avatar-naranja) 18%, var(--color-tarjeta));  color: var(--avatar-naranja-texto); }
.avatar-azul     { background: color-mix(in srgb, var(--avatar-azul) 18%, var(--color-tarjeta));     color: var(--avatar-azul-texto); }
.avatar-rosa     { background: color-mix(in srgb, var(--avatar-rosa) 18%, var(--color-tarjeta));     color: var(--avatar-rosa-texto); }
.avatar-verde    { background: color-mix(in srgb, var(--avatar-verde) 18%, var(--color-tarjeta));    color: var(--avatar-verde-texto); }
.avatar-morado   { background: color-mix(in srgb, var(--avatar-morado) 18%, var(--color-tarjeta));   color: var(--avatar-morado-texto); }
.avatar-amarillo { background: color-mix(in srgb, var(--avatar-amarillo) 18%, var(--color-tarjeta)); color: var(--avatar-amarillo-texto); }
.avatar-rojo     { background: color-mix(in srgb, var(--avatar-rojo) 18%, var(--color-tarjeta));     color: var(--avatar-rojo-texto); }
.avatar-grafito  { background: color-mix(in srgb, var(--avatar-grafito) 18%, var(--color-tarjeta));  color: var(--avatar-grafito-texto); }

/* ─── Paso 3: calendario del mes y horas ─── */

.calendario {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
}
.calendario-mes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-2);
}
.calendario-mes-nombre {
  font-weight: var(--peso-fuerte);
}
.calendario-rejilla {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--espacio-1);
  text-align: center;
}
.calendario-cabeza {
  padding: var(--espacio-1) 0;
  color: var(--color-texto-suave);
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
}
.dia {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 100%;
  min-height: var(--celda-calendario);
  padding: 0;
  border: 0;
  border-radius: var(--radio-control);
  background: transparent;
  color: var(--color-texto);
  font-family: var(--fuente-cifras);
  font-size: var(--texto-sm);
  font-weight: var(--peso-fuerte);
  cursor: pointer;
  transition: background-color var(--duracion) var(--curva);
}
.dia:hover {
  background: var(--color-hundido);
}
.dia::after {
  content: "";
  position: absolute;
  bottom: var(--espacio-1);
  left: 50%;
  width: var(--espacio-1);
  height: var(--espacio-1);
  border-radius: var(--radio-pastilla);
  transform: translateX(-50%);
}
.dia-con-cupo::after {
  background: var(--color-acento);
}
.dia-pocos::after {
  background: var(--color-pocos);
}
.dia:disabled {
  color: var(--color-texto-suave);
  font-weight: var(--peso-normal);
  cursor: default;
}
.dia:disabled:hover {
  background: transparent;
}
.dia.dia-sin-cupo,
.dia.dia-lleno {
  text-decoration: line-through;
  text-decoration-color: var(--color-linea-control);
}
/* Lleno (etapa 6a): como "sin horarios", pero se toca para pedir aviso. */
.dia.dia-lleno {
  color: var(--color-texto-suave);
  font-weight: var(--peso-normal);
}
.dia.dia-lleno[aria-pressed="true"] {
  color: var(--color-sobre-acento);
}
.dia.dia-fuera {
  color: var(--color-texto-suave);
}
.dia.dia-cargando {
  background: var(--color-hundido);
}
.dia-hoy {
  box-shadow: inset 0 0 0 var(--borde-fino) var(--color-linea-control);
}
.dia[aria-pressed="true"] {
  background: var(--color-acento);
  color: var(--color-sobre-acento);
}
.dia[aria-pressed="true"]::after {
  background: var(--color-sobre-acento);
}
.leyenda-dias {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-1) var(--espacio-4);
  color: var(--color-texto-suave);
  font-size: var(--texto-xs);
}
.leyenda-dia {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-1);
}
.leyenda-dia::before {
  content: "";
  width: var(--punto);
  height: var(--punto);
  border-radius: var(--radio-pastilla);
  background: var(--color-acento);
}
.leyenda-dia.dia-pocos::before {
  background: var(--color-pocos);
}
.leyenda-dia.dia-sin-cupo::before {
  background: var(--color-linea-control);
}

.grupos-horas {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-4);
}
.grupo-horas-titulo {
  margin-bottom: var(--espacio-2);
  color: var(--color-texto-suave);
  font-size: var(--texto-sm);
  font-weight: var(--peso-fuerte);
}
.rejilla-horas-publica {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--espacio-2);
}
@media (min-width: 600px) {
  .rejilla-horas-publica {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.hora-publica {
  min-height: var(--alto-control);
  padding: 0;
  border: var(--borde-fino) solid var(--color-linea-control);
  border-radius: var(--radio-control);
  background: var(--color-tarjeta);
  color: var(--color-texto);
  font-family: var(--fuente-cifras);
  font-weight: var(--peso-fuerte);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color var(--duracion) var(--curva), border-color var(--duracion) var(--curva);
}
.hora-publica:hover {
  border-color: var(--color-acento);
}
.hora-publica[aria-pressed="true"] {
  border-color: var(--color-acento);
  background: var(--color-acento);
  color: var(--color-sobre-acento);
}
.hora-publica[aria-busy="true"] {
  cursor: progress;
  opacity: 0.7;
}
.aviso-pocos {
  color: var(--aviso-atencion);
  font-size: var(--texto-sm);
  font-weight: var(--peso-fuerte);
}

/* ─── Paso 5: resumen ─── */

.tarjeta-resumen {
  display: flex;
  flex-direction: column;
  padding: var(--espacio-2) var(--espacio-4);
  border: var(--borde-fino) solid var(--color-linea);
  border-radius: var(--radio-tarjeta);
  background: var(--color-tarjeta);
}
.renglon-resumen {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  min-height: calc(var(--toque-min) + var(--espacio-2));
  padding: var(--espacio-2) 0;
  border-bottom: var(--borde-fino) solid var(--color-linea);
}
.renglon-resumen:last-child {
  border-bottom: 0;
}
.renglon-resumen > .icono {
  color: var(--color-texto-suave);
}
.renglon-resumen-texto {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}
.renglon-resumen-principal {
  font-weight: var(--peso-fuerte);
  overflow-wrap: anywhere;
}
.renglon-resumen-detalle {
  color: var(--color-texto-suave);
  font-size: var(--texto-sm);
  overflow-wrap: anywhere;
}
.renglon-resumen-precio {
  font-family: var(--fuente-cifras);
  font-weight: var(--peso-fuerte);
}
.saludo {
  font-family: var(--fuente-titulo);
  font-size: var(--texto-md);
  font-weight: var(--peso-titulo);
  color: var(--color-acento-texto);
}

/* ─── Paso 6: listo ─── */

.listo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espacio-3);
  padding: var(--espacio-4) 0;
  text-align: center;
}
.palomita-listo {
  display: grid;
  place-items: center;
  width: calc(var(--icono-xl) * 1.8);
  height: calc(var(--icono-xl) * 1.8);
  border-radius: var(--radio-pastilla);
  background: var(--color-acento);
  color: var(--color-sobre-acento);
  animation: palomita-entra var(--duracion) var(--curva);
}
.palomita-listo > .icono {
  width: var(--icono-xl);
  height: var(--icono-xl);
  stroke-width: calc(var(--icono-trazo) * 1.4);
}
@keyframes palomita-entra {
  from { opacity: 0; transform: scale(0.6); }
  to { opacity: 1; transform: none; }
}
.folio {
  font-family: var(--fuente-cifras);
  font-size: var(--texto-folio);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--letras-folio);
  line-height: var(--interlineado-apretado);
}
.folio-etiqueta {
  color: var(--color-texto-suave);
  font-size: var(--texto-sm);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--letras-etiqueta);
  text-transform: uppercase;
}
/* PIN recién generado (Personalización → Equipo, etapa 5f): se ve una vez. */
.pin-nuevo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espacio-1);
  padding: var(--espacio-4);
  border-radius: var(--radio-tarjeta);
  background: var(--color-acento-tenue);
  text-align: center;
}
.listo-acciones {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
  width: 100%;
}

/* "Usted ya confirmó su asistencia." en el enlace de la cita (etapa 6k). */
.confirmo-listo {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
  font-weight: var(--peso-fuerte);
  color: var(--estado-atendida-texto);
}

/* Encuesta después de la cita (etapa 6k): "¿Cómo le fue con Karla?" */
.encuesta {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
}
.encuesta-gracias {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  margin: 0;
  font-weight: var(--peso-fuerte);
}
.encuesta-gracias > .icono {
  flex: none;
  color: var(--estado-atendida-texto);
}
/* Calificación de 1 a 5: cinco botones de 44 px (radios por dentro). */
.encuesta-calificacion {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.encuesta-calificacion > legend {
  margin-bottom: var(--espacio-3);
  padding: 0;
}
.encuesta-opciones {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--espacio-2);
}
.encuesta-opcion {
  position: relative;
  display: block;
  cursor: pointer;
}
.encuesta-opcion > input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.encuesta-numero {
  display: grid;
  place-items: center;
  min-height: var(--toque-min);
  border: var(--borde-fino) solid var(--color-linea-control);
  border-radius: var(--radio-control);
  background: var(--color-tarjeta);
  font-size: var(--texto-lg);
  font-weight: var(--peso-fuerte);
  transition: background-color var(--duracion) var(--curva), border-color var(--duracion) var(--curva);
}
.encuesta-opcion:hover .encuesta-numero {
  background: var(--color-hundido);
}
.encuesta-opcion > input:checked + .encuesta-numero {
  border-color: var(--color-acento);
  background: var(--color-acento);
  color: var(--color-sobre-acento);
}
.encuesta-opcion > input:focus-visible + .encuesta-numero {
  outline: var(--foco-ancho) solid var(--color-foco);
  outline-offset: var(--foco-separacion);
}
.encuesta-opcion > input:disabled + .encuesta-numero {
  color: var(--color-texto-suave);
  cursor: not-allowed;
}
.encuesta-extremos {
  display: flex;
  justify-content: space-between;
  margin-top: var(--espacio-1);
  color: var(--color-texto-suave);
  font-size: var(--texto-xs);
}
/* Etapa 7: "Su opinión sale en la página…" y "Quitar mi opinión". */
.encuesta-publicada {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--espacio-2);
  padding-top: var(--espacio-3);
  border-top: var(--borde-fino) solid var(--color-linea);
}
.encuesta-publicada > p {
  margin: 0;
}

/* Etapa 6k (Panel y ficha del cliente): la calificación de una opinión
   ("★ 4", o el promedio "★ 4.6"); las de 1 a 3, en color de atención. */
.opinion-nota {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--espacio-1);
  padding: 0 var(--espacio-2);
  border-radius: var(--radio-pastilla);
  background: var(--color-hundido);
  color: var(--color-texto);
  font-size: var(--texto-sm);
  font-weight: var(--peso-fuerte);
  white-space: nowrap;
}
.opinion-nota > .icono {
  color: var(--color-estrella);
}
.opinion-nota.opinion-baja {
  background: var(--aviso-atencion-fondo);
  color: var(--aviso-atencion);
}
.opinion-nota.opinion-baja > .icono {
  color: currentColor;
}
/* El detalle completo, en varias líneas si hace falta ("18 citas · 2 no
   llegaron · 1 canceló tarde…"), y el comentario completo. */
.fila-detalle.fila-detalle-completo {
  white-space: normal;
}
.opinion-comentario {
  font-size: var(--texto-sm);
  overflow-wrap: anywhere;
}
/* "Clientes que más faltan": quien ya llegó al número de faltas del dueño. */
.etiqueta-faltas {
  align-self: flex-start;
  margin-top: var(--espacio-1);
  padding: 0 var(--espacio-2);
  border-radius: var(--radio-pastilla);
  background: var(--aviso-atencion-fondo);
  color: var(--aviso-atencion);
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
}

/* "Cambiar día u hora" en el enlace de la cita (etapa 6a): Antes → Ahora */
.cambio-resumen {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--espacio-1);
  padding: var(--espacio-3) var(--espacio-4);
  border: var(--borde-fino) solid var(--color-linea);
  border-radius: var(--radio-tarjeta);
  background: var(--color-tarjeta);
}
.cambio-resumen-antes,
.cambio-resumen-ahora {
  display: flex;
  flex-direction: column;
}
.cambio-resumen-etiqueta {
  color: var(--color-texto-suave);
  font-size: var(--texto-sm);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--letras-etiqueta);
  text-transform: uppercase;
}
.cambio-resumen-antes .cambio-resumen-cuando {
  color: var(--color-texto-suave);
  text-decoration: line-through;
}
.cambio-resumen-ahora {
  padding: var(--espacio-2) var(--espacio-3);
  border-radius: var(--radio-control);
  background: var(--color-acento-tenue);
}
.cambio-resumen-ahora .cambio-resumen-cuando {
  font-family: var(--fuente-titulo);
  font-size: var(--texto-md);
  font-weight: var(--peso-titulo);
}
.cambio-resumen-ahora .cambio-resumen-etiqueta {
  color: var(--color-acento-texto);
}
.cambio-resumen-flecha {
  align-self: center;
  color: var(--color-texto-suave);
}

/* ─── Barra de abajo: lo escogido y el botón del paso ─── */

.barra-fija {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--capa-barra);
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  min-height: var(--alto-boton-fijo);
  padding: var(--espacio-3) var(--margen-pantalla) calc(var(--espacio-3) + env(safe-area-inset-bottom));
  border-top: var(--borde-fino) solid var(--color-linea);
  background: var(--color-fondo);
}
.barra-fija > .boton {
  flex: 1;
}
.barra-fija-total {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: var(--interlineado-medio);
}
.barra-fija-total + .boton {
  flex: 0 1 auto;
  margin-left: auto;
}
.barra-fija-precio {
  font-family: var(--fuente-cifras);
  font-weight: var(--peso-fuerte);
}
.barra-fija-duracion {
  color: var(--color-texto-suave);
  font-size: var(--texto-sm);
}

/* ─── Tarjeta de resumen a la derecha (900 px o más) ─── */

.resumen-lateral {
  position: sticky;
  top: calc(var(--alto-encabezado) + var(--espacio-6));
  display: flex;
  flex-direction: column;
  gap: var(--espacio-4);
  padding: var(--espacio-5);
  border: var(--borde-fino) solid var(--color-linea);
  border-radius: var(--radio-tarjeta);
  background: var(--color-tarjeta);
  box-shadow: var(--sombra-2);
}
.resumen-lateral-titulo {
  font-family: var(--fuente-titulo);
  font-size: var(--texto-md);
  font-weight: var(--peso-titulo);
}
.resumen-lateral-lista {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
  margin: 0;
}
.resumen-lateral-lista div {
  display: flex;
  justify-content: space-between;
  gap: var(--espacio-3);
}
.resumen-lateral-lista dt {
  color: var(--color-texto-suave);
  font-size: var(--texto-sm);
}
.resumen-lateral-lista dd {
  margin: 0;
  font-weight: var(--peso-fuerte);
  text-align: right;
  overflow-wrap: anywhere;
}
.resumen-lateral-total {
  display: flex;
  justify-content: space-between;
  padding-top: var(--espacio-3);
  border-top: var(--borde-fino) solid var(--color-linea);
  font-weight: var(--peso-fuerte);
}

/* ─── Personalización: subir portada, logo y fotos (etapa 5) ─── */

.subir-imagen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-3) var(--espacio-4);
}
.subir-imagen-controles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
}
.vista-imagen {
  display: grid;
  place-items: center;
  flex: none;
  overflow: hidden;
  background: var(--color-hundido);
  color: var(--color-texto-suave);
  box-shadow: inset 0 0 0 var(--borde-fino) var(--color-linea);
}
.vista-imagen > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vista-portada {
  width: 100%;
  aspect-ratio: var(--proporcion-portada);
  border-radius: var(--radio-control);
}
.subir-portada {
  flex-direction: column;
  align-items: stretch;
}
.vista-logo {
  width: var(--avatar-lg);
  height: var(--avatar-lg);
  border-radius: var(--radio-control);
}
.vista-logo > img {
  object-fit: contain;
  background: var(--color-tarjeta);
}
.vista-foto {
  width: var(--foto-servicio);
  height: var(--foto-servicio);
  border-radius: var(--radio-control);
}
.vista-redonda {
  width: var(--avatar-estilista);
  height: var(--avatar-estilista);
  border-radius: var(--radio-pastilla);
}
.vista-inicial {
  font-family: var(--fuente-titulo);
  font-size: var(--texto-lg);
  font-weight: var(--peso-titulo);
}

/* Personalización → Servicios: arrastrar para ordenar */
.agarradera {
  display: inline-grid;
  place-items: center;
  width: var(--toque-min);
  height: var(--toque-min);
  flex: none;
  padding: 0;
  border: 0;
  border-radius: var(--radio-control);
  background: transparent;
  color: var(--color-texto-suave);
  cursor: grab;
  touch-action: none;
}
.agarradera:hover {
  background: var(--color-hundido);
}
.arrastrando {
  position: relative;
  z-index: var(--capa-flotante);
  background: var(--color-tarjeta);
  box-shadow: var(--sombra-3);
  cursor: grabbing;
}
.categoria-orden {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-1);
  padding: var(--espacio-2) 0;
  border-bottom: var(--borde-fino) solid var(--color-linea);
}
.categoria-orden-titulo {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  font-weight: var(--peso-fuerte);
}

/* Personalización → Servicios → Categorías: nombre editable ahí mismo,
   cuántos servicios tiene, flechas para ordenar y eliminar. */
.lista-categorias .fila {
  gap: var(--espacio-2);
  padding: var(--espacio-2) var(--espacio-2) var(--espacio-2) var(--espacio-3);
}
.fila-categoria .fila-texto {
  gap: var(--espacio-1);
}
.fila-categoria .fila-detalle {
  white-space: normal;
}
.entrada-categoria {
  min-height: var(--toque-min);
  padding: 0 var(--espacio-3);
  font-weight: var(--peso-fuerte);
}
.fila-categoria-acciones {
  display: flex;
  flex: none;
  align-items: center;
}
/* La flecha que ya no puede moverse (la primera no sube, la última no baja). */
.fila-categoria-acciones .boton:disabled {
  background: transparent;
  color: var(--color-linea);
}
.fila-categoria-hueco {
  width: var(--toque-min);
  flex: none;
}
/* "+ Crear categoría" dentro del formulario del servicio */
.categoria-nueva {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-1);
  margin-top: var(--espacio-2);
}
.categoria-nueva-fila {
  display: flex;
  gap: var(--espacio-2);
}
.categoria-nueva-fila .entrada {
  flex: 1;
  min-width: 0;
}
.resena-captura {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
  padding: var(--espacio-4);
  border: var(--borde-fino) solid var(--color-linea);
  border-radius: var(--radio-control);
}
.foto-servicio-chica {
  width: var(--avatar-md);
  height: var(--avatar-md);
  border-radius: var(--radio-celda);
}

/* ─── Caja, gastos y ganancia (etapa 6c) ───────────────────────────── */

/* Renglones de "lo que debería haber" (y de la ganancia del mes) */
.caja-cuentas {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.caja-cuenta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--espacio-3);
  color: var(--color-texto-suave);
}
.caja-cuenta > .cifra {
  color: var(--color-texto);
}

/* Contar el efectivo: billete o moneda, cuántos, y lo que suman */
.conteo {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
}
.conteo-fila {
  display: grid;
  grid-template-columns: var(--ancho-denominacion) minmax(0, 1fr) var(--ancho-denominacion);
  align-items: center;
  gap: var(--espacio-3);
}
.conteo-denominacion {
  display: flex;
  flex-direction: column;
  line-height: var(--interlineado-apretado);
}
.conteo-subtotal {
  text-align: right;
}

/* "Cuadra" · "Sobran $50" · "Faltan $50" */
.caja-diferencia {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  margin: 0;
  font-weight: var(--peso-fuerte);
}
.caja-diferencia.caja-cuadra { color: var(--aviso-exito); }
.caja-diferencia.caja-sobran { color: var(--aviso-atencion); }
.caja-diferencia.caja-faltan { color: var(--color-peligro); }

/* La caja en el Resumen del día del Panel */
.resumen-caja {
  margin-top: var(--espacio-2);
  border: var(--borde-fino) solid var(--color-linea);
  border-radius: var(--radio-tarjeta);
}
.resumen-caja-atencion {
  border-color: var(--aviso-atencion);
  background: var(--aviso-atencion-fondo);
}

/* Gastos fijos por confirmar */
.tarjeta-atencion {
  border-color: var(--aviso-atencion);
}

/* La foto del ticket */
.ticket-foto {
  display: block;
  max-width: 100%;
  max-height: var(--alto-ticket);
  border: var(--borde-fino) solid var(--color-linea);
  border-radius: var(--radio-tarjeta);
  object-fit: contain;
}

/* Ganancia del mes: la cuenta y, al lado en computadora, la gráfica */
.ganancia {
  display: grid;
  gap: var(--espacio-5);
}
@media (min-width: 1024px) {
  .ganancia {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
  }
}
.ganancia-cuenta,
.ganancia-grafica {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
  min-width: 0;
}
.ganancia-total {
  margin: 0;
  font-size: var(--texto-xl);
  font-weight: var(--peso-medio);
  line-height: var(--interlineado-apretado);
}
.ganancia-perdida {
  color: var(--color-peligro);
}
/* Cada mes: lo vendido (suave) y, dentro, lo que se ganó (fuerte) */
.grafica-pila {
  position: relative;
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: calc(var(--valor, 0) * 100%);
  min-height: var(--borde-grueso);
  overflow: hidden;
  border-radius: var(--radio-celda) var(--radio-celda) 0 0;
  background: var(--grafica-barra-suave);
}
.grafica-barra-ganancia {
  width: 100%;
  height: calc(var(--valor, 0) * 100%);
  background: var(--grafica-barra);
}

/* ═══════════════ Etapa 6m: equipo y mostrador ═══════════════ */

/* Teléfono oculto por la privacidad de los clientes: 55 •••• 0001 */
.telefono-oculto {
  font-family: var(--fuente-cifras);
  color: var(--color-texto-suave);
}

/* ── Ticket (impresora térmica de 58 u 80 mm) ──
   En pantalla se ve como una tira de papel; al imprimir solo sale él. */
.ticket {
  width: var(--ticket-ancho-58);
  max-width: 100%;
  margin-inline: auto;
  padding: var(--ticket-margen);
  background: var(--ticket-papel);
  color: var(--ticket-tinta);
  font-family: var(--fuente-cifras);
  font-size: var(--ticket-texto);
  line-height: var(--interlineado-medio);
  border: var(--borde-fino) solid var(--color-linea);
}
.ticket-80 {
  width: var(--ticket-ancho-80);
}
.ticket p {
  margin: 0;
}
.ticket-logo {
  display: block;
  width: var(--ticket-logo);
  height: var(--ticket-logo);
  margin: 0 auto var(--espacio-1);
  object-fit: contain;
  filter: grayscale(1) contrast(1.4);
}
.ticket-centro {
  text-align: center;
}
.ticket-negocio {
  font-family: var(--fuente-texto);
  font-weight: var(--peso-titulo);
  font-size: var(--ticket-texto-total);
}
.ticket-linea {
  margin: var(--espacio-2) 0;
  border: 0;
  border-top: var(--ticket-linea);
}
.ticket-renglones {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ticket-renglon {
  display: flex;
  justify-content: space-between;
  gap: var(--espacio-2);
}
.ticket-renglon span:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}
.ticket-renglon span:last-child {
  flex: none;
  white-space: nowrap;
}
.ticket-detalle {
  padding-inline-start: var(--espacio-2);
}
.ticket-total {
  font-weight: var(--peso-titulo);
  font-size: var(--ticket-texto-total);
}
.ticket-legal {
  margin-top: var(--espacio-2);
  font-size: var(--texto-xs);
}
.ticket-impresion {
  display: none;
}
@media print {
  @page {
    margin: 0;
  }
  html.imprimiendo-ticket,
  html.imprimiendo-ticket body {
    background: var(--ticket-papel);
  }
  html.imprimiendo-ticket body > *:not(.ticket-impresion) {
    display: none;
  }
  html.imprimiendo-ticket .ticket-impresion {
    display: block;
  }
  html.imprimiendo-ticket .ticket {
    margin: 0;
    border: 0;
  }
}

/* ── Checador ── */
.checador-teclado {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-4);
  max-width: var(--ancho-lectura);
}
.checador-respuesta {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-1);
  padding: var(--espacio-4);
  border-radius: var(--radio-tarjeta);
  background: var(--aviso-exito-fondo);
  color: var(--aviso-exito);
}
.checador-respuesta-atencion {
  background: var(--aviso-atencion-fondo);
  color: var(--aviso-atencion);
}
.checador-respuesta-info {
  background: var(--aviso-info-fondo);
  color: var(--aviso-info);
}
.checador-respuesta-titulo {
  margin: 0;
  font-family: var(--fuente-titulo);
  font-size: var(--checador-respuesta);
  font-weight: var(--peso-titulo);
  line-height: var(--interlineado-apretado);
}
.checador-respuesta-texto {
  margin: 0;
  font-family: var(--fuente-texto);
  font-size: var(--texto-md);
}
.asistencia-dia-falta .fila-detalle {
  color: var(--color-peligro);
}
.asistencia-dia-tarde .fila-detalle {
  color: var(--aviso-atencion);
}

/* ── Vacaciones ── */
.ausencia-citas {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--espacio-1);
}
/* La cita cabe en dos renglones en vez de salirse de la ventana. */
.ausencia-citas .boton {
  justify-content: flex-start;
  max-width: 100%;
  white-space: normal;
  text-align: start;
}

/* ── Compras: los renglones del formulario ── */
.compra-renglon {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--espacio-2);
  padding: var(--espacio-3);
  border: var(--borde-fino) solid var(--color-linea);
  border-radius: var(--radio-control);
}
.compra-renglon-campos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--espacio-2);
  grid-column: 1 / -1;
}
.compra-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-weight: var(--peso-fuerte);
}

/* Pasos numerados (la agenda en el celular) */
.lista-pasos {
  margin: 0;
  padding-inline-start: var(--espacio-5);
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
}

/* ── Precio y duración de cada quien (etapa 6d) ── */
/* La casilla y el nombre arriba; su precio y su duración al lado (o
   abajo, en angosto). */
.fila-quien {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-2) var(--espacio-3);
  padding: var(--espacio-2) 0;
  border-bottom: var(--borde-fino) solid var(--color-linea);
}
.fila-quien-nombre {
  font-weight: var(--peso-medio);
}
.quien-precios {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--espacio-2);
  flex: 1 1 var(--ancho-quien-precios);
  max-width: calc(var(--ancho-quien-precios) * 1.25);
}

/* ── Comisión escalonada: "Hasta $10,000 · 40 %" ── */
.lista-escalones {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
  margin-top: var(--espacio-2);
}
.fila-escalon {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--ancho-escalon) auto;
  align-items: center;
  gap: var(--espacio-2);
}
/* Con el "$" más pegado, la cifra completa cabe en el celular. */
.fila-escalon .entrada-compuesta > .entrada {
  padding-left: var(--espacio-8);
}
.fila-escalon-hasta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--espacio-2);
}
.fila-escalon-texto {
  color: var(--color-texto-suave);
}

/* ── Recibo de nómina ── */
.recibo {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
}
.recibo-renglones {
  margin: 0;
  padding: 0;
  list-style: none;
}
.recibo-renglon {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--espacio-3);
  padding: var(--espacio-2) 0;
  border-bottom: var(--borde-fino) solid var(--color-linea);
}
.recibo-concepto {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.recibo-detalle {
  color: var(--color-texto-suave);
  font-size: var(--texto-sm);
}
.recibo-monto {
  white-space: nowrap;
}
.recibo-resta .recibo-monto {
  color: var(--color-texto-suave);
}
.recibo-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--fuente-titulo);
  font-size: var(--texto-lg);
  font-weight: var(--peso-titulo);
}
.recibo-nota {
  display: flex;
  align-items: center;
  gap: var(--espacio-1);
  margin: 0;
  color: var(--color-texto-suave);
  font-size: var(--texto-sm);
}
.ticket-firma {
  margin-top: var(--espacio-4);
}

/* ── Meta del mes: "Lleva $27,700 de $30,000" y su barra ── */
.meta {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
  padding: var(--espacio-4);
  border: var(--borde-fino) solid var(--color-linea);
  border-radius: var(--radio-tarjeta);
  background: var(--color-tarjeta);
}
.meta-textos {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--espacio-1) var(--espacio-3);
}
.meta-titulo {
  font-family: var(--fuente-cifras);
  font-weight: var(--peso-fuerte);
  font-variant-numeric: tabular-nums;
}
.meta-detalle {
  color: var(--color-texto-suave);
  font-size: var(--texto-sm);
}
.meta-barra {
  height: var(--alto-meta);
  border-radius: var(--alto-meta);
  background: var(--color-hundido);
  overflow: hidden;
}
.meta-relleno {
  height: 100%;
  background: var(--color-acento);
  transform: scaleX(var(--avance, 0));
  transform-origin: left center;
  transition: transform var(--duracion) var(--curva);
}
.meta-lograda {
  border-color: var(--aviso-exito);
  background: var(--aviso-exito-fondo);
}
.meta-lograda .meta-titulo {
  color: var(--aviso-exito);
}
.meta-lograda .meta-relleno {
  background: var(--aviso-exito);
}

/* Un nombre que se cambia ahí mismo (los niveles). */
.entrada-en-fila {
  min-height: var(--alto-control);
}

/* ═══════════════════════════════════════════════════════════════════════
   Estilo Tablero (8 oct 2026, a prueba)
   Solo dentro del sistema: <html data-estilo="tablero"> (tema-inicial.js);
   la página pública sigue en Libreta. Todo lo de aquí se sobrepone a lo de
   arriba, así que quitar el atributo regresa a Libreta sin tocar nada más.
   El movimiento (tarjetas que entran, barras que crecen) solo corre dentro
   de .con-entrada: al abrir la pantalla o cambiar de periodo, no cada vez
   que el tiempo real vuelve a pintar. Las cifras las cuenta js/ui/animar.js.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Texto ── */
[data-estilo~="tablero"] .con-filete::after {
  display: none;
}
[data-estilo~="tablero"] .pantalla-titulo .texto-suave {
  font-size: var(--texto-sm);
}

/* ── Tarjetas: hoja clara con sombra suave, sin línea ── */
[data-estilo~="tablero"] .tarjeta,
[data-estilo~="tablero"] .lista,
[data-estilo~="tablero"] .rejilla,
[data-estilo~="tablero"] .rejilla-esqueleto {
  border-color: var(--tablero-borde);
  box-shadow: var(--sombra-tarjeta);
}
@media (min-width: 768px) {
  [data-estilo~="tablero"] .tarjeta {
    padding: var(--espacio-6);
  }
  [data-estilo~="tablero"] .tarjeta .tabla-contenedor {
    margin: 0 calc(var(--espacio-6) * -1);
    padding: 0 var(--espacio-6);
  }
}
[data-estilo~="tablero"] .tarjeta-titulo {
  font-size: var(--texto-md);
  font-weight: var(--peso-titulo);
  letter-spacing: var(--letras-titulo);
}
[data-estilo~="tablero"] .vacio {
  border-color: var(--color-linea);
  background: var(--color-tarjeta);
}

/* ── Resumen de cifras: una tarjeta por cifra; la primera, rellena ── */
[data-estilo~="tablero"] .panel-datos:not(.panel-datos-compacto) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--espacio-3);
  padding-bottom: 0;
  border-bottom: 0;
}
@media (min-width: 1024px) {
  [data-estilo~="tablero"] .panel-datos:not(.panel-datos-compacto) {
    grid-template-columns: repeat(auto-fit, minmax(var(--ancho-dato-min), 1fr));
    gap: var(--espacio-4);
  }
}
/* De dos en dos: si sobra una, toma el renglón completo (sin hueco al lado). */
@media (max-width: 1023px) {
  [data-estilo~="tablero"] .panel-datos:not(.panel-datos-compacto) > .dato:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}
[data-estilo~="tablero"] .panel-datos:not(.panel-datos-compacto) > .dato {
  justify-content: flex-start;
  gap: var(--espacio-2);
  padding: var(--espacio-4);
  border: var(--borde-fino) solid var(--tablero-borde);
  border-radius: var(--radio-tarjeta);
  background: var(--color-tarjeta);
  box-shadow: var(--sombra-tarjeta);
}
@media (min-width: 768px) {
  [data-estilo~="tablero"] .panel-datos:not(.panel-datos-compacto) > .dato {
    padding: var(--espacio-5);
  }
}
[data-estilo~="tablero"] .panel-datos:not(.panel-datos-compacto) > .dato:first-child {
  border-color: var(--tarjeta-destacada);
  background: var(--tarjeta-destacada);
  color: var(--sobre-destacada);
}
[data-estilo~="tablero"] .panel-datos:not(.panel-datos-compacto) > .dato .dato-etiqueta {
  font-weight: var(--peso-medio);
}
[data-estilo~="tablero"] .panel-datos:not(.panel-datos-compacto) > .dato:first-child .dato-etiqueta {
  color: var(--sobre-destacada-suave);
}
/* La etiqueta arriba, la cifra en medio y el cambio abajo */
[data-estilo~="tablero"] .panel-datos:not(.panel-datos-compacto) > .dato .dato-valor,
[data-estilo~="tablero"] .panel-datos:not(.panel-datos-compacto) > .dato:first-child .dato-valor {
  order: 0;
  margin-bottom: auto;
  font-size: var(--texto-cifra-tablero);
  font-weight: var(--peso-titulo);
  letter-spacing: var(--letras-cifra-grande);
}
/* "12% más que el martes pasado": en pastilla */
[data-estilo~="tablero"] .dato-cambio {
  align-self: flex-start;
  padding: var(--espacio-0) var(--espacio-2);
  border-radius: var(--radio-control);
  background: var(--color-hundido);
}
[data-estilo~="tablero"] .dato-cambio.sube {
  background: var(--aviso-exito-fondo);
}
[data-estilo~="tablero"] .dato-cambio.baja {
  background: var(--aviso-error-fondo);
}
[data-estilo~="tablero"] .panel-datos:not(.panel-datos-compacto) > .dato:first-child .dato-cambio {
  background: var(--sobre-destacada-fondo);
  color: var(--sobre-destacada);
}

/* ── Botones: redondos; al apretarlos se hunden tantito ── */
[data-estilo~="tablero"] .boton {
  border-radius: var(--radio-pastilla);
  transition: background-color var(--duracion) var(--curva),
              border-color var(--duracion) var(--curva),
              color var(--duracion) var(--curva),
              transform var(--duracion) var(--curva);
}
[data-estilo~="tablero"] .boton:active:not(:disabled) {
  transform: scale(var(--escala-presion));
}
[data-estilo~="tablero"] .boton-secundario {
  border-color: var(--color-linea);
}
[data-estilo~="tablero"] .boton-secundario:hover {
  border-color: var(--color-linea-control);
  background: var(--color-tarjeta);
}

/* Hoy · Semana · Mes: pastillas; la escogida, rellena del acento */
[data-estilo~="tablero"] .segmentado {
  border-radius: var(--radio-pastilla);
}
/* Con tres opciones o más, cada una toma lo que mide su texto, si cabe
   ("Mes pasado" no se parte); con dos, van parejas. */
[data-estilo~="tablero"] .segmentado:has(> .segmento:nth-child(3)) {
  grid-auto-columns: auto;
}
/* Los que van en varios renglones (Bitácora, puestos) no caben en una pastilla */
[data-estilo~="tablero"] .bitacora-filtro,
[data-estilo~="tablero"] .segmentado-puestos {
  border-radius: var(--radio-tarjeta);
}
@media (min-width: 480px) {
  [data-estilo~="tablero"] .bitacora-filtro,
  [data-estilo~="tablero"] .segmentado-puestos {
    border-radius: var(--radio-pastilla);
  }
}
/* El título de la tarjeta no se aprieta: lo de al lado baja si no cabe */
[data-estilo~="tablero"] .tarjeta-encabezado {
  flex-wrap: wrap;
  row-gap: var(--espacio-1);
}
[data-estilo~="tablero"] .segmento {
  border-radius: var(--radio-pastilla);
}
[data-estilo~="tablero"] .segmento[aria-pressed="true"],
[data-estilo~="tablero"] .segmento[aria-checked="true"],
[data-estilo~="tablero"] .segmento[aria-current="page"] {
  background: var(--color-acento);
  color: var(--color-sobre-acento);
  box-shadow: var(--sombra-1);
}

/* En celular los botones del título van en un renglón que se desliza de
   lado, de orilla a orilla, para que las cifras se vean sin bajar. */
@media (max-width: 767px) {
  [data-estilo~="tablero"] .pantalla-titulo-con-accion > .grupo-botones {
    flex-wrap: nowrap;
    width: calc(100% + var(--margen-pantalla) * 2);
    margin: 0 calc(var(--margen-pantalla) * -1);
    padding: var(--espacio-1) var(--margen-pantalla);
    overflow-x: auto;
    scrollbar-width: none;
  }
  [data-estilo~="tablero"] .pantalla-titulo-con-accion > .grupo-botones::-webkit-scrollbar {
    display: none;
  }
  [data-estilo~="tablero"] .pantalla-titulo-con-accion > .grupo-botones > * {
    flex: none;
  }
}

/* En tablet y computadora estos atajos ya están en el menú lateral. */
@media (min-width: 768px) {
  [data-estilo~="tablero"] .accion-del-menu {
    display: none;
  }
}

/* ── Campos: rellenos y con esquinas, en lugar de subrayados ── */
[data-estilo~="tablero"] .entrada {
  padding: 0 var(--espacio-4);
  border: var(--borde-fino) solid transparent;
  border-radius: var(--radio-control);
  background: var(--color-hundido);
}
[data-estilo~="tablero"] .entrada:focus {
  border-color: var(--color-foco);
  background: var(--color-tarjeta);
  box-shadow: 0 0 0 var(--foco-ancho) var(--color-acento-tenue);
}
[data-estilo~="tablero"] .entrada[aria-invalid="true"] {
  border-color: var(--aviso-error);
}
[data-estilo~="tablero"] .entrada:disabled {
  border-style: solid;
}
[data-estilo~="tablero"] textarea.entrada,
[data-estilo~="tablero"] select.entrada {
  border-color: transparent;
  background: var(--color-hundido);
}
[data-estilo~="tablero"] textarea.entrada {
  padding: var(--espacio-3) var(--espacio-4);
}
/* Con prefijo (+52, $): el prefijo entra al recuadro y el texto se recorre. */
[data-estilo~="tablero"] .entrada-compuesta > .entrada {
  padding-left: calc(var(--espacio-4) * 3);
}
[data-estilo~="tablero"] .entrada-compuesta > .entrada-monto {
  padding-left: calc(var(--espacio-4) * 3.25);
}
[data-estilo~="tablero"] .entrada-prefijo {
  left: var(--espacio-4);
}
/* El buscador, en pastilla y con su lupa dentro */
[data-estilo~="tablero"] .buscador > .entrada {
  padding-left: calc(var(--espacio-4) + var(--icono-md) + var(--espacio-3));
  border-radius: var(--radio-pastilla);
}

/* ── Encabezado: sobre el papel, sin línea ── */
[data-estilo~="tablero"] .encabezado {
  border-bottom-color: transparent;
  background: var(--color-fondo);
}
[data-estilo~="tablero"] .quien-conectado {
  border-color: transparent;
  box-shadow: var(--sombra-1);
}

/* ── Menú lateral: una tarjeta que flota a la izquierda ── */
@media (min-width: 768px) {
  [data-estilo~="tablero"] .menu-lateral {
    inset: var(--margen-lateral) auto var(--margen-lateral) var(--margen-lateral);
    border: var(--borde-fino) solid var(--tablero-borde);
    border-radius: var(--radio-tarjeta);
    box-shadow: var(--sombra-tarjeta);
  }
}
[data-estilo~="tablero"] .menu-lateral-enlace,
[data-estilo~="tablero"] .menu-lateral-subenlace {
  position: relative;
}
/* La opción actual: letra fuerte y una marca del acento en la orilla */
[data-estilo~="tablero"] .menu-lateral-enlace[aria-current="page"],
[data-estilo~="tablero"] .menu-lateral-subenlace[aria-current="page"] {
  background: transparent;
  color: var(--color-texto);
  font-weight: var(--peso-titulo);
}
[data-estilo~="tablero"] .menu-lateral-enlace[aria-current="page"]::before,
[data-estilo~="tablero"] .menu-lateral-subenlace[aria-current="page"]::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(var(--espacio-3) * -1);
  width: var(--borde-estado);
  height: var(--marca-actual-alto);
  border-radius: 0 var(--radio-pastilla) var(--radio-pastilla) 0;
  background: var(--color-acento);
  transform: translateY(-50%);
}
[data-estilo~="tablero"] .menu-lateral-subenlace[aria-current="page"]::before {
  left: calc((var(--espacio-3) + var(--borde-fino)) * -1);
  border-radius: var(--radio-pastilla);
}
[data-estilo~="tablero"] .menu-lateral-pie {
  border-top-color: transparent;
}
[data-menu-compacto][data-estilo~="tablero"] .menu-lateral-enlace[aria-current="page"] {
  background: var(--color-acento-tenue);
}
[data-menu-compacto][data-estilo~="tablero"] .menu-lateral-enlace[aria-current="page"]::before {
  left: calc(var(--espacio-2) * -1);
}
[data-menu-compacto][data-estilo~="tablero"] .menu-lateral-grupo[data-flotante] > .menu-lateral-sub {
  left: calc(var(--ancho-lateral-compacto) + var(--margen-lateral) + var(--espacio-2));
}
[data-menu-compacto][data-estilo~="tablero"] .menu-lateral-globo:not([hidden]) {
  left: calc(var(--ancho-lateral-compacto) + var(--margen-lateral) + var(--espacio-1));
}

/* Barra de abajo (celular): el ícono escogido en pastilla del acento */
[data-estilo~="tablero"] .barra-inferior {
  border-top-color: transparent;
  box-shadow: var(--sombra-tarjeta-alta);
}
[data-estilo~="tablero"] .barra-inferior-enlace[aria-current="page"] > .icono {
  background: var(--color-acento);
  color: var(--color-sobre-acento);
}

/* ── Gráficas ── */
[data-estilo~="tablero"] .grafica-barras {
  border-bottom-color: transparent;
}
[data-estilo~="tablero"] .grafica-barra,
[data-estilo~="tablero"] .grafica-pila {
  max-width: var(--ancho-barra-max);
  border-radius: var(--radio-control);
  background: var(--barra-tenue);
}
/* El mejor día, en el tono fuerte; hoy y la que se señala, en el medio; los
   demás, en el tenue (como el video). */
[data-estilo~="tablero"] .grafica-columna.es-hoy .grafica-barra,
[data-estilo~="tablero"] .grafica-columna:hover .grafica-barra {
  background: var(--barra-media);
}
[data-estilo~="tablero"] .grafica-columna.es-mejor .grafica-barra {
  background: var(--barra-fuerte);
}
/* Barras en cápsula (redondas de los dos lados), salvo las del mes */
[data-estilo~="tablero"] .grafica-barras:not(.grafica-densa) .grafica-barra {
  border-radius: var(--radio-pastilla);
}
/* La cifra del mejor día, y la de la barra que se señala, en un globito */
[data-estilo~="tablero"] .grafica-columna.es-mejor .grafica-valor:not(:empty),
[data-estilo~="tablero"] .grafica-columna:hover .grafica-valor:not(:empty) {
  padding: 0 var(--espacio-2);
  border-radius: var(--radio-pastilla);
  background: var(--brindis-fondo);
  color: var(--brindis-texto);
  font-weight: var(--peso-fuerte);
}
[data-estilo~="tablero"] .grafica-barra-ganancia {
  border-radius: var(--radio-control);
}
[data-estilo~="tablero"] .grafica-densa .grafica-barra {
  border-radius: var(--radio-celda) var(--radio-celda) 0 0;
}
[data-estilo~="tablero"] .ranking-barra,
[data-estilo~="tablero"] .meta-barra,
[data-estilo~="tablero"] .barra-apilada {
  background: var(--barra-rayada);
}

/* Dona de avance (media luna): "62 %" en medio. js pone --avance (lo
   lleno, de 0 a 1) y, si hay un segundo tramo, --avance-2 (hasta dónde
   llega); lo que falta va rayado. Registradas para que se puedan animar. */
@property --avance {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --avance-2 {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
.dona {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: var(--ancho-dona);
  aspect-ratio: 2 / 1;
  overflow: hidden;
}
.dona::before {
  content: "";
  position: absolute;
  inset: 0 0 -100%;
  border-radius: var(--radio-pastilla);
  background:
    conic-gradient(from -90deg,
      var(--grafica-barra) calc(var(--avance) * 50%),
      var(--dona-segundo) 0 calc(max(var(--avance), var(--avance-2)) * 50%),
      transparent 0),
    var(--dona-resto);
  mask: radial-gradient(farthest-side, transparent calc(100% - var(--grueso-dona)), var(--color-texto) calc(100% - var(--grueso-dona) + var(--borde-fino)));
}
.dona-centro {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: end;
}
.dona-cifra {
  font-family: var(--fuente-cifras);
  font-size: var(--texto-xl);
  font-weight: var(--peso-titulo);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.dona-pie {
  font-size: var(--texto-xs);
  color: var(--color-texto-suave);
}
.dona-bloque {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-4) var(--espacio-6);
}
.dona-leyenda {
  display: grid;
  gap: var(--espacio-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--texto-sm);
}
.dona-leyenda > li {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
}
.dona-leyenda .cifra {
  margin-left: auto;
  padding-left: var(--espacio-4);
  font-weight: var(--peso-fuerte);
}
.dona-muestra {
  flex: none;
  width: var(--espacio-3);
  aspect-ratio: 1;
  border-radius: var(--radio-pastilla);
  background: var(--grafica-barra);
}
.dona-muestra-medio {
  background: var(--dona-segundo);
}
.dona-muestra-resto {
  background: var(--dona-resto);
}

/* ── Ventanas y brindis: entran con un poco más de cuerpo ── */
[data-estilo~="tablero"] .ventana[open] {
  animation: tablero-ventana var(--duracion-entrar) var(--curva-salida);
}
@keyframes tablero-ventana {
  from {
    opacity: 0;
    transform: translateY(var(--desplazamiento-entrada)) scale(var(--escala-ventana));
  }
}
/* El brindis sube con un rebote y se va más rápido de lo que llegó; lleva
   un punto (del color de "Deshacer") antes del mensaje ("Se agendó a Lucía"). */
[data-estilo~="tablero"] .brindis {
  border-radius: var(--radio-pastilla);
  transition: opacity var(--duracion-entrar) var(--curva-salida), transform var(--duracion-entrar) var(--curva-resorte);
}
[data-estilo~="tablero"] .brindis.oculto {
  transform: translate(-50%, var(--espacio-8)) scale(var(--escala-ventana));
  transition-duration: var(--duracion-salir);
  transition-timing-function: var(--curva);
}
[data-estilo~="tablero"] .brindis:not(:has(.brindis-texto))::before {
  content: "";
  flex: none;
  width: var(--espacio-2);
  aspect-ratio: 1;
  border-radius: var(--radio-pastilla);
  background: var(--brindis-accion);
}
[data-estilo~="tablero"] .brindis:has(.brindis-texto) {
  border-radius: var(--radio-tarjeta);
}

/* Fondo de las ventanas: velado y borroso, para que lo de adelante mande */
[data-estilo~="tablero"] .ventana::backdrop {
  background: var(--velo-tablero);
  backdrop-filter: blur(var(--desenfoque-velo));
  animation: tablero-velo var(--duracion-entrar) var(--curva-salida);
}
@keyframes tablero-velo {
  from {
    opacity: 0;
  }
}
/* La ficha (de un cliente) entra de lado en tablet y computadora: se ve
   la lista detrás y se sabe de dónde salió. */
@media (min-width: 768px) {
  [data-estilo~="tablero"] .ventana.ventana-lateral {
    width: var(--ancho-ventana-lateral);
    max-width: calc(100% - var(--margen-lateral) * 2);
    height: calc(100% - var(--margen-lateral) * 2);
    max-height: none;
    margin: var(--margen-lateral) var(--margen-lateral) var(--margen-lateral) auto;
  }
  [data-estilo~="tablero"] .ventana.ventana-lateral[open] {
    animation: tablero-lateral var(--duracion-entrar) var(--curva-salida);
  }
}
@keyframes tablero-lateral {
  from {
    opacity: 0;
    transform: translateX(var(--espacio-8));
  }
}
[data-estilo~="tablero"] .campana-panel {
  border-color: var(--tablero-borde);
  box-shadow: var(--sombra-tarjeta-alta);
  animation: tablero-ventana var(--duracion-entrar) var(--curva-salida);
}

/* ── Esqueletos: laten mientras llega la información ── */
[data-estilo~="tablero"] .esqueleto {
  animation: tablero-late calc(var(--duracion-entrar) * 3) ease-in-out infinite alternate;
}
@keyframes tablero-late {
  to {
    opacity: 0.5;
  }
}

/* ── Movimiento al abrir la pantalla o cambiar de periodo ──
   js/ui/animar.js pone --orden en cada pieza para que entren una tras otra. */
[data-estilo~="tablero"] .con-entrada > :not(.panel-tarjetas, .panel-datos),
[data-estilo~="tablero"] .con-entrada .panel-tarjetas > *,
[data-estilo~="tablero"] .con-entrada .panel-datos > .dato {
  animation: tablero-entra var(--duracion-entrar) var(--curva-salida) both;
  animation-delay: calc(var(--orden, 0) * var(--escalon));
}
@keyframes tablero-entra {
  from {
    opacity: 0;
    transform: translateY(var(--desplazamiento-entrada));
  }
}
[data-estilo~="tablero"] .con-entrada .grafica-barra,
[data-estilo~="tablero"] .con-entrada .grafica-pila {
  transform-origin: bottom center;
  animation: tablero-crece-alto var(--duracion-crecer) var(--curva-salida) both;
  animation-delay: calc(var(--escalon) * 4 + var(--orden, 0) * var(--escalon) / 2);
}
@keyframes tablero-crece-alto {
  from {
    transform: scaleY(0);
  }
}
[data-estilo~="tablero"] .con-entrada .ranking-barra > span,
[data-estilo~="tablero"] .con-entrada .barra-apilada > span {
  transform-origin: left center;
  animation: tablero-crece-ancho var(--duracion-crecer) var(--curva-salida) both;
  animation-delay: calc(var(--escalon) * 4 + var(--orden, 0) * var(--escalon));
}
@keyframes tablero-crece-ancho {
  from {
    transform: scaleX(0);
  }
}
[data-estilo~="tablero"] .con-entrada .calor {
  animation: tablero-aparece var(--duracion-crecer) var(--curva-salida) both;
  animation-delay: calc(var(--escalon) * 4 + var(--orden, 0) * var(--escalon) / 4);
}
@keyframes tablero-aparece {
  from {
    opacity: 0;
    transform: scale(var(--escala-ventana));
  }
}
/* Una cifra que acaba de cambiar (alguien cobró): un destello del acento */
[data-estilo~="tablero"] .cifra-cambio {
  animation: tablero-destello calc(var(--duracion-cifra) * 2) var(--curva-salida);
}
@keyframes tablero-destello {
  from {
    color: var(--color-acento-texto);
  }
}
[data-estilo~="tablero"] .panel-datos > .dato:first-child .cifra-cambio {
  animation: none;
}

/* ── Renglones que se acomodan (js/ui/animar.js) ──
   Al filtrar o cuando llega algo nuevo, los que se quedan se recorren a su
   lugar nuevo y los nuevos entran; si son pocos, se iluminan un momento. */
[data-estilo~="tablero"] .renglon-nuevo {
  animation: tablero-renglon-nuevo var(--duracion-nuevo) var(--curva);
}
/* El que se fue: en su lugar de antes mientras se desvanece */
.renglon-sale {
  position: absolute;
  z-index: 1;
  box-sizing: border-box;
  margin: 0;
  pointer-events: none;
}
@keyframes tablero-renglon-nuevo {
  from,
  30% {
    background-color: var(--color-acento-tenue);
  }
}

/* ── Gráfica de línea (js/ui/grafica-linea.js) ──
   La línea con su relleno que se desvanece hacia abajo, el promedio
   punteado y, al pasar el dedo o el mouse, una guía con su globo. */
.grafica-linea {
  position: relative;
  height: var(--alto-linea-grafica);
  margin-top: var(--espacio-5);
  border-bottom: var(--borde-fino) solid var(--grafica-guia);
  border-radius: var(--radio-celda);
  touch-action: pan-y;
  cursor: crosshair;
}
.grafica-linea:focus-visible {
  outline: var(--foco-ancho) solid var(--color-foco);
  outline-offset: var(--espacio-1);
}
.grafica-linea-dibujo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.grafica-linea-relleno {
  fill: var(--relleno-linea);
  stroke: none;
}
.grafica-linea-dibujo:first-of-type {
  mask-image: linear-gradient(var(--color-texto), transparent);
}
.grafica-linea-trazo {
  fill: none;
  stroke: var(--grafica-barra);
  stroke-width: var(--grueso-linea-grafica);
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.grafica-linea-promedio {
  fill: none;
  stroke: var(--color-linea-control);
  stroke-width: var(--borde-fino);
  stroke-dasharray: var(--guion-promedio);
  vector-effect: non-scaling-stroke;
}
/* El periodo anterior, día por día: punteado y gris, debajo de la línea */
.grafica-linea-anterior {
  fill: none;
  stroke: var(--color-texto-suave);
  stroke-width: var(--grueso-linea-mini);
  stroke-dasharray: var(--guion-promedio);
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.grafica-linea-guia,
.grafica-linea-punto,
.grafica-linea-globo {
  position: absolute;
  left: calc(var(--x, 0) * 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duracion) var(--curva);
}
.grafica-linea-guia {
  top: 0;
  bottom: 0;
  border-left: var(--borde-fino) dashed var(--color-linea-control);
}
.grafica-linea-punto {
  top: calc(var(--y, 0) * 100%);
  width: var(--punto-grafica);
  aspect-ratio: 1;
  border: var(--grueso-linea-grafica) solid var(--grafica-barra);
  border-radius: var(--radio-pastilla);
  background: var(--color-tarjeta);
  transform: translate(-50%, -50%);
}
.grafica-linea-globo {
  top: calc(var(--y, 0) * 100%);
  z-index: var(--capa-pegajosa);
  display: flex;
  flex-direction: column;
  padding: var(--espacio-2) var(--espacio-3);
  border-radius: var(--radio-control);
  background: var(--brindis-fondo);
  color: var(--brindis-texto);
  box-shadow: var(--sombra-2);
  font-size: var(--texto-xs);
  white-space: nowrap;
  transform: translate(-50%, calc(-100% - var(--espacio-3)));
}
.grafica-linea-globo[data-orilla="izquierda"] {
  transform: translate(calc(var(--espacio-2) * -1), calc(-100% - var(--espacio-3)));
}
.grafica-linea-globo[data-orilla="derecha"] {
  transform: translate(calc(-100% + var(--espacio-2)), calc(-100% - var(--espacio-3)));
}
.grafica-linea-globo strong {
  font-family: var(--fuente-cifras);
  font-size: var(--texto-md);
  font-variant-numeric: tabular-nums;
}
.grafica-linea.con-guia :is(.grafica-linea-guia, .grafica-linea-punto, .grafica-linea-globo) {
  opacity: 1;
}
/* Qué es cada línea, abajo a la derecha del título */
.grafica-linea-leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-1) var(--espacio-4);
  font-size: var(--texto-xs);
  color: var(--color-texto-suave);
}
.grafica-linea-leyenda > span {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-1);
}
.grafica-linea-leyenda > span::before {
  content: "";
  width: var(--espacio-4);
  border-top: var(--grueso-linea-mini) solid var(--grafica-barra);
}
.grafica-linea-leyenda > .es-promedio::before {
  border-top: var(--borde-fino) dashed var(--color-linea-control);
}
.grafica-linea-leyenda > .es-anterior::before {
  border-top: var(--grueso-linea-mini) dashed var(--color-texto-suave);
}

/* Mini gráfica de cada cifra (semana y mes) */
.mini-grafica {
  display: block;
  width: 100%;
  height: var(--alto-mini-grafica);
  margin-top: var(--espacio-2);
  overflow: visible;
}
.mini-grafica-trazo {
  fill: none;
  stroke: var(--grafica-barra);
  stroke-width: var(--grueso-linea-mini);
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.mini-grafica-relleno {
  fill: var(--relleno-linea);
  stroke: none;
}
[data-estilo~="tablero"] .panel-datos > .dato:first-child .mini-grafica-trazo {
  stroke: var(--sobre-destacada);
}
[data-estilo~="tablero"] .panel-datos > .dato:first-child .mini-grafica-relleno {
  fill: var(--sobre-destacada-fondo);
}

/* La línea se dibuja de izquierda a derecha (la dona la llena animar.js). */
[data-estilo~="tablero"] .con-entrada .grafica-linea-dibujo,
[data-estilo~="tablero"] .con-entrada .mini-grafica,
[data-estilo~="tablero"] .grafica-linea-entra .grafica-linea-dibujo {
  animation: tablero-traza var(--duracion-traza) var(--curva-salida) both;
  animation-delay: calc(var(--escalon) * 4);
}
@keyframes tablero-traza {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0);
  }
}

/* ── Reloj en vivo (checador): la hora del local, en grande ── */
.reloj-vivo {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-1);
  padding: var(--espacio-5);
  border-radius: var(--radio-tarjeta);
  background: var(--brindis-fondo);
  color: var(--brindis-texto);
  box-shadow: var(--sombra-tarjeta);
}
.reloj-vivo-etiqueta,
.reloj-vivo-fecha {
  font-size: var(--texto-sm);
  color: color-mix(in srgb, var(--brindis-texto) 78%, transparent);
}
.reloj-vivo-hora {
  font-family: var(--fuente-cifras);
  font-size: var(--texto-reloj);
  font-weight: var(--peso-titulo);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--letras-cifra-grande);
  line-height: 1.1;
}
.reloj-vivo-segundos {
  color: color-mix(in srgb, var(--brindis-texto) 70%, transparent);
}

/* ── Cambio de color o de tema: el nuevo se derrama desde donde se tocó ── */
:root[data-estilo~="tablero"]::view-transition-old(root) {
  animation: none;
}
:root[data-estilo~="tablero"]::view-transition-new(root) {
  animation: tablero-tinta var(--duracion-tinta) var(--curva-salida);
}
@keyframes tablero-tinta {
  from {
    clip-path: circle(0 at var(--origen-x) var(--origen-y));
  }
  to {
    clip-path: circle(var(--radio-tinta) at var(--origen-x) var(--origen-y));
  }
}

/* ═══ Tercera vuelta (8 oct): para parecerse más al video ═══════════════ */

/* ── La flechita de cada cifra: lleva al detalle (reporte, agenda, caja) ── */
[data-estilo~="tablero"] .panel-datos > .dato {
  position: relative;
  overflow: hidden;
}
[data-estilo~="tablero"] .panel-datos > .dato:has(.dato-ir) .dato-etiqueta {
  padding-right: var(--toque-min);
}
.dato-ir {
  position: absolute;
  top: var(--espacio-2);
  right: var(--espacio-2);
  display: grid;
  place-items: center;
  width: var(--toque-min);
  height: var(--toque-min);
  color: inherit;
}
.dato-ir::before {
  content: "";
  position: absolute;
  width: var(--boton-ir);
  height: var(--boton-ir);
  border: var(--borde-fino) solid var(--color-linea-control);
  border-radius: var(--radio-pastilla);
  transition: background-color var(--duracion) var(--curva), transform var(--duracion) var(--curva);
}
.dato-ir > .icono {
  position: relative;
}
.dato-ir:hover::before {
  background: var(--color-hundido);
  transform: scale(1.08);
}
.dato-ir:focus-visible {
  outline: none;
}
.dato-ir:focus-visible::before {
  outline: var(--foco-ancho) solid var(--color-foco);
  outline-offset: var(--borde-fino);
}
[data-estilo~="tablero"] .panel-datos > .dato:first-child .dato-ir::before {
  border-color: transparent;
  background: var(--sobre-destacada);
}
[data-estilo~="tablero"] .panel-datos > .dato:first-child .dato-ir {
  color: var(--tarjeta-destacada);
}

/* La mini gráfica llega de orilla a orilla, pegada al pie de la tarjeta */
[data-estilo~="tablero"] .panel-datos > .dato > .mini-grafica {
  width: calc(100% + var(--espacio-4) * 2);
  margin: var(--espacio-2) calc(var(--espacio-4) * -1) calc(var(--espacio-4) * -1);
}
@media (min-width: 768px) {
  [data-estilo~="tablero"] .panel-datos > .dato > .mini-grafica {
    width: calc(100% + var(--espacio-5) * 2);
    margin: var(--espacio-2) calc(var(--espacio-5) * -1) calc(var(--espacio-5) * -1);
  }
}

/* ── Tarjeta oscura con curvas de nivel (la siguiente cita, el reloj) ── */
[data-estilo~="tablero"] .tarjeta.tarjeta-oscura,
[data-estilo~="tablero"] .reloj-vivo {
  border-color: transparent;
  background: var(--curvas-oscuras), var(--tarjeta-oscura);
  color: var(--sobre-oscura);
}
.tarjeta-oscura .tarjeta-titulo {
  color: var(--sobre-oscura);
}
.tarjeta-oscura-suave {
  font-size: var(--texto-sm);
  color: var(--sobre-oscura-suave);
}
.tarjeta-oscura :focus-visible {
  outline-color: var(--sobre-oscura);
}
.pastilla-oscura {
  padding: var(--espacio-0) var(--espacio-3);
  border-radius: var(--radio-pastilla);
  background: var(--sobre-oscura-fondo);
  font-size: var(--texto-sm);
  font-weight: var(--peso-fuerte);
  white-space: nowrap;
}
.cuenta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espacio-1);
  margin: auto 0;
  text-align: center;
}
.cuenta-cifra {
  font-family: var(--fuente-cifras);
  font-size: var(--texto-cuenta);
  font-weight: var(--peso-titulo);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--letras-cifra-grande);
  line-height: var(--interlineado-apretado);
}
.siguiente-quien {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espacio-0);
  min-width: 0;
  text-align: center;
}
.siguiente-nombre {
  max-width: 100%;
  overflow: hidden;
  font-size: var(--texto-md);
  font-weight: var(--peso-titulo);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.siguiente-acciones {
  display: flex;
  justify-content: center;
  gap: var(--espacio-2);
}
.boton.boton-sobre-oscura {
  border-color: transparent;
  border-radius: var(--radio-pastilla);
  background: var(--sobre-oscura);
  color: var(--tarjeta-oscura);
}
.boton.boton-sobre-oscura:hover {
  box-shadow: 0 0 0 var(--foco-ancho) var(--sobre-oscura-fondo);
}
/* La segunda acción sobre la tarjeta oscura ("Cambiar de plan"). */
.boton.boton-oscuro-secundario {
  border-color: transparent;
  border-radius: var(--radio-pastilla);
  background: var(--sobre-oscura-fondo);
  color: var(--sobre-oscura);
}
.boton.boton-oscuro-secundario:hover {
  background: var(--sobre-oscura-suave);
  color: var(--tarjeta-oscura);
}
.boton.boton-redondo-oscuro {
  width: var(--alto-control);
  padding: 0;
  border-color: transparent;
  border-radius: var(--radio-pastilla);
  background: var(--sobre-oscura-fondo);
  color: var(--sobre-oscura);
}
.boton.boton-redondo-oscuro:hover {
  background: var(--sobre-oscura-suave);
  color: var(--tarjeta-oscura);
}
[data-estilo~="tablero"] .reloj-vivo :is(.reloj-vivo-etiqueta, .reloj-vivo-fecha, .reloj-vivo-segundos) {
  color: var(--sobre-oscura-suave);
}

/* ── Media dona de las citas: grande y en medio, con su lista abajo ── */
[data-estilo~="tablero"] .tarjeta .dona-bloque {
  flex: 1;
  flex-direction: column;
  justify-content: center;
}
[data-estilo~="tablero"] .tarjeta .dona {
  width: min(100%, var(--ancho-dona-grande));
}
[data-estilo~="tablero"] .tarjeta .dona-cifra {
  font-size: var(--texto-2xl);
  letter-spacing: var(--letras-cifra-grande);
}
[data-estilo~="tablero"] .tarjeta .dona-leyenda {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--espacio-2) var(--espacio-4);
  font-size: var(--texto-xs);
}
[data-estilo~="tablero"] .tarjeta .dona-leyenda .cifra {
  margin-left: 0;
  padding-left: 0;
}

/* ── Dona completa (js/ui/anillo.js): un tramo por parte, el total en medio ── */
.anillo-bloque {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espacio-5);
}
.anillo {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--ancho-anillo);
  aspect-ratio: 1;
}
.anillo-dibujo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-0.25turn);
}
.anillo-fondo {
  fill: none;
  stroke: var(--color-hundido);
}
.anillo-tramo {
  fill: none;
}
.anillo-centro {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.anillo-cifra {
  font-family: var(--fuente-cifras);
  font-size: var(--texto-lg);
  font-weight: var(--peso-titulo);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--letras-titulo);
  line-height: var(--interlineado-apretado);
}
.anillo-pie {
  font-size: var(--texto-xs);
  color: var(--color-texto-suave);
}
.anillo-leyenda {
  display: grid;
  gap: var(--espacio-2);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--texto-sm);
}
.anillo-leyenda > li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--espacio-3);
}
.anillo-nombre {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.anillo-leyenda .cifra {
  font-weight: var(--peso-fuerte);
}
.anillo-leyenda .anillo-porcentaje {
  color: var(--color-texto-suave);
  font-weight: var(--peso-normal);
  text-align: right;
}
.anillo-muestra {
  width: var(--espacio-3);
  aspect-ratio: 1;
  border-radius: var(--radio-pastilla);
}
.anillo-color-1 { stroke: var(--anillo-1); background: var(--anillo-1); }
.anillo-color-2 { stroke: var(--anillo-2); background: var(--anillo-2); }
.anillo-color-3 { stroke: var(--anillo-3); background: var(--anillo-3); }
.anillo-color-4 { stroke: var(--anillo-4); background: var(--anillo-4); }
.anillo-color-5 { stroke: var(--anillo-5); background: var(--anillo-5); }
/* Cada tramo se dibuja después del anterior */
[data-estilo~="tablero"] .con-entrada .anillo-tramo {
  animation: tablero-anillo var(--duracion-traza) var(--curva-salida) both;
  animation-delay: calc(var(--escalon) * 4 + var(--orden, 0) * var(--escalon) * 3);
}
@keyframes tablero-anillo {
  from {
    stroke-dasharray: 0 100;
  }
}

/* ── Líneas guía de la gráfica de línea, con su cifra a la izquierda ── */
.grafica-linea-regla {
  position: absolute;
  top: calc(var(--regla, 0) * 100%);
  right: 0;
  left: 0;
  border-top: var(--borde-fino) solid var(--regla-grafica);
  pointer-events: none;
}
/* La cifra va encima de la línea, con el fondo de la tarjeta: en celular la
   línea pasaba por en medio de "-$5k". */
.grafica-linea-regla > span {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  padding: 0 var(--espacio-1) var(--espacio-0) 0;
  background: var(--color-tarjeta);
  font-family: var(--fuente-cifras);
  font-size: var(--texto-xs);
  font-variant-numeric: tabular-nums;
  color: var(--color-texto-suave);
}

/* ── Próximas citas: en computadora, la lista se recorre dentro de la tarjeta ── */
.tarjeta-desliza {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-4);
}
@media (min-width: 1024px) {
  [data-estilo~="tablero"] .tarjeta-alta .tarjeta-desliza {
    max-height: var(--alto-lista-tablero);
    margin-right: calc(var(--espacio-2) * -1);
    padding-right: var(--espacio-2);
    overflow-y: auto;
    scrollbar-width: thin;
  }
}

/* ── El día en su fichita ("OCT 8"), en los grupos de próximas citas ── */
.campo-etiqueta:has(> .fecha-ficha) {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
}
.fecha-ficha {
  display: inline-flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: var(--toque-min);
  padding: var(--espacio-1) 0;
  border-radius: var(--radio-control);
  background: var(--color-acento-tenue);
  color: var(--color-acento-texto);
  line-height: var(--interlineado-apretado);
}
.fecha-ficha > span {
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--letras-etiqueta);
  text-transform: uppercase;
}
.fecha-ficha > strong {
  font-family: var(--fuente-cifras);
  font-size: var(--texto-md);
  font-variant-numeric: tabular-nums;
}

/* ── Etiquetas de estado en pastilla con orilla, como "Completed" del video ── */
[data-estilo~="tablero"] .etiqueta-estado {
  padding: var(--espacio-0) var(--espacio-2);
  border: var(--borde-fino) solid currentColor;
  font-size: var(--texto-xs);
}
[data-estilo~="tablero"] .etiqueta-estado::before {
  display: none;
}

/* ── Mapa de calor: cuadritos redondeados con aire entre ellos ── */
[data-estilo~="tablero"] .calor {
  border-radius: var(--radio-control);
}

/* ── Equipo en tarjetas (como "Team" del video): una por persona ── */
[data-estilo~="tablero"] .lista.lista-tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--ancho-tarjeta-persona), 1fr));
  gap: var(--espacio-4);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
[data-estilo~="tablero"] .lista-tarjetas > li {
  border-radius: var(--radio-tarjeta);
  background: var(--color-tarjeta);
  box-shadow: var(--sombra-tarjeta);
}
[data-estilo~="tablero"] .lista-tarjetas > li > .fila {
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--espacio-3);
  height: 100%;
  padding: var(--espacio-6) var(--espacio-4) var(--espacio-5);
  border-top: 0;
  border-radius: var(--radio-tarjeta);
  text-align: center;
}
[data-estilo~="tablero"] .lista-tarjetas > li > .fila > .icono:last-child {
  display: none;
}
[data-estilo~="tablero"] .lista-tarjetas .avatar {
  position: relative;
  width: var(--avatar-tarjeta);
  height: var(--avatar-tarjeta);
  font-size: var(--texto-md);
}
/* Un punto verde: ya tiene su cuenta y puede entrar */
[data-estilo~="tablero"] .lista-tarjetas > li[data-acceso="si"] span.avatar::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: var(--espacio-3);
  aspect-ratio: 1;
  border: var(--borde-grueso) solid var(--color-tarjeta);
  border-radius: var(--radio-pastilla);
  background: var(--estado-atendida);
  box-sizing: content-box;
}
[data-estilo~="tablero"] .lista-tarjetas .fila-texto {
  flex: none;
  flex-basis: auto;
  align-items: center;
  gap: var(--espacio-1);
  width: 100%;
}
[data-estilo~="tablero"] .lista-tarjetas .fila-titulo {
  max-width: 100%;
}
[data-estilo~="tablero"] .lista-tarjetas .fila-detalle {
  white-space: normal;
}

/* ── Instalar la app: tarjeta oscura al pie del menú (como "Fernly for iOS") ── */
.instalar-app {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
  padding: var(--espacio-4);
  border-radius: var(--radio-tarjeta);
  background: var(--curvas-oscuras), var(--tarjeta-oscura);
  color: var(--sobre-oscura);
}
.instalar-app[hidden],
[data-menu-compacto] .instalar-app {
  display: none;
}
.instalar-app-icono {
  display: grid;
  place-items: center;
  width: var(--boton-ir);
  height: var(--boton-ir);
  border-radius: var(--radio-pastilla);
  background: var(--sobre-oscura-fondo);
}
.instalar-app strong {
  font-size: var(--texto-sm);
  line-height: var(--interlineado-apretado);
}
.instalar-app .tarjeta-oscura-suave {
  font-size: var(--texto-xs);
}
.instalar-app .boton {
  margin-top: var(--espacio-1);
}

/* ── Agenda, vista "Mes": una tarjeta con los días redondeados, hoy en un
   círculo del acento, las citas en pastilla y los días cerrados rayados ── */
[data-estilo~="tablero"] .mes-rejilla {
  gap: var(--espacio-1);
  padding: var(--espacio-2);
  border: var(--borde-fino) solid var(--tablero-borde);
  border-radius: var(--radio-tarjeta);
  background: var(--color-tarjeta);
  box-shadow: var(--sombra-tarjeta);
}
[data-estilo~="tablero"] .mes-cabeza {
  border: 0;
}
[data-estilo~="tablero"] .mes-dia {
  border: 0;
  border-radius: var(--radio-celda);
  background: transparent;
  transition: background-color var(--duracion) var(--curva), transform var(--duracion) var(--curva-resorte);
}
[data-estilo~="tablero"] .mes-dia:hover {
  background: var(--color-hundido);
}
[data-estilo~="tablero"] .mes-dia:active {
  transform: scale(0.96);
}
[data-estilo~="tablero"] .mes-dia-cerrado {
  background: var(--barra-rayada);
}
[data-estilo~="tablero"] .mes-dia.es-hoy {
  box-shadow: none;
  background: var(--color-acento-tenue);
}
[data-estilo~="tablero"] .mes-dia.es-hoy .mes-numero {
  display: grid;
  place-items: center;
  width: var(--numero-hoy-mes);
  height: var(--numero-hoy-mes);
  border-radius: var(--radio-pastilla);
  background: var(--color-acento);
  color: var(--color-sobre-acento);
}
[data-estilo~="tablero"] .mes-cita {
  border-radius: var(--radio-pastilla);
  padding: 0 var(--espacio-2);
}
[data-estilo~="tablero"] .mes-leyenda-persona {
  padding: var(--espacio-1) var(--espacio-3);
  border-radius: var(--radio-pastilla);
  background: var(--color-tarjeta);
  box-shadow: var(--sombra-tarjeta);
  color: var(--color-texto);
}
@media (max-width: 767px) {
  [data-estilo~="tablero"] .mes-rejilla {
    gap: var(--espacio-0);
    padding: var(--espacio-1);
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Estilo Tablero en la página pública (reservar.html y cita.html)
   Lo mismo que por dentro: tarjetas claras con sombra suave, todo redondo,
   lo escogido relleno del color del negocio y movimiento al avanzar.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Perfil ── */
[data-estilo~="tablero"] .perfil-logo {
  box-shadow: var(--sombra-tarjeta-alta);
}
[data-estilo~="tablero"] .resena,
[data-estilo~="tablero"] .lo-mismo,
[data-estilo~="tablero"] .tarjeta-resumen,
[data-estilo~="tablero"] .cambio-resumen,
[data-estilo~="tablero"] .resumen-lateral,
[data-estilo~="tablero"] .opcion-estilista {
  border-color: var(--tablero-borde);
  box-shadow: var(--sombra-tarjeta);
}
/* Contacto: cada botón en su tarjeta, con el ícono en un círculo del acento */
[data-estilo~="tablero"] .accion-perfil {
  gap: var(--espacio-2);
  min-height: calc(var(--toque-min) * 2);
  padding: var(--espacio-3) var(--espacio-1);
  border: var(--borde-fino) solid var(--tablero-borde);
  border-radius: var(--radio-tarjeta);
  background: var(--color-tarjeta);
  box-shadow: var(--sombra-tarjeta);
  transition: transform var(--duracion) var(--curva), box-shadow var(--duracion) var(--curva);
}
[data-estilo~="tablero"] .accion-perfil:hover {
  background: var(--color-tarjeta);
  box-shadow: var(--sombra-tarjeta-alta);
  transform: translateY(calc(var(--espacio-0) * -1));
}
[data-estilo~="tablero"] .accion-perfil:active {
  transform: scale(var(--escala-presion));
}
[data-estilo~="tablero"] .accion-perfil > .icono {
  box-sizing: content-box;
  padding: var(--espacio-2);
  border-radius: var(--radio-pastilla);
  background: var(--color-acento-tenue);
}
/* Dirección y horario juntos en una tarjeta */
[data-estilo~="tablero"] .perfil-direccion,
[data-estilo~="tablero"] .perfil .plegable {
  padding-right: var(--espacio-4);
  padding-left: var(--espacio-4);
  border: var(--borde-fino) solid var(--tablero-borde);
  border-radius: var(--radio-tarjeta);
  background: var(--color-tarjeta);
  box-shadow: var(--sombra-tarjeta);
}
[data-estilo~="tablero"] .perfil-direccion {
  padding-top: var(--espacio-3);
  padding-bottom: var(--espacio-3);
}
/* Cliente que regresa: la tarjeta oscura con curvas, como la siguiente cita */
[data-estilo~="tablero"] .lo-mismo {
  padding: var(--espacio-5);
  border-color: transparent;
  background: var(--curvas-oscuras), var(--tarjeta-oscura);
  color: var(--sobre-oscura);
}
[data-estilo~="tablero"] .lo-mismo-detalle {
  color: var(--sobre-oscura-suave);
}
[data-estilo~="tablero"] .lo-mismo .boton-secundario {
  border-color: transparent;
  background: var(--sobre-oscura);
  color: var(--tarjeta-oscura);
}
[data-estilo~="tablero"] .lo-mismo .boton-texto {
  color: var(--sobre-oscura);
}

/* ── Barra de arriba: lo escogido en pastillas y el avance redondo ── */
[data-estilo~="tablero"] .barra-reserva {
  border-bottom: 0;
}
[data-estilo~="tablero"] .chip-reserva {
  border: var(--borde-fino) solid var(--tablero-borde);
  background: var(--color-tarjeta);
  box-shadow: var(--sombra-tarjeta);
  animation: tablero-aparece var(--duracion-entrar) var(--curva-resorte) both;
}
[data-estilo~="tablero"] .progreso {
  margin: 0 var(--margen-pantalla) var(--espacio-2);
  border-radius: var(--radio-pastilla);
}
[data-estilo~="tablero"] .progreso-relleno {
  border-radius: var(--radio-pastilla);
  transition: transform var(--duracion-mover) var(--curva-salida);
}

/* ── Cada paso entra de lado y sus piezas, una tras otra ── */
[data-estilo~="tablero"] .paso-adelante,
[data-estilo~="tablero"] .paso-atras {
  animation-duration: var(--duracion-entrar);
  animation-timing-function: var(--curva-salida);
}
[data-estilo~="tablero"] .paso-adelante > *,
[data-estilo~="tablero"] .paso-atras > * {
  animation: tablero-entra var(--duracion-entrar) var(--curva-salida) both;
}
[data-estilo~="tablero"] .paso > :nth-child(2) { animation-delay: var(--escalon); }
[data-estilo~="tablero"] .paso > :nth-child(3) { animation-delay: calc(var(--escalon) * 2); }
[data-estilo~="tablero"] .paso > :nth-child(4) { animation-delay: calc(var(--escalon) * 3); }
[data-estilo~="tablero"] .paso > :nth-child(5) { animation-delay: calc(var(--escalon) * 4); }
[data-estilo~="tablero"] .paso > :nth-child(n + 6) { animation-delay: calc(var(--escalon) * 5); }

/* ── Paso 1: cada categoría en su tarjeta ── */
[data-estilo~="tablero"] .paso-servicio .plegable,
[data-estilo~="tablero"] .paso-servicio > .lista-servicios {
  margin-bottom: var(--espacio-3);
  padding: 0 var(--espacio-3);
  border: var(--borde-fino) solid var(--tablero-borde);
  border-radius: var(--radio-tarjeta);
  background: var(--color-tarjeta);
  box-shadow: var(--sombra-tarjeta);
}
[data-estilo~="tablero"] .paso-servicio .plegable > summary {
  padding: 0 var(--espacio-1);
}
[data-estilo~="tablero"] .plegable > summary::after {
  transition: transform var(--duracion-entrar) var(--curva-resorte);
}
[data-estilo~="tablero"] .plegable[open] > .plegable-cuerpo {
  animation: tablero-entra var(--duracion-entrar) var(--curva-salida);
}
[data-estilo~="tablero"] .opcion-servicio-publica {
  margin-bottom: var(--espacio-1);
  padding-right: var(--espacio-2);
  padding-left: var(--espacio-2);
  border-bottom: 0;
  border-radius: var(--radio-control);
}
[data-estilo~="tablero"] .opcion-servicio-publica[aria-pressed="true"] {
  background: var(--color-acento);
  color: var(--color-sobre-acento);
}
[data-estilo~="tablero"] .opcion-servicio-publica[aria-pressed="true"] .opcion-servicio-datos,
[data-estilo~="tablero"] .opcion-servicio-publica[aria-pressed="true"] > .icono {
  color: var(--sobre-destacada-suave);
}
[data-estilo~="tablero"] .opcion-servicio-publica > .icono {
  transition: transform var(--duracion) var(--curva);
}
[data-estilo~="tablero"] .opcion-servicio-publica:hover:not(:disabled) > .icono {
  transform: translateX(var(--espacio-1));
}
[data-estilo~="tablero"] .foto-servicio {
  border-radius: var(--radio-tarjeta);
}

/* ── Paso 2: estilistas en tarjetas; la escogida, rellena ── */
[data-estilo~="tablero"] .opcion-estilista {
  transition: transform var(--duracion) var(--curva), box-shadow var(--duracion) var(--curva), background-color var(--duracion) var(--curva);
}
[data-estilo~="tablero"] .opcion-estilista:hover {
  border-color: var(--tablero-borde);
  box-shadow: var(--sombra-tarjeta-alta);
  transform: translateY(calc(var(--espacio-0) * -1));
}
[data-estilo~="tablero"] .opcion-estilista:active {
  transform: scale(var(--escala-presion));
}
[data-estilo~="tablero"] .opcion-libre {
  border: var(--borde-fino) dashed var(--color-acento);
}
[data-estilo~="tablero"] .opcion-estilista[aria-pressed="true"] {
  border-color: var(--color-acento);
  background: var(--color-acento);
  box-shadow: var(--sombra-tarjeta-alta);
  color: var(--color-sobre-acento);
}
[data-estilo~="tablero"] .opcion-estilista[aria-pressed="true"] .opcion-estilista-detalle {
  color: var(--sobre-destacada-suave);
}
[data-estilo~="tablero"] .opcion-estilista[aria-pressed="true"] .avatar-estilista {
  box-shadow: 0 0 0 var(--borde-logo) var(--sobre-destacada-fondo);
}
[data-estilo~="tablero"] .opcion-libre[aria-pressed="true"] .avatar-estilista {
  background: var(--sobre-destacada-fondo);
}

/* ── Paso 3: el calendario en su tarjeta, días redondos y horas en pastilla ── */
[data-estilo~="tablero"] .calendario {
  padding: var(--espacio-4) var(--espacio-3);
  border: var(--borde-fino) solid var(--tablero-borde);
  border-radius: var(--radio-tarjeta);
  background: var(--color-tarjeta);
  box-shadow: var(--sombra-tarjeta);
}
[data-estilo~="tablero"] .calendario-mes .boton {
  border-radius: var(--radio-pastilla);
}
[data-estilo~="tablero"] .dia {
  justify-self: center;
  width: var(--celda-calendario);
  max-width: 100%;
  border-radius: var(--radio-pastilla);
  transition: background-color var(--duracion) var(--curva), transform var(--duracion) var(--curva);
}
[data-estilo~="tablero"] .dia:active:not(:disabled) {
  transform: scale(var(--escala-presion));
}
[data-estilo~="tablero"] .dia[aria-pressed="true"] {
  box-shadow: var(--sombra-tarjeta-alta);
  animation: tablero-aparece var(--duracion-entrar) var(--curva-resorte);
}
[data-estilo~="tablero"] .hora-publica {
  border-color: var(--tablero-borde);
  border-radius: var(--radio-pastilla);
  background: var(--color-tarjeta);
  box-shadow: var(--sombra-tarjeta);
  transition: background-color var(--duracion) var(--curva), transform var(--duracion) var(--curva), box-shadow var(--duracion) var(--curva);
  animation: tablero-entra var(--duracion-entrar) var(--curva-salida) both;
}
[data-estilo~="tablero"] .hora-publica:nth-child(2) { animation-delay: calc(var(--escalon) / 2); }
[data-estilo~="tablero"] .hora-publica:nth-child(3) { animation-delay: var(--escalon); }
[data-estilo~="tablero"] .hora-publica:nth-child(4) { animation-delay: calc(var(--escalon) * 1.5); }
[data-estilo~="tablero"] .hora-publica:nth-child(5) { animation-delay: calc(var(--escalon) * 2); }
[data-estilo~="tablero"] .hora-publica:nth-child(6) { animation-delay: calc(var(--escalon) * 2.5); }
[data-estilo~="tablero"] .hora-publica:nth-child(n + 7) { animation-delay: calc(var(--escalon) * 3); }
[data-estilo~="tablero"] .hora-publica:hover {
  border-color: var(--color-acento);
  box-shadow: var(--sombra-tarjeta-alta);
}
[data-estilo~="tablero"] .hora-publica:active {
  transform: scale(var(--escala-presion));
}
[data-estilo~="tablero"] .hora-publica[aria-pressed="true"] {
  box-shadow: var(--sombra-tarjeta-alta);
}

/* ── Paso 5 y la cita: el resumen en tarjeta ── */
[data-estilo~="tablero"] .tarjeta-resumen {
  padding: var(--espacio-3) var(--espacio-5);
}
[data-estilo~="tablero"] .renglon-resumen > .icono {
  box-sizing: content-box;
  padding: var(--espacio-2);
  border-radius: var(--radio-pastilla);
  background: var(--color-hundido);
  color: var(--color-acento-texto);
}
[data-estilo~="tablero"] .cambio-resumen-ahora {
  border-radius: var(--radio-tarjeta);
  background: var(--color-acento);
  color: var(--color-sobre-acento);
}
[data-estilo~="tablero"] .cambio-resumen-ahora .cambio-resumen-etiqueta {
  color: var(--sobre-destacada-suave);
}
[data-estilo~="tablero"] .encuesta-numero {
  border-color: var(--tablero-borde);
  border-radius: var(--radio-pastilla);
  box-shadow: var(--sombra-tarjeta);
}

/* ── Paso 6: listo. La palomita salta y deja una onda del acento ── */
[data-estilo~="tablero"] .palomita-listo {
  position: relative;
  animation: tablero-aparece var(--duracion-entrar) var(--curva-resorte) both;
}
[data-estilo~="tablero"] .palomita-listo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radio-pastilla);
  box-shadow: 0 0 0 var(--espacio-3) var(--color-acento-tenue);
  animation: tablero-onda var(--duracion-nuevo) var(--curva-salida) both;
  pointer-events: none;
}
@keyframes tablero-onda {
  from {
    opacity: 1;
    transform: scale(0.8);
  }
  to {
    opacity: 0;
    transform: scale(1.6);
  }
}
[data-estilo~="tablero"] .pin-nuevo {
  background: var(--curvas-oscuras), var(--tarjeta-oscura);
  color: var(--sobre-oscura);
}

/* ── Barra de abajo: flota sobre la página, redonda (celular y tablet) ── */
[data-estilo~="tablero"] .barra-fija {
  right: var(--espacio-3);
  bottom: calc(var(--espacio-3) + env(safe-area-inset-bottom));
  left: var(--espacio-3);
  padding: var(--espacio-2) var(--espacio-2) var(--espacio-2) var(--espacio-5);
  border: var(--borde-fino) solid var(--tablero-borde);
  border-radius: var(--radio-pastilla);
  background: var(--color-tarjeta);
  box-shadow: var(--sombra-tarjeta-alta);
  animation: tablero-entra var(--duracion-entrar) var(--curva-salida);
}
/* Con solo el botón ("Pedir cita"), flota el botón solo */
[data-estilo~="tablero"] .barra-fija:not(:has(.barra-fija-total)) {
  padding: 0;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
[data-estilo~="tablero"] .barra-fija:not(:has(.barra-fija-total)) > .boton {
  box-shadow: var(--sombra-tarjeta-alta);
}
[data-estilo~="tablero"] .barra-fija-total {
  flex: none;
  white-space: nowrap;
}
[data-estilo~="tablero"] .barra-fija-precio {
  font-size: var(--texto-md);
}

/* ═══════════════════════════════════════════════════════════════════════
   Etapa 7: el perfil del negocio (docs/etapa7-perfil-negocio.md)
   Fotos en mosaico, servicios con "+", equipo, opiniones con su tarjeta
   del color del negocio y barras en tres tonos, "Acerca de", la hoja de
   una foto (con el fondo borroso) y la página de cada estilista. Lo de
   arriba entra una pieza tras otra (.perfil-entra); cada sección, al
   asomarse (.a-la-vista). Sin animaciones en el aparato, todo quieto.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Entrada ── */
[data-estilo~="tablero"] .perfil-entra > * {
  animation: tablero-entra var(--duracion-entrar) var(--curva-salida) both;
  animation-delay: calc(var(--orden, 0) * var(--escalon));
}
[data-estilo~="tablero"] .perfil-entra .perfil-pastillas > * {
  animation: perfil-salta var(--duracion-entrar) var(--curva-resorte) both;
  animation-delay: calc(var(--escalon) * 4);
}
[data-estilo~="tablero"] .perfil-entra .perfil-pastillas > :nth-child(2) {
  animation-delay: calc(var(--escalon) * 5);
}
@keyframes perfil-salta {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
}
/* Las piezas de cada sección esperan a que la sección asome */
[data-estilo~="tablero"] .perfil-bloque:not(.a-la-vista) .foto-mosaico,
[data-estilo~="tablero"] .perfil-bloque:not(.a-la-vista) .perfil-tarjeta,
[data-estilo~="tablero"] .perfil-bloque:not(.a-la-vista) .tarjeta-persona,
[data-estilo~="tablero"] .perfil-bloque:not(.a-la-vista) .tarjeta-opinion,
[data-estilo~="tablero"] .perfil-bloque:not(.a-la-vista) .tarjeta-destacada {
  opacity: 0;
}
[data-estilo~="tablero"] .a-la-vista .perfil-tarjeta,
[data-estilo~="tablero"] .a-la-vista .tarjeta-persona,
[data-estilo~="tablero"] .a-la-vista .tarjeta-opinion,
[data-estilo~="tablero"] .a-la-vista .tarjeta-destacada {
  animation: tablero-entra var(--duracion-entrar) var(--curva-salida) both;
}
[data-estilo~="tablero"] .a-la-vista .tarjeta-persona:nth-child(2),
[data-estilo~="tablero"] .a-la-vista .tarjeta-opinion:nth-child(2),
[data-estilo~="tablero"] .a-la-vista .perfil-tarjeta:nth-child(3) {
  animation-delay: var(--escalon);
}
[data-estilo~="tablero"] .a-la-vista .tarjeta-persona:nth-child(n + 3),
[data-estilo~="tablero"] .a-la-vista .tarjeta-opinion:nth-child(n + 3),
[data-estilo~="tablero"] .a-la-vista .perfil-tarjeta:nth-child(n + 4) {
  animation-delay: calc(var(--escalon) * 2);
}
[data-estilo~="tablero"] .a-la-vista .foto-mosaico {
  animation: tablero-aparece var(--duracion-mover) var(--curva-salida) both;
  animation-delay: calc(var(--orden, 0) * var(--escalon) * 1.3);
}
[data-estilo~="tablero"] .a-la-vista .barra-estrellas-carril > span {
  animation: tablero-crece-ancho var(--duracion-crecer) var(--curva-salida) both;
  animation-delay: calc(var(--escalon) * 3 + var(--orden, 0) * var(--escalon) * 1.5);
}

/* ── Arriba ── */
[data-estilo~="tablero"] .perfil-pastillas {
  gap: var(--espacio-2);
}
@media (prefers-reduced-motion: no-preference) {
  [data-estilo~="tablero"] .etiqueta-estado.con-latido::before {
    animation: perfil-late var(--latido) ease-in-out infinite;
  }
}
@keyframes perfil-late {
  50% {
    opacity: 0.35;
  }
}
.perfil-calificacion {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-2);
  min-height: var(--toque-min);
  color: var(--color-texto-suave);
  font-size: var(--texto-sm);
  text-decoration: none;
}
.perfil-calificacion-numero {
  color: var(--color-texto);
  font-family: var(--fuente-cifras);
  font-size: var(--texto-xl);
  font-weight: var(--peso-titulo);
}

/* ── Pestañas pegadas arriba ── */
.pestanas-perfil {
  position: sticky;
  top: 0;
  z-index: var(--capa-pegajosa);
  background: var(--color-fondo);
}
.pestanas-perfil-fila {
  display: flex;
  gap: var(--espacio-2);
  padding: var(--espacio-3) 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.pestanas-perfil-fila::-webkit-scrollbar {
  display: none;
}
.pestana-perfil {
  display: inline-flex;
  flex: none;
  align-items: center;
  min-height: var(--toque-min);
  padding: 0 var(--espacio-4);
  border-radius: var(--radio-pastilla);
  background: var(--color-tarjeta);
  box-shadow: var(--sombra-tarjeta);
  color: var(--color-texto-suave);
  font-size: var(--texto-sm);
  font-weight: var(--peso-fuerte);
  text-decoration: none;
  transition: background-color var(--duracion) var(--curva), color var(--duracion) var(--curva);
}
.pestana-perfil[aria-current] {
  background: var(--color-acento);
  color: var(--color-sobre-acento);
}
/* Las secciones se paran debajo de las pestañas */
.perfil-bloque {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
  scroll-margin-top: calc(var(--toque-min) + var(--espacio-6));
}
.perfil-bloque-titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-3);
}
.perfil-bloque-titulo > h2 {
  font-family: var(--fuente-titulo);
  font-size: var(--texto-lg);
  font-weight: var(--peso-titulo);
  letter-spacing: var(--letras-titulo);
}
.perfil-tarjeta {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
  padding: var(--espacio-4);
  border: var(--borde-fino) solid var(--tablero-borde);
  border-radius: var(--radio-tarjeta);
  background: var(--color-tarjeta);
  box-shadow: var(--sombra-tarjeta);
}
.perfil-tarjeta-subtitulo {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
  color: var(--color-texto-suave);
  font-size: var(--texto-sm);
  font-weight: var(--peso-fuerte);
}
.boton-circulo {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: var(--boton-circulo);
  height: var(--boton-circulo);
  min-width: var(--toque-min);
  min-height: var(--toque-min);
  padding: 0;
  border: 0;
  border-radius: var(--radio-pastilla);
  background: var(--color-tarjeta);
  box-shadow: var(--sombra-tarjeta);
  color: var(--color-texto);
  cursor: pointer;
}
.boton-circulo:disabled {
  opacity: 0.4;
  cursor: default;
}
span.boton-circulo {
  min-width: 0;
  min-height: 0;
  background: var(--color-acento-tenue);
  box-shadow: none;
  color: var(--color-acento-texto);
}
.boton-circulo-suave {
  background: var(--color-hundido);
  color: var(--color-texto);
}
.boton-circulo-claro {
  background: var(--etiqueta-foto);
  color: var(--texto-etiqueta-foto);
}

/* ── Fotos en mosaico: una grande de 2×2 y las demás chicas ── */
.galeria-mosaico {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: var(--alto-foto-mosaico);
  gap: var(--espacio-2);
}
.galeria-de-1 {
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: calc(var(--alto-foto-mosaico) * 2);
}
.galeria-de-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: calc(var(--alto-foto-mosaico) * 1.5);
}
.foto-mosaico {
  position: relative;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: var(--radio-foto);
  background: var(--color-hundido);
  cursor: zoom-in;
}
.galeria-mosaico:not(.galeria-de-1, .galeria-de-2) > .foto-mosaico:first-child {
  grid-row: span 2;
  grid-column: span 2;
}
.foto-mosaico > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duracion-mover) var(--curva-salida);
}
@media (hover: hover) {
  .foto-mosaico:hover > img {
    transform: scale(1.04);
  }
}
.foto-etiqueta {
  position: absolute;
  bottom: var(--espacio-2);
  left: var(--espacio-2);
  padding: var(--espacio-1) var(--espacio-3);
  border-radius: var(--radio-pastilla);
  background: var(--etiqueta-foto);
  color: var(--texto-etiqueta-foto);
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
}
.foto-mas {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--velo-foto);
  color: var(--sobre-oscura);
  font-size: var(--texto-lg);
  font-weight: var(--peso-fuerte);
}

/* ── Servicios: renglón con foto, precio y "+" ── */
.lista-renglones {
  display: flex;
  flex-direction: column;
  margin: calc(var(--espacio-2) * -1) calc(var(--espacio-2) * -1);
  padding: 0;
  list-style: none;
}
.lista-renglones > li + li {
  border-top: var(--borde-fino) solid var(--color-linea);
}
.renglon-servicio {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  width: 100%;
  min-height: calc(var(--toque-min) + var(--espacio-2));
  padding: var(--espacio-3) var(--espacio-2);
  border: 0;
  border-radius: var(--radio-control);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--duracion) var(--curva);
}
.renglon-servicio:hover:not(:disabled) {
  background: var(--color-hundido);
}
.renglon-servicio:disabled {
  color: var(--color-texto-suave);
  cursor: default;
}
.renglon-servicio-foto {
  width: var(--foto-servicio);
  height: var(--foto-servicio);
  flex: none;
  border-radius: var(--radio-foto);
  object-fit: cover;
}
.renglon-servicio-texto {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}
.renglon-servicio-nombre {
  font-weight: var(--peso-fuerte);
}
.renglon-servicio-detalle {
  color: var(--color-texto-suave);
  font-size: var(--texto-sm);
}
.renglon-servicio-precio {
  font-weight: var(--peso-fuerte);
  white-space: nowrap;
}

/* ── Equipo: tarjetas que se deslizan de lado ── */
.fila-personas {
  display: flex;
  gap: var(--espacio-3);
  margin: 0 calc(var(--margen-pantalla) * -1);
  padding: var(--espacio-1) var(--margen-pantalla) var(--espacio-3);
  overflow-x: auto;
  scroll-padding: 0 var(--margen-pantalla);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.fila-personas::-webkit-scrollbar {
  display: none;
}
.tarjeta-persona {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  gap: var(--espacio-1);
  width: var(--ancho-persona-perfil);
  padding: var(--espacio-4) var(--espacio-2) var(--espacio-3);
  border-radius: var(--radio-tarjeta);
  background: var(--color-tarjeta);
  box-shadow: var(--sombra-tarjeta);
  color: inherit;
  text-align: center;
  text-decoration: none;
  scroll-snap-align: start;
  transition: transform var(--duracion) var(--curva), box-shadow var(--duracion) var(--curva);
}
a.tarjeta-persona:hover {
  box-shadow: var(--sombra-tarjeta-alta);
  transform: translateY(calc(var(--espacio-0) * -1));
}
a.tarjeta-persona:active {
  transform: scale(var(--escala-presion));
}
.avatar-perfil {
  display: inline-grid;
  place-items: center;
  width: var(--avatar-perfil);
  height: var(--avatar-perfil);
  flex: none;
  border-radius: var(--radio-pastilla);
  object-fit: cover;
  font-weight: var(--peso-fuerte);
}
.avatar-perfil.con-anillo {
  margin-bottom: var(--espacio-2);
  box-shadow: 0 0 0 var(--anillo-perfil) var(--color-tarjeta), 0 0 0 calc(var(--anillo-perfil) * 2) var(--color-acento);
}
.avatar-perfil.avatar-grande {
  width: var(--avatar-perfil-grande);
  height: var(--avatar-perfil-grande);
  font-size: var(--texto-2xl);
}
.avatar-perfil.avatar-mini {
  width: var(--avatar-mini);
  height: var(--avatar-mini);
  font-size: var(--texto-xs);
}
.tarjeta-persona-nombre {
  font-weight: var(--peso-fuerte);
}
.tarjeta-persona-detalle {
  color: var(--color-texto-suave);
  font-size: var(--texto-xs);
}
.tarjeta-persona-calificacion {
  font-size: var(--texto-sm);
  font-weight: var(--peso-fuerte);
}
.estrella-sola {
  margin-right: var(--espacio-1);
  color: var(--color-estrella);
}
.pastilla-lugares {
  margin-top: var(--espacio-1);
  padding: var(--espacio-1) var(--espacio-2);
  border-radius: var(--radio-pastilla);
  background: var(--color-acento-tenue);
  color: var(--color-acento-texto);
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
  animation: tablero-aparece var(--duracion-entrar) var(--curva-resorte) both;
}

/* ── Opiniones: la tarjeta del color del negocio y las barras ── */
.resumen-opiniones {
  display: grid;
  grid-template-columns: var(--ancho-columna-destacada) minmax(0, 1fr);
  gap: var(--espacio-3);
}
.tarjeta-destacada {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--espacio-3);
  padding: var(--espacio-4);
  border-radius: var(--radio-tarjeta);
  background: var(--tarjeta-destacada);
  box-shadow: var(--sombra-tarjeta);
  color: var(--sobre-destacada);
}
.tarjeta-destacada .estrellas,
.tarjeta-destacada .estrellas-apagadas {
  color: inherit;
}
.tarjeta-destacada .estrellas-apagadas {
  opacity: 0.4;
}
.tarjeta-destacada-cifra {
  font-size: var(--texto-cifra-destacada);
  font-weight: var(--peso-cifra-grande);
  letter-spacing: var(--letras-cifra-grande);
  line-height: 1;
}
.tarjeta-destacada-pie {
  color: var(--sobre-destacada-suave);
  font-size: var(--texto-sm);
}
.barras-estrellas {
  justify-content: center;
  gap: var(--espacio-2);
}
.barra-estrellas {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--espacio-2);
  color: var(--color-texto-suave);
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
}
.barra-estrellas-carril {
  height: var(--alto-barra-estrellas);
  overflow: hidden;
  border-radius: var(--radio-pastilla);
  background: var(--color-hundido);
}
.barra-estrellas-carril > span {
  display: block;
  width: calc(var(--fraccion) * 100%);
  height: 100%;
  border-radius: var(--radio-pastilla);
  transform-origin: left center;
}
.barra-fuerte { background: var(--barra-fuerte); }
.barra-media  { background: var(--barra-media); }
.barra-tenue  { background: var(--barra-tenue); }
.lista-opiniones {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
}
.lista-opiniones > .boton-texto {
  align-self: flex-start;
}
.tarjeta-opinion {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--espacio-2);
  padding: var(--espacio-4);
  border-radius: var(--radio-tarjeta);
  background: var(--color-tarjeta);
  box-shadow: var(--sombra-tarjeta);
}
.tarjeta-opinion-cabeza {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
}
.bolita-iniciales {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: var(--bolita-iniciales);
  height: var(--bolita-iniciales);
  border-radius: var(--radio-pastilla);
  font-size: var(--texto-sm);
  font-weight: var(--peso-fuerte);
}
.tarjeta-opinion-quien {
  display: flex;
  flex-direction: column;
}
.tarjeta-opinion-nombre {
  font-weight: var(--peso-fuerte);
}
.tarjeta-opinion-detalle {
  color: var(--color-texto-suave);
  font-size: var(--texto-sm);
}
.tarjeta-opinion-texto {
  line-height: var(--interlineado);
  overflow-wrap: anywhere;
}
.pastilla-verificado,
.pastilla-origen {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-1);
  padding: var(--espacio-0) var(--espacio-2);
  border: var(--borde-grueso) solid currentColor;
  border-radius: var(--radio-pastilla);
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
}
.pastilla-verificado {
  color: var(--estado-atendida-texto);
}
.pastilla-origen {
  color: var(--color-texto-suave);
}
.tarjeta-google {
  flex-direction: row;
  align-items: center;
  color: inherit;
  text-decoration: none;
}
.tarjeta-google-texto {
  display: flex;
  flex: 1;
  flex-direction: column;
  font-size: var(--texto-sm);
}
.logo-google {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: var(--boton-circulo);
  height: var(--boton-circulo);
  border-radius: var(--radio-pastilla);
  background: var(--color-hundido);
  color: var(--google-azul);
  font-weight: var(--peso-titulo);
}

/* ── Acerca de ── */
.perfil-acerca-texto {
  line-height: var(--interlineado);
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.pastillas-detalles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pastilla-detalle {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
  min-height: var(--alto-control);
  padding: 0 var(--espacio-3);
  border: var(--borde-grueso) solid var(--color-linea);
  border-radius: var(--radio-pastilla);
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
}
.pastilla-detalle > .icono {
  color: var(--color-acento-texto);
}
.horario-perfil {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0 calc(var(--espacio-4) * -1) calc(var(--espacio-4) * -1);
}
.horario-perfil > div {
  display: flex;
  justify-content: space-between;
  gap: var(--espacio-3);
  padding: var(--espacio-3) var(--espacio-4);
  border-top: var(--borde-fino) solid var(--color-linea);
}
.horario-perfil > .es-hoy {
  border-radius: 0 0 var(--radio-tarjeta) var(--radio-tarjeta);
  background: var(--color-acento-tenue);
}
.horario-perfil > .es-hoy:not(:last-child) {
  border-radius: 0;
}
.horario-perfil > .es-hoy dt,
.horario-perfil > .es-hoy dd {
  color: var(--color-texto);
  font-weight: var(--peso-fuerte);
}

/* ── La hoja de una foto: sube con rebote sobre el fondo borroso ── */
.ventana.hoja-foto {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
  width: min(100%, var(--ancho-ventana));
  max-height: calc(100% - var(--espacio-4));
  margin: auto auto 0;
  padding: var(--espacio-2) var(--espacio-2) calc(var(--espacio-5) + env(safe-area-inset-bottom));
  overflow-y: auto;
  border-radius: calc(var(--radio-tarjeta) * 1.5) calc(var(--radio-tarjeta) * 1.5) 0 0;
}
.ventana.hoja-foto:not([open]) {
  display: none;
}
[data-estilo~="tablero"] .ventana.hoja-foto[open] {
  animation: perfil-hoja var(--duracion-mover) var(--curva-resorte);
}
@keyframes perfil-hoja {
  from {
    transform: translateY(100%);
  }
}
.hoja-foto-agarre {
  flex: none;
  width: var(--espacio-10);
  height: var(--espacio-1);
  margin: 0 auto;
  border-radius: var(--radio-pastilla);
  background: var(--color-linea);
}
.hoja-foto-marco {
  position: relative;
}
.hoja-foto-carrusel {
  display: flex;
  overflow-x: auto;
  border-radius: var(--radio-tarjeta);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.hoja-foto-carrusel::-webkit-scrollbar {
  display: none;
}
.hoja-foto-cuadro {
  flex: none;
  width: 100%;
  height: var(--alto-hoja-foto);
  margin: 0;
  scroll-snap-align: center;
  background: var(--color-hundido);
}
.hoja-foto-cuadro > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hoja-foto-cerrar {
  position: absolute;
  top: var(--espacio-3);
  right: var(--espacio-3);
}
.hoja-foto-flechas {
  position: absolute;
  inset: 50% var(--espacio-3) auto;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  transform: translateY(-50%);
}
.hoja-foto-flechas > * {
  pointer-events: auto;
}
@media (hover: none) {
  .hoja-foto-flechas {
    display: none;
  }
}
.hoja-foto-pie {
  display: flex;
  justify-content: center;
  color: var(--color-texto-suave);
  font-size: var(--texto-sm);
}
.hoja-foto-pie:empty {
  display: none;
}
.hoja-foto-info {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
  padding: 0 var(--espacio-2);
}
.hoja-foto-autor {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  color: var(--color-texto-suave);
  font-size: var(--texto-sm);
}
.hoja-foto-servicio {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-3);
  padding: var(--espacio-3) var(--espacio-4);
  border-radius: var(--radio-control);
  background: var(--color-hundido);
}

/* ── Página del estilista ── */
.cabecera-estilista {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espacio-1);
  text-align: center;
}
.cabecera-estilista-botones {
  display: flex;
  justify-content: space-between;
  align-self: stretch;
  margin-bottom: calc(var(--espacio-6) * -1);
}
.pastilla-enlace {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
  max-width: 100%;
  margin-top: var(--espacio-2);
  padding: var(--espacio-1) var(--espacio-1) var(--espacio-1) var(--espacio-4);
  border-radius: var(--radio-pastilla);
  background: var(--color-tarjeta);
  box-shadow: var(--sombra-tarjeta);
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
}
.pastilla-enlace-texto {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pastilla-enlace-boton {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--espacio-1);
  min-height: var(--toque-min);
  padding: 0 var(--espacio-3);
  border: 0;
  border-radius: var(--radio-pastilla);
  background: var(--color-acento);
  color: var(--color-sobre-acento);
  font: inherit;
  font-weight: var(--peso-fuerte);
  cursor: pointer;
}
.cifras-estilista {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: var(--espacio-2);
}
.cifras-estilista > * {
  gap: var(--espacio-1);
  padding: var(--espacio-3);
  font-size: var(--texto-xs);
}
.cifras-estilista > .perfil-tarjeta {
  color: var(--color-texto-suave);
}
.cifras-estilista-valor {
  color: var(--color-texto);
  font-family: var(--fuente-cifras);
  font-size: var(--texto-lg);
  font-weight: var(--peso-titulo);
  white-space: nowrap;
}
.tarjeta-destacada .cifras-estilista-valor {
  color: inherit;
}
.siguiente-lugar {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-1);
  padding: var(--espacio-4) var(--espacio-4) var(--espacio-3);
  border-radius: var(--radio-tarjeta);
  background: var(--curvas-oscuras), var(--tarjeta-oscura);
  color: var(--sobre-oscura);
}
.siguiente-lugar-etiqueta,
.siguiente-lugar-falta {
  color: var(--sobre-oscura-suave);
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
}
.siguiente-lugar-fila {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--espacio-3);
}
.siguiente-lugar-fila > div {
  min-width: 0;
}
.siguiente-lugar-hora {
  font-size: var(--texto-xl);
  font-weight: var(--peso-titulo);
  letter-spacing: var(--letras-titulo);
}
.siguiente-lugar.sin-lugar .siguiente-lugar-hora {
  font-size: var(--texto-md);
}
.siguiente-lugar .esqueleto {
  display: block;
  min-width: var(--espacio-16);
  background: var(--sobre-oscura-fondo);
}
.boton.boton-claro {
  flex: none;
  border-color: transparent;
  background: var(--sobre-oscura);
  color: var(--tarjeta-oscura);
}
.siguiente-lugar.sin-lugar .boton-claro {
  display: none;
}
.ver-negocio {
  align-self: center;
}

/* ── Personalización → Su página: fotos, "Acerca de" y opiniones ── */
.lista-fotos .fila-foto {
  align-items: center;
  padding-right: var(--espacio-2);
  padding-left: var(--espacio-2);
}
.foto-galeria-chica {
  width: var(--foto-servicio);
  height: var(--foto-servicio);
  flex: none;
  border-radius: var(--radio-control);
  object-fit: cover;
}
.fila-foto-campos {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--espacio-2);
  min-width: 0;
}
.fila-foto-campos > .entrada {
  width: 100%;
}
.casillas-detalles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--ancho-texto-min), 1fr));
  gap: 0 var(--espacio-4);
}
.casillas-detalles .icono {
  color: var(--color-acento-texto);
}
.fila-opinion {
  align-items: flex-start;
}
.fila-opinion .fila-texto {
  gap: var(--espacio-1);
}
@media (max-width: 599px) {
  .fila-opinion,
  .lista-fotos .fila-foto {
    flex-wrap: wrap;
  }
  /* En celular, quién y qué servicio van en su propio renglón */
  .lista-fotos .fila-foto-campos {
    order: 1;
    flex-basis: 100%;
  }
  .lista-fotos .fila-foto > .boton-icono {
    margin-left: auto;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   Estilo Cobre (rediseño de imagen, aprobado el 11 oct 2026)
   <html data-estilo="tablero cobre">: todo lo de aquí se sobrepone a
   Tablero. La referencia exacta son los prototipos aprobados del panel,
   el login y la página "Vidrio" (docs/rediseno-imagen.md). Colores y
   medidas en tokens.css; aquí solo la forma.
   El movimiento del video: la luz que se mueve, las piezas que entran
   desenfocadas, el halo de lo que sigue y el brillo del botón principal.
   Con prefers-reduced-motion todo queda quieto en su estado final.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── La luz de arriba ──
   Una por página, al principio del <body>: cobre y naranja, un toque azul
   a la izquierda, la cuadrícula tenue que se desvanece y dos manchas que se
   mueven despacio, como una aurora. Fuera de Cobre no se ve. */
.luz {
  display: none;
}
[data-estilo~="cobre"] .luz {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: -1;
  display: block;
  height: var(--alto-luz);
  overflow: hidden;
  pointer-events: none;
}
/* Dentro de una pieza (la guía, el lado del login): se queda en su caja. */
[data-estilo~="cobre"] .luz-local {
  position: absolute;
  inset: 0;
  z-index: 0;
  height: auto;
}
[data-estilo~="cobre"] .luz::before,
[data-estilo~="cobre"] .luz::after {
  content: "";
  position: absolute;
  inset: 0;
}
[data-estilo~="cobre"] .luz::before {
  background:
    radial-gradient(40% 60% at 62% 0%, var(--luz-naranja), transparent 72%),
    radial-gradient(28% 70% at 42% 0%, var(--luz-cobre), transparent 74%),
    radial-gradient(26% 50% at 4% 30%, var(--luz-azul), transparent 72%);
}
[data-estilo~="cobre"] .luz::after {
  background-image:
    linear-gradient(var(--luz-reja) var(--borde-fino), transparent var(--borde-fino)),
    linear-gradient(90deg, var(--luz-reja) var(--borde-fino), transparent var(--borde-fino));
  background-size: var(--paso-reja) var(--paso-reja);
  -webkit-mask-image: radial-gradient(70% 80% at 50% 0%, var(--color-texto) 20%, transparent 75%);
  mask-image: radial-gradient(70% 80% at 50% 0%, var(--color-texto) 20%, transparent 75%);
}
[data-estilo~="cobre"] .luz-mancha {
  position: absolute;
  top: var(--mancha-arriba);
  left: 30%;
  width: var(--mancha);
  max-width: var(--mancha-max);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--luz-naranja), transparent 65%);
  animation: cobre-mancha var(--duracion-mancha) ease-in-out infinite alternate;
}
[data-estilo~="cobre"] .luz-mancha + .luz-mancha {
  left: 55%;
  background: radial-gradient(circle, var(--luz-cobre), transparent 65%);
  animation-duration: var(--duracion-mancha-2);
  animation-direction: alternate-reverse;
}
@keyframes cobre-mancha {
  from {
    transform: translate(var(--mancha-ida), 0) scale(1);
  }
  to {
    transform: translate(var(--mancha-vuelta), var(--mancha-baja)) scale(1.15);
  }
}

/* ── Texto ── */
/* La palabra clave en cursiva (Instrument Serif): solo en el saludo y en
   los títulos de las pantallas de entrar. */
.con-cursiva em {
  font-family: var(--fuente-cursiva);
  font-size: var(--tamano-cursiva);
  font-style: italic;
  font-weight: var(--peso-normal);
  letter-spacing: 0;
}
.barra-saludo {
  font-size: var(--texto-saludo);
  font-weight: var(--peso-fuerte);
  line-height: var(--interlineado-medio);
  letter-spacing: var(--letras-titulo);
}
.barra-saludo em {
  font-size: var(--tamano-cursiva-saludo);
}
.barra-fecha {
  color: var(--color-texto-suave);
  font-size: var(--texto-sm);
}
/* El nombre de la pantalla en la barra (todas menos el Panel) */
.barra-titulo {
  overflow: hidden;
  font-size: var(--texto-saludo);
  font-weight: var(--peso-fuerte);
  line-height: var(--interlineado-medio);
  letter-spacing: var(--letras-titulo);
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* En celular, el nombre del saludo en su propio renglón (como en el
   prototipo): cabe con la campanita y la persona sin cortarse. */
@media (max-width: 767px) {
  .barra-saludo em {
    display: block;
  }
}
.titulo-acceso,
.titulo-guia {
  font-family: var(--fuente-titulo);
  font-size: var(--texto-acceso);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--letras-titulo-grande);
  line-height: var(--interlineado-titulo);
  text-wrap: balance;
}
.titulo-guia {
  font-size: var(--texto-guia);
}
[data-estilo~="cobre"] .tarjeta-titulo {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  font-size: var(--texto-base);
  font-weight: var(--peso-fuerte);
  letter-spacing: 0;
}
[data-estilo~="cobre"] .tarjeta-titulo > .icono {
  width: var(--icono-tarjeta);
  height: var(--icono-tarjeta);
  color: var(--color-texto-tenue);
}
[data-estilo~="cobre"] .sobretitulo {
  color: var(--color-texto-tenue);
}

/* La etiqueta en píldora con el punto naranja, arriba de los títulos */
.etiqueta-punto {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
  width: fit-content;
  padding: var(--espacio-1) var(--espacio-4) var(--espacio-1) var(--espacio-3);
  border: var(--borde-fino) solid var(--color-linea-control);
  border-radius: var(--radio-pastilla);
  background: var(--boton-suave);
  color: var(--color-texto);
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  line-height: var(--interlineado-medio);
}
.etiqueta-punto::before {
  content: "";
  flex: none;
  width: var(--punto-etiqueta);
  height: var(--punto-etiqueta);
  border-radius: var(--radio-pastilla);
  background: var(--color-marca);
  box-shadow: 0 0 0 var(--anillo-punto) var(--color-marca-anillo);
}

/* ── Botones: píldoras; el principal en blanco (negro en la versión
   blanca) y la flecha ↗ en su cuadrito ── */
[data-estilo~="cobre"] .boton {
  position: relative;
  font-size: var(--texto-renglon);
  transition: background-color var(--duracion) var(--curva),
              border-color var(--duracion) var(--curva),
              color var(--duracion) var(--curva),
              transform var(--duracion) var(--curva);
}
[data-estilo~="cobre"] .boton-grande {
  font-size: var(--texto-base);
}
[data-estilo~="cobre"] .boton-principal,
[data-estilo~="cobre"] .boton-principal:hover {
  background: var(--color-acento);
  color: var(--color-sobre-acento);
}
[data-estilo~="cobre"] .boton-secundario {
  border-color: var(--color-linea-control);
  background: var(--boton-suave);
  color: var(--color-texto);
}
[data-estilo~="cobre"] .boton-secundario:hover {
  border-color: var(--color-linea-control);
  background: var(--boton-suave-toca);
}
[data-estilo~="cobre"] .boton-icono {
  border-radius: var(--radio-pastilla);
}
[data-estilo~="cobre"] .boton-secundario.boton-icono {
  border-color: var(--color-linea);
  background: var(--color-tarjeta);
}
[data-estilo~="cobre"] .boton-secundario.boton-icono:hover {
  border-color: var(--color-linea-control);
}
[data-estilo~="cobre"] .boton-peligro {
  border-color: var(--color-peligro);
  background: transparent;
  color: var(--color-peligro);
}
[data-estilo~="cobre"] .boton:disabled,
[data-estilo~="cobre"] .boton[aria-disabled="true"] {
  border-color: transparent;
  background: var(--color-hundido);
  color: var(--color-texto-tenue);
}

/* La flecha ↗ en su cuadrito (botón principal, secundario y enlaces) */
.boton-flecha {
  display: grid;
  flex: none;
  place-items: center;
  width: var(--cuadrito-flecha);
  height: var(--cuadrito-flecha);
  border-radius: var(--radio-cuadrito);
  transition: transform var(--duracion) var(--curva), background-color var(--duracion) var(--curva);
}
.boton-con-flecha {
  gap: var(--espacio-3);
  min-height: var(--alto-control-grande);
  padding: var(--separacion-flecha) var(--separacion-flecha) var(--separacion-flecha) var(--espacio-5);
}
.boton-con-flecha.boton-bloque {
  justify-content: space-between;
}
.boton-principal .boton-flecha {
  background: var(--boton-flecha-fondo);
  color: var(--boton-flecha-texto);
}
.boton-secundario .boton-flecha,
.enlace-flecha .boton-flecha,
.tarjeta-enlace .boton-flecha {
  border: var(--borde-fino) solid var(--color-linea-control);
}
@media (hover: hover) and (pointer: fine) {
  .boton-con-flecha:not(:disabled):hover {
    transform: translateY(var(--levanta));
  }
  .boton-con-flecha:not(:disabled):hover .boton-flecha,
  .enlace-flecha:hover .boton-flecha,
  .tarjeta-enlace:hover .boton-flecha {
    transform: rotate(45deg);
  }
}
.boton-con-flecha:not(:disabled):active {
  transform: scale(var(--escala-presion));
}

/* El brillo que cruza el botón de vez en cuando (entrar, "Pedir cita") */
.boton-brillo {
  overflow: hidden;
  isolation: isolate;
}
.boton-brillo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 35%, var(--boton-brillo) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: cobre-brillo var(--duracion-brillo) ease-in-out infinite var(--espera-brillo);
  pointer-events: none;
}
@keyframes cobre-brillo {
  0%,
  70% {
    transform: translateX(-120%);
  }
  100% {
    transform: translateX(120%);
  }
}

/* Trabajando: "Entrando…" con el circulito que gira */
.gira {
  flex: none;
  width: var(--icono-md);
  height: var(--icono-md);
  border: var(--borde-grueso) solid currentColor;
  border-right-color: transparent;
  border-radius: var(--radio-pastilla);
  animation: cobre-gira var(--duracion-gira) linear infinite;
}
@keyframes cobre-gira {
  to {
    transform: rotate(360deg);
  }
}

/* "Caja ↗", "Agenda ↗": texto con su cuadrito chico */
.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
  min-height: var(--toque-min);
  color: var(--color-texto);
  font-size: var(--texto-renglon);
  font-weight: var(--peso-fuerte);
  text-decoration: none;
}
.enlace-flecha .boton-flecha {
  width: var(--cuadrito-flecha-chico);
  height: var(--cuadrito-flecha-chico);
  border-radius: var(--radio-celda);
}
.enlace-flecha:hover .boton-flecha {
  border-color: transparent;
  background: var(--color-acento);
  color: var(--color-sobre-acento);
}

/* "Continuar con Google" y la raya de "o con su correo" */
.boton-google > img {
  width: var(--icono-md);
  height: var(--icono-md);
}
.separador {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  color: var(--color-texto-tenue);
  font-size: var(--texto-sm);
}
.separador::before,
.separador::after {
  content: "";
  flex: 1;
  height: var(--borde-fino);
  background: var(--color-linea-control);
}

/* ── Hoy · Semana · Mes y las fichas ── */
[data-estilo~="cobre"] .segmentado {
  gap: var(--espacio-0);
  padding: var(--espacio-0);
  border: var(--borde-fino) solid var(--color-linea);
  border-radius: var(--radio-pastilla);
  background: var(--color-tarjeta);
}
[data-estilo~="cobre"] .segmento {
  padding: 0 var(--espacio-4);
  font-weight: var(--peso-medio);
  white-space: nowrap;
}
/* Con cuatro opciones o más ("Mes pasado"), menos aire para que quepan a 375 px */
[data-estilo~="cobre"] .segmentado:has(> .segmento:nth-child(4)) > .segmento {
  padding: 0 var(--espacio-3);
}
[data-estilo~="cobre"] .segmento[aria-pressed="true"],
[data-estilo~="cobre"] .segmento[aria-checked="true"],
[data-estilo~="cobre"] .segmento[aria-current="page"] {
  background: var(--color-acento);
  color: var(--color-sobre-acento);
  box-shadow: none;
}
[data-estilo~="cobre"] .ficha {
  border-color: var(--color-linea-control);
  background: var(--color-tarjeta);
}
[data-estilo~="cobre"] .ficha:hover {
  background: var(--color-hundido);
}
[data-estilo~="cobre"] .ficha[aria-pressed="true"],
[data-estilo~="cobre"] .ficha[aria-checked="true"] {
  border-color: var(--color-acento);
  background: var(--color-acento);
  color: var(--color-sobre-acento);
}

/* Las pastillas de cada estilista en la agenda (celular): avatar arriba,
   nombre abajo, para que quepan tres; la escogida, con borde naranja. */
[data-estilo~="cobre"] .fichas-estilistas {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: var(--espacio-2);
}
[data-estilo~="cobre"] .fichas-estilistas > .ficha {
  flex-direction: column;
  gap: var(--espacio-1);
  min-height: var(--alto-ficha-estilista);
  padding: var(--espacio-2);
  border-color: var(--color-linea);
  border-radius: var(--radio-campo);
  font-size: var(--texto-sm);
}
[data-estilo~="cobre"] .fichas-estilistas > .ficha[aria-pressed="true"] {
  border-color: var(--color-marca);
  background: var(--color-tarjeta);
  color: var(--color-texto);
  box-shadow: inset 0 0 0 var(--borde-fino) var(--color-marca);
}

/* Pastillas chicas: la comparación (+12 %), "Por su página", "5 hoy" */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-1);
  min-height: var(--alto-chip);
  padding: 0 var(--espacio-3);
  border: var(--borde-fino) solid var(--color-linea);
  border-radius: var(--radio-pastilla);
  color: var(--color-texto-suave);
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  line-height: var(--interlineado-apretado);
  white-space: nowrap;
}
.chip > .icono {
  width: var(--icono-chip);
  height: var(--icono-chip);
}
.chip-sube {
  border-color: transparent;
  background: var(--aviso-exito-fondo);
  color: var(--color-ok);
}
.chip-baja {
  border-color: transparent;
  background: var(--aviso-error-fondo);
  color: var(--color-error);
}
.chip-marca {
  border-color: transparent;
  background: var(--color-marca-tenue);
  color: var(--color-marca-texto);
}

/* ── Campos: altos, redondeados y con su ícono; se iluminan al escribir ── */
[data-estilo~="cobre"] .campo-etiqueta {
  font-size: var(--texto-renglon);
}
[data-estilo~="cobre"] .campo-ayuda {
  color: var(--color-texto-tenue);
}
[data-estilo~="cobre"] .entrada,
[data-estilo~="cobre"] textarea.entrada,
[data-estilo~="cobre"] select.entrada {
  min-height: var(--alto-campo);
  padding: 0 var(--espacio-4);
  border: var(--borde-fino) solid var(--color-linea-control);
  border-radius: var(--radio-campo);
  background: var(--color-campo);
  transition: border-color var(--duracion) var(--curva),
              box-shadow var(--duracion) var(--curva),
              background-color var(--duracion) var(--curva);
}
[data-estilo~="cobre"] textarea.entrada {
  padding: var(--espacio-3) var(--espacio-4);
}
[data-estilo~="cobre"] .entrada::placeholder {
  color: var(--color-texto-tenue);
}
[data-estilo~="cobre"] .entrada:focus,
[data-estilo~="cobre"] textarea.entrada:focus,
[data-estilo~="cobre"] select.entrada:focus {
  border-color: var(--color-marca);
  background: var(--color-campo);
  box-shadow: 0 0 0 var(--anillo-campo) var(--color-marca-anillo),
              0 0 var(--halo-difuso) calc(var(--espacio-2) * -1) var(--luz-naranja);
}
[data-estilo~="cobre"] .entrada[aria-invalid="true"] {
  border-color: var(--aviso-error);
  box-shadow: 0 0 0 var(--anillo-campo) var(--aviso-error-fondo);
}
[data-estilo~="cobre"] .entrada:disabled {
  border-style: dashed;
  background: transparent;
  color: var(--color-texto-tenue);
}
[data-estilo~="cobre"] .entrada-compuesta > .entrada {
  padding-left: calc(var(--espacio-4) * 3);
}
[data-estilo~="cobre"] .buscador > .entrada {
  padding-left: calc(var(--espacio-4) + var(--icono-md) + var(--espacio-3));
  border-radius: var(--radio-pastilla);
}
[data-estilo~="cobre"] .buscador > .icono {
  color: var(--color-texto-tenue);
  transition: color var(--duracion) var(--curva);
}
[data-estilo~="cobre"] .buscador:focus-within > .icono {
  color: var(--color-marca-texto);
}
/* Ctrl K: la tecla, a la derecha del buscador */
.tecla {
  padding: var(--espacio-1) var(--espacio-2);
  border: var(--borde-fino) solid var(--color-linea-control);
  border-radius: var(--radio-celda);
  color: var(--color-texto-suave);
  font-family: var(--fuente-texto);
  font-size: var(--texto-sm);
  line-height: 1;
}
.buscador > .tecla {
  position: absolute;
  top: 50%;
  right: var(--espacio-2);
  transform: translateY(-50%);
  pointer-events: none;
}
.buscador:has(> .tecla) > .entrada {
  padding-right: calc(var(--espacio-12) + var(--espacio-4));
}

/* Campo con su ícono a la izquierda (y el ojito, si es contraseña) */
.entrada-con-icono {
  position: relative;
  display: flex;
  align-items: center;
}
.entrada-con-icono > .icono {
  position: absolute;
  left: var(--espacio-4);
  color: var(--color-texto-tenue);
  pointer-events: none;
  transition: color var(--duracion) var(--curva);
}
.entrada-con-icono > .entrada {
  padding-left: calc(var(--espacio-4) + var(--icono-md) + var(--espacio-3));
}
.entrada-con-icono:focus-within > .icono {
  color: var(--color-marca-texto);
}
.entrada-con-icono:has(> .ojito) > .entrada {
  padding-right: calc(var(--toque-min) + var(--espacio-2));
}
.ojito {
  position: absolute;
  right: var(--espacio-1);
  display: grid;
  place-items: center;
  width: var(--toque-min);
  height: var(--toque-min);
  border: 0;
  border-radius: var(--radio-control);
  background: transparent;
  color: var(--color-texto-suave);
  cursor: pointer;
}
.ojito:hover {
  background: var(--boton-suave-toca);
  color: var(--color-texto);
}
/* Las palomitas de la contraseña, que se ponen verdes en vivo */
.reglas-clave {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-1) var(--espacio-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.reglas-clave > li {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-1);
}
.campo-ayuda.cumple {
  color: var(--color-ok);
}
/* Contraseña equivocada: el campo se sacude */
.sacude {
  animation: cobre-sacude var(--duracion-sacudida) cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
@keyframes cobre-sacude {
  20%,
  60% {
    transform: translateX(calc(var(--sacudida) * -1));
  }
  40%,
  80% {
    transform: translateX(var(--sacudida));
  }
}
[data-estilo~="cobre"] .interruptor input:checked {
  background: var(--color-marca);
}
[data-estilo~="cobre"] .interruptor input::after {
  background: var(--interruptor-boton);
}
[data-estilo~="cobre"] .casilla input {
  accent-color: var(--color-marca);
}

/* ── Tarjetas: casi negras, con borde fino y sin sombra ── */
[data-estilo~="cobre"] .tarjeta,
[data-estilo~="cobre"] .lista,
[data-estilo~="cobre"] .rejilla,
[data-estilo~="cobre"] .rejilla-esqueleto {
  border: var(--borde-fino) solid var(--color-linea);
  box-shadow: none;
}
[data-estilo~="cobre"] .tarjeta-encabezado {
  align-items: center;
}
[data-estilo~="cobre"] .vacio {
  border: var(--borde-fino) dashed var(--color-linea-control);
  background: transparent;
}

/* Rincón cálido que se mueve despacio (Ganancia del mes, lo destacado) */
.tarjeta-mancha {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.tarjeta-mancha::after {
  content: "";
  position: absolute;
  inset: auto -10% -40% auto;
  z-index: -1;
  width: 60%;
  height: 90%;
  background: radial-gradient(closest-side, var(--luz-resplandor), transparent);
  animation: cobre-mancha var(--duracion-resplandor) ease-in-out infinite alternate;
  pointer-events: none;
}

/* El halo que respira: lo que sigue (la próxima cita) */
.halo {
  position: relative;
  z-index: 0;
}
.halo::before {
  content: "";
  position: absolute;
  inset: calc(var(--borde-fino) * -1);
  z-index: -1;
  border-radius: inherit;
  box-shadow: 0 0 var(--halo-difuso) var(--halo-abre) var(--luz-halo);
  opacity: 0.55;
  animation: cobre-halo var(--duracion-halo) ease-in-out infinite;
  pointer-events: none;
}
@keyframes cobre-halo {
  0%,
  100% {
    opacity: 0.25;
  }
  50% {
    opacity: 0.7;
  }
}

/* El borde que brilla arriba y se desvanece hacia abajo (el panel en chico
   del login y de la portada) */
.borde-brilla {
  position: relative;
  border: var(--borde-fino) solid var(--color-linea-control);
  border-radius: var(--radio-tarjeta);
  background: var(--color-tarjeta);
}
.borde-brilla::before {
  content: "";
  position: absolute;
  inset: calc(var(--borde-fino) * -1);
  padding: var(--borde-fino);
  border-radius: inherit;
  background: linear-gradient(180deg, var(--luz-borde), transparent 60%);
  -webkit-mask: linear-gradient(var(--color-texto) 0 0) content-box, linear-gradient(var(--color-texto) 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(var(--color-texto) 0 0) content-box exclude, linear-gradient(var(--color-texto) 0 0);
  pointer-events: none;
}

/* ── Las cifras de arriba: todas iguales, con su comparación ── */
[data-estilo~="cobre"] .panel-datos:not(.panel-datos-compacto) > .dato,
[data-estilo~="cobre"] .panel-datos:not(.panel-datos-compacto) > .dato:first-child {
  gap: var(--espacio-3);
  padding: var(--espacio-4);
  border-color: var(--color-linea);
  background: var(--color-tarjeta);
  color: var(--color-texto);
  box-shadow: none;
}
@media (min-width: 1024px) {
  [data-estilo~="cobre"] .panel-datos:not(.panel-datos-compacto) > .dato,
  [data-estilo~="cobre"] .panel-datos:not(.panel-datos-compacto) > .dato:first-child {
    padding: var(--espacio-5);
  }
}
[data-estilo~="cobre"] .panel-datos > .dato .dato-etiqueta,
[data-estilo~="cobre"] .panel-datos > .dato:first-child .dato-etiqueta {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  color: var(--color-texto-suave);
  font-weight: var(--peso-normal);
}
.dato-etiqueta > .icono {
  width: var(--icono-sm);
  height: var(--icono-sm);
  color: var(--color-texto-tenue);
}
.dato-linea {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-2);
}
.dato-comparar {
  color: var(--color-texto-tenue);
  font-size: var(--texto-sm);
}
[data-estilo~="cobre"] .dato-cambio,
[data-estilo~="cobre"] .panel-datos > .dato:first-child .dato-cambio {
  min-height: var(--alto-chip);
  padding: 0 var(--espacio-2);
  border-radius: var(--radio-pastilla);
  background: var(--color-hundido);
  color: var(--color-texto-suave);
  font-size: var(--texto-sm);
}
[data-estilo~="cobre"] .dato-cambio.sube,
[data-estilo~="cobre"] .panel-datos > .dato:first-child .dato-cambio.sube {
  background: var(--aviso-exito-fondo);
  color: var(--color-ok);
}
[data-estilo~="cobre"] .dato-cambio.baja,
[data-estilo~="cobre"] .panel-datos > .dato:first-child .dato-cambio.baja {
  background: var(--aviso-error-fondo);
  color: var(--color-error);
}
/* Sin subir ni bajar es solo una nota ("6 cobros", "en el cajón, ahorita"):
   texto suave, sin pastilla (en dos renglones, la pastilla se rompía). */
[data-estilo~="cobre"] .dato-cambio:not(.sube, .baja),
[data-estilo~="cobre"] .panel-datos > .dato:first-child .dato-cambio:not(.sube, .baja) {
  min-height: 0;
  padding: 0;
  background: transparent;
  font-weight: var(--peso-normal);
}
[data-estilo~="cobre"] .dato-cambio > .icono {
  width: var(--icono-chip);
  height: var(--icono-chip);
}

/* ── Gráficas ── */
/* Lo que entró, por forma de pago: la barra dividida en naranja, ámbar y
   crema, con un hueco entre cada parte. */
[data-estilo~="cobre"] .barra-apilada.barra-dividida {
  gap: var(--hueco-barra-dividida);
  height: var(--alto-barra-dividida);
  border-radius: var(--radio-cita);
  background: transparent;
}
.barra-dividida > span:nth-child(1) {
  background: var(--parte-1);
}
.barra-dividida > span:nth-child(2) {
  background: var(--parte-2);
}
.barra-dividida > span:nth-child(3) {
  background: var(--parte-3);
}
.formas-pago {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--espacio-2);
}
.forma-pago {
  display: flex;
  flex-direction: column;
  min-width: 0;
  color: var(--color-texto-suave);
  font-size: var(--texto-sm);
}
.forma-pago > strong {
  color: var(--color-texto);
  font-size: var(--texto-renglon);
  font-weight: var(--peso-fuerte);
}
.forma-pago-nombre {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
}
.forma-pago-nombre::before {
  content: "";
  flex: none;
  width: var(--punto);
  height: var(--punto);
  border-radius: var(--radio-pastilla);
  background: var(--parte-1);
}
.forma-pago:nth-child(2) .forma-pago-nombre::before {
  background: var(--parte-2);
}
.forma-pago:nth-child(3) .forma-pago-nombre::before {
  background: var(--parte-3);
}
[data-estilo~="cobre"] .grafica-barra,
[data-estilo~="cobre"] .grafica-pila {
  border-radius: var(--radio-celda);
}
[data-estilo~="cobre"] .grafica-linea-anterior {
  stroke: var(--linea-comparar);
}
[data-estilo~="cobre"] .grafica-linea-leyenda > .es-anterior::before {
  border-top-color: var(--linea-comparar);
}
[data-estilo~="cobre"] .grafica-linea-globo {
  border: var(--borde-fino) solid var(--color-linea-control);
  background: var(--color-hundido-fuerte);
  color: var(--color-texto);
  box-shadow: var(--sombra-2);
}
[data-estilo~="cobre"] .grafica-linea-punto {
  background: var(--color-tarjeta);
}

/* "Ganancia del mes": cómo se llega a la cifra */
.desglose {
  margin: 0;
  padding: 0;
  list-style: none;
}
.desglose > li {
  display: flex;
  justify-content: space-between;
  gap: var(--espacio-3);
  padding: var(--espacio-3) 0;
  border-top: var(--borde-fino) solid var(--color-linea);
  font-size: var(--texto-renglon);
}
.desglose > li:first-child {
  border-top: 0;
}
.desglose > li > span:first-child {
  color: var(--color-texto-suave);
}
.desglose > .desglose-total {
  border-top-color: var(--color-linea-control);
  font-weight: var(--peso-fuerte);
}
.desglose > .desglose-total > span:first-child {
  color: var(--color-texto);
}

/* "Más datos": lo que no se ve a diario, plegado */
.mas-datos-boton {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  width: 100%;
  min-height: var(--alto-mas-datos);
  padding: var(--espacio-3) var(--espacio-5);
  border: var(--borde-fino) dashed var(--color-linea-control);
  border-radius: var(--radio-tarjeta);
  background: transparent;
  color: var(--color-texto);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.mas-datos-boton > .icono:first-child {
  color: var(--color-marca-texto);
}
.mas-datos-boton > .icono:last-child {
  margin-left: auto;
  transition: transform var(--duracion) var(--curva);
}
.mas-datos-boton[aria-expanded="true"] > .icono:last-child {
  transform: rotate(180deg);
}
.mas-datos-texto {
  display: flex;
  flex-direction: column;
}
.mas-datos-texto > strong {
  font-weight: var(--peso-fuerte);
}
.mas-datos-texto > span {
  color: var(--color-texto-tenue);
  font-size: var(--texto-sm);
}

/* ── Próximas citas: la que sigue, con el halo ── */
.proximas {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: var(--espacio-0);
  margin: 0 calc(var(--espacio-3) * -1);
  padding: 0;
  list-style: none;
}
.proxima {
  display: grid;
  grid-template-columns: var(--avatar-ficha) minmax(0, 1fr);
  gap: var(--espacio-3);
  padding: var(--espacio-3);
  border-radius: var(--radio-campo);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--duracion) var(--curva);
}
a.proxima:hover {
  background: var(--color-hundido);
}
.proxima.es-siguiente {
  background: var(--color-hundido);
  box-shadow: inset 0 0 0 var(--borde-fino) var(--color-linea-control);
}
.proxima-hora {
  display: flex;
  flex-direction: column;
  font-weight: var(--peso-fuerte);
}
.proxima-hora > span {
  color: var(--color-texto-tenue);
  font-size: var(--texto-sm);
  font-weight: var(--peso-normal);
}
.proxima-quien {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
.proxima-quien > strong {
  font-size: var(--texto-renglon);
  font-weight: var(--peso-fuerte);
}
.proxima-quien > span {
  color: var(--color-texto-suave);
  font-size: var(--texto-sm);
}
.proxima-quien > .chip {
  margin-top: var(--espacio-1);
}

/* Una lista sin su tarjeta (los renglones dentro de otra tarjeta) */
[data-estilo~="cobre"] .lista-limpia {
  border: 0;
  border-radius: 0;
  background: transparent;
}
[data-estilo~="cobre"] .lista-limpia .fila {
  min-height: 0;
  padding: var(--espacio-3) 0;
}

/* El pie de una tarjeta: "Caja abierta desde las 10:02" a un lado */
.pie-tarjeta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-2) var(--espacio-3);
  padding-top: var(--espacio-3);
  border-top: var(--borde-fino) solid var(--color-linea);
  color: var(--color-texto-suave);
  font-size: var(--texto-sm);
}
.punto-ok {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
}
.punto-ok::before {
  content: "";
  width: var(--punto);
  height: var(--punto);
  border-radius: var(--radio-pastilla);
  background: var(--color-ok);
}

/* ── Avisos ── */
[data-estilo~="cobre"] .aviso {
  border: var(--borde-fino) solid var(--color-linea);
  border-radius: var(--radio-campo);
}
[data-estilo~="cobre"] .aviso-discreto {
  background: var(--color-tarjeta);
}
/* Avisos en píldora, arriba, con su punto de color (entrar y registro) */
.aviso-pildora {
  display: flex;
  align-items: flex-start;
  gap: var(--espacio-3);
  padding: var(--espacio-3) var(--espacio-4);
  border: var(--borde-fino) solid var(--color-linea-control);
  border-radius: var(--radio-tarjeta);
  background: var(--color-tarjeta);
  box-shadow: var(--sombra-2);
  font-size: var(--texto-renglon);
  line-height: var(--interlineado-medio);
}
.aviso-pildora::before {
  content: "";
  flex: none;
  width: var(--punto);
  height: var(--punto);
  margin-top: var(--espacio-2);
  border-radius: var(--radio-pastilla);
  background: var(--color-marca);
  box-shadow: 0 0 0 var(--anillo-aviso) var(--color-marca-anillo);
}
.aviso-pildora.pildora-exito::before {
  background: var(--color-ok);
  box-shadow: 0 0 0 var(--anillo-aviso) var(--aviso-exito-fondo);
}
.aviso-pildora.pildora-atencion::before {
  background: var(--color-espera);
  box-shadow: 0 0 0 var(--anillo-aviso) var(--aviso-atencion-fondo);
}
.aviso-pildora.pildora-error::before {
  background: var(--color-error);
  box-shadow: 0 0 0 var(--anillo-aviso) var(--aviso-error-fondo);
}
[data-estilo~="cobre"] .brindis {
  border: var(--borde-fino) solid var(--color-linea-control);
  border-radius: var(--radio-pastilla);
}
[data-estilo~="cobre"] .brindis-accion {
  border-radius: var(--radio-pastilla);
}

/* ── Ventanas: borde fino y el velo borroso detrás ── */
[data-estilo~="cobre"] .ventana {
  border: var(--borde-fino) solid var(--color-linea-control);
}
[data-estilo~="cobre"] .ventana::backdrop {
  background: var(--color-velo);
  -webkit-backdrop-filter: blur(var(--desenfoque-velo));
  backdrop-filter: blur(var(--desenfoque-velo));
}

/* ── Barra de arriba: el saludo a la izquierda; campanita y la persona a
   la derecha. Va sobre la luz, sin fondo ni línea. ── */
[data-estilo~="cobre"] .encabezado {
  position: relative;
  min-height: var(--alto-encabezado);
  padding: var(--espacio-3) var(--margen-pantalla);
  padding-top: calc(var(--espacio-3) + env(safe-area-inset-top));
  border-bottom: 0;
  background: transparent;
}
.encabezado-titulo {
  flex: 1;
  min-width: 0;
}
[data-estilo~="cobre"] .campana-boton {
  border: var(--borde-fino) solid var(--color-linea);
  border-radius: var(--radio-pastilla);
  background: var(--color-tarjeta);
}
[data-estilo~="cobre"] .campana-boton:hover {
  border-color: var(--color-linea-control);
  background: var(--color-tarjeta);
}
[data-estilo~="cobre"] .logo-inicial {
  border-radius: var(--radio-control);
  background: var(--color-marca);
  color: var(--color-sobre-marca);
  font-family: var(--fuente-texto);
  font-weight: var(--peso-titulo);
}

/* Luna y sol: negro o blanco, se recuerda en cada aparato */
.luna-sol {
  display: inline-flex;
  gap: var(--espacio-0);
  padding: var(--espacio-0);
  border: var(--borde-fino) solid var(--color-linea);
  border-radius: var(--radio-pastilla);
  background: var(--color-tarjeta);
}
.luna-sol > button {
  display: grid;
  place-items: center;
  width: var(--ancho-luna-sol);
  min-height: var(--toque-min);
  padding: 0;
  border: 0;
  border-radius: var(--radio-pastilla);
  background: transparent;
  color: var(--color-texto-tenue);
  cursor: pointer;
  transition: background-color var(--duracion) var(--curva), color var(--duracion) var(--curva);
}
.luna-sol > button[aria-pressed="true"] {
  background: var(--color-acento-tenue);
  color: var(--color-marca-texto);
}

/* La persona: abajo del menú lateral (computadora) */
.persona-menu {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  width: 100%;
  min-height: var(--alto-persona);
  padding: var(--espacio-2) var(--espacio-3) var(--espacio-2) var(--espacio-2);
  border: var(--borde-fino) solid var(--color-linea);
  border-radius: var(--radio-campo);
  background: var(--color-hundido);
  color: var(--color-texto);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.persona-menu:hover {
  border-color: var(--color-linea-control);
}
.persona-menu-texto {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  line-height: var(--interlineado-medio);
}
.persona-menu-nombre {
  font-size: var(--texto-renglon);
  font-weight: var(--peso-fuerte);
}
.persona-menu-rol {
  color: var(--color-texto-tenue);
  font-size: var(--texto-sm);
}
/* En el menú compacto, solo las iniciales: sin cajita y sin la flecha. */
[data-menu-compacto] .persona-menu {
  justify-content: center;
  padding: 0;
  border-color: transparent;
  background: transparent;
}
[data-menu-compacto] .persona-menu > .icono {
  display: none;
}
/* Las iniciales sin color van en gris; las de color (por persona) lo conservan. */
[data-estilo~="cobre"] .avatar:not(.avatar-naranja, .avatar-azul, .avatar-rosa, .avatar-verde, .avatar-morado, .avatar-amarillo, .avatar-rojo, .avatar-grafito) {
  background: var(--color-hundido-fuerte);
}

/* ── Menú lateral: pegado a la orilla, oscuro, con la opción abierta en
   píldora y su ícono naranja ── */
@media (min-width: 768px) {
  [data-estilo~="cobre"] .menu-lateral {
    inset: 0 auto 0 0;
    padding: var(--espacio-5) var(--espacio-4) var(--espacio-4);
    border: 0;
    border-right: var(--borde-fino) solid var(--color-linea);
    border-radius: 0;
    background: var(--color-menu);
    box-shadow: none;
  }
}
[data-estilo~="cobre"] .menu-lateral-seccion {
  padding: var(--espacio-3) var(--espacio-3) var(--espacio-1);
  color: var(--color-texto-tenue);
  font-size: var(--texto-sm);
  font-weight: var(--peso-normal);
  letter-spacing: 0;
  text-transform: none;
}
[data-estilo~="cobre"] .menu-lateral-enlace,
[data-estilo~="cobre"] .menu-lateral-subenlace {
  min-height: var(--toque-min);
  border-radius: var(--radio-control);
  color: var(--color-texto-suave);
  font-size: var(--texto-renglon);
  font-weight: var(--peso-medio);
}
[data-estilo~="cobre"] .menu-lateral-enlace:hover,
[data-estilo~="cobre"] .menu-lateral-subenlace:hover {
  background: var(--color-acento-tenue);
  color: var(--color-texto);
}
[data-estilo~="cobre"] .menu-lateral-enlace[aria-current="page"],
[data-estilo~="cobre"] .menu-lateral-subenlace[aria-current="page"] {
  background: var(--color-acento-tenue);
  color: var(--color-texto);
  font-weight: var(--peso-medio);
  box-shadow: inset 0 0 0 var(--borde-fino) var(--color-linea);
}
[data-estilo~="cobre"] .menu-lateral-enlace[aria-current="page"]::before,
[data-estilo~="cobre"] .menu-lateral-subenlace[aria-current="page"]::before {
  display: none;
}
[data-estilo~="cobre"] .menu-lateral-enlace[aria-current="page"] > .icono {
  color: var(--color-marca-texto);
}
[data-estilo~="cobre"] .menu-lateral-sub {
  margin-left: 0;
  padding-left: calc(var(--icono-md) + var(--espacio-3) * 2);
  border-left: 0;
}
[data-estilo~="cobre"] .menu-lateral-pie {
  border-top-color: transparent;
}

/* ── Barra de abajo (celular): una píldora que flota, con la opción
   abierta rellena de blanco (negro en la versión blanca) ── */
[data-estilo~="cobre"] .barra-inferior {
  right: var(--margen-pildora);
  bottom: calc(var(--margen-pildora) + env(safe-area-inset-bottom));
  left: var(--margen-pildora);
  gap: var(--espacio-0);
  max-width: var(--ancho-pildora-max);
  height: var(--alto-barra-inferior);
  margin: 0 auto;
  padding: var(--espacio-1);
  border: var(--borde-fino) solid var(--color-linea-control);
  border-radius: var(--radio-pastilla);
  background: var(--pildora-fondo);
  box-shadow: var(--sombra-3);
  -webkit-backdrop-filter: blur(var(--desenfoque-barra));
  backdrop-filter: blur(var(--desenfoque-barra));
}
[data-estilo~="cobre"] .barra-inferior-enlace {
  gap: var(--espacio-0);
  border-radius: var(--radio-pastilla);
  color: var(--color-texto-suave);
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
}
[data-estilo~="cobre"] .barra-inferior-enlace > .icono,
[data-estilo~="cobre"] .barra-inferior-enlace[aria-current="page"] > .icono {
  padding: 0;
  background: transparent;
  color: inherit;
}
[data-estilo~="cobre"] .barra-inferior-enlace[aria-current="page"] {
  background: var(--color-acento);
  color: var(--color-sobre-acento);
}

/* ── Agenda: citas como tarjetitas con la barra de color de su estado ── */
[data-estilo~="cobre"] .rejilla-cabeza {
  font-size: var(--texto-renglon);
}
[data-estilo~="cobre"] .rejilla-hora {
  border-top-color: var(--grafica-guia);
  color: var(--color-texto-tenue);
}
[data-estilo~="cobre"] .hueco {
  border-top-color: var(--grafica-guia);
}
[data-estilo~="cobre"] .cita {
  padding: var(--espacio-2) var(--espacio-3) var(--espacio-2) calc(var(--espacio-3) + var(--barra-cita));
  border: 0;
  border-radius: var(--radio-cita);
  background: var(--estado-confirmada-fondo);
}
[data-estilo~="cobre"] .cita::before,
[data-estilo~="cobre"] .cita-compacta::before,
[data-estilo~="cobre"] .rejilla-semana .cita::before {
  content: "";
  position: absolute;
  top: var(--espacio-2);
  bottom: var(--espacio-2);
  left: var(--espacio-1);
  width: var(--barra-cita);
  height: auto;
  border-radius: var(--radio-pastilla);
  background: var(--cita-punto);
}
[data-estilo~="cobre"] .cita-compacta {
  padding-left: calc(var(--espacio-3) + var(--barra-cita));
}
[data-estilo~="cobre"] .cita-nombre {
  font-weight: var(--peso-fuerte);
}
[data-estilo~="cobre"] .cita-hora {
  color: var(--color-texto-suave);
}
[data-estilo~="cobre"] .cita .cita-estado {
  padding-inline: 0;
  background: transparent;
}
[data-estilo~="cobre"] .cita-por-confirmar {
  background: var(--estado-por-confirmar-fondo);
}
/* El cliente dijo "Confirmo": la barra y la palomita en verde */
[data-estilo~="cobre"] .cita:has(.cita-confirmo) { --cita-punto: var(--estado-confirmo); }
[data-estilo~="cobre"] .cita:has(.cita-confirmo) {
  background: var(--estado-confirmo-fondo);
}
[data-estilo~="cobre"] .cita .cita-estado.cita-confirmo {
  background: transparent;
  color: var(--estado-confirmo);
}
[data-estilo~="cobre"] .cita-confirmo > .icono {
  color: var(--estado-confirmo);
}
/* Atendida (ya pagada): en gris, para que lo que falta resalte */
[data-estilo~="cobre"] .cita-atendida {
  background: var(--estado-atendida-fondo);
  color: var(--color-texto-suave);
}
[data-estilo~="cobre"] .cita-atendida .cita-nombre {
  color: var(--color-texto-suave);
}
/* No llegó: hueca, tachada y con la barra roja */
[data-estilo~="cobre"] .cita-no-llego {
  background: transparent;
  box-shadow: inset 0 0 0 var(--borde-fino) var(--color-linea);
}
[data-estilo~="cobre"] .cita-no-llego .cita-estado {
  background: transparent;
  color: var(--estado-no-llego);
}
/* Apartada mientras alguien llena los datos: punteada */
[data-estilo~="cobre"] .cita-apartada {
  border: var(--borde-fino) dashed var(--estado-apartada);
  background: var(--estado-apartada-fondo);
}
[data-estilo~="cobre"] .bloqueo {
  border: 0;
}
[data-estilo~="cobre"] .bloqueo-motivo {
  background: var(--color-hundido);
}

/* Una sola línea de herramientas: ‹ fecha › · Día/Semana/Mes · buscar · ⋯ */
.agenda-herramientas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-3);
}
.agenda-herramientas > .navegador-fecha {
  width: 100%;
}
.agenda-herramientas-derecha {
  display: flex;
  gap: var(--espacio-2);
  margin-left: auto;
}
[data-estilo~="cobre"] .agenda-herramientas .navegador-fecha-texto {
  text-align: center;
}
[data-estilo~="cobre"] .navegador-fecha-dia {
  font-size: var(--texto-md);
  font-weight: var(--peso-fuerte);
}
@media (min-width: 768px) {
  .agenda-herramientas {
    flex-wrap: nowrap;
  }
  .agenda-herramientas > .navegador-fecha {
    width: auto;
  }
  [data-estilo~="cobre"] .agenda-herramientas .navegador-fecha-texto {
    min-width: calc(var(--ancho-tarjeta-servicio) * 1.5);
    text-align: left;
  }
}

/* ── Entrar al sistema: las fichas de "¿Quién va a usar el sistema?" ── */
.fichas-acceso {
  display: grid;
  grid-auto-columns: minmax(var(--ancho-ficha-acceso), 1fr);
  grid-auto-flow: column;
  gap: var(--espacio-2);
  overflow-x: auto;
  scrollbar-width: none;
}
.fichas-acceso::-webkit-scrollbar {
  display: none;
}
.ficha-acceso {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-1);
  min-height: var(--alto-ficha-acceso);
  padding: var(--espacio-3) var(--espacio-2);
  border: var(--borde-fino) solid var(--color-linea);
  border-radius: var(--radio-campo);
  background: var(--color-tarjeta);
  color: var(--color-texto);
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--duracion) var(--curva), box-shadow var(--duracion) var(--curva);
}
.ficha-acceso:hover {
  border-color: var(--color-linea-control);
}
.ficha-acceso[aria-pressed="true"] {
  border-color: var(--color-marca);
  box-shadow: 0 0 0 var(--anillo-campo) var(--color-marca-anillo);
}
.ficha-acceso > .avatar {
  margin-bottom: var(--espacio-1);
}
.ficha-acceso-nombre {
  font-size: var(--texto-renglon);
  font-weight: var(--peso-fuerte);
  line-height: var(--interlineado-apretado);
}
.ficha-acceso-puesto {
  color: var(--color-texto-tenue);
  font-size: var(--texto-sm);
}
.ficha-acceso-otra > .avatar {
  border: var(--borde-fino) dashed var(--color-linea-control);
  background: transparent;
  color: var(--color-texto-suave);
}

/* Las rayitas de avance del registro ("Paso 1 de 2") */
.avance-rayas {
  display: flex;
  gap: var(--espacio-2);
}
.avance-rayas > span {
  flex: 1;
  height: var(--alto-raya);
  border-radius: var(--radio-pastilla);
  background: var(--color-linea-control);
}
.avance-rayas > .hecha {
  background: var(--color-acento);
}

/* "¿Su negocio todavía no usa Localiapps?": tarjeta que es enlace */
.tarjeta-enlace {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: var(--espacio-4);
  padding: var(--espacio-4) var(--espacio-4) var(--espacio-4) var(--espacio-5);
  overflow: hidden;
  border: var(--borde-fino) solid var(--color-linea);
  border-radius: var(--radio-tarjeta);
  background: var(--color-tarjeta);
  color: var(--color-texto);
  text-decoration: none;
  transition: border-color var(--duracion) var(--curva);
}
.tarjeta-enlace::before {
  content: "";
  position: absolute;
  inset: -40% 40% -40% -20%;
  z-index: -1;
  background: radial-gradient(closest-side, var(--luz-cobre), transparent);
  opacity: 0.5;
}
.tarjeta-enlace:hover {
  border-color: var(--color-linea-control);
}
.tarjeta-enlace-texto {
  flex: 1;
  color: var(--color-texto-suave);
  font-size: var(--texto-sm);
  line-height: var(--interlineado-medio);
}
.tarjeta-enlace-texto > strong {
  display: block;
  color: var(--color-texto);
  font-size: var(--texto-base);
  font-weight: var(--peso-fuerte);
}

/* ── Movimiento: las piezas entran desenfocadas y se enfocan al subir ── */
[data-estilo~="cobre"] .con-entrada > :not(.panel-tarjetas, .panel-datos),
[data-estilo~="cobre"] .con-entrada .panel-tarjetas > *,
[data-estilo~="cobre"] .con-entrada .panel-datos > .dato,
[data-estilo~="cobre"] .entra {
  animation: cobre-entra var(--duracion-entrar) var(--curva-salida) both;
  animation-delay: calc(var(--orden, 0) * var(--escalon));
}
@keyframes cobre-entra {
  from {
    opacity: 0;
    filter: blur(var(--desenfoque-entrada));
    transform: translateY(var(--desplazamiento-entrada));
  }
}

/* ── Piezas de las pantallas nuevas (guía de estilos, 11 oct) ── */

/* La cifra grande de una tarjeta ("Lo que entró hoy", "Ganancia del mes") */
.cifra-tarjeta {
  font-family: var(--fuente-cifras);
  font-size: var(--texto-cifra-tarjeta);
  font-variant-numeric: tabular-nums;
  font-weight: var(--peso-titulo);
  letter-spacing: var(--letras-cifra-grande);
  line-height: var(--interlineado-apretado);
  white-space: nowrap;
}
/* "A cada estilista · Le toca hoy": rótulos chicos a los dos lados */
.subtitulo-tarjeta {
  display: flex;
  justify-content: space-between;
  gap: var(--espacio-3);
  color: var(--color-texto-tenue);
  font-size: var(--texto-sm);
}
/* "Editar" en las tarjetas de datos de Ajustes: tinte naranja suave */
[data-estilo~="cobre"] .boton-editar,
[data-estilo~="cobre"] .boton-editar:hover {
  border-color: transparent;
  background: var(--color-marca-tenue);
  color: var(--color-marca-texto);
}
/* El nombre del campo con su enlace a la derecha ("¿La olvidó?", "Editar") */
.campo-arriba {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--espacio-3);
}
/* Enlace de texto en naranja; la zona tocable crece sin mover nada */
.enlace-marca {
  margin: calc(var(--espacio-3) * -1) 0;
  padding: var(--espacio-3) 0;
  border: 0;
  background: none;
  color: var(--color-marca-texto);
  font: inherit;
  font-size: var(--texto-sm);
  font-weight: var(--peso-fuerte);
  text-decoration: none;
  cursor: pointer;
}
.enlace-marca:hover {
  text-decoration: underline;
}
/* Arriba del menú: el nombre del negocio y su plan */
.negocio-texto {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: var(--interlineado-medio);
}
.negocio-texto > strong {
  overflow: hidden;
  font-size: var(--texto-renglon);
  font-weight: var(--peso-fuerte);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.encabezado-negocio .negocio-texto > span {
  color: var(--color-texto-tenue);
  font-family: var(--fuente-texto);
  font-size: var(--texto-sm);
  font-weight: var(--peso-normal);
  letter-spacing: 0;
}
/* El buscador de clientes y pantallas, debajo del negocio */
.menu-lateral-buscador {
  margin: var(--espacio-1) 0 var(--espacio-3);
}
[data-menu-compacto] .menu-lateral-buscador {
  display: none;
}
[data-estilo~="cobre"] .menu-lateral-buscador > .entrada {
  min-height: var(--alto-control);
  border-color: var(--color-linea);
  border-radius: var(--radio-campo);
  background: var(--color-hundido);
  font-size: var(--texto-renglon);
}
/* Sin la flechita de la lista de pantallas (Chrome): se comía "Buscar cliente". */
.menu-lateral-buscador > .entrada::-webkit-calendar-picker-indicator {
  display: none !important;
}
/* "Verificado: es una persona" (Turnstile), en su lugar punteado */
.verificado-persona {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  min-height: var(--alto-campo);
  padding: 0 var(--espacio-4);
  border: var(--borde-fino) dashed var(--color-linea-control);
  border-radius: var(--radio-campo);
  color: var(--color-texto-suave);
  font-size: var(--texto-renglon);
}
.verificado-persona > .icono {
  color: var(--color-ok);
}
/* Ajustes: tarjetas de datos, con el nombre chico arriba y el dato abajo */
.datos-tarjeta {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-4);
  padding: var(--espacio-4);
  border: var(--borde-fino) solid var(--color-linea);
  border-radius: var(--radio-campo);
  background: var(--color-tarjeta);
}
@media (min-width: 768px) {
  .datos-tarjeta {
    padding: var(--espacio-5);
  }
}
.datos-rejilla {
  display: grid;
  gap: var(--espacio-4);
  margin: 0;
}
@media (min-width: 768px) {
  .datos-rejilla {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.datos-rejilla dt {
  color: var(--color-texto-tenue);
  font-size: var(--texto-sm);
}
.datos-rejilla dd {
  margin: var(--espacio-0) 0 0;
  font-size: var(--texto-renglon);
  font-weight: var(--peso-medio);
}
.ajustes-negocio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-4);
}
.ajustes-negocio-texto {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: var(--ancho-tarjeta-servicio);
  line-height: var(--interlineado-medio);
}
.ajustes-negocio-texto > strong {
  font-size: var(--texto-base);
  font-weight: var(--peso-fuerte);
}
.ajustes-negocio-texto > span {
  color: var(--color-texto-suave);
  font-size: var(--texto-sm);
}
.ajustes-negocio > .boton {
  margin-left: auto;
}
.logo-inicial.logo-inicial-grande,
.logo-negocio.logo-inicial-grande {
  width: var(--logo-grande);
  height: var(--logo-grande);
  border-radius: var(--radio-campo);
  font-size: var(--texto-md);
}

/* ═══ Estilo Vidrio: la página de los clientes ═══════════════════════════
   Es Cobre con el color del negocio en la luz y en el anillo de lo
   escogido; los botones van en negro o blanco. Vidrio (desenfoque) solo
   en lo que va sobre la foto y en la barra de abajo. */
.vidrio {
  border: var(--borde-fino) solid var(--vidrio-borde);
  background: var(--vidrio);
  color: var(--vidrio-texto);
  -webkit-backdrop-filter: blur(var(--desenfoque-vidrio)) saturate(1.4);
  backdrop-filter: blur(var(--desenfoque-vidrio)) saturate(1.4);
}
a.vidrio:hover,
button.vidrio:hover {
  background: var(--vidrio-toca);
}
.circulo-vidrio {
  display: grid;
  flex: none;
  place-items: center;
  width: var(--circulo-vidrio);
  height: var(--circulo-vidrio);
  border-radius: var(--radio-pastilla);
  text-decoration: none;
  cursor: pointer;
}
.pastilla-vidrio {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--espacio-2);
  min-height: var(--alto-pastilla-vidrio);
  padding: 0 var(--espacio-3);
  border-radius: var(--radio-pastilla);
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  text-decoration: none;
  white-space: nowrap;
}
.pastilla-vidrio > .icono {
  width: var(--icono-sm);
  height: var(--icono-sm);
}
button.pastilla-vidrio {
  min-height: var(--toque-min);
  cursor: pointer;
  transition: transform var(--duracion) var(--curva), background-color var(--duracion) var(--curva);
}
button.pastilla-vidrio:active {
  transform: scale(var(--escala-presion));
}
.pastillas-vidrio {
  display: flex;
  gap: var(--espacio-2);
  overflow-x: auto;
  scrollbar-width: none;
}
.pastillas-vidrio::-webkit-scrollbar {
  display: none;
}
/* Ajustes → Su página: escoger Clásico o Vidrio, cada uno con su dibujo
   (la portada del negocio, el nombre y el botón). */
.opciones-estilo-pagina {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ancho-opcion-estilo)), 1fr));
  gap: var(--espacio-3);
}
.opcion-estilo-pagina {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
  padding: var(--espacio-3);
  border: var(--borde-fino) solid var(--color-linea-control);
  border-radius: var(--radio-tarjeta);
  background: var(--color-tarjeta);
  color: var(--color-texto);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--duracion) var(--curva), box-shadow var(--duracion) var(--curva);
}
.opcion-estilo-pagina[aria-pressed="true"] {
  border-color: var(--color-acento);
  box-shadow: 0 0 0 var(--anillo-escogido) var(--color-acento-tenue);
}
.opcion-estilo-pagina-texto {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-1);
}
.opcion-estilo-pagina-nombre {
  font-weight: var(--peso-fuerte);
}
.muestra-estilo {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--espacio-2);
  height: var(--alto-muestra-estilo);
  padding: var(--espacio-3);
  overflow: hidden;
  border-radius: var(--radio-campo);
  font-size: var(--texto-sm);
  font-weight: var(--peso-fuerte);
}
.muestra-estilo > img {
  position: absolute;
  z-index: -2;
  width: 100%;
  object-fit: cover;
}
.muestra-estilo-nombre {
  position: relative;
}
.muestra-estilo-boton {
  width: 45%;
  height: var(--espacio-3);
  border-radius: var(--radio-pastilla);
}
/* Clásico: papel claro, la foto arriba y el botón de su color */
.muestra-estilo-clasico {
  background: var(--muestra-papel);
  color: var(--muestra-tinta);
}
.muestra-estilo-clasico > img {
  inset: 0 0 50%;
  height: 50%;
}
.muestra-estilo-clasico > .muestra-estilo-boton {
  background: var(--dia-acento);
}
/* Vidrio: la foto a todo lo ancho, oscurecida, con el nombre y el botón en blanco */
.muestra-estilo-vidrio {
  background: var(--muestra-noche);
  color: var(--muestra-blanco);
}
.muestra-estilo-vidrio > img {
  inset: 0;
  height: 100%;
}
.muestra-estilo-vidrio::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--muestra-velo);
}
.muestra-estilo-vidrio > .muestra-estilo-boton {
  background: var(--muestra-blanco);
}
.muestra-estilo-vidrio[data-fondo="claro"] {
  border-bottom: var(--espacio-4) solid var(--muestra-papel);
}

/* La calificación y si está abierto: parten renglón en lugar de cortarse. */
.pastillas-vidrio-datos {
  flex-wrap: wrap;
  overflow: visible;
}

/* Arriba: la foto del local a todo lo ancho, que se acerca despacio y se
   oscurece hacia abajo; encima, el logo, los círculos y "Pedir cita". */
.portada-foto {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--espacio-6);
  min-height: var(--alto-portada-vidrio);
  padding: var(--espacio-4);
  overflow: hidden;
  background: var(--portada-fin);
  color: var(--vidrio-texto);
}
.portada-foto > img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: vidrio-foto var(--duracion-foto) ease-out both;
}
.portada-foto::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, var(--portada-arriba) 0%, transparent 28%, var(--portada-media) 55%, var(--portada-oscura) 100%);
}
@keyframes vidrio-foto {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(var(--acercamiento-foto));
  }
}
[data-tema$="claro"] .portada-foto {
  border-radius: 0 0 var(--radio-tarjeta) var(--radio-tarjeta);
}
.portada-foto-arriba {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-2);
}
.portada-foto-botones {
  display: flex;
  gap: var(--espacio-2);
}
.portada-foto-logo {
  width: var(--circulo-vidrio);
  height: var(--circulo-vidrio);
  flex: none;
  border: var(--borde-fino) solid var(--vidrio-borde);
  border-radius: var(--radio-pastilla);
  object-fit: cover;
}
.portada-foto-texto {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
}
.portada-foto-giro {
  color: var(--vidrio-texto);
  font-size: var(--texto-sm);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--letras-folio);
  text-transform: uppercase;
  opacity: 0.85;
}
.portada-foto-nombre {
  font-size: var(--texto-acceso);
  font-weight: var(--peso-titulo);
  letter-spacing: var(--letras-titulo-grande);
  line-height: var(--interlineado-titulo);
  text-wrap: balance;
}
.portada-foto .boton-principal,
.portada-foto .boton-principal:hover {
  background: var(--vidrio-texto);
  color: var(--sobre-foto-boton);
}
.estrellas-chicas {
  color: var(--color-estrella);
}

/* Lo escogido: negro o blanco, con un anillo del color del negocio */
[data-estilo~="vidrio"] .dia[aria-pressed="true"],
[data-estilo~="vidrio"] .hora-publica[aria-pressed="true"],
[data-estilo~="vidrio"] .opcion-estilista[aria-pressed="true"],
[data-estilo~="vidrio"] .ficha[aria-pressed="true"] {
  border-color: var(--color-acento);
  background: var(--color-acento);
  color: var(--color-sobre-acento);
  box-shadow: 0 0 0 var(--anillo-escogido) var(--color-marca-anillo);
}
[data-estilo~="vidrio"] .opcion-estilista[aria-pressed="true"] .opcion-estilista-detalle {
  color: inherit;
}

/* El calendario del mes en cuadritos; los días llenos, rayados; hoy, con
   un punto del color del negocio. */
[data-estilo~="vidrio"] .calendario {
  padding: var(--espacio-4);
  border: var(--borde-fino) solid var(--color-linea);
  border-radius: var(--radio-tarjeta);
  background: var(--color-tarjeta);
  box-shadow: none;
}
[data-estilo~="vidrio"] .calendario-rejilla {
  gap: var(--espacio-2);
}
[data-estilo~="vidrio"] .dia {
  width: 100%;
  min-height: var(--dia-mes);
  border: var(--borde-fino) solid var(--color-linea-control);
  border-radius: var(--radio-campo);
  background: var(--color-hundido);
  font-size: var(--texto-base);
}
[data-estilo~="vidrio"] .dia::after {
  display: none;
}
[data-estilo~="vidrio"] .dia:disabled,
[data-estilo~="vidrio"] .dia.dia-fuera {
  border-color: transparent;
  background: transparent;
  color: var(--color-texto-tenue);
  text-decoration: none;
}
[data-estilo~="vidrio"] .dia.dia-lleno,
[data-estilo~="vidrio"] .dia.dia-sin-cupo:not(:disabled) {
  background: var(--dia-lleno);
  color: var(--color-texto-tenue);
  text-decoration: none;
}
[data-estilo~="vidrio"] .dia-hoy {
  box-shadow: none;
}
[data-estilo~="vidrio"] .dia-hoy::before {
  content: "";
  position: absolute;
  top: var(--espacio-1);
  right: var(--espacio-1);
  width: var(--punto);
  height: var(--punto);
  border-radius: var(--radio-pastilla);
  background: var(--color-marca);
}
[data-estilo~="vidrio"] .hora-publica {
  min-height: var(--alto-control-grande);
  border-color: var(--color-linea-control);
  border-radius: var(--radio-pastilla);
  background: var(--color-tarjeta);
  box-shadow: none;
}
[data-estilo~="vidrio"] .hora-publica:hover {
  border-color: var(--color-texto-tenue);
  box-shadow: none;
}
[data-estilo~="vidrio"] .chip-reserva {
  border: var(--borde-fino) solid var(--color-linea-control);
  background: var(--boton-suave);
}

/* La barra de abajo: píldora de vidrio con las secciones y, aparte, el
   botón redondo "Pedir cita". */
.barra-flotante {
  position: fixed;
  right: var(--margen-pildora);
  bottom: calc(var(--margen-pildora) + env(safe-area-inset-bottom));
  left: var(--margen-pildora);
  z-index: var(--capa-barra);
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  max-width: var(--ancho-pildora-max);
  margin: 0 auto;
}
.barra-flotante-menu {
  display: grid;
  flex: 1;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  padding: var(--espacio-1);
  border: var(--borde-fino) solid var(--barra-vidrio-borde);
  border-radius: var(--radio-pastilla);
  background: var(--barra-vidrio);
  box-shadow: var(--sombra-3);
  -webkit-backdrop-filter: blur(var(--desenfoque-barra)) saturate(1.5);
  backdrop-filter: blur(var(--desenfoque-barra)) saturate(1.5);
}
.barra-flotante-menu > a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-0);
  min-height: var(--alto-barra-flotante);
  border-radius: var(--radio-pastilla);
  color: var(--color-texto);
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  text-decoration: none;
}
.barra-flotante-menu > [aria-current="true"] {
  background: var(--color-acento);
  color: var(--color-sobre-acento);
}
.barra-flotante-pedir {
  display: grid;
  flex: none;
  place-items: center;
  width: var(--boton-redondo);
  height: var(--boton-redondo);
  border: 0;
  border-radius: var(--radio-pastilla);
  background: var(--color-acento);
  color: var(--color-sobre-acento);
  box-shadow: var(--sombra-3), 0 0 0 var(--anillo-escogido) var(--color-marca-anillo);
  cursor: pointer;
}

/* ═══ Vidrio, 13 oct: la ficha en computadora ═══════════════════════════
   El fondo con la foto del local muy borrosa, manchas de color y la
   cuadrícula; el vidrio más transparente; las tarjetas de cristal; la
   portada con el nombre centrado en el celular; la barra de arriba (solo
   en computadora); los servicios con pestañas y "Pida su cita". El acomodo
   de computadora (foto de orilla a orilla y dos columnas) vive en
   pantallas.css. */

/* Texto largo en lo ancho, corto en el celular */
.solo-angosto {
  display: none;
}

/* La cuenta de fotos que faltan en la quinta (solo en computadora) */
.foto-mas-ancha {
  display: none;
}

/* ── El fondo ── */
.fondo-vidrio {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--color-fondo);
  pointer-events: none;
}
.fondo-vidrio > img {
  position: absolute;
  inset: -10%;
  width: 120%;
  max-width: none;
  height: 120%;
  object-fit: cover;
  filter: var(--fondo-foto-filtro);
}
.fondo-vidrio::before,
.fondo-vidrio::after {
  content: "";
  position: absolute;
  inset: 0;
}
.fondo-vidrio::after {
  z-index: 1;
  background: var(--fondo-velo);
}
.fondo-vidrio::before {
  z-index: 2;
  background-image:
    linear-gradient(var(--fondo-cuadricula) var(--borde-fino), transparent var(--borde-fino)),
    linear-gradient(90deg, var(--fondo-cuadricula) var(--borde-fino), transparent var(--borde-fino));
  background-size: var(--paso-cuadricula) var(--paso-cuadricula);
  -webkit-mask-image: radial-gradient(80% 70% at 50% 40%, var(--color-texto), transparent);
  mask-image: radial-gradient(80% 70% at 50% 40%, var(--color-texto), transparent);
}
.fondo-vidrio-mancha {
  position: absolute;
  z-index: 1;
  width: var(--mancha-fondo);
  height: var(--mancha-fondo);
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--mancha-fondo-1), transparent);
  animation: vidrio-mancha-1 var(--duracion-fondo-1) ease-in-out infinite alternate;
  will-change: transform;
}
.fondo-vidrio-mancha:nth-of-type(1) {
  top: var(--mancha-1-arriba);
  left: -30%;
}
.fondo-vidrio-mancha:nth-of-type(2) {
  top: var(--mancha-2-arriba);
  right: -35%;
  background: radial-gradient(closest-side, var(--mancha-fondo-2), transparent);
  animation-name: vidrio-mancha-2;
  animation-duration: var(--duracion-fondo-2);
}
.fondo-vidrio-mancha:nth-of-type(3) {
  bottom: -50%;
  left: 30%;
  background: radial-gradient(closest-side, var(--mancha-fondo-3), transparent);
  animation-name: vidrio-mancha-3;
  animation-duration: var(--duracion-fondo-3);
}
@keyframes vidrio-mancha-1 {
  to {
    transform: var(--mancha-1-mueve);
  }
}
@keyframes vidrio-mancha-2 {
  to {
    transform: var(--mancha-2-mueve);
  }
}
@keyframes vidrio-mancha-3 {
  to {
    transform: var(--mancha-3-mueve);
  }
}
/* Con el fondo detrás, la página ya no lleva su color liso */
[data-estilo~="vidrio"] .reserva,
[data-estilo~="vidrio"] body {
  background: transparent;
}

/* ── El vidrio sobre la foto: con brillo en la orilla de arriba ── */
[data-estilo~="vidrio"] .vidrio {
  box-shadow: var(--vidrio-brillo);
  -webkit-backdrop-filter: blur(var(--desenfoque-vidrio)) saturate(1.7);
  backdrop-filter: blur(var(--desenfoque-vidrio)) saturate(1.7);
}
[data-estilo~="vidrio"] .foto-etiqueta {
  border: var(--borde-fino) solid var(--vidrio-borde);
  background: var(--vidrio-sobre-foto-chica);
  color: var(--vidrio-texto);
  -webkit-backdrop-filter: blur(var(--desenfoque-vidrio)) saturate(1.7);
  backdrop-filter: blur(var(--desenfoque-vidrio)) saturate(1.7);
}

/* ── Las tarjetas: cristal que deja ver el fondo ── */
[data-estilo~="vidrio"] .perfil-tarjeta,
[data-estilo~="vidrio"] .tarjeta-persona,
[data-estilo~="vidrio"] .tarjeta-opinion,
[data-estilo~="vidrio"] .resumen-lateral,
[data-estilo~="vidrio"] .lo-mismo,
[data-estilo~="vidrio"] .publica-promo,
[data-estilo~="vidrio"] .perfil-direccion,
[data-estilo~="vidrio"] .servicios-vidrio .renglon-servicio,
[data-estilo~="vidrio"] .calendario,
[data-estilo~="vidrio"] .opcion-estilista,
[data-estilo~="vidrio"] .ficha {
  border: var(--borde-fino) solid var(--cristal-borde);
  background: var(--cristal);
  box-shadow: var(--cristal-brillo), var(--cristal-sombra);
  -webkit-backdrop-filter: blur(var(--desenfoque-cristal)) saturate(1.6);
  backdrop-filter: blur(var(--desenfoque-cristal)) saturate(1.6);
}
[data-estilo~="vidrio"] .dia:not(:disabled, .dia-fuera),
[data-estilo~="vidrio"] .hora-publica,
[data-estilo~="vidrio"] .boton-circulo-suave {
  background-color: var(--cristal-hundido);
}
[data-estilo~="vidrio"] .opcion-estilista[aria-pressed="true"],
[data-estilo~="vidrio"] .ficha[aria-pressed="true"] {
  background: var(--color-acento);
}

/* ── La portada: en el celular, todo al centro ── */
[data-tema$="oscuro"] .portada-foto {
  background: transparent;
}
[data-tema$="oscuro"] .portada-foto > img {
  -webkit-mask-image: linear-gradient(180deg, var(--color-texto) 62%, transparent);
  mask-image: linear-gradient(180deg, var(--color-texto) 62%, transparent);
}
[data-tema$="oscuro"] .portada-foto::after {
  background:
    radial-gradient(70% 40% at 50% 0%, var(--luz-naranja), transparent 70%),
    linear-gradient(180deg, var(--portada-arriba) 0%, transparent 26%, var(--portada-media) 50%, var(--portada-oscura) 76%, transparent 100%);
}
.portada-foto-texto {
  align-items: center;
  text-align: center;
}
.portada-foto .pastillas-vidrio-datos {
  justify-content: center;
}
.portada-foto-acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--espacio-3);
}
.portada-foto-acciones > .boton-principal {
  min-width: var(--ancho-boton-portada);
}
.boton-vidrio {
  display: none;
  align-items: center;
  min-height: var(--alto-control-grande);
  padding: 0 var(--espacio-6);
  border-radius: var(--radio-pastilla);
  font-weight: var(--peso-fuerte);
  text-decoration: none;
  transition: background-color var(--duracion) var(--curva), transform var(--duracion) var(--curva);
}
.boton-vidrio:active {
  transform: scale(var(--escala-presion));
}
.portada-foto > .pastillas-vidrio {
  margin: 0 calc(var(--espacio-4) * -1);
  padding: 0 var(--espacio-4);
}

/* ── La barra de arriba (solo en computadora; ver pantallas.css) ── */
.barra-arriba-vidrio {
  display: none;
}
.barra-arriba-dentro {
  display: flex;
  align-items: center;
  gap: var(--espacio-6);
  height: var(--alto-barra-arriba);
  padding: 0 var(--espacio-2);
  border: var(--borde-fino) solid transparent;
  border-radius: var(--radio-pastilla);
  transition: background-color var(--duracion-mover) var(--curva), border-color var(--duracion-mover) var(--curva), box-shadow var(--duracion-mover) var(--curva);
}
.barra-arriba-negocio {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-3);
  min-height: var(--toque-min);
  margin-right: auto;
  color: inherit;
  font-size: var(--texto-md);
  font-weight: var(--peso-fuerte);
  text-decoration: none;
}
.barra-arriba-logo {
  width: var(--logo-barra-arriba);
  height: var(--logo-barra-arriba);
  flex: none;
  border-radius: var(--radio-pastilla);
  object-fit: cover;
}
.barra-arriba-enlaces {
  display: flex;
  gap: var(--espacio-1);
}
.barra-arriba-enlaces > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--toque-min);
  padding: 0 var(--espacio-4);
  border-radius: var(--radio-pastilla);
  color: inherit;
  font-weight: var(--peso-medio);
  text-decoration: none;
  opacity: 0.86;
  transition: opacity var(--duracion) var(--curva), background-color var(--duracion) var(--curva);
}
.barra-arriba-enlaces > a:hover {
  background: var(--vidrio-toca);
  opacity: 1;
}
.barra-arriba-enlaces > [aria-current="true"] {
  font-weight: var(--peso-fuerte);
  opacity: 1;
}
.barra-arriba-enlaces > [aria-current="true"]::after {
  content: "";
  position: absolute;
  bottom: var(--espacio-1);
  left: 50%;
  width: var(--punto-seccion);
  height: var(--punto-seccion);
  border-radius: var(--radio-pastilla);
  background: var(--color-marca);
  transform: translateX(-50%);
}
.barra-arriba-vidrio:not(.fija) .barra-arriba-pedir {
  background: var(--vidrio-texto);
  color: var(--sobre-foto-boton);
}
.barra-arriba-vidrio:not(.fija) .barra-arriba-pedir .boton-flecha {
  background: var(--sobre-foto-boton);
  color: var(--vidrio-texto);
}
.barra-arriba-vidrio.fija {
  color: var(--color-texto);
}
.barra-arriba-vidrio.fija .barra-arriba-dentro {
  border-color: var(--barra-vidrio-borde);
  background: var(--barra-vidrio);
  box-shadow: var(--cristal-brillo), var(--sombra-3);
  -webkit-backdrop-filter: blur(var(--desenfoque-barra)) saturate(1.7);
  backdrop-filter: blur(var(--desenfoque-barra)) saturate(1.7);
}
.barra-arriba-vidrio.fija .barra-arriba-enlaces > a:hover {
  background: var(--cristal-hundido);
}

/* ── Servicios: pestañas por categoría y tarjetas ── */
.pestanas-servicios {
  display: flex;
  gap: var(--espacio-2);
  margin: 0 calc(var(--margen-pantalla) * -1);
  padding: 0 var(--margen-pantalla);
  overflow-x: auto;
  scrollbar-width: none;
}
.pestanas-servicios::-webkit-scrollbar {
  display: none;
}
.filtro-servicios {
  flex: none;
  min-height: var(--toque-min);
  padding: 0 var(--espacio-4);
  border: var(--borde-fino) solid var(--cristal-borde);
  border-radius: var(--radio-pastilla);
  background: var(--cristal-hundido);
  color: var(--color-texto);
  font: inherit;
  font-weight: var(--peso-fuerte);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--duracion) var(--curva), color var(--duracion) var(--curva), transform var(--duracion) var(--curva);
}
.filtro-servicios[aria-pressed="true"] {
  border-color: transparent;
  background: var(--color-acento);
  color: var(--color-sobre-acento);
}
.filtro-servicios:active {
  transform: scale(var(--escala-presion));
}
.servicios-vidrio {
  display: grid;
  gap: var(--espacio-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.servicios-vidrio .renglon-servicio {
  padding: var(--espacio-2) var(--espacio-3) var(--espacio-2) var(--espacio-2);
  border-radius: var(--radio-tarjeta);
}
.servicios-vidrio .renglon-servicio > .boton-circulo {
  background: var(--color-acento);
  color: var(--color-sobre-acento);
}
@media (hover: hover) {
  .servicios-vidrio .renglon-servicio:hover:not(:disabled) {
    border-color: var(--color-marca-anillo);
    background: var(--cristal);
  }
}

/* ── "Pida su cita" (la tarjeta de la derecha en el perfil) ── */
.lado-perfil-arriba {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-2);
}
.lado-perfil .resumen-lateral-titulo {
  font-size: var(--texto-lg);
}
.lado-perfil-estado {
  color: var(--color-texto-suave);
  font-size: var(--texto-sm);
  font-weight: var(--peso-fuerte);
}
.lado-perfil-datos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-1);
  color: var(--color-texto-suave);
}
.lado-perfil-datos strong {
  color: var(--color-texto);
}
.lado-perfil-pronto {
  display: grid;
  gap: var(--espacio-2);
  padding: var(--espacio-3);
  border: var(--borde-fino) solid var(--color-linea);
  border-radius: var(--radio-campo);
  background: var(--cristal-hundido);
}
.lado-perfil-pronto-titulo {
  display: flex;
  justify-content: space-between;
  gap: var(--espacio-2);
}
.lado-perfil-pronto-titulo > span {
  color: var(--color-acento-texto);
  font-size: var(--texto-sm);
  font-weight: var(--peso-fuerte);
}
.lado-perfil-lista {
  display: grid;
  gap: var(--espacio-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.lado-perfil-persona {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  width: 100%;
  min-height: var(--toque-min);
  padding: var(--espacio-1) var(--espacio-2);
  border: 0;
  border-radius: var(--radio-control);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--duracion) var(--curva);
}
.lado-perfil-persona:hover {
  background: var(--cristal-hundido);
}
.lado-perfil-persona > .avatar-perfil {
  width: var(--avatar-mini);
  height: var(--avatar-mini);
  font-size: var(--texto-xs);
}
.lado-perfil-nombre {
  flex: 1;
  font-weight: var(--peso-fuerte);
}
.lado-perfil-cuando {
  color: var(--color-texto-suave);
  font-weight: var(--peso-fuerte);
}
.lado-perfil .letra-chica {
  margin: calc(var(--espacio-2) * -1) 0 0;
  color: var(--color-texto-suave);
  font-size: var(--texto-sm);
  text-align: center;
}
.lado-perfil-contacto {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--espacio-2);
  padding-top: var(--espacio-4);
  border-top: var(--borde-fino) solid var(--color-linea);
}

/* ── Movimiento de la ficha (13 oct, como el prototipo) ──
   La foto de la portada entra desenfocada, se enfoca y después respira
   despacio; lo de encima entra una pieza tras otra; el punto de "Abierto"
   late; los servicios entran al asomarse y al cambiar de pestaña; "Pida su
   cita" sube y lo más pronto aparece renglón por renglón. Lo que lleva
   vidrio sube sin desenfocarse (el desenfoque apaga el vidrio). */
@keyframes vidrio-foto-entra {
  from {
    filter: blur(var(--desenfoque-foto-entra));
    transform: scale(var(--escala-foto-entra));
  }
  to {
    filter: none;
    transform: scale(var(--escala-foto-respira));
  }
}
@keyframes vidrio-foto-respira {
  from {
    transform: scale(var(--escala-foto-respira));
  }
  to {
    transform: var(--mueve-foto-respira);
  }
}
@keyframes vidrio-sube {
  from {
    opacity: 0;
    transform: translateY(var(--desplazamiento-entrada));
  }
}
@keyframes vidrio-late {
  from {
    box-shadow: 0 0 0 0 var(--pulso-ok);
  }
  to {
    box-shadow: 0 0 0 var(--alcance-pulso) var(--pulso-ok-fin);
  }
}
[data-estilo~="vidrio"] .portada-foto > img {
  animation:
    vidrio-foto-entra var(--duracion-foto-entra) var(--curva-salida) both,
    vidrio-foto-respira var(--duracion-foto-respira) ease-in-out var(--duracion-foto-entra) infinite alternate;
}
[data-estilo~="vidrio"] .portada-foto-logo,
[data-estilo~="vidrio"] .portada-foto-botones,
[data-estilo~="vidrio"] .portada-foto .pastillas-vidrio-datos,
[data-estilo~="vidrio"] .portada-foto-acciones,
[data-estilo~="vidrio"] .portada-foto > .pastillas-vidrio {
  animation: vidrio-sube var(--duracion-entrar) var(--curva-salida) both;
  animation-delay: var(--retraso-portada);
}
[data-estilo~="vidrio"] .portada-foto-giro,
[data-estilo~="vidrio"] .portada-foto-nombre {
  animation: cobre-entra var(--duracion-entrar) var(--curva-salida) both;
  animation-delay: calc(var(--retraso-portada) + var(--escalon-portada));
}
[data-estilo~="vidrio"] .portada-foto-nombre {
  animation-delay: calc(var(--retraso-portada) + var(--escalon-portada) * 2);
}
[data-estilo~="vidrio"] .portada-foto .pastillas-vidrio-datos {
  animation-delay: calc(var(--retraso-portada) + var(--escalon-portada) * 3);
}
[data-estilo~="vidrio"] .portada-foto-acciones {
  animation-delay: calc(var(--retraso-portada) + var(--escalon-portada) * 4);
}
[data-estilo~="vidrio"] .portada-foto > .pastillas-vidrio {
  animation-delay: calc(var(--retraso-portada) + var(--escalon-portada) * 5);
}
[data-estilo~="vidrio"] .punto-ok::before {
  animation: vidrio-late var(--duracion-pulso) ease-out infinite;
}
[data-estilo~="vidrio"] .perfil-bloque:not(.a-la-vista) .servicios-vidrio > li {
  opacity: 0;
}
[data-estilo~="vidrio"] .a-la-vista .servicios-vidrio > li {
  animation: cobre-entra var(--duracion-entrar) var(--curva-salida) both;
  animation-delay: calc(var(--orden, 0) * var(--escalon));
}
[data-estilo~="vidrio"] .lado-entra {
  animation: vidrio-sube var(--duracion-entrar) var(--curva-salida) both;
}
[data-estilo~="vidrio"] .lista-entra > li {
  animation: vidrio-sube var(--duracion-entrar) var(--curva-salida) both;
  animation-delay: calc(var(--orden, 0) * var(--escalon) * 2);
}
@media (prefers-reduced-motion: reduce) {
  [data-estilo~="vidrio"] .portada-foto > img,
  [data-estilo~="vidrio"] .portada-foto-logo,
  [data-estilo~="vidrio"] .portada-foto-botones,
  [data-estilo~="vidrio"] .portada-foto-giro,
  [data-estilo~="vidrio"] .portada-foto-nombre,
  [data-estilo~="vidrio"] .portada-foto .pastillas-vidrio-datos,
  [data-estilo~="vidrio"] .portada-foto-acciones,
  [data-estilo~="vidrio"] .portada-foto > .pastillas-vidrio,
  [data-estilo~="vidrio"] .punto-ok::before,
  [data-estilo~="vidrio"] .servicios-vidrio > li,
  [data-estilo~="vidrio"] .lado-entra,
  [data-estilo~="vidrio"] .lista-entra > li {
    animation: none;
  }
  [data-estilo~="vidrio"] .perfil-bloque:not(.a-la-vista) .servicios-vidrio > li {
    opacity: 1;
  }
}