/* =====================================================================
   pantallas.css — el acomodo de cada pantalla.
   Solo acomodo: tamaños, columnas y espacios. Los componentes viven en
   componentes.css y los valores en tokens.css.
   ===================================================================== */

/* ─── Marco de la aplicación (todas las pantallas del sistema) ──────── */

.app {
  min-height: var(--alto-pantalla);
  padding-bottom: calc(var(--alto-barra-inferior) + env(safe-area-inset-bottom));
}
.app-contenido {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-5);
  width: 100%;
  max-width: var(--ancho-maximo);
  margin: 0 auto;
  padding: var(--espacio-4) var(--margen-pantalla) var(--espacio-16);
}
@media (min-width: 768px) {
  .app {
    padding-bottom: 0;
    padding-left: var(--ancho-lateral);
  }
  .app-contenido {
    padding: var(--espacio-6);
  }
  [data-menu-compacto] .app {
    padding-left: var(--ancho-lateral-compacto);
  }
  /* Estilo Tablero: el menú flota despegado de la orilla. */
  [data-estilo~="tablero"] .app {
    padding-left: calc(var(--ancho-lateral) + var(--margen-lateral));
  }
  [data-menu-compacto][data-estilo~="tablero"] .app {
    padding-left: calc(var(--ancho-lateral-compacto) + var(--margen-lateral));
  }
}

.avisos-sistema {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
  padding: var(--espacio-2) var(--margen-pantalla) 0;
}
.avisos-sistema:empty {
  display: none;
}


/* ─── Agenda: ocupa toda la pantalla; la rejilla se desplaza por dentro ─ */

.app-agenda {
  display: flex;
  flex-direction: column;
  height: var(--alto-pantalla);
  overflow: hidden;
}
.app-agenda > .encabezado,
.app-agenda > .aviso-conexion,
.app-agenda > .avisos-sistema {
  flex: none;
}
.pantalla-agenda {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--espacio-3);
  min-height: 0;
  padding: var(--espacio-3) var(--margen-pantalla) var(--espacio-3);
}
.agenda-barra {
  display: flex;
  align-items: center;
  gap: var(--espacio-1);
}
.agenda-barra .navegador-fecha {
  flex: 1;
  gap: var(--espacio-1);
  min-width: 0;
}
.agenda-barra [data-hoy] {
  padding: 0 var(--espacio-3);
}
/* Selector "Día · Semana · Mes": en la barra; en celular, en su propio renglón. */
.agenda-vistas {
  flex: none;
}
/* En celular y tablet (con el menú al lado no cabe todo): la fecha sola
   arriba; abajo "Día · Semana · Mes" y los botones (buscar, lista de
   espera, recordatorios). */
@media (max-width: 1023px) {
  .agenda-barra {
    flex-wrap: wrap;
  }
  .agenda-barra .navegador-fecha {
    flex-basis: 100%;
  }
  .agenda-vistas {
    flex: 1 1 0;
    min-width: 0;
  }
}
@media (min-width: 768px) {
  .agenda-barra,
  .agenda-barra .navegador-fecha {
    gap: var(--espacio-2);
  }
}
.agenda-recordatorios > span,
.agenda-espera > .agenda-espera-texto {
  display: none;
}
@media (min-width: 1024px) {
  .agenda-recordatorios > span,
  .agenda-espera > .agenda-espera-texto {
    display: inline;
  }
}
/* Lista de espera (etapa 6a): cuántos hay ese día, junto al ícono. */
.agenda-espera {
  gap: var(--espacio-1);
}
.agenda-espera-numero {
  font-weight: var(--peso-fuerte);
  color: var(--color-acento-texto);
}
.agenda-espera-numero:empty {
  display: none;
}
.zona-rejilla {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}
.zona-rejilla > .rejilla {
  flex: 1;
  min-height: 0;
}
.rejilla-esqueleto {
  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-tarjeta);
  background: var(--color-tarjeta);
}
@media (min-width: 768px) {
  .pantalla-agenda {
    padding: var(--espacio-4) var(--espacio-6) var(--espacio-4);
  }
}


/* ─── Pantallas de lista (recordatorios, cobrar, clientes) ─────────── */

.pantalla-lista {
  max-width: var(--ancho-lectura);
}
.pantalla-titulo {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-1);
}
/* Título con botones a la derecha; en celular los botones bajan */
.pantalla-titulo-con-accion {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--espacio-3);
}
/* Más juntos, para que "Agregar · Importar · Exportar" quepan en un renglón a 375 px */
.pantalla-titulo-con-accion > .grupo-botones {
  gap: var(--espacio-2);
}
.pantalla-secciones {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-6);
}
.seccion {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
}
.pantalla-lista .fila,
.pantalla-admin .fila,
.pantalla-personalizacion .fila {
  flex-wrap: wrap;
}
.pantalla-lista .fila-texto,
.pantalla-admin .fila-texto,
.pantalla-personalizacion .fila-texto {
  flex-basis: var(--ancho-tarjeta-servicio);
}

/* Clientes: buscador, "Todos / Dormidos" y las semanas */
.barra-herramientas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-3);
}
.barra-herramientas > .buscador {
  flex: 1 1 var(--ancho-texto-min);
}
/* Clientes (etapa IA): con "Cumpleaños" ya no cabe junto a los tres
   botones; en su propio renglón no se corta. */
.barra-herramientas > .buscador-renglon {
  flex-basis: 100%;
}
.barra-herramientas > .fichas {
  flex-basis: 100%;
  align-items: center;
}
.importar-vista {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
}
.importar-vista:empty {
  display: none;
}
/* Importar (etapa 5i): qué columna del archivo es cada dato, uno debajo
   de otro (cada opción dice la columna, su título y un ejemplo). */
.importar-paso {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
}
.importar-paso[hidden] {
  display: none;
}
.importar-mapeo {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
}
.importar-mapeo select.entrada {
  width: 100%;
  min-width: 0;
  text-overflow: ellipsis;
}

/* ─── Panel: cifras arriba y tarjetas en dos columnas en computadora ─ */

.panel-tarjetas {
  display: grid;
  gap: var(--espacio-4);
  align-items: start;
}
@media (min-width: 1024px) {
  .panel-tarjetas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .panel-tarjetas > .tarjeta-ancha {
    grid-column: 1 / -1;
  }
  /* Estilo Tablero: bento. Las tarjetas de un renglón miden lo mismo y los
     huecos se llenan con la que quepa (dense). */
  [data-estilo~="tablero"] .panel-tarjetas {
    grid-auto-flow: dense;
    align-items: stretch;
  }
  [data-estilo~="tablero"] .panel-tarjetas > .tarjeta-alta {
    grid-row: span 2;
  }
}
@media (min-width: 1280px) {
  [data-estilo~="tablero"] .panel-tarjetas {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  [data-estilo~="tablero"] .panel-tarjetas > .tarjeta-ancha {
    grid-column: span 2;
  }
  [data-estilo~="tablero"] .panel-tarjetas > .tarjeta-completa {
    grid-column: 1 / -1;
  }
}

/* Panel en el estilo Cobre (rediseño del 11 oct): Hoy · Semana · Mes y "⋯"
   arriba, las 4 cifras, las 3 tarjetas y "Más datos" plegado. */
.panel-cuerpo {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-4);
  min-width: 0;
}
.panel-controles {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-3);
}
@media (min-width: 1024px) {
  [data-estilo~="cobre"] .panel-tarjetas > .tarjeta-completa {
    grid-column: 1 / -1;
  }
  /* Lo que entró y Próximas citas, una arriba de la otra a lo ancho... */
  [data-estilo~="cobre"] .panel-principal {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Las cifras de dos en dos; si sobra una, toma el renglón completo. */
  [data-estilo~="cobre"] .panel-datos:not(.panel-datos-compacto) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  [data-estilo~="cobre"] .panel-datos:not(.panel-datos-compacto) > .dato:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}
@media (min-width: 1280px) {
  /* ...y lado a lado cuando hay lugar (como en el prototipo). */
  [data-estilo~="cobre"] .panel-principal {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    align-items: stretch;
  }
  /* Las cifras, todas en un renglón. */
  [data-estilo~="cobre"] .panel-datos:not(.panel-datos-compacto) {
    grid-template-columns: none;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
  }
  [data-estilo~="cobre"] .panel-datos:not(.panel-datos-compacto) > .dato:last-child:nth-child(odd) {
    grid-column: auto;
  }
}
/* Ganancia del mes: la línea y, en computadora, el desglose a un lado */
.ganancia-mes {
  display: grid;
  gap: var(--espacio-5);
  align-items: start;
}
@media (min-width: 1280px) {
  .ganancia-mes {
    grid-template-columns: minmax(0, 1fr) var(--ancho-desglose);
    gap: var(--espacio-8);
  }
}

/* Resumen del día (etapa 5f): lo que entró y lo que le toca a cada estilista */
.resumen-dia {
  display: grid;
  gap: var(--espacio-5);
  align-items: start;
}
.resumen-dia-bloque {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
  min-width: 0;
}
.resumen-dia-detalle {
  grid-column: 1 / -1;
  font-size: var(--texto-sm);
  color: var(--color-texto-suave);
}
@media (min-width: 768px) {
  .resumen-dia {
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: var(--espacio-8);
  }
}


/* ─── Corte con PIN (etapa 5f): el PIN en grande, en el centro ──────── */

.corte-pin {
  width: 100%;
  max-width: var(--ancho-ventana);
}
/* Lo pendiente de pago y su botón "Marcar como pagado" */
.corte-pendiente {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--espacio-2);
}
.entrada-pin {
  min-height: var(--alto-control-grande);
  font-family: var(--fuente-cifras);
  font-size: var(--texto-2xl);
  letter-spacing: var(--letras-folio);
  text-align: center;
}


/* ─── Exportar: cobros por fechas (etapa 5e) y todo el historial ───── */

.exportar-seccion {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
}
/* Otras fechas: "Desde" y "Hasta" lado a lado si caben */
.exportar-fechas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-3);
}
.exportar-fechas[hidden] {
  display: none;
}
.exportar-fechas > .campo {
  flex: 1 1 calc(var(--ancho-tarjeta-servicio) / 2);
}


/* ─── Inventario (etapa 5g) ─────────────────────────────────────────── */

/* "Productos" y los filtros en un renglón si caben */
.inventario-encabezado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-3);
}
.inventario-encabezado > .segmentado {
  flex: 0 1 auto;
  max-width: 100%;
}
/* "Por reponer" abajo de la existencia, para no apretar el nombre */
.fila-dato > .marca {
  display: flex;
  width: fit-content;
  margin-top: var(--espacio-1);
  margin-left: auto;
  font-family: var(--fuente-texto);
}


/* ─── Reporte de ventas y comisión (etapa 5f) ───────────────────────── */

/* Otras fechas: "Desde", "Hasta" y el botón en un renglón si caben */
.reporte-fechas {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--espacio-3);
}
.reporte-fechas > .campo {
  flex: 1 1 var(--ancho-tarjeta-servicio);
}
/* Cada estilista: en celular, el botón baja a su propio renglón */
.reporte-estilista,
.reporte-pago {
  flex-wrap: wrap;
}
.reporte-estilista > .fila-texto,
.reporte-pago > .fila-texto {
  flex-basis: var(--ancho-tarjeta-servicio);
}
.reporte-detalle {
  font-size: var(--texto-sm);
  color: var(--color-texto-suave);
}
.reporte-pendiente {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.reporte-celda-nombre {
  display: flex;
  flex-direction: column;
  white-space: normal;
}
/* Reporte de una persona: "Todo el equipo" arriba, sin estirarse */
.reporte-volver {
  align-self: flex-start;
}


/* ─── Entrar ────────────────────────────────────────────────────────── */

.pantalla-entrar {
  display: flex;
  flex-direction: column;
  min-height: var(--alto-pantalla);
}
.entrar {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: var(--espacio-5);
  width: 100%;
  max-width: var(--ancho-ventana);
  margin: 0 auto;
  padding: var(--espacio-10) var(--margen-pantalla) var(--espacio-6);
}
/* /casillas (etapa 8): las casillas para las revisiones de Localiapps. */
.lista-casillas {
  display: grid;
  gap: var(--espacio-2);
}
.entrar-marca {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
}
.entrar-logo {
  width: var(--avatar-lg);
  height: var(--avatar-lg);
  border-radius: var(--radio-control);
  font-size: var(--texto-lg);
}
/* Entrar, registro y unirse en el estilo Cobre (rediseño del 11 oct): en
   computadora, el formulario a la izquierda y "Su negocio, en orden." con
   el panel en chico a la derecha; en celular, solo el formulario. */
.acceso-formulario {
  width: 100%;
  min-width: 0;
  max-width: var(--ancho-acceso);
  margin: 0 auto;
}
.acceso-marca {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  font-size: var(--texto-base);
}
.acceso-marca > span {
  color: var(--color-texto-tenue);
}
.acceso-logo {
  width: var(--avatar-md);
  height: var(--avatar-md);
  border-radius: var(--radio-control);
}
.acceso-titulo {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
}
.acceso-ayuda {
  display: flex;
  justify-content: center;
}
.acceso-lado {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-4);
  min-width: 0;
}
.acceso-panel {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-4);
  padding: var(--espacio-5);
  box-shadow: var(--sombra-3);
}

/* Las cuatro pantallas de verdad (entrar, registro, contraseña nueva y
   unirse): la luz arriba, el formulario y, desde 1024, el lado. */
.pantalla-acceso {
  display: flex;
  flex-direction: column;
  min-height: var(--alto-pantalla);
}
.acceso {
  display: grid;
  flex: 1;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--espacio-8);
  padding: var(--espacio-6) var(--margen-pantalla) calc(var(--espacio-6) + env(safe-area-inset-bottom));
}
.acceso > .acceso-formulario {
  align-self: center;
}
.acceso > .acceso-lado {
  display: none;
}
@media (min-width: 1024px) {
  .acceso {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    padding: var(--espacio-8);
  }
  .acceso > .acceso-lado {
    display: flex;
    justify-self: center;
    width: 100%;
    max-width: var(--ancho-lectura);
  }
}
.acceso-formulario > .pie-localiapps {
  padding: 0;
}
.acceso-avisos {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
}
.acceso-avisos:empty {
  display: none;
}
.aviso-pildora-cuerpo {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--espacio-3);
  min-width: 0;
}
.aviso-pildora-cuerpo > .aviso-texto {
  flex: none;
}
/* Cada vista (entrar, "¿La olvidó?", los pasos del registro) */
.acceso-vista {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-5);
}
.acceso-vista[hidden] {
  display: none;
}
.acceso-atras {
  align-self: flex-start;
}
/* Al tocar una ficha: la persona en lugar del correo, con "Cambiar" */
.acceso-quien {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  padding: var(--espacio-3) var(--espacio-4);
  border: var(--borde-fino) solid var(--color-linea);
  border-radius: var(--radio-campo);
  background: var(--color-tarjeta);
}
.acceso-quien[hidden] {
  display: none;
}
.acceso-quien-texto {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  line-height: var(--interlineado-medio);
}
.acceso-quien-texto > span {
  overflow: hidden;
  color: var(--color-texto-tenue);
  font-size: var(--texto-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* "Editar" las fichas: cada una lleva su cruz y al tocarla se quita */
.ficha-acceso {
  position: relative;
}
.ficha-acceso-quitar {
  position: absolute;
  top: var(--espacio-1);
  right: var(--espacio-1);
  display: none;
  place-items: center;
  width: var(--icono-md);
  height: var(--icono-md);
  border-radius: var(--radio-pastilla);
  background: var(--color-hundido-fuerte);
  color: var(--color-texto);
}
.fichas-acceso.editando .ficha-acceso-quitar {
  display: grid;
}
.fichas-acceso.editando .ficha-acceso:not(.ficha-acceso-otra) {
  border-style: dashed;
}
.fichas-acceso.editando .ficha-acceso-otra {
  display: none;
}
/* "Revise su correo": el sobre con su punto que late */
.acceso-sobre {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--sobre-acceso);
  height: var(--sobre-acceso);
  border: var(--borde-fino) solid var(--color-linea-control);
  border-radius: var(--radio-tarjeta);
  background: var(--color-tarjeta);
  color: var(--color-texto);
}
.acceso-sobre::after {
  content: "";
  position: absolute;
  top: calc(var(--punto) * -0.5);
  right: calc(var(--punto) * -0.5);
  width: var(--punto);
  height: var(--punto);
  border-radius: var(--radio-pastilla);
  background: var(--color-marca);
  box-shadow: 0 0 0 var(--anillo-aviso) var(--color-marca-anillo);
  animation: acceso-late var(--duracion-halo) ease-in-out infinite;
}
@keyframes acceso-late {
  50% {
    transform: scale(1.35);
  }
}
/* La segunda rayita, a medias mientras espera el correo */
.avance-rayas > .media {
  background: linear-gradient(90deg, var(--color-acento) 50%, var(--color-linea-control) 50%);
}
.acceso-botones {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
}
/* Registro en computadora: "Todo su negocio, incluido" */
.acceso-incluye {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--espacio-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.acceso-incluye > li {
  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);
}
.acceso-incluye .icono {
  color: var(--color-ok);
}
.acceso-incluye strong {
  font-weight: var(--peso-fuerte);
}
.acceso-incluye span {
  color: var(--color-texto-suave);
  font-size: var(--texto-sm);
  line-height: var(--interlineado-medio);
}
/* Unirse: el negocio que invita y sus pastillas */
.acceso-invita {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  padding: var(--espacio-4);
  border: var(--borde-fino) solid var(--color-linea);
  border-radius: var(--radio-tarjeta);
  background: var(--color-tarjeta);
}
.acceso-invita-logo {
  flex: none;
  width: var(--logo-grande);
  height: var(--logo-grande);
  border-radius: var(--radio-control);
  object-fit: cover;
}
.acceso-pastillas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
}


/* ─── estilos.html: la guía de componentes ──────────────────────────── */

/* Marco: menú de secciones a la izquierda (computadora) o arriba (celular) */
@media (min-width: 1024px) {
  .estilos-marco {
    display: grid;
    grid-template-columns: var(--ancho-lateral) minmax(0, 1fr);
    align-items: start;
  }
}
.estilos-principal {
  min-width: 0;
}

.estilos-encabezado {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
  padding: var(--espacio-8) var(--margen-pantalla) var(--espacio-6);
  background: var(--color-tarjeta);
  border-bottom: var(--borde-fino) solid var(--color-linea);
}
.estilos-encabezado > .texto-suave {
  max-width: var(--ancho-lectura);
}
@media (min-width: 1024px) {
  .estilos-encabezado {
    padding: var(--espacio-10) var(--espacio-8) var(--espacio-8);
  }
}

/* Menú de la guía, agrupado por secciones y con un ícono por opción */
.indice {
  position: sticky;
  top: 0;
  z-index: var(--capa-barra);
  border-bottom: var(--borde-fino) solid var(--color-linea);
  background: var(--color-tarjeta);
}
.indice-boton {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  width: 100%;
  min-height: var(--alto-control-grande);
  padding: 0 var(--margen-pantalla);
  border: 0;
  background: transparent;
  font-weight: var(--peso-fuerte);
  text-align: left;
  cursor: pointer;
}
.indice-actual {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--color-texto-suave);
  font-weight: var(--peso-normal);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.indice-boton[aria-expanded="true"] > .icono:last-child {
  transform: rotate(180deg);
}
.indice-lista {
  display: none;
  flex-direction: column;
  gap: var(--espacio-4);
  max-height: calc(var(--alto-pantalla) - var(--alto-control-grande));
  overflow-y: auto;
  padding: var(--espacio-2) var(--espacio-3) var(--espacio-5);
  border-top: var(--borde-fino) solid var(--color-linea);
}
.indice[data-abierto] .indice-lista {
  display: flex;
}
.indice-marca {
  display: none;
  align-items: center;
  gap: var(--espacio-2);
  padding: var(--espacio-2) var(--espacio-3);
  font-family: var(--fuente-titulo);
  font-weight: var(--peso-titulo);
  letter-spacing: var(--letras-titulo);
}
.indice-grupo {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-0);
}
.indice-grupo-titulo {
  padding: var(--espacio-2) 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);
}
.indice-enlace {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  min-height: var(--toque-min);
  padding: 0 var(--espacio-3);
  border-radius: var(--radio-control);
  color: var(--color-texto-suave);
  font-weight: var(--peso-medio);
  text-decoration: none;
  transition: background-color var(--duracion) var(--curva), color var(--duracion) var(--curva);
}
.indice-enlace:hover {
  background: var(--color-hundido);
  color: var(--color-texto);
}
.indice-enlace[aria-current="true"] {
  background: var(--color-acento-tenue);
  color: var(--color-texto);
}
.indice-enlace[aria-current="true"] > .icono {
  color: var(--color-acento-texto);
}
@media (min-width: 1024px) {
  .indice {
    height: var(--alto-pantalla);
    overflow-y: auto;
    border-bottom: 0;
    border-right: var(--borde-fino) solid var(--color-linea);
  }
  .indice-boton {
    display: none;
  }
  .indice-lista,
  .indice[data-abierto] .indice-lista {
    display: flex;
    max-height: none;
    padding: var(--espacio-4) var(--espacio-3);
    border-top: 0;
  }
  .indice-marca {
    display: flex;
  }
}

/* Encabezado de cada sección grande de la guía */
.grupo-muestras {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-12);
}
.grupo-encabezado {
  display: flex;
  align-items: flex-start;
  gap: var(--espacio-4);
  padding-bottom: var(--espacio-6);
  border-bottom: var(--borde-grueso) solid var(--color-texto);
}
.grupo-icono {
  display: inline-grid;
  place-items: center;
  width: var(--avatar-lg);
  height: var(--avatar-lg);
  flex: none;
  border-radius: var(--radio-control);
  background: var(--color-acento-tenue);
  color: var(--color-acento-texto);
}
.grupo-texto {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
  max-width: var(--ancho-lectura);
}

.controles-personalizacion {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--espacio-5) var(--espacio-10);
}
.boton-muestra-ancho {
  max-width: var(--ancho-maqueta-celular);
}

.selector-acento {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
}
.acento-opcion {
  width: var(--toque-min);
  height: var(--toque-min);
  padding: 0;
  border: var(--borde-grueso) solid var(--color-tarjeta);
  border-radius: var(--radio-pastilla);
  box-shadow: 0 0 0 var(--borde-fino) var(--color-linea);
  cursor: pointer;
  transition: box-shadow var(--duracion) var(--curva);
}
.acento-opcion[aria-pressed="true"] {
  box-shadow: 0 0 0 var(--borde-grueso) var(--color-texto);
}
.acento-naranja  { background: var(--acento-naranja); }
.acento-azul     { background: var(--acento-azul); }
.acento-rosa     { background: var(--acento-rosa); }
.acento-verde    { background: var(--acento-verde); }
.acento-morado   { background: var(--acento-morado); }
.acento-amarillo { background: var(--acento-amarillo); }
.acento-rojo     { background: var(--acento-rojo); }
.acento-grafito  { background: var(--acento-grafito); }

.estilos-contenido {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-16);
  width: 100%;
  max-width: var(--ancho-maximo);
  margin: 0 auto;
  padding: var(--espacio-10) var(--margen-pantalla);
}
@media (min-width: 1024px) {
  .estilos-contenido {
    padding: var(--espacio-12) var(--espacio-8);
  }
}

.muestra {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-6);
  min-width: 0;
  scroll-margin-top: calc(var(--alto-control-grande) + var(--espacio-4));
}
@media (min-width: 1024px) {
  .muestra {
    scroll-margin-top: var(--espacio-6);
  }
}
.muestra-encabezado {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
  max-width: var(--ancho-lectura);
}
.muestra-grupo {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
  min-width: 0;
}

.estilos-dos-columnas {
  display: grid;
  gap: var(--espacio-6);
  align-items: start;
}
@media (min-width: 1024px) {
  .estilos-dos-columnas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Paleta de colores */
.paleta {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--ancho-tarjeta-servicio), 1fr));
  gap: var(--espacio-4);
}
.color {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
  margin: 0;
  font-size: var(--texto-sm);
}
.color figcaption {
  display: flex;
  flex-direction: column;
}
.color figcaption .cifra {
  color: var(--color-texto-suave);
  font-size: var(--texto-xs);
  white-space: normal;
}
.color-muestra {
  height: var(--alto-control-grande);
  border: var(--borde-fino) solid var(--color-linea);
  border-radius: var(--radio-control);
}
.muestra-fondo          { background: var(--color-fondo); }
.muestra-tarjeta        { background: var(--color-tarjeta); }
.muestra-hundido        { background: var(--color-hundido); }
.muestra-detalle        { background: var(--color-detalle); }
.muestra-texto          { background: var(--color-texto); }
.muestra-texto-suave    { background: var(--color-texto-suave); }
.muestra-linea          { background: var(--color-linea); }
.muestra-acento         { background: var(--color-acento); }
.muestra-acento-texto   { background: var(--color-acento-texto); }
.muestra-apartada       { background: var(--estado-apartada); }
.muestra-por-confirmar  { background: var(--estado-por-confirmar); }
.muestra-confirmada     { background: var(--estado-confirmada); }
.muestra-atendida       { background: var(--estado-atendida); }
.muestra-no-llego       { background: var(--estado-no-llego); }
.muestra-bloqueo {
  background: repeating-linear-gradient(
    135deg,
    var(--estado-bloqueo-raya) 0 var(--borde-grueso),
    var(--estado-bloqueo-fondo) 0 var(--raya-bloqueo)
  );
}

/* Tarjetas de cita sueltas */
.muestra-citas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--ancho-columna-min), 1fr));
  gap: var(--espacio-3);
  align-items: start;
}

.agenda-muestra {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-4);
}

/* Maquetas: marcos punteados donde se muestran piezas que en el sistema
   van fijas (barra inferior, menú lateral, botón flotante, brindis). */
.maqueta {
  min-width: 0;
  overflow: hidden;
  border: var(--borde-fino) dashed var(--color-linea-control);
  border-radius: var(--radio-tarjeta);
  background: var(--color-fondo);
}
.maqueta-celular {
  width: 100%;
  max-width: var(--ancho-maqueta-celular);
  background: var(--color-tarjeta);
}
.maqueta .encabezado,
.maqueta .barra-inferior,
.maqueta .menu-lateral,
.maqueta .boton-flotante,
.maqueta .brindis {
  position: static;
}
.maqueta .barra-inferior {
  display: grid;
  border-top: 0;
}
.maqueta-lateral .menu-lateral {
  display: flex;
  width: 100%;
  max-width: var(--ancho-lateral);
  min-height: var(--alto-maqueta);
}
.maqueta-lateral-compacta {
  position: relative;
  display: flex;
}
.maqueta-lateral-compacta .menu-lateral {
  max-width: var(--ancho-lateral-compacto);
}
/* En la maqueta, la lista del grupo y el globito se quedan dentro de ella. */
.maqueta[data-menu-compacto] .menu-lateral-grupo[data-flotante] > .menu-lateral-sub,
.maqueta[data-menu-compacto] .menu-lateral-globo:not([hidden]) {
  position: absolute;
}
.maqueta-relleno {
  flex: 1;
  background: var(--color-fondo);
}
.maqueta-flotante {
  display: flex;
  justify-content: flex-end;
  padding: var(--espacio-6);
}
.maqueta-brindis {
  display: flex;
  justify-content: center;
  padding: var(--espacio-6);
}
.maqueta .brindis {
  transform: none;
}
/* La campanita abierta, dentro de su maqueta (en el sistema flota). */
.maqueta-campana {
  display: flex;
  justify-content: flex-end;
  padding: var(--espacio-4);
}
.maqueta .campana-panel {
  position: static;
  width: var(--ancho-campana);
  max-height: none;
}

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

.muestra-panel {
  display: grid;
  gap: var(--espacio-4);
  align-items: start;
}

/* Página pública en la guía: cada muestra en claro y en oscuro */
.muestra-temas > .maqueta {
  justify-self: center;
}
.maqueta-reserva {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-5);
  padding: var(--espacio-5) var(--margen-pantalla);
  background: var(--color-fondo);
  color: var(--color-texto);
}
.maqueta-reserva.perfil > .perfil-portada,
.maqueta-reserva > .barra-reserva {
  margin: calc(var(--espacio-5) * -1) calc(var(--margen-pantalla) * -1) 0;
}
.maqueta-reserva > .barra-reserva {
  position: static;
}
.barra-fija-muestra {
  position: static;
  margin: 0 calc(var(--margen-pantalla) * -1);
}
.progreso-muestra {
  transform: scaleX(0.6);
}
/* La barra de la meta en estilos.html (en las pantallas el avance va como variable). */
.meta-muestra {
  transform: scaleX(0.92);
}
.meta-muestra-completa {
  transform: scaleX(1);
}
.maqueta-resumen {
  max-width: var(--ancho-resumen);
  padding: var(--espacio-5);
  background: var(--color-fondo);
}
@media (min-width: 1024px) {
  .muestra-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* estilos.html en el estilo Cobre (rediseño del 11 oct 2026): el
   encabezado va sobre la luz, el índice como el menú lateral y los colores
   en negro y en blanco, lado a lado. */
[data-estilo~="cobre"] .estilos-encabezado {
  gap: var(--espacio-4);
  padding: var(--espacio-8) var(--margen-pantalla) var(--espacio-2);
  border-bottom: 0;
  background: transparent;
}
@media (min-width: 1024px) {
  [data-estilo~="cobre"] .estilos-encabezado {
    padding: var(--espacio-12) var(--espacio-8) var(--espacio-2);
  }
}
.estilos-encabezado-arriba {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-3);
}
[data-estilo~="cobre"] .indice {
  border-color: var(--color-linea);
  background: var(--color-menu);
}
[data-estilo~="cobre"] .indice-grupo-titulo {
  color: var(--color-texto-tenue);
  font-size: var(--texto-sm);
  font-weight: var(--peso-normal);
  letter-spacing: 0;
  text-transform: none;
}
[data-estilo~="cobre"] .indice-enlace {
  font-size: var(--texto-renglon);
}
[data-estilo~="cobre"] .indice-enlace[aria-current="true"] {
  box-shadow: inset 0 0 0 var(--borde-fino) var(--color-linea);
}
[data-estilo~="cobre"] .indice-enlace[aria-current="true"] > .icono {
  color: var(--color-marca-texto);
}
[data-estilo~="cobre"] .grupo-encabezado {
  border-bottom: var(--borde-fino) solid var(--color-linea-control);
}
[data-estilo~="cobre"] .grupo-icono {
  border-radius: var(--radio-campo);
  background: var(--color-marca-tenue);
  color: var(--color-marca-texto);
}

/* Los colores: el lado negro y su copia en blanco */
.muestra-lados {
  display: grid;
  gap: var(--espacio-4);
}
@media (min-width: 1024px) {
  .muestra-lados {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.muestra-lado {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-4);
  min-width: 0;
  padding: var(--espacio-5) var(--espacio-4);
  border: var(--borde-fino) solid var(--color-linea-control);
  border-radius: var(--radio-tarjeta);
  background: var(--color-fondo);
  color: var(--color-texto);
}
.muestra-lado-titulo {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  font-weight: var(--peso-fuerte);
}
.muestra-lado-titulo > .icono {
  color: var(--color-marca-texto);
}
.muestra-menu         { background: var(--color-menu); }
.muestra-texto-tenue  { background: var(--color-texto-tenue); }
.muestra-sobre-acento { background: var(--color-sobre-acento); }
.muestra-marca        { background: var(--color-marca); }
.muestra-marca-texto  { background: var(--color-marca-texto); }
.muestra-parte-1      { background: var(--parte-1); }
.muestra-parte-2      { background: var(--parte-2); }
.muestra-parte-3      { background: var(--parte-3); }

/* La luz en su caja, y lo que va encima */
.muestra-luz {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: var(--alto-muestra-luz);
  overflow: hidden;
  border: var(--borde-fino) solid var(--color-linea);
  border-radius: var(--radio-tarjeta);
  background: var(--color-fondo);
}
.muestra-luz-texto {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
  padding: var(--espacio-6) var(--espacio-5);
}
.muestra-tres {
  display: grid;
  gap: var(--espacio-4);
  align-items: start;
}
@media (min-width: 1024px) {
  .muestra-tres {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.muestra-borde {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
  padding: var(--espacio-5);
}
/* Maquetas con la luz de arriba (barra de arriba, entrar) */
.maqueta-luz {
  position: relative;
  isolation: isolate;
}
.maqueta-luz > :not(.luz) {
  position: relative;
}
/* Registro y unirse: el formulario con aire, como en el celular */
.maqueta-celular > .acceso-formulario {
  padding: var(--espacio-6) var(--margen-pantalla);
}
.maqueta-pildora {
  padding: var(--espacio-5) var(--espacio-3);
  background: var(--color-fondo);
}
[data-estilo~="cobre"] .maqueta-lateral .menu-lateral {
  min-height: var(--alto-maqueta-menu);
}
/* Entrar: el formulario y, en computadora, el lado con el panel en chico */
.muestra-acceso {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--espacio-8);
  padding: var(--espacio-6) var(--margen-pantalla);
}
@media (min-width: 1024px) {
  .muestra-acceso {
    grid-template-columns: minmax(0, var(--ancho-acceso)) minmax(0, 1fr);
    align-items: center;
    gap: var(--espacio-8);
    padding: var(--espacio-8);
  }
}
/* Vidrio: la maqueta va del color de su página; la barra de abajo flota
   sobre una foto, dentro de su maqueta */
.maqueta-vidrio {
  background: var(--color-fondo);
  color: var(--color-texto);
}
.maqueta-con-foto {
  position: relative;
  min-height: var(--alto-maqueta-foto);
}
.maqueta-con-foto > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.maqueta .barra-flotante {
  position: absolute;
}


/* ─── Página pública de reservas: /n/<slug>/citas ───────────────────── */

.publica {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-5);
  padding: var(--espacio-6) var(--margen-pantalla) 0;
  background: var(--color-fondo);
  color: var(--color-texto);
}
.publica-cabecera {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
}
.publica-logo {
  width: var(--avatar-lg);
  height: var(--avatar-lg);
  border-radius: var(--radio-control);
  font-size: var(--texto-lg);
}
.publica-horario {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
}
.publica-promo {
  background: var(--color-acento-tenue);
  color: var(--color-acento-texto);
}
.publica .pie-localiapps {
  margin: 0 calc(var(--margen-pantalla) * -1);
  border-top: var(--borde-fino) solid var(--color-linea);
}

/* La página de verdad (reservar.html) */
.pagina-publica {
  min-height: var(--alto-pantalla);
}
.publica-pagina {
  width: 100%;
  max-width: var(--ancho-ventana);
  margin: 0 auto;
  padding-bottom: var(--espacio-8);
}
.publica-nombre {
  flex: 1;
  min-width: 0;
}
img.publica-logo {
  object-fit: cover;
}
.publica-listo > .icono {
  color: var(--color-acento-texto);
}

/* ─── Página pública nueva (etapa 5): perfil arriba, cita en pasos ──── */

.reserva {
  display: flex;
  flex-direction: column;
  min-height: var(--alto-pantalla);
  background: var(--color-fondo);
  color: var(--color-texto);
}
.reserva-cuerpo {
  flex: 1;
  width: 100%;
  max-width: var(--ancho-publica);
  margin: 0 auto;
  padding: var(--espacio-5) var(--margen-pantalla) var(--espacio-8);
}
.reserva-pasos {
  min-width: 0;
}
.reserva-lateral {
  display: none;
}
.reserva > .pie-localiapps {
  padding-bottom: calc(var(--alto-boton-fijo) + var(--espacio-6) + env(safe-area-inset-bottom));
}
.barra-reserva-fila {
  max-width: var(--ancho-publica);
  margin: 0 auto;
}
/* El botón de compartir se acomoda en la esquina del perfil. */
.paso.perfil {
  position: relative;
}
/* En celular la portada llega de orilla a orilla. */
.perfil > .perfil-portada {
  margin: calc(var(--espacio-5) * -1) calc(var(--margen-pantalla) * -1) 0;
}
.perfil > .perfil-portada + .perfil-identidad {
  padding-left: var(--espacio-1);
}
/* Vidrio: la portada va aparte, arriba de las columnas (.reserva-portada);
   la píldora flota abajo (el pie le deja lugar). */
.reserva-portada[hidden] {
  display: none;
}
.barra-arriba-nombre {
  white-space: nowrap;
}
.pagina-publica:has(> .barra-flotante:not([hidden])) .reserva > .pie-localiapps {
  padding-bottom: calc(var(--boton-redondo) + var(--margen-pildora) * 2 + env(safe-area-inset-bottom));
}
.perfil-seccion {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
}
.perfil-sin-solicitudes {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
}

@media (min-width: 900px) {
  .reserva-cuerpo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--ancho-resumen);
    align-items: start;
    gap: var(--espacio-10);
    max-width: var(--ancho-publica-doble);
    padding-top: var(--espacio-8);
  }
  .barra-reserva-fila {
    max-width: var(--ancho-publica-doble);
  }
  .reserva-lateral {
    display: block;
    height: 100%;
  }
  .reserva-cuerpo.reserva-una-columna {
    grid-template-columns: minmax(0, 1fr);
    max-width: var(--ancho-publica);
  }
  .reserva-una-columna > .reserva-lateral {
    display: none;
  }
  .reserva > .pie-localiapps {
    padding-bottom: var(--espacio-8);
  }
  .perfil > .perfil-portada {
    margin: 0;
    border-radius: var(--radio-tarjeta);
  }
  .perfil > .perfil-portada + .perfil-identidad {
    padding-left: var(--espacio-6);
  }
  .perfil .resenas {
    margin: 0;
    padding: var(--espacio-1) 0 var(--espacio-2);
    scroll-padding: 0;
  }
  /* En escritorio el botón va dentro de la tarjeta de resumen. */
  .barra-fija,
  .barra-flotante-pedir {
    display: none !important;
  }
}

/* Vidrio en el celular: los textos cortos en las pastillas de la portada */
@media (max-width: 719px) {
  .solo-angosto {
    display: inline;
  }
  .solo-ancho {
    display: none;
  }
}

/* ─── Vidrio en computadora (13 oct): la foto de orilla a orilla arriba,
   la barra de arriba y dos columnas (el contenido y "Pida su cita") ──── */
@media (min-width: 1024px) {
  /* La barra de arriba: transparente sobre la foto, píldora de vidrio al bajar */
  [data-estilo~="vidrio"] .barra-arriba-vidrio:not([hidden]) {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: var(--capa-barra);
    display: block;
    padding: var(--espacio-3) var(--orilla-vidrio) 0;
    color: var(--vidrio-texto);
    pointer-events: none;
  }
  [data-estilo~="vidrio"] .barra-arriba-dentro {
    pointer-events: auto;
  }
  [data-estilo~="vidrio"] .barra-arriba-vidrio.fija:not([hidden]) {
    color: var(--color-texto);
  }
  [data-estilo~="vidrio"] .barra-arriba-vidrio.fija .barra-arriba-dentro {
    padding-left: var(--espacio-3);
  }
  [data-estilo~="vidrio"] .boton-vidrio {
    display: inline-flex;
  }
  /* En computadora no va la píldora de abajo */
  [data-estilo~="vidrio"] .barra-flotante {
    display: none !important;
  }
  [data-estilo~="vidrio"] .pagina-publica .reserva > .pie-localiapps,
  [data-estilo~="vidrio"] .pagina-publica:has(> .barra-flotante:not([hidden])) .reserva > .pie-localiapps {
    padding-bottom: var(--espacio-8);
  }

  /* La portada: nombre grande abajo a la izquierda, círculos a la derecha */
  [data-estilo~="vidrio"] .portada-foto {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "texto botones"
      "categorias categorias";
    align-content: end;
    align-items: end;
    gap: var(--espacio-8) var(--espacio-10);
    min-height: var(--alto-portada-vidrio-ancha);
    padding: calc(var(--alto-barra-arriba) + var(--espacio-16)) var(--orilla-vidrio) var(--espacio-10);
  }
  [data-estilo~="vidrio"] .portada-foto-arriba {
    display: contents;
  }
  [data-estilo~="vidrio"] .portada-foto-logo {
    display: none;
  }
  [data-estilo~="vidrio"] .portada-foto-botones {
    grid-area: botones;
    gap: var(--espacio-3);
    padding-bottom: var(--espacio-1);
  }
  [data-estilo~="vidrio"] .portada-foto-botones > .circulo-vidrio {
    width: var(--circulo-vidrio-grande);
    height: var(--circulo-vidrio-grande);
  }
  [data-estilo~="vidrio"] .portada-foto-texto {
    grid-area: texto;
    align-items: flex-start;
    gap: var(--espacio-4);
    max-width: var(--ancho-texto-portada);
    text-align: left;
  }
  [data-estilo~="vidrio"] .portada-foto-nombre {
    font-size: var(--texto-portada-ancha);
    letter-spacing: var(--letras-portada-ancha);
    line-height: var(--interlineado-portada-ancha);
  }
  [data-estilo~="vidrio"] .portada-foto .pastillas-vidrio-datos,
  [data-estilo~="vidrio"] .portada-foto-acciones {
    justify-content: flex-start;
  }
  [data-estilo~="vidrio"] .portada-foto-acciones {
    margin-top: var(--espacio-2);
  }
  [data-estilo~="vidrio"] .portada-foto-acciones > .boton-principal {
    min-width: 0;
  }
  [data-estilo~="vidrio"] .portada-foto > .pastillas-vidrio {
    grid-area: categorias;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  /* Dos columnas: el contenido y la tarjeta de la derecha */
  [data-estilo~="vidrio"] .reserva-cuerpo {
    grid-template-columns: minmax(0, 1fr) var(--ancho-lado-vidrio);
    gap: var(--separacion-columnas-vidrio);
    max-width: none;
    padding: var(--espacio-12) var(--orilla-vidrio) var(--espacio-16);
  }
  [data-estilo~="vidrio"] .reserva-cuerpo.reserva-una-columna {
    grid-template-columns: minmax(0, 1fr);
    max-width: none;
  }
  [data-estilo~="vidrio"] .barra-reserva-fila {
    max-width: none;
    padding: 0 var(--orilla-vidrio);
  }
  [data-estilo~="vidrio"] .resumen-lateral {
    padding: var(--espacio-6);
    border-radius: var(--radio-tarjeta);
  }
  /* Con la barra de arriba, la tarjeta se pega debajo de ella */
  body:has(> .barra-arriba-vidrio:not([hidden])) .resumen-lateral {
    top: calc(var(--alto-barra-arriba) + var(--espacio-10));
  }
  [data-estilo~="vidrio"] .paso.perfil {
    gap: var(--espacio-16);
  }
  [data-estilo~="vidrio"] .perfil-bloque {
    gap: var(--espacio-5);
    scroll-margin-top: calc(var(--alto-barra-arriba) + var(--espacio-8));
  }
  [data-estilo~="vidrio"] .perfil-bloque-titulo > h2 {
    font-size: var(--texto-2xl);
  }

  /* Servicios: tarjetas de 3 columnas, la foto arriba y el precio en vidrio */
  [data-estilo~="vidrio"] .pestanas-servicios {
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    overflow: visible;
  }
  [data-estilo~="vidrio"] .servicios-vidrio {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--espacio-4);
  }
  [data-estilo~="vidrio"] .servicios-vidrio > li {
    display: flex;
  }
  [data-estilo~="vidrio"] .servicios-vidrio .renglon-servicio {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "texto mas"
      "precio mas";
    align-content: end;
    align-items: center;
    gap: var(--espacio-1) var(--espacio-2);
    padding: var(--espacio-4) var(--espacio-3) var(--espacio-4) var(--espacio-4);
  }
  [data-estilo~="vidrio"] .servicios-vidrio .renglon-servicio:has(> .renglon-servicio-foto) {
    grid-template-areas:
      "foto foto"
      "texto mas";
    align-content: start;
    gap: var(--espacio-3) var(--espacio-2);
    padding: var(--espacio-2) var(--espacio-3) var(--espacio-3) var(--espacio-2);
  }
  [data-estilo~="vidrio"] .servicios-vidrio .renglon-servicio-foto {
    grid-area: foto;
    width: 100%;
    height: auto;
    aspect-ratio: var(--proporcion-servicio);
    border-radius: var(--radio-campo);
  }
  [data-estilo~="vidrio"] .servicios-vidrio .renglon-servicio-texto {
    grid-area: texto;
  }
  [data-estilo~="vidrio"] .servicios-vidrio .renglon-servicio:has(> .renglon-servicio-foto) > .renglon-servicio-texto {
    padding-left: var(--espacio-2);
  }
  [data-estilo~="vidrio"] .servicios-vidrio .renglon-servicio-nombre {
    font-size: var(--texto-md);
  }
  [data-estilo~="vidrio"] .servicios-vidrio .renglon-servicio-precio {
    grid-area: precio;
  }
  [data-estilo~="vidrio"] .servicios-vidrio .renglon-servicio-foto ~ .renglon-servicio-precio {
    grid-area: foto;
    align-self: end;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    min-height: var(--alto-pastilla-vidrio);
    margin: var(--espacio-3);
    padding: 0 var(--espacio-3);
    border: var(--borde-fino) solid var(--vidrio-borde);
    border-radius: var(--radio-pastilla);
    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);
  }
  [data-estilo~="vidrio"] .servicios-vidrio .renglon-servicio > .boton-circulo {
    grid-area: mas;
  }
  /* Al pasar el mouse la foto se acerca; el recorte la deja en su marco */
  [data-estilo~="vidrio"] .servicios-vidrio .renglon-servicio-foto,
  [data-estilo~="vidrio"] .tarjeta-persona > img.avatar-perfil {
    clip-path: inset(0 round var(--radio-campo));
    transition: transform var(--duracion-acerca) var(--curva-salida), clip-path var(--duracion-acerca) var(--curva-salida);
  }
  [data-estilo~="vidrio"] .renglon-servicio:hover:not(:disabled) > .renglon-servicio-foto,
  [data-estilo~="vidrio"] a.tarjeta-persona:hover > img.avatar-perfil {
    clip-path: inset(var(--recorte-foto) round var(--radio-campo));
    transform: scale(var(--acerca-foto));
  }

  /* Fotos en mosaico: 4 columnas, la primera de 2×2 (caben 5) */
  [data-estilo~="vidrio"] .galeria-mosaico:not(.galeria-de-1, .galeria-de-2) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: var(--alto-foto-mosaico-ancha);
    gap: var(--espacio-3);
  }
  [data-estilo~="vidrio"] .galeria-de-3 > .foto-mosaico:first-child {
    grid-column: span 2;
  }
  [data-estilo~="vidrio"] .galeria-de-3 > .foto-mosaico:not(:first-child) {
    grid-row: span 2;
  }
  [data-estilo~="vidrio"] .galeria-de-6 > .foto-mosaico:nth-child(6) {
    display: none;
  }
  [data-estilo~="vidrio"] .foto-mas-ancha {
    display: grid;
  }
  [data-estilo~="vidrio"] .foto-mosaico {
    border-radius: var(--radio-campo);
  }

  /* Equipo: 3 columnas con la foto de 4:5 */
  [data-estilo~="vidrio"] .fila-personas {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--espacio-4);
    margin: 0;
    padding: 0;
    overflow: visible;
  }
  [data-estilo~="vidrio"] .tarjeta-persona {
    align-items: flex-start;
    width: auto;
    padding: var(--espacio-2) var(--espacio-2) var(--espacio-4);
    text-align: left;
  }
  [data-estilo~="vidrio"] .tarjeta-persona > :not(.avatar-perfil) {
    margin-left: var(--espacio-2);
  }
  [data-estilo~="vidrio"] .tarjeta-persona > .avatar-perfil {
    width: 100%;
    height: auto;
    margin-bottom: var(--espacio-2);
    aspect-ratio: var(--proporcion-persona);
    border-radius: var(--radio-campo);
    box-shadow: none;
    font-size: var(--texto-2xl);
  }
  [data-estilo~="vidrio"] .tarjeta-persona-nombre {
    font-size: var(--texto-md);
  }

  /* Opiniones: el resumen y Google lado a lado; abajo, de 3 en 3 */
  [data-estilo~="vidrio"] .perfil-bloque:has(> .resumen-opiniones + .lista-opiniones ~ .tarjeta-google) {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  }
  [data-estilo~="vidrio"] .perfil-bloque:has(> .tarjeta-google) > * {
    grid-column: 1 / -1;
  }
  [data-estilo~="vidrio"] .perfil-bloque:has(> .resumen-opiniones + .lista-opiniones ~ .tarjeta-google) > .resumen-opiniones {
    grid-row: 2;
    grid-column: 1;
  }
  [data-estilo~="vidrio"] .perfil-bloque:has(> .resumen-opiniones + .lista-opiniones ~ .tarjeta-google) > .tarjeta-google {
    grid-row: 2;
    grid-column: 2;
  }
  [data-estilo~="vidrio"] .lista-opiniones {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--espacio-4);
  }
  [data-estilo~="vidrio"] .lista-opiniones > .boton-texto {
    grid-column: 1 / -1;
  }

  /* Día y hora: el calendario y las horas lado a lado */
  [data-estilo~="vidrio"] .paso-fecha:has(> .calendario + .formulario-paso) {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: start;
    gap: var(--espacio-5) var(--espacio-8);
  }
  [data-estilo~="vidrio"] .paso-fecha > * {
    grid-column: 1 / -1;
  }
  [data-estilo~="vidrio"] .paso-fecha > .calendario {
    grid-column: 1;
  }
  [data-estilo~="vidrio"] .paso-fecha > .calendario + .formulario-paso {
    grid-column: 2;
  }

  /* Acerca de: el texto y el horario lado a lado */
  [data-estilo~="vidrio"] [data-seccion="acerca"] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--espacio-4);
  }
  [data-estilo~="vidrio"] [data-seccion="acerca"] > :not(.perfil-tarjeta) {
    grid-column: 1 / -1;
  }
}

/* Vidrio en pantallas anchas: los servicios de 3 en 3 */
@media (min-width: 1280px) {
  [data-estilo~="vidrio"] .servicios-vidrio {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

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

.pantalla-personalizacion {
  max-width: var(--ancho-lectura);
}
.pantalla-personalizacion .tarjeta-encabezado {
  align-items: flex-start;
}
/* En computadora la lista de secciones va a la izquierda, dentro de la
   tarjeta de Ajustes: la pantalla se ensancha para que los datos no queden
   apretados (a 1024, con el menú, antes medían ~300 px). */
@media (min-width: 1024px) {
  .pantalla-personalizacion {
    max-width: var(--ancho-personalizacion);
  }
}

/* Ajustes en el estilo Cobre (referencia "AlphaWave", 11 oct): la lista de
   secciones dentro de la tarjeta (en celular, en dos columnas arriba) y las
   tarjetas de datos a la derecha. */
.tarjeta.ajustes {
  display: grid;
  gap: var(--espacio-3);
  padding: var(--espacio-3);
}
.ajustes-lista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--espacio-1);
}
.ajustes-opcion {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  min-height: var(--toque-min);
  padding: 0 var(--espacio-3);
  border: 0;
  border-radius: var(--radio-control);
  background: transparent;
  color: var(--color-texto-suave);
  font: inherit;
  font-size: var(--texto-renglon);
  font-weight: var(--peso-medio);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duracion) var(--curva), color var(--duracion) var(--curva);
}
.ajustes-opcion > .icono {
  color: var(--color-texto-tenue);
}
.ajustes-opcion:hover {
  background: var(--color-acento-tenue);
  color: var(--color-texto);
}
.ajustes-opcion[aria-pressed="true"],
.ajustes-opcion[aria-current="page"] {
  background: var(--color-acento-tenue);
  color: var(--color-texto);
  box-shadow: inset 0 0 0 var(--borde-fino) var(--color-linea);
}
.ajustes-opcion[aria-pressed="true"] > .icono,
.ajustes-opcion[aria-current="page"] > .icono {
  color: var(--color-marca-texto);
}
.ajustes-raya {
  grid-column: 1 / -1;
  height: var(--borde-fino);
  margin: var(--espacio-1) 0;
  background: var(--color-linea);
}
.ajustes-contenido {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
  min-width: 0;
}
.ajustes-titulo {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-1);
  padding: var(--espacio-1) var(--espacio-1) 0;
}
/* Las tarjetas de cada sección van dentro de la de Ajustes: como tarjetas
   de datos (con línea, sin sombra), para no verse una sobre otra. */
.ajustes-contenido .tarjeta {
  border: var(--borde-fino) solid var(--color-linea);
  border-radius: var(--radio-campo);
  box-shadow: none;
}
@media (min-width: 1024px) {
  .tarjeta.ajustes {
    grid-template-columns: var(--ancho-ajustes-lista) minmax(0, 1fr);
    gap: 0;
    padding: 0;
    overflow: hidden;
  }
  .ajustes-lista {
    display: flex;
    flex-direction: column;
    padding: var(--espacio-4);
    border-right: var(--borde-fino) solid var(--color-linea);
  }
  .ajustes-contenido {
    padding: var(--espacio-5) var(--espacio-6) var(--espacio-6);
  }
}
.subir-logo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-4);
}
.logo-vista {
  display: inline-flex;
  flex: none;
}
.subir-logo-controles {
  display: flex;
  flex: 1 1 var(--ancho-texto-min);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--espacio-2);
  min-width: 0;
}
.acento-ninguno {
  border-style: dashed;
  border-color: var(--color-linea-control);
  background: var(--color-tarjeta);
}
.acento-propio {
  background: var(--color-servicio);
}

/* Horario por día: en celular el día arriba y las horas abajo */
.lista-horario {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
}
/* Se acomoda solo al ancho que tenga: en angosto, el día arriba y las horas abajo. */
.fila-horario {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-2) var(--espacio-3);
  padding: var(--espacio-2) 0;
  border-bottom: var(--borde-fino) solid var(--color-linea);
}
.fila-horario:last-child {
  border-bottom: 0;
}
.fila-horario-dia {
  flex: 1 0 var(--ancho-tarjeta-servicio);
}
.fila-horario > select.entrada {
  flex: 1 1 var(--ancho-tarjeta-servicio);
  width: auto;
}
.fila-horario-horas {
  display: flex;
  flex: 1 1 calc(var(--ancho-texto-min) + var(--espacio-10));
  align-items: center;
  gap: var(--espacio-2);
  min-width: 0;
}
.fila-horario-horas > .entrada {
  flex: 1 1 calc(var(--ancho-hora) * 2);
  min-width: 0;
}

/* Dos campos lado a lado (en celular, uno bajo otro) */
.campos-en-linea,
.rejilla-campos {
  display: grid;
  gap: var(--espacio-4);
}
@media (min-width: 768px) {
  .campos-en-linea {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}
.fila-servicio > .fila-boton {
  flex: 1 1 var(--ancho-texto-min);
}

/* ─── Administración de Localiapps (/admin): sin menú lateral ───────── */

@media (min-width: 768px) {
  /* Doble clase: le gana a `[data-estilo~="tablero"] .app`, que deja el
     hueco del menú lateral. */
  .app.app-admin {
    padding-left: 0;
  }
}
.pantalla-admin {
  max-width: var(--ancho-lectura);
}
/* Las cifras, de dos en dos también en computadora: en el ancho de lectura,
   cuatro en un renglón partían "Negocios adentro" en tres renglones. */
@media (min-width: 1024px) {
  [data-estilo~="tablero"] .pantalla-admin .panel-datos:not(.panel-datos-compacto) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
  }
  [data-estilo~="tablero"] .pantalla-admin .panel-datos:not(.panel-datos-compacto) > .dato:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}
.pantalla-admin > .pantalla-titulo > .boton-texto {
  align-self: flex-start;
  margin-left: calc(var(--espacio-3) * -1);
}
.lista-personas {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
}
.persona-alta {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
}
.persona-alta > .boton-texto {
  align-self: flex-end;
}
.credenciales {
  border-color: var(--aviso-exito);
}
.pantalla-admin .fila-acciones > .boton {
  min-height: var(--toque-min);
}

/* Colores del panel /admin: el color propio. */
.entrada-color {
  inline-size: calc(var(--toque-min) * 2);
  block-size: var(--toque-min);
  padding: var(--espacio-1);
  border: var(--borde-fino) solid var(--color-linea-control);
  border-radius: var(--radio-control);
  background: var(--color-tarjeta);
  cursor: pointer;
}

/* Ventas (/admin → Ventas): la meta, lo de hoy y los negocios. */
.admin-pestanas {
  /* Del ancho de sus cuatro pestañas (Facturas lleva la cuenta de las pedidas). */
  max-width: max-content;
}
/* En el celular, Negocios | Ventas | Facturas | IA caben solo con su texto. */
@media (max-width: 479px) {
  .admin-pestanas .segmento > .icono {
    display: none;
  }
  /* Los datos fiscales (RFC, correo) no caben a media pantalla: uno por renglón. */
  .datos-factura {
    grid-template-columns: minmax(0, 1fr);
  }
  .datos-factura > .dato:nth-child(2n) {
    padding-left: 0;
    border-left: 0;
  }
}
.ventas-datos > .dato:first-child {
  flex: 1 0 100%;
}
.ventas-meta {
  font-size: var(--texto-lg);
  font-weight: var(--peso-normal);
  letter-spacing: normal;
}
.ventas-progreso {
  display: block;
  border-radius: var(--radio-control);
}
.ventas-hoy {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--espacio-4);
}
.ventas-hoy-celda {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--espacio-2);
  min-width: 0;
}
.ventas-hoy-cifra {
  display: flex;
  align-items: baseline;
  gap: var(--espacio-2);
}
.ventas-filtros > .entrada[type="search"] {
  flex: 1 1 var(--ancho-texto-min);
}
.ventas-filtros > select.entrada {
  flex: 0 1 auto;
  width: auto;
}
.ventas-vencido {
  color: var(--aviso-atencion);
  font-weight: var(--peso-fuerte);
}

/* ─── Aviso de privacidad (página pública) ──────────────────────────── */

.publica-texto {
  max-width: var(--ancho-lectura);
  line-height: var(--interlineado);
}
.publica-seccion {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
}
.publica-seccion a {
  color: var(--color-acento-texto);
}
.publica-texto > .boton {
  align-self: flex-start;
}

/* Bitácora: los cinco filtros (Todo, Pagos, Descuentos, Fidelidad, Caja) no
   caben en una fila de celular: van de tres en tres. */
.bitacora-filtro {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-flow: row;
}
/* Equipo: los cuatro puestos (etapa 6c, con Gerente) van de dos en dos en celular. */
.segmentado-puestos {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: row;
}
@media (min-width: 480px) {
  .segmentado-puestos {
    grid-template-columns: none;
    grid-auto-flow: column;
  }
}
@media (min-width: 480px) {
  .bitacora-filtro {
    grid-template-columns: none;
    grid-auto-flow: column;
  }
}
/* Cobre: la pastilla no se parte en renglones; los filtros se deslizan de
   lado (como las fichas de Inventario). */
[data-estilo~="cobre"] .bitacora-filtro {
  display: flex;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
[data-estilo~="cobre"] .bitacora-filtro > .segmento {
  flex: none;
}
@media (min-width: 1024px) {
  [data-estilo~="cobre"] .bitacora-filtro {
    align-self: flex-start;
  }
}
/* Los puestos van de dos en dos en celular: en tarjeta, no en pastilla. */
@media (max-width: 479px) {
  [data-estilo~="cobre"] .segmentado-puestos {
    border-radius: var(--radio-campo);
  }
}

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

.pantalla-caja,
.pantalla-gastos {
  max-width: var(--ancho-lectura);
}
.caja-abrir {
  gap: var(--espacio-4);
}
.caja-abrir .vacio {
  padding-top: 0;
}
.caja-cerrar {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
}
/* "‹ Septiembre 2026 ›" */
.gastos-mes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-3);
}
.gastos-mes-hueco {
  width: var(--toque-min);
}

/* ─── Checador, vacaciones y compras (etapa 6m) ────────────────────── */

.pantalla-checador,
.pantalla-vacaciones,
.pantalla-compras {
  max-width: var(--ancho-lectura);
}

/* Nómina (etapa 6d): una columna de lectura. */
.pantalla-nomina {
  max-width: var(--ancho-lectura);
}

/* ─── Mi suscripción (etapa 8, paso 4) ─────────────────────────────── */

.pantalla-suscripcion {
  max-width: var(--ancho-lectura);
}
.suscripcion-resumen {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
}
.suscripcion-plan {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--espacio-1) var(--espacio-3);
}
.suscripcion-plan-nombre {
  font-family: var(--fuente-titulo);
  font-size: var(--texto-2xl);
  font-weight: var(--peso-titulo);
  line-height: var(--interlineado-apretado);
}
.suscripcion-lineas {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.suscripcion-acciones {
  flex-wrap: wrap;
  justify-content: flex-start;
}
.escoger-plan-tarjeta {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
}
.escoger-plan {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--espacio-3);
}
.escoger-plan > .segmentado {
  align-self: stretch;
}
.opciones-plan {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--espacio-2);
  align-self: stretch;
}
.opcion-plan {
  justify-content: flex-start;
}
.opcion-plan-precio {
  font-size: var(--texto-md);
  font-weight: var(--peso-fuerte);
}
.suscripcion-pie {
  margin: 0;
}
@media (min-width: 768px) {
  .opciones-plan {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .ventana .opciones-plan {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* /admin → IA: los dos topes por día, lado a lado; pegados abajo para que
   las cajas queden parejas aunque una etiqueta ocupe dos renglones. */
.campos-topes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--espacio-2);
  align-items: end;
}

/* ─── Clientes: cumpleaños (etapa IA) ──────────────────────────────── */

/* Día y mes, lado a lado (el mes más ancho). */
.campos-cumple {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--espacio-2);
}

/* ═══════════════════════════════════════════════════════════════════════
   Etapa 9: la bienvenida del negocio nuevo (docs/etapa9-bienvenida.md).
   El asistente (/bienvenida) va en el marco de entrar (la luz arriba, una
   sola columna); la lista "Primeros pasos" en la agenda; el recorrido
   ilumina una parte de la pantalla con su globo.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── El asistente ── */
.acceso-bienvenida > .acceso-formulario {
  align-self: start;
  max-width: var(--ancho-bienvenida);
}
@media (min-width: 1024px) {
  .acceso-bienvenida {
    grid-template-columns: minmax(0, 1fr);
  }
}
.bienvenida {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-5);
}
/* El título se enfoca al cambiar de paso (para el lector de pantalla), sin recuadro. */
.bienvenida h1[tabindex="-1"]:focus {
  outline: none;
}
.bienvenida-cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-3);
  min-height: var(--toque-min);
}
.bienvenida-marca {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  min-width: 0;
}
.bienvenida-marca > strong {
  overflow: hidden;
  font-weight: var(--peso-fuerte);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bienvenida-logo {
  flex: none;
  width: var(--avatar-md);
  height: var(--avatar-md);
  border-radius: var(--radio-control);
  object-fit: cover;
}
.bienvenida-iniciales {
  display: grid;
  place-items: center;
  background: var(--color-marca);
  color: var(--color-sobre-marca);
  font-size: var(--texto-sm);
  font-weight: var(--peso-fuerte);
}
.bienvenida-avance {
  gap: var(--espacio-2);
}
.bienvenida-cuerpo {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
}
.bienvenida-botones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--espacio-2);
  padding-top: var(--espacio-3);
}
.bienvenida-botones > .boton-principal {
  margin-left: auto;
}
.bienvenida-botones > .boton-texto:first-child {
  margin-right: auto;
}
/* 1 · ¿Cómo lleva hoy su agenda? */
.bienvenida-opciones {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 1024px) {
  .bienvenida-opciones {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
/* 2 · Traiga sus datos */
.bienvenida-soltar {
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--espacio-2);
  min-height: var(--alto-soltar);
  padding: var(--espacio-5) var(--espacio-4);
  border: var(--borde-grueso) dashed var(--color-linea-control);
  border-radius: var(--radio-tarjeta);
  background: var(--color-tarjeta);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--duracion) var(--curva), background-color var(--duracion) var(--curva);
}
.bienvenida-soltar:hover,
.bienvenida-soltar.encima,
.bienvenida-soltar:focus-within {
  border-color: var(--color-acento);
  background: var(--color-acento-tenue);
}
.bienvenida-soltar[aria-busy="true"] {
  cursor: progress;
  opacity: 0.7;
}
.bienvenida-soltar-icono {
  display: grid;
  place-items: center;
  width: var(--avatar-lg);
  height: var(--avatar-lg);
  border-radius: var(--radio-control);
  background: var(--color-acento-tenue);
  color: var(--color-acento-texto);
}
.bienvenida-ayuda {
  border: var(--borde-fino) solid var(--color-linea);
  border-radius: var(--radio-control);
  background: var(--color-tarjeta);
}
.bienvenida-ayuda > summary {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  min-height: var(--toque-min);
  padding: 0 var(--espacio-4);
  font-weight: var(--peso-fuerte);
  list-style: none;
  cursor: pointer;
}
.bienvenida-ayuda > summary::-webkit-details-marker {
  display: none;
}
.bienvenida-ayuda-flecha {
  margin-left: auto;
  transition: transform var(--duracion) var(--curva);
}
.bienvenida-ayuda[open] .bienvenida-ayuda-flecha {
  transform: rotate(180deg);
}
.bienvenida-ayuda > ol {
  display: grid;
  gap: var(--espacio-2);
  margin: 0;
  padding: 0 var(--espacio-4) var(--espacio-4) var(--espacio-8);
  color: var(--color-texto-suave);
}
.bienvenida-por-usted {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0 var(--espacio-3);
  padding: var(--espacio-3) var(--espacio-4);
  border-radius: var(--radio-control);
  background: var(--color-hundido);
}
.bienvenida-por-usted > .icono {
  flex: none;
  color: var(--color-acento-texto);
}
.bienvenida-por-usted > .boton {
  grid-column: 2;
  justify-self: start;
  padding-inline: 0;
  color: var(--color-acento-texto);
}
.bienvenida-archivos {
  display: grid;
  gap: var(--espacio-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.bienvenida-archivo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--espacio-3);
  padding: var(--espacio-3) var(--espacio-4);
  border: var(--borde-fino) solid var(--color-linea);
  border-radius: var(--radio-control);
  background: var(--color-tarjeta);
}
.bienvenida-archivo-marca {
  display: grid;
  place-items: center;
  width: var(--avatar-md);
  height: var(--avatar-md);
  border-radius: var(--radio-control);
  background: var(--aviso-exito-fondo);
  color: var(--color-ok);
}
.bienvenida-archivo.duda .bienvenida-archivo-marca {
  background: var(--color-acento-tenue);
  color: var(--color-acento-texto);
}
.bienvenida-archivo-texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  line-height: var(--interlineado-medio);
}
.bienvenida-archivo-texto > strong {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bienvenida-archivo-detalle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-1) var(--espacio-2);
  color: var(--color-texto-suave);
  font-size: var(--texto-sm);
}
.bienvenida-columnas[hidden] {
  display: none;
}
.bienvenida-archivo-texto > .bienvenida-columnas {
  min-height: var(--toque-min);
  padding-inline: 0;
  color: var(--color-acento-texto);
  font-size: var(--texto-sm);
}
[data-estilo~="cobre"] .bienvenida-archivo-tipo.entrada,
[data-estilo~="cobre"] .bienvenida-fecha select.entrada {
  width: auto;
  min-height: var(--toque-min);
  padding: 0 var(--espacio-3);
  border-radius: var(--radio-pastilla);
  font-size: var(--texto-sm);
}
[data-estilo~="cobre"] .bienvenida-archivo.duda .bienvenida-archivo-tipo.entrada {
  border-color: var(--color-marca);
}
.bienvenida-fecha {
  grid-column: 2 / -1;
}
.bienvenida-fecha[hidden] {
  display: none;
}
.bienvenida-fecha-pregunta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-1) var(--espacio-2);
  color: var(--color-texto-suave);
  font-size: var(--texto-sm);
}
.bienvenida-resumen > ul {
  display: grid;
  margin: var(--espacio-3) 0 0;
  padding: 0;
  list-style: none;
}
.bienvenida-resumen-fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--espacio-1) var(--espacio-3);
  padding: var(--espacio-3) 0;
  border-top: var(--borde-fino) solid var(--color-linea);
}
.bienvenida-resumen-fila:first-child {
  border-top: 0;
}
.bienvenida-resumen-fila > strong,
.bienvenida-resumen-fila > .cifra {
  font-weight: var(--peso-fuerte);
}
.bienvenida-resumen-fila > .texto-suave {
  grid-column: 1 / -1;
}
.bienvenida-resumen-fila.alerta > .texto-suave {
  color: var(--color-acento-texto);
}
.bienvenida-resumen .tarjeta-titulo > .icono {
  color: var(--color-ok);
}
.bienvenida-importando {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
}
.bienvenida-barra {
  height: var(--alto-barra-importar);
  overflow: hidden;
  border-radius: var(--radio-pastilla);
  background: var(--color-linea-control);
}
.bienvenida-barra-llena {
  display: block;
  width: var(--avance, 0%);
  height: 100%;
  border-radius: var(--radio-pastilla);
  background: var(--color-acento);
  transition: width var(--duracion) linear;
}
/* 2 · Sus servicios */
.bienvenida-tarjeta {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
}
.bienvenida-servicios {
  display: grid;
  gap: var(--espacio-2);
}
/* En el celular, el nombre arriba (con quitar) y el precio y los minutos
   abajo; en pantalla ancha, todo en un renglón con su encabezado. */
.bienvenida-servicio {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--espacio-2);
  padding-top: var(--espacio-3);
  border-top: var(--borde-fino) solid var(--color-linea);
}
.bienvenida-servicio-nombre {
  grid-column: 1 / 3;
}
.bienvenida-servicio > .boton-icono {
  grid-column: 3;
  grid-row: 1;
}
.bienvenida-servicio-precio,
.bienvenida-servicio-minutos {
  grid-row: 2;
}
[data-estilo~="cobre"] .bienvenida-servicio-minutos > .entrada {
  padding-left: var(--espacio-4);
  padding-right: calc(var(--espacio-4) * 2.75);
}
.bienvenida-servicio-cabeza {
  display: none;
  color: var(--color-texto-tenue);
  font-size: var(--texto-sm);
}
.bienvenida-servicios > .bienvenida-servicio:nth-child(2) {
  padding-top: 0;
  border-top: 0;
}
.bienvenida-servicio.quitado .entrada {
  opacity: 0.5;
  text-decoration: line-through;
}
/* IA 4: lo que no venía claro en la foto, marcado y con su nota (no solo
   el color). */
.bienvenida-servicio .entrada-revisar {
  border-color: var(--aviso-atencion);
}
.bienvenida-servicio-nota {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--aviso-atencion);
  font-size: var(--texto-sm);
}
.bienvenida-servicio.quitado .bienvenida-servicio-nota {
  display: none;
}
.bienvenida-servicios[aria-busy="true"] {
  opacity: 0.5;
  pointer-events: none;
}
.bienvenida-foto {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0 var(--espacio-3);
  padding: var(--espacio-3) var(--espacio-4);
  border-radius: var(--radio-control);
  background: var(--color-hundido);
}
.bienvenida-foto > .icono {
  margin-top: var(--espacio-1);
  color: var(--color-acento-texto);
}
.bienvenida-foto-cuerpo {
  display: grid;
  gap: var(--espacio-2);
}
.bienvenida-foto-texto {
  margin: 0;
}
.bienvenida-foto-texto.atencion {
  color: var(--aviso-atencion);
}
.bienvenida-foto-botones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-2);
}
.bienvenida-foto-botones:empty {
  display: none;
}
@media (min-width: 640px) {
  .bienvenida-servicio {
    grid-template-columns: minmax(0, 1fr) var(--columna-precio) var(--columna-minutos) auto;
    padding-top: 0;
    border-top: 0;
  }
  /* Cada pieza en su columna: con renglón fijo y columna libre, el precio
     y los minutos se acomodaban antes que el nombre. */
  .bienvenida-servicio-nombre {
    grid-column: 1;
    grid-row: 1;
  }
  .bienvenida-servicio > .boton-icono {
    grid-column: 4;
  }
  .bienvenida-servicio-precio,
  .bienvenida-servicio-minutos {
    grid-row: 1;
  }
  .bienvenida-servicio-precio {
    grid-column: 2;
  }
  .bienvenida-servicio-minutos {
    grid-column: 3;
  }
  .bienvenida-servicio-cabeza {
    display: grid;
  }
}
/* 3 · Su horario */
.bienvenida-dia {
  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-top: var(--borde-fino) solid var(--color-linea);
}
.bienvenida-dia:first-child {
  border-top: 0;
}
.bienvenida-dia-nombre {
  flex-direction: row-reverse;
  justify-content: flex-end;
}
.bienvenida-horas {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--espacio-2);
  width: 100%;
  color: var(--color-texto-suave);
}
.bienvenida-horas[hidden] {
  display: none;
}
[data-estilo~="cobre"] .bienvenida-horas > .entrada {
  width: 100%;
  min-width: 0;
  padding: 0 var(--espacio-2);
  color: var(--color-texto);
}
@media (min-width: 640px) {
  .bienvenida-horas {
    width: auto;
  }
}
/* 4 · Su equipo */
.bienvenida-equipo {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bienvenida-persona {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  padding: var(--espacio-2) 0;
  border-top: var(--borde-fino) solid var(--color-linea);
}
.bienvenida-persona:first-child {
  border-top: 0;
}
.bienvenida-persona-texto {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: var(--interlineado-medio);
}
.bienvenida-agregar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--espacio-2);
  padding-top: var(--espacio-2);
}
/* 5 · ¡Listo! */
.bienvenida-listo {
  align-items: center;
  text-align: center;
}
.bienvenida-sello {
  display: grid;
  place-items: center;
  width: var(--sello-listo);
  height: var(--sello-listo);
  border-radius: var(--radio-tarjeta);
  background: var(--color-marca);
  color: var(--color-sobre-marca);
  box-shadow: 0 0 0 var(--espacio-2) var(--color-marca-anillo);
}
.bienvenida-sello > .icono {
  width: 50%;
  height: 50%;
}
.bienvenida-enlace {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  width: 100%;
  padding: var(--espacio-1) var(--espacio-1) var(--espacio-1) var(--espacio-4);
  border: var(--borde-fino) solid var(--color-linea-control);
  border-radius: var(--radio-pastilla);
  background: var(--color-tarjeta);
  text-align: left;
}
.bienvenida-enlace-texto {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bienvenida-hecho {
  display: grid;
  gap: var(--espacio-2);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}
.bienvenida-hecho > li {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  color: var(--color-texto-suave);
}
.bienvenida-hecho .icono {
  color: var(--color-ok);
}
.bienvenida-listo .bienvenida-botones {
  justify-content: center;
}
.bienvenida-listo .bienvenida-botones > .boton-principal {
  margin: 0;
}

/* ── "Primeros pasos" en la agenda ──
   Cerrada: el avance y el paso que sigue (no le quita lugar a la rejilla).
   Abierta: los tres grupos (en tres columnas en computadora); si no cabe,
   se desliza dentro, para que la agenda siga a la vista. */
.primeros-zona {
  flex: none;
}
.primeros-zona:empty {
  display: none;
}
.primeros {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
  padding: var(--espacio-4);
}
.primeros.abierta {
  max-height: var(--alto-primeros-abierta);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.primeros-cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-3);
}
.primeros-botones {
  display: flex;
  flex: none;
  gap: var(--espacio-1);
}
.primeros-abrir > .icono {
  transition: transform var(--duracion) var(--curva);
}
.primeros-abrir[aria-expanded="true"] > .icono {
  transform: rotate(180deg);
}
.primeros-barra {
  height: var(--alto-barra-importar);
  overflow: hidden;
  border-radius: var(--radio-pastilla);
  background: var(--color-hundido);
}
.primeros-barra-llena {
  display: block;
  width: var(--avance, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--color-marca);
  transition: width var(--duracion-crecer) var(--curva);
}
.primeros-siguiente {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  min-height: var(--toque-min);
  padding: var(--espacio-3) var(--espacio-2) var(--espacio-3) var(--espacio-4);
  border: var(--borde-fino) solid var(--color-linea);
  border-radius: var(--radio-control);
  background: var(--color-hundido);
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.primeros-siguiente-texto {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}
.primeros-tiempo {
  flex: none;
  margin-left: auto;
  color: var(--color-texto-suave);
  font-size: var(--texto-sm);
  white-space: nowrap;
}
.primeros-grupos {
  display: grid;
  gap: var(--espacio-3);
}
.primeros-grupo > ul {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.primeros-grupo-titulo {
  margin: 0 0 var(--espacio-1);
  color: var(--color-texto-suave);
  font-size: var(--texto-sm);
  font-weight: var(--peso-normal);
}
.primeros-paso {
  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: none;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duracion) var(--curva);
}
@media (hover: hover) {
  .primeros-paso:hover {
    background: var(--color-hundido);
  }
}
.primeros-marca {
  display: grid;
  flex: none;
  place-items: center;
  width: var(--icono-lg);
  height: var(--icono-lg);
  border: var(--borde-grueso) solid var(--color-linea-control);
  border-radius: var(--radio-pastilla);
}
.primeros-marca > .icono {
  width: 70%;
  height: 70%;
}
.primeros-paso.hecho .primeros-marca {
  border-color: transparent;
  background: var(--aviso-exito-fondo);
  color: var(--color-ok);
}
.primeros-paso-nombre {
  min-width: 0;
}
.primeros-paso.hecho .primeros-paso-nombre {
  color: var(--color-texto-suave);
  text-decoration: line-through;
  text-decoration-color: var(--color-linea-control);
}
.primeros-pie {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
  padding-top: var(--espacio-3);
  border-top: var(--borde-fino) solid var(--color-linea);
}
.primeros-acomodar {
  gap: var(--espacio-2);
}
.primeros-punto {
  flex: none;
  width: var(--espacio-2);
  height: var(--espacio-2);
  border-radius: var(--radio-pastilla);
  background: var(--color-marca);
}
.primeros-felicita {
  align-items: center;
  text-align: center;
}
.primeros-sello {
  display: grid;
  place-items: center;
  width: var(--avatar-md);
  height: var(--avatar-md);
  border-radius: var(--radio-control);
  background: var(--color-marca);
  color: var(--color-sobre-marca);
}
.primeros-instrucciones {
  display: grid;
  gap: var(--espacio-2);
  margin: var(--espacio-3) 0;
  padding-left: var(--espacio-5);
}
.primeros-acomodar-lista {
  display: grid;
  margin: var(--espacio-3) 0 0;
  padding: 0;
  list-style: none;
}
.primeros-acomodar-cita {
  display: grid;
  gap: var(--espacio-2);
  padding: var(--espacio-3) 0;
  border-top: var(--borde-fino) solid var(--color-linea);
}
.primeros-acomodar-cita.hecha .primeros-acomodar-texto {
  opacity: 0.5;
  text-decoration: line-through;
}
.primeros-acomodar-texto {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.primeros-acomodar-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
}
@media (min-width: 640px) {
  .primeros-acomodar-cita {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
}
@media (min-width: 640px) {
  .primeros-grupos {
    grid-template-columns: repeat(auto-fit, minmax(var(--ancho-grupo-primeros), 1fr));
    gap: var(--espacio-3) var(--espacio-8);
    align-items: start;
  }
}

/* ── El recorrido ──
   La tapa no deja tocar la pantalla; el hueco deja ver lo que se explica
   (su sombra enorme es el velo) con el filete naranja; el globo va abajo,
   arriba o a un lado (data-lugar). JS solo pone --arriba, --izquierda,
   --ancho, --alto, --x y --y. */
.recorrido {
  position: fixed;
  inset: 0;
  z-index: var(--capa-recorrido);
  pointer-events: none;
}
.recorrido-tapa {
  position: absolute;
  inset: 0;
  pointer-events: auto;
}
.recorrido-hueco {
  position: fixed;
  top: calc(var(--arriba) - var(--margen-recorrido));
  left: calc(var(--izquierda) - var(--margen-recorrido));
  width: calc(var(--ancho) + var(--margen-recorrido) * 2);
  height: calc(var(--alto) + var(--margen-recorrido) * 2);
  border-radius: var(--radio-tarjeta);
  box-shadow:
    0 0 0 var(--alcance-velo-recorrido) var(--velo-recorrido),
    0 0 0 var(--borde-grueso) var(--color-marca);
  transition:
    top var(--duracion-mover) var(--curva-salida),
    left var(--duracion-mover) var(--curva-salida),
    width var(--duracion-mover) var(--curva-salida),
    height var(--duracion-mover) var(--curva-salida);
}
.recorrido-globo {
  position: fixed;
  top: var(--y);
  left: clamp(var(--margen-pantalla), var(--x), calc(100% - var(--margen-pantalla) - var(--ancho-globo-recorrido)));
  display: flex;
  flex-direction: column;
  gap: var(--espacio-1);
  width: var(--ancho-globo-recorrido);
  margin: var(--espacio-3) 0;
  padding: 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-3);
  pointer-events: auto;
  transition: top var(--duracion-mover) var(--curva-salida), left var(--duracion-mover) var(--curva-salida);
}
.recorrido-globo[data-lugar="arriba"] {
  top: auto;
  bottom: var(--y);
}
.recorrido-globo[data-lugar="lado"] {
  left: var(--x);
  margin: 0 var(--espacio-3);
}
.recorrido-titulo {
  margin: 0;
  font-weight: var(--peso-fuerte);
}
.recorrido-texto {
  margin: 0;
  color: var(--color-texto-suave);
}
.recorrido-pie {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  margin-top: var(--espacio-3);
}
.recorrido-cuenta {
  color: var(--color-texto-suave);
  font-size: var(--texto-sm);
}
.recorrido-pie > .boton-principal {
  margin-left: auto;
}
.recorrido.quieto .recorrido-hueco,
.recorrido.quieto .recorrido-globo {
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .recorrido-hueco,
  .recorrido-globo,
  .primeros-barra-llena,
  .primeros-abrir > .icono {
    transition: none;
  }
}

/* ── Ascend: la barra de XP dentro del tablero en chico (entrar y Hoy) ── */
.acceso-progreso,
[data-estilo~="tablero"] .acceso-progreso {
  margin: 0;
  border-radius: var(--radio-pastilla);
}
.acceso-progreso .progreso-relleno {
  display: block;
  border-radius: var(--radio-pastilla);
}

/* ─── Ascend: Hoy (sub-etapa 1c) ──────────────────────────────────────
   Arriba el nivel con su barra de XP, monedas, racha y lo hecho hoy;
   abajo los hábitos y las tareas que se marcan (como "Primeros pasos"). */
.hoy-progreso {
  gap: var(--espacio-3);
}
.hoy-nivel {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--espacio-1) var(--espacio-3);
}
.hoy-nivel-numero {
  margin: 0;
  font-family: var(--fuente-titulo);
  font-size: var(--texto-2xl);
  font-weight: var(--peso-titulo);
  letter-spacing: var(--letras-titulo);
}
.hoy-nivel-xp {
  margin: 0;
  font-family: var(--fuente-cifras);
  font-variant-numeric: tabular-nums;
  color: var(--color-texto-suave);
}
.hoy-barra,
[data-estilo~="tablero"] .hoy-barra {
  height: var(--espacio-2);
  margin: 0;
  border-radius: var(--radio-pastilla);
}
/* Con ancho y no con escala: escalada, la punta redonda se aplasta. */
.hoy-barra .progreso-relleno {
  display: block;
  width: calc(var(--avance, 0) * 100%);
  border-radius: var(--radio-pastilla);
  transform: none;
  transition: width var(--duracion-crecer) var(--curva);
}
.hoy-datos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--espacio-3);
  padding-top: var(--espacio-3);
  border-top: var(--borde-fino) solid var(--color-linea);
}
.hoy-datos .dato-valor {
  font-size: var(--texto-md);
}
.hoy-cambio {
  animation: hoy-cambio var(--duracion-cifra) var(--curva-resorte);
}
@keyframes hoy-cambio {
  40% { transform: scale(1.12); color: var(--color-acento-texto); }
}

/* Un hábito o una tarea: la marca redonda, el nombre y lo que da. */
.pendiente {
  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-4);
  border: 0;
  border-top: var(--borde-fino) solid var(--color-linea);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--duracion) var(--curva);
}
.hoy-lista > li:first-child > .pendiente {
  border-top: 0;
}
@media (hover: hover) {
  .pendiente:hover {
    background: var(--color-hundido);
  }
}
.pendiente-marca {
  display: grid;
  flex: none;
  place-items: center;
  width: var(--icono-lg);
  height: var(--icono-lg);
  border: var(--borde-grueso) solid var(--color-linea-control);
  border-radius: var(--radio-pastilla);
  color: transparent;
  transition: background-color var(--duracion) var(--curva), border-color var(--duracion) var(--curva), transform var(--duracion) var(--curva-resorte);
}
.pendiente-marca > .icono {
  width: 70%;
  height: 70%;
}
.pendiente.hecho .pendiente-marca {
  border-color: transparent;
  background: var(--aviso-exito-fondo);
  color: var(--color-ok);
  transform: scale(1.08);
}
.pendiente-texto {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}
.pendiente-nombre {
  font-weight: var(--peso-fuerte);
  overflow-wrap: anywhere;
}
.pendiente.hecho .pendiente-nombre {
  color: var(--color-texto-suave);
  text-decoration: line-through;
  text-decoration-color: var(--color-linea-control);
}
.pendiente-detalle {
  font-size: var(--texto-sm);
  color: var(--color-texto-suave);
}
.pendiente-detalle > .atrasada {
  color: var(--aviso-error);
}
.pendiente-premio {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-end;
  font-family: var(--fuente-cifras);
  font-variant-numeric: tabular-nums;
  font-size: var(--texto-sm);
  white-space: nowrap;
}
.pendiente-premio > :last-child {
  color: var(--color-texto-suave);
}
.pendiente.hecho .pendiente-premio {
  color: var(--color-ok);
}
.pendiente.trabajando {
  cursor: progress;
}
@media (prefers-reduced-motion: reduce) {
  .hoy-cambio { animation: none; }
  .pendiente-marca,
  .hoy-barra .progreso-relleno { transition: none; }
}

/* ─── Ascend: Hábitos, Tareas y Áreas (sub-etapa 1d) ──────────────── */
.pantalla-lista .lista .fila-detalle {
  white-space: normal;
}
.fila-hecha .fila-titulo {
  color: var(--color-texto-suave);
  text-decoration: line-through;
  text-decoration-color: var(--color-linea-control);
}
/* El emoji del área sobre un tinte de su color. */
.area-insignia {
  display: grid;
  flex: none;
  place-items: center;
  width: var(--avatar-sm);
  height: var(--avatar-sm);
  border: var(--borde-grueso) solid var(--color-area);
  border-radius: var(--radio-celda);
  background: color-mix(in srgb, var(--color-area) 18%, var(--color-tarjeta));
  font-size: var(--texto-md);
}
/* Los siete días: fichas redondas de una letra. */
.fichas-dias > .ficha {
  width: var(--toque-min);
  padding: 0;
}
.fichas-emoji > .ficha {
  min-width: var(--toque-min);
  padding: 0;
  font-size: var(--texto-md);
}
.entrada-emoji {
  max-width: calc(var(--toque-min) * 2);
  font-size: var(--texto-lg);
}
/* Una muestra de color: el círculo es el color; la escogida lleva anillo.
   Con :root delante, para ganarle a las fichas de Cobre. */
:root .fichas > .ficha-color,
:root .fichas > .ficha-color:hover,
:root .fichas > .ficha-color[aria-pressed="true"] {
  width: var(--toque-min);
  padding: 0;
  border: var(--borde-grueso) solid var(--color-tarjeta);
  background: var(--color-area);
  box-shadow: 0 0 0 var(--borde-fino) var(--color-linea-control);
}
:root .fichas > .ficha-color[aria-pressed="true"] {
  box-shadow: 0 0 0 var(--borde-grueso) var(--color-texto);
}

/* ─── Ascend: Tienda y archivados (sub-etapa 2a) ──────────────────── */
.tienda-saldo {
  gap: var(--espacio-1);
}
.tienda-saldo-cifra {
  font-family: var(--fuente-titulo);
  font-size: var(--texto-2xl);
  font-weight: var(--peso-titulo);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--letras-titulo);
}
.tienda-deuda {
  color: var(--aviso-error);
}
.tienda-precio {
  font-family: var(--fuente-cifras);
  font-variant-numeric: tabular-nums;
  color: var(--color-texto-suave);
}
/* El premio (se toca para cambiarlo) y a la derecha "Canjear", sin bajar de renglón. */
.pantalla-lista .tienda-fila {
  flex-wrap: nowrap;
}
.tienda-fila > .fila-acciones {
  flex: none;
}
.tienda-emoji {
  --color-area: var(--color-linea-control);
}
.habitos-archivados {
  align-self: flex-start;
}