/* ------------------------------------------------------------------------
   Mis Finanzas
   Fondo blanco con marco azul turquesa, como el CRM de Lubexa: cabecera arriba y, en
   celular, la barra de abajo; desde 900 px, menú lateral. Siempre en claro, aunque el
   equipo esté en modo oscuro. Un solo color de acción: el degradado de cian a
   turquesa. Primero para el celular.
   ------------------------------------------------------------------------ */

:root {
    --suelo: #F4F8FB; --papel: #FFFFFF; --papel-2: #EAF2F7; --tinta: #10293C; --tinta-2: #45596B; --tenue: #687B8C;
    --linea: #DAE4EC; --linea-2: #C3D1DC; --margen: rgba(180, 35, 24, .22);
    --billete: #0A6F8E; --billete-luz: #1293AB; --grabado: rgba(170, 236, 248, .3); --sobre: #F0FBFD; --sobre-tenue: rgba(240, 251, 253, .76);
    /* Acción: degradado de cian a turquesa con texto blanco (contraste ≥ 4.5 en los dos extremos). */
    --accion: #0781A3; --accion-2: #0A8279; --accion-tinta: #FFFFFF; --accion-luz: #7FE3F2; --accion-sombra: rgb(7 129 163 / .45);
    --barra: #0A7EA0; --barra-hover: #075A73; --flotante-acento: #5FD4EA;
    /* Marco azul (cabecera, barra de abajo, menú lateral) y portada de Entrar. */
    --marco-1: #0E86A8; --marco-2: #17A39C; --marco-sombra: rgb(8 60 80 / .35);
    --portada-1: #E5F6FB; --portada-2: #D0EDF5; --portada-brillo: rgb(20 190 176 / .22);
    --ilus-1: #4CC5DD; --ilus-2: #A6E1EE; --ilus-3: #2A9FBC; --ilus-moneda: #14AFA2;
    --bien: #1B7447; --bien-suave: #DFF0E5; --mal: #B42318; --mal-suave: #FBE5E2; --aviso: #8A5300; --aviso-suave: #F7E9CC;
    /* Colores de las deudas, validados para daltonismo en este orden. d0: sin color propio. */
    --d0: #8795A2; --d1: #2F63B5; --d2: #C4552F; --d3: #1F9377; --d4: #9B4A9E; --d5: #B8860B;
    --sombra: 0 1px 2px rgb(16 41 60 / .05), 0 12px 28px -16px rgb(16 41 60 / .28);
    --f-ui: "Chivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --f-dato: "Chivo Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

    /* Nombres de la primera versión, para los formularios que siguen usándolos. */
    --fondo: var(--suelo); --acento: var(--barra); --acento-tinta: #FFFFFF; --linea-fuerte: var(--linea-2);
    --malo: var(--mal); --malo-suave: var(--mal-suave); --bueno: var(--bien); --bueno-suave: var(--bien-suave); --radio: 18px;
    color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--suelo); color: var(--tinta); font: 15px/1.45 var(--f-ui); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { line-height: 1.2; text-wrap: balance; }
h1:focus { outline: none; }
a { color: var(--barra); }
button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--barra); outline-offset: 2px; }
.i { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.i.relleno { fill: currentColor; stroke: none; }
.num { font-variant-numeric: tabular-nums; }
.eyebrow { font: 500 11px/1.2 var(--f-dato); letter-spacing: .12em; text-transform: uppercase; color: var(--tenue); }
.nota { font-size: 13px; color: var(--tinta-2); }
.nota b { color: var(--tinta); font-weight: 600; }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.txt-mal { color: var(--mal); }
.txt-bien { color: var(--bien); }
.txt-aviso { color: var(--aviso); }

/* --- Marco azul: cabecera, contenido y barra de abajo ---------------------- */

.cabecera { position: fixed; top: 0; left: 0; right: 0; z-index: 22; height: calc(56px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 12px 0 16px;
    display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #FFFFFF;
    background: linear-gradient(100deg, var(--marco-1), var(--marco-2)); box-shadow: 0 6px 18px -10px var(--marco-sombra); }
.cabecera-marca { display: flex; align-items: center; gap: 10px; color: #FFFFFF; text-decoration: none; font: 800 18px/1 var(--f-ui); letter-spacing: -.02em; }
.cabecera-marca i { width: 32px; height: 32px; border-radius: 10px; background: #FFFFFF; color: var(--marco-1); display: grid; place-items: center; font: 800 16px/1 var(--f-ui); font-style: normal; }
.cabecera-lado { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cabecera-anotar, .lateral-cabeza, .lateral-fondo { display: none; }
.avatar { flex: none; width: 32px; height: 32px; border-radius: 50%; background: #FFFFFF; color: var(--marco-1); display: grid; place-items: center; font: 800 13px/1 var(--f-ui); letter-spacing: .02em; }

/* Cuenta en la cabecera: en celular solo el círculo; en computadora, nombre y papel. */
.cuenta-menu { position: relative; }
.cabecera-cuenta { display: flex; align-items: center; gap: 8px; color: #FFFFFF; font: inherit; padding: 3px 8px 3px 3px; border-radius: 999px; border: 1px solid rgb(255 255 255 / .4); background: rgb(255 255 255 / .14); cursor: pointer; }
.cabecera-cuenta:hover { background: rgb(255 255 255 / .22); }
.cabecera-quien { display: none; text-align: left; line-height: 1.15; }
.cabecera-quien b { display: block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 700; }
.cabecera-quien small { display: block; font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.cabecera-cuenta .flecha { width: 16px; height: 16px; stroke-width: 2.2; transition: transform .15s; }
.cabecera-cuenta[aria-expanded="true"] .flecha { transform: rotate(180deg); }
.menu-fondo { position: fixed; inset: 0; z-index: 40; border: 0; padding: 0; background: transparent; cursor: default; }
.menu-cuenta { position: absolute; right: 0; top: calc(100% + 10px); z-index: 41; width: min(290px, calc(100vw - 24px)); padding: 8px; display: grid; gap: 2px;
    background: var(--papel); color: var(--tinta); border: 1px solid var(--linea); border-radius: 18px; box-shadow: 0 20px 44px -18px rgb(16 41 60 / .45); animation: menu-aparece .14s ease-out; }
@keyframes menu-aparece { from { opacity: 0; transform: translateY(-6px); } }
.menu-quien { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--linea); }
.menu-quien .avatar, .miembro .avatar, .avatar.grande { background: linear-gradient(135deg, var(--marco-1), var(--marco-2)); color: #FFFFFF; }
.menu-quien .avatar { width: 38px; height: 38px; }
.menu-quien > div { min-width: 0; }
.menu-quien b { display: block; font-size: 14px; }
.menu-quien small { display: block; font-size: 12px; color: var(--tenue); overflow-wrap: anywhere; }
.menu-opcion { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 10px; border: 0; border-radius: 11px; background: none; color: var(--tinta); font: 600 14.5px/1.2 var(--f-ui); text-align: left; text-decoration: none; cursor: pointer; }
.menu-opcion:hover { background: var(--papel-2); }
.menu-opcion .i { color: var(--tinta-2); }
.menu-opcion.salir, .menu-opcion.salir .i { color: var(--mal); }
.menu-cuenta hr { width: 100%; margin: 4px 0; border: 0; border-top: 1px solid var(--linea); }
.menu-cuenta form { margin: 0; }

.vista { max-width: 560px; margin: 0 auto; padding: calc(56px + env(safe-area-inset-top) + 20px) 18px calc(118px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 24px; }
.vista > * { flex-shrink: 0; min-width: 0; }

.barra-inf { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 0 8px calc(14px + env(safe-area-inset-bottom)); height: calc(84px + env(safe-area-inset-bottom));
    display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;
    background: linear-gradient(100deg, var(--marco-1), var(--marco-2)); box-shadow: 0 -6px 18px -10px var(--marco-sombra); }
.etq-lateral { display: none; }
.tab { display: grid; justify-items: center; gap: 4px; color: #FFFFFF; font: 600 10.5px/1 var(--f-ui); text-decoration: none; padding: 6px 0; }
.tab .i { box-sizing: content-box; padding: 3px 12px; border-radius: 10px; }
.tab .i.relleno { width: 18px; height: 18px; padding: 4px 13px; }
.tab.active .i { stroke-width: 2.3; background: rgb(255 255 255 / .24); }
.tab.solo-lateral, .seccion.solo-lateral { display: none; }
.fab { justify-self: center; width: 60px; height: 60px; border-radius: 21px; border: 0; background: #FFFFFF; color: var(--marco-1); display: grid; place-items: center; cursor: pointer; transform: translateY(-14px); box-shadow: 0 12px 24px -10px var(--marco-sombra); }
.fab .i { width: 28px; height: 28px; stroke-width: 2.5; }
.fab:active { transform: translateY(-14px) scale(.95); }

.cabeza { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding-top: 4px; }
.cabeza h1 { margin-top: 6px; font: 800 30px/1.02 var(--f-ui); letter-spacing: -.03em; }
.acciones-cabeza { display: flex; gap: 8px; }
.boton-icono { position: relative; width: 42px; height: 42px; border-radius: 14px; border: 1px solid var(--linea-2); background: var(--papel); color: var(--tinta); display: grid; place-items: center; cursor: pointer; }
.boton-icono:disabled { opacity: .4; cursor: default; }
.badge { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--mal); color: var(--papel); font: 700 11px/20px var(--f-ui); text-align: center; box-shadow: 0 0 0 2px var(--suelo); }

.seccion { display: grid; gap: 10px; align-content: start; }
.seccion-titulo { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.seccion-titulo h2 { font: 700 17px/1.2 var(--f-ui); letter-spacing: -.01em; }
.enlace { background: none; border: 0; padding: 4px 0; color: var(--barra); font-weight: 600; font-size: 13.5px; cursor: pointer; text-decoration: none; }
.enlace:hover { text-decoration: underline; }
.enlace.peligro { color: var(--mal); }
.panel { background: var(--papel); border: 1px solid var(--linea); border-radius: 20px; padding: 16px; box-shadow: var(--sombra); display: grid; gap: 12px; }
.panel.lista { padding: 2px 14px; gap: 0; }
.cifra-grande { font: 800 38px/1 var(--f-ui); letter-spacing: -.035em; }
.cifra-grande .cent { font-size: .45em; font-weight: 600; color: var(--tenue); }

/* --- La tarjeta de la quincena, grabada como billete ---------------------- */

/* Se acomoda a su propio ancho, no al de la pantalla: angosta, las cuentas van abajo en
   tres columnas; desde 480 px, a la derecha del monto y una debajo de otra, para que no
   crezca a lo alto. */
.billete { position: relative; isolation: isolate; overflow: hidden; border-radius: 24px; color: var(--sobre); padding: 18px 18px 16px; container: billete / inline-size;
    background: radial-gradient(130% 100% at 100% 0%, var(--billete-luz) 0%, transparent 60%), var(--billete); }
.billete canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.billete-cuerpo { display: grid; gap: 4px; }
.serie { display: flex; justify-content: space-between; gap: 8px; font: 500 10.5px/1 var(--f-dato); letter-spacing: .14em; text-transform: uppercase; color: var(--sobre-tenue); }
.etiqueta-hero { margin-top: 14px; font-size: 14px; color: var(--sobre-tenue); }
.monto-hero { display: flex; align-items: baseline; font: 800 56px/1 var(--f-ui); letter-spacing: -.04em; }
.monto-hero .signo { font-size: .46em; font-weight: 600; align-self: flex-start; margin: .2em 3px 0 0; }
.monto-hero .cent { font-size: .4em; font-weight: 600; opacity: .7; margin-left: 2px; }
.monto-hero.chico { font-size: 34px; letter-spacing: -.025em; margin: 4px 0; }
.ritmo { font-size: 14px; color: var(--sobre-tenue); }
.ritmo b { color: var(--sobre); font-weight: 600; }
.antes { margin-top: 10px; display: flex; gap: 8px; align-items: center; font-size: 13px; background: rgb(0 0 0 / .2); border-radius: 12px; padding: 8px 10px; }
.antes .i { width: 16px; height: 16px; color: var(--accion-luz); }
.cuentas { margin-top: 12px; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgb(240 251 253 / .18); padding-top: 12px; }
.cuenta { display: grid; gap: 3px; min-width: 0; }
.cuenta + .cuenta { border-left: 1px solid rgb(240 251 253 / .14); padding-left: 12px; }
.cuenta span { font: 500 10px/1 var(--f-dato); letter-spacing: .1em; text-transform: uppercase; color: var(--sobre-tenue); }
.cuenta b { font: 700 16px/1.2 var(--f-ui); font-variant-numeric: tabular-nums; }
.boton-billete { justify-self: start; margin-top: 12px; border: 0; border-radius: 12px; padding: 10px 16px; background: var(--sobre); color: var(--billete); font-weight: 700; cursor: pointer; }
@container billete (min-width: 480px) {
    .billete-cuerpo { grid-template-columns: minmax(0, 1fr) auto; column-gap: 28px; grid-template-areas: "serie serie" "etiqueta etiqueta" "monto cuentas" "ritmo cuentas" "antes antes"; }
    .serie { grid-area: serie; margin-bottom: 10px; }
    .etiqueta-hero { grid-area: etiqueta; margin-top: 0; }
    .monto-hero { grid-area: monto; font-size: clamp(42px, 9cqi, 52px); }
    .ritmo { grid-area: ritmo; }
    .antes { grid-area: antes; }
    .cuentas { grid-area: cuentas; margin: 0; padding: 0 0 0 24px; border-top: 0; border-left: 1px solid rgb(240 251 253 / .18); grid-template-columns: auto; align-content: center; gap: 12px; }
    .cuenta { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; }
    .cuenta + .cuenta { border-left: 0; padding-left: 0; }
    .boton-billete { grid-area: cuentas; align-self: center; margin-top: 0; }
}

/* --- Atajos, filas y píldoras ------------------------------------------- */

.atajos { display: flex; gap: 8px; overflow-x: auto; margin: 0 -18px; padding: 2px 18px 6px; scrollbar-width: none; }
.atajos::-webkit-scrollbar { display: none; }
.atajo { flex: none; display: flex; align-items: center; gap: 9px; padding: 7px 14px 7px 7px; border-radius: 16px; background: var(--papel); border: 1px solid var(--linea); cursor: pointer; box-shadow: var(--sombra); text-align: left; }
.atajo:active { transform: scale(.97); }
.atajo small { display: block; font: 500 11px/1.25 var(--f-dato); color: var(--tenue); }
.atajo strong { font-weight: 600; font-size: 14px; }
.ic { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--papel-2); color: var(--tinta); flex: none; }
.ic.mal { background: var(--mal-suave); color: var(--mal); }
.ic.aviso { background: var(--aviso-suave); color: var(--aviso); }
.ic.bien { background: var(--bien-suave); color: var(--bien); }

.fila { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--linea); min-height: 60px; color: inherit; text-decoration: none; }
.fila:last-child { border-bottom: 0; }
button.fila { width: 100%; background: none; border: 0; border-bottom: 1px solid var(--linea); text-align: left; cursor: pointer; }
button.fila:last-child { border-bottom: 0; }
.fila .texto { display: grid; min-width: 0; }
.fila .que { display: block; font-weight: 600; font-size: 15px; line-height: 1.25; }
.nota-campo { font-size: 14px; padding: .55rem .75rem; }
.fila .sub { font-size: 12.5px; color: var(--tenue); display: flex; gap: 6px; align-items: center; margin-top: 2px; }
.fila .cuanto { font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.fila.recien { animation: aparece 1.4s ease-out; }
@keyframes aparece { from { background: color-mix(in srgb, var(--barra) 20%, transparent); } }
.fila-extra { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 4px 0 12px 48px; border-bottom: 1px solid var(--linea); font-size: 13.5px; }
.fila-vacia { padding: 16px 0; }
.entra { color: var(--bien); }
.plastico { width: 16px; height: 11px; border-radius: 3px; background: var(--c, var(--d0)); display: inline-block; flex: none; }

/* Rayado diario: la hoja del día con su margen rojo, como libreta de contabilidad */
.rayada { background-image: linear-gradient(to right, transparent 57px, var(--margen) 57px, var(--margen) 58px, transparent 58px); }
/* Movimientos: el mes en cifras y la libreta, un renglón por día. En el celular cada día va
   en dos líneas (qué pasó y con qué; lo que te quedó); desde 1100 px es tabla. */
.resumen-mes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.resumen-mes .panel { gap: 4px; padding: 12px 14px; align-content: start; }
.resumen-mes b { font: 800 20px/1.15 var(--f-ui); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.modo-libreta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.modo-libreta .segmento { flex: 1 1 280px; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 420px; }
.descargar .i { width: 18px; height: 18px; }
.descargas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.descargas > span { font-size: 13px; font-weight: 600; color: var(--tenue); }
.panel.libreta { padding: 0; gap: 0; overflow: hidden; }
.libreta-cabeza, .libreta-total, .libreta .celda { display: none; }
.libreta-dia { border-top: 1px solid var(--linea); }
.libreta-cabeza + .libreta-dia { border-top: 0; }
.libreta-fila { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "dia total" "desglose quedo"; gap: 3px 12px; align-items: center;
    padding: 12px 14px; border: 0; background: none; text-align: left; cursor: pointer; }
.libreta-dia.abierto > .libreta-fila { background: var(--papel-2); }
.flecha-dia { width: 16px; height: 16px; color: var(--tenue); transition: transform .15s; }
.libreta-dia.abierto .flecha-dia { transform: rotate(90deg); }
.m-dia { grid-area: dia; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-weight: 700; font-size: 15px; }
.m-total { grid-area: total; font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.m-desglose { grid-area: desglose; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; font-size: 12.5px; color: var(--tenue); }
.m-quedo { grid-area: quedo; font-size: 12.5px; color: var(--tenue); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.m-quedo b { color: var(--tinta); font-weight: 600; }
.libreta .plastico { margin-right: 5px; vertical-align: -1px; }
.libreta .nada { color: var(--linea-2); }
.libreta-detalle { margin: 0 14px 12px; padding: 2px 14px; border: 1px solid var(--linea); border-radius: 16px; background: var(--papel); }

.fecha-bloque { width: 44px; display: grid; justify-items: center; gap: 3px; padding: 6px 0; border-radius: 12px; background: var(--papel-2); line-height: 1; }
.fecha-bloque span { font: 500 9.5px/1 var(--f-dato); letter-spacing: .1em; text-transform: uppercase; color: var(--tenue); }
.fecha-bloque b { font: 700 18px/1 var(--f-ui); }

.pildora { display: inline-flex; gap: 4px; align-items: center; font: 600 11.5px/1 var(--f-ui); padding: 5px 8px; border-radius: 999px; background: var(--papel-2); color: var(--tinta-2); white-space: nowrap; }
.pildora .i { width: 13px; height: 13px; stroke-width: 2.2; }
.pildora.aviso { background: var(--aviso-suave); color: var(--aviso); }
.pildora.mal { background: var(--mal-suave); color: var(--mal); }
.pildora.bien { background: var(--bien-suave); color: var(--bien); }

/* --- Deuda en una barra ---------------------------------------------------- */

.apilada { display: flex; gap: 2px; height: 14px; }
.apilada span { background: var(--c); min-width: 4px; }
.apilada span:first-child { border-radius: 4px 0 0 4px; }
.apilada span:last-child { border-radius: 0 4px 4px 0; }
.apilada span:only-child { border-radius: 4px; }
.leyenda { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 16px; font-size: 13px; color: var(--tinta-2); }
.leyenda li { display: flex; align-items: center; gap: 7px; min-width: 0; }
.leyenda li i { width: 10px; height: 10px; border-radius: 2px; background: var(--c); flex: none; }
.leyenda li b { margin-left: auto; font-weight: 600; color: var(--tinta); font-variant-numeric: tabular-nums; }

/* --- Gráfica de días ------------------------------------------------------- */

.grafica { position: relative; display: grid; gap: 6px; }
.grafica svg { display: block; width: 100%; height: auto; overflow: visible; }
.grafica .ancha { display: none; }
.grafica text { font: 500 10px var(--f-dato); fill: var(--tenue); }
.grafica .rejilla { stroke: var(--linea); stroke-width: 1; }
.grafica .base { stroke: var(--linea-2); stroke-width: 1; }
.grafica .col { fill: var(--barra); }
.grafica .hueco { fill: var(--linea); }
.grafica .blanco { fill: transparent; }
.grafica g { cursor: pointer; outline: none; }
.grafica g:hover .col, .grafica g:focus .col, .grafica g.elegida .col { fill: var(--barra-hover); }
.grafica .hoy-marca { fill: var(--tinta); }
.grafica-seleccion { min-height: 22px; display: flex; gap: 8px; align-items: baseline; font-size: 13px; color: var(--tinta-2); }
.grafica-seleccion b { font: 700 16px/1.2 var(--f-ui); color: var(--tinta); }
.grafica-deuda g.atenuada path { opacity: .45; }
.tabla-grafica summary { cursor: pointer; width: max-content; font-size: 13px; font-weight: 600; color: var(--barra); }
.tabla-grafica .tabla-envoltura { margin-top: 8px; box-shadow: none; }
.tabla-grafica .tabla { min-width: 0; font-size: 13px; }
.tabla-grafica .tabla th, .tabla-grafica .tabla td { padding: .5rem .75rem; }
.tabla-grafica .num { font-variant-numeric: tabular-nums; }

/* --- Alertas ---------------------------------------------------------------- */

.alerta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; padding: 13px 14px; border-radius: 18px; background: var(--papel); border: 1px solid var(--linea); box-shadow: var(--sombra); }
.alerta p { margin-top: 7px; font-size: 14.5px; line-height: 1.42; text-wrap: pretty; }
.acciones-alerta { display: flex; flex-wrap: wrap; gap: 0 18px; margin-top: 4px; }
.lista-alertas { display: grid; gap: 10px; }

/* --- Bienvenida -------------------------------------------------------------- */

.pasos { display: grid; gap: 0; counter-reset: paso; }
.pasos li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--linea); }
.pasos li:last-child { border-bottom: 0; }
.pasos b { font-weight: 600; }
.pasos .hecho .ic { background: var(--bien-suave); color: var(--bien); }

/* --- Movimientos ------------------------------------------------------------- */

.chip { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 12px; border: 1px solid var(--linea-2); background: var(--papel); font-weight: 500; font-size: 14px; cursor: pointer; white-space: nowrap; color: var(--tinta); }
.chip[aria-pressed="true"], .chip.activo { border-color: var(--tinta); background: var(--tinta); color: var(--papel); }
.chip:disabled { opacity: .4; cursor: default; }
.tablero, .grupo, .deudas-grid, .ficha-grid, .fijos-grid, .fijos-resumen { display: flex; flex-direction: column; gap: 24px; }
.tablero > *, .grupo > * { min-width: 0; }

/* --- Hojas que suben desde abajo ---------------------------------------- */

.velo { position: fixed; inset: 0; z-index: 30; background: rgb(4 14 22 / .5); opacity: 0; pointer-events: none; transition: opacity .22s; }
.velo.abierto { opacity: 1; pointer-events: auto; }
.hoja { position: fixed; left: 0; right: 0; bottom: 0; z-index: 31; max-width: 560px; margin: 0 auto; max-height: 94vh; max-height: 94dvh; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
    background: var(--papel); border-radius: 28px 28px 0 0; padding: 8px 16px calc(20px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 14px;
    transform: translateY(105%); transition: transform .34s cubic-bezier(.2, .85, .25, 1); visibility: hidden; outline: none; }
.hoja > * { min-width: 0; flex-shrink: 0; }
.hoja.abierto { transform: none; visibility: visible; }
.agarre { width: 42px; height: 5px; border-radius: 3px; background: var(--linea-2); margin: 0 auto; }
.hoja-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.hoja-titulo h2 { font: 800 26px/1.1 var(--f-ui); letter-spacing: -.02em; margin-top: 6px; }
.segmento { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--papel-2); border-radius: 13px; padding: 3px; gap: 2px; }
.segmento.tres { grid-template-columns: repeat(3, 1fr); }
.segmento button { border: 0; background: none; padding: 8px 0; border-radius: 10px; font-weight: 600; font-size: 13.5px; color: var(--tinta-2); cursor: pointer; }
.segmento button[aria-pressed="true"] { background: var(--papel); color: var(--tinta); box-shadow: 0 1px 3px rgb(0 0 0 / .12); }
.cerrar { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--papel-2); display: grid; place-items: center; cursor: pointer; flex: none; }
.pantalla-monto { display: flex; align-items: baseline; justify-content: center; font: 800 50px/1 var(--f-ui); letter-spacing: -.035em; padding: 4px 0 0; font-variant-numeric: tabular-nums; min-height: 56px; }
.pantalla-monto .signo { font-size: .5em; font-weight: 600; margin-right: 3px; color: var(--tenue); align-self: flex-start; margin-top: .18em; }
.pantalla-monto.sin-monto .valor { color: var(--linea-2); }
.cursor { width: 3px; height: 42px; border-radius: 2px; background: var(--barra); align-self: center; margin-left: 4px; animation: parpadeo 1.1s steps(1) infinite; }
@keyframes parpadeo { 50% { opacity: 0; } }
.nota.centrada { text-align: center; margin-top: -8px; }
.pregunta-fila { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.pregunta-fila .pregunta { margin-bottom: 0; }
.pregunta-fila .enlace { padding: 0; font-size: 12.5px; }
.pista-teclado { display: none; }
.preguntas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.preguntas > div { min-width: 0; }
.pregunta { font: 500 10.5px/1 var(--f-dato); letter-spacing: .12em; text-transform: uppercase; color: var(--tenue); margin-bottom: 8px; }
.opciones { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.op { display: grid; justify-items: center; gap: 5px; padding: 8px 2px 7px; border-radius: 15px; border: 1px solid var(--linea); background: var(--papel); font-size: 12px; line-height: 1.2; font-weight: 600; color: var(--tinta-2); cursor: pointer; text-align: center; overflow-wrap: anywhere; }
.op .ic { width: 34px; height: 34px; border-radius: 11px; }
.op[aria-pressed="true"] { border-color: var(--tinta); color: var(--tinta); background: var(--papel-2); }
.op[aria-pressed="true"] .ic { background: var(--tinta); color: var(--papel); }
.fila-chips { display: flex; gap: 7px; overflow-x: auto; margin: 0 -16px; padding: 0 16px 2px; scrollbar-width: none; }
.fila-chips::-webkit-scrollbar { display: none; }
.fila-chips .chip small { opacity: .65; font-size: 12px; }
.chip.pausada { border-style: dashed; color: var(--tinta-2); }
.chip.pausada[aria-pressed="true"] { border-style: solid; color: var(--papel); }
.nota-pausa { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; padding: 9px 11px; border-radius: 12px; background: var(--aviso-suave); color: var(--aviso); font-size: 13px; line-height: 1.35; }
.nota-pausa .i { width: 17px; height: 17px; margin-top: 1px; }
/* Cuadrar: si lo que contaste coincide con lo anotado, y de dónde sale la cuenta. */
.veredicto { display: flex; gap: 7px; align-items: flex-start; justify-content: center; font-weight: 600; line-height: 1.35; }
.veredicto .i { width: 17px; height: 17px; margin-top: 1px; }
.veredicto.cuadra { color: var(--bien); }
.veredicto.falta { color: var(--mal); }
.veredicto.sobra { color: var(--aviso); }
.cuadre-abrir { display: inline-flex; align-items: center; gap: 6px; padding: 2px 0; font-size: 13px; }
.cuadre-abrir .i { width: 17px; height: 17px; }
.cuadre-cuenta { display: grid; gap: 5px; margin: 8px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--papel-2); font-size: 13.5px; }
.cuadre-cuenta > div { display: flex; justify-content: space-between; gap: 12px; }
.cuadre-cuenta dt { color: var(--tinta-2); }
.cuadre-cuenta dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cuadre-cuenta .total { border-top: 1px solid var(--linea-2); padding-top: 6px; margin-top: 1px; }
.cuadre-cuenta .total dt { color: var(--tinta); font-weight: 600; }
.cuadre .nota { margin-top: 8px; }

/* Subir el PDF del banco para que la app llene el estado de cuenta. */
.subir-pdf { display: grid; gap: 8px; justify-items: start; margin-bottom: 18px; padding: 14px; border: 1px dashed var(--linea-2); border-radius: 16px; background: var(--papel-2); }
.subir-pdf small { color: var(--tenue); font-size: 12.5px; }
.subir-pdf .archivo { display: inline-flex; align-items: center; gap: 8px; }
.pdf-contrasena { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pdf-contrasena input { padding: 10px 12px; border: 1px solid var(--linea-2); border-radius: 12px; font-size: 16px; background: var(--papel); }

/* La cuenta del mes: de cuánto partiste, lo que entró y salió, y con cuánto te quedaste. */
.cuenta-mes { display: grid; gap: 7px; font-size: 14.5px; }
.cuenta-mes > div { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.cuenta-mes dt { color: var(--tinta-2); }
.cuenta-mes dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cuenta-mes .detalle { margin: -2px 0; }
.cuenta-mes .detalle dt { padding-left: 14px; font-size: 13px; color: var(--tenue); }
.cuenta-mes .detalle dd { font-size: 13px; font-weight: 500; color: var(--tenue); }
/* Los rendimientos de tu cajita: dinero que se gana solo. */
.cuenta-mes .rinde dt, .cuenta-mes .rinde dd { color: var(--bien); }
.cuenta-mes .total { border-top: 1px solid var(--linea-2); margin-top: 3px; padding-top: 9px; font-size: 16px; }
.cuenta-mes .total dt { color: var(--tinta); font-weight: 700; }
.cuenta-mes + .nota { margin-top: 10px; }
.cuenta-mes + .nota + .lista, .cuenta-mes + .lista { margin-top: 6px; border-top: 1px solid var(--linea); }
.chip .i { width: 18px; height: 18px; }
.teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.tecla { height: 50px; border: 0; border-radius: 14px; background: var(--papel-2); font: 600 23px/1 var(--f-ui); cursor: pointer; display: grid; place-items: center; }
.tecla:active { background: var(--linea); }
.accion { height: 56px; border: 0; border-radius: 18px; background: linear-gradient(100deg, var(--accion), var(--accion-2)); color: var(--accion-tinta); font: 700 17px/1 var(--f-ui); cursor: pointer; box-shadow: 0 12px 22px -14px var(--accion-sombra); }
.accion:disabled { background: var(--papel-2); color: var(--tenue); cursor: default; box-shadow: none; }
.accion.secundaria { background: var(--papel-2); color: var(--tinta); box-shadow: none; }

.flotante { position: fixed; left: 14px; right: 14px; bottom: calc(100px + env(safe-area-inset-bottom)); z-index: 25; max-width: 532px; margin: 0 auto;
    background: var(--tinta); color: var(--papel); border-radius: 16px; padding: 12px 14px; display: flex; align-items: center; gap: 10px; font-size: 14px;
    transform: translateY(16px); opacity: 0; transition: transform .25s, opacity .25s; pointer-events: none; }
.flotante.visible { transform: none; opacity: 1; pointer-events: auto; }
.flotante .i { color: var(--flotante-acento); }
.flotante button { margin-left: auto; background: none; border: 0; color: var(--flotante-acento); font-weight: 700; cursor: pointer; padding: 4px; }

/* --- Deudas ------------------------------------------------------------------ */

.lista-deudas { display: grid; gap: 10px; }
.deuda { --c: var(--d0); background: var(--papel); border: 1px solid var(--linea); border-radius: 20px; padding: 14px 16px; display: grid; gap: 12px; color: inherit; text-decoration: none; box-shadow: var(--sombra); }
.deuda:hover { border-color: var(--linea-2); }
.deuda:active { transform: scale(.99); }
.deuda-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.tarjeta-mini { width: 46px; height: 31px; border-radius: 7px; position: relative; flex: none; background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 62%, #000)); }
.tarjeta-mini::after { content: ""; position: absolute; left: 7px; top: 10px; width: 10px; height: 8px; border-radius: 2px; background: rgb(255 255 255 / .5); }
.deuda .nombre { display: block; font-weight: 700; font-size: 16px; }
.deuda .tipo { display: block; font: 500 11px/1.3 var(--f-dato); color: var(--tenue); }
.deuda .saldo { font: 700 19px/1 var(--f-ui); font-variant-numeric: tabular-nums; text-align: right; }
.datos-deuda { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; border-top: 1px dashed var(--linea-2); padding-top: 11px; }
.dato span { display: block; font: 500 9.5px/1.3 var(--f-dato); letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); }
.dato b { display: block; font: 600 14px/1.35 var(--f-ui); font-variant-numeric: tabular-nums; }
.plazo { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px; font-size: 13px; color: var(--tinta-2); }
.plazo b { color: var(--tinta); font-weight: 600; }
.plazo .tenue { color: var(--tenue); font-size: 12.5px; }
.msi { display: flex; gap: 4px; flex: 1; max-width: 150px; }
.msi i { flex: 1; height: 6px; border-radius: 3px; background: var(--linea-2); }
.msi i.pagado { background: var(--c); }
.detalle-cabeza { display: flex; gap: 14px; align-items: center; }
.detalle-cabeza .tarjeta-mini { width: 58px; height: 39px; }
.titulo-deuda { margin-top: 4px; font: 800 30px/1.05 var(--f-ui); letter-spacing: -.03em; }
.acciones-deuda { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.acciones-deuda .accion { height: 50px; font-size: 15px; }
.deuda-reparto { font-size: 12.5px; color: var(--tinta-2); font-variant-numeric: tabular-nums; margin-top: -4px; }
.reparto-saldo { margin-top: -4px; }
.reparto-saldo b { font-size: 16px; }
.fila .cuanto small { display: block; font: 500 11px/1.3 var(--f-dato); color: var(--tenue); }
.fila .msi { margin-top: 7px; max-width: 160px; }
.opciones-pago .fila .cuanto { font-weight: 700; }
.meses-corte { border: 1px solid var(--linea); border-radius: 14px; padding: 4px 14px 12px; margin: 0; display: grid; gap: 10px; min-width: 0; }
.meses-corte legend { font-weight: 600; font-size: .9rem; padding: 0 4px; }
.mes-corte { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding-top: 10px; border-top: 1px solid var(--linea); font-size: .88rem; color: var(--tinta-2); }
.mes-corte b { flex: 1 0 100%; color: var(--tinta); font-weight: 600; font-size: .95rem; }
.mes-corte label { display: inline-flex; align-items: center; gap: 6px; }
.mes-corte input[type=number] { width: 4.5rem; }
.mes-corte .pendiente input { width: 7.5rem; }
.mes-corte .casilla input { margin-top: 0; }

/* --- El mes ------------------------------------------------------------------ */

.mes-grid, .plan-grid { display: flex; flex-direction: column; gap: 24px; }
.mes-grid > *, .plan-grid > *, .plan-col > * { min-width: 0; }
/* Las columnas de Mi plan solo cuentan en monitor grande: antes, sus bloques se acomodan como si no existieran. */
.plan-col { display: contents; }
.cifra-grande.grande { font-size: 48px; }
.dos-cifras { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dos-cifras div { display: grid; gap: 3px; }
.dos-cifras b { font: 700 19px/1.2 var(--f-ui); font-variant-numeric: tabular-nums; }
.rango { display: grid; gap: 14px; }
.rango li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.rango .etq { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.rango .etq span { font: 500 12px/1 var(--f-dato); color: var(--tenue); align-self: center; }
.rango .barra { height: 8px; min-width: 3px; border-radius: 0 4px 4px 0; background: var(--barra); }
.rango .cuanto { font-weight: 600; font-variant-numeric: tabular-nums; }

/* --- Mi plan ----------------------------------------------------------------- */

.semana { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.semana > div { background: var(--papel); border: 1px solid var(--linea); border-radius: 16px; padding: 11px 12px; display: grid; gap: 3px; align-content: start; box-shadow: var(--sombra); }
.semana span { font: 500 9.5px/1.3 var(--f-dato); letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); }
.semana b { font: 700 17px/1.2 var(--f-ui); font-variant-numeric: tabular-nums; }
.semana small { font-size: 12px; line-height: 1.3; }
.plan-monto { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.control-aporte { width: 100%; accent-color: var(--barra); height: 28px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; }
.metodo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.metodo button { text-align: left; border: 1px solid var(--linea-2); background: var(--papel); border-radius: 14px; padding: 10px 12px; cursor: pointer; display: grid; gap: 3px; align-content: start; }
.metodo button b { font-size: 14.5px; }
.metodo button span { font-size: 12px; color: var(--tenue); line-height: 1.35; }
.metodo button[aria-pressed="true"] { border-color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); background: var(--papel-2); }
.salida { background: var(--papel-2); border-radius: 16px; padding: 14px 16px; display: grid; gap: 4px; }
.salida .cuando { font: 800 30px/1.05 var(--f-ui); letter-spacing: -.025em; }
.linea-tiempo { display: grid; gap: 10px; }
.linea-tiempo li { display: grid; grid-template-columns: 74px minmax(0, 1fr) 66px; gap: 10px; align-items: center; font-size: 13.5px; font-weight: 600; }
.linea-tiempo .pista { position: relative; height: 8px; border-radius: 4px; background: var(--papel-2); }
.linea-tiempo .pista span { position: absolute; top: 0; bottom: 0; left: 0; background: var(--c); border-radius: 0 4px 4px 0; }
.linea-tiempo .cuando-sale { font: 500 11.5px/1.2 var(--f-dato); color: var(--tenue); text-align: right; }
.reparto { display: grid; gap: 8px; border-top: 1px dashed var(--linea-2); padding-top: 12px; }
.reparto li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--linea); }
.reparto li:last-child { border-bottom: 0; }
.reparto li b { font-weight: 600; font-size: 14.5px; }
.reparto small { display: block; font-size: 12px; color: var(--tenue); font-weight: 400; }
.reparto .num { text-align: right; font-weight: 700; white-space: nowrap; }
.metas { display: grid; gap: 16px; }
.meta { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: start; }
.meta-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 600; }
.medidor { position: relative; height: 10px; border-radius: 5px; background: var(--papel-2); margin: 9px 0 7px; }
.medidor span { display: block; height: 100%; border-radius: 5px; background: var(--c); }
.medidor i { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--tinta); }
.meta small { display: block; font-size: 12.5px; color: var(--tenue); }
.editar-limite { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 10px; }
.editar-limite input { max-width: 10rem; }
.editar-limite .boton { padding: .5rem 1rem; }
.chips-envueltos { display: flex; flex-wrap: wrap; gap: 7px; }
.hormigas { display: grid; gap: 10px; }
.hormiga { display: grid; gap: 10px; padding: 14px; border-radius: 18px; background: var(--papel); border: 1px solid var(--linea); box-shadow: var(--sombra); }
.hormiga-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.hormiga .que { font-weight: 600; }
.hormiga .sub { font-size: 12.5px; color: var(--tenue); }
.escala { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.escala div { background: var(--papel-2); border-radius: 12px; padding: 8px 10px; display: grid; gap: 2px; }
.escala span { font: 500 9.5px/1.3 var(--f-dato); letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); }
.escala b { font: 700 16px/1.25 var(--f-ui); font-variant-numeric: tabular-nums; }
.equivale { font-size: 13.5px; color: var(--tinta-2); }
.equivale b { color: var(--tinta); }
.hormiga .enlace { justify-self: start; text-align: left; }
.capsulas { display: grid; gap: 8px; }
.capsula { background: var(--papel); border: 1px solid var(--linea); border-radius: 16px; padding: 0 14px; }
.capsula summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 0; font-weight: 600; font-size: 14.5px; }
.capsula summary::-webkit-details-marker { display: none; }
.capsula summary > .i { color: var(--tenue); transition: transform .2s; }
.capsula[open] summary > .i { transform: rotate(90deg); }
.capsula .cuerpo { padding: 0 0 14px 48px; color: var(--tinta-2); font-size: 14px; line-height: 1.5; }
.capsula .cuerpo b { color: var(--tinta); font-weight: 600; }

/* Avisos en el celular y fechas importantes */
.avisos-celular { display: grid; gap: 12px; }
.avisos-celular .accion.chica { justify-self: start; }
.aviso-activo { display: flex; align-items: center; gap: 12px; }
.aviso-activo b { display: block; font-weight: 600; }
.aviso-activo small { display: block; font-size: 12.5px; color: var(--tenue); }
.pasos-numerados { display: grid; gap: 6px; padding-left: 22px; list-style: decimal; font-size: 14px; color: var(--tinta-2); }
.pasos-numerados b { color: var(--tinta); font-weight: 600; }
.hora-noche select { max-width: 12rem; }
.lista-fechas { display: grid; }
.lista-fechas li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--linea); }
.lista-fechas li:last-child { border-bottom: 0; }
.lista-fechas li.pasada { opacity: .55; }
.lista-fechas .texto { display: grid; min-width: 0; }
.lista-fechas .que { font-weight: 600; overflow-wrap: anywhere; }
.lista-fechas .sub { font-size: 12.5px; color: var(--tenue); }
.nueva-fecha { display: grid; grid-template-columns: minmax(0, 10.5rem) minmax(0, 1fr) auto; gap: 8px; align-items: center; }
@media (max-width: 520px) {
    .nueva-fecha { grid-template-columns: minmax(0, 1fr) auto; }
    .nueva-fecha input[type=text] { grid-column: 1 / -1; grid-row: 1; }
}

/* --- Mi cuenta y equipo ------------------------------------------------------ */

.cuenta-grid { display: grid; gap: 18px; }
.cuenta-tarjeta { gap: 16px; }
.cuenta-quien { display: flex; align-items: center; gap: 14px; min-width: 0; }
.cuenta-quien > div { min-width: 0; }
.cuenta-quien h2 { font: 700 20px/1.2 var(--f-ui); overflow-wrap: anywhere; }
.avatar.grande { width: 56px; height: 56px; font-size: 20px; }
.fila-cuenta { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding-top: 12px; border-top: 1px solid var(--linea); }
.fila-cuenta b { font-weight: 600; }
.acciones-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.accion.chica { height: 44px; padding: 0 16px; border-radius: 14px; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.accion.chica .i { width: 18px; height: 18px; stroke-width: 2.2; }
.chico { padding: .45rem .8rem; font-size: 13px; border-radius: 10px; }
.boton-secundario.peligro { color: var(--mal); }

.panel.lista.equipo { padding: 0 16px; }
.miembro { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--linea); }
.miembro:last-child { border-bottom: 0; }
.miembro .avatar { width: 40px; height: 40px; }
.miembro-datos { min-width: 0; }
.miembro-datos b { display: block; font-size: 15px; font-weight: 600; }
.miembro-datos small { display: block; font-size: 13px; color: var(--tenue); overflow-wrap: anywhere; }
.miembro-estado, .miembro-acciones { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.miembro.inactivo .avatar, .miembro.inactivo .miembro-datos { opacity: .55; }
.miembro .miembro-editar { grid-column: 1 / -1; padding: 12px; border-radius: 14px; background: var(--papel-2); }
.aviso-temporal { border-color: color-mix(in srgb, var(--barra) 45%, var(--linea)); background: color-mix(in srgb, var(--barra) 6%, var(--papel)); }
.datos-temporal { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 16px; margin: 0; }
.datos-temporal dt { color: var(--tenue); font-size: 13px; }
.datos-temporal dd { margin: 0 0 8px; font-weight: 600; overflow-wrap: anywhere; }
.cabeza .accion.chica { white-space: nowrap; }
.datos-temporal .clave { font: 700 19px/1.2 var(--f-dato); letter-spacing: .04em; }

/* --- Tus conceptos ----------------------------------------------------------- */

.panel.lista.conceptos { padding: 0 16px; }
.concepto { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--linea); }
.concepto:last-child { border-bottom: 0; }
.concepto-datos { grid-column: 2; grid-row: 1; min-width: 0; }
.concepto-datos b { display: block; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.concepto-pildoras { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.concepto-orden { grid-column: 3; grid-row: 1; display: flex; gap: 4px; }
.mover { width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--linea-2); background: var(--papel); color: var(--tinta); display: grid; place-items: center; cursor: pointer; }
.mover:disabled { opacity: .35; cursor: default; }
.mover .i { width: 18px; height: 18px; stroke-width: 2.2; }
.concepto-acciones { grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-left: 48px; }
.concepto.oculto > .ic, .concepto.oculto .concepto-datos { opacity: .55; }
.concepto-editar { grid-column: 1 / -1; padding: 12px; border-radius: 14px; background: var(--papel-2); }
.dibujos { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; }
.dibujo { height: 44px; border-radius: 12px; border: 1px solid var(--linea); background: var(--papel); color: var(--tinta-2); display: grid; place-items: center; cursor: pointer; }
.dibujo:hover { border-color: var(--linea-2); color: var(--tinta); }
.dibujo[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
.campo.casilla small { display: block; font-weight: 400; }

/* --- Entrar y contraseña ---------------------------------------------------- */

/* En celular: portada arriba y tarjeta abajo. En computadora, dos paneles (ver abajo). */
.acceso { min-height: 100vh; min-height: 100dvh; max-width: 480px; margin: 0 auto; padding: 14px 14px 28px; display: grid; align-content: start; gap: 14px; }
.acceso-portada { position: relative; overflow: hidden; isolation: isolate; border-radius: 28px; padding: 20px 20px 22px; display: grid; gap: 4px; justify-items: start;
    background: radial-gradient(90% 120% at 100% 100%, var(--portada-brillo), transparent 65%), linear-gradient(160deg, var(--portada-1), var(--portada-2));
    border: 1px solid color-mix(in srgb, var(--barra) 14%, transparent); }
.acceso-marca { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 16px; background: color-mix(in srgb, var(--papel) 72%, transparent);
    font: 800 17px/1 var(--f-ui); letter-spacing: -.02em; color: var(--tinta); text-decoration: none; box-shadow: 0 8px 18px -14px rgb(16 41 60 / .4); }
.acceso-marca i { width: 34px; height: 34px; border-radius: 11px; background: linear-gradient(135deg, var(--accion), var(--accion-2)); color: #FFFFFF; display: grid; place-items: center; font: 700 17px/1 var(--f-ui); font-style: normal; }
.acceso-bienvenida { margin-top: 16px; font: 800 32px/1.02 var(--f-ui); letter-spacing: -.03em; color: var(--tinta); }
.acceso-lema { max-width: 22ch; font-size: 14px; color: var(--tinta-2); }
.acceso-ilustracion { position: absolute; right: -2px; bottom: -14px; width: 128px; height: auto; z-index: -1; }
.ilus-a { fill: var(--ilus-1); }
.ilus-b { fill: var(--ilus-2); }
.ilus-c { fill: var(--ilus-3); }
.ilus-claro { fill: rgb(255 255 255 / .72); }
.ilus-moneda { fill: var(--ilus-moneda); stroke: var(--portada-1); stroke-width: 6; }
.ilus-signo { fill: none; stroke: #FFFFFF; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.acceso-lado { display: grid; }
.acceso-tarjeta { background: var(--papel); border: 1px solid var(--linea); border-radius: 26px; padding: 24px 20px 22px; display: grid; gap: 20px; box-shadow: 0 24px 50px -30px rgb(16 41 60 / .35); }
.acceso-titulo { display: grid; gap: 6px; }
.acceso-eyebrow { font: 700 11px/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--barra); }
.acceso-tarjeta h1 { font: 700 28px/1.1 var(--f-ui); letter-spacing: -.02em; }
.acceso-cancelar { justify-self: center; }
.acceso-form { display: grid; gap: 16px; }
.acceso-form .campo > label { font-weight: 600; font-size: .88rem; color: var(--tinta-2); }

/* Campos con ícono a la izquierda y, en contraseñas, el ojo para verla. */
.con-icono { position: relative; }
.con-icono > .i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--tenue); pointer-events: none; }
.acceso-form .con-icono input { font-size: 16px; height: 52px; padding: 0 16px 0 44px; border-radius: 14px; background: var(--papel-2); border-color: transparent; }
.acceso-form .con-icono.con-boton input { padding-right: 52px; }
.acceso-form .con-icono input:focus { outline: 2px solid var(--barra); outline-offset: 0; box-shadow: 0 0 0 5px color-mix(in srgb, var(--barra) 16%, transparent); background: var(--papel); }
.acceso-form .con-icono input.invalid { outline: 1.5px solid var(--mal); }
.acceso-form .con-icono input.valid.modified:not(:focus) { outline: none; }
.ver-contrasena { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border: 0; border-radius: 11px; background: none; color: var(--tenue); display: grid; place-items: center; cursor: pointer; }
.ver-contrasena:hover { color: var(--tinta); }
.ver-contrasena .i { width: 20px; height: 20px; }
.ver-contrasena[aria-pressed="true"] .ojo, .ver-contrasena:not([aria-pressed="true"]) .ojo-no { display: none; }
.acceso-form .accion { display: flex; align-items: center; justify-content: center; gap: 10px; height: 54px; border-radius: 16px; margin-top: 2px; }
.acceso-form .accion .i { width: 20px; height: 20px; stroke-width: 2.2; }

/* Recuérdame: cuadrito con palomita y área de toque de 44 px. Especificidad alta a
   propósito, para ganarle a las reglas generales de input y checkbox de más abajo. */
.recordarme { display: flex; align-items: center; gap: 10px; min-height: 44px; justify-self: start; font-weight: 600; font-size: .92rem; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.acceso-form input.casilla-recordarme { appearance: none; -webkit-appearance: none; flex: none; width: 22px; height: 22px; margin: 0; padding: 0;
    border: 1.5px solid var(--tenue); border-radius: 6px; background: var(--papel) center / 16px no-repeat; cursor: pointer; transition: background-color .15s, border-color .15s; }
.acceso-form input.casilla-recordarme:checked { border-color: var(--accion); background-color: var(--accion);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E"); }
.acceso-form input.casilla-recordarme:focus { outline: none; }
.acceso-form input.casilla-recordarme:focus-visible { outline: 2px solid var(--barra); outline-offset: 2px; }
.pie-lateral { display: none; }
.pie-lateral form, .cuenta-enlaces form { margin: 0; }
.cuenta-enlaces { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; }

/* --- En computadora ---------------------------------------------------------- */

@media (min-width: 900px) {
    .cabecera { height: 64px; padding: 0 20px 0 22px; }
    .cabecera-marca { font-size: 19px; }
    .cabecera-quien { display: block; }
    .cuenta-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; gap: 24px 28px; }
    .miembro { grid-template-columns: auto minmax(0, 1.1fr) minmax(0, auto) minmax(0, 1.5fr); }
    .miembro-estado, .miembro-acciones { grid-column: auto; }
    .miembro-acciones { justify-content: flex-end; }
    .datos-temporal { grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; }
    .datos-temporal dd { margin: 0; }
    .cabecera-anotar { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 16px 0 12px; border: 0; border-radius: 12px; background: #FFFFFF; color: var(--marco-1);
        font: 700 14.5px/1 var(--f-ui); white-space: nowrap; cursor: pointer; box-shadow: 0 8px 18px -12px rgb(0 0 0 / .45); }
    .cabecera-anotar .i { width: 18px; height: 18px; stroke-width: 2.6; }
    .cabecera-anotar:hover { filter: brightness(1.04); }
    .cabecera-anotar:active { transform: scale(.97); }

    /* Menú lateral contraído a íconos (76 px). Abierto mide 244 px y queda encima del
       contenido, que no se mueve; los íconos no cambian de lugar al abrir. */
    .barra-inf { top: 64px; bottom: 0; right: auto; z-index: 24; width: 76px; height: auto; display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 12px;
        overflow-x: hidden; overflow-y: auto; scrollbar-width: none; background: linear-gradient(180deg, var(--marco-1) 0%, var(--marco-2) 100%); box-shadow: none;
        transition: width .22s ease, box-shadow .22s; }
    .barra-inf.abierta { width: 244px; box-shadow: 18px 0 40px -22px var(--marco-sombra); }
    .lateral-cabeza { display: block; flex: none; margin-bottom: 8px; padding-bottom: 12px; border-bottom: 1px solid rgb(255 255 255 / .22); }
    .boton-lateral { display: flex; align-items: center; gap: 12px; width: 100%; padding: 6px; border: 0; border-radius: 14px; background: none; color: #FFFFFF; font: 800 16px/1 var(--f-ui); white-space: nowrap; cursor: pointer; }
    .boton-lateral .i { box-sizing: content-box; width: 20px; height: 20px; padding: 10px; border-radius: 12px; background: rgb(255 255 255 / .2); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .2); }
    .boton-lateral:hover .i { background: rgb(255 255 255 / .3); }
    .lateral-fondo { display: block; position: fixed; inset: 64px 0 0 0; z-index: 23; border: 0; padding: 0; background: rgb(4 14 22 / .22); cursor: default; animation: fondo-aparece .2s ease-out; }
    .fab { display: none; }
    .etq-lateral { display: inline; }
    .tab { position: relative; flex: none; display: flex; justify-content: flex-start; align-items: center; gap: 12px; padding: 10px; border-radius: 13px; font-size: 14.5px; white-space: nowrap; }
    .tab .i, .tab .i.relleno { width: 16px; height: 16px; padding: 8px; border-radius: 9px; background: rgb(255 255 255 / .18); }
    .tab:hover { background: rgb(255 255 255 / .1); }
    .tab.active { background: rgb(255 255 255 / .18); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16); }
    .tab.active::before { content: ""; position: absolute; left: -12px; top: 12px; bottom: 12px; width: 4px; border-radius: 0 3px 3px 0; background: #FFFFFF; }
    .tab.active .i { background: #FFFFFF; color: var(--marco-1); }
    .tab.solo-lateral { display: flex; }
    .etq-barra { transition: opacity .18s; }
    .barra-inf:not(.abierta) .etq-barra { opacity: 0; }
    .barra-inf:not(.abierta) .tab.active { background: none; box-shadow: none; }
    .pie-lateral { display: grid; gap: 4px; margin-top: auto; padding: 14px 8px 0; border-top: 1px solid rgb(255 255 255 / .2); }
    .pie-lateral .enlace { justify-self: start; color: #FFFFFF; }
    .seccion.solo-lateral { display: grid; }

    .vista { --ancho-vista: 1100px; margin: 0 0 0 76px; max-width: none; padding: calc(64px + 36px) 44px 64px; gap: 28px; }
    .vista > * { width: 100%; max-width: var(--ancho-vista); margin-inline: auto; }
    .cabeza h1 { font-size: 40px; }
    .atajos { margin: 0; padding: 2px 0 4px; flex-wrap: wrap; overflow: visible; }
    .grafica .movil { display: none; }
    .grafica .ancha { display: block; }

    /* Inicio: la columna de la derecha (por pagar y lo que debes) abarca los dos grupos
       de la izquierda, así ninguna columna deja huecos por lo alto de la otra. */
    .tablero { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 26px 28px; align-items: start;
        grid-template-areas: "arriba lado" "abajo lado"; }
    .grupo { gap: 26px; }
    .a-arriba { grid-area: arriba; }
    .a-lado { grid-area: lado; }
    .a-abajo { grid-area: abajo; }
    .a-grafica { grid-area: grafica; }
    .resumen-mes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
    .resumen-mes .panel { padding: 14px 16px; }
    .resumen-mes b { font-size: 24px; }
    .lista-deudas { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; }
    .deudas-grid, .ficha-grid, .fijos-grid, .fijos-resumen { gap: 28px; }
    .mes-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); gap: 26px 28px; align-items: start;
        grid-template-areas: "total grafica" "cats demas"; }
    .a-total { grid-area: total; }
    .a-cats { grid-area: cats; }
    .a-demas { grid-area: demas; }
    .plan-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 26px 28px; align-items: start;
        grid-template-areas: "semana tono" "salida avisos" "salida metas" "fechas hormiga" "capsulas capsulas"; }
    .a-semana { grid-area: semana; }
    .a-tono { grid-area: tono; }
    .a-salida { grid-area: salida; }
    .a-metas { grid-area: metas; }
    .a-hormiga { grid-area: hormiga; }
    .a-capsulas { grid-area: capsulas; }
    .a-avisos { grid-area: avisos; }
    .a-fechas { grid-area: fechas; }
    .capsulas { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }

    /* Al centro sin translate(-50%): así el texto no sale borroso por medio pixel. */
    #captura { inset: 0; width: min(780px, calc(100vw - 48px)); height: fit-content; max-width: none; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); margin: auto;
        border-radius: 26px; padding: 18px 22px 20px; transform: translateY(12px) scale(.98); opacity: 0; transition: transform .25s, opacity .2s; }
    #captura.abierto { transform: none; opacity: 1; }
    .pista-teclado { display: block; }
    .concepto { grid-template-columns: auto minmax(0, 1fr) auto auto; }
    .concepto-acciones { grid-column: 3; grid-row: 1; padding-left: 0; justify-content: flex-end; }
    .concepto-orden { grid-column: 4; }
    .hoja.lateral { left: auto; right: 0; top: 0; bottom: 0; width: 470px; max-width: none; margin: 0; max-height: none; border-radius: 26px 0 0 26px; padding: 22px 22px 26px; transform: translateX(105%); }
    .hoja.lateral.abierto { transform: none; }
    .agarre { display: none; }
    .flotante { left: auto; right: 28px; bottom: 28px; width: 440px; margin: 0; }

    /* Entrar: portada a la izquierda, tarjeta a la derecha. */
    .acceso { max-width: none; padding: 16px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-content: stretch; gap: 16px; }
    .acceso-portada { place-content: center; justify-items: center; text-align: center; gap: 10px; padding: 48px 40px; border-radius: 32px; }
    .acceso-marca { font-size: 19px; }
    .acceso-bienvenida { margin-top: 22px; font-size: 56px; }
    .acceso-lema { max-width: 30ch; font-size: 16px; }
    .acceso-ilustracion { position: static; width: 240px; margin-top: 28px; z-index: auto; }
    .acceso-lado { place-items: center; padding: 32px; border-radius: 32px; border: 1px solid var(--linea); background: linear-gradient(180deg, var(--papel), var(--suelo)); }
    .acceso-tarjeta { width: min(440px, 100%); padding: 36px 34px 30px; }
}

/* Movimientos en tabla: cada renglón es una rejilla con las mismas columnas que la cabecera
   (--columnas, que arma la página). Si hay muchos conceptos, la tabla se desliza de lado. */
@media (min-width: 1100px) {
    .libreta-desliza { overflow-x: auto; }
    .libreta-tabla { min-width: min-content; }
    .libreta-cabeza, .libreta-fila, .libreta-total { display: grid; grid-template-columns: var(--columnas); grid-template-areas: none; column-gap: 10px; align-items: center; padding: 0 16px; }
    .libreta-cabeza { padding-block: 14px 10px; border-bottom: 1px solid var(--linea-2); font: 500 11px/1.2 var(--f-dato); letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); }
    .libreta-cabeza > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
    .libreta-cabeza > span:first-child { text-align: left; }
    .libreta-fila { min-height: 50px; padding-block: 8px; }
    .libreta-fila:hover { background: var(--suelo); }
    .libreta .celda { display: block; text-align: right; font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
    .libreta .celda.c-dia { display: flex; align-items: center; gap: 8px; text-align: left; font-weight: 600; }
    .libreta .celda.c-quedo { font-weight: 700; }
    .libreta .celda.c-cuadre { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
    .libreta .celda.c-cuadre .pildora { white-space: normal; text-align: right; }
    .m-dia, .m-total, .m-desglose, .m-quedo { display: none; }
    .libreta-detalle { margin: 4px 16px 14px 40px; }
    .libreta-total { padding-block: 12px 14px; border-top: 1px solid var(--linea-2); font-weight: 700; }
}

/* Deudas: lo que debes junto a «Mes por mes» y las tarjetas abajo, a todo lo ancho. Así la
   gráfica no ocupa todo el ancho ni crece a lo alto. La ficha de una deuda: lo de pagar a
   la izquierda; cortes, historial y datos a la derecha. */
@media (min-width: 1200px) {
    .deudas-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); align-items: start; grid-template-areas: "total grafica"; }
    .deudas-grid > :not(.a-total, .a-grafica) { grid-column: 1 / -1; }
    .ficha-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; }
}

/* Monitor grande: los tableros (Inicio, Movimientos, Mes, Deudas y Mi plan) crecen con la
   pantalla para no dejar margen vacío. Las demás se quedan en 1100 px: renglones más largos
   cansan y las gráficas a todo lo ancho crecerían demasiado a lo alto. */
@media (min-width: 1440px) {
    .vista { padding-inline: 56px; }
    .vista:has(> .tablero, > .libreta, > .mes-grid, > .plan-grid, > .deudas-grid, > .ficha-grid, > .fijos-grid) { --ancho-vista: 1640px; }

    /* Mes en tres columnas: lo gastado y lo demás; día por día; en qué se fue. */
    .mes-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr); grid-template-areas: "total grafica cats" "demas grafica cats"; }

    /* Mi plan en tres columnas que se apilan solas, sin huecos entre bloques. */
    .plan-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: none; gap: 28px; }
    .plan-col { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
    .plan-col .capsulas { grid-template-columns: minmax(0, 1fr); }
    .plan-col .nueva-fecha { grid-template-columns: minmax(0, 1fr) auto; }
    .plan-col .nueva-fecha input[type=text] { grid-column: 1 / -1; grid-row: 1; }

    /* Fijos: el resumen a la izquierda y las dos listas a la derecha. */
    .fijos-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr); align-items: start; }
    .fijos-resumen .rejilla-cifras { grid-template-columns: minmax(0, 1fr); }
    .lista-deudas { grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); }
}

/* Inicio en tres columnas: el dinero, el mes y las deudas se ven sin bajar. Desde 1800 px
   la tarjeta de la quincena todavía mide más de 480 px por dentro y no crece a lo alto. */
@media (min-width: 1800px) {
    .tablero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .9fr); grid-template-rows: auto; grid-template-areas: "arriba abajo lado"; }
}

/* La hoja para anotar a lo ancho (computadora y celular acostado): las preguntas a la
   izquierda; el monto, el teclado y el botón a la derecha. Así cabe sin desplazarse. */
@media (min-width: 900px), (min-width: 640px) and (max-height: 500px) {
    #captura { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 290px); grid-template-rows: auto auto auto auto auto 1fr; gap: 12px 24px; align-content: start; }
    #captura > .agarre { display: none; }
    #captura > .hoja-top { grid-column: 1 / -1; grid-row: 1; }
    #captura > .preguntas { grid-column: 1; grid-row: 2 / -1; align-self: start; }
    #captura > .pantalla-monto { grid-column: 2; grid-row: 2; font-size: 40px; min-height: 46px; padding: 0; }
    #captura > .nota.centrada { grid-column: 2; grid-row: 3; margin-top: -6px; }
    #captura > .teclado { grid-column: 2; grid-row: 4; }
    #captura > .accion { grid-column: 2; grid-row: 5; height: 50px; font-size: 16px; }
    #captura > .pista-teclado { grid-column: 2; grid-row: 6; text-align: center; font-size: 12px; }
    /* Con mouse no se desliza de lado cómodo: las opciones se acomodan en renglones. */
    #captura .fila-chips { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
    #captura .tecla { height: 42px; font-size: 19px; border-radius: 12px; }
    #captura .cursor { height: 32px; }
}

/* Celular acostado: hay poca altura, así que cabecera y barra de abajo van más bajitas
   y la barra pone el nombre junto al ícono. */
@media (max-width: 899px) and (max-height: 500px) {
    .cabecera { height: calc(48px + env(safe-area-inset-top)); padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
    .vista { padding-top: calc(48px + env(safe-area-inset-top) + 16px); padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
    .barra-inf { height: calc(54px + env(safe-area-inset-bottom)); padding: 0 max(8px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(8px, env(safe-area-inset-left)); }
    .tab { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; }
    .fab { width: 52px; height: 42px; border-radius: 14px; transform: none; }
    .fab:active { transform: scale(.95); }
    .fab .i { width: 24px; height: 24px; }
    .flotante { bottom: calc(66px + env(safe-area-inset-bottom)); }
    #captura { max-width: 860px; padding: 12px 20px calc(14px + env(safe-area-inset-bottom)); }
}

@keyframes fondo-aparece { from { opacity: 0; } }

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

/* --- Formularios y piezas de la primera versión ----------------------------
   Se siguen usando al anotar y corregir deudas y en ingresos y gastos fijos. */

.tarjeta { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: clamp(1rem, 2.5vw, 1.5rem); box-shadow: var(--sombra); }
.encabezado { display: grid; gap: .35rem; }
.encabezado.con-accion { grid-template-columns: 1fr auto; align-items: end; gap: 1rem; }
.encabezado h1 { font: 800 30px/1.05 var(--f-ui); letter-spacing: -.03em; }
@media (max-width: 560px) { .encabezado.con-accion { grid-template-columns: 1fr; } }
.fecha, .etiqueta { color: var(--tenue); font: 500 11px/1.2 var(--f-dato); text-transform: uppercase; letter-spacing: .12em; }
.tenue, .detalle { color: var(--tenue); }
.sub { display: block; color: var(--tenue); font-size: .8rem; }
.texto-bueno { color: var(--bien); }
.fuerte { font-weight: 700; }
.nowrap { white-space: nowrap; }
.total { display: grid; gap: .3rem; }
.rejilla-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.cifra { display: grid; gap: .2rem; align-content: start; }
.cifra strong { font-size: 1.5rem; letter-spacing: -.02em; line-height: 1.25; font-variant-numeric: tabular-nums; }
.cifra .detalle { font-size: .85rem; }
.cifra-mala { background: var(--mal-suave); border-color: transparent; }
.cifra-mala strong { color: var(--mal); }
/* Sin una clase .aviso sola: esa palabra la usan las píldoras y los iconos de alerta. */
.aviso-malo, .aviso-bueno { padding: .85rem 1rem; border-radius: 12px; }
.aviso-malo { background: var(--mal-suave); }
.aviso-bueno { background: var(--bien-suave); }
.bloque { display: grid; gap: .85rem; }
.bloque-titulo { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .75rem; }
.bloque h2, .tarjeta h2 { font: 700 17px/1.2 var(--f-ui); }
.pildora-mala { background: var(--mal-suave); color: var(--mal); white-space: normal; }
.orden { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .875rem; }
.vacio { display: grid; gap: 1rem; justify-items: start; }
.tabla-envoltura { overflow-x: auto; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); }
.tabla { width: 100%; border-collapse: collapse; min-width: 620px; }
.tabla th { text-align: left; font: 500 11px/1.2 var(--f-dato); text-transform: uppercase; letter-spacing: .08em; color: var(--tenue); padding: .75rem 1rem; border-bottom: 1px solid var(--linea); white-space: nowrap; }
.tabla td { padding: .75rem 1rem; border-bottom: 1px solid var(--linea); vertical-align: top; }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla .num { text-align: right; white-space: nowrap; }
.boton, .boton-secundario, .boton-peligro { font: inherit; font-weight: 600; border-radius: 12px; padding: .65rem 1.15rem; cursor: pointer; border: 1px solid transparent; text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
.boton { background: var(--accion); color: #FFFFFF; }
.boton:hover { filter: brightness(1.08); }
.boton-secundario { background: transparent; color: var(--tinta); border-color: var(--linea-2); }
.boton-secundario:hover { border-color: var(--tinta); }
.boton-peligro { background: var(--mal); color: var(--papel); }
.acciones { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.1rem; }
.formulario { display: grid; gap: 1rem; }
.campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem 1.25rem; }
.campo { display: grid; gap: .3rem; align-content: start; }
.campo > span { font-weight: 600; font-size: .9rem; }
.campo small, .ayuda { color: var(--tenue); font-size: .8rem; }
.campo.ancho { grid-column: 1 / -1; }
.campo.casilla { grid-template-columns: auto 1fr; align-items: start; gap: .6rem; }
.campo.casilla > span { font-weight: 500; }
input, select, textarea { font: inherit; color: var(--tinta); background: var(--suelo); border: 1px solid var(--linea-2); border-radius: 10px; padding: .6rem .75rem; width: 100%; min-width: 0; }

/* El iPhone acerca la pantalla con dos toques rápidos (en el teclado, al repetir un número) y al
   tocar un campo con letra menor a 16 px. Pellizcar para acercar sigue funcionando. */
button, a, label, input, select, textarea { touch-action: manipulation; }
@media (pointer: coarse) {
    input, select, textarea, .nota-campo { font-size: max(16px, 1em); }
}
input[type=checkbox] { width: 1.15rem; height: 1.15rem; margin-top: .2rem; accent-color: var(--barra); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--barra); outline-offset: 1px; border-color: transparent; }
.pestanas { display: flex; flex-wrap: wrap; gap: .4rem; }
.volver { text-decoration: none; font-weight: 600; font-size: .9rem; justify-self: start; }
dl.datos { display: grid; grid-template-columns: max-content 1fr; gap: .45rem 1.5rem; margin: 0; }
dl.datos dt { color: var(--tenue); }
dl.datos dd { margin: 0; }
@media (max-width: 520px) { dl.datos { grid-template-columns: 1fr; gap: .1rem; } dl.datos dd { margin-bottom: .5rem; } }
.zona-borrar { border-top: 1px solid var(--linea); padding-top: 1.5rem; }
.dos-columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 1.5rem; align-items: start; }
.dos-columnas .tarjeta { display: grid; gap: .5rem; container-type: inline-size; }
/* Si la lista queda angosta (en el celular o con el resumen al lado), agregar va en dos renglones. */
@container (max-width: 460px) {
    .dos-columnas .fila-alta { grid-template-columns: 1fr 1fr; }
    .dos-columnas .fila-alta > input:first-of-type { grid-column: 1 / -1; }
}
.lista-partidas { list-style: none; margin: .5rem 0 0; padding: 0; }
.lista-partidas li { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .1rem 1rem; padding: .65rem 0; border-bottom: 1px solid var(--linea); }
.acciones-fila { grid-column: 1 / -1; display: flex; gap: 1rem; }
.total-lista { display: flex; justify-content: space-between; padding-top: .5rem; font-weight: 600; }
.vacio-lista { padding: .5rem 0; }
.fila-alta { display: grid; grid-template-columns: 1fr 7.5rem 9.5rem auto; gap: .5rem; margin-top: .75rem; }
.fila-alta .validation-errors { grid-column: 1 / -1; }
@media (max-width: 560px) { .fila-alta { grid-template-columns: 1fr 1fr; } .fila-alta > input:first-of-type { grid-column: 1 / -1; } }
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--bien); }
.invalid { outline: 1px solid var(--mal); }
.validation-message, .validation-errors { color: var(--mal); font-size: .85rem; }
.validation-errors { margin: 0; padding-left: 1.1rem; list-style: disc; }
.blazor-error-boundary { background: #B32121; padding: 1rem; color: white; border-radius: 10px; }
.blazor-error-boundary::after { content: "Algo falló al mostrar esta parte."; }

/* Los cargos del banco que faltan por anotar (el CSV de movimientos). */
.archivo { cursor: pointer; }
.archivo input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.archivo:focus-within { outline: 2px solid var(--barra); outline-offset: 2px; border-radius: 8px; }
.cargos-csv { display: grid; gap: 8px; margin: 12px 0; list-style: none; padding: 0; }
.cargos-csv li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 10px; align-items: center;
    padding: 10px 12px; border: 1px solid var(--linea); border-radius: 14px; background: var(--papel); }
.cargos-csv .que-fue { display: grid; gap: 2px; min-width: 0; }
.cargos-csv .que-fue b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cargos-csv .que-fue span { font: 500 12.5px/1 var(--f-dato); color: var(--tenue); }
.cargos-csv select { padding: 8px 10px; border: 1px solid var(--linea-2); border-radius: 10px; font-size: 16px; background: var(--papel); max-width: 160px; }
.cargos-csv .cuanto { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 560px) {
    .cargos-csv li { grid-template-columns: auto minmax(0, 1fr) auto; }
    .cargos-csv select { grid-column: 2 / -1; max-width: none; }
}

/* Cuánto te queda de la línea de crédito. */
.linea-credito { display: grid; gap: 6px; margin-top: 12px; }
.linea-credito .etq { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--tinta-2); }
.linea-credito .etq b { font-variant-numeric: tabular-nums; }
.linea-credito .riel { height: 8px; border-radius: 999px; background: var(--papel-2); overflow: hidden; }
.linea-credito .usado { height: 100%; border-radius: 999px; background: var(--c, var(--barra)); }