/* =====================================================================
   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);
  -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"] {
  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); font-weight: var(--peso-fuerte); }

.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: siempre en JetBrains Mono, 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);
}
.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);
}
.segmento[aria-pressed="true"],
.segmento[aria-checked="true"] {
  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;
}

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

.cita {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--espacio-0);
  min-width: 0;
  padding: var(--espacio-2) var(--espacio-3) var(--espacio-2) calc(var(--espacio-3) + var(--borde-estado));
  overflow: hidden;
  border: var(--borde-fino) solid var(--color-linea);
  border-radius: var(--radio-cita);
  background: var(--color-tarjeta);
  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;
}
/* Barra del estado a la izquierda */
.cita::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--borde-estado);
  background: var(--estado-confirmada);
}
.cita:hover {
  box-shadow: var(--sombra-2);
}

.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;
}
.cita-estado {
  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 {
  background: var(--estado-apartada-fondo);
  border: var(--borde-fino) dashed var(--estado-apartada);
}
.cita-apartada::before { background: var(--estado-apartada); }
.cita-apartada .cita-estado { color: var(--estado-apartada-texto); }

.cita-por-confirmar {
  background: var(--estado-por-confirmar-fondo);
  border-color: color-mix(in srgb, var(--estado-por-confirmar) 45%, var(--color-tarjeta));
}
.cita-por-confirmar::before { background: var(--estado-por-confirmar); }
.cita-por-confirmar .cita-estado { color: var(--estado-por-confirmar-texto); }

/* Confirmada: blanco sobre la superficie. */
.cita-confirmada {
  background: var(--estado-confirmada-fondo);
  box-shadow: var(--sombra-1);
}
.cita-confirmada::before { background: var(--estado-confirmada); }
.cita-confirmada .cita-estado { color: var(--estado-confirmada-texto); }

.cita-atendida {
  background: var(--estado-atendida-fondo);
  border-color: color-mix(in srgb, var(--estado-atendida) 25%, var(--color-tarjeta));
}
.cita-atendida::before { background: var(--estado-atendida); }
.cita-atendida .cita-estado { color: var(--estado-atendida-texto); }

/* No llegó: gris y tachado. */
.cita-no-llego {
  background: var(--estado-no-llego-fondo);
  color: var(--estado-no-llego-texto);
}
.cita-no-llego::before { background: var(--estado-no-llego); }
.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 { color: var(--estado-no-llego-texto); }

/* 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;
}

/* 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-control-grande);
  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);
}

/* 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;
  }
}

/* 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);
}

/* 16 px de letra: así el iPhone no hace zoom al escribir. */
.entrada {
  width: 100%;
  min-height: var(--alto-control);
  padding: 0 var(--espacio-4);
  border: var(--borde-fino) solid var(--color-linea-control);
  border-radius: var(--radio-control);
  background: var(--color-tarjeta);
  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-color: var(--color-foco);
  box-shadow: 0 0 0 var(--foco-ancho) var(--color-foco);
}
.entrada[aria-invalid="true"] {
  border-color: var(--aviso-error);
}
.entrada:disabled {
  background: var(--color-hundido);
  color: var(--color-texto-suave);
  cursor: not-allowed;
}
textarea.entrada {
  min-height: calc(var(--alto-control) * 2);
  padding: var(--espacio-3) var(--espacio-4);
  resize: vertical;
}
.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) * 3);
}
.entrada-prefijo {
  position: absolute;
  left: var(--espacio-4);
  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);
}

.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);
}
.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);
  box-shadow: var(--sombra-1);
}
.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);
}

.panel-datos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--espacio-3);
}
@media (min-width: 1024px) {
  .panel-datos {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.dato {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-1);
  min-width: 0;
  padding: var(--espacio-4);
  border: var(--borde-fino) solid var(--color-linea);
  border-radius: var(--radio-tarjeta);
  background: var(--color-tarjeta);
}
.dato-etiqueta {
  font-size: var(--texto-sm);
  color: var(--color-texto-suave);
}
.dato-valor {
  font-family: var(--fuente-cifras);
  font-variant-numeric: tabular-nums;
  font-size: var(--texto-xl);
  font-weight: var(--peso-medio);
  line-height: var(--interlineado-apretado);
  letter-spacing: var(--letras-titulo);
  white-space: nowrap;
}
.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-2xl);
  }
}

/* Datos chicos, dos por renglón (ficha del cliente) */
.panel-datos-compacto {
  gap: var(--espacio-2);
}
.panel-datos-compacto .dato {
  padding: var(--espacio-3);
}
@media (min-width: 1024px) {
  .panel-datos-compacto {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.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);
}

/* ─── 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);
}
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;
}
.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 */
.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;
}
/* 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);
}

/* ─── 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);
}

/* 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;
}
.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;
}
/* "¿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);
}
.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;
}

/* "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;
}
/* En celular, nombre y rol en dos renglones para que siempre quepan. */
.quien-conectado-texto {
  display: flex;
  flex-direction: column;
  line-height: var(--interlineado-apretado);
  text-align: left;
}
.quien-conectado-nombre {
  font-weight: var(--peso-fuerte);
}
.quien-conectado-rol {
  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 {
  min-height: var(--alto-control);
}

/* 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;
}
.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;
  }
}
.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;
  align-items: center;
  gap: var(--espacio-3);
  min-height: var(--alto-control);
  padding: 0 var(--espacio-3);
  border-radius: var(--radio-control);
  color: var(--color-texto-suave);
  font-weight: var(--peso-fuerte);
  text-decoration: none;
  transition: background-color var(--duracion) var(--curva), color var(--duracion) var(--curva);
}
.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);
}
.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);
}

/* 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);
}

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

/* 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;
}

.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);
}
@media (min-width: 900px) {
  .perfil-nombre {
    font-size: var(--texto-2xl);
  }
}

/* ─── 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 {
  text-decoration: line-through;
  text-decoration-color: var(--color-linea-control);
}
.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;
}
.listo-acciones {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
  width: 100%;
}

/* ─── 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);
}
.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);
}