/* LAS CARAS — los estilos propios de cada pantalla, ahora que las pantallas sólo componen piezas.
   Una hoja con alcance (`X.razor.css`) no alcanza a lo que pinta una pieza, así que lo propio de
   una cara vive acá, con el nombre de la cara como prefijo BEM (`muestra__…`, `terminal__…`).
   ⚠ Lo que se repita entre dos caras no va acá: se vuelve parámetro de la pieza. */

/* ── vitrina de piezas ─────────────────────────────────────────────────────────────────────── */
.muestra { gap: 10px; min-width: 0; }
.muestra__para { margin: 0; }
.muestra__escenario {
  gap: 10px;
  padding: 12px;
  border: 1px dashed var(--borde);
  border-radius: var(--radio-tarjeta, 14px);
  background: var(--fondo);
}
.muestra__uso {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--radio-control, 12px);
  background: var(--elevada);
  color: var(--texto);
  font-family: var(--letra-cifras, ui-monospace, monospace);
  font-size: .74rem;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ── terminal del mostrador ─────────────────────────────────────────────────────────────── */
.terminal {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.terminal__quien {
  margin: 0;
  opacity: .84;
}

.terminal .terminal__cuerpo {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.terminal__tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.terminal__hoy {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--elevada);
  font-size: .84rem;
  color: var(--tenue);
}

.terminal .terminal__canjear {
  grid-column: 1 / -1;
  background: var(--primario);
  color: var(--sobre-primario);
}

.terminal .terminal__canjear:active {
  background: var(--primario-fuerte);
}

.terminal .terminal__canjear .tarj__sub,
.terminal .terminal__canjear .tarj__accion {
  color: inherit;
}

.terminal .tarj__titulo,
.terminal .tarj__sub {
  white-space: normal;
}

/* ⚠ Todas las caras reservan la barra inferior, incluidas las que se agreguen.
   El transform de #app mantiene los elementos fijos dentro del marco de escritorio. */
.terminal-shell .panel {
  bottom: calc(68px + env(safe-area-inset-bottom, 0px));
}

.terminal-shell__barra {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
}

.terminal__varios {
  flex: none;
  align-self: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: .8rem;
  font-weight: 700;
}

.terminal__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.terminal__fila {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border-radius: var(--radio-tarjeta, 14px);
  border: 1px solid var(--borde);
  background: var(--superficie);
}

.terminal__fila-nombre {
  font-weight: 700;
}

/* ── talonario e históricos ────────────────────────────────────────────────────────────────────── */
/* Conserva el aspecto del rótulo t-menor al usar Selector. */
.talonario .campo__rotulo[for="tal-sede"] {
  display: inline;
  margin-top: 0;
  font-size: var(--menor);
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
}

/* Reserva espacio para evitar saltos cuando cambia el aviso. */
.talonario__aviso {
  margin: 0;
  min-height: 1.4em;
  color: var(--tenue);
}

.talonario__aviso--falla {
  color: var(--error-texto);
}

.talonario__tapa {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  padding: 22px 16px;
  border: 1px dashed var(--borde-fuerte);
  border-radius: 16px;
  background: var(--elevada);
}

/* El mínimo permite una columna cuando no caben dos tickets. */
.talonario__rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 16px 12px;
}

.talonario__papel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--borde);
  border-radius: 14px;
  background: var(--superficie);
}

/* CodigoQr conserva crispEdges; aquí se dimensiona su SVG. */
.talonario .talonario__qr {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
}

.talonario__codigo {
  margin: 0;
  font-family: var(--letra-cifras);
  font-size: .82rem;
  letter-spacing: .04em;
  font-weight: 600;
  color: var(--texto);
}

/* Los tickets usados siguen visibles para identificarlos al reimprimir. */
.talonario__papel--usado {
  opacity: .45;
  border-style: dashed;
}

/* La altura fija permite expresar las barras en porcentajes. */
.historicos__barras {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 76px;
  padding-top: 4px;
}

.historicos__barra {
  flex: 1 1 0;
  min-width: 3px;
  background: var(--primario-tinte);
  border-radius: 3px 3px 0 0;
}

.historicos__barra--hoy {
  background: var(--primario);
}

.historicos__ejes {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}

.historicos__nota {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--borde);
  line-height: 1.45;
}

.historicos__aviso {
  margin: 0;
  min-height: 1.4em;
  color: var(--tenue);
}

.historicos__aviso--falla {
  color: var(--error-texto);
}

/* ── dar un código y corte ─────────────────────────────────────────────────────────────────────── */
/* El fondo blanco conserva el contraste del QR también en tema oscuro. */
.destape__papel {
  display: grid;
  place-items: center;
  gap: 12px;
  padding: 18px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--borde);
  box-shadow: 0 6px 24px rgb(0 0 0 / .10);
}

/* El QR crece con la pantalla, con un límite para tabletas en horizontal. */
.destape .destape__qr {
  width: 100%;
  max-width: 300px;
  height: auto;
  aspect-ratio: 1;
  display: block;
}

/* El espaciado facilita copiar el código; el color fijo contrasta con el papel blanco. */
.destape__codigo {
  margin: 0;
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: .16em;
  color: #201A1B;
}

/* El código vencido permanece visible para que se entienda el cambio de estado. */
.destape__papel--vencido {
  opacity: .32;
  filter: grayscale(1);
}

.destape__instruccion {
  margin: 14px 0 2px;
  text-align: center;
}

.destape__vencido {
  margin: 14px 0 2px;
  text-align: center;
  color: var(--falla);
}

/* Los números tabulares evitan saltos de ancho al actualizar los segundos. */
.destape__reloj {
  margin: 0 0 4px;
  text-align: center;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  color: var(--texto-tenue);
}

.destape__antes {
  margin: 6px 0 2px;
}

.destape__aviso {
  margin: 6px 0;
  min-height: 1.2em;
}

.destape__aviso--falla {
  color: var(--falla);
}

.corte__caja {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 14px;
  border: 1px solid var(--borde);
  border-radius: 16px;
  background: var(--superficie);
}

.corte__par {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: .95rem;
}

/* Sustituye el selector de b y conserva la tipografía y la negrita de las cifras. */
.corte__par .corte__cifra {
  font-family: var(--letra-cifras);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* El separador distingue los saldos del negocio de la actividad del turno. */
.corte__par--total {
  border-top: 1px solid var(--borde);
  padding-top: 10px;
  margin-top: 3px;
  font-weight: 700;
}

.corte__par--menor {
  font-size: .84rem;
  color: var(--tenue);
}

/* Reserva espacio aun sin texto para que los botones no salten al aparecer un aviso. */
.corte__aviso {
  margin: 0;
  min-height: 1.4em;
  color: var(--tenue);
}

.corte__aviso--falla {
  color: var(--error-texto);
}

/* ── canje y visor ─────────────────────────────────────────────────────────────────────────────── */
.mostrador__barra { gap: 12px; }

/* El pie conserva su alto; el espacio restante pertenece al visor. */
.mostrador__pie {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: visible;
}

/* Reserva el renglón vacío para evitar saltos al leer un código. */
.mostrador__aviso {
  margin: 0;
  min-height: 1.4em;
  color: var(--tenue);
}
.mostrador__aviso--falla { color: var(--error-texto); }

/* El nombre domina el careo para verificar a quién se entrega el premio. */
.careo {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 28px;
}
.careo p, .careo h2 { margin: 0; }
.careo__rotulo {
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--tenue);
}
.careo__dueno {
  font-size: clamp(34px, 9vw, 44px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.02em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.careo__premio {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border-radius: var(--radio-tarjeta);
  background: var(--elevada);
}
.careo__meta { letter-spacing: .06em; }
.careo__acciones { margin-top: auto; }

.acuse {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  background: var(--exito-tinte);
}
.acuse p, .acuse h2 { margin: 0; }
.acuse__disco {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--exito);
  color: #fff;
}
.acuse__rotulo {
  font-size: var(--minimo);
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--exito-texto);
}
.acuse__titulo {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
  text-wrap: balance;
}
.acuse__texto {
  font-size: var(--subtitulo);
  color: var(--exito-texto);
}
.acuse__acciones {
  width: 100%;
  max-width: 320px;
  margin-top: 10px;
}

/* min-height permite encoger el visor sin expulsar el pie en pantallas bajas. */
.visor {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
  /* El negro evita destellos mientras llega el primer cuadro de la cámara. */
  background: #000;
  display: grid;
  place-items: center;
}

.visor__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* La máscara deja visibles cuatro esquinas sin oscurecer la imagen. */
.visor__marco {
  position: absolute;
  inset: 50% 50%;
  width: min(66vw, 250px);
  height: min(66vw, 250px);
  transform: translate(-50%, -50%);
  border-radius: 18px;
  border: 3px solid rgb(255 255 255 / .9);
  -webkit-mask:
    linear-gradient(#000 0 0) top left    / 30% 30% no-repeat,
    linear-gradient(#000 0 0) top right   / 30% 30% no-repeat,
    linear-gradient(#000 0 0) bottom left / 30% 30% no-repeat,
    linear-gradient(#000 0 0) bottom right/ 30% 30% no-repeat;
  mask:
    linear-gradient(#000 0 0) top left    / 30% 30% no-repeat,
    linear-gradient(#000 0 0) top right   / 30% 30% no-repeat,
    linear-gradient(#000 0 0) bottom left / 30% 30% no-repeat,
    linear-gradient(#000 0 0) bottom right/ 30% 30% no-repeat;
  pointer-events: none;
}

.visor__barrido {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(min(66vw, 250px) - 28px);
  height: 2px;
  border-radius: 2px;
  background: rgb(255 255 255 / .85);
  box-shadow: 0 0 10px 1px rgb(255 255 255 / .55);
  --barrido: calc(min(66vw, 250px) / 2 - 14px);
  transform: translate(-50%, calc(-50% - var(--barrido)));
  animation: barrido 2.2s ease-in-out infinite alternate;
}
.visor__barrido {
  pointer-events: none;
}
@keyframes barrido {
  to { transform: translate(-50%, calc(-50% + var(--barrido))); }
}

/* La guía queda centrada si se solicita menos movimiento. */
@media (prefers-reduced-motion: reduce) {
  .visor__barrido {
    animation: none;
    transform: translate(-50%, -50%);
  }
}

.visor__linterna {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgb(255 255 255 / .55);
  background: rgb(0 0 0 / .35);
  color: #fff;
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
}
.visor__linterna--prendida {
  background: #fff;
  color: #000;
  border-color: #fff;
}

.visor__aviso {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 32px;
  text-align: center;
  color: rgb(255 255 255 / .78);
}
.visor__aviso p { margin: 0; line-height: 1.5; }

/* El contorno necesita contraste propio sobre el fondo negro de la cámara. */
.visor__aviso .btn--contorno {
  border-color: rgb(255 255 255 / .5);
  color: #fff;
}

.visor__campo {
  flex: 0 0 auto;
  padding: 12px 16px 0;
}

/* El aviso queda fuera de la fila para no desplazar sus botones. */
.visor__pegado {
  margin: 6px 0 0;
  color: var(--texto-tenue);
}

/* ── cuenta y favoritos ────────────────────────────────────────────────────────────────────────── */
.cuenta {
  gap: 14px;
}

.cuenta__subrotulo {
  margin: 6px 0 0 4px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sutil);
}

.cuenta__ficha {
  gap: 14px;
  padding: 18px;
}

.cuenta__disco {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--primario-tinte);
  color: var(--primario-fuerte);
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
}

.cuenta__par {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cuenta__plaza {
  gap: 6px;
}

.cuenta__cambiar {
  min-height: 24px;
  padding: 0 2px;
  font-size: var(--minimo);
}

.cuenta .interruptor {
  flex: none;
  width: 56px;
  min-height: var(--alto-tactil);
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.cuenta .interruptor:disabled {
  opacity: .5;
  cursor: default;
}

.cuenta .interruptor__riel {
  position: relative;
  width: 52px;
  height: 32px;
  border-radius: var(--radio-hoja, 16px);
  background: var(--borde-fuerte);
  transition: background-color .15s ease;
}

.cuenta .interruptor[aria-checked="true"] .interruptor__riel {
  background: var(--primario-fuerte);
}

.cuenta .interruptor__bolita {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--superficie);
  box-shadow: 0 1px 3px rgb(0 0 0 / .28);
  transition: transform .15s ease;
}

.cuenta .interruptor[aria-checked="true"] .interruptor__bolita {
  transform: translateX(20px);
}

.cuenta__regiones {
  gap: 10px;
}

.cuenta__hueco .vacio {
  padding: 18px 12px;
  gap: 6px;
}

.cuenta__hueco .vacio p {
  max-width: 32ch;
}

.cuenta__salidas {
  margin-top: 8px;
  gap: 8px;
}

.cuenta__version {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: 28px;
  text-align: center;
}

.cuenta__version-folio {
  margin: 0;
}

.cuenta__version p {
  margin: 0;
}

.cuenta__version-nueva {
  color: var(--primario);
  font-weight: 600;
}

.cuenta__correo {
  gap: 14px;
}

.cuenta__correo-tarjeta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
}

.cuenta__correo-h2 {
  margin: 0;
  font-family: var(--letra-display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.015em;
}

.cuenta__correo-lead {
  margin: 0;
  line-height: 1.5;
}

.cuenta__correo-falla {
  color: var(--error-texto);
}

.cuenta__muni {
  gap: 14px;
}

.cuenta__muni-tarjeta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
}

.cuenta__muni-h2 {
  margin: 0;
  font-family: var(--letra-display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.015em;
}

.cuenta__muni-lead {
  margin: 0;
  line-height: 1.5;
}

.cuenta__muni-nota {
  margin: 0;
  line-height: 1.5;
}

.cuenta__muni-falla {
  color: var(--error-texto);
}

.favs > .favs__seccion + .favs__seccion {
  margin-top: 8px;
}

.favs__seccion {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.favs__rotulo {
  margin: 0;
}

.favs__pie {
  margin: 0;
  line-height: 1.5;
}

.favs__aviso {
  margin: 0;
  color: var(--error-texto);
}

.favs__aviso--arriba {
  margin-bottom: 12px;
}

.favs__seccion .vacio {
  padding: 24px;
}

.fav--apagado .tarj__mini,
.fav--apagado .tarj__texto {
  opacity: .55;
}

.fav__sena {
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
}

.fav__sena--logo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--fav-logo) center / cover no-repeat;
}

.fav__marcar {
  flex: none;
  width: var(--alto-tactil);
  padding: 0;
}

.fav__marcar--puesto {
  border-color: transparent;
  background: var(--primario-tinte);
  color: var(--primario-fuerte);
}

/* ── inicio ────────────────────────────────────────────────────────────────────────────────────── */
.inicio {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.inicio .inicio__nota {
  margin: 0;
  line-height: 1.45;
}

.inicio .inicio__programa {
  margin: -4px 0 0;
}

.inicio .inicio__falla {
  margin: 0;
  align-items: flex-start;
  color: var(--error-texto);
}

.inicio .quien {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: var(--alto-tactil);
  padding: 4px 2px;
  border: 0;
  background: none;
  color: var(--sutil);
  font-family: inherit;
  font-size: var(--menor);
  text-align: start;
  cursor: pointer;
}

.inicio .quien:active {
  opacity: .8;
}

.inicio .quien__texto {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  color: var(--tenue);
}

.inicio .quien__nombre {
  font-weight: 600;
  color: var(--texto);
}

.inicio .quien__sep {
  color: var(--sutil);
}

.inicio .quien__premios {
  font-weight: 600;
  color: var(--primario);
}

.inicio .carrusel {
  display: flex;
  gap: 10px;
  margin: 0 -16px;
  padding: 2px 16px 6px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.inicio .carrusel::-webkit-scrollbar {
  display: none;
}

/* .foto mantiene la especificidad necesaria frente a la caja del componente. */
.inicio .foto.loseta__logo {
  width: 82%;
  height: 82%;
  background: transparent;
}

.inicio .foto.loseta__logo::before {
  background: transparent;
}

.inicio .plaza {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: start;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  color: var(--sutil);
}

.inicio .plaza:active {
  opacity: .8;
}

.inicio .plaza__texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.inicio .plaza__nombre {
  font-size: var(--cuerpo);
  font-weight: 700;
  color: var(--texto);
}

/* Icono recibe el color mediante Clase; no admite atributos style sueltos. */
.inicio .plaza .plaza__ico {
  color: var(--primario);
}

.inicio .escaneo {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 20px;
  border: 0;
  border-radius: var(--radio-hoja, 16px);
  background: var(--primario);
  color: var(--sobre-primario);
  text-align: start;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
}

.inicio .escaneo:active {
  opacity: .85;
}

.inicio .escaneo--oscuro {
  padding: 16px 18px;
  background: var(--texto);
  color: var(--fondo);
}

.inicio .escaneo__texto {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.inicio .escaneo__titulo {
  font-size: var(--subtitulo);
  font-weight: 700;
}

.inicio .escaneo__sub {
  font-size: var(--menor);
  opacity: .82;
}

.inicio .escaneo .escaneo__chevron {
  opacity: .7;
}

.inicio .correo {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  background: var(--primario-lavado);
  border-color: var(--primario-tinte);
  color: var(--sutil);
  font-family: inherit;
  font-size: inherit;
  text-align: start;
  cursor: pointer;
}

.inicio .correo:active {
  opacity: .85;
}

.inicio .correo .correo__ico {
  color: var(--primario);
  flex: none;
}

.inicio .correo__texto {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.inicio .correo__titulo {
  font-size: 14px;
  font-weight: 700;
  color: var(--texto);
}

.inicio .correo__sub {
  color: var(--tenue);
  line-height: 1.4;
}

.inicio .patro {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
}

.inicio .patro__sena {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  object-fit: contain;
  background: var(--elevada);
  display: grid;
  place-items: center;
  color: var(--primario-fuerte);
  font-family: var(--letra-display);
  font-size: 14px;
  font-weight: 800;
}

.inicio .patro__texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.inicio .patro__nombre {
  font-size: 14px;
  font-weight: 600;
}

.inicio .patro__lema {
  line-height: 1.4;
}

.inicio .cerca__sena {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  object-fit: contain;
  background: var(--elevada);
  display: grid;
  place-items: center;
  color: var(--primario-fuerte);
  font-family: var(--letra-display);
  font-size: 15px;
  font-weight: 800;
}

.inicio .cifras {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.inicio .cifras--tres {
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}

.inicio .cifra {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  /* Permite que el texto se recorte sin ensanchar una columna del grid. */
  min-width: 0;
}

.inicio .cifras--tres .cifra {
  padding: 12px 10px;
}

.inicio .cifra__rotulo {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--tenue);
}

.inicio .cifras--tres .cifra__rotulo {
  gap: 5px;
}

.inicio .cifras--tres .cifra__rotulo .t-minimo {
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inicio .cifra__n {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--texto);
}

/* El cero no lleva color de aviso. */
.inicio .cifra__n--aviso {
  color: var(--aviso);
}

.inicio .inicio__boletos {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.inicio .programa-portada {
  padding: 18px 4px 22px;
}

.inicio .programa-portada__territorio {
  display: block;
  color: var(--tenue);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.inicio .programa-portada h2 {
  font-family: var(--letra-display);
  font-size: 36px;
  font-weight: 750;
  line-height: 1.08;
  letter-spacing: -.045em;
  margin: 12px 0;
  max-width: 11ch;
  text-wrap: balance;
}

.inicio .programa-portada p {
  color: var(--tenue);
  font-size: 14px;
  line-height: 1.6;
  max-width: 36ch;
  margin: 0;
}

.inicio .plaza {
  padding: 22px 18px;
  border: 1px solid var(--borde);
  box-shadow: none;
  background: var(--superficie);
  border-radius: 18px;
}

.inicio .plaza__nombre {
  font-size: 18px;
  letter-spacing: -.02em;
}

/* Se conserva el orden de las sobrescrituras para mantener la cascada original. */
.inicio .escaneo {
  border-radius: 18px;
  padding: 20px 18px;
  box-shadow: none;
}

.inicio .cifras {
  gap: 8px;
}

.inicio .cifra {
  border-radius: 16px;
  padding: 14px 10px;
}

.inicio .cifra__n {
  font-family: var(--letra);
  font-size: 25px;
}

.inicio .cerca__linea {
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.inicio .cerca__programa {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .03em;
  background: color-mix(in srgb, var(--marca, var(--primario)) 10%, transparent);
  color: color-mix(in srgb, var(--marca, var(--primario)) 80%, var(--texto));
}

.inicio .cerca__negocio {
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.inicio .cerca__negocio:active {
  background: var(--elevada);
}

.inicio .cerca__ir {
  flex: none;
  color: var(--tenue);
}

.inicio .boleto__cuerpo {
  padding: 0 14px;
}

.inicio .cupones {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── puerta ────────────────────────────────────────────────────────────────────────────────────── */
.puerta .puerta__cuerpo {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 16px calc(24px + env(safe-area-inset-bottom, 0px));
}

/* La portada transparente deja visible la imagen que proporciona Banda. */
.puerta .banda.portada {
  flex: none;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: calc(22px + env(safe-area-inset-top, 0px)) 22px 26px;
  background: transparent;
  color: var(--sobre-banda, var(--sobre-cabecera));
}

.puerta .portada::before {
  content: "";
  position: absolute;
  right: -34px;
  top: -34px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  border: 18px solid rgb(255 255 255 / .07);
  pointer-events: none;
}

.puerta .portada__fila {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}

.puerta .portada .portada__sello {
  --emblema-fondo: var(--fondo);
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--fondo);
  box-shadow: 0 0 0 3px rgb(255 255 255 / .18);
}

.puerta .banda.portada--con-foto {
  background:
    linear-gradient(
      100deg,
      color-mix(in srgb, var(--cabecera) 86%, transparent) 0%,
      color-mix(in srgb, var(--cabecera) 58%, transparent) 60%,
      color-mix(in srgb, var(--cabecera) 70%, transparent) 100%
    ),
    var(--cabecera-portada) center 40% / cover no-repeat;
}

.puerta .portada--con-foto::before {
  opacity: .6;
}

.puerta .portada__marca {
  font-weight: 600;
  font-size: 15px;
  opacity: .92;
}

.puerta .portada__lema {
  margin: 0;
  position: relative;
  font-size: 27px;
  max-width: 19ch;
  text-wrap: balance;
}

.puerta .portada__bajada {
  margin: 0;
  position: relative;
  font-size: var(--menor);
  line-height: 1.5;
  opacity: .9;
  max-width: 34ch;
}

.puerta .puerta__tarjeta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  box-shadow: 0 1px 2px rgb(0 0 0 / .06);
}

.puerta .puerta__h2 {
  margin: 0;
  font-family: var(--letra-display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.015em;
}

.puerta .puerta__lead {
  margin: 0;
  line-height: 1.5;
}

.puerta .puerta__lead strong {
  color: var(--texto);
}

.puerta .puerta__nota {
  margin: 0;
  line-height: 1.5;
}

.puerta .puerta__encabezado {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 2px 2px 0;
}

.puerta .puerta__estado {
  margin: 0;
  line-height: 1.45;
  color: var(--tenue);
  align-items: flex-start;
}

.puerta .puerta__estado--falla {
  color: var(--error-texto);
}

.puerta .puerta__lada {
  display: inline-flex;
  align-items: center;
  min-height: var(--alto-tactil);
  padding: 0 14px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-control);
  font-size: var(--texto-campo);
  font-weight: 600;
  color: var(--texto);
  background: var(--superficie);
}

.puerta .puerta__promesa {
  gap: 10px;
  padding: 16px 18px;
}

.puerta .puerta__lista {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.puerta .puerta__lista li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--menor);
}

.puerta .puerta__lista li::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--primario);
  flex: none;
}

.puerta .celdas {
  position: relative;
  display: flex;
  gap: 7px;
  margin-top: 4px;
}

.puerta .celda {
  flex: 1;
  height: 54px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-control);
  background: var(--superficie);
  display: grid;
  place-items: center;
  font-family: var(--letra-cifras);
  font-size: 22px;
  font-weight: 700;
  color: var(--texto);
}

.puerta .celda--llena {
  border-color: var(--texto);
}

.puerta .celda--activa {
  border-color: var(--primario);
  box-shadow: inset 0 0 0 1px var(--primario);
}

.puerta .celda--activa:empty::after {
  content: "";
  width: 2px;
  height: 22px;
  background: var(--primario);
  animation: puerta-late 1s steps(1) infinite;
}

@keyframes puerta-late {
  50% { opacity: 0; }
}

.puerta .celdas__campo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border: 0;
  padding: 0;
  margin: 0;
  /* ⚠ Mantener 16px evita el zoom al enfocar en iOS. */
  font-size: 16px;
  color: transparent;
  background: transparent;
  caret-color: transparent;
  cursor: text;
}

.puerta .puerta__reloj {
  min-height: 20px;
}

.puerta .bienvenida {
  align-items: center;
  text-align: center;
  padding: 26px 20px 20px;
  margin-top: 6px;
}

.puerta .bienvenida__disco {
  width: 62px;
  height: 62px;
  border-radius: var(--radio-hoja, 16px);
  background: var(--texto);
  color: var(--fondo);
  display: grid;
  place-items: center;
  font-family: var(--letra-display);
  font-size: 22px;
  font-weight: 800;
}

.puerta .bienvenida__pasos {
  margin: 4px 0 6px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  text-align: start;
}

.puerta .bienvenida__pasos li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--menor);
  line-height: 1.4;
}

.puerta .bienvenida__pasos li span {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--primario-tinte);
  color: var(--primario-fuerte);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
}

/* ── bazar ─────────────────────────────────────────────────────────────────────────────────────── */
/* Los márgenes no deben sumarse a la separación de las pilas. */
.bazar p,
.bazar h2,
.bazar-hoja p,
.bazar-hoja h2 {
  margin: 0;
}

.bazar {
  gap: 14px;
}

.bazar__segmento {
  display: flex;
  gap: 4px;
  padding: 6px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta);
}

.bazar__seg {
  flex: 1;
  min-height: 40px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--tenue);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}

/* El fondo distingue la pestaña activa además del color del texto. */
.bazar__seg--activa {
  background: var(--seccion-bazar-tinte);
  color: var(--seccion-bazar-texto);
  font-weight: 700;
}

/* La cruz nativa no recarga los resultados; se conserva sólo la propia. */
.bazar .buscador input::-webkit-search-cancel-button {
  display: none;
}

.bazar__x {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--radio-hoja, 16px);
  background: none;
  color: var(--sutil);
  cursor: pointer;
}

.bazar .tarj--bazar {
  --tarj-tinte: var(--seccion-bazar-tinte);
  --tarj-texto: var(--seccion-bazar-texto);
}

/* Tarjeta y corazón son hermanos; el borde pertenece al contenedor. */
.bazar__par {
  gap: 0;
  padding: 0 6px 0 0;
}

.bazar__par .tarj {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  border-radius: 0;
}

.bazar__corazon {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  border: 1px solid var(--borde);
  background: var(--superficie);
  color: var(--tenue);
  cursor: pointer;
}

.bazar__corazon--puesto {
  border-color: transparent;
  background: var(--seccion-bazar-tinte, var(--primario-lavado));
  color: var(--seccion-bazar-texto, var(--primario-fuerte));
}

.bazar__corazon:disabled {
  opacity: .6;
}

.bazar__pie--ojo {
  color: var(--seccion-bazar-texto);
}

.bazar__vender {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px;
  border: 1px dashed var(--seccion-bazar);
  border-radius: var(--radio-tarjeta);
  background: var(--seccion-bazar-tinte);
  color: var(--seccion-bazar-texto);
}

.bazar__vender-texto {
  gap: 4px;
}

.bazar__vender .t-minimo {
  opacity: .85;
  line-height: 1.45;
}

.bazar__rotulo {
  font-weight: 700;
  margin-top: 6px;
}

.bazar__falla-suelta {
  color: var(--error-texto);
  line-height: 1.45;
}

.bazar__saldo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px;
  border-radius: var(--radio-hoja, 16px);
  background: var(--seccion-bazar-tinte);
  color: var(--seccion-bazar-texto);
}

.bazar__saldo-rotulo {
  opacity: .85;
}

.bazar__saldo-cifra {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
}

.bazar__saldo-pie {
  opacity: .8;
}

/* Los cargos conservan el color de texto; las entradas llevan el acento. */
.bazar .bazar__mov .tarj__dato {
  color: var(--texto);
}

.bazar-hoja__sena {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--seccion-bazar-tinte);
  color: var(--seccion-bazar-texto);
}

.bazar-hoja__titulo {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.15;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.bazar-hoja__desc {
  line-height: 1.5;
}

.bazar-hoja__datos {
  gap: 8px;
}

.bazar-hoja__rotulo {
  flex: none;
  width: 130px;
}

.bazar-hoja__lamina {
  gap: 6px;
  padding: 14px 12px;
}

.bazar-hoja__precio {
  font-size: 22px;
  font-weight: 800;
  color: var(--seccion-bazar-texto, var(--primario-fuerte));
  font-variant-numeric: tabular-nums;
}

.bazar-hoja__wa {
  text-decoration: none;
  text-align: center;
}

.bazar-hoja__guardar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
}

.bazar-hoja__guardar--puesto {
  background: var(--seccion-bazar-tinte, var(--primario-lavado));
  border-color: transparent;
}

/* Sin imagen disponible, el recuadro conserva su seña. */
.bazar__mini {
  flex: none;
  width: 102px;
  height: 102px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--seccion-bazar-tinte);
}

.bazar__mini--grande {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  max-height: 340px;
  border-radius: var(--radio-tarjeta);
}

.bazar-hoja__fotos {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  margin: 0 -16px;
  padding: 0 16px 4px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.bazar-hoja__fotos::-webkit-scrollbar {
  display: none;
}

.bazar-hoja__una {
  flex: 0 0 88%;
  scroll-snap-align: start;
}

.bazar-hoja__una .bazar__mini--grande {
  width: 100%;
}

@media (pointer: fine) {
  .bazar-hoja__fotos {
    scrollbar-width: thin;
    scrollbar-color: var(--borde-fuerte) transparent;
    padding-bottom: 8px;
  }

  .bazar-hoja__fotos::-webkit-scrollbar {
    display: block;
    height: 6px;
  }

  .bazar-hoja__fotos::-webkit-scrollbar-thumb {
    background: var(--borde-fuerte);
    border-radius: 3px;
  }
}

.bazar-hoja__escribir {
  gap: 8px;
  margin-top: 8px;
}

.bazar-hoja__dicho {
  color: var(--primario);
  margin: 6px 0 0;
}

/* ── premios y promos ──────────────────────────────────────────────────────────────────────────── */
.premios {
  gap: 14px;
}

.premios .resumen {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
}
.premios .resumen p { margin: 0; }

.premios .resumen__grande {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.premios .resumen__n {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}
.premios .resumen__que {
  font-size: var(--cuerpo);
  font-weight: 600;
  color: var(--texto);
}

.premios .resumen__vence {
  font-size: var(--menor);
  font-weight: 600;
  color: var(--exito-texto);
}
.premios .resumen__vence--urge { color: var(--aviso-texto); }

.premios .resumen__pie {
  font-size: var(--minimo);
  color: var(--tenue);
}

.premios__lista {
  gap: 10px;
}

.premios .sobres {
  gap: 6px;
}
.premios .sobres p { margin: 0; }

.premios .sobres__titulo {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--texto);
}
.premios .sobres__pie {
  font-size: 0.82rem;
  color: var(--tenue);
}
.premios .sobres__error {
  font-size: 0.82rem;
  color: var(--error-texto);
}

.premios .sobres__fila {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 4px 2px 6px;
  scrollbar-width: none;
}
.premios .sobres__fila::-webkit-scrollbar { display: none; }

.premios .sobre {
  flex: 0 0 auto;
  width: 96px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 8px;
  border: 1px dashed var(--borde);
  border-radius: 14px;
  background: var(--elevada);
  color: var(--texto);
  cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease;
}
.premios .sobre:hover { border-color: var(--primario); }
.premios .sobre:active { transform: scale(0.96); }
.premios .sobre[disabled] { opacity: 0.6; cursor: default; }

.premios .sobre__mono {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--superficie);
  color: var(--primario);
}
.premios .sobre__rotulo {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.premios .sobre__vence {
  font-size: 0.68rem;
  color: var(--tenue);
  text-align: center;
}

.revelacion {
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: hidden;
}
.revelacion::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--primario) 26%, transparent), transparent 62%);
  opacity: 0;
  animation: destelloDelVelo 900ms ease-out forwards;
  pointer-events: none;
}
@keyframes destelloDelVelo {
  0%   { opacity: 0; transform: scale(0.6); }
  40%  { opacity: 1; }
  100% { opacity: .55; transform: scale(1); }
}

.revelacion__tarjeta {
  position: relative;
  z-index: 1;
  align-items: center;
  gap: 6px;
  width: min(320px, 100%);
  padding: 26px 22px 22px;
  border-radius: 20px;
  background: var(--elevada);
  border: 1px solid var(--borde);
  text-align: center;
  animation: revelar 620ms cubic-bezier(.2, 1.3, .35, 1) both;
  transform-style: preserve-3d;
}
.revelacion__tarjeta p { margin: 0; }
@keyframes revelar {
  0%   { opacity: 0; transform: perspective(700px) rotateY(-95deg) scale(.86); }
  55%  { opacity: 1; transform: perspective(700px) rotateY(12deg) scale(1.04); }
  75%  { transform: perspective(700px) rotateY(-4deg) scale(.99); }
  100% { opacity: 1; transform: perspective(700px) rotateY(0) scale(1); }
}

.revelacion__mono {
  position: relative;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--superficie);
  color: var(--primario);
  margin-bottom: 4px;
  animation: latidoDelMono 700ms 340ms cubic-bezier(.2, 1.4, .3, 1) both;
}
@keyframes latidoDelMono {
  0%   { transform: scale(.4) rotate(-14deg); }
  60%  { transform: scale(1.18) rotate(6deg); }
  100% { transform: scale(1) rotate(0); }
}
.revelacion__aro {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--primario);
  opacity: 0;
  animation: aroQueSeAbre 900ms 420ms ease-out both;
}
@keyframes aroQueSeAbre {
  0%   { opacity: .8; transform: scale(.7); }
  100% { opacity: 0; transform: scale(1.9); }
}

.revelacion__sorpresa {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tenue);
  animation: aparecer 420ms 420ms ease-out both;
}
.revelacion__nombre {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--texto);
  animation: aparecer 460ms 520ms ease-out both;
}
.revelacion__donde {
  font-size: 0.88rem;
  color: var(--tenue);
  animation: aparecer 420ms 620ms ease-out both;
}
.revelacion__vence {
  font-size: 0.82rem;
  color: var(--tenue);
  animation: aparecer 420ms 620ms ease-out both;
}
.revelacion__codigo {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1rem;
  letter-spacing: 0.14em;
  margin-top: 6px;
  margin-bottom: 10px;
  color: var(--texto);
  animation: aparecer 420ms 700ms ease-out both;
}
.revelacion__tarjeta .btn { animation: aparecer 420ms 780ms ease-out both; }
@keyframes aparecer {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.revelacion__papelitos {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 0;
  height: 0;
  pointer-events: none;
}
.revelacion__papel {
  position: absolute;
  width: 9px;
  height: 14px;
  border-radius: 2px;
  background: var(--primario);
  opacity: 0;
  transform-origin: center;
  animation: papelQueSalta 1100ms cubic-bezier(.15, .8, .3, 1) both;
  animation-delay: calc(var(--i) * 28ms + 120ms);
  --angulo: calc(var(--i) * 30deg);
  --radio: 128px;
}
.revelacion__papel:nth-child(3n) {
  background: var(--primario-fuerte, var(--primario));
  width: 7px;
  height: 10px;
  --radio: 96px;
}
.revelacion__papel:nth-child(4n) {
  background: var(--texto);
  opacity: .9;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  --radio: 150px;
}
.revelacion__papel:nth-child(5n+1) { --radio: 170px; }
@keyframes papelQueSalta {
  0%   { opacity: 0; transform: rotate(var(--angulo)) translateY(0) rotate(0); }
  12%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--angulo)) translateY(calc(var(--radio) * -1)) rotate(320deg); }
}

@media (prefers-reduced-motion: reduce) {
  .revelacion::before { animation: none; opacity: .4; }
  .revelacion__tarjeta { animation: aparecer 200ms ease-out both; }
  .revelacion__mono,
  .revelacion__sorpresa,
  .revelacion__nombre,
  .revelacion__donde,
  .revelacion__vence,
  .revelacion__codigo,
  .revelacion__tarjeta .btn { animation: none; }
  .revelacion__aro,
  .revelacion__papelitos { display: none; }
  .premios .sobre { transition: none; }
}

.premios__detalle .detalle__papel {
  align-items: center;
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-hoja, 16px);
  background: #FFFFFF;
}
.premios__detalle .detalle__qr {
  width: min(176px, 100%);
  height: auto;
  aspect-ratio: 1;
}

.premios__detalle .detalle__codigo {
  margin: 0;
  font-family: var(--letra-cifras);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 4px;
  text-indent: 4px;
  text-align: center;
  color: #201A1B;
}

.premios__detalle .detalle__tapa {
  align-items: center;
  gap: 10px;
  padding: 24px 20px;
  border: 1px dashed var(--borde-fuerte);
  border-radius: 16px;
  background: var(--elevada);
  text-align: center;
}

.premios__detalle .detalle__candado {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primario) 18%, var(--superficie));
  color: var(--primario);
}

.premios__detalle .detalle__tapa-titulo {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
}
.premios__detalle .detalle__tapa-texto {
  margin: 0;
  line-height: 1.5;
  max-width: 34ch;
}

.premios__detalle .detalle__abierto {
  gap: 8px;
  align-items: center;
  margin: 0;
  color: var(--exito-texto);
}

.premios__detalle .detalle__falla {
  margin: 0;
  color: var(--error-texto);
  line-height: 1.45;
}

.promos { gap: 14px; }

.promos__orden {
  gap: 10px;
  align-items: center;
  min-height: 40px;
}
.promos__aviso {
  margin: 0 0 8px;
  color: var(--error-texto);
}

.promos__lista { gap: 10px; }

/* ── bienvenida y aviso de versión ─────────────────────────────────────────────────────────────── */
.bienvenida-capa {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: end center;
}

.bienvenida-capa__velo {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: rgb(0 0 0 / .45);
  cursor: default;
}

.bienvenida {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: 92vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 16px calc(14px + env(safe-area-inset-bottom));
  border-radius: 22px 22px 0 0;
  background: var(--superficie);
  color: var(--texto);
  box-shadow: 0 -8px 30px rgb(0 0 0 / .2);
}

.bienvenida__cerrar {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  border: 0;
  background: none;
  color: var(--tenue);
  cursor: pointer;
  padding: 6px;
}

/* --pagina desplaza las cuatro hojas dentro del marco que las recorta. */
.bienvenida__marco { overflow: hidden; }

.bienvenida__paginas {
  display: flex;
  width: 100%;
  transform: translateX(calc(var(--pagina, 0) * -100%));
  transition: transform .32s ease;
}

.bienvenida__pagina {
  flex: 0 0 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px 2px 4px;
}

@media (prefers-reduced-motion: reduce) {
  .bienvenida__paginas { transition: none; }
}

.bienvenida__disco {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--primario-lavado);
  color: var(--primario-fuerte);
  font-weight: 800;
  font-size: 18px;
}

.bienvenida__kicker {
  color: var(--primario);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.bienvenida__h2 {
  margin: 0;
  font-family: var(--letra-display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.bienvenida__lead { margin: 0; line-height: 1.55; }
.bienvenida__nota { margin: 0; color: var(--sutil); }

.bienvenida__pasos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bienvenida__pasos li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--menor);
  line-height: 1.4;
}

.bienvenida__pasos li span {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--primario);
  color: var(--sobre-primario, #fff);
  font-weight: 800;
  font-size: 12px;
}

.bienvenida__programas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.foto.bienvenida__logo {
  width: 80%;
  height: 80%;
  background: transparent;
}

.foto.bienvenida__logo::before { background: transparent; }
.foto.bienvenida__marca { width: 100%; height: 100%; }

.bienvenida__pie { gap: 10px; align-items: center; }
.bienvenida__puntos { display: flex; gap: 6px; }

.bienvenida__punto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: var(--borde-fuerte);
  cursor: pointer;
}

.bienvenida__punto--activo {
  background: var(--primario);
  width: 20px;
  border-radius: 4px;
}

/* Limita los fundadores dentro del modal sin afectar otras cuadrículas. */
.bienvenida .losetas--grandes {
  max-height: 46vh;
  overflow-y: auto;
  padding: 2px;
}

.bienvenida--hojas {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ⚠ El aviso queda sobre los paneles y debajo de #blazor-error-ui, que usa 1000. */
.version {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgb(0 0 0 / .48);
}

.version__hoja {
  width: 100%;
  max-width: 360px;
  max-height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
  border-radius: var(--radio-tarjeta);
  background: var(--superficie);
  color: var(--texto);
  box-shadow: 0 18px 50px rgb(0 0 0 / .35);
}

.version__titulo { margin: 0; }
.version__texto { margin: 0; color: var(--tenue); line-height: 1.5; }

.version__folios {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  padding: 10px 12px;
  border-radius: var(--radio-control);
  background: var(--elevada);
}

.version__folios .t-cifra {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}

.version__acciones { margin-top: 2px; }

/* La ayuda conserva el desplegable nativo, sin estado adicional en C#. */
.version__ayuda { color: var(--tenue); }
.version__ayuda summary { cursor: pointer; padding: 6px 0; }
.version__pasos { margin: 4px 0 0; padding-left: 20px; line-height: 1.6; }
.version__pasos li { margin-bottom: 6px; }

/* ── armazón de la app ─────────────────────────────────────────────────────────────────────────── */
.panel .banda.cabecera {
  gap: 14px;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 20px 18px;
  position: relative;
  overflow: hidden;
}

.cabecera::before {
  content: "";
  position: absolute;
  right: -30px;
  top: -30px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 18px solid rgb(255 255 255 / .07);
  pointer-events: none;
  opacity: .6;
}

.panel .cabecera .banda__fila {
  gap: 8px;
  position: relative;
}

/* SegundaFila existe como fragmento; sin lema no debe reservar espacio. */
.panel .cabecera .banda__segunda:empty {
  display: none;
}

.cabecera .cabecera__sello {
  --emblema-fondo: var(--fondo);
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--fondo);
  display: grid;
  place-items: center;
  margin-inline-end: 4px;
}

.cabecera__quien {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-inline-end: 8px;
}

.cabecera__saludo {
  opacity: .9;
}

.cabecera__quien h1 {
  margin: 0;
  font-size: 19px;
  letter-spacing: -.035em;
}

.cabecera__lema {
  margin: 0;
  position: relative;
  font-size: 26px;
  max-width: 20ch;
  text-wrap: balance;
}

.panel .banda.cabecera--programa {
  border-bottom: 1px solid var(--borde);
  padding-bottom: 14px;
}

.cabecera--programa::before {
  display: none;
}

.cabecera:not(.cabecera--programa) .cabecera__saludo {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .01em;
  opacity: 1;
}

.cabecera--programa .cabecera__sello {
  display: none;
}

.cabecera__marca {
  margin: 3px 0 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cabecera__marca .cabecera__marca-logo {
  --emblema-fondo: var(--blanco);
  flex: none;
}

/* El recorte corresponde al nombre; Emblema también genera un span. */
.cabecera__marca > span:not(.emblema) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cabecera--programa::after {
  content: "";
  position: absolute;
  inset: auto 20px 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primario), transparent 78%);
  opacity: .55;
}

.cabecera__cambiar {
  width: 58px;
}

.segmento {
  flex: none;
  display: flex;
  padding: 0 20px;
}

.segmento__item {
  flex: 1;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 8px 0 0;
  border: 0;
  background: none;
  color: var(--tenue);
  font-family: inherit;
  font-size: 15px;
  cursor: pointer;
}

.segmento__raya {
  width: 100%;
  height: 2.5px;
  border-radius: 2px;
  background: var(--borde);
}

.segmento__item--activo {
  color: var(--primario-fuerte);
  font-weight: 700;
}

.segmento__item--activo .segmento__raya {
  background: var(--primario-fuerte);
}

.barra {
  flex: none;
}

.barra__gesto {
  flex: 1;
  position: relative;
  min-width: 0;
}

.escanear {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  width: 54px;
  height: 54px;
  padding: 0;
  border-radius: 50%;
  border: 4px solid var(--superficie);
  background: var(--primario);
  color: var(--sobre-primario);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 7px 18px color-mix(in srgb, var(--primario) 28%, transparent);
}

.escanear:active {
  opacity: .85;
}

.app--gesto {
  --alto-barra: 34px;
}

.selector__nota {
  margin: 0 0 4px;
  padding: 10px 2px 20px;
  line-height: 1.6;
}

.selector__item {
  --programa-acento: var(--primario);
  --programa-tinte: color-mix(in srgb, var(--programa-acento) 14%, var(--superficie));
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 116px;
  gap: 16px;
  padding: 16px 16px 16px 18px;
  border: 1px solid color-mix(in srgb, var(--programa-acento) 24%, var(--borde));
  border-radius: 24px;
  color: var(--texto);
  font-family: inherit;
  text-align: start;
  cursor: pointer;
  background:
    radial-gradient(150% 130% at 0% 50%, var(--programa-tinte) 0%, transparent 58%),
    var(--superficie);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--programa-acento) 9%, transparent);
  transition: transform .12s ease;
}

.selector__item:active {
  transform: scale(.985);
  opacity: 1;
}

.selector__item--puesto {
  outline: 2px solid var(--programa-acento);
  outline-offset: -2px;
  color: var(--primario-fuerte);
  background:
    radial-gradient(150% 130% at 0% 50%, var(--programa-tinte) 0%, transparent 58%),
    color-mix(in srgb, var(--programa-acento) 8%, var(--superficie));
}

.selector__item .selector__emblema {
  --emblema-fondo: var(--blanco);
  box-shadow:
    0 0 0 3px var(--superficie),
    0 0 0 5px color-mix(in srgb, var(--programa-acento) 55%, transparent),
    0 8px 18px rgb(0 0 0 / .12);
}

.selector__emblema--sin {
  width: 72px;
  height: 72px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--blanco);
  color: var(--programa-acento);
  box-shadow:
    0 0 0 3px var(--superficie),
    0 0 0 5px color-mix(in srgb, var(--programa-acento) 55%, transparent),
    0 8px 18px rgb(0 0 0 / .12);
}

.selector__quien {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.selector__nombre {
  font-family: var(--letra-display);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.15;
  color: var(--texto);
}

.selector__item--puesto .selector__nombre {
  color: var(--programa-acento);
}

.selector__lema {
  font-size: 14px;
  line-height: 1.35;
  color: var(--texto);
}

.selector__alcance {
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--programa-acento);
}

.selector__item > .ico {
  color: var(--programa-acento);
  flex: none;
}

.selector__aqui {
  align-self: start;
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--programa-acento) 12%, var(--superficie));
  border: 1px solid color-mix(in srgb, var(--programa-acento) 30%, transparent);
  color: var(--programa-acento);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
}

.selector__fila[data-aplicativo="compraevora"] {
  --programa-acento: #d85100;
}

.selector__fila[data-aplicativo="bazarevora"] {
  --programa-acento: #78543e;
}

.selector__fila[data-aplicativo="puroevora"] {
  --programa-acento: #247492;
}

.selector__fila[data-aplicativo="saborevora"] {
  --programa-acento: #277a4d;
}

.selector__fila[data-aplicativo="vivasinaloa"] {
  --programa-acento: #a83861;
}

.selector__sin {
  display: grid;
  gap: 8px;
  justify-items: start;
  padding: 16px;
}

.selector__fila {
  position: relative;
}

.selector__fila .selector__item {
  padding-right: 56px;
  width: 100%;
}

.selector__estrella {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--texto-tenue);
  cursor: pointer;
}

.selector__estrella:active {
  transform: translateY(-50%) scale(.9);
}

.selector__estrella:focus-visible {
  outline: 2px solid var(--primario);
  outline-offset: -2px;
}

.selector__estrella--puesta {
  color: var(--programa-acento, var(--primario));
}

/* ── escáner y pedir informes ──────────────────────────────────────────────────────────────────── */
/* El pie no debe competir con el visor por el alto disponible. */
.escaner__pie {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: visible;
}

/* Reservar el aviso evita saltos mientras se intenta tocar Jugar. */
.escaner__aviso {
  margin: 0;
  min-height: 1.4em;
  color: var(--tenue);
}

.escaner__aviso--falla { color: var(--error-texto); }
.escaner__jugar { margin-top: 2px; }

.ficha__renglon {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--borde);
}

.ficha__renglon:last-child { border-bottom: 0; }
.ficha__renglon strong { text-align: right; font-weight: 700; }

.desenlace {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
}

.desenlace p,
.desenlace h2 {
  margin: 0;
}

.desenlace__disco {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--elevada);
  color: var(--sutil);
}

.desenlace__titulo {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
  text-wrap: balance;
}

.desenlace__texto {
  color: var(--tenue);
  line-height: 1.5;
  max-width: 34ch;
}

.desenlace__rotulo {
  font-size: var(--minimo);
  font-weight: 700;
  letter-spacing: .18em;
  opacity: .82;
}

/* Sin promoción, el código sigue siendo válido y debe conservarse visible. */
.desenlace__marco {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 22px;
  border-radius: var(--radio-tarjeta);
  background: var(--aviso-tinte);
  border: 1px solid var(--aviso);
  color: var(--aviso-texto);
}

.desenlace__marco-rotulo {
  font-weight: 700;
  letter-spacing: .1em;
}

.desenlace__marco-codigo {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--texto);
}

.desenlace__acciones {
  width: 100%;
  max-width: 320px;
  margin-top: 6px;
}

.desenlace__datos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  width: 100%;
  max-width: 340px;
  padding: 12px 16px;
  border-radius: var(--radio-tarjeta);
  background: var(--elevada);
  border: 1px solid var(--borde);
}

.desenlace__datos:empty { display: none; }

.desenlace__dato {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.desenlace__dato-rotulo {
  font-weight: 700;
  letter-spacing: .1em;
  opacity: .8;
}

.desenlace__dato-valor { font-weight: 600; }
.desenlace__dato-codigo { font-size: 18px; letter-spacing: .1em; }

.desenlace__cortesia {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 340px;
  padding: 10px 14px;
  border-radius: var(--radio-tarjeta);
  background: var(--elevada);
  border: 1px solid var(--borde);
  text-align: left;
}

.desenlace__cortesia-sena {
  position: relative;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 18px;
  background: var(--superficie);
  color: var(--texto);
  overflow: hidden;
}

/* Si el logo falla, el fondo no oculta la inicial. */
.desenlace__cortesia-sena--logo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--des-logo) center / cover no-repeat;
}

.desenlace__cortesia-quien { gap: 1px; min-width: 0; }

.desenlace__cortesia-rotulo {
  font-weight: 700;
  letter-spacing: .12em;
  opacity: .8;
}

.desenlace__cortesia-nombre { font-weight: 700; line-height: 1.2; }
.desenlace__cortesia-lema { opacity: .85; line-height: 1.35; }
.desenlace__sinusar { margin: 0; opacity: .8; }

/* El desenlace ganador usa los colores del programa activo. */
.desenlace--gano {
  background: linear-gradient(149deg, var(--primario) 0%, var(--primario-fuerte) 100%);
  color: var(--sobre-primario);
}

.desenlace--gano .desenlace__disco {
  background: rgb(255 255 255 / .16);
  border: 1px solid rgb(255 255 255 / .28);
  color: inherit;
}

.desenlace--gano .desenlace__titulo { font-size: 34px; }
.desenlace--gano .desenlace__texto { color: inherit; opacity: .88; }

.desenlace--gano .desenlace__marco {
  background: rgb(255 255 255 / .14);
  border-color: rgb(255 255 255 / .26);
  color: inherit;
}

.desenlace--gano .desenlace__marco-codigo { color: inherit; }

.desenlace--gano .desenlace__datos,
.desenlace--gano .desenlace__cortesia {
  background: rgb(255 255 255 / .14);
  border-color: rgb(255 255 255 / .26);
  color: inherit;
}

.desenlace--gano .desenlace__cortesia-sena {
  background: rgb(255 255 255 / .92);
  color: var(--primario-fuerte);
}

.desenlace--gano .btn--principal {
  background: #fff;
  color: var(--primario-fuerte);
}

.desenlace--gano .btn--fantasma { color: inherit; opacity: .85; }

.escaner .ficha--vale {
  background: var(--exito-tinte);
  color: var(--exito-texto);
}

.escaner .ficha--usado {
  background: var(--aviso-tinte);
  color: var(--aviso-texto);
}

.escaner .tarj__sub { white-space: normal; }

/* Pedir informes. */
.informes__cuerpo { gap: 12px; }

.informes__que,
.informes__grupo {
  gap: 6px;
  padding: 14px 16px;
}

.informes__rotulo {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
}

.informes__etiqueta { font-weight: 600; }

/* AreaTexto genera el rótulo; se conserva la tipografía de la etiqueta original. */
.informes__grupo > .campo__rotulo {
  display: block;
  margin-top: 0;
  font-size: var(--menor);
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: inherit;
}

.informes__texto {
  width: 100%;
  box-sizing: border-box;
  min-height: 96px;
  resize: vertical;
  padding: 10px 12px;
  border: 1px solid var(--borde);
  border-radius: 12px;
  background: var(--fondo);
  color: var(--texto);
  font: inherit;
  font-size: 15px;
  line-height: 1.45;
}

.informes__texto:focus-visible {
  outline: 2px solid var(--primario);
  outline-offset: 1px;
}

.informes__cuenta { align-self: flex-end; }
.informes__fechas { gap: 10px; align-items: flex-end; }

.informes__campo {
  width: 100%;
  box-sizing: border-box;
  min-height: var(--alto-tactil);
  padding: 8px 12px;
  border: 1px solid var(--borde);
  border-radius: 12px;
  background: var(--fondo);
  color: var(--texto);
  font: inherit;
  font-size: 15px;
}

.informes__numero { align-items: center; }
.informes__contador { gap: 10px; align-items: center; }

.informes__mas {
  width: var(--alto-tactil);
  height: var(--alto-tactil);
  display: grid;
  place-items: center;
  border: 1px solid var(--borde);
  border-radius: 50%;
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
  font-size: 20px;
  cursor: pointer;
}

.informes__mas:disabled { opacity: .45; cursor: default; }
.informes__cuantos { min-width: 2ch; text-align: center; font-size: 18px; }

.informes__falla {
  gap: 8px;
  align-items: flex-start;
  color: var(--error-texto, var(--error));
}

.informes__nota { line-height: 1.45; }
.informes__mandar { min-height: var(--alto-tactil); }

.informes__listo {
  gap: 10px;
  align-items: center;
  text-align: center;
  padding: 24px 18px;
}

.informes__ok { color: var(--exito, var(--primario)); }

/* ── carrito y pedidos ─────────────────────────────────────────────────────────────────────────── */
.carrito__cuerpo { gap: 12px; padding-bottom: 24px; }
.carrito__lista { gap: 0; padding: 4px 12px; }
.carrito__renglon {
  gap: 10px;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid var(--borde, rgba(0,0,0,.08));
}
.carrito__renglon--no .carrito__texto { opacity: .7; }
.carrito__cant { min-width: 28px; font-weight: 700; }
.carrito__texto { gap: 2px; }
.carrito__nombre { font-weight: 600; }
.carrito__quitar {
  border: 0;
  background: transparent;
  color: var(--texto-tenue, #777);
  cursor: pointer;
  padding: 2px;
}
.carrito__total { align-items: center; padding: 12px 0 8px; }
.carrito__como { gap: 14px; padding: 18px; }
.carrito__rotulo { margin: 0; }
.carrito__modalidades { gap: 6px; flex-wrap: wrap; }
.carrito__chip {
  border: 1px solid var(--borde, rgba(0,0,0,.15));
  background: transparent;
  border-radius: 999px;
  padding: 10px 14px;
  min-height: 44px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  color: inherit;
}
.carrito__chip--puesto {
  background: var(--primario);
  border-color: var(--primario);
  color: var(--sobre-primario, #fff);
  font-weight: 600;
}
.carrito__error { color: var(--aviso-texto, #b3261e); font-weight: 600; }
.carrito__listo {
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 24px 16px;
}

/* Personalización del producto. */
.agregar__cuerpo { gap: 14px; padding: 0 16px 24px; }
.agregar__producto {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  margin: 0 -16px;
  padding: 18px 16px;
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
}
.agregar__foto {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 18px;
  background: color-mix(in srgb, var(--primario) 8%, var(--superficie));
}
/* Foto hace el recorte; el envoltorio determina la forma y el radio. */
.agregar__resumen { gap: 7px; }
.agregar__nombre {
  font-size: 21px;
  line-height: 1.15;
  font-weight: 750;
  letter-spacing: -.02em;
}
.agregar__descripcion { line-height: 1.4; }
.agregar__precio { color: var(--primario-fuerte, var(--primario)); font-size: 17px; }
.agregar__grupo { gap: 8px; padding: 14px; }
.agregar__rotulo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
}
.agregar__opcion { gap: 10px; align-items: center; min-height: 40px; padding: 4px 0; }
.agregar__opcion--no { opacity: .55; }
.agregar__pedido { gap: 14px; }
.agregar__cantidad { align-items: center; gap: 8px; padding-bottom: 2px; }
.agregar__cantidad-texto { flex: 1; gap: 2px; }
.agregar__mas {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  border: 1px solid var(--borde-fuerte);
  background: var(--superficie);
  color: var(--primario);
  font-size: 22px;
  line-height: 1;
  font-weight: 650;
  cursor: pointer;
}
.agregar__mas:active {
  background: color-mix(in srgb, var(--primario) 9%, var(--superficie));
}
.agregar__num { min-width: 32px; text-align: center; font-size: 17px; }
.agregar__error { color: var(--aviso-texto, #b3261e); font-weight: 600; }
.agregar__accion {
  position: sticky;
  bottom: -24px;
  z-index: 2;
  display: grid;
  gap: 6px;
  margin: 0 -16px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(transparent, var(--fondo) 22%);
}
.agregar__faltantes {
  margin: 0;
  text-align: center;
  color: var(--aviso-texto, #8f2f16);
}

@media (max-width: 380px) {
  .agregar__producto { grid-template-columns: 106px minmax(0, 1fr); gap: 12px; }
  .agregar__nombre { font-size: 19px; }
}

.agregar__ficha {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0;
}
.agregar__ficha-fila {
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}
/* Dato no admite clases en dt: hereda t-menor de la fila y conserva el tono tenue. */
.agregar__ficha-fila dt { margin: 0; color: var(--tenue); }
.agregar__ficha-fila dd { margin: 0; text-align: right; }

/* Pedidos del cliente. */
.pedidos__uno { gap: 4px; padding: 12px; }
.pedidos__cab { align-items: center; }
.pedidos__folio { font-weight: 700; font-size: 16px; }
.pedidos__estado {
  font-size: 12px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--primario-tinte, rgba(0,0,0,.06));
  color: var(--primario);
}
.pedidos__estado--ok { background: rgba(46,125,50,.12); color: #2e7d32; }
.pedidos__estado--no { background: rgba(0,0,0,.08); color: var(--texto-tenue, #666); }
.pedidos__pie { align-items: center; padding-top: 4px; }
.pedidos__error { color: var(--aviso-texto, #b3261e); font-weight: 600; }

/* Los selectores de la nota quedan limitados al componente al pasar a global. */
.nota-pedido {
  display: grid;
  gap: 10px;
  min-width: 0;
  margin-top: 8px;
}
.nota-pedido > label { font-size: 14px; font-weight: 600; }
.nota-pedido > label span,
.nota-pedido__limite { color: var(--texto-tenue); font-weight: 400; }
.nota-pedido__texto {
  box-sizing: border-box;
  width: 100%;
  resize: vertical;
  min-height: 88px;
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 12px 14px;
  font: inherit;
  font-size: 16px;
  line-height: 1.5;
  color: var(--texto);
  background: var(--superficie);
}
.nota-pedido__texto:focus-visible {
  outline: 2px solid var(--primario);
  outline-offset: 2px;
}
.nota-pedido__limite { font-size: 11px; text-align: right; }
.nota-pedido__opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.nota-pedido__opcion {
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--borde);
  border-radius: 999px;
  font: inherit;
  font-size: 13px;
  color: var(--texto);
  background: var(--superficie);
  cursor: pointer;
}
.nota-pedido__opcion[aria-pressed="true"] {
  color: var(--sobre-primario);
  background: var(--primario);
  border-color: var(--primario);
}

/* ── hecho en ──────────────────────────────────────────────────────────────────────────────────── */
/* Pila conserva aquí el flujo de bloques de la introducción y las secciones. */
.hecho-portada { display: block; padding: 18px 4px 16px; }
.hecho-portada__territorio {
  display: block; color: var(--tenue); font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
}
.hecho-portada h2 {
  font-family: var(--letra-display); font-size: 36px; font-weight: 750;
  line-height: 1.08; letter-spacing: -.045em; margin: 12px 0;
  max-width: 11ch; text-wrap: balance;
}
.hecho-portada p {
  color: var(--tenue); font-size: 14px; line-height: 1.6;
  max-width: 36ch; margin: 0;
}

.hecho-vitrina {
  display: flex; align-items: center; justify-content: flex-start;
  gap: 14px; width: 100%; padding: 18px; margin-bottom: 18px;
  border: 1px solid var(--borde); border-radius: 18px;
  background: var(--superficie); color: inherit;
  text-align: left; cursor: pointer; font: inherit;
  min-height: 0; transition: none;
}
.hecho-vitrina__ico { color: var(--primario); flex: none; }
.hecho-vitrina__texto { gap: 2px; min-width: 0; }
.hecho-vitrina__nombre { font-size: 18px; font-weight: 700; letter-spacing: -.02em; }

.hecho-seccion { display: block; margin-top: 18px; }
.hecho-seccion__cabeza { align-items: baseline; padding: 0 4px 8px; }
.hecho-seccion__rotulo {
  color: var(--tenue); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}
.hecho-seccion__accion { min-height: 0; padding: 0; }

.hecho-seccion .estantes {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
}
.hecho-seccion .estante {
  display: flex; align-items: center; justify-content: flex-start;
  gap: 10px; min-width: 0; min-height: var(--alto-tactil);
  padding: 8px 10px; border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta, 14px);
  background: var(--superficie); color: inherit;
  text-align: left; cursor: pointer; font: inherit; transition: none;
}
.hecho-seccion .estante:active { transform: scale(.98); }
.estante__sena {
  flex: none; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--primario-lavado); color: var(--primario-fuerte);
  font-size: 17px; font-weight: 700; overflow: hidden;
}
.estante__sena > img { width: 72%; height: 72%; object-fit: contain; }
.estante__texto { gap: 1px; min-width: 0; }
.estante__nombre {
  font-size: 13.5px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere;
}
@media (max-width: 359px) {
  .hecho-seccion .estantes { grid-template-columns: minmax(0, 1fr); }
}

/* El prefijo evita alterar la muestra del catálogo de piezas. */
.hecho-seccion .muestra {
  display: flex; gap: 10px; overflow-x: auto;
  padding: 2px 4px 10px; margin: 0 -4px;
  scroll-snap-type: x proximity; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.hecho-seccion .muestra::-webkit-scrollbar { display: none; }
.hecho-seccion .mues {
  flex: 0 0 132px; scroll-snap-align: start;
  display: flex; flex-direction: column;
  align-items: flex-start; justify-content: flex-start; gap: 3px;
  padding: 10px; border: 1px solid var(--borde); border-radius: 14px;
  background: var(--superficie); color: inherit;
  text-align: left; cursor: pointer; min-width: 0; font: inherit;
  min-height: 0; transition: none;
}
.hecho-seccion .mues:active { transform: scale(.97); }
.mues__sena {
  position: relative; display: grid; place-items: center;
  width: 100%; aspect-ratio: 4 / 3; border-radius: 10px; margin-bottom: 4px;
  background: var(--primario-lavado); color: var(--primario-fuerte);
  font-family: var(--letra-display); font-size: 24px; font-weight: 700;
  overflow: hidden;
}
/* Sólo el ícono nativo se reduce; la imagen de Foto llena su envoltorio. */
.mues__sena > img { width: 60%; height: 60%; object-fit: contain; }
.mues__sena--foto { background: var(--elevada); }
.mues__sena .foto.mues__foto {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.mues__nombre {
  font-size: 13px; font-weight: 700; line-height: 1.2;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere;
}
.mues__precio { font-size: 13px; font-weight: 700; color: var(--primario-fuerte); }
.mues__donde {
  overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; max-width: 100%;
}

.hecho-seccion .lugares { display: flex; flex-wrap: wrap; gap: 8px; }
.hecho-seccion .lugar {
  display: inline-flex; align-items: center; justify-content: normal;
  gap: 6px; min-height: 34px; padding: 0 11px;
  border: 1px solid var(--borde); border-radius: 12px;
  background: var(--superficie); color: var(--texto);
  font: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer; transition: none;
}
.lugar__n {
  color: var(--tenue); font-weight: 500; font-variant-numeric: tabular-nums;
}

.vitrina { display: flex; flex-direction: column; gap: 10px; }

/* Selector vive dentro del buscador; se neutraliza el tamaño y marco de campo. */
.vitrina .vitrina__orden {
  flex: none; width: auto; min-height: 0; padding: 0;
  border: 0; border-radius: 0; background: none;
  color: var(--tenue); font: inherit; font-size: 12.5px;
}
.vitrina .vitrina__orden:focus-visible { outline-offset: revert; }
.vitrina__cuenta { margin: 0; padding: 0 4px; }

.vitrina__grilla {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
}
@media (max-width: 359px) {
  .vitrina__grilla { grid-template-columns: minmax(0, 1fr); }
}
.vitrina__grilla .tarj--vertical { --tarj-foto: 4 / 3; }
.vitrina__grilla .tarj__titulo {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  white-space: normal; overflow: hidden; overflow-wrap: anywhere;
}

.prod__ico { width: 62%; height: 62%; object-fit: contain; }
.prod__inicial { font-family: var(--letra-display); font-size: 28px; font-weight: 700; }
.prod__frio {
  position: absolute; top: 6px; right: 8px; width: 22px; height: 22px;
  display: grid; place-items: center; border-radius: 50%;
  font-size: 14px; line-height: 1;
  color: var(--primario-fuerte); background: var(--superficie);
}
.prod__sello {
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  color: var(--primario); max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.prod__exporta { font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; }

.hoja-prod { max-height: 86vh; gap: 10px; }
.hoja-prod__cabeza { gap: 12px; align-items: flex-start; }
.hoja-prod__sena {
  position: relative; flex: none; display: grid; place-items: center;
  width: 84px; aspect-ratio: 1; border-radius: 10px; overflow: hidden;
  background: var(--primario-lavado); color: var(--primario-fuerte);
}
.hoja-prod__sena--foto { background: var(--elevada); }
.hoja-prod__sena .foto {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.hoja-prod__titulo { gap: 2px; min-width: 0; }
.hoja-prod__estante {
  color: var(--tenue); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}
.hoja-prod__nombre {
  margin: 0; font-family: var(--letra-display); font-size: 22px;
  line-height: 1.15; letter-spacing: -.02em;
}
.hoja-prod__precio { font-size: 17px; font-weight: 700; color: var(--primario-fuerte); }
.hoja-prod__cerrar { flex: none; }
.hoja-prod__sello { margin: 0; font-weight: 700; color: var(--primario); }
.hoja-prod__relato { margin: 0; font-style: italic; color: var(--texto); line-height: 1.5; }
.hoja-prod__datos {
  display: grid; grid-template-columns: auto 1fr;
  gap: 4px 12px; margin: 0; font-size: 13px;
}
.hoja-prod__datos dt { color: var(--tenue); font-weight: 600; }
.hoja-prod__datos dd { margin: 0; }

/* ── ficha del negocio y mercado ───────────────────────────────────────────────────────────────── */
.ficha { background: var(--superficie); }
.ficha p, .ficha h2, .ficha h3 { margin: 0; }

.ficha__banda {
  flex: none;
  height: 3px;
  background: var(--cabecera-degradado, var(--cabecera));
}

.ficha__sena {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--superficie);
  color: var(--seccion-plaza-texto);
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
}

.ficha__sena--logo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ficha-logo) center / contain no-repeat;
}

.ficha__quien { gap: 1px; }

.ficha__kicker {
  color: var(--seccion-plaza-texto);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.ficha__titulo {
  font-family: var(--letra-display);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.3px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.ficha__accion {
  flex: none;
  width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
}

.ficha__accion--puesta {
  background: var(--seccion-plaza-tinte);
  border-color: transparent;
  color: var(--seccion-plaza-texto);
}

.ficha__cuerpo {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
  padding: 16px 16px 96px;
}

.ficha__cuerpo > * { flex-shrink: 0; }
.ficha__detalle { margin-top: -2px; font-size: 13px; }

.ficha__seccion {
  margin-top: 2px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.4px;
  color: var(--texto);
}

.ficha__nada { padding: 2px 2px 4px; }
.ficha__falla-suelta { color: var(--error-texto); padding: 2px 2px 4px; }
.ficha__aviso { color: var(--error-texto); }

.ficha-suc { gap: 2px; padding: 10px 12px; }

.ficha-suc--seleccionada {
  display: grid;
  gap: 2px;
  padding: 8px 12px;
  background: var(--fondo);
  border: 0;
  border-radius: 12px;
  box-shadow: none;
}

.ficha-suc__resumen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
}

.ficha-suc__resumen > div { display: grid; gap: 2px; }
.ficha-suc__resumen strong { font-size: 14px; }

.ficha-suc__cambiar,
.ficha-suc__ubicacion {
  border: 0;
  background: transparent;
  color: var(--primario);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
}

.ficha-suc__cambiar { padding: 8px 0 8px 12px; }

.ficha-suc__ubicacion {
  align-self: flex-start;
  min-height: 32px;
  padding: 4px 0;
  font-size: 12px;
  text-align: left;
}

.ficha__donde {
  gap: 0;
  border: 1px solid var(--borde);
  border-radius: 12px;
  overflow: hidden;
}

.ficha-suc__opcion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 10px 12px;
  text-align: left;
  font: inherit;
  color: var(--texto);
  background: var(--superficie);
  border: 0;
  border-bottom: 1px solid var(--borde);
  cursor: pointer;
}

.ficha-suc__opcion:last-child { border-bottom: 0; }
.ficha-suc__opcion[aria-pressed="true"] { background: var(--fondo); }
.ficha-suc__opcion:disabled { opacity: .55; cursor: default; }
.ficha-suc__datos { display: grid; gap: 3px; font-size: 12px; }
.ficha-suc__datos strong { font-size: 14px; }

.ficha-suc__estado {
  color: var(--primario);
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

.ficha__cuerpo .ficha__categorias {
  --chip-tinte: var(--primario);
  --chip-texto: var(--sobre-primario);
  --chip-borde: var(--primario);
  position: sticky;
  top: 0;
  z-index: 2;
  min-height: 54px;
  padding-block: 8px;
  background: var(--superficie);
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
}

.ficha__vitrina {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  width: 100%;
}

.ficha__vitrina .tarj {
  align-items: stretch;
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
}

.ficha__vitrina .tarj__mini {
  order: 1;
  --tarj-mini: 112px;
  --tarj-tinte: var(--fondo);
  border-radius: 12px;
}

.ficha__vitrina .tarj__texto { gap: 6px; justify-content: flex-start; }

.ficha__vitrina .tarj__titulo {
  white-space: normal;
  font-size: 16px;
  font-weight: 650;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.ficha__vitrina .tarj__sub {
  white-space: normal;
  font-size: 13px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

@media (max-width: 370px) {
  .ficha__vitrina .tarj__mini { --tarj-mini: 92px; }
}

.ficha__vitrina .ficha-prod--agotado .tarj__mini,
.ficha__vitrina .ficha-prod--agotado .tarj__texto { opacity: .55; }

.ficha-prod__atributos {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ficha__vitrina .tarj__tags:empty { display: none; }

.ficha-prod__pie {
  margin-top: auto;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-height: 18px;
  flex-wrap: wrap;
}

.ficha-prod__precio { font-size: 14px; font-weight: 700; white-space: nowrap; }
.ficha-prod__agotado { color: var(--aviso-texto); font-weight: 600; }

.ficha-prod__agregar {
  min-height: 40px;
  padding: 8px 13px;
  border: 1px solid var(--primario);
  border-radius: 10px;
  background: var(--primario);
  color: var(--sobre-primario);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.ficha-prod__agregar:active { background: var(--primario-tinte, transparent); }
.ficha-prod__informes:active { opacity: .85; background: var(--primario); }

.ficha__cuenta { margin: 14px 0 0; text-align: center; }
.ficha__mas { margin-top: 8px; min-height: var(--alto-tactil); }

.ficha__novedades .tarj { padding: 12px 14px; }
.ficha__novedades .tarj__texto { gap: 3px; }
.ficha__novedades .tarj__titulo { white-space: normal; font-size: 15px; font-weight: 600; }
.ficha-nov__cuerpo { line-height: 1.45; }

.ficha__acerca {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}

.ficha__acerca-texto {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--texto);
  white-space: pre-line;
}

.ficha__acerca-texto--corto {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ficha__acerca-mas {
  align-self: flex-start;
  min-height: var(--alto-tactil);
  padding: 0 2px;
  font-weight: 600;
}

.ficha__galeria {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}

.ficha__galeria-tira {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 2px 4px 8px;
  margin: 0 -4px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.ficha__galeria-tira::-webkit-scrollbar { display: none; }

.ficha__foto {
  flex: 0 0 148px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  min-width: 0;
}

.ficha__foto .foto { border: 2px solid transparent; background-color: var(--elevada); }
.ficha__foto--abierta .foto { border-color: var(--primario); }

.ficha__foto-pie {
  color: var(--tenue);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ficha__foto-grande {
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ficha__foto-grande figcaption { color: var(--texto); line-height: 1.4; }

.ficha__foto-cerrar {
  position: absolute;
  top: 8px;
  right: 8px;
  width: var(--alto-tactil);
  height: var(--alto-tactil);
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--superficie) 85%, transparent);
  color: var(--texto);
  cursor: pointer;
}

.ficha__barra-carrito {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 76px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 0;
  border-radius: 14px;
  background: var(--primario);
  color: var(--sobre-primario, #fff);
  box-shadow: 0 6px 18px rgb(0 0 0 / .25);
  font-size: 15px;
  cursor: pointer;
  text-align: left;
}

.ficha__barra-cuenta {
  display: grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--sobre-primario, #fff);
  color: var(--primario);
  font-weight: 800;
  font-size: 13px;
}

.ficha__barra-texto { font-weight: 600; }
.ficha-suc__escribir { width: 100%; gap: 8px; margin-top: 8px; }
.ficha-suc__dicho { color: var(--primario); margin: 6px 0 0; }

/* Banda y cabecera__toque sustituyen merc__barra y merc__atras. */
.merc p, .merc h2, .merc h3 { margin: 0; }

.merc__sena {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--seccion-plaza-tinte);
  color: var(--seccion-plaza-texto);
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
}

.merc .merc__icono {
  --emblema-fondo: var(--superficie);
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 14px;
}

.merc__quien { gap: 1px; }

.merc__titulo {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.15;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.merc__cuerpo {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}

.merc__resumen { margin-top: -2px; }
.merc__aviso { color: var(--error-texto); }

.merc-neg {
  --tarj-mini: 42px;
  --tarj-tinte: var(--elevada);
  --tarj-texto: var(--tenue);
  --emblema-fondo: var(--elevada);
  padding: 0 10px 0 0;
  gap: 6px;
}

.merc-neg .tarj { border: 0; padding: 12px 4px 12px 14px; }
.merc-neg__sena { font-size: 17px; font-weight: 700; line-height: 1; }
.merc-neg__marcar { flex: none; width: 48px; padding: 0; }

.merc-neg__marcar--puesto {
  background: var(--seccion-plaza-tinte);
  border-color: transparent;
  color: var(--seccion-plaza-texto);
}

/* ── inmuebles y muro ──────────────────────────────────────────────────────────────────────────── */
/* Bienes raíces: filtros, lista y detalle. */
.inm {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.inm__linea {
  align-items: center;
  gap: 8px;
  padding: 0 4px;
}

.inm__orden {
  flex: none;
  padding: 4px 8px;
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
  font-size: 12.5px;
}

.inm__lista {
  gap: 12px;
}

.inm-hoja__cabeza {
  gap: 10px;
  align-items: flex-start;
}

.inm-hoja__quien {
  gap: 2px;
}

.inm-hoja__kicker {
  color: var(--primario);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.inm-hoja__precio {
  font-size: 24px;
  font-weight: 800;
  color: var(--primario-fuerte);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

.inm-hoja__fotos {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  margin: 0 -16px;
  padding: 0 16px 4px;
  scrollbar-width: none;
}

.inm-hoja__fotos::-webkit-scrollbar {
  display: none;
}

.inm-hoja__una {
  flex: 0 0 88%;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.inm-hoja__una .foto.inm-hoja__foto {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
}

@media (pointer: fine) {
  .inm-hoja__fotos {
    scrollbar-width: thin;
    scrollbar-color: var(--borde-fuerte) transparent;
    padding-bottom: 8px;
  }

  .inm-hoja__fotos::-webkit-scrollbar {
    display: block;
    height: 6px;
  }

  .inm-hoja__fotos::-webkit-scrollbar-thumb {
    background: var(--borde-fuerte);
    border-radius: 3px;
  }
}

.inm-hoja__titulo {
  margin: 0;
  font-family: var(--letra-display);
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -.02em;
}

.inm-hoja__desc {
  margin: 0;
  line-height: 1.55;
}

.inm-hoja__datos {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  margin: 0;
  font-size: 13px;
}

.inm-hoja__datos dt {
  color: var(--tenue);
  font-weight: 600;
}

.inm-hoja__datos dd {
  margin: 0;
}

.inm-hoja__escribir {
  gap: 8px;
  margin-top: 8px;
}

.inm-hoja__dicho {
  color: var(--primario);
  margin: 6px 0 0;
}

/* Muro: texto de las tarjetas y detalle de la noticia. */
.muro__quien {
  font-size: var(--minimo);
  font-weight: 700;
  color: var(--seccion-muro-texto);
}

/* Conserva los saltos escritos y permite partir URLs largas sin estirar la tarjeta. */
.muro__cuerpo {
  font-size: var(--menor);
  line-height: 1.45;
  color: var(--tenue);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.muro__producto {
  font-size: var(--minimo);
  color: var(--sutil);
}

.muro__rotulo {
  margin: 0 0 12px;
}

.noticia__cabeza {
  gap: 10px;
  align-items: flex-start;
}

.noticia__quien {
  gap: 2px;
}

.noticia__cerrar {
  flex: none;
}

.noticia__fotos {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  margin: 0 -16px;
  padding: 0 16px 4px;
  scrollbar-width: none;
}

.noticia__fotos::-webkit-scrollbar {
  display: none;
}

.noticia__una {
  flex: 0 0 86%;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.noticia__una .foto.noticia__foto {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
}

.noticia__cuerpo {
  margin: 0;
  line-height: 1.55;
  white-space: pre-line;
}

@media (pointer: fine) {
  .noticia__fotos {
    scrollbar-width: thin;
    scrollbar-color: var(--borde-fuerte) transparent;
    padding-bottom: 8px;
  }

  .noticia__fotos::-webkit-scrollbar {
    display: block;
    height: 6px;
  }

  .noticia__fotos::-webkit-scrollbar-thumb {
    background: var(--borde-fuerte);
    border-radius: 3px;
  }
}

.plaza__donde { margin: 0 0 12px; }

/* La doble clase mantiene prioridad frente al radio base de Foto. */
.foto.canal__foto {
  width: 54px;
  height: 54px;
  border-radius: 12px;
  flex: none;
}

.plaza__aviso {
  margin: 0 0 12px;
  color: var(--error-texto);
}

/* El relleno del cuerpo vive en el botón para que toda su superficie responda. */
.canal {
  padding: 0 10px 0 0;
  gap: 6px;
  border-color: var(--borde);
  border-radius: 16px;
  box-shadow: 0 3px 12px rgb(0 0 0 / .035);
}

.canal__abrir {
  gap: 12px;
  padding: 10px 4px 10px 12px;
  border: 0;
  background: none;
  box-shadow: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.canal__abrir:not(:disabled):active { opacity: .8; }
.canal__abrir:disabled { cursor: default; opacity: .6; }

.canal__seguir {
  flex: none;
  color: var(--seccion-plaza-texto);
  min-height: 36px;
  padding-inline: 12px;
  font-size: 13px;
  border-radius: 10px;
}

/* El fondo distingue selección de deshabilitado, además del texto. */
.canal__seguir--sigo {
  border-color: transparent;
  background: var(--seccion-plaza-tinte);
  color: var(--seccion-plaza-texto);
}

.canal__fijar {
  flex: none;
  width: 36px;
  min-height: 36px;
  padding: 0;
  border-radius: 10px;
  color: var(--seccion-plaza-texto);
}

.canal__fijar--puesto {
  border-color: transparent;
  background: var(--seccion-plaza-tinte);
  color: var(--seccion-plaza-texto);
}

.plaza-categorias {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}

/* El mínimo iguala las losetas; la fila ancha queda fuera. */
.plaza-categorias .canal:not(.canal--todo) {
  min-height: 176px;
  align-content: space-between;
}

.plaza-categorias .canal {
  display: flex;
  flex-wrap: wrap;
  align-content: start;
  padding: 12px;
  border-radius: var(--radio-tarjeta, 16px);
  box-shadow: none;
}

.plaza-categorias .canal__abrir {
  flex: 1 0 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 0 0 10px;
  min-height: var(--alto-tactil);
}

.plaza-categorias .tarj__mini { width: 56px; height: 56px; }
.plaza-categorias .tarj__texto { flex: none; width: 100%; gap: 4px; }

.plaza-categorias .tarj__titulo {
  white-space: normal;
  overflow-wrap: anywhere;
  overflow: visible;
  text-overflow: clip;
  font-family: var(--letra-display);
  font-size: 18px;
  line-height: 1.2;
}

.plaza-categorias .tarj__accion { display: none; }

.plaza-categorias .tarj__sub {
  white-space: normal;
  overflow: hidden;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.plaza-categorias .tarj__titulo {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.plaza-categorias .canal__seguir { align-self: flex-start; }
.plaza-categorias .canal__chevron { display: none; }

.plaza-categorias .canal__seguir {
  flex: none;
  min-width: 0;
  padding-inline: 12px;
}

.plaza-categorias .canal__fijar { width: 36px; }
.plaza-categorias .foto { width: 100%; height: 100%; }

.plaza-categorias .canal--todo {
  grid-column: 1 / -1;
  background: var(--primario-lavado);
  border-color: var(--primario);
}

.plaza-categorias .canal--todo .canal__abrir {
  flex-direction: row;
  align-items: center;
}

.plaza-categorias .canal--todo .tarj__texto { flex: 1; width: auto; }
.plaza-categorias .canal--todo .tarj__accion { display: block; }

@media (max-width: 359px) {
  .plaza-categorias { grid-template-columns: minmax(0, 1fr); }
}

.canal__abrir {
  --tarj-tinte: var(--seccion-plaza-tinte);
  --tarj-texto: var(--seccion-plaza-texto);
}

.canal__abrir .tarj__mini { border-radius: 14px; }

/* ── categorías, negocios, lista desplazable y no encontrada ───────────────────────────────────── */
.categorias {
  margin-top: 18px;
}

.categorias__cabeza {
  align-items: baseline;
  padding: 0 4px 8px;
}

.categorias__rotulo {
  color: var(--tenue);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.categorias__accion {
  min-height: 0;
  padding: 0;
}

.categorias__grilla {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.catm .tarj__mini {
  width: 40px;
  height: 40px;
}

.catm__nombre {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.01em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

/* El acceso a toda la plaza ocupa la fila completa y usa el color del programa. */
.catm--todo {
  grid-column: 1 / -1;
  background: var(--primario-lavado);
  border-color: var(--primario);
}

.catm--todo .catm__nombre {
  font-family: var(--letra-display);
  font-size: 17px;
}

@media (max-width: 359px) {
  .categorias__grilla {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Negocios: estilos propios y ajustes de las piezas dentro de esta cara. */

/* ⚠ El tamaño de campo evita el zoom al enfocar en iOS. */
.neg .buscador input {
  font-size: var(--texto-campo);
}

.neg__donde {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: -4px;
}

.neg__alternar {
  flex: none;
  font-size: 12.5px;
  font-weight: 700;
}

.neg__resumen {
  margin: -2px 0 0;
}

.neg__lista {
  gap: 10px;
}

.neg .tarj__mini {
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
}

/* El logo se superpone a la inicial; si falla el fondo, la letra permanece visible. */
.neg .tarj__mini::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--neg-logo, none) center / cover no-repeat;
}

.neg__gancho {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
  color: var(--seccion-cg-texto);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Lista desplazable: indicadores de continuación y recarga por tirón. */
.lista-marco {
  position: relative;
  display: flex;
  flex: 1;
  min-height: 0;
}

/* La píldora y el fundido sustituyen visualmente a la barra nativa. */
.lista-desplazable {
  min-width: 0;
  width: 100%;
  scrollbar-width: none;
}

.lista-desplazable::-webkit-scrollbar {
  display: none;
}

/* ⚠ Las capas deben quedar por encima de las cabeceras pegajosas. */
.lista-desplazable .capa {
  z-index: 20;
}

.lista-desplazable:focus-visible {
  outline: 2px solid var(--primario);
  outline-offset: -3px;
}

/* El fundido usa el fondo del tema y deja pasar los toques. */
.lista-marco::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 64px;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--fondo));
  opacity: 0;
  transition: opacity .2s ease;
}

.lista-marco--hay-mas::after {
  opacity: 1;
}

.lista-mas {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  min-height: var(--alto-tactil, 44px);
  padding: 10px 18px;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: var(--superficie);
  color: var(--primario-fuerte);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  box-shadow: 0 4px 18px rgb(0 0 0 / .12);
  cursor: pointer;
}

.lista-mas[hidden] {
  display: none;
}

.lista-mas:active {
  transform: translateX(-50%) scale(.97);
}

.lista-mas:focus-visible {
  outline: 2px solid var(--primario);
  outline-offset: 3px;
}

/* Arranca fuera de vista; JS cambia transform y opacity sin interceptar el toque. */
.lista-tiron {
  position: absolute;
  top: -44px;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: var(--superficie);
  color: var(--texto-tenue);
  box-shadow: 0 4px 18px rgb(0 0 0 / .12);
  opacity: 0;
  pointer-events: none;
}

.lista-tiron--listo {
  color: var(--primario-fuerte);
  border-color: var(--primario);
}

/* El giro se aplica al contenedor que controla el gesto. */
.lista-tiron--cargando {
  color: var(--primario-fuerte);
  animation: lista-tiron-gira .9s linear infinite;
}

@keyframes lista-tiron-gira {
  to {
    transform: translate(-50%, 72px) rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lista-marco::after {
    transition: none;
  }

  /* Se elimina el giro, pero la recarga sigue disponible. */
  .lista-tiron--cargando {
    animation: none;
  }
}

.pila .hilo--nuevo {
  border-color: var(--primario);
  background: color-mix(in srgb, var(--primario) 7%, var(--superficie));
}
.pila .hilo--nuevo .tarj__titulo { font-weight: 800; }
.pila .hilo--nuevo .tarj__dato { color: var(--primario); }
.pila .hilo--cerrado { opacity: 1; border-style: dashed; }

.hilo { flex: 1; min-height: 0; min-width: 0; gap: 0; }
/* El asunto es una cabecera, no un párrafo suelto: lleva superficie y borde, espejo del
   `border-top` de `.hilo__pie`. */
.hilo__sobre {
  flex: none;
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
}
.hilo__sobre .banda__fila { flex-wrap: wrap; }
.hilo__sobre .banda__texto { min-width: 120px; }
.hilo__sobre .banda__titulo { white-space: normal; overflow-wrap: anywhere; }
.hilo__icono {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--primario) 12%, transparent);
  color: var(--primario);
}
.hilo__atras, .hilo__reportar { flex: none; min-width: 44px; min-height: 44px; }
.hilo__reportar { color: var(--tenue); }
/* La greca como papel tapiz: va en un pseudo-elemento detrás de los mensajes y no como fondo
   del contenedor (una máscara sobre `.hilo__historial` recortaría las burbujas). Muy tenue a
   propósito: es papel, no dibujo. */
.hilo__historial::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Es un mosaico hecho para repetirse, no la franja del sitio (`greca.webp` es una banda y
     repetida muestra la rejilla). `patron-greca.svg` cierra en los bordes: lo que sale por uno
     entra por el opuesto en la misma coordenada, trasladado ±480, y no se ve costura. */
  opacity: .05;
  background-color: var(--primario);
  -webkit-mask-image: var(--patron-img);
  mask-image: var(--patron-img);
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  /* A 300 px el meandro entra completo en un teléfono (~380 de ancho) y se lee como greca; a 700
     entraba medio mosaico y parecían bloques sueltos. */
  -webkit-mask-size: 300px 300px;
  mask-size: 300px 300px;
}
.hilo__mensajes { position: relative; z-index: 1; }
.hilo__historial {
  position: relative;
  flex: 1;
  min-height: 80px;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-width: thin;
  scroll-padding-block: 12px;
}
/* Aire a los lados: las burbujas no quedan pegadas al canto y se ve que hay fondo. */
.hilo__mensajes { gap: 0; padding: 4px 14px 16px; }
.hilo__entrada { gap: 0; }
.hilo__vacio { margin: auto; text-align: center; padding: 24px 12px; }
.hilo__burbuja {
  align-self: flex-start;
  gap: 4px;
  width: fit-content;
  max-width: min(82%, 42rem);
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--borde);
  border-radius: 16px 16px 16px 5px;
  background: var(--elevada);
  color: var(--texto);
  overflow-wrap: anywhere;
}
.hilo__burbuja--mia {
  align-self: flex-end;
  background: color-mix(in srgb, var(--primario) 12%, var(--elevada));
  border-radius: 16px 16px 5px 16px;
}
.hilo__burbuja--oculta { border-style: dashed; background: var(--fondo); }
.hilo__burbuja--oculta .hilo__texto { color: var(--tenue); font-style: italic; }
.hilo__burbuja--seguida { margin-top: 3px; }
.hilo__autor { font-size: calc(.8rem * var(--escala-lectura)); font-weight: 700; }
.hilo__texto { font-size: calc(1rem * var(--escala-lectura)); line-height: 1.5; white-space: pre-wrap; }
.hilo__cuando { align-self: flex-end; flex-wrap: wrap; gap: 8px; color: var(--tenue); font-size: calc(.75rem * var(--escala-lectura)); }
.hilo__tic { font-weight: 500; }
.hilo__tic--visto { color: var(--texto); font-weight: 700; }
.hilo__dia { display: flex; align-items: center; gap: 12px; margin: 20px 0 4px; color: var(--tenue); font-size: calc(.8rem * var(--escala-lectura)); }
.hilo__dia::before, .hilo__dia::after { content: ""; flex: 1; height: 1px; background: var(--borde); }
.hilo__pie {
  flex: none;
  gap: 8px;
  padding: 10px max(4px, env(safe-area-inset-right, 0px)) max(8px, env(safe-area-inset-bottom, 0px)) max(4px, env(safe-area-inset-left, 0px));
  border-top: 1px solid var(--borde);
  background: var(--fondo);
}
/* Envoltorio que ancla el panel encima del campo y de su ayuda. */
.hilo__compositor {
  --hilo-espacio: .5rem;
  --hilo-ayuda-espacio: .375rem;
  --hilo-accion-ancho: 4rem;
  --hilo-accion-alto: max(44px, var(--alto-tactil));
  --hilo-accion-relleno: .625rem;
  --hilo-lector-medida: 1px;

  position: relative;
  min-width: 0;
  gap: var(--hilo-ayuda-espacio);
}

/* Alinea los botones con el borde inferior del campo. */
.hilo__escribir {
  gap: var(--hilo-espacio);
  align-items: flex-end;
}

.hilo__editor {
  position: relative;
  flex: 1;
  min-width: 0;
  gap: var(--hilo-ayuda-espacio);
}

/* Conserva el rótulo para lectores. */
.hilo__editor .campo__rotulo {
  position: absolute;
  width: var(--hilo-lector-medida);
  height: var(--hilo-lector-medida);
  padding: 0;
  margin: calc(-1 * var(--hilo-lector-medida));
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.hilo__campo, .hilo__reporte-detalle {
  box-sizing: border-box;
  width: 100%;
  max-height: 160px;
  field-sizing: content;
  resize: none;
  overflow-y: auto;
  padding: 10px 12px;
  line-height: 1.4;
  scroll-margin-block: 16px;
}
.hilo__reporte-detalle { min-height: 64px; }

/* La píldora: el radio grande la vuelve estadio en una línea y aguanta al crecer. El hueco de
   la carita es relleno y no margen, para que el texto pase por encima del botón en la segunda
   línea en vez de chocar con él. */
.hilo__campo {
  min-height: 48px;
  padding: 13px 16px 13px 54px;
  border-radius: 24px;
}

/* El piso de 16px no se puede bajar: por debajo, Safari en iOS hace zoom al enfocar. Por eso
   es `max()` y no una multiplicación. */
.hilo__campo {
  font-size: max(16px, calc(16px * var(--escala-lectura)));
}
.hilo__reporte-detalle { font-size: 16px; }
/* Campo en píldora con la carita adentro a la izquierda, y mandar como un círculo lleno
   afuera, a la derecha: lo de adentro es del texto, lo de afuera lo despacha, y por eso el de
   enviar es el único pintado. */
.hilo__redondo {
  flex: none;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: var(--hilo-accion-alto);
  min-width: var(--hilo-accion-alto);
  height: var(--hilo-accion-alto);
  padding: 0;
  border-radius: 999px;
}
/* Centrado exacto con `top:0; bottom:0` y margen automático: el campo crece al escribir
   (`field-sizing: content`) y una distancia fija al borde de abajo corre el dibujo. */
/* El avión se centra a ojo: su triángulo va de (22,2) a (15,22) a (2,9) y su centro de masa
   cae arriba a la derecha; al centro geométrico se ve corrido. */
.hilo__enviar svg { transform: translate(-1px, 1px); }

.hilo__emojis {
  position: absolute;
  inset-inline-start: 4px;
  top: 0;
  bottom: 0;
  margin-block: auto;
  z-index: 1;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 46px;
  min-width: 46px;
  height: 46px;
  padding: 0;
  border-radius: 999px;
  background: none;
  color: var(--tenue);
}

.hilo__emojis[aria-expanded="true"] {
  background: color-mix(in srgb, var(--primario) 12%, transparent);
  color: var(--primario);
}
/* La barra de la selección reemplaza a la cabecera mientras hay un mensaje elegido, como en
   el teléfono: las acciones son de lo elegido, no de la pantalla, y no hay un gesto por renglón. */
.hilo__seleccion {
  flex: none;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-bottom: 1px solid var(--borde);
  background: var(--superficie);
}
.hilo__seleccion-cuenta { font-weight: 700; font-size: var(--menor); }
.hilo__seleccion-acciones { margin-inline-start: auto; gap: 2px; }
.hilo__seleccion .btn, .hilo__seleccion .cabecera__toque { min-width: 44px; min-height: 44px; }

/* El mensaje elegido se marca con un anillo, no con otro color: el color de la burbuja ya dice
   de quién es, y pisarlo perdería ese dato. */
.hilo__burbuja--elegida {
  box-shadow: 0 0 0 2px var(--primario);
  cursor: pointer;
}
.hilo__burbuja { cursor: pointer; }
.hilo__burbuja:focus-visible { outline: 2px solid var(--primario); outline-offset: 2px; }


/* La confirmación de limpiar: una hoja centrada, no una pantalla completa — son dos botones. */
.hilo__confirma {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 16px;
  background: color-mix(in srgb, var(--texto) 42%, transparent);
}
.hilo__confirma-hoja {
  gap: 12px;
  width: min(420px, 100%);
  padding: 20px;
  border-radius: var(--radio-control);
  background: var(--superficie);
  color: var(--texto);
}
.hilo__confirma-botones { gap: 8px; justify-content: flex-end; }
.hilo__confirma-botones .btn { min-height: 44px; }

.hilo__ayuda { margin: 0; color: var(--tenue); line-height: 1.4; }
/* Sin contador no hay nada que decir: el renglón desaparece en vez de reservar alto. */
.hilo__ayuda:empty { display: none; }
.hilo__dicho { margin: 0; color: var(--texto); overflow-wrap: anywhere; }
.hilo__dicho:empty { display: none; }
.hilo__cerrada { margin: 0; padding: 12px; text-align: center; line-height: 1.5; }
.hilo__reporte-nota { margin: 0 0 12px; }
.hilo__reporte-detalle { margin: 12px 0; }
.hilo__reporte { padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)); }
.hilo__solo-lector { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 380px) {
  .hilo__burbuja { max-width: 90%; }
}

/* El alto de la bandeja: la sección vive fuera de `ListaDesplazable` y nadie le da altura;
   sin esto la barra de pestañas sube a media pantalla. Va en `.conv__caja` y no en la lista
   porque la lista no existe mientras carga (`<Cara>` dibuja el esqueleto).
   Quien reescriba el bloque de abajo tiene que conservar esta regla. */
.conv__caja {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
}

/* ── LA BANDEJA DE CONVERSACIONES ────────────────────────────────────────────────────────────── */
/* Buscador y categorías: controles locales, separados de la bandeja elegida. */
.conv__controles {
  flex: none;
  min-width: 0;
  gap: var(--minimo);
  padding: var(--minimo);
  background: var(--superficie);
  color: var(--texto);
}

/* El buscador y sus interruptores en una fila: el campo se estira y los botones quedan
   pegados a él, en vez de dos renglones de ancho completo. */
.conv__arriba { align-items: center; gap: 6px; min-width: 0; }
.conv__arriba > .conv__buscador { flex: 1; }

/* El interruptor dice en cuál bandeja estás: relleno cuando está puesto. */
.conv__interruptor {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--alto-tactil);
  height: var(--alto-tactil);
  padding: 0;
  border-radius: var(--radio-pildora);
  color: var(--tenue);
}
.conv__interruptor[aria-pressed="true"] {
  background: color-mix(in srgb, var(--primario) 14%, transparent);
  color: var(--primario);
}

/* LA BARRA DE LA SELECCIÓN — la misma forma que la del chat abierto (`hilo__seleccion`). */
.conv__seleccion {
  flex: none;
  align-items: center;
  gap: 4px;
  min-height: 56px;
  padding: 4px 8px;
  border-bottom: 1px solid var(--borde);
  background: var(--superficie);
}
.conv__seleccion-cuenta { font-weight: 700; font-size: var(--menor); }
.conv__seleccion-acciones { margin-inline-start: auto; gap: 2px; }

/* El renglón elegido: fondo teñido y una palomita sobre el avatar, como en la referencia. */
.conv__hilo--elegida { background: color-mix(in srgb, var(--primario) 10%, transparent); }
.conv__avatar { position: relative; }
.conv__marca {
  position: absolute;
  inset-inline-end: -2px;
  bottom: -2px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: var(--radio-pildora);
  background: var(--primario);
  color: var(--sobre-primario);
  box-shadow: 0 0 0 2px var(--superficie);
}

/* El toque largo no abre el menú del teléfono ni selecciona texto: es el gesto que elige una
   conversación, y sin esto iOS muestra su globo de «copiar». */
.conv__abrir { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }

.conv__buscador {
  min-width: 0;
  min-height: var(--alto-tactil);
  gap: calc(var(--minimo) / 2);
  padding-inline: var(--minimo);
  border-radius: var(--radio-pildora);
  background: var(--fondo);
  color: var(--tenue);
}

.conv__buscador > svg {
  flex: none;
}

.conv__buscar.campo {
  flex: 1;
  width: 100%;
  min-width: 0;
  min-height: var(--alto-tactil);
  padding: 0;
  border: 0;
  border-radius: var(--radio-pildora);
  background: var(--fondo);
  color: var(--texto);
  box-shadow: none;
  font-size: var(--texto-campo);
}

.conv__buscar::placeholder {
  color: var(--tenue);
  opacity: 1;
}

.conv__categorias.riel {
  flex: none;
  min-width: 0;
  gap: calc(var(--minimo) / 2);
  margin: 0;
  padding: 0 0 calc(var(--minimo) / 2);
  overflow-x: auto;
  flex-wrap: nowrap;
}

/* Son filtros, no acciones: van chicos para no competir con la lista. El alto visible baja a
   32 px y el área táctil se recupera con un `::after` invisible: el dedo sigue teniendo 44 px. */
.conv__categorias .chip {
  position: relative;
  min-width: 0;
  min-height: 32px;
  padding-block: 0;
  padding-inline: 12px;
  border-radius: var(--radio-pildora);
  font-size: var(--minimo);
  background: var(--superficie);
  color: var(--texto);
}
.conv__categorias .chip::after {
  content: "";
  position: absolute;
  inset-block: -6px;
  inset-inline: 0;
}

.conv__categorias .chip--activo {
  background: var(--primario);
  color: var(--sobre-primario);
  border-color: var(--primario);
}

.conv__categorias .chip--activo .chip__n {
  color: inherit;
}

/* Los accesos a otras bandejas ocupan un renglón completo. */
.conv__acceso {
  flex: none;
  width: 100%;
  min-width: var(--alto-tactil);
  min-height: var(--alto-tactil);
  justify-content: flex-start;
  gap: var(--minimo);
  padding: var(--minimo);
  text-align: start;
  border: 0;
  border-bottom: calc(var(--minimo) / 12) solid var(--borde);
  border-radius: 0;
  background: var(--superficie);
  color: var(--texto);
  box-shadow: none;
}

.conv__acceso > svg {
  flex: none;
}

.conv__acceso-texto {
  flex: 1;
  min-width: 0;
}

.conv__vista-titulo {
  display: block;
  padding: var(--minimo);
  color: var(--texto);
  font-size: var(--cuerpo);
}

/* El botón principal contiene sólo imagen y texto, nunca otros controles. */
.conv__abrir {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: var(--alto-tactil);
  min-height: var(--alto-tactil);
  gap: var(--minimo);
  padding: var(--minimo);
  text-align: start;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--texto);
  box-shadow: none;
}

.conv__avatar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--alto-tactil);
  height: var(--alto-tactil);
  overflow: hidden;
  border-radius: var(--radio-pildora);
  background: var(--fondo);
  color: var(--tenue);
}

.conv__avatar .foto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.conv__contenido {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: calc(var(--minimo) / 3);
}

.conv__titulo,
.conv__ultimo {
  display: block;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.conv__titulo {
  font-size: var(--cuerpo);
  font-weight: 700;
  color: var(--texto);
}

.conv__ultimo {
  font-size: var(--menor);
  font-weight: 400;
  color: var(--tenue);
}

.conv__estado {
  font-size: var(--minimo);
  font-weight: 500;
  color: var(--tenue);
}

.conv__datos {
  flex: none;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(var(--minimo) / 2);
}

.conv__hora {
  white-space: nowrap;
  font-size: var(--minimo);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--tenue);
}

.conv__senales {
  justify-content: flex-end;
  gap: calc(var(--minimo) / 2);
  min-height: var(--menor);
  color: var(--tenue);
}

.conv__punto {
  display: inline-block;
  width: calc(var(--minimo) * 2 / 3);
  height: calc(var(--minimo) * 2 / 3);
  border-radius: var(--radio-pildora);
  background: var(--primario);
}

.conv__hilo--nuevo .conv__titulo {
  font-weight: 800;
}

.conv__hilo--nuevo .conv__hora {
  color: var(--primario);
  font-weight: 700;
}

/* Menú compartido por la lista y la cabecera. */
.conv__menu-titulo {
  display: block;
  margin: 0;
  padding: calc(var(--minimo) / 2) var(--minimo);
  overflow-wrap: anywhere;
  font-size: var(--cuerpo);
}

.conv__accion {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  min-width: var(--alto-tactil);
  min-height: var(--alto-tactil);
  gap: var(--minimo);
  padding: calc(var(--minimo) / 2) var(--minimo);
  text-align: start;
  white-space: normal;
  font-size: var(--cuerpo);
  border-radius: var(--radio-control);
  background: var(--superficie);
  color: var(--texto);
}

.conv__accion > svg {
  flex: none;
}

.conv__vacio {
  gap: calc(var(--minimo) / 2);
  padding: var(--menor);
  color: var(--texto);
}

.conv__aviso {
  flex: none;
  flex-wrap: wrap;
  gap: var(--minimo);
  margin: 0;
  padding: var(--minimo);
  background: var(--superficie);
  color: var(--texto);
}

/* Cabecera del chat abierto. */
.conv__cabecera {
  flex: none;
  flex-wrap: nowrap;
  min-width: 0;
  gap: calc(var(--minimo) / 2);
  padding: var(--minimo);
  border-bottom: calc(var(--minimo) / 12) solid var(--borde);
  background: var(--superficie);
  color: var(--texto);
}

.conv__cabecera-texto {
  flex: 1;
  min-width: 0;
  align-items: flex-start;
  gap: calc(var(--minimo) / 3);
}

.conv__cabecera-texto > p {
  margin: 0;
}

.conv__cabecera-titulo {
  font-size: var(--cuerpo);
  overflow-wrap: anywhere;
}

.conv__cabecera-estado {
  gap: calc(var(--minimo) / 2);
  color: var(--tenue);
}

.conv__cabecera-estado > p {
  margin: 0;
}

.conv__controles :focus-visible,
.conv__caja :focus-visible,
.conv__cabecera :focus-visible,
.conv__opciones :focus-visible {
  outline: calc(var(--minimo) / 6) solid var(--primario);
  outline-offset: calc(var(--minimo) / 6);
}

@media (hover: hover) {
  .conv__abrir:hover,
  .conv__acceso:hover,
  .conv__mas:hover,
  .conv__accion:hover {
    background: var(--fondo);
  }
}

/* ══ LAS FOTOS DEL CHAT Y LA DE PERFIL ═══════════════════════════════════════════════════════════
   Los dos botones van dentro de la píldora, a la derecha: el clip abre los archivos o la galería, la
   cámara pide la cámara (`capture`). El campo les reserva lugar con relleno, como a la carita. */
.hilo__campo { padding-inline-end: 96px; }
.hilo__adjuntos {
  position: absolute;
  inset-inline-end: 4px;
  top: 0;
  bottom: 0;
  margin-block: auto;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 46px;
}
.hilo__adjuntar {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  color: var(--tenue);
  cursor: pointer;
}
.hilo__adjuntar:hover, .hilo__adjuntar:focus-within {
  background: color-mix(in srgb, var(--primario) 12%, transparent);
  color: var(--primario);
}
.hilo__adjuntar:focus-within { outline: 2px solid var(--primario); outline-offset: 1px; }
.hilo__adjuntar[aria-disabled="true"] { opacity: .45; pointer-events: none; }
/* El input real queda invisible pero enfocable: el teclado llega a él y el <label> lo abre al tocar. */
.hilo__archivo, .cuenta__archivo {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  clip-path: inset(50%);
}
/* La foto de un mensaje: la miniatura firmada, que abre la grande. El ancho sale del teléfono y no de la
   foto, para que una panorámica no empuje la burbuja fuera de la pantalla. */
.hilo__foto {
  display: block;
  margin-block: 4px 2px;
  border-radius: 12px;
  overflow: hidden;
  max-width: min(260px, 68vw);
  background: var(--fondo);
}
.hilo__foto img { display: block; width: 100%; height: auto; }
.cuenta__disco--foto { object-fit: cover; padding: 0; }
.cuenta__fotos { gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.cuenta__foto-accion {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  font-size: var(--menor);
  color: var(--primario);
  cursor: pointer;
}
.cuenta__foto-accion:focus-within { outline: 2px solid var(--primario); outline-offset: 2px; border-radius: 6px; }
.cuenta__foto-accion[aria-disabled="true"] { opacity: .45; pointer-events: none; }