/* Alcancía móvil: estilos.
   Sin nada en línea (la política de seguridad del sitio lo prohíbe): todo se resuelve con clases. */

@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/fraunces-latin-600-normal.woff2") format("woff2"); }

:root {
  --verde-900: #1F3D33; --verde-800: #26493D; --verde-700: #2E5A4A; --verde-100: #E4EFE8; --verde-50: #F0F6F2;
  --papel: #FBF8F3; --crema: #F3EDE3; --arena: #E7DCCB; --arena-2: #D9CCB6; --blanco: #FFFFFF;
  --tinta: #1E2420; --tinta-2: #5B625C; --tinta-3: #7D847F;
  --terracota: #B5533C; --terracota-50: #F7E9E4; --ambar: #C99A3F; --ambar-50: #F8F0DC; --ambar-tx: #7A5A12;
  --primario: var(--verde-900); --primario-tx: var(--papel); --primario-hover: var(--verde-700);
  --fondo: var(--papel); --superficie: var(--blanco); --linea: var(--arena); --linea-2: var(--arena-2);
  --sombra: 0 1px 2px rgba(30, 36, 32, .08), 0 8px 24px -12px rgba(30, 36, 32, .22);
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --texto: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --verde-900: #8FC4A9; --verde-800: #6FAE91; --verde-700: #7DBB9E; --verde-100: #1F3128; --verde-50: #19271F;
    --papel: #121815; --crema: #1A211D; --arena: #2A332E; --arena-2: #3A453F; --blanco: #1B231F;
    --tinta: #EDE8DE; --tinta-2: #B4BBB4; --tinta-3: #8C948D;
    --terracota: #E08A72; --terracota-50: #3A211B; --ambar: #D8AE58; --ambar-50: #33291A; --ambar-tx: #E5C173;
    --primario: #5FA184; --primario-tx: #0E1511; --primario-hover: #74B698;
    --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; }
body { background: var(--fondo); color: var(--tinta); font-family: var(--texto); font-size: 16px; line-height: 1.4; overscroll-behavior: none; -webkit-text-size-adjust: 100%; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--primario); outline-offset: 2px; }
[hidden] { display: none !important; }
.espacio { height: 12px; }
.tn { font-variant-numeric: tabular-nums; }

#app { height: 100%; height: 100dvh; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.pantalla { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* ── Cabecera ── */
.cab { flex: none; padding: max(14px, env(safe-area-inset-top)) 20px 6px; }
.cab-fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.titulo { font-family: var(--display); font-weight: 600; font-size: 1.85rem; line-height: 2.1rem; margin: 0; color: var(--verde-900); }
.sub { margin: 2px 0 0; color: var(--tinta-2); font-size: .95rem; }
.meta { margin: 2px 0 0; font-size: .8rem; color: var(--tinta-3); }
.meta.alerta { color: var(--ambar-tx); }
.icono-btn { width: 44px; height: 44px; border-radius: 50%; border: 0; background: none; display: grid; place-items: center; color: var(--tinta-2); }
.icono-btn svg { width: 22px; height: 22px; }
.chip { font-size: .78rem; font-weight: 600; padding: 4px 11px; border-radius: 999px; white-space: nowrap; border: 0; }
.chip.ok { background: var(--verde-100); color: var(--verde-900); }
.chip.espera { background: var(--ambar-50); color: var(--ambar-tx); }
.chip.mal { background: var(--terracota-50); color: var(--terracota); }
.chip.neu { background: var(--crema); color: var(--tinta-2); }

/* ── Barra de pestañas ── */
.tabs { flex: none; display: grid; grid-template-columns: repeat(3, 1fr); background: var(--superficie); border-top: 1px solid var(--linea); padding: 6px 6px max(10px, env(safe-area-inset-bottom)); }
.tab { background: none; border: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; min-height: 52px; font-size: .74rem; font-weight: 500; color: var(--tinta-3); border-radius: 12px; }
.tab svg { width: 24px; height: 24px; }
.tab[aria-current="page"] { color: var(--verde-900); font-weight: 600; }
.tab.central svg { width: 36px; height: 36px; padding: 6px; border-radius: 50%; background: var(--primario); color: var(--primario-tx); }
.tab.central[aria-current="page"] svg { box-shadow: 0 0 0 3px var(--verde-100); }

/* ── Pendientes ── */
.lista { padding: 4px 20px 24px; }
.grupo { margin: 16px 0 4px; font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); }
.grupo.vencido { color: var(--terracota); }
.fila { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--linea); user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: pan-y; }
.fila:last-child { border-bottom: 0; }
.tilde { flex: none; width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--linea-2); background: var(--superficie); display: grid; place-items: center; color: transparent; transition: background .15s, border-color .15s, color .15s; }
.tilde svg { width: 24px; height: 24px; stroke-width: 2.6; }
.tilde:disabled { cursor: default; }
.fila.pagada .tilde { background: var(--primario); border-color: var(--primario); color: var(--primario-tx); }
.fila-txt { flex: 1; min-width: 0; }
.fila-txt b { display: block; font-weight: 600; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fila-txt span { display: block; font-size: .8rem; color: var(--tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fila-monto { font-weight: 600; text-align: right; white-space: nowrap; }
.fila-monto small { display: block; font-size: .7rem; font-weight: 600; color: var(--ambar-tx); }
.fila.vencida .fila-monto { color: var(--terracota); }
.fila.pagada .fila-txt b, .fila.pagada .fila-monto { color: var(--tinta-3); font-weight: 500; }
.pista { margin: 16px 0 4px; text-align: center; font-size: .78rem; color: var(--tinta-3); }
.vacio { margin: 48px 28px; text-align: center; color: var(--tinta-2); }
.vacio h3 { font-family: var(--display); font-size: 1.4rem; color: var(--verde-900); margin: 0 0 6px; }
.oculto { filter: blur(7px); user-select: none; }
.aviso { margin: 8px 20px 0; padding: 10px 14px; border-radius: 12px; background: var(--ambar-50); color: var(--ambar-tx); font-size: .85rem; line-height: 1.35; }
.aviso.mal { background: var(--terracota-50); color: var(--terracota); }

/* ── Gasto rápido ── */
.atajos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 6px 20px 0; }
.atajo { min-height: 46px; border-radius: 14px; border: 1px solid var(--linea-2); background: var(--superficie); font-size: .92rem; font-weight: 500; padding: 4px 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atajo[aria-pressed="true"] { background: var(--primario); border-color: var(--primario); color: var(--primario-tx); }
.atajo.mas { border-style: dashed; color: var(--tinta-2); }
.pills { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 20px 0; }
.pill { min-height: 34px; border: 0; background: var(--crema); border-radius: 999px; padding: 6px 13px; font-size: .82rem; font-weight: 500; color: var(--tinta-2); }
.pill b { font-weight: 600; color: var(--tinta); }
.monto { padding: 8px 20px 6px; display: flex; align-items: baseline; justify-content: center; gap: 6px; }
.monto small { font-size: 1.4rem; color: var(--tinta-3); font-weight: 500; }
.monto strong { font-size: 2.9rem; line-height: 1.15; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.monto.vacio-m strong { color: var(--arena-2); }
.entrada { padding: 0 20px 12px; margin-top: auto; }

/* ── Teclado ── */
.teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tecla { height: 52px; border-radius: 14px; border: 1px solid var(--linea); background: var(--superficie); font-size: 1.35rem; font-weight: 500; font-variant-numeric: tabular-nums; display: grid; place-items: center; }
.tecla:active { background: var(--crema); }
.tecla.fantasma { background: none; border-color: transparent; }
.tecla svg { width: 24px; height: 24px; }
.compacto .tecla { height: 44px; font-size: 1.2rem; }
.boton { display: block; width: 100%; min-height: 52px; border: 0; border-radius: 14px; background: var(--primario); color: var(--primario-tx); font-size: 1.02rem; font-weight: 600; padding: 0 16px; }
.boton:disabled { background: var(--arena-2); color: var(--tinta-3); cursor: default; }
.boton:not(:disabled):active { background: var(--primario-hover); }
.boton.sec { background: none; border: 1px solid var(--linea-2); color: var(--tinta-2); }
.boton.peligro { background: var(--terracota); color: #fff; }
.enlace { background: none; border: 0; color: var(--verde-900); font-weight: 600; padding: 10px 4px; text-decoration: underline; text-underline-offset: 3px; }

/* ── Cuentas ── */
.cuenta { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--linea); padding: 14px 0; min-height: 64px; }
.cuenta:last-of-type { border-bottom: 0; }
.punto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: var(--verde-700); }
.punto.a { background: var(--ambar); }
.punto.r { background: var(--terracota); }

/* ── Bloqueo, vinculación ── */
.centro { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; padding: max(28px, env(safe-area-inset-top)) 24px max(18px, env(safe-area-inset-bottom)); text-align: center; overflow-y: auto; }
.moneda { width: 64px; height: 64px; }
.centro h1 { font-family: var(--display); font-size: 1.8rem; line-height: 2.1rem; margin: 14px 0 6px; color: var(--verde-900); }
.centro p { margin: 0 0 8px; color: var(--tinta-2); }
.centro .teclado { width: 100%; max-width: 340px; margin-top: auto; }
.puntos { display: flex; gap: 16px; margin: 26px 0 10px; height: 16px; }
.puntos i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--linea-2); transition: background .12s, border-color .12s; }
.puntos i.on { background: var(--verde-900); border-color: var(--verde-900); }
.puntos.error { animation: sacudir .35s; }
@keyframes sacudir { 20% { transform: translateX(-9px); } 40% { transform: translateX(9px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(6px); } }
.mensaje { min-height: 22px; font-size: .9rem; font-weight: 600; margin-bottom: 8px; color: var(--terracota); }
.mensaje.ok { color: var(--verde-700); }
.pie { margin-top: 14px; font-size: .8rem; color: var(--tinta-3); }
.mano { font-family: var(--display); font-size: 1.05rem; color: var(--verde-700); margin-top: 6px; }
.bloque { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.campo { text-align: left; }
.campo label { display: block; font-size: .82rem; color: var(--tinta-2); margin-bottom: 4px; }
.campo input, .campo select, .campo textarea { width: 100%; min-height: 48px; border: 1px solid var(--linea-2); border-radius: 12px; padding: 0 12px; background: var(--superficie); font-size: 1rem; }
.campo textarea { padding: 10px 12px; min-height: 96px; font-size: .85rem; resize: none; word-break: break-all; }
.pasos { display: flex; gap: 6px; margin: 4px 0 0; }
.pasos i { width: 26px; height: 4px; border-radius: 2px; background: var(--linea-2); }
.pasos i.hecho { background: var(--verde-700); }
.girando { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--linea-2); border-top-color: var(--verde-700); animation: girar 1s linear infinite; margin: 20px auto 6px; }
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .girando { animation-duration: 3s; } .puntos.error { animation: none; } .tilde { transition: none; } }

/* ── Escáner ── */
.escaner { position: absolute; inset: 0; z-index: 30; background: #0F1411; display: flex; flex-direction: column; color: #fff; }
.escaner-cab { display: flex; justify-content: space-between; align-items: center; padding: max(12px, env(safe-area-inset-top)) 14px 8px; }
.escaner-cab .icono-btn { color: #fff; background: rgba(255, 255, 255, .14); }
.visor { position: relative; flex: 1; min-height: 0; margin: 6px 14px 0; border-radius: 20px; overflow: hidden; background: #000; }
.visor video { width: 100%; height: 100%; object-fit: cover; }
.visor .marco { position: absolute; inset: 14%; border: 3px solid rgba(255, 255, 255, .85); border-radius: 22px; box-shadow: 0 0 0 999px rgba(0, 0, 0, .35); }
.escaner-pie { padding: 16px 20px max(20px, env(safe-area-inset-bottom)); text-align: center; }
.escaner-pie p { margin: 0 0 12px; color: rgba(255, 255, 255, .85); }

/* ── Hojas y avisos ── */
.fondo-hoja { position: absolute; inset: 0; z-index: 20; background: rgba(20, 24, 22, .45); }
.hoja { position: absolute; left: 0; right: 0; bottom: 0; z-index: 21; background: var(--fondo); border-radius: 22px 22px 0 0; padding: 16px 18px max(18px, env(safe-area-inset-bottom)); box-shadow: 0 -10px 30px rgba(0, 0, 0, .2); max-height: 92%; overflow-y: auto; }
.hoja h3 { margin: 4px 0 2px; font-family: var(--display); font-size: 1.35rem; line-height: 1.7rem; color: var(--verde-900); }
.hoja .sub { margin-bottom: 12px; }
.opcion { display: block; width: 100%; text-align: left; min-height: 52px; background: var(--superficie); border: 1px solid var(--linea); border-radius: 14px; padding: 12px 14px; margin-top: 8px; font-weight: 500; }
.opcion[aria-pressed="true"] { border-color: var(--primario); box-shadow: inset 0 0 0 1px var(--primario); }
.opcion small { display: block; font-weight: 400; color: var(--tinta-2); font-size: .8rem; }
.opcion.cancelar { background: none; border-color: transparent; color: var(--tinta-2); }
.dato { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--linea); font-size: .92rem; }
.dato span:first-child { color: var(--tinta-3); }
.aviso-toast { position: absolute; left: 12px; right: 12px; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 25; background: var(--tinta); color: var(--papel); border-radius: 14px; padding: 13px 14px 16px; display: flex; align-items: center; gap: 12px; overflow: hidden; box-shadow: var(--sombra); }
.aviso-toast span { flex: 1; font-size: .95rem; }
.aviso-toast button { background: none; border: 0; color: #F0D9A0; font-weight: 600; padding: 8px; min-height: 40px; }
.aviso-toast i { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: #F0D9A0; transition: width 5s linear; }
.aviso-toast i.corre { width: 0; }
@media (prefers-color-scheme: dark) { .aviso-toast { background: #E9E3D6; color: #16201B; } .aviso-toast button { color: #6A4E0E; } .aviso-toast i { background: #6A4E0E; } }
@media (prefers-reduced-motion: reduce) { .aviso-toast i { transition: none; } }