*{box-sizing:border-box}
body{margin:0;font-family:var(--fuente);background:var(--fondo);color:var(--texto);line-height:1.4}
h1{font-size:1.25rem;margin:0}
h2{font-size:1rem;margin:0}
p{margin:0}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--acento);outline-offset:2px}
.suave{color:var(--texto-2);font-size:.875rem}
.solo-lectores{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.saltar{position:absolute;left:-999px}
.saltar:focus{left:8px;top:8px;background:var(--tarjeta);padding:8px;z-index:20}
.demo-banner{background:var(--aviso-fondo);color:var(--aviso-texto);font-size:.8125rem;font-weight:600;text-align:center;padding:6px 12px}
.num{font-variant-numeric:tabular-nums}
.pos{color:var(--verde)}
.neg{color:var(--terracota)}
body.ocultar .monto{filter:blur(8px)}

/* Estructura: en celular todo en una columna y la navegación abajo */
.app{min-height:100vh}
/* Ancho de contenido: cada pantalla usa --ancho. El encabezado ocupa todo el ancho y queda fijo. */
:root{--pad:20px;--ancho:680px}
body[data-vista="nuevo"],body[data-vista="editar"],body[data-vista="plan-nuevo"],body[data-vista="plan-editar"],body[data-vista="perfil"],body[data-vista="categorias"],body[data-vista="cambiar-clave"]{--ancho:620px}
body.sin-nav{--ancho:440px}
#vista{padding:0 0 110px;display:flex;flex-direction:column;gap:16px;min-width:0}
#vista>*{min-width:0;margin-inline:auto!important;width:min(100% - 2 * var(--pad), var(--ancho))}
#vista>:first-child:not(h1):not(.encabezado){margin-top:24px}
input,select,textarea{max-width:100%}
#vista:focus{outline:none}
.nav{position:fixed;left:0;right:0;bottom:0;height:72px;background:var(--tarjeta);border-top:1px solid var(--borde);display:flex;justify-content:space-around;align-items:center;z-index:10}
.nav a{min-width:56px;min-height:44px;display:flex;align-items:center;justify-content:center;font-size:.8125rem;color:var(--texto-2);text-decoration:none}
.nav a[aria-current="page"]{color:var(--texto);font-weight:700}
.nav a.nav-nuevo{min-width:120px;height:48px;margin-top:-26px;background:var(--primario);color:var(--sobre-primario);border-radius:999px;font-size:.9375rem;font-weight:700;box-shadow:var(--sombra-flotante)}
body.sin-nav .nav{display:none}
body.sin-nav #vista{padding-bottom:24px}

/* Tarjetas y listas */
.tarjeta{background:var(--tarjeta);border:1px solid var(--borde);border-radius:var(--radio);padding:14px 16px}
.resumen{background:var(--azul);color:var(--sobre-azul);border-radius:20px;padding:20px}
.resumen .suave{color:var(--sobre-azul-2)}
.resumen .grande{font-size:2rem;font-weight:700;margin:4px 0 16px}
.resumen .dos{display:flex;gap:12px}
.resumen .dos>div{flex:1;background:var(--velo-claro);border-radius:var(--radio-chico);padding:10px 12px}
.resumen .dos strong{display:block;font-size:1rem}
.resumen .ing{color:var(--ingreso-claro)}.resumen .gas{color:var(--gasto-claro)}
.barras{display:flex;gap:14px;align-items:flex-end;height:72px;margin-top:10px}
.par{flex:1;height:100%;display:flex;gap:3px;align-items:flex-end}
.b{flex:1;border-radius:3px}
.b.i{background:var(--verde)}.b.g{background:var(--terracota)}
.meses{display:flex;gap:14px;font-size:.75rem;color:var(--texto-2);margin-top:6px}
.meses span{flex:1;text-align:center}
.lista{list-style:none;margin:0;padding:0;background:var(--tarjeta);border:1px solid var(--borde);border-radius:var(--radio)}
.fila{display:flex;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--borde)}
.fila:last-child{border-bottom:0}
.fila strong{font-weight:500;display:block}
.fila .importe{font-weight:600;white-space:nowrap}
.titulo-fila{display:flex;justify-content:space-between;align-items:baseline}
.titulo-fila a{color:var(--acento);font-weight:600;font-size:.875rem}
.vacio{text-align:center;padding:32px 16px;color:var(--texto-2)}

/* Formularios */
label,.etiqueta{font-size:.8125rem;color:var(--texto-2)}
.campo{display:block;width:100%;height:48px;margin-top:4px;border:1px solid var(--borde-control);border-radius:var(--radio-chico);padding:0 12px;background:var(--control)}
.filas{display:flex;gap:12px}.filas>div{flex:1;min-width:0}
fieldset{border:0;margin:0;padding:0}
.seg{display:flex;background:var(--hundido);border-radius:999px;padding:4px}
.seg label{flex:1;position:relative;color:var(--texto-2)}
.seg input{position:absolute;opacity:0}
.seg span{display:flex;align-items:center;justify-content:center;height:44px;border-radius:999px;font-weight:500;font-size:.9375rem}
.seg input:checked+span{background:var(--tarjeta);color:var(--texto);font-weight:600}
.seg input:focus-visible+span{outline:3px solid var(--acento)}
.importe-campo{display:flex;align-items:baseline;gap:8px;border-bottom:2px solid var(--acento);padding-bottom:6px}
.importe-campo span{font-size:1.375rem;font-weight:600;color:var(--texto-2)}
.importe-campo input{flex:1;width:0;min-width:0;border:0;background:transparent;font-size:2.5rem;font-weight:700;outline:none}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.chip{position:relative}
.chip input{position:absolute;opacity:0}
.chip span,.chip button{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--borde-control);background:var(--control);font-size:.875rem;color:var(--texto);cursor:pointer}
.chip input:checked+span{border:2px solid var(--acento);background:var(--acento-suave);font-weight:600}
.chip input:focus-visible+span{outline:3px solid var(--acento)}
.error{color:var(--terracota);font-weight:600;font-size:.875rem;min-height:1.2em}
.btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:56px;border:0;border-radius:var(--radio);background:var(--primario);color:var(--sobre-primario);font-size:1.0625rem;font-weight:700;cursor:pointer;text-decoration:none}
.btn.sec{background:var(--control);color:var(--texto);border:1px solid var(--borde-control);font-weight:600}

/* Escritorio: la navegación pasa a un lado */
@media (min-width:900px){
  .app{display:grid;grid-template-columns:240px 1fr}
  .nav{position:sticky;top:0;height:100vh;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:4px;padding:24px 16px;border-top:0;border-right:1px solid var(--borde)}
  .nav a{justify-content:flex-start;padding:0 14px;font-size:.9375rem;border-radius:var(--radio-chico)}
  .nav a[aria-current="page"]{background:var(--acento-suave)}
  .nav a.nav-nuevo{order:-1;margin:0 0 16px;justify-content:center;border-radius:var(--radio-chico)}
  :root{--pad:32px;--ancho:1120px}
  #vista{padding-bottom:48px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Entrega 2 */
[hidden]{display:none!important}
body.sin-nav .demo-banner{display:none}
.nav a,.titulo-fila a{min-height:44px}

/* Entrega 4 */
.mov{padding:12px 16px;border-bottom:1px solid var(--borde)}
.mov:last-child{border-bottom:0}
.mov strong{font-weight:500;display:block}
.mov-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.mov .importe{font-weight:600;white-space:nowrap}
.acciones{display:flex;gap:8px;margin-top:8px}
.mini{min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--borde-control);background:var(--control);font-size:.875rem;font-weight:600;display:inline-flex;align-items:center;text-decoration:none;color:var(--texto);cursor:pointer}
.mini.peligro{color:var(--terracota)}
.btn.peligro{background:var(--peligro)}
button:disabled{opacity:.6;cursor:not-allowed}
dialog{border:0;border-radius:var(--radio);padding:20px;max-width:380px;width:calc(100% - 32px);color:var(--texto);background:var(--tarjeta);font-family:var(--fuente)}
dialog::backdrop{background:var(--fondo-modal)}
.dialogo-botones{display:grid;gap:8px}
details textarea{width:100%}

/* N0: componentes comunes */
.avisos{position:fixed;left:16px;right:16px;bottom:88px;max-width:480px;margin:0 auto;display:grid;gap:8px;z-index:30;pointer-events:none}
.aviso{pointer-events:auto;display:flex;align-items:center;gap:10px;background:var(--azul);color:var(--sobre-azul);padding:10px 6px 10px 14px;border-radius:var(--radio-chico);box-shadow:var(--sombra-flotante)}
.aviso-txt{flex:1;font-size:.9375rem}
.aviso-ico{flex:none;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8125rem;background:var(--sobre-azul-2);color:var(--azul)}
.aviso-exito .aviso-ico{background:var(--ingreso-claro)}.aviso-error .aviso-ico{background:var(--gasto-claro);color:var(--gasto-oscuro)}
.aviso-cerrar{flex:none;width:44px;height:44px;border:0;background:transparent;color:var(--sobre-azul);font-size:1.5rem;cursor:pointer}
.tabs{display:flex;background:var(--hundido);border-radius:999px;padding:4px}
.tabs button{flex:1;min-height:44px;border:0;border-radius:999px;background:transparent;color:var(--texto-2);font-weight:500;font-size:.9375rem;cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--tarjeta);color:var(--texto);font-weight:700}
.esqueleto{height:56px;border-radius:var(--radio);margin-bottom:8px;background:linear-gradient(90deg,var(--borde),var(--hundido),var(--borde));background-size:200% 100%;animation:brillo 1.2s infinite}
@keyframes brillo{to{background-position:-200% 0}}
.error-campo{color:var(--terracota);font-size:.8125rem;font-weight:600;margin:4px 0 0;min-height:1em}
input[aria-invalid="true"]{border-color:var(--terracota)}
.campo-clave{position:relative}.campo-clave .campo{padding-right:92px}
.campo-clave button{position:absolute;right:4px;top:6px;height:44px;padding:0 12px;border:0;background:transparent;color:var(--acento);font-weight:600;cursor:pointer}
/* Pantallas de acceso */
.auth{max-width:400px;margin:0 auto;padding-top:24px;display:flex;flex-direction:column;gap:16px}
.auth h1{font-size:1.75rem;line-height:1.2}
.auth form{display:grid;gap:14px}
.marca{display:block;flex:none;width:44px;height:44px;background:url(../img/icono.svg) center/contain no-repeat}
.marca-fila{display:flex;align-items:center;gap:10px}.marca-palabra{display:block;flex:none}.marca-i{fill:var(--logo-i)}
.enlace{display:flex;align-items:center;justify-content:center;min-height:44px;color:var(--acento);font-weight:600;text-decoration:none}
.auth-nota{text-align:center;color:var(--texto-2);font-size:.8125rem;line-height:1.5;margin-top:8px}
/* N1: categorías */
.cat-info{display:flex;gap:12px;align-items:center}
.cat-ico{width:38px;height:38px;border-radius:12px;background:var(--acento-suave);display:flex;align-items:center;justify-content:center;font-size:1.125rem;flex:none}
.mov.inactiva{opacity:.6}
.iconos{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:8px}
.icono-op{position:relative}.icono-op input{position:absolute;opacity:0}
.icono-op span{display:flex;align-items:center;justify-content:center;height:44px;border:1px solid var(--borde-control);border-radius:12px;font-size:1.25rem;background:var(--control);cursor:pointer}
.icono-op input:checked+span{border:2px solid var(--acento);background:var(--acento-suave)}
.icono-op input:focus-visible+span{outline:3px solid var(--acento)}
dialog{max-height:90vh;overflow:auto}
@media (min-width:900px){.avisos{bottom:24px;left:260px;margin:0}}

/* N2: dashboard */
.nav-per{display:flex;gap:8px;align-items:center;margin:12px 0}
.nav-per .campo{margin-top:0;flex:1;min-width:0;padding:0 8px}
.nav-per .mini{justify-content:center;min-width:44px;padding:0}
.grafico{display:flex;gap:2px;align-items:flex-end}
.col-mes{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:0;padding:0;cursor:pointer}
.col-mes:disabled{opacity:.4;cursor:default}
.par-barras{display:flex;gap:2px;align-items:flex-end;height:92px;width:100%;justify-content:center;padding:2px;border-radius:6px}
.col-mes[aria-pressed="true"] .par-barras{background:var(--acento-suave);outline:2px solid var(--acento)}
.bi,.bg{display:block;flex:1;max-width:10px;border-radius:2px 2px 0 0}
.bi{background:var(--verde)}.bg{background:var(--terracota)}
.et-mes{font-size:.75rem;color:var(--texto-2);min-height:1em;white-space:nowrap}
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kpi{background:var(--tarjeta);border:1px solid var(--borde);border-radius:var(--radio);padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.kpi strong{font-size:1.0625rem}
.fila-3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.fila-3>div{display:flex;flex-direction:column;gap:2px}
.fila-3 strong{font-size:.9375rem}
.comparacion{margin-top:10px;padding-top:10px;border-top:1px solid var(--borde);display:grid;gap:4px}
.cat-fila{display:block;padding:8px 0;color:inherit;text-decoration:none;min-height:44px}
.cat-fila-top{display:flex;justify-content:space-between;gap:12px;font-size:.9375rem}
.cat-barra{display:block;height:6px;border-radius:3px;background:var(--borde);margin-top:6px;overflow:hidden}
.cat-barra span{display:block;height:100%;background:var(--terracota);border-radius:3px}
.fila-mes{display:block;width:100%;text-align:left;background:none;border:0;padding:0;min-height:44px;cursor:pointer;font:inherit;color:inherit}
.fila-mes .mov-top{display:flex;justify-content:space-between;gap:12px}
.fila-mes[aria-pressed="true"] strong{color:var(--acento)}
h3{font-size:.9375rem;margin:0}

/* N3: accesibilidad */
h1:focus{outline:none}
.nav a{position:relative;gap:6px}
.insignia{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--peligro);color:var(--sobre-azul);font-size:.6875rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
/* N4: previstos (borde punteado + etiqueta "Previsto": no dependen solo del color) */
.blu{color:var(--info)}
.mov.previsto{border-left:3px dashed var(--info);background:var(--info-suave)}
.etiqueta-prev{color:var(--info);font-weight:700}
.tarjeta-prev{border:1.5px dashed var(--info)}
.lista.sin-marco{border:0;background:transparent;border-radius:0}
.mini.principal{background:var(--primario);color:var(--sobre-primario);border-color:var(--primario)}
.fila-posponer{display:flex;gap:8px;align-items:stretch}
.fila-posponer .campo{margin-top:0;flex:1}
.fila-posponer .btn{flex:1;min-height:48px}

/* N5: calendario financiero */
.cal{width:100%;border-collapse:separate;border-spacing:3px;table-layout:fixed;margin:0}
.cal th{font-size:.8125rem;font-weight:600;color:var(--texto-2);padding:4px 0}
.cal td{padding:0}
.cal-dia{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:2px;width:100%;min-height:52px;padding:4px 0;border:1px solid var(--borde);border-radius:10px;background:var(--tarjeta);color:var(--texto);font:inherit;cursor:pointer}
.cal-dia.hoy{border:2px solid var(--texto)}
.cal-dia.sel{background:var(--acento-suave);outline:2px solid var(--acento)}
.cal-n{font-size:.875rem;font-weight:600}
.cal-dia.hoy .cal-n{text-decoration:underline}
.cal-marcas{display:flex;gap:1px;justify-content:center;flex-wrap:wrap;line-height:1}
.cal-m{font-size:.75rem;font-weight:700;font-style:normal}
.cal-m-ing{color:var(--verde)}.cal-m-gas{color:var(--terracota)}.cal-m-prev{color:var(--info)}.cal-m-venc{color:var(--terracota)}
.cal-cuenta{position:absolute;top:1px;right:3px;font-size:.75rem;color:var(--texto-2)}
.cal-leyenda{list-style:none;display:flex;flex-wrap:wrap;gap:6px 14px;padding:0;margin:10px 0 16px;font-size:.8125rem;color:var(--texto-2)}
@media (min-width:900px){.cal-dia{min-height:72px}}

/* Encabezado fijo de cada pantalla: sencillo, con una marca verde que lo distingue */
#vista>h1:first-child,#vista>.encabezado:first-child{position:sticky;top:0;z-index:8;width:100%;margin:0;
  padding:14px max(var(--pad), calc((100% - var(--ancho)) / 2));
  background:var(--encabezado);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--borde);box-shadow:var(--sombra-encabezado)}
#vista>h1:first-child{display:flex;align-items:center;gap:10px}
#vista>h1:first-child::before{content:"";flex:none;width:6px;height:22px;border-radius:3px;background:var(--acento)}
#vista>.encabezado:first-child{display:flex;align-items:center;gap:12px}
.encabezado h1{font-size:1.25rem}
.encabezado p{margin:0}
.encabezado .fecha-hoy{margin-left:auto;font-size:.8125rem;color:var(--texto-2);text-align:right}
.avatar{flex:none;width:40px;height:40px;border-radius:50%;background:var(--primario);color:var(--sobre-primario);font-weight:700;display:flex;align-items:center;justify-content:center;font-size:1.0625rem;box-shadow:0 0 0 3px var(--acento-suave)}

/* Menús desplegables (filtros, notas): se ve que se puede abrir */
details.desplegable>summary{list-style:none;display:flex;align-items:center;gap:12px;min-height:52px;padding:6px 14px;border:1px solid var(--borde-control);border-radius:var(--radio-chico);background:var(--control);cursor:pointer;color:var(--texto)}
details.desplegable>summary::-webkit-details-marker{display:none}
details.desplegable>summary .d-ico{flex:none;width:36px;height:36px;border-radius:10px;background:var(--acento-suave);color:var(--acento);display:flex;align-items:center;justify-content:center}
details.desplegable>summary .d-txt{display:flex;flex-direction:column;line-height:1.25;font-weight:600;font-size:.9375rem}
details.desplegable>summary .d-txt small{font-weight:400;font-size:.8125rem;color:var(--texto-2)}
details.desplegable>summary::after{content:"";flex:none;margin-left:auto;width:9px;height:9px;border-right:2px solid var(--texto-2);border-bottom:2px solid var(--texto-2);transform:rotate(45deg) translateY(-2px);transition:transform .15s}
details.desplegable[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
details.desplegable[open]>summary{border-color:var(--acento);background:var(--acento-suave)}
details.desplegable>.d-cuerpo{padding-top:12px}

/* Disposición en columnas para pantallas anchas */
.grid-2{display:block}
.grid-2>.col>:first-child{margin-top:0!important}
.cal-layout{display:block}
.cal-detalle{margin-top:16px}
@media (min-width:1000px){
  .grid-2{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:20px;align-items:start}
  .cal-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:20px;align-items:start}
  .cal-detalle{margin-top:0;position:sticky;top:84px}
  .cal-dia{min-height:76px}
}
/* En pantallas medianas y anchas, cada movimiento muestra sus botones al lado */
@media (min-width:700px){
  .lista>.mov:has(.acciones){display:flex;align-items:center;gap:16px}
  .lista>.mov:has(.acciones)>.mov-top{flex:1}
  .lista>.mov:has(.acciones)>.acciones{margin-top:0}
}
.tarjeta>h2{margin-bottom:8px}
@media (min-width:900px){
  .tabs{max-width:420px}
  .nav-per{max-width:520px}
}
/* El botón «+ Registrar» conserva su color aunque sea la pantalla actual (antes se veía blanco sobre verde pálido) */
.nav a.nav-nuevo[aria-current="page"]{background:var(--primario);color:var(--sobre-primario);box-shadow:0 0 0 3px var(--acento-suave),var(--sombra-flotante)}

/* N6: búsqueda, guía de bienvenida */
.icono-btn{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--borde-control);background:var(--control);color:var(--texto);display:flex;align-items:center;justify-content:center;margin-left:12px}
.bienvenida{border-left:4px solid var(--acento);background:linear-gradient(180deg,var(--acento-suave),var(--tarjeta) 60%)}
.pasos{margin:10px 0 12px;padding-left:0;list-style:none;counter-reset:paso;display:grid;gap:10px}
.pasos li{counter-increment:paso;display:grid;grid-template-columns:32px 1fr;column-gap:10px;align-items:start}
.pasos li::before{content:counter(paso);grid-row:span 2;width:28px;height:28px;border-radius:50%;background:var(--primario);color:var(--sobre-primario);font-weight:700;font-size:.875rem;display:flex;align-items:center;justify-content:center}
.pasos a{font-weight:600;color:var(--acento);min-height:28px;display:inline-flex;align-items:center}
@media (max-width:519px){.encabezado .fecha-hoy{display:none}.encabezado .icono-btn{margin-left:auto}}
.grid-2>.col>*+*{margin-top:16px}

/* Entrega 6: páginas legales y zona de peligro */
body[data-vista="privacidad"],body[data-vista="terminos"]{--ancho:720px}
.legal{display:grid;gap:10px;line-height:1.55}
.legal h2{margin-top:10px}
.legal ul{margin:0;padding-left:20px;display:grid;gap:6px}
.legal a{color:var(--acento);font-weight:600}
.aviso-pendiente{background:var(--aviso-fondo);color:var(--aviso-texto);padding:2px 6px;border-radius:6px}
.zona-peligro{border-color:var(--terracota)}
.zona-peligro h2{color:var(--terracota)}
.auth-nota a{color:var(--acento);font-weight:600}

/* Pantallas sin menú (login, recuperar, legales sin sesión): en escritorio no reservar la columna del menú */
@media (min-width:900px){
  body.sin-nav .app{display:block}
  body[data-vista="login"] #vista,body[data-vista="recuperar"] #vista,body[data-vista="nueva-clave"] #vista{padding-top:6vh}
  body[data-vista="login"] .auth,body[data-vista="recuperar"] .auth,body[data-vista="nueva-clave"] .auth{background:var(--tarjeta);border:1px solid var(--borde);border-radius:20px;padding:32px 36px;box-shadow:var(--sombra)}
}

/* =============================================================================
   REDISEÑO v2 — íconos, temas, menú, login, inicio, planes, calendario y ajustes
   ============================================================================= */
.ico{flex:none;display:block}
.solo-pc{display:none!important}
@media (min-width:900px){.solo-pc{display:flex!important}.solo-movil{display:none!important}}
body{transition:background-color .2s}
.tarjeta,.lista,.kpi{box-shadow:var(--sombra)}
.tarjeta>h2,.titulo-fila h2{font-size:1.0625rem}

/* ---- Selectores con pastilla deslizante ---- */
.con-pastilla{position:relative;isolation:isolate}
.con-pastilla>.pastilla{position:absolute;z-index:-1;top:4px;bottom:4px;left:4px;width:0;border-radius:999px;background:var(--control);box-shadow:var(--sombra-pastilla)}
.pastilla-lista>.pastilla{transition:transform .28s cubic-bezier(.3,.7,.2,1),width .28s cubic-bezier(.3,.7,.2,1)}
.seg.con-pastilla input:checked+span,.tabs.con-pastilla button[aria-selected="true"]{background:transparent}
.seg span,.tabs button{transition:color .2s}

/* ---- Menú ---- */
.nav{background:var(--nav-fondo);border-color:var(--nav-borde)}
.nav a,.nav-salir{flex-direction:column;gap:2px;color:var(--nav-texto);font-size:.75rem}
.nav a[aria-current="page"],.nav a.padre-movil{color:var(--nav-activo-texto);font-weight:700}
.nav a[aria-current="page"]:not(.nav-nuevo) .ico,.nav a.padre-movil .ico{color:var(--acento)}
:root[data-tema="mixto"] .nav a[aria-current="page"]:not(.nav-nuevo) .ico{color:var(--marca-acento)}
.nav a.nav-nuevo{flex-direction:row;gap:6px}
.nav .insignia{position:absolute;top:2px;right:8px}
.nav-salir{border:0;background:transparent;cursor:pointer;font:inherit;display:flex;align-items:center;min-height:44px}
.nav-marca{text-decoration:none;color:var(--nav-activo-texto)}
.nav-marca>span:last-child{display:flex;flex-direction:column;font-weight:700;font-size:1rem;line-height:1.15}
.nav-marca .marca{width:36px;height:36px}
@media (min-width:900px){
  .nav{padding:20px 14px;gap:2px}
  .nav a,.nav-salir{flex-direction:row;gap:12px;font-size:.9375rem;min-height:44px;padding:0 12px;border-radius:var(--radio-chico)}
  .nav a:not(.nav-nuevo):hover,.nav-salir:hover{background:var(--nav-activo-fondo)}
  .nav a[aria-current="page"]{background:var(--nav-activo-fondo)}
  .nav a.padre-movil:not([aria-current]){color:var(--nav-texto);font-weight:400}
  .nav a.padre-movil:not([aria-current]) .ico{color:inherit}
  .nav-marca{order:-2;display:flex;align-items:center;gap:10px;min-height:52px!important;margin:0 0 14px;padding:0 6px!important}
  .nav-marca:hover{background:transparent!important}
  .nav a.nav-nuevo{order:-1;min-height:48px;margin:0 0 14px;justify-content:center}
  .nav .insignia{position:static;margin-left:auto}
  .nav-perfil{margin-top:auto}
  .nav-salir{width:100%;text-align:left}
}
@media (max-width:899px){
  .nav{height:68px;padding-bottom:env(safe-area-inset-bottom)}
  .nav a{min-width:60px}
  .nav a.nav-nuevo{min-width:auto;width:56px;height:56px;margin-top:-30px;padding:0;border-radius:50%}
  .nav a.nav-nuevo .nav-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  /* La opción en la que estás lleva el mismo fondo verde suave que la maqueta de la landing y el menú de la PC */
  .nav a[aria-current="page"]:not(.nav-nuevo),.nav a.padre-movil:not(.nav-nuevo){background:var(--nav-activo-fondo);border-radius:var(--radio-chico)}
}

/* ---- Encabezado de pantalla con ícono y acciones ---- */
.enc-ico{flex:none;width:40px;height:40px;border-radius:12px;background:var(--acento-suave);color:var(--acento);display:flex;align-items:center;justify-content:center}
.enc-txt{min-width:0}
.enc-txt h1{font-size:1.25rem;line-height:1.2}
.enc-txt .suave{margin-top:2px;font-size:.8125rem}
.enc-acciones{margin-left:auto;display:flex;gap:8px;align-items:center;flex:none}
.enc-acciones .mini{gap:6px}
@media (max-width:599px){.enc-pantalla .enc-txt .suave{display:none}.enc-acciones .mini .nav-t,.enc-acciones .mini .txt-pc{display:none}.enc-acciones .mini{padding:0 12px;min-width:44px}}
.mini .ico{margin-left:-2px}
.mini{gap:6px}

/* ---- Botones con ícono ---- */
.btn{gap:8px;transition:background-color .15s,transform .1s}
.btn:not(.sec):not(:disabled):hover{background:var(--primario-hover)}
.btn:active:not(:disabled){transform:scale(.985)}
.btn.sec:hover,.mini:hover{border-color:var(--texto-2)}

/* =============================================================================
   LOGIN
   ============================================================================= */
@keyframes subir{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes aparecer{from{opacity:0}to{opacity:1}}
@keyframes sacudir{0%,100%{transform:none}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@keyframes latir{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.08);opacity:1}100%{transform:scale(1)}}
.auth{animation:subir .4s ease-out both}
.auth-titulo{transition:opacity .2s}
.auth-sub{min-height:2.6em}
.cambiando{animation:aparecer .3s ease-out}
.error:not(:empty){animation:sacudir .3s ease-out}
/* Campos que aparecen al pasar a "Crear cuenta": se despliegan suave */
.plegable{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .3s ease,opacity .25s ease,margin .3s ease;margin-top:-14px}
.plegable>div{overflow:hidden;min-height:0}
.plegable.abierto{grid-template-rows:1fr;opacity:1;margin-top:0}
/* Mensaje de éxito (cuenta creada) */
.auth-exito{display:flex;gap:14px;align-items:flex-start;padding:16px;border-radius:var(--radio);background:var(--verde-suave);border:1px solid var(--verde);animation:subir .35s ease-out}
.auth-exito .exito-ico{flex:none;width:40px;height:40px;border-radius:50%;background:var(--primario);color:var(--sobre-primario);display:flex;align-items:center;justify-content:center;animation:latir .45s ease-out}
.auth-exito strong{display:block;margin-bottom:2px}
.btn.listo{background:var(--primario)}
.btn.listo .ico{animation:latir .4s ease-out}
.auth-beneficios{display:none}
@media (min-width:900px){
  body:is([data-vista="login"],[data-vista="recuperar"],[data-vista="nueva-clave"]) #vista{padding:0;min-height:100vh;justify-content:center}
  body:is([data-vista="login"],[data-vista="recuperar"],[data-vista="nueva-clave"]) #vista>*{width:min(100% - 64px,1040px)}
  .auth-split{display:grid;grid-template-columns:1.05fr 1fr;min-height:620px;border-radius:24px;overflow:hidden;background:var(--tarjeta);border:1px solid var(--borde);box-shadow:var(--sombra-alta);animation:subir .45s ease-out both}
  .auth-split .auth{max-width:none;width:100%;padding:48px 56px;margin:0;border:0!important;box-shadow:none!important;border-radius:0!important;background:transparent!important;align-self:center;animation:none}
  .auth-beneficios{display:flex;flex-direction:column;justify-content:space-between;gap:28px;padding:48px;color:var(--marca-texto);
    background:radial-gradient(120% 90% at 0% 0%,var(--marca-fondo-1) 0%,var(--marca-fondo-2) 55%,var(--marca-fondo-3) 100%);position:relative;overflow:hidden}
  .auth-beneficios::after{content:"";position:absolute;right:-120px;bottom:-120px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,var(--marca-brillo),transparent 65%)}
  .auth-beneficios h2{font-size:2rem;line-height:1.15;letter-spacing:-.01em;margin-top:28px}
  .auth-beneficios p{color:var(--marca-texto-2);margin-top:12px;max-width:34ch}
  .auth-beneficios ul{list-style:none;margin:0;padding:0;display:grid;gap:16px;position:relative;z-index:1}
  .auth-beneficios li{display:flex;gap:12px;align-items:flex-start}
  .auth-beneficios li .ico-b{flex:none;width:36px;height:36px;border-radius:10px;background:var(--marca-velo);color:var(--marca-acento);display:flex;align-items:center;justify-content:center}
  .auth-beneficios li strong{display:block;color:var(--marca-titulo);font-size:.9375rem}
  .auth-beneficios li span{color:var(--marca-texto-2);font-size:.8125rem}
  .auth-split .auth>.marca-fila{display:none}
}

/* =============================================================================
   INICIO
   ============================================================================= */
.barra-ini{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;justify-content:space-between}
.barra-ini .tabs{flex:0 1 360px;min-width:260px}
.barra-ini #controles{flex:1 1 auto;display:flex;justify-content:flex-end;min-width:0}
.barra-ini #controles>.nav-per{margin:0;flex:0 1 460px}
.barra-ini #controles.periodo{flex-basis:100%;display:block}
@media (max-width:699px){.barra-ini .tabs{flex-basis:100%}.barra-ini #controles{justify-content:stretch}.barra-ini #controles>.nav-per{flex-basis:100%}}
.resumen{background:radial-gradient(130% 120% at 100% 0%,var(--resumen-brillo) 0%,var(--azul) 55%);position:relative;overflow:hidden;box-shadow:var(--sombra-alta)}
:root[data-tema="oscuro"] .resumen{background:radial-gradient(130% 120% at 100% 0%,var(--resumen-brillo) 0%,var(--azul) 60%)}
.resumen .grande{font-size:2.25rem;letter-spacing:-.01em}
.resumen .dos>div{display:flex;gap:10px;align-items:center}
.resumen .dos .ico-r{flex:none;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--velo-claro)}
.resumen .dos .ico-r.ing{color:var(--ingreso-claro)}.resumen .dos .ico-r.gas{color:var(--gasto-claro)}
@media (min-width:900px){.resumen .grande{font-size:2.75rem}.resumen{padding:24px 26px}}
/* Gráfico más alto, barras más anchas y línea de base */
.par-barras{height:140px;gap:4px;border-bottom:1px solid var(--borde)}
.bi,.bg{max-width:22px;border-radius:4px 4px 0 0}
.leyenda-graf{display:flex;gap:14px;margin-top:10px;font-size:.8125rem;color:var(--texto-2);flex-wrap:wrap}
.leyenda-graf span{display:inline-flex;align-items:center;gap:6px}
.leyenda-graf i{width:10px;height:10px;border-radius:3px;display:inline-block}
.leyenda-graf .li{background:var(--verde)}.leyenda-graf .lg{background:var(--terracota)}
/* Comparación con el mes anterior: como etiquetas */
.comparacion{display:flex;flex-wrap:wrap;gap:8px}
.comparacion p{background:var(--hundido);border-radius:999px;padding:4px 10px;font-size:.8125rem}
/* "Ingresos por categoría": desplegable con flecha */
details.mini-det{margin-top:12px;border-top:1px solid var(--borde);padding-top:4px}
details.mini-det>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;min-height:44px;cursor:pointer;font-weight:600;font-size:.9375rem;color:var(--texto)}
details.mini-det>summary::-webkit-details-marker{display:none}
details.mini-det>summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--texto-2);border-bottom:2px solid var(--texto-2);transform:rotate(45deg);transition:transform .15s;margin-right:4px}
details.mini-det[open]>summary::after{transform:rotate(-135deg)}
.cat-barra.ing span{background:var(--verde)}
/* Filas de movimiento con ícono de categoría */
.mov-ico{display:flex;gap:12px;align-items:center;min-width:0}
.mov-ico>div{min-width:0}
.mov-ico strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.circ{flex:none;width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.0625rem;background:var(--hundido);color:var(--texto-2)}
.circ.g{background:color-mix(in srgb,var(--terracota) 14%,transparent);color:var(--terracota)}
.circ.i{background:var(--verde-suave);color:var(--verde)}
.circ.p{background:var(--info-suave);color:var(--info)}

/* =============================================================================
   PLANES
   ============================================================================= */
.resumen-planes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:900px){.resumen-planes{grid-template-columns:repeat(4,minmax(0,1fr))}}
.tile{background:var(--tarjeta);border:1px solid var(--borde);border-radius:var(--radio);padding:14px;display:flex;flex-direction:column;gap:6px;box-shadow:var(--sombra);min-width:0}
.tile .circ{width:34px;height:34px;border-radius:10px}
.tile .t-et{font-size:.8125rem;color:var(--texto-2)}
.tile strong{font-size:1.125rem;line-height:1.2;overflow-wrap:anywhere}
.tile .t-sub{font-size:.75rem;color:var(--texto-2)}
.tile.alerta{border-color:var(--terracota)}
.seccion-t{display:flex;align-items:center;gap:8px;font-size:1.0625rem;margin:4px 0 10px}
.seccion-t .cuenta{font-size:.75rem;font-weight:700;background:var(--hundido);color:var(--texto-2);border-radius:999px;padding:2px 8px}
.linea-tiempo{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.linea-tiempo li{display:flex;gap:12px;align-items:center;background:var(--tarjeta);border:1px dashed var(--info);border-radius:var(--radio-chico);padding:10px 14px}
.fecha-chip{flex:none;width:48px;text-align:center;border-radius:10px;background:var(--info-suave);color:var(--info);padding:4px 0;line-height:1.1}
.fecha-chip b{display:block;font-size:1.125rem}
.fecha-chip small{font-size:.6875rem;text-transform:uppercase;font-weight:700;letter-spacing:.04em}
.linea-tiempo .lt-txt{flex:1;min-width:0}
.linea-tiempo .lt-txt strong{display:block;font-weight:600}
.lista-rec .mov-top{align-items:center}
.lista-rec .rec-der{display:flex;align-items:center;gap:10px;flex:none}
.etiqueta-estado{font-size:.75rem;font-weight:700;border-radius:999px;padding:2px 8px;background:var(--hundido);color:var(--texto-2)}

/* =============================================================================
   CALENDARIO
   ============================================================================= */
body[data-vista="calendario"]{--ancho:1320px}
.cal2{display:grid;gap:16px;grid-template-columns:minmax(0,1fr);grid-template-areas:"res" "cal" "det" "ley";align-items:start}
.cal2-res{grid-area:res}.cal2-cal{grid-area:cal}.cal2-det{grid-area:det}.cal2-ley{grid-area:ley}
@media (min-width:900px){
  .cal2{grid-template-columns:minmax(0,1fr) 300px;grid-template-areas:"cal res" "cal det" "cal ley"}
  .cal2-res,.cal2-det,.cal2-ley{align-self:start}
}
@media (min-width:1240px){
  .cal2{grid-template-columns:250px minmax(0,1fr) 310px;grid-template-areas:"res cal det" "ley cal det";grid-template-rows:auto 1fr}
  .cal2-det{position:sticky;top:84px}
}
.cal2-cal{background:var(--tarjeta);border:1px solid var(--borde);border-radius:var(--radio);padding:12px;box-shadow:var(--sombra)}
.cal2-cal .nav-per{margin:0 0 8px;max-width:none}
.cal-titulo-mes{font-size:1.125rem;font-weight:700;flex:1;text-align:center}
.cal2 .cal-dia{min-height:58px;align-items:flex-start;padding:5px 6px;gap:3px;transition:border-color .15s,background-color .15s}
.cal2 .cal-dia:hover{border-color:var(--borde-control)}
.cal2 .cal-marcas{justify-content:flex-start}
.cal2 .cal-m{font-size:.8125rem}
.cal-reg{margin-top:auto;font-size:.6875rem;font-weight:600;color:var(--texto-2);background:var(--hundido);border-radius:6px;padding:1px 5px;white-space:nowrap}
.cal-dia.sel .cal-reg{background:var(--tarjeta)}
.cal2 .cal-dia.hoy .cal-n{text-decoration:none;background:var(--texto);color:var(--tarjeta);border-radius:999px;padding:0 6px}
@media (min-width:900px){.cal2 .cal-dia{min-height:66px}}
@media (max-width:519px){.cal2-cal{padding:6px}.cal{border-spacing:2px}.cal2 .cal-dia{min-height:54px;padding:4px 3px}.cal-reg{font-size:.625rem;padding:0 3px}}
.res-lista{display:grid;gap:10px;margin-top:4px}
.res-fila{display:flex;align-items:center;gap:10px}
.res-fila .circ{width:32px;height:32px;border-radius:10px}
.res-fila>div{display:flex;flex-direction:column;min-width:0}
.res-fila strong{font-size:1rem}
.res-prev{margin-top:12px;padding:10px 12px;border-radius:var(--radio-chico);background:var(--info-suave);color:var(--texto);font-size:.8125rem;border:1px dashed var(--info)}
.cal-leyenda2{list-style:none;padding:0;margin:6px 0 0;display:grid;gap:10px;font-size:.875rem}
.cal-leyenda2 li{display:flex;gap:10px;align-items:center}
.cal-leyenda2 .sim{flex:none;width:28px;height:28px;border-radius:8px;border:1px solid var(--borde);display:flex;align-items:center;justify-content:center;background:var(--control)}
.cal-leyenda2 .sim .cal-reg{margin:0;font-size:.625rem}
.cal-leyenda2 .sim-hoy{border:2px solid var(--texto)}
.cal-leyenda2 .sim-sel{background:var(--acento-suave);outline:2px solid var(--acento);border:0}
.det-reg{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.det-reg span{font-size:.8125rem;font-weight:600;background:var(--hundido);border-radius:999px;padding:3px 10px;color:var(--texto-2)}

/* =============================================================================
   PERFIL Y AJUSTES
   ============================================================================= */
body[data-vista="perfil"]{--ancho:1040px}
.ajustes{display:grid;gap:16px}
@media (min-width:1000px){.ajustes{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}.ajustes .ancho-total{grid-column:1/-1}}
.aj-cab{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.aj-cab .circ{width:36px;height:36px;border-radius:10px;background:var(--acento-suave);color:var(--acento)}
.aj-cab h2{font-size:1.0625rem}
.aj-cab p{font-size:.8125rem}
.cuenta-cab{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.cuenta-cab .avatar{width:56px;height:56px;font-size:1.375rem}
.cuenta-cab strong{display:block;font-size:1.125rem}
.datos-cuenta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:12px}
.datos-cuenta div{background:var(--hundido);border-radius:var(--radio-chico);padding:8px 10px;display:flex;flex-direction:column;min-width:0}
.datos-cuenta span{font-size:.75rem;color:var(--texto-2)}
.datos-cuenta b{font-size:.875rem;font-weight:600;overflow-wrap:anywhere}
.temas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;border:0;padding:0;margin:0}
@media (max-width:420px){.temas{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tema-op{position:relative}
.tema-op input{position:absolute;opacity:0}
.tema-op>span{display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 6px;border:1px solid var(--borde-control);border-radius:var(--radio-chico);background:var(--control);cursor:pointer;font-size:.8125rem;font-weight:600;text-align:center;transition:border-color .15s,background-color .15s}
.tema-op .muestra{width:100%;height:38px;border-radius:8px;border:1px solid var(--borde);display:grid;grid-template-columns:30% 1fr;overflow:hidden}
.tema-op .muestra i{display:block}
/* Muestras de cada tema: pintan los colores FIJOS de ese tema a propósito (es la única excepción a la regla de tokens) */
.m-claro i:first-child{background:#fff}.m-claro i:last-child{background:#F6F8FA}
.m-mixto i:first-child{background:#0F2A43}.m-mixto i:last-child{background:#F6F8FA}
.m-oscuro i:first-child{background:#0E1C2B}.m-oscuro i:last-child{background:#122233}
.m-sistema i:first-child{background:linear-gradient(135deg,#fff 50%,#0E1C2B 50%)}.m-sistema i:last-child{background:linear-gradient(135deg,#F6F8FA 50%,#122233 50%)}
.tema-op input:checked+span{border:2px solid var(--acento);background:var(--acento-suave)}
.tema-op input:focus-visible+span{outline:3px solid var(--acento);outline-offset:2px}
.interruptor{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;margin-top:12px;padding-top:12px;border-top:1px solid var(--borde);cursor:pointer}
.interruptor input{appearance:none;-webkit-appearance:none;flex:none;width:46px;height:28px;border-radius:999px;background:var(--borde-control);position:relative;cursor:pointer;transition:background-color .2s;margin:0}
.interruptor input::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--sobre-primario);transition:transform .2s;box-shadow:var(--sombra-pastilla)}
.interruptor input:checked{background:var(--primario)}
.interruptor input:checked::after{transform:translateX(18px)}
.interruptor input:focus-visible{outline:3px solid var(--acento);outline-offset:2px}
.interruptor span{display:flex;flex-direction:column}
.interruptor small{color:var(--texto-2);font-size:.8125rem}
.enlaces-aj{list-style:none;margin:0;padding:0;display:grid}
.enlaces-aj li+li{border-top:1px solid var(--borde)}
.enlaces-aj a,.enlaces-aj button{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:6px 2px;border:0;background:none;color:var(--texto);font:inherit;font-weight:600;text-decoration:none;cursor:pointer;text-align:left}
.enlaces-aj a::after,.enlaces-aj button.flecha::after{content:"";margin-left:auto;width:8px;height:8px;border-right:2px solid var(--texto-2);border-top:2px solid var(--texto-2);transform:rotate(45deg)}
.enlaces-aj .ico{color:var(--texto-2)}
.enlaces-aj small{display:block;font-weight:400;font-size:.8125rem;color:var(--texto-2)}
.zona-peligro{background:color-mix(in srgb,var(--terracota) 6%,var(--tarjeta))}
.ico.en-linea{display:inline-block;vertical-align:-3px;margin-right:2px}
.auth-beneficios{--logo-i:var(--logo-punto-claro)}

.interruptor{color:var(--texto);font-size:.9375rem;font-weight:600}
.interruptor small{font-weight:400}
/* PC: el menú lateral queda fijo y ocupa todo el alto, aunque la página sea larga */
@media (min-width:900px){
  .app{display:block;padding-left:240px}
  .nav{position:fixed;top:0;bottom:0;left:0;width:240px;height:auto;overflow-y:auto}
  body.sin-nav .app{padding-left:0}
}
.auth form>#info:empty,.auth form>.error:empty{min-height:0}
/* En una grilla, un renglón vacío igual deja su separación: se la descuenta al elemento que sigue */
/* (#form-auth usa márgenes en lugar de gap, así que no lleva este descuento: con él, la casilla de Términos se montaba sobre «Repite la contraseña») */
.auth form:not(#form-auth)>.error:empty+*{margin-top:-14px}
.auth form:not(#form-auth)>.error:empty+#info:empty+*{margin-top:-28px}
/* Comprobación «no soy un robot»: el recuadro de Cloudflare se ve siempre y se le reserva su alto para que el formulario no salte */
.captcha .error-campo{margin:0}
.captcha .error-campo:empty{min-height:0}
.captcha.visible [data-captcha],.captcha .error-campo:not(:empty){margin-top:14px}
.captcha.visible [data-captcha]{min-height:65px}
.auth form:not(#form-auth)>.captcha.visible [data-captcha]{margin-top:0}
.auth form>.captcha:not(.visible):not(:has(.error-campo:not(:empty)))+*{margin-top:-14px}
@media (max-width:899px){.res-lista{grid-template-columns:1fr 1fr}.cal2-cal .nav-per .campo{padding:0 6px;font-size:.9375rem}}
@media (min-width:900px){body:is([data-vista="login"],[data-vista="recuperar"],[data-vista="nueva-clave"]) #vista{justify-content:flex-start;padding-top:max(24px,5vh)}}
/* Registro: medidor de fuerza y generador de contraseña */
#plegable-clave2>div{display:grid;gap:12px}
.fuerza{display:flex;align-items:center;gap:10px;font-size:.8125rem;color:var(--texto-2)}
.fuerza-barra{display:flex;gap:4px;flex:none}
.fuerza-barra i{width:28px;height:6px;border-radius:3px;background:var(--borde);transition:background-color .2s}
.fuerza[data-nivel="1"] .fuerza-barra i:nth-child(1){background:var(--terracota)}
.fuerza[data-nivel="2"] .fuerza-barra i:nth-child(-n+2){background:var(--fuerza-media)}
.fuerza[data-nivel="3"] .fuerza-barra i{background:var(--verde)}
button.enlace-chico{border:0;background:none;font-family:inherit;cursor:pointer}
button.enlace-chico[hidden]{display:none}
.error-campo.bien{color:var(--verde)}
#campo-clave2[hidden]{display:none}
.clave-generada{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:var(--radio-chico);background:var(--acento-suave);font-size:.8125rem;animation:subir .3s ease-out}
.clave-generada:not([hidden]){display:flex}
.campo-clave .campo[type="text"]{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.02em}
/* Login: «Olvidé mi contraseña» en la fila de la etiqueta (así no queda abajo, fuera de la pantalla) */
.etq-fila{display:flex;align-items:center;justify-content:space-between;gap:12px}
.enlace-chico{display:inline-flex;align-items:center;min-height:44px;margin:-10px 0 -6px;padding:0 2px;font-size:.8125rem;font-weight:600;color:var(--acento);text-decoration:none;white-space:nowrap}
.enlace-chico:hover{text-decoration:underline}
/* Login en el celular: más compacto, para que el formulario entero entre sin bajar */
@media (max-width:899px){
  body[data-vista="login"] .auth{padding-top:12px;gap:12px}
  body[data-vista="login"] .auth>.marca-fila .marca{width:36px;height:36px}
  body[data-vista="login"] .auth h1{font-size:1.5rem}
  body[data-vista="login"] .auth-sub{min-height:0;font-size:.875rem}
}
/* Login: los bloques ocultos (los de «Crear cuenta» y los mensajes vacíos) no deben dejar hueco.
   Con «gap» la separación quedaba igual aunque el bloque midiera 0, así que se usa margen arriba. */
#form-auth{gap:0}
#form-auth>*+*{margin-top:14px}
#form-auth>.plegable{margin-top:0}
#form-auth>.plegable.abierto{margin-top:14px}
#form-auth>#info:empty,#form-auth>.error:empty,#form-auth>.captcha{margin-top:0}
/* Calendario en el celular: el detalle del día sube en una «hoja» desde abajo */
dialog.hoja{margin:0;inset:auto 0 0 0;width:100%;max-width:none;max-height:85vh;border-radius:20px 20px 0 0;
  padding:0 16px calc(20px + env(safe-area-inset-bottom));overflow:auto;box-shadow:var(--sombra-alta);animation:subir-hoja .25s ease-out;transition:transform .15s}
.hoja-cab{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:center;min-height:44px;background:var(--tarjeta);touch-action:none}
.hoja-asa{width:40px;height:5px;border-radius:3px;background:var(--borde-control)}
.hoja-cerrar{position:absolute;right:-8px;top:0;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:0;border-radius:50%;background:transparent;color:var(--texto-2);cursor:pointer}
.hoja-cerrar:hover{background:var(--hundido)}
.hoja .tarjeta{border:0;box-shadow:none;padding:0;background:transparent}
@keyframes subir-hoja{from{transform:translateY(100%)}to{transform:none}}
/* Registro: casilla «Leí y acepto» (44px para tocarla, el texto también la marca) */
.casilla{display:flex;align-items:flex-start;gap:10px;min-height:44px;padding:4px 0;font-size:.875rem;line-height:1.5;color:var(--texto);cursor:pointer}
.casilla input{flex:none;width:22px;height:22px;margin:1px 0 0;accent-color:var(--primario);cursor:pointer}
.casilla a{color:var(--acento);font-weight:600}
/* Registrar: el selector Gasto / Ingreso se nota al instante (más alto, con − y +, y el color del tipo elegido) */
.seg-tipo span{height:52px;gap:8px;font-size:1.0625rem}
.seg-tipo .s{font-size:1.375rem;font-weight:700;line-height:1}
.seg-tipo input[value="gasto"]:checked+span{color:var(--terracota);font-weight:700}
.seg-tipo input[value="ingreso"]:checked+span{color:var(--verde);font-weight:700}
/* Apariencia y lectura: tamaño de letra (todo está en rem: cambia el tamaño base y crece toda la app) */
:root[data-letra="grande"]{font-size:112.5%}
:root[data-letra="muy-grande"]{font-size:125%}
/* «Reducir animaciones» elegido en la app (además de la preferencia del sistema, que ya se respeta) */
:root[data-movimiento="reducido"] *,:root[data-movimiento="reducido"] *::before,:root[data-movimiento="reducido"] *::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
.temas.letras{grid-template-columns:repeat(3,minmax(0,1fr))}
.letra-op .aa{display:flex;align-items:center;justify-content:center;height:38px;font-weight:700;color:var(--texto);line-height:1}
.aa-1{font-size:1rem}.aa-2{font-size:1.25rem}.aa-3{font-size:1.5rem}
/* Ajustes en una sola columna (lista de secciones y cada sección) */
.ajustes.ajustes-una{grid-template-columns:minmax(0,1fr);max-width:680px}
.interruptor.sin-linea{margin-top:0;padding-top:0;border-top:0}
/* Apariencia: elegir el color de acento */
.acentos{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:420px){.temas.acentos{grid-template-columns:repeat(2,minmax(0,1fr))}}
.acento-op .bola{width:30px;height:30px;border-radius:50%;margin:4px 0}
.bola.b-verde{background:var(--muestra-verde)}.bola.b-violeta{background:var(--muestra-violeta)}
.bola.b-grafito{background:var(--muestra-grafito)}.bola.b-oceano{background:var(--muestra-oceano)}
/* Apariencia: estilos completos (3 franjas: fondo, menú/tarjeta y acento) y opciones desactivadas */
.temas.estilos,.temas.acentos{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
.muestra.me{grid-template-columns:1fr 1fr 22%}
.me-pr i:nth-child(1){background:var(--me-pr-1)}.me-pr i:nth-child(2){background:var(--me-pr-2)}.me-pr i:nth-child(3){background:var(--me-pr-3)}
.me-gn i:nth-child(1){background:var(--me-gn-1)}.me-gn i:nth-child(2){background:var(--me-gn-2)}.me-gn i:nth-child(3){background:var(--me-gn-3)}
.me-ca i:nth-child(1){background:var(--me-ca-1)}.me-ca i:nth-child(2){background:var(--me-ca-2)}.me-ca i:nth-child(3){background:var(--me-ca-3)}
.me-la i:nth-child(1){background:var(--me-la-1)}.me-la i:nth-child(2){background:var(--me-la-2)}.me-la i:nth-child(3){background:var(--me-la-3)}
.me-me i:nth-child(1){background:var(--me-me-1)}.me-me i:nth-child(2){background:var(--me-me-2)}.me-me i:nth-child(3){background:var(--me-me-3)}
.bola.b-ciruela{background:var(--muestra-ciruela)}
.temas:disabled{opacity:.5}
.temas:disabled .tema-op>span{cursor:not-allowed}
.nota-estilo{margin:0 0 12px}

/* Subcategorías (dentro de cada categoría, en la pantalla Categorías) */
.subcats{margin-top:10px;padding-top:10px;border-top:1px solid var(--borde)}
.subcats .chips{margin-top:0}
.subcats .chip button{max-width:100%;text-align:left}
.chip-agregar button{border-style:dashed;color:var(--acento);font-weight:600}
.sub-inactiva button{border-style:dashed;color:var(--texto-2)}
.interruptor.sin-linea.tarjeta{padding:16px}

/* Informes */
.inf-controles{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}
.inf-controles fieldset{flex:1 1 150px;margin:0}
.inf-nav{flex:1 1 100%;margin:0}
.inf-nav strong{flex:1;text-align:center;font-size:1rem}
.inf-nav .mini:disabled{opacity:.45;cursor:default}
@media (min-width:900px){.inf-controles fieldset{flex:0 1 220px}.inf-nav{flex:0 1 320px;margin-left:auto}}
.inf-grid{display:grid;gap:14px;align-items:start}
.inf-columna{display:grid;gap:14px;min-width:0}
@media (min-width:1000px){.inf-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}}
.inf-total h2{font-size:.9375rem;font-weight:600;color:var(--texto-2)}
.inf-monto{display:block;font-size:clamp(1.75rem,6vw,2.5rem);letter-spacing:-.02em;margin:2px 0 6px}
.inf-total b{font-weight:700}
.inf-lista{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:2px}
.inf-fila{display:block;padding:9px 0;color:inherit;text-decoration:none;min-height:44px;border-radius:8px;cursor:pointer}
div.inf-fila{cursor:default}
.inf-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:.9375rem}
.inf-nom{min-width:0;overflow-wrap:anywhere;font-weight:500}
.inf-val{white-space:nowrap;font-weight:600}
.inf-val small{font-weight:400;color:var(--texto-2);font-size:.8125rem;margin-left:4px}
.inf-barra{display:block;height:8px;margin-top:6px}
.inf-barra i{display:block;height:100%;border-radius:2px 4px 4px 2px;transform-origin:left;animation:inf-crecer 350ms cubic-bezier(.23,1,.32,1) both}
.inf-barra i.gasto,.inf-col-barra.gasto{background:var(--terracota)}
.inf-barra i.ingreso,.inf-col-barra.ingreso{background:var(--verde)}
@keyframes inf-crecer{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes inf-subir{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@media (hover:hover) and (pointer:fine){a.inf-fila:hover .inf-nom,summary.inf-fila:hover .inf-nom{color:var(--acento)}}
.inf-det>summary{list-style:none}
.inf-det>summary::-webkit-details-marker{display:none}
.inf-mas{display:inline-flex;align-items:center;gap:4px;margin-top:6px;font-size:.8125rem;font-weight:600;color:var(--acento)}
.inf-mas .ico{transition:transform 160ms ease-out}
.inf-det[open] .inf-mas .ico{transform:rotate(90deg)}
.inf-sub{margin:2px 0 8px;padding-left:14px;border-left:2px solid var(--borde)}
.inf-grafico{display:flex;gap:2px;align-items:flex-end;margin-top:12px}
.inf-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;padding:4px 0;background:none;border:0;border-radius:8px;cursor:pointer;color:var(--texto-2)}
.inf-col:disabled{cursor:default;opacity:.5}
.inf-col[aria-pressed="true"]{background:var(--acento-suave);color:var(--texto);font-weight:700}
.inf-col-area{display:flex;align-items:flex-end;justify-content:center;width:100%;height:124px;border-bottom:1px solid var(--borde-fuerte)}
.inf-col-barra{display:block;width:min(70%,34px);border-radius:4px 4px 0 0;transform-origin:bottom;animation:inf-subir 350ms cubic-bezier(.23,1,.32,1) both}
.inf-col-et{font-size:.75rem}
@media (hover:hover) and (pointer:fine){.inf-col:not(:disabled):hover{background:var(--hundido)}.inf-col[aria-pressed="true"]:hover{background:var(--acento-suave)}}
.inf-lectura{margin:10px 0 0;font-size:.9375rem;font-weight:600;font-variant-numeric:tabular-nums;min-height:1.4em}
.inf-tabla{width:100%;border-collapse:collapse;font-size:.9375rem;margin:4px 0 8px}
.inf-tabla th,.inf-tabla td{padding:8px 0;border-bottom:1px solid var(--borde);text-align:left;font-weight:400}
.inf-tabla thead th{font-weight:600;color:var(--texto-2);font-size:.8125rem}
.inf-tabla td,.inf-tabla thead th:last-child{text-align:right}
.inf-cambios{list-style:none;margin:8px 0 0;padding:0}
.inf-cambio{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--borde)}
.inf-cambio:last-child{border-bottom:0}
.inf-cambio>div:first-child{min-width:0}
.inf-cambio strong{display:block;font-weight:500;font-size:.9375rem;overflow-wrap:anywhere}
.inf-cambio small{display:block;font-size:.8125rem}
.inf-dif{text-align:right;white-space:nowrap;font-weight:600;font-size:.9375rem}
.inf-dif small{font-weight:400;color:var(--texto-2)}
.inf-antes{display:flex;flex-wrap:wrap;gap:0 10px}
.inf-antes span{white-space:nowrap}
#inf-pdf:disabled{opacity:.5;cursor:default}
/* Informe general: resultado, dona de gastos y mes a mes con ingresos y gastos */
.gen-lista{margin:8px 0 0;display:grid;gap:6px}
.gen-lista div{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.gen-lista dt{color:var(--texto-2);font-size:.9375rem}
.gen-lista dd{margin:0;font-weight:600;white-space:nowrap}
.gen-lista .gen-res{margin-top:4px;padding-top:10px;border-top:1px solid var(--borde)}
.gen-lista .gen-res dt{color:var(--texto);font-weight:600}
.gen-lista .gen-res dd{font-size:1.375rem;font-weight:700}
.gen-lista+p{margin-top:8px}
.inf-dona{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin:12px 0 8px}
.inf-dona svg{flex:none;width:132px;height:132px}
.dona-s{fill:none;stroke-width:16}
.dona-c1{font-size:9px;fill:var(--texto-2);text-anchor:middle}
.dona-c2{font-size:13px;font-weight:700;fill:var(--texto);text-anchor:middle}
.dona-ley{flex:1 1 180px;min-width:0;list-style:none;margin:0;padding:0;display:grid;gap:6px}
.dona-ley li{display:flex;align-items:center;gap:8px;font-size:.875rem}
.dona-ley i{flex:none;width:12px;height:12px;border-radius:3px}
.dona-nom{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dona-val{flex:none;text-align:right;white-space:nowrap}
.dona-val small{color:var(--texto-2);font-size:.75rem}
.d-1{stroke:var(--dona-1);background:var(--dona-1)}.d-2{stroke:var(--dona-2);background:var(--dona-2)}.d-3{stroke:var(--dona-3);background:var(--dona-3)}
.d-4{stroke:var(--dona-4);background:var(--dona-4)}.d-5{stroke:var(--dona-5);background:var(--dona-5)}.d-otros{stroke:var(--dona-otros);background:var(--dona-otros)}
svg .dona-s{background:none}
.inf-leyenda{display:flex;flex-wrap:wrap;gap:4px 16px;margin:6px 0 0;font-size:.8125rem;color:var(--texto-2)}
.inf-leyenda span{display:inline-flex;align-items:center;gap:6px}
.inf-leyenda i{width:12px;height:12px;border-radius:3px}
.inf-leyenda i.ingreso{background:var(--verde)}.inf-leyenda i.gasto{background:var(--terracota)}
.inf-col-area.doble{gap:2px}
.inf-col-area.doble .inf-col-barra{width:min(34%,15px)}

/* PRÉSTAMOS Y FIADOS */
body[data-vista="prestamos"],body[data-vista="prestamo"]{--ancho:760px}
body[data-vista="prestamo-nuevo"],body[data-vista="prestamo-editar"]{--ancho:620px}
@media (min-width:900px){.prest-res{grid-template-columns:repeat(var(--cols,2),minmax(0,1fr))}}
.prest-enlace{color:inherit;text-decoration:none;align-items:center;min-height:44px}
.prest-txt{display:block}
.prest-monto{display:flex;flex-direction:column;align-items:flex-end;flex:none;text-align:right}
.prest-monto small{font-size:.75rem}
.prest-barra{height:8px;border-radius:999px;background:var(--hundido);overflow:hidden}
.prest-barra i{display:block;height:100%;background:var(--acento);border-radius:999px}
.prest-concepto{font-weight:600;margin:0}
#form-prestamo{grid-template-columns:minmax(0,1fr)}
#form-prestamo .filas>div{min-width:0}
#form-prestamo .campo{width:100%;min-width:0}
.btn.sec.prest-eliminar{color:var(--terracota)}
@media (max-width:899px){.prest-res .tile:last-child:nth-child(odd){grid-column:1/-1}}
.enlace-btn{background:none;border:0;padding:0;min-height:44px;font:inherit;font-size:.875rem;color:var(--texto-2);text-decoration:underline;cursor:pointer;justify-self:center}

/* CÓMO VIENE EL MES */
#inf-panorama{margin-bottom:18px}
.pan-grid{display:grid;gap:14px;align-items:start}
@media (min-width:900px){.pan-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}}
.pan-card{display:grid;gap:10px;min-width:0}
.pan-card h3{font-size:1rem;margin:0}
.pan-num{font-size:1.625rem;line-height:1.2;overflow-wrap:anywhere}
.pan-sub{font-size:.875rem;margin:4px 0 0}
.pan-lista{margin:0;display:grid;gap:6px}
.pan-lista>div{display:flex;justify-content:space-between;gap:12px}
.pan-lista dt{color:var(--texto-2);font-size:.875rem;min-width:0;overflow-wrap:anywhere}
.pan-lista dd{margin:0;font-weight:600;flex:none}

/* REPORTAR UN PROBLEMA */
body[data-vista="reportar"]{--ancho:620px}
.rep-texto{margin:8px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
.rep-respuesta{margin:8px 0 0;padding:10px 12px;border-radius:10px;background:var(--hundido)}
.rep-cuenta{margin:4px 0 0;font-size:.8125rem;text-align:right}
.rep-datos{margin:4px 0 8px;padding-left:18px}
.version-app{text-align:center;font-size:.8125rem;margin:4px 0 0}
#rep-desc{font:inherit}

/* PANTALLA DE CARGA: la carita de Mboymi sobre el verde de la marca (igual en todos los temas, como el ícono).
   Solo se ve con la clase «cargando» en <html>; la ponen js/tema.js (al abrir) y Carga (js/ui.js, al entrar). */
.carga{display:none}
html.cargando .carga{display:flex;position:fixed;inset:0;z-index:1000;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  background:var(--logo-fondo);color:var(--marca-titulo);transition:opacity .18s ease-out}
html.carga-saliendo .carga{opacity:0}
.carga svg{display:block}
.carga-m{stroke:currentColor}
.carga-sonrisa{stroke:var(--logo-punto-claro)}
.carga-brillo,.carga-punto{fill:var(--logo-punto-claro);stroke:none}
.carga-palabra{fill:none;stroke:currentColor;stroke-width:8;stroke-linecap:round}

/* PLAN GRATIS Y PRO */
.plan-fila{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin-top:12px}
.plan-etq{display:inline-block;padding:4px 12px;border-radius:999px;font-size:.8125rem;font-weight:700;background:var(--hundido);color:var(--texto)}
.plan-etq.pro{background:var(--acento-suave);color:var(--texto)}
.pro-etq{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;font-size:.6875rem;font-weight:700;vertical-align:middle;background:var(--acento-suave);color:var(--texto)}
.pro-card{display:grid;gap:8px}
.pro-card p{margin:0}
.lista-pro{margin:8px 0;padding:0;list-style:none;display:grid;gap:6px}
.lista-pro details{border:1px solid var(--borde);border-radius:12px;background:var(--tarjeta)}
.lista-pro summary{min-height:44px;display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer;font-weight:600;list-style:none}
.lista-pro summary::-webkit-details-marker{display:none}
.lista-pro summary::after{content:"+";margin-left:auto;font-weight:700;color:var(--texto-2)}
.lista-pro details[open] summary::after{content:"−"}
.lista-pro summary:focus-visible{outline:2px solid var(--acento);outline-offset:2px;border-radius:12px}
.lista-pro details>p{margin:0 12px 8px}
.lista-pro .pro-ej-tit{font-size:.8125rem;font-weight:700;color:var(--texto-2)}
.pro-muestra{margin:0 12px 12px;padding:8px 12px;border-radius:8px;background:var(--hundido);display:grid;gap:6px}
.pro-muestra div{display:flex;justify-content:space-between;gap:12px;font-size:.875rem}
.pro-muestra dt{min-width:0}
.pro-muestra dd{margin:0;font-weight:700;text-align:right;min-width:0}
.lista-pro .pro-limites{padding:4px 12px}
.pro-etq.pronto{margin-left:4px;background:var(--hundido)}
.plan-gracias{margin:8px 0 0;font-size:.875rem}
/* Informes en el plan gratis: muestra con datos inventados, que no se puede tocar */
.inf-muestra-t{display:flex;align-items:center;gap:8px;margin:20px 0 10px;font-size:.875rem;color:var(--texto-2)}
.inf-muestra-t .pro-etq{margin-left:0}
.inf-muestra{opacity:.8;user-select:none;pointer-events:none}
.nav-pro{margin-left:auto}