/* Estellari Conecta · app del cliente.
   Colores y medidas salen de los lienzos aprobados (BRIEF.md). Dos paletas, .t-oscuro y .t-acero: las pone js/tema.js en
   <html> según el modo del celular (prefers-color-scheme). Todo es grande y claro: el cliente no es técnico. */

.t-oscuro {
  --fondo: #0B0F14; --superficie: #121821; --superficie2: #18202B; --borde: #232D3A; --texto: #E6EBF1;
  --texto2: #9AA7B6; --acento: #7AA2D6; --acento-fuerte: #A9C4E8; --acento-suave: rgba(122, 162, 214, 0.14);
  --sobre-acento: #0B0F14; --ok: #57B98A; --ok-suave: rgba(87, 185, 138, 0.12); --aviso: #E3B341;
  --aviso-suave: rgba(227, 179, 65, 0.12); --peligro: #F2766B; --peligro-suave: rgba(242, 118, 107, 0.12);
  --sombra: none; --qr-papel: #FFFFFF; --qr-tinta: #0B0F14;
  color-scheme: dark;
}
.t-acero {
  --fondo: #EDF0F3; --superficie: #FFFFFF; --superficie2: #F6F8FA; --borde: #D3DAE1; --texto: #15202B;
  --texto2: #4F5D6B; --acento: #2F5D8A; --acento-fuerte: #1F4468; --acento-suave: rgba(47, 93, 138, 0.10);
  --sobre-acento: #FFFFFF; --ok: #1E7A4C; --ok-suave: rgba(30, 122, 76, 0.10); --aviso: #8A5A00;
  --aviso-suave: rgba(138, 90, 0, 0.10); --peligro: #B3261E; --peligro-suave: rgba(179, 38, 30, 0.08);
  --sombra: 0 1px 2px rgba(21, 32, 43, 0.06); --qr-papel: #FFFFFF; --qr-tinta: #0B0F14;
  color-scheme: light;
}

/* ------------------------------------------------------------------------------------------------ Base */

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--fondo); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; background: var(--fondo); color: var(--texto);
  font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 16px; line-height: 24px;
  font-variant-numeric: tabular-nums; -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, p, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--acento); }
@media (hover: hover) { a:hover { color: var(--acento-fuerte); } }
.icono { flex: none; }
.linea { display: block; }
strong { font-weight: 600; }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }
h1:focus, [tabindex='-1']:focus { outline: none; }
.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.carga-inicial { padding: 48px 16px; text-align: center; color: var(--texto2); }

/* ------------------------------------------------------------------------------------------------ Pantalla */

.pantalla { max-width: 480px; margin: 0 auto; padding: calc(16px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 24px max(16px, env(safe-area-inset-left, 0px)); }
.pantalla--nav { padding-bottom: calc(80px + 24px + env(safe-area-inset-bottom, 0px)); }
.pantalla--barra { padding-bottom: calc(96px + 24px + env(safe-area-inset-bottom, 0px)); }

.cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; min-height: 44px; }
.cabecera__nombre { font-size: 18px; line-height: 24px; font-weight: 600; color: var(--texto); overflow-wrap: anywhere; }
.cabecera__marca { margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--texto2); }
.campana {
  position: relative; width: 44px; height: 44px; flex: none; display: flex; align-items: center; justify-content: center;
  padding: 0; background: var(--superficie); color: var(--texto); border: 1px solid var(--borde); border-radius: 10px;
  box-shadow: var(--sombra);
}
.campana__punto {
  position: absolute; top: 8px; right: 9px; width: 12px; height: 12px; border-radius: 50%; background: var(--peligro);
  border: 2px solid var(--superficie);
}

.saludo { margin-top: 24px; }
.saludo h1 { font-size: 24px; line-height: 32px; font-weight: 600; }
.saludo p { margin-top: 2px; color: var(--texto2); }
.titulo-pagina h1 { font-size: 24px; line-height: 32px; font-weight: 600; }
.titulo-pagina p { margin-top: 4px; color: var(--texto2); text-wrap: balance; }
.titulo-pagina--recibos { margin-top: 24px; }
.titulo-pagina--recibos p { margin-top: 2px; }

/* ------------------------------------------------------------------------------------------------ Tarjetas */

.tarjeta {
  margin-top: 16px; padding: 16px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px;
  box-shadow: var(--sombra);
}
.tarjeta--lista { padding: 0; overflow: hidden; }
.tarjeta--seccion { margin-top: 24px; }
.titulo-seccion { font-size: 18px; line-height: 24px; font-weight: 600; }

.insignia {
  display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; border-radius: 14px;
  border: 1px solid transparent; font-size: 14px; line-height: 20px; font-weight: 500; white-space: nowrap;
}
.insignia__punto { width: 8px; height: 8px; flex: none; border-radius: 50%; background: currentColor; }
.insignia--peligro { background: var(--peligro-suave); color: var(--peligro); }
.insignia--ok { background: var(--ok-suave); color: var(--ok); }
.insignia--aviso { background: var(--aviso-suave); color: var(--aviso); }
.insignia--acento { background: var(--acento-suave); color: var(--acento); }
.insignia--neutro { background: var(--superficie2); color: var(--texto2); border-color: var(--borde); }

.estado__insignia { display: flex; align-items: center; }
.estado__lineas { margin-top: 8px; }

.caja { margin-top: 16px; padding: 16px; border-radius: 10px; border: 1px solid var(--acento); background: var(--acento-suave); }
.caja__cabeza { display: flex; align-items: center; gap: 12px; }
.caja__titulo { min-width: 0; font-size: 18px; line-height: 24px; font-weight: 600; color: var(--acento-fuerte); text-wrap: balance; }
.caja__icono { color: var(--acento); }
.caja__texto { margin-top: 8px; }
.caja__accion { margin-top: 12px; }
.caja--peligro { background: var(--peligro-suave); border-color: var(--peligro); }
.caja--peligro .caja__titulo, .caja--peligro .caja__icono { color: var(--peligro); }
.caja--ok { background: var(--ok-suave); border-color: var(--ok); }
.caja--ok .caja__titulo, .caja--ok .caja__icono { color: var(--ok); }
.caja--aviso { background: var(--aviso-suave); border-color: var(--aviso); }
.caja--aviso .caja__titulo, .caja--aviso .caja__icono { color: var(--aviso); }

.pago__etiqueta { color: var(--texto2); }
.pago__total { margin-top: 2px; font-size: 40px; line-height: 48px; font-weight: 600; }
.pago__filas { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--borde); display: flex; flex-direction: column; gap: 8px; }
.fila { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.fila__monto { font-weight: 500; white-space: nowrap; }
.pago__nota { margin-top: 12px; font-size: 14px; line-height: 20px; color: var(--texto2); }

.qr { padding: 20px 16px; text-align: center; }
.qr h2 { font-size: 18px; line-height: 24px; font-weight: 600; }
.qr__papel {
  width: min(280px, 100%); aspect-ratio: 1 / 1; margin: 16px auto 0; background: var(--qr-papel); border: 1px solid var(--borde);
  border-radius: 12px; display: flex; align-items: center; justify-content: center;
}
.qr-svg { display: block; width: 83%; height: auto; aspect-ratio: 1 / 1; }
.qr-svg path { fill: var(--qr-tinta); }
.qr__etiqueta { margin-top: 16px; font-size: 14px; line-height: 20px; color: var(--texto2); }
.qr__numero { font-size: 32px; line-height: 40px; font-weight: 600; letter-spacing: 0.06em; overflow-wrap: anywhere; }
.qr__ayuda { margin-top: 8px; }

.icono-caja {
  width: 40px; height: 40px; flex: none; border-radius: 10px; background: var(--acento-suave); color: var(--acento);
  display: flex; align-items: center; justify-content: center;
}
.saldo { display: flex; align-items: flex-start; gap: 12px; }
.saldo__cuerpo { flex: 1; min-width: 0; }
.saldo__cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.saldo__titulo { font-weight: 600; }
.saldo__monto { font-size: 20px; line-height: 28px; font-weight: 600; }
.saldo__texto { margin-top: 4px; font-size: 14px; line-height: 20px; color: var(--texto2); }

.tiendas__lista { margin-top: 12px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; box-shadow: var(--sombra); }
.tienda { padding: 16px; display: flex; align-items: flex-start; gap: 12px; }
.tienda + .tienda { border-top: 1px solid var(--borde); }
.tienda__cuerpo { flex: 1; min-width: 0; }
.tienda__nombre { font-weight: 600; overflow-wrap: anywhere; }
.dato { display: flex; align-items: flex-start; gap: 6px; margin-top: 4px; font-size: 14px; line-height: 20px; color: var(--texto2); }
.dato + .dato { margin-top: 2px; }
.dato .icono { margin-top: 2px; }
.tiendas__vacio { margin-top: 12px; padding: 16px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; box-shadow: var(--sombra); color: var(--texto2); }

.dias h2 { font-size: 18px; line-height: 24px; font-weight: 600; }
.dias__texto { margin-top: 4px; color: var(--texto2); text-wrap: balance; }
.dias__accion { margin-top: 16px; }

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

.boton {
  width: 100%; min-height: 56px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 16px;
  background: var(--acento); color: var(--sobre-acento); border: 0; border-radius: 10px; font-size: 16px; line-height: 22px;
  font-weight: 600; text-align: center; text-decoration: none; touch-action: manipulation;
}
@media (hover: hover) { .boton:hover { background: var(--acento-fuerte); color: var(--sobre-acento); } }
.boton:active { background: var(--acento-fuerte); }
.boton[disabled], .boton[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; }
.boton--grande { min-height: 64px; padding: 10px 16px; }
.boton--secundario { min-height: 52px; background: var(--superficie2); color: var(--texto); border: 1px solid var(--borde); font-weight: 500; }
@media (hover: hover) { .boton--secundario:hover { background: var(--superficie2); color: var(--texto); border-color: var(--acento); } }
.boton--secundario:active { background: var(--superficie2); border-color: var(--acento); }
.boton__texto { max-width: 240px; }

.enlace-volver {
  margin: 8px 0 0 -16px; min-height: 44px; padding: 0 12px 0 8px; display: inline-flex; align-items: center; gap: 4px;
  font-weight: 500; text-decoration: none; color: var(--acento); background: none; border: 0;
}
@media (hover: hover) { .enlace-volver:hover { color: var(--acento-fuerte); } }

.barra-inferior {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; padding: 16px 16px calc(24px + env(safe-area-inset-bottom, 0px));
  background: var(--fondo); border-top: 1px solid var(--borde);
}
.barra-inferior__interior { max-width: 448px; margin: 0 auto; }
.barra-inferior__error { margin: 0 0 12px; padding: 12px; border-radius: 10px; background: var(--peligro-suave); border: 1px solid var(--peligro); color: var(--peligro); font-weight: 500; }

/* ------------------------------------------------------------------------------------------------ Navegación */

.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; height: calc(80px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--fondo); border-top: 1px solid var(--borde);
}
.nav__interior { max-width: 480px; height: 80px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nav a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--texto2);
  font-size: 14px; line-height: 20px; font-weight: 500; text-decoration: none;
}
.nav a[aria-current='page'] { color: var(--acento); font-weight: 600; }
.nav__pildora { width: 64px; height: 32px; border-radius: 16px; display: flex; align-items: center; justify-content: center; }
.nav a[aria-current='page'] .nav__pildora { background: var(--acento-suave); }

/* ------------------------------------------------------------------------------------------------ PIN */

.pantalla-pin {
  max-width: 480px; min-height: 100vh; min-height: 100dvh; margin: 0 auto; display: flex; flex-direction: column;
  padding: calc(16px + env(safe-area-inset-top, 0px)) 16px 0;
}
.pin__contenido { margin-top: 56px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.pin__saludo { font-size: 18px; line-height: 24px; font-weight: 500; color: var(--texto2); }
.pin__titulo { font-size: 26px; line-height: 34px; font-weight: 600; }
.pin__saludo + .pin__titulo { margin-top: 4px; }
.pin__explica { margin-top: 8px; max-width: 340px; color: var(--texto2); }
.puntos { display: flex; gap: 24px; }
.punto { width: 24px; height: 24px; flex: none; border-radius: 50%; border: 2px solid var(--texto2); }
.punto--lleno { background: var(--acento); border-color: var(--acento); }
.puntos--error { animation: sacudir 0.35s; }
.puntos--error .punto { border-color: var(--peligro); }
.puntos--error .punto--lleno { background: var(--peligro); }
.pin__puntos { margin-top: 40px; }
.pin__puntos--corto { margin-top: 32px; }
.pin__paso { margin-top: 24px; color: var(--texto2); }
.pin__mensaje { margin-top: 16px; max-width: 320px; font-weight: 500; color: var(--peligro); text-wrap: balance; }
.pin__mensaje--info { color: var(--texto2); font-weight: 400; }
.pin__olvido {
  margin-top: 20px; min-height: 44px; padding: 0 12px; display: inline-flex; align-items: center; font-weight: 500;
  text-decoration: underline; text-underline-offset: 3px; color: var(--acento);
}
.pin__olvido-texto { max-width: 300px; font-size: 14px; line-height: 20px; color: var(--texto2); text-wrap: balance; }
.nota {
  margin-top: 20px; width: 100%; padding: 12px 16px; display: flex; align-items: flex-start; gap: 12px; text-align: left;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; box-shadow: var(--sombra);
  font-size: 14px; line-height: 20px; color: var(--texto2);
}
.nota .icono { margin-top: 1px; }
.nota--consejo { margin-top: 32px; }
.nota strong { color: var(--texto); }
.teclado-zona {
  margin: auto -16px 0; padding: 16px 16px calc(24px + env(safe-area-inset-bottom, 0px)); background: var(--fondo);
  border-top: 1px solid var(--borde);
}
.teclado { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tecla {
  height: 72px; display: flex; align-items: center; justify-content: center; padding: 0; background: var(--superficie);
  color: var(--texto); border: 1px solid var(--borde); border-radius: 12px; box-shadow: var(--sombra); font-size: 32px;
  line-height: 40px; font-weight: 500; touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
.tecla:active { background: var(--acento-suave); border-color: var(--acento); }
.tecla--borrar { background: var(--superficie2); }
.tecla[disabled] { opacity: 0.5; cursor: wait; }
@media (max-height: 740px) {
  .pin__contenido { margin-top: 28px; }
  .pin__puntos { margin-top: 24px; }
  .pin__puntos--corto { margin-top: 20px; }
  .nota--consejo { margin-top: 20px; }
  .tecla { height: 60px; font-size: 28px; }
  .teclado { gap: 10px; }
  .teclado-zona { padding-top: 12px; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
}

/* ------------------------------------------------------------------------------------------------ Liga no válida / sin conexión */

.aviso-pagina { margin-top: 56px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.aviso-pagina__icono {
  width: 112px; height: 112px; border-radius: 50%; background: var(--acento-suave); color: var(--acento); display: flex;
  align-items: center; justify-content: center;
}
.aviso-pagina__titulo { margin-top: 28px; font-size: 26px; line-height: 34px; font-weight: 600; text-wrap: balance; }
.aviso-pagina__texto { margin-top: 8px; max-width: 320px; color: var(--texto2); text-wrap: balance; }
.pasos h2 { font-size: 18px; line-height: 24px; font-weight: 600; }
.pasos ol { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; }
.pasos li { display: flex; align-items: flex-start; gap: 12px; }
.pasos__numero {
  width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--acento-suave); color: var(--acento);
  display: flex; align-items: center; justify-content: center; font-size: 14px; line-height: 20px; font-weight: 600;
}
.pasos__texto { padding-top: 2px; text-wrap: balance; }
.tarjeta--pasos { margin-top: 32px; }
.privacidad { margin-top: 20px; display: flex; align-items: flex-start; justify-content: center; gap: 8px; font-size: 14px; line-height: 20px; color: var(--texto2); }
.privacidad .icono { margin-top: 1px; }

/* ------------------------------------------------------------------------------------------------ Recibos */

.recibos { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.recibos__grupo { background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; box-shadow: var(--sombra); overflow: hidden; }
.recibos__titulo-grupo {
  padding: 10px 16px; background: var(--superficie2); border-bottom: 1px solid var(--borde); font-size: 14px; line-height: 20px;
  font-weight: 500; color: var(--texto2);
}
.recibo-fila {
  display: flex; align-items: center; gap: 12px; padding: 16px; min-height: 88px; text-decoration: none; color: var(--texto);
}
@media (hover: hover) { .recibo-fila:hover { color: var(--texto); background: var(--superficie2); } }
.recibo-fila:active { background: var(--superficie2); }
.recibo-fila + .recibo-fila { border-top: 1px solid var(--borde); }
.recibo-fila__cuerpo { flex: 1; min-width: 0; }
.recibo-fila__fecha { font-weight: 600; }
.recibo-fila__detalle { margin-top: 2px; font-size: 14px; line-height: 20px; color: var(--texto2); overflow-wrap: anywhere; }
.recibo-fila__folio { font-size: 14px; line-height: 20px; color: var(--texto2); }
.recibo-fila__monto { font-size: 18px; line-height: 24px; font-weight: 600; white-space: nowrap; }
.recibo-fila__monto--anulado { text-decoration: line-through; color: var(--texto2); }
.recibo-fila .icono { color: var(--texto2); }
.consejo { margin-top: 20px; display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 20px; color: var(--texto2); }
.vacio { margin-top: 32px; padding: 32px 16px; text-align: center; background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; box-shadow: var(--sombra); }
.vacio .icono-caja { margin: 0 auto; }
.vacio h2, .vacio__titulo { margin-top: 12px; font-size: 18px; line-height: 24px; font-weight: 600; }
.vacio p { margin-top: 4px; color: var(--texto2); text-wrap: balance; }

.recibo { margin-top: 8px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; box-shadow: var(--sombra); overflow: hidden; }
.recibo__arriba { padding: 20px; }
.recibo__cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.recibo__cabeza h1 { font-size: 18px; line-height: 24px; font-weight: 600; }
.recibo__total { margin-top: 12px; font-size: 44px; line-height: 52px; font-weight: 600; }
.recibo__total--anulado { text-decoration: line-through; color: var(--texto2); }
.recibo__cuando { margin-top: 2px; color: var(--texto2); }
.recibo__bloque { padding: 20px; border-top: 1px dashed var(--borde); display: flex; flex-direction: column; gap: 12px; }
.recibo__dato { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.recibo__etiqueta { flex: none; font-size: 14px; line-height: 20px; color: var(--texto2); }
.recibo__valor { min-width: 0; text-align: right; font-weight: 500; overflow-wrap: anywhere; }
.recibo__valor--total { font-weight: 600; }
.recibo__total-fila { border-top: 1px solid var(--borde); padding-top: 12px; }
.recibo__proveedor { padding: 20px; background: var(--superficie2); border-top: 1px solid var(--borde); }
.recibo__proveedor h2 { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--texto2); }
.recibo__proveedor-nombre { margin-top: 8px; font-weight: 600; }
.recibo__proveedor-linea { margin-top: 2px; }
.recibo__proveedor-linea + .recibo__proveedor-linea { margin-top: 0; }
.recibo__compartir { margin-top: 16px; }

/* ------------------------------------------------------------------------------------------------ Pedir días */

.promesa__pregunta { margin-top: 28px; font-weight: 600; }
.promesa__titulo { margin-top: 8px; }
.opciones { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; }
.opcion { position: relative; display: block; background: var(--superficie); border-radius: 12px; }
.opcion__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.opcion__caja {
  height: 72px; display: flex; align-items: center; gap: 12px; padding: 0 16px; border: 1px solid var(--borde); border-radius: 12px;
  background: var(--superficie); color: var(--texto);
}
.opcion__radio { width: 24px; height: 24px; flex: none; border-radius: 50%; border: 2px solid var(--texto2); display: flex; align-items: center; justify-content: center; }
.opcion__radio::after { content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--acento); transform: scale(0); }
.opcion__dias { flex: 1; font-size: 20px; line-height: 28px; font-weight: 600; }
.opcion__fecha { color: var(--texto2); }
.opcion__input:checked + .opcion__caja { border: 2px solid var(--acento); background: var(--acento-suave); padding: 0 15px; }
.opcion__input:checked + .opcion__caja .opcion__radio { border-color: var(--acento); }
.opcion__input:checked + .opcion__caja .opcion__radio::after { transform: scale(1); }
.opcion__input:focus-visible + .opcion__caja { outline: 3px solid var(--acento); outline-offset: 2px; }
.nueva-fecha { margin-top: 20px; background: var(--superficie); border-radius: 12px; }
.nueva-fecha__caja { padding: 16px; border-radius: 12px; background: var(--acento-suave); border: 1px solid var(--acento); display: flex; align-items: flex-start; gap: 12px; }
.nueva-fecha__caja .icono { color: var(--acento); }
.nueva-fecha__chico { font-size: 14px; line-height: 20px; color: var(--texto2); }
.nueva-fecha__fecha { margin-top: 2px; font-size: 24px; line-height: 32px; font-weight: 600; }
.nueva-fecha__hora { margin-top: 2px; font-size: 14px; line-height: 20px; color: var(--texto2); }
.promesa__avisos { margin-top: 28px; display: flex; flex-direction: column; gap: 16px; }
.promesa__avisos li { display: flex; align-items: flex-start; gap: 12px; }
.promesa__avisos li span { text-wrap: balance; }
.promesa__avisos .icono { color: var(--texto2); }
.promesa__avisos .icono--aviso { color: var(--aviso); }
.promesa__listo { margin-top: 56px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.promesa__listo .aviso-pagina__icono { background: var(--ok-suave); color: var(--ok); }

/* ------------------------------------------------------------------------------------------------ Avisos, hoja y mensajes */

.hoja {
  width: min(480px, 100%); max-width: 100%; margin: auto auto 0; padding: 0; background: var(--superficie); color: var(--texto);
  border: 1px solid var(--borde); border-bottom: 0; border-radius: 16px 16px 0 0;
}
.hoja::backdrop { background: rgba(0, 0, 0, 0.55); }
.hoja__contenido { padding: 20px 16px calc(24px + env(safe-area-inset-bottom, 0px)); }
.hoja__cabeza { display: flex; align-items: center; gap: 12px; }
.hoja__cabeza h2 { font-size: 20px; line-height: 28px; font-weight: 600; }
.hoja__texto { margin-top: 12px; color: var(--texto2); text-wrap: balance; }
.hoja__estado { margin-top: 12px; padding: 12px 16px; border-radius: 10px; border: 1px solid var(--borde); background: var(--superficie2); }
.hoja__estado--ok { border-color: var(--ok); background: var(--ok-suave); color: var(--ok); font-weight: 500; }
.hoja__estado--error { border-color: var(--peligro); background: var(--peligro-suave); color: var(--peligro); font-weight: 500; }
.hoja__acciones { margin-top: 20px; display: flex; flex-direction: column; gap: 12px; }

.sin-red {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 16px;
  background: linear-gradient(var(--aviso-suave), var(--aviso-suave)), var(--fondo); color: var(--aviso);
  border-bottom: 1px solid var(--aviso); font-size: 14px; line-height: 20px; font-weight: 500; text-align: center;
}
.mensaje-flotante {
  position: fixed; left: 16px; right: 16px; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); z-index: 30; max-width: 448px;
  margin: 0 auto; padding: 12px 16px; border-radius: 10px; background: var(--texto); color: var(--fondo); font-weight: 500;
  text-align: center; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}
.mensaje-flotante[hidden] { display: none; }

.esqueleto { border-radius: 8px; background: linear-gradient(90deg, var(--superficie2) 0%, var(--borde) 50%, var(--superficie2) 100%); background-size: 200% 100%; animation: brillo 1.4s linear infinite; }
.esqueleto--linea { height: 20px; }
.esqueleto--tarjeta { height: 140px; margin-top: 16px; border-radius: 12px; }
.esqueleto--titulo { height: 32px; width: 60%; margin-top: 24px; }
.esqueleto--ancho { width: 70%; }
.esqueleto--recibo { height: 360px; margin-top: 8px; border-radius: 12px; }

@keyframes sacudir { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-10px); } 40% { transform: translateX(10px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(6px); } }
@keyframes brillo { from { background-position: 200% 0; } to { background-position: -200% 0; } }

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

/* En computadora: la misma columna de celular, centrada. */
@media (min-width: 520px) {
  body { background: var(--fondo); }
}