/* ============================================================================
   Viautonoma Control — hoja única de la app.
   Mismas fuentes y misma familia cromática que la web, pero más callada: esto
   se abre a diario y con prisa, no se contempla.
   ========================================================================== */

:root{
  --bg:#06070a;
  --bg-elev:#0c0f16;
  --surface:rgba(255,255,255,.045);
  --surface-2:rgba(255,255,255,.075);
  --border:rgba(255,255,255,.10);
  --border-strong:rgba(255,255,255,.20);
  --ink:#eef2f8;
  --ink-2:#9aa5b8;
  --ink-3:#6b7488;

  /* Semánticos: separados del acento de marca a propósito. El dinero que es
     tuyo y el que no lo es deben distinguirse aunque cambie el degradado. */
  --tuyo:#34d399;
  --tuyo-tenue:rgba(52,211,153,.14);
  --hacienda:#fbbf24;
  --hacienda-tenue:rgba(251,191,36,.14);
  --alerta:#fb7185;
  --alerta-tenue:rgba(251,113,133,.14);

  --acento:#38bdf8;
  /* Auroras del fondo: la familia cromática de la web (azul marino, cian
     petróleo, verde bosque) en degradados radiales SIN filter:blur — el
     desenfoque de la web cuesta caro en móviles viejos y aquí el suavizado
     viene de fábrica en el propio degradado. */
  --aur1:rgba(30,58,138,.50);
  --aur2:rgba(14,116,144,.38);
  --aur3:rgba(15,112,80,.34);
  --radio:16px;
  --radio-s:11px;
  --sombra:0 10px 34px rgba(0,0,0,.44);
  --tap:44px;
}

:root[data-theme="light"]{
  --bg:#f6f8fb;
  --bg-elev:#ffffff;
  --surface:rgba(12,20,38,.04);
  --surface-2:rgba(12,20,38,.07);
  --border:rgba(12,20,38,.11);
  --border-strong:rgba(12,20,38,.22);
  --ink:#0d1421;
  --ink-2:#4d576b;
  --ink-3:#79839a;

  --tuyo:#047857;
  --tuyo-tenue:rgba(4,120,87,.11);
  --hacienda:#a16207;
  --hacienda-tenue:rgba(161,98,7,.11);
  --alerta:#be123c;
  --alerta-tenue:rgba(190,18,60,.10);
  --acento:#0369a1;
  /* En claro, tintes lacados muy suaves: el texto oscuro debe seguir a 4,5:1
     sobre cualquier punto del fondo. */
  --aur1:rgba(37,99,235,.10);
  --aur2:rgba(8,145,178,.09);
  --aur3:rgba(5,150,105,.08);
  --sombra:0 10px 30px rgba(12,20,38,.10);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:400 16px/1.5 'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
  /* La app ocupa la ventana y sólo desplaza su contenido: así no hay rebote
     de la página entera en Safari, que fue el fallo que dio la web en iPhone. */
  overscroll-behavior-y:none;
}

/* ===== Fondo: las auroras de la web, en versión estática =================
   position:fixed y sin animación: el compositor las pinta una vez y el scroll
   no las vuelve a tocar. Nada de background-attachment:fixed (repinta en cada
   scroll en móvil) ni de filter (memoria de GPU). */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(48% 38% at 10% -6%,  var(--aur1), transparent 72%),
    radial-gradient(42% 34% at 92% 4%,   var(--aur2), transparent 72%),
    radial-gradient(52% 40% at 46% 106%, var(--aur3), transparent 74%);
}


/* Números: siempre de ancho fijo. Si no, la cifra grande baila al teclear. */
.cifra,.tabular,input[inputmode="decimal"],td,.imp{ font-variant-numeric:tabular-nums; }

button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; }

:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; border-radius:6px; }

.oculto{ display:none !important; }
.solo-lectores{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ===== Estructura ========================================================= */

.app{
  min-height:100svh;
  display:grid;
  grid-template-rows:auto 1fr auto;
  max-width:600px;
  margin-inline:auto;
}

.cabecera{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:calc(env(safe-area-inset-top) + 14px) 18px 10px;
}
.cabecera h1{
  margin:0; font:700 15px/1.2 'Space Grotesk','Inter',sans-serif;
  letter-spacing:.02em;
  background:linear-gradient(120deg,#22d3ee,#60a5fa 45%,#34d399 85%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
:root[data-theme="light"] .cabecera h1{
  background:linear-gradient(120deg,#0891b2,#2563eb 50%,#059669);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.cabecera .periodo{ display:block; font:500 12px/1.3 'Inter',sans-serif; color:var(--ink-3); margin-top:3px; }
.cabecera-acciones{ display:flex; gap:6px; }
.icono-btn{
  width:var(--tap); height:var(--tap); display:grid; place-items:center;
  background:none; border:1px solid transparent; border-radius:50%;
  color:var(--ink-2); transition:color .18s, background .18s;
}
.icono-btn:hover{ color:var(--ink); background:var(--surface); }
.icono-btn svg{ width:20px; height:20px; }
/* Un icono cada vez. Estas reglas viven en theme.css para el resto de la web,
   pero la app no carga esa hoja: lleva la suya. */
.icono-btn .i-moon{ display:none; }
:root[data-theme="light"] .icono-btn .i-sun{ display:none; }
:root[data-theme="light"] .icono-btn .i-moon{ display:block; }

/* El hueco de abajo deja libre el botón flotante: sin él, la última fila de la
   tabla del trimestre queda debajo del botón y no se puede leer. */
.vistas{ padding:4px 18px 104px; }
.vista{ display:none; animation:entra .26s cubic-bezier(.22,1,.36,1); }
.vista.activa{ display:block; }
@keyframes entra{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }

/* ===== Barra inferior ===================================================== */

.barra{
  position:sticky; bottom:0; z-index:30;
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:2px; padding:6px 8px calc(env(safe-area-inset-bottom) + 6px);
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(14px);
  border-top:1px solid var(--border);
}
.barra button{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  min-height:var(--tap); padding:6px 2px;
  background:none; border:0; border-radius:10px;
  color:var(--ink-3); font:500 10.5px/1.2 'Inter',sans-serif;
  transition:color .18s;
}
.barra button svg{ width:21px; height:21px; }
.barra button[aria-current="page"]{ color:var(--ink); }
.barra button[aria-current="page"] svg{ color:var(--acento); }

/* ===== El número ========================================================== */

.panel{
  background:var(--bg-elev);
  border:1px solid var(--border);
  border-radius:var(--radio);
  padding:20px;
}
:root:not([data-theme="light"]) .panel{ background:var(--surface); }

.hucha{
  text-align:center; padding:26px 20px 22px;
  position:relative; overflow:hidden;
  box-shadow:0 18px 48px rgba(0,0,0,.30);
}
:root[data-theme="light"] .hucha{ box-shadow:0 14px 40px rgba(12,20,38,.10); }
/* Halo que respira desde arriba, del color del acento. Estático: es luz, no
   animación. */
.hucha::before{
  content:""; position:absolute; left:-20%; right:-20%; top:-45%; height:95%;
  background:radial-gradient(52% 60% at 50% 0%, rgba(56,189,248,.13), transparent 70%);
  pointer-events:none;
}
:root[data-theme="light"] .hucha::before{
  background:radial-gradient(52% 60% at 50% 0%, rgba(3,105,161,.07), transparent 70%);
}
.hucha .rotulo{
  font:600 11px/1 'Inter',sans-serif; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3);
}
.hucha .cifra{
  display:block; margin:12px 0 6px;
  /* Calibrado para que quepa un importe de seis cifras a 320 px de ancho sin
     partirse: por encima de esto, "1.050,00 €" se sale del panel. */
  font:700 clamp(30px,10vw,52px)/1.05 'Space Grotesk','Inter',sans-serif;
  letter-spacing:-.025em;
  white-space:nowrap;
  color:var(--tuyo);
  transition:color .3s;
}
.hucha[data-negativo="true"] .cifra{ color:var(--alerta); }
.hucha .pie{ font:400 14px/1.45 'Inter',sans-serif; color:var(--ink-2); margin:0; }
.hucha .pie b{ color:var(--ink); font-weight:600; }

/* Sin datos: ni cifra, ni barra, ni leyenda. Sólo la invitación a apuntar. */
.hucha[data-vacio="true"]{ padding:34px 22px 30px; }
.hucha[data-vacio="true"] .rotulo,
.hucha[data-vacio="true"] .cifra,
.hucha[data-vacio="true"] .reparto,
.hucha[data-vacio="true"] .leyenda{ display:none; }
.hucha[data-vacio="true"] .pie{ max-width:30ch; margin-inline:auto; font-size:15px; line-height:1.6; }
.hucha[data-vacio="true"]::before{
  content:""; display:block; width:46px; height:46px; margin:0 auto 16px;
  border-radius:50%; border:2px dashed var(--border-strong);
}

/* Barra de reparto: la parte que no es tuya, dibujada. */
.reparto{
  display:flex; height:9px; margin:20px 0 14px;
  border-radius:99px; overflow:hidden; background:var(--surface-2);
}
.reparto span{ display:block; transition:width .5s cubic-bezier(.22,1,.36,1); }
.reparto .p-tuyo{ background:var(--tuyo); }
.reparto .p-hacienda{ background:var(--hacienda); }
.leyenda{
  display:flex; justify-content:center; gap:18px;
  font:500 12px/1 'Inter',sans-serif; color:var(--ink-2);
}
.leyenda i{ display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:6px; }

/* Desglose de lo reservado */
/* text-align:left explícito: el panel centra, y una lista de importes centrada
   es ilegible porque las cifras dejan de alinearse entre sí. */
.desglose{ list-style:none; margin:18px 0 0; padding:0; display:grid; gap:1px;
  background:var(--border); border-radius:var(--radio-s); overflow:hidden;
  text-align:left; }
.desglose li{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:13px 15px; background:var(--bg-elev);
}
:root:not([data-theme="light"]) .desglose li{ background:#0c0f16; }
.desglose .et{ font:500 14px/1.3 'Inter',sans-serif; color:var(--ink-2); }
.desglose .et small{ display:block; font:400 11.5px/1.3 'Inter',sans-serif; color:var(--ink-3); margin-top:2px; }
.desglose .imp{ font:600 15px/1 'Space Grotesk','Inter',sans-serif; color:var(--ink); white-space:nowrap; }
.desglose li[data-cero="true"] .imp{ color:var(--ink-3); }

/* ===== Avisos ============================================================= */

.aviso{
  display:flex; gap:12px; align-items:flex-start;
  padding:14px 16px; margin-top:14px;
  border:1px solid var(--border); border-left-width:3px;
  border-radius:var(--radio-s);
  background:var(--surface);
  font:400 13.5px/1.5 'Inter',sans-serif; color:var(--ink-2);
}
.aviso b{ color:var(--ink); font-weight:600; }
.aviso svg{ width:18px; height:18px; flex:none; margin-top:1px; }
.aviso[data-tono="plazo"]{ border-left-color:var(--acento); }
.aviso[data-tono="plazo"] svg{ color:var(--acento); }
.aviso[data-tono="tramo"]{ border-left-color:var(--hacienda); background:var(--hacienda-tenue); }
.aviso[data-tono="tramo"] svg{ color:var(--hacienda); }
.aviso[data-tono="urgente"]{ border-left-color:var(--alerta); background:var(--alerta-tenue); }
.aviso[data-tono="urgente"] svg{ color:var(--alerta); }
.aviso a{ color:var(--acento); }

/* ===== Botones ============================================================ */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:var(--tap); padding:0 20px;
  border-radius:12px; border:1px solid var(--border-strong);
  background:var(--surface); color:var(--ink);
  font:600 15px/1 'Inter',sans-serif;
  transition:background .18s, border-color .18s, transform .12s;
}
.btn:hover{ background:var(--surface-2); }
.btn:active{ transform:scale(.985); }
.btn-primario{
  background:var(--ink); color:var(--bg); border-color:var(--ink);
}
.btn-primario:hover{ background:var(--ink); opacity:.9; }
.btn-ancho{ width:100%; }
.btn-peligro{ color:var(--alerta); border-color:color-mix(in srgb,var(--alerta) 40%,transparent); }

.fab{
  position:fixed; right:max(18px,calc(50% - 300px + 18px));
  bottom:calc(env(safe-area-inset-bottom) + 78px);
  z-index:35;
  width:58px; height:58px; border-radius:50%;
  display:grid; place-items:center;
  border:0; background:var(--acento); color:#04121c;
  box-shadow:0 8px 26px rgba(56,189,248,.34);
  transition:transform .16s cubic-bezier(.22,1,.36,1);
}
.fab:hover{ transform:scale(1.06); }
.fab:active{ transform:scale(.95); }
.fab svg{ width:26px; height:26px; }
/* En oscuro el acento es claro y pide un icono oscuro; en claro es azul
   profundo y ese mismo icono se hunde. Blanco sube el contraste a 6,2:1. */
:root[data-theme="light"] .fab{ color:#fff; box-shadow:0 8px 26px rgba(3,105,161,.30); }

/* ===== Formularios ======================================================== */

.campo{ display:block; margin-bottom:14px; }
.campo > span{
  display:block; margin-bottom:6px;
  font:600 12px/1.2 'Inter',sans-serif; color:var(--ink-2); letter-spacing:.01em;
}
.campo > span em{ font-style:normal; font-weight:400; color:var(--ink-3); }
input[type="text"],input[type="date"],input[type="number"],input[inputmode="decimal"],select,textarea{
  width:100%; min-height:var(--tap); padding:11px 13px;
  background:var(--surface); color:var(--ink);
  border:1px solid var(--border); border-radius:var(--radio-s);
  /* 16px evita que Safari en iPhone haga zoom al enfocar el campo. */
  font-size:16px;
}
input:focus,select:focus,textarea:focus{ border-color:var(--acento); outline:none; }
select{ appearance:none; background-image:none; }

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

/* Selector de ingreso / gasto */
.segmentado{ display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:18px;
  padding:5px; background:var(--surface); border-radius:13px; border:1px solid var(--border); }
.segmentado button{
  min-height:var(--tap); border:0; border-radius:9px; background:none;
  color:var(--ink-3); font:600 14px/1 'Inter',sans-serif; transition:.18s;
}
.segmentado button[aria-pressed="true"]{ background:var(--bg-elev); color:var(--ink); box-shadow:var(--sombra); }
:root:not([data-theme="light"]) .segmentado button[aria-pressed="true"]{ background:#1a2030; }

/* El importe, protagonista del formulario */
.importe-grande{
  display:flex; align-items:baseline; gap:8px;
  padding:14px 16px; margin-bottom:16px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radio-s);
}
.importe-grande input{
  flex:1; min-width:0; padding:0; border:0; background:none; min-height:auto;
  font:700 34px/1.1 'Space Grotesk','Inter',sans-serif; letter-spacing:-.02em;
}
.importe-grande input:focus{ border:0; }
.importe-grande .moneda{ font:600 24px/1 'Space Grotesk',sans-serif; color:var(--ink-3); }

.resumen-form{
  display:flex; justify-content:space-between; gap:12px;
  padding:12px 15px; margin-bottom:16px;
  border:1px dashed var(--border-strong); border-radius:var(--radio-s);
  font:500 13px/1.4 'Inter',sans-serif; color:var(--ink-2);
}
.resumen-form b{ color:var(--ink); font:600 15px/1 'Space Grotesk',sans-serif; }

/* ===== Hoja inferior ====================================================== */

.hoja{
  position:fixed; inset:0; z-index:60;
  display:grid; align-items:end;
  background:rgba(4,6,10,.62);
  opacity:0; pointer-events:none; transition:opacity .24s;
}
.hoja[data-abierta="true"]{ opacity:1; pointer-events:auto; }
.hoja-cuerpo{
  background:var(--bg-elev);
  border-radius:22px 22px 0 0;
  border-top:1px solid var(--border);
  padding:8px 20px calc(env(safe-area-inset-bottom) + 20px);
  max-height:92svh; overflow-y:auto;
  max-width:600px; width:100%; margin-inline:auto;
  transform:translateY(100%);
  transition:transform .34s cubic-bezier(.22,1,.36,1);
}
.hoja[data-abierta="true"] .hoja-cuerpo{ transform:none; }
.asa{ width:38px; height:4px; border-radius:99px; background:var(--border-strong); margin:6px auto 14px; }
.hoja h2{ margin:0 0 16px; font:700 19px/1.25 'Space Grotesk','Inter',sans-serif; }

/* ===== Listas ============================================================= */

.grupo-fecha{
  margin:22px 0 8px; font:600 11.5px/1 'Inter',sans-serif;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3);
}
.movs{ list-style:none; margin:0; padding:0; display:grid; gap:1px;
  background:var(--border); border-radius:var(--radio-s); overflow:hidden; }
.movs li{ background:var(--bg-elev); }
:root:not([data-theme="light"]) .movs li{ background:#0c0f16; }
.mov{
  display:flex; align-items:center; gap:12px; width:100%;
  padding:13px 15px; background:none; border:0; text-align:left;
}
.mov:hover{ background:var(--surface); }
.mov .marca{ width:6px; height:34px; border-radius:99px; flex:none; }
.mov[data-tipo="ingreso"] .marca{ background:var(--tuyo); }
.mov[data-tipo="gasto"] .marca{ background:var(--ink-3); }
.mov .txt{ flex:1; min-width:0; }
.mov .concepto{
  display:block; font:500 14.5px/1.3 'Inter',sans-serif; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mov .meta{ display:block; font:400 12px/1.3 'Inter',sans-serif; color:var(--ink-3); margin-top:2px; }
.mov .imp{ font:600 15px/1 'Space Grotesk','Inter',sans-serif; white-space:nowrap; }
.mov[data-tipo="ingreso"] .imp{ color:var(--tuyo); }

/* ===== Trimestre (modelos) ================================================ */

.modelo{ margin-bottom:16px; }
.modelo-cab{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin-bottom:12px;
}
.modelo-cab h3{ margin:0; font:700 17px/1.2 'Space Grotesk','Inter',sans-serif; }
.modelo-cab .norma{ font:400 11.5px/1 'Inter',sans-serif; color:var(--ink-3); }
.lineas{ width:100%; border-collapse:collapse; font-size:14px; }
.lineas td{ padding:9px 0; border-bottom:1px solid var(--border); color:var(--ink-2); }
.lineas td:last-child{ text-align:right; color:var(--ink); font-weight:500; white-space:nowrap; }
.lineas tr:last-child td{ border-bottom:0; }
.lineas tr.total td{
  padding-top:14px; font:700 17px/1 'Space Grotesk','Inter',sans-serif; color:var(--ink);
  border-top:1px solid var(--border-strong); border-bottom:0;
}
.lineas tr.total td:first-child{ font:600 13px/1.3 'Inter',sans-serif; color:var(--ink-2); }
.lineas .casilla{ color:var(--ink-3); font-size:11.5px; }

.vacio{ text-align:center; padding:44px 20px; color:var(--ink-3); }
.vacio p{ margin:0 0 6px; font-size:14.5px; line-height:1.55; }
.vacio strong{ display:block; color:var(--ink); font:600 16px/1.3 'Inter',sans-serif; margin-bottom:8px; }

/* ===== Candado de la versión de pago ====================================== */

.candado{
  position:relative; overflow:hidden;
  border:1px solid var(--border); border-radius:var(--radio);
  padding:26px 22px; text-align:center; background:var(--surface);
}
.candado h3{ margin:0 0 8px; font:700 18px/1.25 'Space Grotesk','Inter',sans-serif; }
.candado p{ margin:0 auto 18px; max-width:34ch; font-size:14px; line-height:1.6; color:var(--ink-2); }
.candado .precio{ font:700 15px/1 'Space Grotesk',sans-serif; color:var(--ink); }

/* ===== Brindis (mensajes) ================================================= */

.brindis{
  position:fixed; left:50%; bottom:calc(env(safe-area-inset-bottom) + 82px);
  transform:translate(-50%,14px); z-index:70;
  display:flex; align-items:center; gap:14px;
  padding:12px 16px; border-radius:12px;
  background:var(--bg-elev); border:1px solid var(--border-strong);
  box-shadow:var(--sombra);
  font:500 13.5px/1.3 'Inter',sans-serif; color:var(--ink);
  opacity:0; pointer-events:none; transition:opacity .22s, transform .22s;
  max-width:min(92vw,420px);
}
:root:not([data-theme="light"]) .brindis{ background:#161c28; }
.brindis[data-visible="true"]{ opacity:1; transform:translate(-50%,0); pointer-events:auto; }
.brindis button{ background:none; border:0; color:var(--acento); font-weight:600; white-space:nowrap; }

/* ===== Ajustes ============================================================ */

.seccion{ margin:26px 0 10px; font:700 13px/1 'Inter',sans-serif;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
.nota{ font:400 12.5px/1.55 'Inter',sans-serif; color:var(--ink-3); margin:8px 0 0; }
.nota a{ color:var(--acento); }
.conmutador{ display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:13px 0; border-bottom:1px solid var(--border); }
.conmutador span{ font-size:14.5px; }
.conmutador small{ display:block; color:var(--ink-3); font-size:12.5px; line-height:1.5; margin-top:3px; }
.conmutador input{ width:auto; min-height:auto; accent-color:var(--acento);
  width:22px; height:22px; flex:none; }

.pie-legal{
  margin:32px 0 8px; padding-top:18px; border-top:1px solid var(--border);
  font:400 11.5px/1.65 'Inter',sans-serif; color:var(--ink-3);
}
.pie-legal a{ color:var(--ink-3); }

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

/* ===== Promo de las guías (final de Trimestre) ===========================
   Va después de los números, nunca antes: primero la app cumple, luego
   ofrece. Sobria a propósito — dentro de una herramienta, un banner chillón
   cobra peaje de confianza. */
.promo-guias{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  margin-top:16px; padding:18px 20px;
  border:1px solid var(--border); border-left:3px solid var(--acento);
  border-radius:var(--radio-s); background:var(--surface);
}
.promo-guias .txt{ flex:1; min-width:220px; }
.promo-guias strong{ display:block; font-size:15px; color:var(--ink); margin-bottom:4px; }
.promo-guias p{ margin:0; font-size:13px; line-height:1.5; color:var(--ink-2); }
.promo-guias .btn{ white-space:nowrap; }

/* Bloque plegable dentro del formulario de apuntar.
   El <details> nativo trae un triangulito del sistema que no se parece a nada
   más de la app, así que se quita con ::-webkit-details-marker y list-style y se
   dibuja un chevron propio que gira al abrir. */
.plegable {
  border:1px solid var(--border);
  border-radius:var(--radio-s);
  padding:0 12px;
  margin-bottom:14px;
  background:var(--surface);
}
.plegable > summary {
  cursor:pointer;
  list-style:none;
  padding:12px 0;
  font:600 12px/1.2 'Inter',sans-serif;
  color:var(--ink-2);
  letter-spacing:.01em;
  display:flex;
  align-items:center;
  gap:8px;
  min-height:var(--tap);
}
.plegable > summary::-webkit-details-marker { display:none; }
.plegable > summary em { font-style:normal; font-weight:400; color:var(--ink-3); }
/* El chevron: un cuadrado girado 45° al que solo se le pintan dos lados. */
.plegable > summary::after {
  content:"";
  width:7px; height:7px;
  margin-left:auto;
  border-right:2px solid var(--ink-3);
  border-bottom:2px solid var(--ink-3);
  transform:rotate(45deg);
  transition:transform .18s ease;
}
.plegable[open] > summary::after { transform:rotate(-135deg); }
.plegable[open] { padding-bottom:4px; }
/* La nota explica el bloque; sin este aire queda pegada a la primera etiqueta. */
.plegable > .nota { margin:0 0 14px; }
.plegable > summary:focus-visible { outline:2px solid var(--acento); outline-offset:2px; border-radius:4px; }
@media (prefers-reduced-motion:reduce) {
  .plegable > summary::after { transition:none; }
}

/* La cifra de la previsión anual. Deliberadamente MÁS SOBRIA que la hucha de
   la portada: aquella es un dato cierto de este trimestre, esta es una
   estimación de junio. Si las dos gritaran igual, la estimación pesaría en la
   cabeza del usuario lo mismo que un hecho, y no lo es. */
.prevision-cifra{
  text-align:center;
  padding:18px 16px 16px;
  border:1px solid var(--border);
  border-radius:var(--radio-s);
  background:var(--bg-elev);
}
:root:not([data-theme="light"]) .prevision-cifra{ background:var(--surface); }
.prevision-cifra .rotulo{
  display:block;
  font:600 11.5px/1 'Inter',sans-serif; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-3);
}
.prevision-cifra .cifra{
  display:block; margin:8px 0 6px;
  font:700 30px/1.05 'Inter',sans-serif; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  color:var(--ink);
}
.prevision-cifra .pie{
  display:block; font:400 12.5px/1.45 'Inter',sans-serif; color:var(--ink-3);
}
/* A devolver es una buena noticia; a pagar no es una alarma, es un aviso. */
.prevision-cifra[data-tono="bien"] .cifra{ color:var(--tuyo); }
.prevision-cifra[data-tono="ojo"] .cifra{ color:var(--hacienda); }