/* =====================================================================
   MassiMoney v2 · hoja de estilos única (sin build, sin librerías)

   DISEÑO D1 (docs/v2/d1/: tokens.css y HANDOFF-CODE-D1.md). D1 manda sobre
   docs/v2/diseno/SISTEMA.md en color, tipografía, chip, barra y botón del
   agente; el resto de SISTEMA sigue vigente. Los colores de los tres
   bloques "tokens:*" son los de D1 con los nombres del equipo (así las
   pantallas no cambian de clases); los pocos sin equivalente en D1
   (campo-borde, pista, elegido, neutro) quedan como estaban. Los nombres
   de D1 (--bg, --ink, --accent...) están como alias más abajo.

   Los tres bloques los lee tests/Feature/V2DisenoContrasteTest.php: si
   cambiás un color, el test vuelve a medir su contraste. Dentro de esos
   bloques no va ninguna llave ni ningún comentario.

   Los cortes del chasis (768 y 1200 px) son CONTAINER QUERIES sobre
   .v2-marco, no media queries: así "ver la app del celular desde la
   compu" (html.ver-celu) achica el marco y todo se acomoda solo.
   Las hojas (<dialog>) viven fuera del marco y usan media queries.
   ===================================================================== */

/* tokens:claro */
:root{
  color-scheme:light;
  /* El botón principal: UN color de acción en toda la app (panel de diseño, 03/10: Saarinen y Dill; Emi dijo que sí). */
  --boton-relleno:#1C1C1F;
  --boton-texto:#FFFFFF;
  --fondo:#F3F2EF;
  --superficie:#FFFFFF;
  --superficie-2:#F7F6F3;
  --tinta:#16161A;
  --tinta-2:#4F4E55;
  --tinta-3:#66656C;
  --separador:#E4E2DD;
  --accion:#1D5BC9;
  --campo-borde:#7C7C80;
  --pista:#E5E5EA;
  --elegido:#E0ECFA;
  --ingreso:#0B6E62;
  --deuda:#B42318;
  --sobre-deuda:#FFFFFF;
  --deuda-fondo:#FDECEA;
  --revisar-texto:#8A4B00;
  --revisar-fondo:#FFF3DF;
  --usd-tinta:#23406E;
  --usd-fondo:#E7EEF9;
  --progreso-bien:#0B6E62;
  --progreso-atencion:#8A4B00;
  --globito-fondo:#B42318;
  --globito-texto:#FFFFFF;
  --barra-rotulo:#4F4E55;
  --barra-material:rgba(255,255,255,.94);
  --barra-solida:#FFFFFF;
  --velo:rgba(20,20,26,.38);
  --sombra-1:0 1px 2px rgba(22,22,26,.06),0 0 0 1px rgba(22,22,26,.05);
  --sombra-hoja:0 -10px 40px rgba(22,22,26,.18);
  --familiar-relleno:#17774A;
  --familiar-texto:#FFFFFF;
  --familiar-lavado:#E3F2EA;
  --familiar-marca-fondo:#E3F2EA;
  --familiar-marca-texto:#17774A;
  --emi-relleno:#1D5BC9;
  --emi-texto:#FFFFFF;
  --emi-lavado:#E6EEFB;
  --emi-marca-fondo:#E6EEFB;
  --emi-marca-texto:#1D5BC9;
  --jessi-relleno:#94308F;
  --jessi-texto:#FFFFFF;
  --jessi-lavado:#F6E7F5;
  --jessi-marca-fondo:#F6E7F5;
  --jessi-marca-texto:#94308F;
  --negocio-relleno:#4B3FBF;
  --negocio-texto:#FFFFFF;
  --negocio-lavado:#ECEAFB;
  --negocio-marca-fondo:#ECEAFB;
  --negocio-marca-texto:#4B3FBF;
  --personal-relleno:#5E5D64;
  --personal-texto:#FFFFFF;
  --personal-lavado:#ECEBE8;
  --personal-marca-fondo:#ECEBE8;
  --personal-marca-texto:#5E5D64;
  --neutro-relleno:#5E5D64;
  --neutro-texto:#FFFFFF;
  --guia:#C9C7C0;
  --hover:rgba(22,22,26,.05);
  --g-1:#2a78d6;
  --g-2:#eb6834;
  --g-3:#1baf7a;
  --g-4:#eda100;
  --g-5:#e87ba4;
  --g-6:#008300;
  --g-rejilla:#E4E2DD;
  --g-eje:#C3C2B7;
  --g-sin:#8d8c92;
  --seq-a:#256abf;
  --seq-b:#86b6ef;
}

/* tokens:oscuro */
:root[data-theme="dark"]{
  --boton-relleno:#F2F2F4;
  --boton-texto:#16161A;
  color-scheme:dark;
  --fondo:#0B0B0D;
  --superficie:#1A1A1E;
  --superficie-2:#24242A;
  --tinta:#F2F2F4;
  --tinta-2:#B9B9C0;
  --tinta-3:#9A9AA3;
  --separador:#2F2F36;
  --accion:#76A7FF;
  --campo-borde:#8E8E93;
  --pista:#3A3A3C;
  --elegido:#26374B;
  --ingreso:#52D6BD;
  --deuda:#FF7A6E;
  --sobre-deuda:#2A0B08;
  --deuda-fondo:#3A1714;
  --revisar-texto:#F4B860;
  --revisar-fondo:#33240C;
  --usd-tinta:#AFC8F2;
  --usd-fondo:#1C2940;
  --progreso-bien:#52D6BD;
  --progreso-atencion:#F4B860;
  --globito-fondo:#FF7A6E;
  --globito-texto:#2A0B08;
  --barra-rotulo:#B9B9C0;
  --barra-material:rgba(26,26,30,.94);
  --barra-solida:#1A1A1E;
  --velo:rgba(0,0,0,.6);
  --sombra-1:0 0 0 1px rgba(255,255,255,.05);
  --sombra-hoja:0 -10px 40px rgba(0,0,0,.55);
  --familiar-relleno:#3FC98A;
  --familiar-texto:#07140E;
  --familiar-lavado:#12291D;
  --familiar-marca-fondo:#12291D;
  --familiar-marca-texto:#3FC98A;
  --emi-relleno:#76A7FF;
  --emi-texto:#07101F;
  --emi-lavado:#14213A;
  --emi-marca-fondo:#14213A;
  --emi-marca-texto:#76A7FF;
  --jessi-relleno:#E291DD;
  --jessi-texto:#1E0A1D;
  --jessi-lavado:#2E1630;
  --jessi-marca-fondo:#2E1630;
  --jessi-marca-texto:#E291DD;
  --negocio-relleno:#A99BFF;
  --negocio-texto:#120D2A;
  --negocio-lavado:#1E1A38;
  --negocio-marca-fondo:#1E1A38;
  --negocio-marca-texto:#A99BFF;
  --personal-relleno:#A3A3AB;
  --personal-texto:#0B0B0D;
  --personal-lavado:#26262B;
  --personal-marca-fondo:#26262B;
  --personal-marca-texto:#A3A3AB;
  --neutro-relleno:#A3A3AB;
  --neutro-texto:#0B0B0D;
  --guia:#43434C;
  --hover:rgba(255,255,255,.06);
  --g-1:#3987e5;
  --g-2:#d95926;
  --g-3:#199e70;
  --g-4:#c98500;
  --g-5:#d55181;
  --g-6:#008300;
  --g-rejilla:#2c2c2a;
  --g-eje:#383835;
  --g-sin:#7d7d85;
  --seq-a:#5598e7;
  --seq-b:#1c5cab;
}

/* tokens:oscuro-sistema */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
  color-scheme:dark;
  --boton-relleno:#F2F2F4;
  --boton-texto:#16161A;
  --fondo:#0B0B0D;
  --superficie:#1A1A1E;
  --superficie-2:#24242A;
  --tinta:#F2F2F4;
  --tinta-2:#B9B9C0;
  --tinta-3:#9A9AA3;
  --separador:#2F2F36;
  --accion:#76A7FF;
  --campo-borde:#8E8E93;
  --pista:#3A3A3C;
  --elegido:#26374B;
  --ingreso:#52D6BD;
  --deuda:#FF7A6E;
  --sobre-deuda:#2A0B08;
  --deuda-fondo:#3A1714;
  --revisar-texto:#F4B860;
  --revisar-fondo:#33240C;
  --usd-tinta:#AFC8F2;
  --usd-fondo:#1C2940;
  --progreso-bien:#52D6BD;
  --progreso-atencion:#F4B860;
  --globito-fondo:#FF7A6E;
  --globito-texto:#2A0B08;
  --barra-rotulo:#B9B9C0;
  --barra-material:rgba(26,26,30,.94);
  --barra-solida:#1A1A1E;
  --velo:rgba(0,0,0,.6);
  --sombra-1:0 0 0 1px rgba(255,255,255,.05);
  --sombra-hoja:0 -10px 40px rgba(0,0,0,.55);
  --familiar-relleno:#3FC98A;
  --familiar-texto:#07140E;
  --familiar-lavado:#12291D;
  --familiar-marca-fondo:#12291D;
  --familiar-marca-texto:#3FC98A;
  --emi-relleno:#76A7FF;
  --emi-texto:#07101F;
  --emi-lavado:#14213A;
  --emi-marca-fondo:#14213A;
  --emi-marca-texto:#76A7FF;
  --jessi-relleno:#E291DD;
  --jessi-texto:#1E0A1D;
  --jessi-lavado:#2E1630;
  --jessi-marca-fondo:#2E1630;
  --jessi-marca-texto:#E291DD;
  --negocio-relleno:#A99BFF;
  --negocio-texto:#120D2A;
  --negocio-lavado:#1E1A38;
  --negocio-marca-fondo:#1E1A38;
  --negocio-marca-texto:#A99BFF;
  --personal-relleno:#A3A3AB;
  --personal-texto:#0B0B0D;
  --personal-lavado:#26262B;
  --personal-marca-fondo:#26262B;
  --personal-marca-texto:#A3A3AB;
  --neutro-relleno:#A3A3AB;
  --neutro-texto:#0B0B0D;
  --guia:#43434C;
  --hover:rgba(255,255,255,.06);
  --g-1:#3987e5;
  --g-2:#d95926;
  --g-3:#199e70;
  --g-4:#c98500;
  --g-5:#d55181;
  --g-6:#008300;
  --g-rejilla:#2c2c2a;
  --g-eje:#383835;
  --g-sin:#7d7d85;
  --seq-a:#5598e7;
  --seq-b:#1c5cab;
  }
}

/* --- Lo que no cambia con el tema (D1: tokens.css) ------------------ */
:root{
  --letra:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",system-ui,sans-serif;
  --letra-numeros:var(--letra);
  --margen:16px;
  --r-campo:12px;
  --r-tarjeta:16px;
  --r-hoja:22px;
  --sombra-flota:var(--sombra-hoja);
  --sombra-boton:0 6px 16px rgba(0,0,0,.22);
  --t-toque:120ms;
  --t-fundido:200ms;
  --t-empuje:320ms;
  --t-hoja:320ms;
  --t-espacio:280ms;
  --curva-ios:cubic-bezier(.32,.72,0,1);
  --curva-sale:cubic-bezier(.2,.8,.2,1);
  --curva-entra:cubic-bezier(.4,0,1,1);
  --tabbar-h:66px;

  /* Los nombres de D1, como alias: lo nuevo se escribe con éstos. */
  --font:var(--letra);
  --fs-hero:44px; --lh-hero:52px;
  --fs-title:30px; --lh-title:36px;
  --fs-h2:17px; --lh-h2:22px;
  --fs-body:16px; --lh-body:21px;
  --fs-sm:15px; --lh-sm:20px;
  --fs-meta:13px; --lh-meta:18px;
  --fs-min:12px;
  --tap:44px;
  --r-xs:7px; --r-sm:10px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-pill:999px;
  --bg:var(--fondo); --surface:var(--superficie); --surface-2:var(--superficie-2); --line:var(--separador);
  --ink:var(--tinta); --ink-2:var(--tinta-2); --ink-3:var(--tinta-3);
  --in:var(--ingreso); --alert:var(--deuda); --on-alert:var(--sobre-deuda); --alert-bg:var(--deuda-fondo);
  --warn:var(--revisar-texto); --warn-bg:var(--revisar-fondo);
  --usd-ink:var(--usd-tinta); --usd-bg:var(--usd-fondo);
  --focus:var(--accion); --scrim:var(--velo); --shadow-1:var(--sombra-1); --shadow-sheet:var(--sombra-hoja);
}

/* --- El color del espacio ---------------------------------------------
   D1 pinta por PERSONA (data-space="familiar|emi|jessi|negocio" en <html>,
   puesto por el servidor según el espacio de los datos) y el equipo por
   TIPO (data-espacio="familiar|personal|negocio"). Primero el neutro;
   después cada tipo; al final cada clave de D1, que gana porque viene
   después con la misma especificidad. --accent de D1 = --esp-relleno. */
:root,
[data-espacio="varios"],[data-espacio="ninguno"],[data-espacio="ejemplo"]{
  --esp-relleno:var(--neutro-relleno);
  --esp-texto:var(--neutro-texto);
  --esp-lavado:var(--superficie-2);
  --esp-marca-fondo:var(--superficie-2);
  --esp-marca-texto:var(--tinta);
}
[data-espacio="familiar"]{
  --esp-relleno:var(--familiar-relleno);
  --esp-texto:var(--familiar-texto);
  --esp-lavado:var(--familiar-lavado);
  --esp-marca-fondo:var(--familiar-marca-fondo);
  --esp-marca-texto:var(--familiar-marca-texto);
}
[data-espacio="personal"]{
  --esp-relleno:var(--personal-relleno);
  --esp-texto:var(--personal-texto);
  --esp-lavado:var(--personal-lavado);
  --esp-marca-fondo:var(--personal-marca-fondo);
  --esp-marca-texto:var(--personal-marca-texto);
}
[data-espacio="negocio"]{
  --esp-relleno:var(--negocio-relleno);
  --esp-texto:var(--negocio-texto);
  --esp-lavado:var(--negocio-lavado);
  --esp-marca-fondo:var(--negocio-marca-fondo);
  --esp-marca-texto:var(--negocio-marca-texto);
}
[data-space="emi"]{
  --esp-relleno:var(--emi-relleno);
  --esp-texto:var(--emi-texto);
  --esp-lavado:var(--emi-lavado);
  --esp-marca-fondo:var(--emi-marca-fondo);
  --esp-marca-texto:var(--emi-marca-texto);
}
[data-space="jessi"]{
  --esp-relleno:var(--jessi-relleno);
  --esp-texto:var(--jessi-texto);
  --esp-lavado:var(--jessi-lavado);
  --esp-marca-fondo:var(--jessi-marca-fondo);
  --esp-marca-texto:var(--jessi-marca-texto);
}
/* Dentro de un bloque de un tipo, una marca neutra vuelve a ser neutra. */
[data-espacio] [data-espacio="varios"],[data-espacio] [data-espacio="ninguno"],[data-espacio] [data-espacio="ejemplo"]{
  --esp-relleno:var(--neutro-relleno);
  --esp-texto:var(--neutro-texto);
  --esp-lavado:var(--superficie-2);
  --esp-marca-fondo:var(--superficie-2);
  --esp-marca-texto:var(--tinta);
}
:root,[data-espacio],[data-space]{--accent:var(--esp-relleno);--on-accent:var(--esp-texto);--accent-soft:var(--esp-lavado)}

/* =====================================================================
   BASE
   ===================================================================== */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{height:100%;background:var(--fondo);-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* position:fixed + un solo contenedor que scrollea: es el arreglo de iOS
   standalone que ya probó el layout del celular (ESTADO §21, §25). */
body{position:fixed;inset:0;overflow:hidden;overscroll-behavior:none;background:var(--fondo);
  color:var(--tinta);font-family:var(--letra);font-size:16px;line-height:21px;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
a{color:var(--accion)}
/* WCAG 2.4.7 + [C1]: el anillo siempre separado 2 px, nunca pegado a un relleno. */
:focus-visible{outline:2px solid var(--accion);outline-offset:2px}
/* Los enlaces dentro de un texto van subrayados (1.4.1). */
.v2-texto a,p a{text-decoration:underline;text-underline-offset:2px}
.v2-oculto{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.v2-sprite{position:absolute;width:0;height:0;overflow:hidden}
.v2-icono{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.v2-icono.chico{width:16px;height:16px}

/* Saltar al contenido (2.4.1): aparece sólo con el foco. */
.v2-saltar{position:fixed;left:12px;top:calc(env(safe-area-inset-top) + 8px);z-index:100;transform:translateY(-300%);
  background:var(--superficie);color:var(--accion);padding:10px 16px;border-radius:12px;box-shadow:var(--sombra-flota);
  font-weight:600;text-decoration:none}
.v2-saltar:focus{transform:none}

/* Toque: sin retardo, sin selección accidental, con respuesta visible. */
button,a,.espchip,.v2-seccion{touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
button:active,a:active,.espchip:active{opacity:.55;transition:opacity var(--t-toque)}

/* =====================================================================
   CHASIS · celular por defecto (SISTEMA §4.2)
   ===================================================================== */
.v2-marco{position:relative;height:100%;container:marco / inline-size}
html.ver-celu{background:var(--separador)}
html.ver-celu body{background:var(--separador)}
html.ver-celu .v2-marco{max-width:430px;margin:0 auto;box-shadow:0 0 60px rgba(0,0,0,.18)}

.v2-app{height:100%;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);
  grid-template-areas:"cabecera" "contenido";background:var(--fondo);font-size:16px;line-height:22px;
  --margen:clamp(16px,2.6cqw,56px)}

/* Cabecera del celular (D1): fondo liso, raya arriba con el color del
   espacio, el chip a la izquierda y la inicial a la derecha. */
.v2-cabecera{grid-area:cabecera;display:flex;align-items:center;background:var(--fondo);
  padding-top:env(safe-area-inset-top);position:relative;z-index:10;view-transition-name:vt-cabecera}
.v2-cabecera::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--esp-relleno)}
.v2-chip-zona{flex:1;min-width:0;display:flex;align-items:center;min-height:64px;padding:8px 4px 0 var(--margen)}
.v2-arriba{flex:none;display:flex;align-items:center;gap:2px;padding:8px 8px 0 0}

/* El chip (D1): pastilla de 44 px rellena con el color del espacio,
   sólo el nombre y la flecha. Sin ícono ni emoji. */
.espchip{display:inline-flex;align-items:center;gap:6px;max-width:100%;min-height:44px;padding:0 14px 0 18px;border:0;
  background:var(--esp-relleno);border-radius:var(--r-pill);color:var(--esp-texto);
  font:600 17px/22px var(--letra);white-space:nowrap;text-align:left;view-transition-name:vt-chip}
.v2-chip-nombre{min-width:0;overflow:hidden;text-overflow:ellipsis}
.espchip:focus-visible{outline-offset:2px}
.espchip .chev{flex:none;width:16px;height:16px;stroke-width:2.4}

/* Botones de la cabecera. La inicial de D1: círculo claro con borde. */
.v2-boton-icono{position:relative;width:44px;height:44px;border-radius:50%;color:var(--tinta);display:inline-flex;
  align-items:center;justify-content:center;text-decoration:none}
.v2-inicial{width:36px;height:36px;border-radius:50%;background:var(--superficie);color:var(--tinta);display:inline-flex;
  align-items:center;justify-content:center;font:600 15px/1 var(--letra);box-shadow:0 0 0 1px var(--separador)}
.v2-inicial.chica{width:28px;height:28px;font-size:13px;background:var(--superficie-2);box-shadow:none}
.v2-inicial .v2-icono{width:20px;height:20px}
.v2-globito{position:absolute;top:2px;right:0;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:var(--globito-fondo);color:var(--globito-texto);font:700 12px/18px var(--letra-numeros);text-align:center}

/* Contenido: el único que scrollea. La barra se le superpone abajo. */
.v2-contenido{grid-area:contenido;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;padding:4px var(--margen) calc(var(--tabbar-h) + 124px);
  scroll-padding-bottom:calc(var(--tabbar-h, 88px) + var(--lote-h, 0px) + 12px);outline:none;
  view-transition-name:vt-contenido}
html.teclado .v2-contenido{padding-bottom:12px;scroll-padding-bottom:12px}

/* Barra inferior (D1): 4 secciones con ícono de línea y rótulo de 12 px;
   "Cuentas y Cajas" entero, en dos renglones. La activa, con el color del
   espacio y el trazo más grueso (cambia la forma, no sólo el color). */
.v2-barra{grid-area:contenido;align-self:end;position:relative;z-index:20;background:var(--barra-solida);
  border-top:1px solid var(--separador);padding:6px 0 max(env(safe-area-inset-bottom), 8px);view-transition-name:vt-barra}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .v2-barra{background:var(--barra-material);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%)}
}
html.teclado .v2-barra{display:none}
.v2-secciones{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.v2-seccion{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:3px;min-height:54px;
  padding:2px 2px 0;color:var(--barra-rotulo);text-decoration:none;font:500 12px/14px var(--letra);text-align:center}
.v2-seccion .lleno{display:none}
.v2-seccion[aria-current="page"]{color:var(--esp-relleno)}
.v2-seccion[aria-current="page"] .linea{display:none}
.v2-seccion[aria-current="page"] .lleno{display:block}
.v2-rotulo{max-width:9ch;overflow-wrap:normal}
.v2-lateral-mes,.v2-lateral-pie{display:none}

/* (El botón flotante "Agente" de D1 se fue el 08/10: el Asistente es el
   lugar del medio de la barra, ver el bloque MENÚS al final de este archivo.) */

/* =====================================================================
   CHASIS · computadora (D1): barra lateral de arriba a abajo con el chip
   ancho, la línea del mes, las 4 secciones y, al pie, Agente, Tema y
   "perfil y más". Sin barra de arriba: el contenido empieza en el título.
   ===================================================================== */
@container marco (min-width: 768px){
  .v2-app{grid-template-columns:248px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);
    grid-template-areas:"cabecera contenido" "barra contenido"}
  .v2-cabecera{padding-top:0;background:var(--superficie);border-right:1px solid var(--separador)}
  .v2-chip-zona{min-height:0;padding:20px 16px 0}
  .v2-chip-zona .espchip{width:100%;justify-content:space-between;padding:0 14px 0 16px;font-weight:500}
  .v2-arriba{display:none}
  .v2-contenido{grid-row:1 / -1;padding:24px var(--margen) 48px;scroll-padding-bottom:calc(var(--lote-h, 0px) + 16px)}
  .v2-barra{grid-area:barra;align-self:stretch;display:flex;flex-direction:column;gap:2px;min-height:0;overflow-y:auto;
    background:var(--superficie);border-top:0;border-right:1px solid var(--separador);padding:8px 16px 16px;
    -webkit-backdrop-filter:none;backdrop-filter:none}
  .v2-lateral-mes{display:block;margin:0 0 12px;padding:0 4px;font-size:13px;line-height:18px;color:var(--tinta-3)}
  .v2-secciones{display:flex;flex-direction:column;gap:2px}
  .v2-seccion{flex-direction:row;justify-content:flex-start;align-items:center;gap:12px;min-height:44px;padding:0 12px;border-radius:10px;
    color:var(--tinta);font:400 16px/21px var(--letra);text-align:left}
  .v2-seccion .v2-icono{width:22px;height:22px}
  .v2-seccion[aria-current="page"]{background:var(--esp-lavado);color:var(--tinta)}
  .v2-seccion[aria-current="page"] .v2-icono{color:var(--esp-relleno)}
  .v2-seccion[aria-current="page"] .lleno{display:none}
  .v2-seccion[aria-current="page"] .linea{display:block}
  .v2-rotulo{max-width:none}
  .v2-lateral-pie{display:flex;flex-direction:column;gap:2px;margin-top:auto;padding-top:8px}
  .v2-lateral-fila{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:0 12px;border-radius:10px;
    color:var(--tinta);font:400 15px/20px var(--letra);text-align:left}
  .v2-lateral-fila .v2-icono{width:22px;height:22px}
  .v2-lateral-fila[data-tema-ciclo]{white-space:nowrap;padding-inline:10px;gap:10px}
  .v2-lateral-fila .v2-inicial.chica{margin:0 -3px}
  .v2-lateral-fila .v2-menu-globito{margin-left:auto;background:var(--globito-fondo);color:var(--globito-texto)}
}

/* =====================================================================
   TIPOGRAFÍA Y BLOQUES (SISTEMA §3)
   ===================================================================== */
.v2-encabezado{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px 16px;margin:8px 0 20px}
.v2-encabezado-texto{min-width:0}
.v2-encabezado-acciones{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.v2-titulo{font:700 var(--fs-title)/var(--lh-title) var(--letra);letter-spacing:-.3px;margin:0}
.v2-bloque{margin-top:28px}
.v2-bloque-titulo{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px}
.v2-bloque-titulo h2,.v2-bloque-titulo h3{font:600 var(--fs-h2)/var(--lh-h2) var(--letra)}
.v2-bloque-titulo a,.v2-bloque-titulo .v2-boton.texto{font:400 15px/20px var(--letra);text-decoration:none;min-height:44px;
  display:inline-flex;align-items:center}
.v2-secundario{color:var(--tinta-2);font-size:15px;line-height:20px}
.v2-nota{color:var(--tinta-3);font-size:13px;line-height:18px}
.v2-texto{font-size:16px;line-height:23px;max-width:70ch}
.v2-volver{margin:0 0 4px -6px}
.v2-volver a{display:inline-flex;align-items:center;gap:2px;min-height:44px;padding-right:10px;color:var(--accion);
  font:400 16px/21px var(--letra);text-decoration:none}
/* La línea debajo del título (el mes que se mira, "todos los meses"). */
.v2-subtitulo{margin:2px 0 0;color:var(--tinta-2);font-size:15px;line-height:20px}

/* La banda de ejemplo: queda fija arriba del contenido mientras scrollea. */
.v2-banda-ejemplo{position:sticky;top:0;z-index:5;margin:-8px calc(-1 * var(--margen)) 12px;padding:8px var(--margen);
  background:var(--revisar-fondo);color:var(--revisar-texto);font:600 13px/18px var(--letra)}

@container marco (min-width: 768px){
  .v2-encabezado{margin:0 0 24px}
  .v2-texto{font-size:16px;line-height:22px}
  .v2-banda-ejemplo{margin:-24px calc(-1 * var(--margen)) 16px;padding:8px var(--margen)}
  .v2-contenido{--fs-title:34px;--lh-title:41px}
  .v2-titulo{letter-spacing:-.5px}
  .v2-subtitulo{font-size:15px;line-height:20px}
}
@container marco (min-width: 1200px){
  .v2-rejilla{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:24px;align-items:start}
  .v2-rejilla > .v2-bloque:first-child{margin-top:0}
}

/* =====================================================================
   COMPONENTES (SISTEMA §10)
   ===================================================================== */

/* Tarjetas y listas agrupadas */
.v2-tarjeta{background:var(--superficie);border-radius:var(--r-tarjeta);padding:16px;box-shadow:var(--sombra-1)}
.v2-lista{background:var(--superficie);border-radius:var(--r-tarjeta);overflow:hidden;list-style:none;box-shadow:var(--sombra-1)}
.v2-fila{display:flex;align-items:center;gap:12px;min-height:60px;padding:10px 16px;border-bottom:1px solid var(--separador);
  color:inherit;text-decoration:none}
.v2-lista > :last-child,.v2-lista > li:last-child .v2-fila{border-bottom:0}
.v2-fila-icono{width:32px;height:32px;border-radius:8px;background:var(--superficie-2);display:flex;align-items:center;
  justify-content:center;font-size:17px;line-height:1;flex:none}
.v2-fila-texto{flex:1;min-width:0}
.v2-fila-titulo{display:block;font-size:16px;line-height:21px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v2-fila-sub{display:block;font-size:13px;line-height:18px;color:var(--tinta-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Las etiquetas van en su propia línea: el recorte del título no las esconde. */
.v2-fila-etiquetas{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.v2-fila-monto{flex:none;text-align:right;font:600 16px/21px var(--letra-numeros);font-variant-numeric:tabular-nums}
.v2-fila-monto small{display:block;font:400 13px/18px var(--letra-numeros);color:var(--tinta-2)}
.v2-fila.ingreso .v2-fila-monto{color:var(--ingreso)}
/* Anulado: tachado y en gris que SÍ llega a AA (no bajamos la opacidad del texto). */
.v2-fila.anulada .v2-fila-titulo,.v2-fila.anulada .v2-fila-monto{color:var(--tinta-2);text-decoration:line-through}
.v2-fila-accion{flex:none;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;color:var(--accion);
  border-radius:50%;text-decoration:none}
@container marco (min-width: 768px){
  .v2-fila{min-height:52px}
  .v2-fila-titulo{font-size:15px;line-height:20px}
  .v2-fila-sub{font-size:13px;line-height:18px}
  .v2-fila-monto{font-size:15px;line-height:20px}
  .v2-fila-monto small{font-size:12px;line-height:16px}
}

/* Etiquetas (siempre con texto) y marca de espacio por fila */
.v2-etiqueta{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;background:var(--superficie-2);
  color:var(--tinta);font:600 12px/16px var(--letra);white-space:nowrap}
.v2-etiqueta.revisar{background:var(--revisar-fondo);color:var(--revisar-texto)}
.marca-espacio{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;background:var(--esp-marca-fondo);
  color:var(--esp-marca-texto);font:600 12px/16px var(--letra);white-space:nowrap}

/* Montos (el componente <x-v2.monto>) */
.v2-monto{font-family:var(--letra-numeros);font-variant-numeric:tabular-nums;white-space:nowrap}
.v2-monto[data-moneda="USD"],.money[data-moneda="USD"]{background:var(--usd-fondo);color:var(--usd-tinta);border-radius:var(--r-xs);
  padding:0 5px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.ingreso .v2-monto[data-moneda="USD"],.v2-ingreso .v2-monto[data-moneda="USD"],.v2-tj-monto.debe .v2-monto[data-moneda="USD"]{color:inherit}
.v2-monto-aprox{font-weight:400}

/* Número principal (hero trazable) */
.v2-hero{background:var(--superficie);border-radius:var(--r-tarjeta);padding:16px;box-shadow:var(--sombra-1)}
.v2-hero-rotulo{font-size:15px;line-height:20px;color:var(--tinta-2)}
.v2-hero-numero{display:block;margin:4px 0 2px;font:700 var(--fs-hero)/var(--lh-hero) var(--letra-numeros);font-variant-numeric:tabular-nums;
  letter-spacing:-.5px;color:var(--tinta)}
.v2-hero-numero .v2-monto-moneda,.v2-hero-numero .v2-monto-centavos{font-size:.6em;letter-spacing:0}
.v2-hero-cuenta{font-size:15px;line-height:20px;color:var(--tinta-2)}
.v2-hero-frase{font-size:15px;line-height:20px;color:var(--tinta);margin-top:8px}
.v2-hero-pie{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.v2-hero-vacio-titulo{font:700 20px/25px var(--letra);margin:4px 0}
@container marco (min-width: 768px){
  .v2-hero{padding:20px 24px}
  .v2-hero-numero{font-size:48px;line-height:56px}
  .v2-hero-rotulo,.v2-hero-cuenta,.v2-hero-frase{font-size:13px;line-height:18px}
}

/* Barra de progreso con la marca del ritmo (SISTEMA §2.2) */
.v2-progreso{position:relative;height:10px;border-radius:5px;background:var(--pista);margin:12px 0 8px}
.v2-progreso-relleno{display:block;height:100%;border-radius:5px;background:var(--progreso-bien)}
.v2-progreso.atencion .v2-progreso-relleno{background:var(--progreso-atencion)}
.v2-progreso-ritmo{position:absolute;top:-3px;bottom:-3px;width:2px;margin-left:-1px;background:var(--tinta);
  box-shadow:0 0 0 1px var(--superficie)}

/* Botones */
.v2-boton{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;
  border:1px solid transparent;border-radius:var(--r-campo);font:600 16px/21px var(--letra);text-decoration:none;
  text-align:center}
.v2-boton.primario{background:var(--esp-relleno);color:var(--esp-texto)}
.v2-boton.secundario{background:var(--superficie);color:var(--tinta);border-color:var(--campo-borde)}
.v2-boton.texto{background:none;color:var(--accion);padding:0 8px}
.v2-boton.peligro{background:none;color:var(--deuda);padding:0 8px}
.v2-boton.ancho{width:100%;min-height:48px}
.v2-boton[disabled],.v2-boton[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.v2-botones{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.v2-porque{font-size:13px;line-height:18px;color:var(--tinta-2)}
@container marco (min-width: 768px){
  .v2-boton{font-size:15px;line-height:20px}
}

/* Campos (16 px de letra: con menos, iOS hace zoom) */
.v2-campo{display:block;margin-bottom:16px}
.v2-campo label,.v2-campo .v2-campo-rotulo{display:block;font:600 13px/18px var(--letra);color:var(--tinta);margin-bottom:6px}
.v2-campo input,.v2-campo select,.v2-campo textarea{display:block;width:100%;min-height:44px;padding:10px 12px;
  border:1px solid var(--campo-borde);border-radius:var(--r-campo);background:var(--superficie-2);color:var(--tinta);
  font:400 16px/22px var(--letra);-webkit-appearance:none;appearance:none}
.v2-campo input::placeholder,.v2-campo textarea::placeholder{color:var(--tinta-2)}
.v2-campo select{padding-right:36px;background-image:linear-gradient(45deg,transparent 50%,var(--tinta-2) 50%),
  linear-gradient(135deg,var(--tinta-2) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.v2-campo input[aria-invalid="true"]{border-color:var(--deuda)}
.v2-ayuda{font-size:13px;line-height:18px;color:var(--tinta-2);margin-top:6px}
.v2-error{display:flex;gap:6px;align-items:flex-start;font:600 13px/18px var(--letra);color:var(--deuda);margin-top:6px}
.v2-guarda-en{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:15px;line-height:20px;color:var(--tinta-2);margin:4px 0 12px}
.v2-casilla{display:flex;align-items:center;gap:10px;min-height:44px}
.v2-casilla input{width:20px;height:20px;accent-color:var(--accion);flex:none}

/* Segmentado (el de iOS) */
.v2-segmentado{display:flex;gap:2px;padding:2px;border-radius:10px;background:var(--superficie-2)}
.v2-segmentado a,.v2-segmentado button{flex:1;min-height:40px;display:flex;align-items:center;justify-content:center;
  padding:0 6px;border-radius:8px;color:var(--tinta-2);font:600 13px/18px var(--letra);text-decoration:none;text-align:center}
@container marco (min-width: 768px){
  .v2-segmentado a,.v2-segmentado button{font-size:15px;line-height:20px;padding:0 8px}
}
.v2-segmentado [aria-current="page"],.v2-segmentado [aria-pressed="true"]{background:var(--superficie);color:var(--tinta);
  box-shadow:0 1px 3px rgba(0,0,0,.12)}
/* El globito de un segmento (lo que falta revisar, los fijos sin pagar):
   el mismo número que el menú de siempre, con el mismo color. */
.v2-segmentado-globito{display:inline-block;min-width:20px;height:20px;padding:0 6px;border-radius:10px;
  background:var(--superficie-2);color:var(--tinta);font:600 12px/20px var(--letra-numeros);text-align:center;
  box-shadow:inset 0 0 0 1px var(--separador)}

/* Tabla (compu) con selección en lote */
.v2-tabla-caja{max-height:min(70vh, 640px);overflow:auto;background:var(--superficie);border-radius:var(--r-tarjeta)}
.v2-tabla{width:100%;border-collapse:collapse;font-size:14px;line-height:20px}
.v2-tabla th{position:sticky;top:0;z-index:1;background:var(--superficie);text-align:left;font:600 12px/16px var(--letra);
  color:var(--tinta-2);padding:12px;border-bottom:1px solid var(--separador);white-space:nowrap}
.v2-tabla td{padding:10px 12px;border-bottom:1px solid var(--separador);height:44px;white-space:nowrap}
.v2-tabla tbody tr:nth-child(even){background:var(--superficie-2)}
.v2-tabla tr[aria-selected="true"]{background:var(--elegido)}
.v2-tabla tr[aria-selected="true"] .v2-secundario{color:var(--tinta)}
.v2-tabla .num{text-align:right;font-family:var(--letra-numeros);font-variant-numeric:tabular-nums}
.v2-tabla input[type="checkbox"]{width:20px;height:20px;accent-color:var(--accion);vertical-align:middle}
.v2-tabla .casilla{width:44px}
.v2-lote{position:sticky;bottom:calc(var(--tabbar-h, 88px) + 8px);z-index:6;display:none;align-items:center;gap:8px;
  flex-wrap:wrap;margin-top:12px;padding:8px 8px 8px 16px;border-radius:var(--r-tarjeta);background:var(--superficie);
  box-shadow:var(--sombra-flota)}
.v2-lote.visible{display:flex}
.v2-lote b{margin-right:auto}
@container marco (min-width: 768px){
  .v2-lote{bottom:16px}
}

/* Avisos */
.v2-banda{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:12px;background:var(--revisar-fondo);
  color:var(--revisar-texto);font:600 15px/20px var(--letra)}
.v2-banda a{color:inherit}
.v2-error-pantalla{display:flex;gap:10px;margin:0 0 12px;padding:12px 14px;border-radius:12px;background:var(--superficie);
  border-left:4px solid var(--deuda);color:var(--tinta)}
.v2-error-pantalla .v2-icono{color:var(--deuda)}
.v2-aviso-breve{position:fixed;left:50%;top:calc(env(safe-area-inset-top) + 64px);z-index:60;transform:translateX(-50%);
  max-width:calc(100vw - 32px);padding:10px 16px;border-radius:12px;background:var(--superficie);color:var(--tinta);
  box-shadow:var(--sombra-flota);font:600 15px/20px var(--letra);animation:v2-aparece var(--t-hoja) ease-out}
.v2-aviso-breve[hidden]{display:none}
.v2-vacio{padding:24px 16px;text-align:center;color:var(--tinta-2)}
.v2-vacio p{margin-bottom:12px}

/* Maquetas (T3) ------------------------------------------------------ */
/* Lo que cambia según el ancho del marco (un solo HTML). */
.v2-solo-compu{display:none}
@container marco (min-width: 768px){
  .v2-solo-compu{display:block}
  .v2-solo-celu{display:none}
}
/* Una acción que en el iPhone es "de la compu": apagada y con la salida escrita. */
.v2-accion-bloqueada{display:inline-flex;flex-direction:column;align-items:flex-start;gap:4px}
.v2-acciones{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start;margin:0 0 16px}
.v2-hero + .v2-acciones{margin-top:16px}
.v2-fila-valor{flex:none;text-align:right}
.v2-fila-chevron{flex:none;color:var(--tinta-2)}
.v2-grupo-titulo{font:600 13px/18px var(--letra);color:var(--tinta-2);margin:24px 16px 8px}
.v2-codigo{flex:none;width:48px;font:400 13px/18px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--tinta-2)}
.v2-arbol .n2{padding-left:40px}
.v2-arbol .n3{padding-left:64px}
.v2-mes{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.v2-mes-cab{font:600 12px/16px var(--letra);color:var(--tinta-2);text-align:center;padding-bottom:4px}
.v2-mes-dia{min-height:48px;border-radius:10px;background:var(--superficie);padding:4px 6px;font:600 13px/18px var(--letra-numeros);color:var(--tinta)}
.v2-mes-dia.fuera{background:transparent;color:var(--tinta-2)}
.v2-mes-dia.hoy{box-shadow:inset 0 0 0 2px var(--accion)}
.v2-mes-dia .punto{display:block;width:6px;height:6px;border-radius:50%;background:var(--accion);margin-top:4px}
.v2-selector-fila{min-height:36px;padding:6px 32px 6px 10px;border:1px solid var(--campo-borde);border-radius:8px;
  background:var(--superficie-2);color:var(--tinta);font:400 14px/20px var(--letra);max-width:260px}
.v2-ingreso{color:var(--ingreso)}
.v2-dos-numeros{display:flex;flex-wrap:wrap;gap:4px 24px;align-items:baseline}
.v2-dos-numeros .v2-hero-numero{font-size:32px;line-height:38px}

/* Muestras de chip (sólo catálogo): NO son chips, no llevan la clase espchip. */
.v2-muestra-cabecera{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:52px;padding:0 12px;
  border-radius:12px;background:var(--esp-lavado);border:1px solid var(--separador)}
.v2-muestra-chip{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:4px 12px 4px 4px;border-radius:999px;
  background:var(--esp-relleno);color:var(--esp-texto);font:600 15px/24px var(--letra);white-space:nowrap}
.v2-muestra-chip .v2-muestra-ei{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;
  border-radius:50%;background:var(--esp-texto);font-size:14px;line-height:1}
.v2-galeria{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}
.v2-muestra-colores{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.v2-muestra-color{display:flex;align-items:center;gap:8px;font-size:13px;line-height:18px}
.v2-muestra-color i{width:28px;height:28px;border-radius:8px;border:1px solid var(--separador);flex:none}
.v2-muestra-iconos{display:flex;flex-wrap:wrap;gap:16px;color:var(--tinta)}
.v2-muestra-iconos figure{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px;line-height:16px;color:var(--tinta-2);width:64px}

/* =====================================================================
   HOJAS Y MENÚS (<dialog>, fuera del marco: media queries)
   ===================================================================== */
.v2-hoja{border:0;padding:0;margin:auto;background:var(--superficie);color:var(--tinta);width:min(480px, calc(100vw - 32px));
  max-width:none;max-height:calc(100dvh - 48px);border-radius:16px;box-shadow:var(--sombra-flota);overflow:auto}
.v2-hoja::backdrop{background:var(--velo)}
.v2-hoja-cabeza{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 8px 4px 20px}
.v2-hoja-cabeza h2{font:600 20px/25px var(--letra)}
.v2-hoja-cuerpo{padding:8px 20px 20px}
.v2-hoja-bajada{margin:0 0 12px;color:var(--tinta-2);font-size:15px;line-height:20px}
/* Selector de espacio (D1): tarjeta por opción con un punto del color del
   espacio, el nombre y el tilde en la elegida. */
.v2-hoja .navitem{display:flex;align-items:center;gap:14px;width:100%;min-height:60px;margin:0 0 8px;
  padding:8px 14px;border:1px solid var(--separador);border-radius:var(--r-md);background:var(--superficie);
  text-align:left;color:var(--tinta);font:600 17px/22px var(--letra)}
.v2-hoja .navitem{--p:var(--neutro-relleno);--pl:var(--superficie-2)}
.v2-hoja .navitem:has([data-punto="familiar"]){--p:var(--familiar-relleno);--pl:var(--familiar-lavado)}
.v2-hoja .navitem:has([data-punto="emi"]){--p:var(--emi-relleno);--pl:var(--emi-lavado)}
.v2-hoja .navitem:has([data-punto="jessi"]){--p:var(--jessi-relleno);--pl:var(--jessi-lavado)}
.v2-hoja .navitem:has([data-punto="negocio"]){--p:var(--negocio-relleno);--pl:var(--negocio-lavado)}
.v2-hoja .navitem:has([data-punto="personal"]){--p:var(--personal-relleno);--pl:var(--personal-lavado)}
.v2-hoja .navitem.on{background:var(--pl);border-color:var(--p)}
.v2-espacio-punto{flex:none;width:24px;height:24px;border-radius:50%;background:var(--p)}
.v2-espacio-texto{flex:1;min-width:0;display:flex;flex-direction:column}
.v2-espacio-texto small{font:400 13px/18px var(--letra);color:var(--tinta-2)}
.v2-hoja .navitem .tilde{width:20px;height:20px;color:var(--p);visibility:hidden}
.v2-hoja .navitem.on .tilde{visibility:visible}
.v2-hoja form{display:block}
@media (max-width: 767px){
  .v2-hoja{margin:auto 0 0;width:100%;max-height:92dvh;border-radius:var(--r-hoja) var(--r-hoja) 0 0;
    padding-bottom:env(safe-area-inset-bottom)}
  .v2-hoja::before{content:"";display:block;width:36px;height:5px;border-radius:3px;background:var(--separador);margin:8px auto 0}
  .v2-hoja[open]{animation:v2-sube var(--t-hoja) var(--curva-ios)}
}

/* El agente: pantalla entera (< 768), hoja modal a la derecha (768-1199),
   panel acoplado que corre el contenido (≥ 1200). El modo lo pone v2.js. */
.v2-agente{border:0;padding:0;background:var(--superficie);color:var(--tinta)}
.v2-agente[open]{display:flex;flex-direction:column}
.v2-agente:modal{margin:0 0 0 auto;width:min(400px, 100vw);max-width:100vw;height:100dvh;max-height:100dvh;box-shadow:var(--sombra-flota)}
.v2-agente::backdrop{background:var(--velo)}
.v2-agente[data-agente-panel="modal"][open]{animation:v2-entra-der var(--t-empuje) var(--curva-ios)}
.v2-agente[data-agente-panel="pantalla"]:modal{width:100vw;margin:0}
.v2-agente[data-agente-panel="pantalla"][open]{animation:v2-sube var(--t-empuje) var(--curva-ios)}
html.agente-acoplado .v2-agente[open]{position:fixed;inset:0 0 0 auto;width:400px;height:100%;max-height:none;margin:0;
  border-left:1px solid var(--separador);z-index:30}
html.agente-acoplado .v2-marco{margin-right:400px}
.v2-agente-cabeza{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:calc(env(safe-area-inset-top) + 8px) 8px 8px 20px;border-bottom:1px solid var(--separador)}
.v2-agente-cabeza h2{font:600 20px/25px var(--letra)}
.v2-agente-mensajes{flex:1;min-height:0;overflow-y:auto;padding:16px}
.v2-agente-escribir{display:flex;gap:8px;align-items:center;padding:8px 12px calc(env(safe-area-inset-bottom) + 8px);
  border-top:1px solid var(--separador)}
.v2-agente-escribir input{flex:1;min-height:44px;padding:10px 16px;border:1px solid var(--campo-borde);border-radius:999px;
  background:var(--superficie-2);color:var(--tinta);font:400 16px/22px var(--letra)}
.v2-burbuja{max-width:85%;padding:10px 14px;border-radius:18px;margin-bottom:10px;font-size:15px;line-height:20px}
.v2-burbuja.bot{background:var(--superficie-2);border-bottom-left-radius:6px}
.v2-burbuja.yo{margin-left:auto;background:var(--tinta);color:var(--superficie);border-bottom-right-radius:6px}

/* La tarjeta del agente (T4, SISTEMA §8.4). Advertencias por nivel, nunca
   sólo color: ícono y texto siempre (y el nivel dicho para el lector). */
.v2-ta{margin:0 0 16px}
.v2-ta-estados{margin:0 0 16px}
.v2-ta-estados button{font-size:13px;padding:0 6px}
.v2-ta-ejemplo + .v2-ta-ejemplo{margin-top:24px}
.v2-ta-tarjeta,.v2-ta-consulta{background:var(--superficie);border:1px solid var(--separador);border-radius:14px;
  padding:14px 14px 12px;margin:0 0 12px}
.v2-ta-titulo{font:600 17px/22px var(--letra);margin:0 0 10px;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.v2-ta-items{list-style:none;margin:0;padding:0}
.v2-ta-item{padding:12px 0;border-top:1px solid var(--separador)}
.v2-ta-item:first-child{border-top:0;padding-top:0}
.v2-ta-fila{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.v2-ta-detalle{font:600 17px/22px var(--letra);min-width:0;overflow-wrap:anywhere}
.v2-ta-monto{font:600 17px/22px var(--letra);font-variant-numeric:tabular-nums;white-space:nowrap}
.v2-ta-linea{margin:4px 0 0;font-size:15px;line-height:20px;color:var(--tinta-2);display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.v2-ta-aviso{margin:8px 0 0;font-size:15px;line-height:20px}
.v2-ta-aviso p{display:flex;gap:6px;align-items:flex-start;margin:0}
.v2-ta-aviso .v2-icono{flex:none;width:18px;height:18px;margin-top:1px}
.v2-ta-aviso[data-nivel="bloquea"]{background:var(--revisar-fondo);color:var(--revisar-texto);border-radius:10px;padding:8px 10px}
.v2-ta-aviso[data-nivel="atencion"]{color:var(--revisar-texto)}
.v2-ta-aviso[data-nivel="info"]{color:var(--tinta-2)}
.v2-ta-control{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;align-items:center}
.v2-ta-control select{min-height:44px;max-width:100%;padding:8px 12px;border:1px solid var(--campo-borde);border-radius:10px;
  background:var(--superficie);color:var(--tinta);font:400 16px/22px var(--letra)}
.v2-ta-control p{width:100%;margin:0;font-size:13px;line-height:18px}
.v2-ta-grande{display:flex;gap:10px;align-items:center;min-height:44px;margin:8px 0 0;font-size:15px;line-height:20px;cursor:pointer}
.v2-ta-grande input{width:22px;height:22px;flex:none;margin:0;accent-color:var(--accion)}
.v2-ta-acciones{display:flex;gap:4px;margin:6px 0 0 -8px}
.v2-ta-hecho{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:0;font-size:15px;line-height:20px}
.v2-ta-hecho .v2-icono{width:18px;height:18px;color:var(--ingreso)}
.v2-ta-error{margin:8px 0 0;color:var(--deuda);font-size:15px;line-height:20px}
.v2-ta-fuera{margin:12px 0 0;padding:10px 12px;border-radius:10px;background:var(--superficie-2)}
.v2-ta-fuera h4{font:600 15px/20px var(--letra);margin:0 0 4px}
.v2-ta-fuera ul{list-style:none;margin:0;padding:0;font-size:15px;line-height:20px}
.v2-ta-fuera .v2-boton.texto{padding:0;min-height:44px;text-align:left}
.v2-ta-pie{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px}
.v2-ta-pie .v2-boton.primario{flex:1 1 auto}
.v2-ta-nota{margin:8px 0 0;font-size:13px;line-height:18px;color:var(--tinta-2)}
.v2-ta-lineas{list-style:none;margin:0;padding:0;font-size:15px;line-height:22px}
.v2-ta-total{margin:8px 0 0;font-weight:600;font-size:15px;line-height:20px}
.v2-ta-fuente{margin:8px 0 0;font-size:13px;line-height:18px;color:var(--tinta-2)}
.v2-ta-prueba{display:flex;gap:8px;align-items:center;margin:0 0 8px;font-size:13px;line-height:18px;color:var(--tinta-2)}
.v2-ta-cambio{margin:6px 0 0;font-size:15px;line-height:20px}
.v2-ta-cambio div{display:flex;gap:6px}
.v2-ta-cambio dt{color:var(--tinta-2)}
.v2-ta-cambio dd{margin:0}
/* "Cambiar" (el editor del ítem, T5): dibujado por el servidor, se abre acá. */
.v2-ta-editor{display:grid;gap:10px;margin:8px 0 0;padding:12px;border-radius:12px;background:var(--superficie-2)}
.v2-ta-editor[hidden]{display:none}
.v2-ta-editor label{display:grid;gap:4px;font:600 13px/18px var(--letra);color:var(--tinta)}
.v2-ta-editor input,.v2-ta-editor select{min-height:44px;max-width:100%;padding:8px 12px;border:1px solid var(--campo-borde);
  border-radius:10px;background:var(--superficie);color:var(--tinta);font:400 16px/22px var(--letra)}
.v2-ta-editor-fila{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}

/* El agente de verdad (T5): las tarjetas que llegan del servidor, los
   mensajes de error y la barra de escribir mientras viaja un pedido. */
.v2-agente-tarjeta{margin:0 0 12px}
.v2-agente-tarjeta[aria-busy="true"]{cursor:progress}
.v2-burbuja.error{background:var(--superficie);color:var(--deuda);border:1px solid var(--separador)}
.v2-agente-escribir form,.v2-agente-escribir{margin:0}

@keyframes v2-sube{from{transform:translateY(100%)}to{transform:none}}
@keyframes v2-entra-der{from{transform:translateX(100%)}to{transform:none}}
@keyframes v2-aparece{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%,0)}}

/* =====================================================================
   TRANSICIONES (View Transitions nativas, SISTEMA §11)
   Quietos: chip, cabecera, barra. Se mueve el contenido.
   ===================================================================== */
@view-transition{navigation:auto}
::view-transition-group(root){animation-duration:var(--t-fundido)}
::view-transition-old(vt-contenido){animation:120ms var(--curva-entra) both v2-vt-funde-sale}
::view-transition-new(vt-contenido){animation:200ms var(--curva-sale) both v2-vt-funde-entra}
@keyframes v2-vt-funde-sale{to{opacity:0}}
@keyframes v2-vt-funde-entra{from{opacity:0}}
::view-transition-group(vt-cabecera),::view-transition-group(vt-chip){animation-duration:var(--t-espacio)}

@media (prefers-reduced-motion: reduce){
  @view-transition{navigation:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  .v2-hoja[open],.v2-agente[open],.v2-aviso-breve{animation:none!important}
  button:active,a:active,.espchip:active{transition:none}
}

/* =====================================================================
   FASE B (T5): las pantallas reales
   ===================================================================== */

/* El menú completo de siempre, mientras dura la transición (auditor,
   PLAN T5, 1b). En la compu, en la barra lateral, debajo de las secciones;
   en un ancho de celu, al pie del contenido. Sale de Consola::nav. */
.v2-menu-completo ul{list-style:none;margin:0;padding:0}
.v2-menu-titulo,.v2-menu-grupo{margin:16px 12px 4px;font:600 13px/18px var(--letra);color:var(--tinta-2)}
.v2-menu-item{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border-radius:10px;
  color:var(--tinta);text-decoration:none;font:400 15px/20px var(--letra)}
.v2-menu-item[aria-current="page"]{background:var(--esp-lavado);font-weight:600}
.v2-menu-item[aria-disabled="true"]{color:var(--tinta-2)}
.v2-menu-globito{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:10px;
  background:var(--superficie-2);color:var(--tinta);font:600 12px/20px var(--letra-numeros);text-align:center}
.v2-menu-completo{margin-top:12px;padding-top:4px;border-top:1px solid var(--separador)}
.v2-perfil-lista{list-style:none;margin:0 0 4px;padding:0}
.v2-perfil-lista .v2-menu-item{gap:12px}
.v2-perfil-lista .v2-icono{width:22px;height:22px;color:var(--tinta-2)}
.v2-perfil-tema{margin:4px 0 8px}
.v2-perfil-tema .v2-menu-grupo{margin-left:12px}

/* Cuentas y Cajas (D1). Celular: un bloque debajo del otro, con el título
   de cada bloque afuera de la tarjeta. Compu: tres columnas (Cajas ·
   Tarjetas · Cuentas del espacio), cada una su tarjeta. */
/* OJO, vale para TODAS las pantallas v2: en el celular las acciones del
   encabezado (@section acciones) no se muestran, porque D1 no las dibuja
   ahí. La pantalla que las use tiene que repetirlas abajo (Cuentas y Cajas
   lo hace en .v2-mas). En la compu se ven a la derecha del título. */
.v2-encabezado-acciones{display:none}
.v2-cuentas{display:grid;gap:28px}
.v2-panel-cabeza{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px;min-height:32px}
.v2-panel-cabeza h2{font:600 var(--fs-h2)/var(--lh-h2) var(--letra)}
.v2-pastilla{display:inline-flex;align-items:center;min-height:28px;padding:0 12px;border:1px solid var(--separador);
  border-radius:var(--r-pill);background:var(--superficie);color:var(--tinta-2);font:600 13px/18px var(--letra);white-space:nowrap}
.v2-panel-bajada{margin:-6px 0 12px;color:var(--tinta-2);font-size:13px;line-height:18px}
.v2-panel-vacio{padding:16px;border-radius:var(--r-tarjeta);background:var(--superficie);color:var(--tinta-2);
  font-size:15px;line-height:20px;box-shadow:var(--sombra-1)}
.v2-panel-accion{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:8px;padding:0 4px;
  color:var(--accion);font:600 15px/20px var(--letra);text-decoration:none}

/* Fila de caja (D1): ícono en un cuadrado, nombre 17/600, dato 15, monto a
   la derecha. Se abre con las acciones de la caja. */
.v2-caja > summary,.v2-archivadas > summary,.v2-tj-mas > summary{list-style:none;cursor:pointer}
.v2-caja > summary::-webkit-details-marker,.v2-archivadas > summary::-webkit-details-marker,.v2-tj-mas > summary::-webkit-details-marker{display:none}
.v2-cajas-lista > li{border-bottom:1px solid var(--separador)}
.v2-cajas-lista > li:last-child{border-bottom:0}
.v2-caja-fila{display:flex;align-items:center;gap:12px;min-height:64px;padding:12px 12px 12px 16px}
.v2-caja-icono{flex:none;width:44px;height:44px;border-radius:var(--r-md);background:var(--superficie-2);color:var(--tinta);
  display:flex;align-items:center;justify-content:center}
.v2-caja-texto{flex:1;min-width:0;display:flex;flex-direction:column}
.v2-caja-nombre{font:600 17px/22px var(--letra);overflow-wrap:anywhere}
.v2-caja-meta{font-size:15px;line-height:20px;color:var(--tinta-2)}
.v2-caja-monto{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right;
  font:600 17px/22px var(--letra-numeros);font-variant-numeric:tabular-nums}
.v2-caja-saldo.debe{color:var(--deuda)}
.v2-caja-chev{flex:none;margin-left:-4px;color:var(--tinta-3);transition:transform var(--t-fundido)}
details[open] > summary .v2-caja-chev{transform:rotate(180deg)}
.v2-caja-detalle{padding:0 16px 12px 74px}
.v2-caja-detalle .v2-nota{margin-bottom:4px}
.v2-caja-acciones{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 0 -8px}
.v2-caja-acciones form{display:contents}
.v2-caja-acciones .v2-boton{min-height:44px;font-size:15px}
.v2-caja-fila.archivada{align-items:flex-start}
.v2-caja-fila.archivada form{display:block;margin:2px 0 0 -8px}

/* El disponible, al pie de las cajas: por moneda, sin convertir. */
.v2-disponible{margin-top:12px;padding:14px 16px;border-radius:var(--r-tarjeta);background:var(--superficie-2)}
.v2-disponible-rotulo{font:600 13px/18px var(--letra);color:var(--tinta-2)}
.v2-disponible-numeros{display:flex;flex-wrap:wrap;gap:4px 16px;align-items:baseline;margin:4px 0;
  font:700 20px/26px var(--letra-numeros);font-variant-numeric:tabular-nums}
.v2-archivadas{margin-top:12px}
.v2-archivadas > summary{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 4px;color:var(--tinta-2);font:600 15px/20px var(--letra)}
.v2-archivadas .v2-lista{margin-top:4px}

/* Tarjeta de crédito (D1): el plástico oscuro con cierre, vencimiento y la
   deuda. En oscuro se invierte (claro), igual que en el dibujo. */
.v2-tj-lista{display:grid;gap:16px}
.v2-tj-plastico{padding:18px 20px 20px;border-radius:var(--r-lg);background:var(--tinta);color:var(--superficie)}
.v2-tj-cabeza{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.v2-tj-nombre{font:700 18px/23px var(--letra);margin:0;overflow-wrap:anywhere}
.v2-tj-banco{font-size:13px;line-height:18px;opacity:.78;white-space:nowrap}
.v2-tj-datos{display:flex;flex-wrap:wrap;gap:4px 24px;margin:12px 0 0}
.v2-tj-datos dt{font-size:13px;line-height:18px;opacity:.78}
.v2-tj-datos dd{margin:0;font:700 17px/22px var(--letra-numeros);font-variant-numeric:tabular-nums}
.v2-tj-datos dd.chico{font:400 15px/20px var(--letra)}
.v2-tj-aviso{margin:8px 0 0;font-size:13px;line-height:18px;opacity:.78}
.v2-tj-rotulo{margin:14px 0 0;font-size:13px;line-height:18px;opacity:.78}
.v2-tj-deudas{margin:0;font:700 22px/28px var(--letra-numeros);font-variant-numeric:tabular-nums}
.v2-tj-monto{white-space:nowrap}
.v2-tj-mas{margin-top:6px}
.v2-tj-mas > summary{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 4px;color:var(--accion);font:600 15px/20px var(--letra)}
.v2-tj-detalle{display:grid;gap:12px;padding:14px 16px;border-radius:var(--r-tarjeta);background:var(--superficie);box-shadow:var(--sombra-1)}
.v2-tj-sub{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin:0 0 4px;font:600 13px/18px var(--letra);color:var(--tinta-2)}
.v2-tj-sub a{font-weight:400;color:var(--accion)}
.v2-tj-filas{list-style:none;margin:0;padding:0;font-size:15px;line-height:20px}
.v2-tj-filas li{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--separador)}
.v2-tj-filas li:last-child{border-bottom:0}
.v2-tj-filas li > span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v2-tj-filas .money{flex:none;font-weight:600;font-variant-numeric:tabular-nums}
.v2-tj-nota{margin:0;font-size:13px;line-height:18px;color:var(--tinta-2)}
.v2-tj-detalle .v2-caja-acciones{margin:0}

/* Cuentas del espacio (D1): nombre y monto, y una barra debajo. */
.v2-barras{list-style:none;margin:0;padding:16px;border-radius:var(--r-tarjeta);background:var(--superficie);box-shadow:var(--sombra-1)}
.v2-barras li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:baseline;padding:6px 0}
.v2-barras-nombre{font:600 16px/21px var(--letra);overflow-wrap:anywhere}
.v2-barras-monto{font:400 16px/21px var(--letra-numeros);font-variant-numeric:tabular-nums;white-space:nowrap}
.v2-barras-pista{grid-column:1 / -1;display:block;height:8px;border-radius:4px;background:var(--superficie-2)}
.v2-barras-pista span{display:block;height:100%;border-radius:4px;background:var(--esp-relleno)}

/* Al pie: las otras pantallas de la sección y la planilla. */
.v2-mas{margin-top:32px;display:grid;gap:12px;justify-items:start}
.v2-mas .v2-acciones{margin:0}
/* D1: "Vendí dólares" es un botón liso (sin borde), no el secundario con contorno. */
.v2-encabezado-acciones .v2-boton.secundario,.v2-mas .v2-boton.secundario{border-color:transparent;box-shadow:var(--sombra-1)}
.v2-enlaces{width:100%;max-width:560px}
.v2-enlaces ul{list-style:none;margin:0;padding:0;border-radius:var(--r-tarjeta);background:var(--superficie);box-shadow:var(--sombra-1);overflow:hidden}
.v2-enlaces li + li{border-top:1px solid var(--separador)}
.v2-enlace-fila{display:flex;align-items:center;gap:8px;min-height:52px;padding:0 16px;color:var(--tinta);text-decoration:none;font:400 16px/21px var(--letra)}
.v2-enlace-fila > span:first-child{flex:1}
.v2-enlace-fila .v2-icono{color:var(--tinta-3)}

@container marco (min-width: 768px){
  .v2-encabezado-acciones{display:flex}
  .v2-mas .v2-solo-celu{display:none}
  .v2-cuentas{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
  .v2-panel{padding:16px;border-radius:var(--r-tarjeta);background:var(--superficie);box-shadow:var(--sombra-1)}
  .v2-panel-tarjetas{padding:0;background:none;box-shadow:none}
  .v2-panel-tarjetas .v2-panel-cabeza{padding:4px 0 0}
  .v2-panel .v2-lista,.v2-panel .v2-barras{background:none;box-shadow:none;border-radius:0;padding:0}
  .v2-panel-tarjetas .v2-panel-vacio{box-shadow:var(--sombra-1)}
  .v2-panel-cuentas .v2-panel-vacio{padding:0;box-shadow:none}
  /* En la compu la fila es compacta: sin el cuadrado del ícono y con el
     dato al lado del nombre, como la columna "Cajas" del dibujo. */
  .v2-caja-icono{display:none}
  .v2-caja-fila{min-height:44px;padding:10px 0;gap:10px}
  .v2-caja-nombre{font:400 15px/20px var(--letra)}
  .v2-caja-meta{font-size:13px;line-height:18px;color:var(--tinta-3)}
  .v2-caja-monto{font-size:15px;line-height:20px}
  .v2-caja-detalle{padding:0 0 10px}
  .v2-disponible{margin-top:8px}
  .v2-tj-mas > summary{min-height:36px}
  .v2-caja-acciones .v2-boton{min-height:36px;font-size:14px}
  .v2-barras-nombre{font-size:15px;line-height:20px}
  .v2-barras-monto{font-size:15px;line-height:20px}
  .v2-barras li{padding:5px 0}
}
@container marco (min-width: 1100px){
  .v2-cuentas{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* =====================================================================
   MOVIMIENTOS (D1). Una sola tabla: en la compu es la tabla del dibujo;
   en el celular, cada fila es una tarjeta (ícono, título, dato y monto) y
   los renglones de día hacen de separadores ("Hoy · domingo 27").
   ===================================================================== */
.v2-mov{display:grid;gap:20px;grid-template-columns:minmax(0,1fr);align-items:start}
.v2-mov-panel{min-width:0}
/* En el celular, como D1: buscar, chips y la lista; los totales van abajo. */
.v2-mov-panel{display:flex;flex-direction:column}
.v2-mov-resumen,.v2-mov-aclaracion{order:1}
.v2-mov-resumen{margin-top:16px}
.v2-mov-filtros{display:grid;gap:10px;margin:0 0 12px}
.v2-mov-buscar{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 14px;border-radius:var(--r-md);
  background:var(--superficie);box-shadow:var(--sombra-1);color:var(--tinta-2)}
.v2-mov-buscar input{flex:1;min-width:0;min-height:44px;border:0;background:none;color:var(--tinta);font:400 16px/22px var(--letra);outline:none}
.v2-mov-buscar:focus-within{outline:2px solid var(--accion);outline-offset:2px}
.v2-mov-mas-filtros > summary{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 4px;list-style:none;cursor:pointer;
  color:var(--accion);font:600 15px/20px var(--letra)}
.v2-mov-mas-filtros > summary::-webkit-details-marker{display:none}
.v2-mov-selects{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:8px;margin:4px 0 10px}
.v2-mov-selects select{min-height:44px;padding:8px 12px;border:1px solid var(--campo-borde);border-radius:var(--r-sm);
  background:var(--superficie);color:var(--tinta);font:400 16px/22px var(--letra)}
.v2-mov-fila-chips{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin:0 0 12px}
.v2-chips,.v2-mov-meses{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px}
.v2-chips::-webkit-scrollbar,.v2-mov-meses::-webkit-scrollbar{display:none}
.v2-chip{flex:none;display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:var(--r-pill);
  border:1px solid var(--separador);background:var(--superficie);color:var(--tinta);font:400 15px/20px var(--letra);text-decoration:none;white-space:nowrap}
.v2-chip[aria-current="page"]{background:var(--tinta);border-color:var(--tinta);color:var(--superficie)}
.v2-chip.actual{font-weight:600;border-color:transparent;background:none}

/* Los totales del filtro, chicos: D1 no los dibuja, pero son números que ya estaban. */
.v2-mov-resumen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 0 6px}
.v2-mov-total{display:flex;flex-direction:column;padding:10px 12px;border-radius:var(--r-md);background:var(--superficie);box-shadow:var(--sombra-1)}
.v2-mov-total-rotulo{font:600 13px/18px var(--letra);color:var(--tinta-2)}
.v2-mov-total-valor{font:700 17px/22px var(--letra-numeros);font-variant-numeric:tabular-nums}
.v2-mov-total-valor.entra,.v2-mov-monto.entra,.v2-mov-d-monto.entra,.v2-mov-monto .entra{color:var(--ingreso)}
.v2-mov-total-pie{font-size:12px;line-height:16px;color:var(--tinta-3)}
.v2-mov-aclaracion{margin:0 2px 12px}
.v2-mov-elegir{align-self:flex-start;margin:0 0 4px -8px}

/* La tabla, como tarjetas (celular). */
.v2-mov-tabla table{width:100%;border-collapse:collapse}
.v2-mov-tabla thead,.v2-mov-tabla caption{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.v2-mov-tabla tbody,.v2-mov-tabla tfoot{display:block}
.v2-mov-tabla tr{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"desc monto" "cuenta cuenta" "etiquetas etiquetas";
  column-gap:12px;align-items:center;padding:12px 16px;background:var(--superficie);border-bottom:1px solid var(--separador)}
.v2-mov-tabla tbody tr:not(.v2-mov-dia):first-child,.v2-mov-dia + tr{border-top-left-radius:var(--r-tarjeta);border-top-right-radius:var(--r-tarjeta)}
.v2-mov-tabla tbody tr:not(.v2-mov-dia):has(+ .v2-mov-dia),.v2-mov-tabla tbody tr:not(.v2-mov-dia):last-child{border-bottom:0;
  border-bottom-left-radius:var(--r-tarjeta);border-bottom-right-radius:var(--r-tarjeta);box-shadow:0 1px 0 var(--separador)}
.v2-mov-tabla td{display:block;min-width:0}
.v2-mov-tabla tr.v2-mov-dia{display:block;padding:18px 4px 8px;background:none;border:0}
.v2-mov-dia th{font:600 15px/20px var(--letra);color:var(--tinta-2);text-align:left}
.v2-mov-casilla{grid-area:casilla;display:none!important;position:relative;z-index:1}
.v2-mov-casilla input,.v2-mov-tabla thead input{width:22px;height:22px;accent-color:var(--accion)}
.v2-mov.eligiendo .v2-mov-tabla tbody tr:not(.v2-mov-dia){grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-areas:"casilla desc monto" "casilla cuenta cuenta" "casilla etiquetas etiquetas"}
.v2-mov.eligiendo .v2-mov-casilla{display:block!important}
.v2-mov.eligiendo .v2-mov-icono{display:none}
.v2-mov-fecha,.v2-mov-caja,.v2-mov-quien{display:none!important}
.v2-mov-desc{grid-area:desc;display:flex!important;align-items:center;gap:12px}
.v2-mov-icono{flex:none;width:40px;height:40px;border-radius:var(--r-md);background:var(--superficie-2);display:flex;align-items:center;justify-content:center}
.v2-mov-icono .v2-icono{width:22px;height:22px}
.v2-mov-texto{min-width:0;display:flex;flex-direction:column}
.v2-mov-abrir{min-height:24px;padding:0;text-align:left;color:var(--tinta);font:600 17px/22px var(--letra);overflow-wrap:anywhere}
.v2-mov-abrir::after{content:"";position:absolute;inset:0}
.v2-mov-tabla tr{position:relative}
.v2-mov-meta{font-size:15px;line-height:20px;color:var(--tinta-2)}
.v2-mov-original{font-size:13px;line-height:18px;font-style:italic;color:var(--tinta-3);white-space:pre-line}
.v2-mov-cuenta{grid-area:cuenta;margin-top:6px;position:relative;z-index:1}
.v2-mov-cuenta:not(:has(form)){display:none!important}
.v2-mov-cuenta select{width:100%;max-width:none}
.v2-mov-etiquetas{grid-area:etiquetas;display:flex!important;flex-wrap:wrap;gap:4px;margin-top:6px;position:relative;z-index:1}
.v2-mov-etiquetas a.v2-etiqueta{text-decoration:none;color:var(--accion)}
.v2-mov-monto{grid-area:monto;text-align:right;font:600 17px/22px var(--letra-numeros);font-variant-numeric:tabular-nums;white-space:nowrap}
.v2-mov-monto span{display:block}
.v2-mov-tenue{color:var(--tinta-3)}
.v2-selector-fila.falta{border-color:var(--revisar-texto);background:var(--revisar-fondo);color:var(--revisar-texto);font-weight:600}
.v2-mov-tabla tr.anulada .v2-mov-abrir,.v2-mov-tabla tr.anulada .v2-mov-monto{color:var(--tinta-2);text-decoration:line-through}
.v2-mov-tabla tr.recien{animation:v2-resalta 1.6s ease-out}
.v2-mov-tabla tr[aria-selected="true"]{background:var(--esp-lavado)}
.v2-mov-tabla tr.abierto{box-shadow:inset 3px 0 0 var(--esp-relleno)}
.v2-mov-vacio td{padding:24px 0;text-align:center;color:var(--tinta-2)}
.v2-mov-tabla tfoot tr{display:block;margin-top:12px;border-radius:var(--r-tarjeta);font-size:13px;line-height:18px;color:var(--tinta-2)}
.v2-mov-tabla tfoot th{display:block;text-align:left;font-weight:600;color:var(--tinta)}
.v2-mov-tabla tfoot .v2-mov-monto{text-align:left;margin-top:4px}
.v2-mov-pie-equivalente span{display:block}
@keyframes v2-resalta{from{background:var(--esp-lavado)}}

/* El detalle (D1): hoja en el celular; panel al lado de la tabla en la compu. */
.v2-mov-d-monto{font:700 34px/40px var(--letra-numeros);font-variant-numeric:tabular-nums;margin:0}
.v2-mov-d-titulo{font:600 20px/25px var(--letra);margin:2px 0 0}
.v2-mov-d-fecha{color:var(--tinta-2);font-size:15px;line-height:20px;margin:2px 0 8px}
.v2-mov-d-datos{margin:12px 0;border:1px solid var(--separador);border-radius:var(--r-md);overflow:hidden}
.v2-mov-d-datos div{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:12px;padding:12px 14px;border-bottom:1px solid var(--separador)}
.v2-mov-d-datos div:last-child{border-bottom:0}
.v2-mov-d-datos dt{color:var(--tinta-2);font-size:15px;line-height:20px}
.v2-mov-d-datos dd{margin:0;font:600 15px/20px var(--letra);text-align:right}
.v2-mov-d-acciones{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.v2-mov-d-acciones form{display:contents}
.v2-mov-d-acciones .v2-boton.primario,.v2-mov-d-acciones .v2-boton.secundario{flex:1 1 140px}
.v2-mov-d-sub{font:600 17px/22px var(--letra);margin:16px 0 6px}
.v2-mov-d-historial{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.v2-mov-d-historial li{display:flex;gap:8px;align-items:flex-start;font-size:15px;line-height:20px}
.v2-mov-d-historial .v2-icono{margin-top:2px;color:var(--tinta-2)}
.v2-mov-d-historial small{display:block;font-size:13px;line-height:18px;color:var(--tinta-3)}
.v2-mov-d-anular{padding:0;margin-top:12px}

@container marco (min-width: 768px){
  .v2-mov-panel{display:block}
  .v2-mov-resumen{margin-top:0}
  .v2-mov-panel{padding:16px;border-radius:var(--r-tarjeta);background:var(--superficie);box-shadow:var(--sombra-1)}
  .v2-mov-filtros{grid-template-columns:minmax(0,320px) auto;align-items:start}
  .v2-mov-buscar{min-height:40px;box-shadow:none;border:1px solid var(--separador);background:var(--superficie)}
  .v2-mov-buscar input{min-height:38px;font-size:15px}
  .v2-mov-mas-filtros[open]{grid-column:1 / -1}
  .v2-chip{min-height:32px;padding:0 12px;font-size:13px;line-height:18px}
  .v2-chip[aria-current="page"]{background:var(--superficie-2);border-color:var(--separador);color:var(--tinta);font-weight:600}
  .v2-mov-resumen{grid-template-columns:repeat(4,minmax(0,1fr))}
  .v2-mov-total{box-shadow:none;background:var(--superficie-2)}
  .v2-mov-elegir{display:none}

  /* La tabla del dibujo. */
  .v2-mov-tabla{overflow-x:auto}
  .v2-mov-desc{min-width:180px}
  .v2-mov-tabla td.v2-mov-cuenta{min-width:130px}
  .v2-mov-tabla td.v2-mov-caja{min-width:96px}
  .v2-mov-tabla td.v2-mov-monto{white-space:nowrap}
  .v2-mov-tabla thead{position:static;width:auto;height:auto;overflow:visible;clip-path:none;display:table-header-group}
  .v2-mov-tabla tbody{display:table-row-group}
  .v2-mov-tabla tfoot{display:table-footer-group}
  .v2-mov-tabla tr,.v2-mov-tabla tfoot tr{display:table-row;padding:0;background:none;border:0;border-radius:0!important;box-shadow:none!important;margin:0}
  .v2-mov-tabla tr.v2-mov-dia{display:none}
  .v2-mov-tabla th,.v2-mov-tabla td{display:table-cell!important;padding:10px 8px;border-bottom:1px solid var(--separador);vertical-align:middle;text-align:left}
  .v2-mov-tabla thead th{font:600 12px/16px var(--letra);color:var(--tinta-2);white-space:nowrap}
  .v2-mov-tabla thead th a{color:inherit;text-decoration:none;display:inline-flex;gap:4px;min-height:24px;align-items:center}
  .v2-mov-tabla thead th a.on{color:var(--tinta)}
  .v2-mov-tabla thead th .ar{color:var(--tinta-3)}
  .v2-mov-tabla th.r,.v2-mov-tabla td.v2-mov-monto{text-align:right}
  .v2-mov-casilla{width:36px}
  .v2-mov-icono{display:none}
  .v2-mov-desc{display:table-cell!important}
  .v2-mov-meta{display:none}
  .v2-mov-abrir{font-size:15px;line-height:20px}
  .v2-mov-fecha{width:48px;color:var(--tinta-2);font-variant-numeric:tabular-nums}
  .v2-mov-cuenta,.v2-mov-caja,.v2-mov-quien{font-size:15px;line-height:20px;margin:0}
  .v2-mov-cuenta:not(:has(form)){display:table-cell!important}
  .v2-mov-cuenta select{min-width:150px;max-width:220px}
  .v2-mov-etiquetas{margin:0}
  .v2-mov-monto{font-size:15px;line-height:20px}
  .v2-mov-tabla tbody tr:hover{background:var(--superficie-2)}
  .v2-mov-tabla tfoot th,.v2-mov-tabla tfoot td{font-size:13px;line-height:18px;border-bottom:0;padding-top:14px;vertical-align:top}
  .v2-mov-tabla tfoot .v2-mov-monto{text-align:right}
}
@container marco (min-width: 1100px){
  /* Con el detalle abierto, panel a la derecha (no modal), como el dibujo. */
  .v2-mov:has(> .v2-mov-detalle[open]:not(:modal)){grid-template-columns:minmax(0,1fr) 340px}
  .v2-mov-detalle:not(:modal){position:sticky;top:0;inset:auto;margin:0;width:auto;max-height:calc(100dvh - 48px);
    border-radius:var(--r-tarjeta);box-shadow:var(--sombra-1);z-index:1}
}

/* =====================================================================
   PARA REVISAR (D1). Reusa la tabla de Movimientos (.v2-mov-*): en la
   compu, la "bandeja en lote" de "Inicio · bandeja en lote"; en el
   celular, las tarjetas del bloque "Para revisar" de Inicio.
   ===================================================================== */
.v2-revisar-cabeza{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:4px 16px;margin:0 0 12px}
.v2-revisar-cabeza h2{font:600 var(--fs-h2)/var(--lh-h2) var(--letra)}
.v2-revisar-n{color:var(--tinta-3);font-weight:600}
.v2-revisar-bajada{margin:2px 0 0;max-width:62ch;font-size:13px;line-height:18px;color:var(--tinta-2)}
.v2-revisar-tip{margin:2px 0 0;font-size:13px;line-height:18px;color:var(--tinta-3)}
.v2-revisar-filtros{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.v2-revisar-filtros .v2-mov-buscar{flex:1 1 220px}
.v2-mov-icono.duda{background:var(--revisar-fondo);color:var(--revisar-texto)}
.v2-revisar-titulo{font:600 17px/22px var(--letra);overflow-wrap:anywhere}
.v2-revisar-pregunta{margin-top:2px;font:600 13px/18px var(--letra);color:var(--revisar-texto)}
.v2-revisar-asignar{display:flex;gap:6px;align-items:center}
.v2-revisar-asignar select{flex:1;min-width:0}
.v2-revisar-ok{flex:none;width:44px;padding:0}
.v2-revisar-sugerida{display:block;margin-top:2px;font-size:12px;line-height:16px;color:var(--tinta-3)}
.v2-revisar-origen{color:var(--tinta-2)}
.v2-revisar-sin-pista{display:block;color:var(--revisar-texto);font-weight:600}
.v2-revisar-vacio{display:grid;justify-items:center;gap:6px;padding:28px 16px;text-align:center;border-radius:var(--r-tarjeta);background:var(--superficie);box-shadow:var(--sombra-1)}
.v2-revisar-vacio p{color:var(--tinta-2);margin:0 0 8px}

/* La barra del lote (D1): oscura, con lo elegido, la cuenta y la acción. */
.v2-lote{background:var(--tinta);color:var(--superficie);box-shadow:var(--sombra-flota)}
.v2-lote .v2-boton.texto{color:var(--superficie)}
.v2-lote .v2-boton.secundario{background:var(--superficie);color:var(--tinta);border-color:transparent}
.v2-lote select{background:var(--superficie);color:var(--tinta);border-color:transparent}
.v2-lote-rotulo{font-size:13px;line-height:18px;opacity:.85}

@container marco (min-width: 768px){
  .v2-revisar .v2-mov-meta{display:none}
  .v2-revisar .v2-mov-icono{display:none}
  .v2-revisar-titulo{font-size:15px;line-height:20px}
  .v2-revisar-pregunta{font-weight:400;color:var(--tinta-3)}
  .v2-revisar .v2-mov-cuenta{min-width:230px}
  .v2-revisar-filtros .v2-mov-buscar{flex:0 1 320px}
}

/* "Elegir todos" del celular: sólo mientras se eligen varios (en la compu,
   la casilla del encabezado de la tabla hace lo mismo). */
.v2-mov-todos{display:none;align-items:center;gap:10px;min-height:44px;padding:0 4px;font:600 15px/20px var(--letra)}
.v2-mov-todos input{width:22px;height:22px;accent-color:var(--accion)}
.v2-mov.eligiendo .v2-mov-todos{display:flex}
@container marco (min-width: 768px){
  .v2-mov.eligiendo .v2-mov-todos,.v2-mov-todos{display:none}
}

/* Lote: el tilde "lo revisé" (más de US$ 200) y el motivo del botón apagado. */
.v2-lote-grande:not([hidden]){display:inline-flex;align-items:center;gap:8px;min-height:44px;font:600 14px/18px var(--letra)}
.v2-lote-grande input{width:22px;height:22px;accent-color:var(--esp-relleno);flex:none}
.v2-lote-motivo:not([hidden]){display:block;width:100%;font:600 13px/18px var(--letra)}
.v2-lote .v2-boton[disabled]{opacity:.5}
.v2-lote-pregunta-botones{margin-top:16px}
.v2-lote-pregunta-botones .v2-boton{flex:1 1 140px}

/* =====================================================================
   INICIO (D1, P5-A T1). Celular: un bloque debajo del otro (número,
   Para revisar, accesos, próximos). Compu: el número y "Próximos 7 días"
   lado a lado, y Para revisar a todo el ancho, como el dibujo.
   ===================================================================== */
/* El orden del código es el del celular (D1): número, Para revisar,
   accesos, Próximos 7 días… así el foco del teclado sigue lo que se ve. En
   la compu, la grilla sube "Próximos 7 días" al lado del número (dense). */
.v2-inicio{display:grid;gap:28px}
.v2-inicio-tc{margin-bottom:-12px}
.v2-inicio .v2-panel-cabeza{margin-bottom:8px}
.v2-inicio-ver{color:var(--accion);font:400 15px/20px var(--letra);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.v2-inicio-h2{font:600 var(--fs-h2)/var(--lh-h2) var(--letra);margin:0 0 10px}
.v2-inicio-n{color:var(--tinta-2);font-weight:600;margin-left:2px}
.v2-solo-compu-inline{display:none}

/* El número: la barra va con el color del espacio (D1); pasado, todo en rojo. */
.v2-inicio-hero .v2-progreso{background:var(--superficie-2);height:10px}
.v2-inicio-hero .v2-progreso-relleno{background:var(--esp-relleno)}
.v2-inicio-hero .v2-progreso.pasado .v2-progreso-relleno{background:var(--deuda)}
.v2-inicio-pasado{color:var(--deuda)}
.v2-hero-rotulo.v2-inicio-pasado{display:flex;align-items:center;gap:6px;font-weight:600}
.v2-inicio-hero .v2-hero-numero{font-size:44px;line-height:52px}
.v2-inicio-hero .v2-hero-frase{font-size:16px;line-height:21px}
.v2-inicio-cta{margin-top:14px}
.v2-inicio-hero .v2-nota{margin-top:6px}
.v2-inicio-duda{display:flex;gap:10px;align-items:flex-start;margin-top:12px;padding:12px 14px;border-radius:12px;
  background:var(--revisar-fondo);color:var(--revisar-texto);font-size:15px;line-height:20px}
.v2-inicio-duda .v2-icono{flex:none;margin-top:1px}
.v2-inicio-hero > .v2-boton{margin-top:12px}

/* Para revisar: la tarjeta del dibujo (ícono "?", título, de dónde vino,
   la pregunta en color de duda, el monto y "Revisar"). */
.v2-inicio-rev{display:flex;align-items:center;gap:12px;padding:14px 16px;color:inherit;text-decoration:none;border-bottom:1px solid var(--separador)}
.v2-inicio-revisar .v2-lista > li:last-child .v2-inicio-rev{border-bottom:0}
.v2-inicio-rev-icono{flex:none;width:44px;height:44px;border-radius:var(--r-md);background:var(--revisar-fondo);color:var(--revisar-texto);
  display:flex;align-items:center;justify-content:center}
.v2-inicio-rev-texto{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.v2-inicio-rev-texto b{font:600 17px/22px var(--letra);overflow-wrap:anywhere}
.v2-inicio-rev-meta{font-size:15px;line-height:20px;color:var(--tinta-2)}
.v2-inicio-rev-pregunta{font:600 15px/20px var(--letra);color:var(--revisar-texto)}
.v2-inicio-rev-lado{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:8px;text-align:right}
.v2-inicio-rev-monto{font:600 17px/22px var(--letra-numeros);font-variant-numeric:tabular-nums;white-space:nowrap}
.v2-inicio-rev-accion{font-size:16px;line-height:21px;color:var(--tinta)}
.v2-inicio-nada{min-height:64px}
.v2-inicio-nada .v2-fila-icono{color:var(--accion)}

/* Accesos rápidos: dos tarjetas con el ícono arriba, en el color del espacio. */
.v2-inicio-accesos-grilla{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.v2-inicio-acceso{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-height:88px;padding:14px 16px;
  border-radius:var(--r-tarjeta);background:var(--superficie);box-shadow:var(--sombra-1);color:var(--tinta);text-decoration:none;
  font:400 17px/22px var(--letra)}
.v2-inicio-acceso .v2-icono{color:var(--esp-relleno);width:26px;height:26px}

/* Próximos 7 días */
.v2-inicio-prox{display:flex;align-items:center;gap:12px;min-height:64px;padding:12px 16px;border-bottom:1px solid var(--separador)}
.v2-inicio-prox:last-child{border-bottom:0}
.v2-inicio-prox-texto{flex:1;min-width:0;display:flex;flex-direction:column}
.v2-inicio-prox-titulo{font:600 17px/22px var(--letra);overflow-wrap:anywhere}
.v2-inicio-prox-meta{font-size:15px;line-height:20px;color:var(--tinta-2)}
.v2-inicio-prox-valor{flex:none;text-align:right;font:600 17px/22px var(--letra-numeros);font-variant-numeric:tabular-nums;white-space:nowrap}
.v2-inicio-prox-fecha{display:none}
.v2-inicio-fijos{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;margin-top:8px;padding:0 4px;
  color:var(--tinta-2);font:400 15px/20px var(--letra);text-decoration:none}
.v2-inicio-vencidos{color:var(--deuda)}
.v2-inicio-fijos > span{flex:1}

/* El mes en números */
.v2-inicio-dl{margin:0;padding:0}
.v2-inicio-dl > div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;min-height:52px;padding:12px 16px;border-bottom:1px solid var(--separador)}
.v2-inicio-dl > div:last-child{border-bottom:0}
.v2-inicio-dl dt{font:400 16px/21px var(--letra)}
.v2-inicio-dl dt small{display:block;font-size:13px;line-height:18px;color:var(--tinta-2)}
.v2-inicio-dl dd{margin:0;font:600 16px/21px var(--letra-numeros);font-variant-numeric:tabular-nums;white-space:nowrap}
.v2-inicio-numeros .v2-nota{margin-top:8px}

/* El agente notó y Mi mes */
.v2-inicio-aviso{display:flex;flex-direction:column;gap:2px;padding:12px 16px;border-bottom:1px solid var(--separador);font-size:15px;line-height:20px}
.v2-inicio-aviso:last-child{border-bottom:0}
.v2-inicio-aviso span{color:var(--tinta-2);white-space:pre-line}
.v2-inicio-aviso[data-nivel="urgent"] b{color:var(--deuda)}
.v2-inicio-mimes-fila{display:flex;align-items:center;gap:12px;padding:12px 16px;color:inherit;text-decoration:none}
.v2-inicio-mensaje{padding:16px;border-radius:var(--r-tarjeta);background:var(--superficie);box-shadow:var(--sombra-1)}
.v2-inicio-mensaje h2{font:600 var(--fs-h2)/var(--lh-h2) var(--letra);color:var(--esp-relleno)}
.v2-inicio-mensaje p{margin-top:4px;font-style:italic}
.v2-inicio-mensaje .v2-inicio-firma{font-style:normal;font-size:13px;color:var(--tinta-2)}

@container marco (min-width: 768px){
  .v2-inicio{gap:20px;grid-template-columns:minmax(0,1fr) minmax(280px,360px);grid-auto-flow:row dense;align-items:start}
  .v2-inicio > *{grid-column:1 / -1}
  .v2-inicio > .v2-inicio-hero{grid-column:1;align-self:stretch}
  .v2-inicio > .v2-inicio-proximos{grid-column:2}
  /* El mes en números (compu): una franja con un dato al lado del otro. */
  .v2-inicio-dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0 24px}
  .v2-inicio-dl > div{flex-direction:column;align-items:flex-start;gap:4px;border-bottom:0;padding:4px 0}
  .v2-inicio-dl dt{font-size:13px;line-height:18px;color:var(--tinta-2)}
  .v2-inicio-dl dt small{display:inline;margin-left:4px}
  .v2-inicio-dl dd{font-size:20px;line-height:26px}

  .v2-inicio-hero .v2-hero-numero{font-size:48px;line-height:56px}
  .v2-inicio-hero .v2-hero-rotulo,.v2-inicio-hero .v2-hero-cuenta,.v2-inicio-hero .v2-hero-frase{font-size:15px;line-height:20px}
  .v2-inicio .v2-panel-cabeza h2{font-size:17px}
  .v2-inicio .v2-panel .v2-lista{background:none;box-shadow:none;border-radius:0}
  /* Próximos 7 días (compu): una línea por fila, el dato a la derecha. */
  .v2-inicio-prox{min-height:44px;padding:10px 0}
  .v2-inicio-prox-titulo{font:400 15px/20px var(--letra)}
  .v2-inicio-prox-meta{display:none}
  .v2-solo-compu-inline{display:inline}
  .v2-inicio-prox-valor{font:600 15px/20px var(--letra-numeros)}
  .v2-inicio-prox-fecha{display:inline;font-weight:400}
  .v2-inicio-fijos{margin-top:4px;font-size:13px}
  /* Para revisar (compu): filas compactas. */
  .v2-inicio-rev{padding:12px 0}
  .v2-inicio-rev-icono{width:32px;height:32px;border-radius:8px}
  .v2-inicio-rev-texto b{font-size:15px;line-height:20px}
  .v2-inicio-rev-meta,.v2-inicio-rev-pregunta{font-size:13px;line-height:18px}
  .v2-inicio-rev-lado{flex-direction:row;align-items:center;gap:20px}
  .v2-inicio-rev-monto{font-size:15px;line-height:20px}
  .v2-inicio-rev-accion{color:var(--accion);font-size:15px}
  .v2-inicio-aviso{padding:10px 0}
  .v2-inicio-mimes-fila{padding:10px 0;background:none;box-shadow:none}
}

/* =====================================================================
   MENÚ DE PERFIL (D1, P5-A T1): grupos Plata · Familia · Datos · Sistema,
   cada uno una tarjeta; cada renglón con su ícono en un cuadrado, el
   rótulo, una bajada en gris, el globito y la flechita. Igual en la hoja
   "perfil y más" y en la página /perfil.
   ===================================================================== */
.v2-menu-completo{margin-top:8px;padding-top:0;border-top:0}
.v2-menu-completo .v2-menu-grupo{margin:20px 4px 8px;font:600 15px/20px var(--letra);color:var(--tinta-2)}
.v2-menu-lista{border-radius:var(--r-tarjeta);background:var(--superficie);box-shadow:var(--sombra-1);overflow:hidden}
.v2-menu-lista > li + li{border-top:1px solid var(--separador)}
.v2-menu-completo .v2-menu-item{gap:12px;min-height:60px;padding:8px 12px;border-radius:0;font:600 16px/21px var(--letra)}
.v2-menu-icono{flex:none;width:36px;height:36px;border-radius:10px;background:var(--superficie-2);color:var(--tinta);
  display:flex;align-items:center;justify-content:center}
.v2-menu-texto{flex:1;min-width:0;display:flex;flex-direction:column}
.v2-menu-bajada{font:400 13px/18px var(--letra);color:var(--tinta-2)}
.v2-menu-chev{flex:none;color:var(--tinta-3)}
.v2-menu-completo .v2-menu-globito{margin-left:0}
.v2-perfil-cabeza{display:flex;align-items:center;gap:14px;padding:8px 4px 4px;color:var(--tinta);text-decoration:none}
.v2-perfil-cabeza-texto{flex:1;min-width:0;display:flex;flex-direction:column}
.v2-perfil-nombre{font:700 22px/28px var(--letra)}
.v2-inicial.grande{width:56px;height:56px;font-size:22px;flex:none}
.v2-perfil-tema{margin:20px 0 8px}
.v2-perfil-tema .v2-menu-grupo{margin:0 4px 8px;font:600 15px/20px var(--letra)}
.v2-perfil > .v2-menu-completo{margin-top:0}
.v2-perfil > .v2-menu-completo .v2-menu-grupo:first-child{margin-top:4px}
.v2-perfil > .v2-menu-grupo{margin:20px 4px 8px;font:600 15px/20px var(--letra);color:var(--tinta-2)}
.v2-perfil-cuenta{border-radius:var(--r-tarjeta);background:var(--superficie);box-shadow:var(--sombra-1);overflow:hidden}
.v2-perfil-cuenta > summary{list-style:none;cursor:pointer;min-height:60px;padding:8px 12px;gap:12px;font:600 16px/21px var(--letra);border-radius:0}
.v2-perfil-cuenta > summary::-webkit-details-marker{display:none}
.v2-perfil-cuenta[open] > summary .v2-menu-chev{transform:rotate(180deg)}
.v2-perfil-form{padding:8px 16px 16px;border-top:1px solid var(--separador)}
.v2-perfil-sub{margin:20px 0 8px;font:600 15px/20px var(--letra);color:var(--tinta-2)}
.v2-perfil-salir{margin-top:20px}
.v2-perfil-salir .v2-boton{background:var(--superficie);box-shadow:var(--sombra-1)}
.v2-perfil-version{margin:16px 0 8px;text-align:center;font-size:13px;line-height:18px;color:var(--tinta-2)}
@container marco (min-width: 768px){
  .v2-perfil{max-width:640px}
}

/* =====================================================================
   CONFIGURACIÓN (sistema D1, sin dibujo propio: P5-A T1). Bloques blancos
   con título; una fila por cosa, el estado a la derecha.
   ===================================================================== */
.v2-conf{display:grid;gap:20px;max-width:760px}
.v2-conf-zona{margin:8px 4px -8px;font:700 13px/18px var(--letra);letter-spacing:.3px;text-transform:uppercase;color:var(--tinta-2)}
.v2-conf-bloque{padding:16px;border-radius:var(--r-tarjeta);background:var(--superficie);box-shadow:var(--sombra-1)}
.v2-conf-titulo{margin:0 0 4px;font:600 var(--fs-h2)/var(--lh-h2) var(--letra)}
.v2-conf-filas{list-style:none;margin:0;padding:0}
.v2-conf-filas > li + li{border-top:1px solid var(--separador)}
.v2-conf-separado{margin-top:12px;border-top:1px solid var(--separador)}
.v2-conf-fila{display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 0;color:var(--tinta);text-decoration:none}
.v2-conf-fila form{flex:none}
.v2-conf-texto{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.v2-conf-texto b{font:600 16px/21px var(--letra)}
.v2-conf-texto > span{font-size:13px;line-height:18px;color:var(--tinta-2)}
.v2-conf-valor{flex:none;max-width:55%;text-align:right;font:600 15px/20px var(--letra-numeros);font-variant-numeric:tabular-nums}
.v2-conf-valor small,.v2-conf-valor .bien,.v2-conf-valor .mal{display:block;font:400 13px/18px var(--letra);color:var(--tinta-2)}
.v2-conf-valor.bien,.v2-conf-valor small.bien{color:var(--ingreso)}
.v2-conf-valor.mal,.v2-conf-valor small.mal{color:var(--revisar-texto)}
.v2-conf-acciones{min-height:0;padding-top:0;border-top:0!important}
.v2-conf-tema{flex-wrap:wrap}
.v2-conf-tema .v2-segmentado{flex:1 1 260px}
.v2-conf-banda{margin-top:12px}
.v2-conf-accion{margin-top:14px}
.v2-conf-accion .v2-ayuda{margin-top:8px}
.v2-conf-form{display:flex;flex-wrap:wrap;gap:0 12px;align-items:flex-end;margin-top:12px}
.v2-conf-form .v2-campo{flex:1 1 160px;margin-bottom:12px}
.v2-conf-form > .v2-boton{margin-bottom:12px}
.v2-conf-sub{margin:16px 0 4px;font:600 13px/18px var(--letra);color:var(--tinta-2)}
.v2-conf-detalle{margin-top:14px}
.v2-conf-detalle > summary{cursor:pointer;min-height:44px;display:flex;align-items:center;color:var(--accion);font:600 15px/20px var(--letra)}
.v2-conf-detalle ol{margin:4px 0 8px 20px;font-size:15px;line-height:22px;color:var(--tinta-2)}
.v2-conf-codigo{margin:8px 0;padding:10px 12px;border-radius:10px;background:var(--superficie-2);font:400 13px/18px ui-monospace,SFMono-Regular,Menlo,monospace;
  word-break:break-all;user-select:all}
.v2-conf .v2-error-pantalla{margin:8px 0}
.v2-conf .v2-nota{margin-top:10px}
.v2-conf-modos{margin:12px 0 16px}
.v2-conf-modos button[aria-pressed="true"]{font-weight:700}
/* El punto de color de cada espacio fuera del selector (Configuración › Mis espacios). */
.v2-conf .v2-espacio-punto{width:16px;height:16px}
.v2-conf [data-punto="familiar"]{--p:var(--familiar-relleno)}
.v2-conf [data-punto="emi"]{--p:var(--emi-relleno)}
.v2-conf [data-punto="jessi"]{--p:var(--jessi-relleno)}
.v2-conf [data-punto="negocio"]{--p:var(--negocio-relleno)}
.v2-conf [data-punto="personal"]{--p:var(--personal-relleno)}

/* =====================================================================
   CARGAR A MANO · EDITAR · VENDÍ DÓLARES (D1 "Edición" y "Dólares",
   P5-A T1): una tarjeta con los campos de D1; el monto grande con su
   moneda al lado.
   ===================================================================== */
.v2-form{max-width:560px}
.v2-form-tarjeta{padding:20px 16px 16px;border-radius:var(--r-tarjeta);background:var(--superficie);box-shadow:var(--sombra-1)}
.v2-form-otra{margin-bottom:16px}
.v2-form-aviso{margin-bottom:16px}
.v2-form-fijos{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.v2-form-valor{margin:0;padding:10px 12px;border-radius:var(--r-campo);background:var(--superficie-2);font:400 16px/22px var(--letra-numeros)}
.v2-form-monto-fila{display:flex;align-items:stretch;gap:8px}
.v2-form-monto input{flex:1;min-height:60px;font:700 30px/36px var(--letra-numeros);font-variant-numeric:tabular-nums}
.v2-form-moneda{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:64px;padding:0 12px;
  border-radius:var(--r-campo);background:var(--superficie-2);font:600 17px/22px var(--letra-numeros);color:var(--tinta)}
.v2-form-moneda:empty{display:none}
.v2-form .v2-casilla{margin-bottom:8px;font-size:15px;line-height:20px}
.v2-form-previa{margin:8px 0 0;padding:10px 12px;border-radius:10px;background:var(--superficie-2);font:600 15px/20px var(--letra-numeros);text-align:center}
.v2-form-venta{margin:12px 0 0}
.v2-form-enviar{margin-top:20px}
.v2-form-pie{margin-top:10px;text-align:center}
#tcField{margin-bottom:8px}
.v2-ir-a-espacio{max-width:480px;display:grid;gap:16px}

/* =====================================================================
   INGRESAR (P5-A T1, pedido de Emi): la tarjeta de D1 al centro, sin
   color de espacio (todavía no hay uno elegido): el botón principal va en
   tinta, como el botón del agente. La página scrollea (el body de v2 es fijo).
   ===================================================================== */
body.v2-login{position:static;overflow:auto;min-height:100%;display:flex;align-items:center;justify-content:center;
  padding:max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom))}
.v2-login-tarjeta{width:100%;max-width:400px;padding:32px 24px 24px;border-radius:var(--r-xl, 22px);background:var(--superficie);box-shadow:var(--sombra-1)}
.v2-login-logo{display:block;width:64px;height:64px;margin:0 auto 16px;border-radius:15px}
.v2-login-titulo{margin:0;text-align:center;font:700 var(--fs-titulo, 30px)/36px var(--letra)}
.v2-login-bajada{margin:6px 0 24px;text-align:center;color:var(--tinta-2);font-size:15px;line-height:20px}
.v2-login-aviso{display:flex;gap:8px;align-items:flex-start;margin-bottom:16px;padding:10px 12px;border-radius:12px;font:600 15px/20px var(--letra)}
.v2-login-aviso.mal{background:var(--deuda-fondo);color:var(--deuda)}
.v2-login-aviso.bien{background:var(--superficie-2);color:var(--ingreso)}
.v2-login-aviso .v2-icono{flex:none}
.v2-login-passkey{min-height:52px}
.v2-login-msg{min-height:20px;margin:8px 0 0;text-align:center;color:var(--tinta-2);font-size:13px;line-height:18px}
.v2-login-msg:empty{min-height:0;margin:0}
.v2-login-separador{display:flex;align-items:center;gap:12px;margin:20px 0;color:var(--tinta-2);font-size:13px;line-height:18px}
.v2-login-separador::before,.v2-login-separador::after{content:"";flex:1;height:1px;background:var(--separador)}
.v2-login-entrar{min-height:52px;margin-top:4px;background:var(--tinta);color:var(--superficie)}
/* /perfil: el encabezado es el del dibujo (inicial + nombre), no el común. El h1 común queda para lectores de pantalla. */
.v2-contenido:has(.v2-perfil) .v2-encabezado{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.v2-perfil > .v2-perfil-cabeza{padding:4px 0 8px}
.v2-form-revise{margin-top:12px;padding:10px 12px;border-radius:12px;background:var(--revisar-fondo);color:var(--revisar-texto)}
.v2-form-revise .v2-casilla{margin:0;font-weight:600}
.v2-form-revise .v2-lote-motivo{margin-top:4px}

/* =====================================================================
   ANÁLISIS (D1, P5-A T2): Día · Semana · Mes, el gráfico de barras (SVG a
   mano, con el color del espacio) y "Por cuenta". En la compu, el gráfico
   a la izquierda y "Por cuenta" a la derecha.
   ===================================================================== */
.v2-analisis{display:grid;gap:16px}
.v2-analisis-vistas{max-width:420px}
.v2-analisis-h2{font:600 var(--fs-h2)/var(--lh-h2) var(--letra);margin:0}
.v2-analisis-bajada{margin:2px 0 12px;font-size:13px;line-height:18px;color:var(--tinta-2)}
.v2-analisis-grafico,.v2-analisis-cuentas{padding:16px;border-radius:var(--r-tarjeta);background:var(--superficie);box-shadow:var(--sombra-1)}
.v2-barras-svg{display:block;width:100%;height:160px}
.v2-barras-svg rect{fill:var(--esp-relleno)}
.v2-barras-eje{position:relative;height:20px;margin-top:6px;font:400 13px/18px var(--letra-numeros);color:var(--tinta-2)}
.v2-barras-eje span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.v2-analisis-cuentas .v2-barras{padding:0;box-shadow:none;background:none;margin-top:8px}
.v2-barras-monto small{color:var(--tinta-2);font-size:13px;margin-left:4px}
.v2-analisis .v2-panel-vacio{box-shadow:none;padding:8px 0}
@container marco (min-width: 768px){
  .v2-analisis{grid-template-columns:minmax(0,1fr) minmax(280px,380px);align-items:start}
  .v2-analisis-vistas,.v2-analisis-meses{grid-column:1 / -1}
  .v2-analisis-grafico{padding:16px}
  .v2-barras-svg{height:240px}
}
/* "perfil y más" de la barra lateral es un enlace desde el 02/10: sin subrayado, como la fila de Tema. */
a.v2-lateral-fila{text-decoration:none;color:inherit}

/* =====================================================================
   REPORTES (sistema D1, sin dibujo propio: P5-A T2). La lista como las
   filas del menú; cada reporte con el período (chips y rango), la franja
   de números, la nota y la tabla de la computadora de D1.
   ===================================================================== */
.v2-reportes{display:grid;gap:16px;max-width:760px}
.v2-reportes-pie{display:grid;gap:12px;justify-items:start}
.v2-reporte{display:grid;gap:16px;min-width:0}
.v2-reporte-periodo{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:flex-end;justify-content:space-between}
.v2-reporte-rango{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end}
.v2-reporte-rango .v2-campo{margin:0;min-width:150px}
.v2-reporte-rango .v2-campo label{font-size:12px}
.v2-reporte-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:0}
.v2-reporte-kpis > div{padding:14px 16px;border-radius:var(--r-tarjeta);background:var(--superficie);box-shadow:var(--sombra-1)}
.v2-reporte-kpis dt{font:600 13px/18px var(--letra);color:var(--tinta-2)}
.v2-reporte-kpis dd{margin:4px 0 0;font:700 22px/28px var(--letra-numeros);font-variant-numeric:tabular-nums}
/* La línea de abajo es un segundo <dd> (un <p> no vale dentro de un <dl>: axe, T2). */
.v2-reporte-kpis dd.v2-kpi-nota{margin:2px 0 0;font:400 13px/18px var(--letra);color:var(--tinta-2)}
.v2-reporte-nota{padding:12px 14px;border-radius:12px;background:var(--superficie-2);color:var(--tinta);font-size:15px;line-height:21px}
.v2-reporte-nota ul{margin:6px 0 0 18px;color:var(--tinta-2);font-size:13px;line-height:19px}
.v2-reporte-filas{margin:0 0 -8px;font-size:13px;line-height:18px;color:var(--tinta-2);text-align:right}
.v2-reporte-h2{font:600 var(--fs-h2)/var(--lh-h2) var(--letra);margin:8px 0 -4px}
.v2-reporte-tabla{max-height:none;box-shadow:var(--sombra-1)}
.v2-reporte-tabla td.v2-reporte-texto{white-space:normal;min-width:140px}
.v2-reporte-tabla td.v2-reporte-vacio{color:var(--tinta-3)}
.v2-reporte-tabla tfoot td{font-weight:700;border-top:2px solid var(--separador);border-bottom:0;background:var(--superficie)}
.v2-reporte-sin-datos{text-align:center!important;color:var(--tinta-2);padding:32px!important;white-space:normal!important}
.v2-etiqueta.v2-etiqueta-mal{background:var(--deuda-fondo);color:var(--deuda)}
.v2-reporte-otros{max-width:560px}
.v2-reporte-otros .v2-menu-grupo{margin:8px 4px 8px;font:600 15px/20px var(--letra);color:var(--tinta-2)}
.v2-reportes-lista .v2-menu-item{gap:12px;min-height:60px;padding:10px 12px;border-radius:0;color:var(--tinta);text-decoration:none;font:600 16px/21px var(--letra)}
.v2-reportes-lista .v2-menu-bajada{margin-top:2px}

/* ENVIAR DINERO (sistema D1, P5-A T2): bloques de Configuración. */
.v2-enviar{display:grid;gap:20px;max-width:640px}
.v2-enviar-privado{margin:0}
.v2-enviar-recibida{padding:4px 0 16px;border-bottom:1px solid var(--separador)}
.v2-enviar-recibida:last-child{border-bottom:0;padding-bottom:0}
.v2-enviar-recibida form{display:grid;gap:4px}
.v2-enviar-recibida .v2-boton{justify-self:start}
.v2-enviar-form{margin-top:8px}
.v2-enviar-monto{font:600 16px/21px var(--letra-numeros);font-variant-numeric:tabular-nums;white-space:nowrap}
.v2-enviar-lado{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.v2-enviar-lado form{display:contents}
.v2-enviar-bloque{padding:16px;border-radius:var(--r-tarjeta);background:var(--superficie);box-shadow:var(--sombra-1)}
.v2-enviar-bloque .v2-panel-vacio{padding:4px 0;box-shadow:none;background:none}

/* =====================================================================
   FIJOS DEL MES (sistema D1, P5-A T2): mes, franja de totales, topes,
   filtros, la tabla de la computadora con sus acciones en palabras y las
   hojas de pagar y de alta/edición (campos de D1).
   ===================================================================== */
.v2-fijos{display:grid;gap:16px;min-width:0}
.v2-fijos-topes{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.v2-fijos-topes .v2-progreso{background:var(--superficie-2)}
.v2-fijos-topes .v2-progreso-relleno{background:var(--esp-relleno)}
.v2-fijos-topes .v2-progreso.pasado .v2-progreso-relleno{background:var(--deuda)}
.v2-fijos-filtros{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.v2-fijos-filtros .v2-selector-fila{max-width:220px}
.v2-fijos-cuenta{margin-left:auto;font-size:13px;color:var(--tinta-2)}
.v2-fijos-concepto b{display:block}
.v2-fijos-nota{display:block;margin-top:4px;font-size:13px;line-height:18px;color:var(--tinta-2)}
.v2-fijos-atraso{display:block;font-size:12px;color:var(--deuda)}
.v2-fijos-acciones{text-align:right;white-space:nowrap}
.v2-fijos-acciones form{display:inline}
.v2-fijos-acciones .v2-boton{min-height:36px;font-size:14px;padding:0 10px}
.v2-fijos-tabla th a{color:inherit;text-decoration:none}
.v2-fijos-tabla th .ar{margin-left:4px;color:var(--tinta-3)}
.v2-fijos-hoja{max-width:560px}
.v2-fijos-grilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.v2-fijos-form label{display:block;font:600 13px/18px var(--letra);color:var(--tinta);margin:12px 0 6px}
.v2-fijos-form .v2-casilla label{margin:0;font-weight:400;font-size:15px}
.v2-fijos-form input:not([type="checkbox"]):not([type="radio"]),.v2-fijos-form select,.v2-fijos-form textarea{display:block;width:100%;min-height:44px;padding:10px 12px;
  border:1px solid var(--campo-borde);border-radius:var(--r-campo);background:var(--superficie-2);color:var(--tinta);font:400 16px/22px var(--letra)}
.v2-fijos-form .v2-casilla{margin-top:8px}
/* Fijos: las notas, a dos renglones (la completa en el title); "Más" despliega el resto de las acciones. */
.v2-fijos-nota{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:260px}
.v2-fijos-concepto{min-width:200px}
.v2-fijos-acciones{display:table-cell;text-align:right;vertical-align:middle}
.v2-fijos-acciones > .v2-boton,.v2-fijos-acciones > form{vertical-align:middle;margin-left:4px}
.v2-fijos-mas{position:relative;display:inline-block;vertical-align:middle;margin-left:4px;text-align:left}
.v2-fijos-mas > summary{list-style:none;cursor:pointer}
.v2-fijos-mas > summary::-webkit-details-marker{display:none}
.v2-fijos-mas-menu{position:absolute;right:0;top:calc(100% + 4px);z-index:5;display:flex;flex-direction:column;align-items:stretch;min-width:150px;
  padding:6px;border-radius:12px;background:var(--superficie);box-shadow:var(--sombra-flota)}
.v2-fijos-mas-menu .v2-boton,.v2-fijos-mas-menu form{display:flex;width:100%;justify-content:flex-start}
.v2-fijos-tabla{overflow:visible}
/* INGRESOS PLANIFICADOS (sistema D1, P5-A T2). */
.v2-ingresos{display:grid;gap:16px;min-width:0}
.v2-ingresos-ok{background:var(--superficie-2);color:var(--ingreso)}
.v2-ingresos-confirmar{max-width:760px}
.v2-ingresos-confirmar .v2-casilla{flex-wrap:wrap;gap:8px 10px;margin-top:12px}
.v2-ingresos-reparto{margin-top:12px;padding:12px 14px;border:1px solid var(--separador);border-radius:12px}
.v2-ingresos-aporte,.v2-ingresos-historica{margin-top:18px;padding-top:14px;border-top:1px solid var(--separador)}
.v2-ingresos-confirmar input[name="applied_rate"]{margin-top:8px}
.v2-fijos-form input[type="radio"],.v2-fijos-form input[type="checkbox"]{width:20px;height:20px;flex:none;accent-color:var(--accion)}
.v2-ingresos-confirmar .v2-casilla label{margin:0 12px 0 0;font-weight:600}
/* CONCILIACIÓN (C1, REPORTE-V2 §19): el resumen leído contra lo cargado. */
.v2-concilia{display:flex;flex-direction:column;gap:16px;max-width:1080px}
.v2-concilia .v2-panel{padding:16px}
/* R4 (REVISION-PANEL #21): las tablas usan el ancho; el texto corrido guarda el ancho de lectura (a 1920 un renglón llegaba a 190 caracteres). */
.v2-concilia p:not(.v2-banda){max-width:var(--ancho-lectura,720px)}
.v2-concilia .v2-conf-titulo{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.v2-banda.v2-banda-mal{background:var(--deuda-fondo);color:var(--deuda)}
.v2-concilia-control .v2-conf-titulo .v2-icono{color:var(--ingreso)}
.v2-concilia-control.mal .v2-conf-titulo .v2-icono{color:var(--deuda)}
.v2-concilia-controles{margin:8px 0}
.v2-concilia-releer{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.v2-concilia-tarjeta{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.v2-concilia-tarjeta .v2-campo{flex:1 1 260px;margin:0}
.v2-concilia-grupo .v2-tabla-caja{max-height:none}
.v2-concilia-fechas{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:8px 0 16px}
.v2-concilia-fechas dt{font:600 13px/18px var(--letra);color:var(--tinta-2)}
.v2-concilia-fechas dd{margin:2px 0 0;font:600 16px/22px var(--letra-numeros);font-variant-numeric:tabular-nums}
.v2-concilia-h3{font:600 15px/20px var(--letra);margin:16px 0 8px}
.v2-concilia-cuotas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px}
.v2-concilia-cuotas li{display:flex;justify-content:space-between;gap:8px;padding:8px 12px;border-radius:10px;background:var(--superficie-2)}
.v2-concilia-cuotas b{font-family:var(--letra-numeros);font-variant-numeric:tabular-nums}
.v2-sin-corte{white-space:nowrap}
.v2-concilia-otros{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 14px;border-radius:12px;background:var(--superficie);box-shadow:var(--sombra-1)}
/* El aviso "esto es de la compu" (SoloDesktop) con D1. */
.v2-solo-compu-aviso{display:flex;flex-direction:column;gap:16px;max-width:560px}
.v2-solo-compu-aviso .v2-panel{padding:16px}
/* =====================================================================
   AGENTE · el chat de siempre con D1 (Plan v3, T3a). La única pantalla
   que no scrollea entera: la barra de escritura queda fija abajo (arriba
   de la barra de secciones en el celular) y sólo scrollean los mensajes.
   ===================================================================== */
.v2-contenido:has(.v2-chat){display:flex;flex-direction:column;overflow:hidden;padding-bottom:calc(var(--tabbar-h, 88px) + 8px)}
html.teclado .v2-contenido:has(.v2-chat){padding-bottom:6px}
.v2-chat{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px;max-width:820px;width:100%}
.v2-chat-mensajes{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;
  display:flex;flex-direction:column;padding:4px 2px 8px}
.v2-chat-anteriores{text-align:center;margin-bottom:8px}
.v2-chat .msg{max-width:min(85%, 560px);margin:0 0 10px;padding:10px 14px;border-radius:18px;white-space:pre-wrap;overflow-wrap:anywhere;
  font:400 16px/22px var(--letra)}
.v2-chat .msg.bot{align-self:flex-start;background:var(--superficie);color:var(--tinta);border-bottom-left-radius:6px;box-shadow:var(--sombra-1)}
.v2-chat .msg.me{align-self:flex-end;margin-left:auto;background:var(--esp-relleno);color:var(--esp-texto, #fff);border-bottom-right-radius:6px}
.v2-chat .pcard{margin:0 0 10px}
.v2-chat .chip{display:inline-block;max-width:85%;padding:7px 12px;border-radius:14px;font:600 13px/18px var(--letra);background:var(--superficie-2);color:var(--tinta)}
.v2-chat .chip.g{background:color-mix(in srgb, var(--ingreso) 16%, transparent);color:var(--ingreso)}
.v2-chat-enlace{font:600 14px/20px var(--letra);color:var(--accion);text-decoration:none}
.v2-chat-adjunto{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.v2-chat-adjunto img{max-width:96px;border-radius:12px;display:block}
.v2-chat-adjunto #docPreview{font:600 14px/20px var(--letra)}
.v2-chat-espacio{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0;font-size:13px;line-height:18px;color:var(--tinta-2)}
.v2-chat-espacio .espchip.chico{min-height:24px;padding:0 10px;font:600 13px/18px var(--letra);border-radius:999px;background:var(--esp-lavado);color:var(--tinta)}
.v2-chat-barra{display:flex;align-items:center;gap:8px;padding:6px;border-radius:26px;background:var(--superficie);box-shadow:var(--sombra-1)}
.v2-chat-barra input[type="text"]{flex:1;min-width:0;min-height:40px;border:0;background:transparent;color:var(--tinta);font:400 17px/22px var(--letra);padding:0 4px}
.v2-chat-barra input[type="text"]:focus{outline:none}
.v2-chat-barra:focus-within{box-shadow:0 0 0 2px var(--accion)}
.v2-chat-enviar{flex:none;width:40px;height:40px;border-radius:50%;border:0;background:var(--accion);color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.v2-chat-enviar:disabled{opacity:.5;cursor:default}
.v2-chat-pie{margin:0;font-size:12px;line-height:16px;color:var(--tinta-3)}
.v2-chat-pie .credito-estimado{display:block;margin-top:2px}
html.teclado .v2-chat-pie,html.teclado .v2-chat-espacio{display:none}
@container marco (min-width: 768px){
  .v2-contenido:has(.v2-chat){padding-bottom:24px}
}
/* (El menú lateral en acordeón se fue el 08/10: la barra lateral es plana.
   Los grupos de la compu viven en el bloque MENÚS al final de este archivo.) */
/* OBJETIVOS Y FUTURO (Plan v3, N1). */
.v2-futuro{display:flex;flex-direction:column;gap:16px;max-width:1080px}
.v2-futuro .v2-panel{padding:16px}
.v2-futuro-frase{margin:4px 0 12px;font:600 20px/26px var(--letra);color:var(--tinta)}
.v2-futuro-grafico{margin:12px 0 4px}
.v2-futuro-grafico svg{display:block;width:100%;height:160px}
.v2-futuro-grafico .linea{fill:none;stroke:var(--esp-relleno);stroke-width:3;vector-effect:non-scaling-stroke}
.v2-futuro-grafico .cero{stroke:var(--tinta-3);stroke-width:1;stroke-dasharray:4 4;vector-effect:non-scaling-stroke}
.v2-futuro-vista{max-width:360px;margin:8px 0 4px}
.v2-futuro-h3{font:600 16px/22px var(--letra);margin:16px 0 4px}
.v2-futuro-escenarios{list-style:none;margin:8px 0;padding:0;display:flex;flex-direction:column;gap:6px}
.v2-futuro-escenarios li{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 12px;border-radius:12px;background:var(--superficie-2)}
.v2-futuro-escenario-texto{flex:1;min-width:200px;display:flex;flex-direction:column}
.v2-futuro-escenario-texto span{font-size:13px;color:var(--tinta-2)}
.v2-futuro-nuevo-escenario > summary{list-style:none;cursor:pointer}
.v2-futuro-nuevo-escenario > summary::-webkit-details-marker{display:none}
.v2-futuro-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;align-items:end;margin-top:8px}
.v2-hoja .v2-futuro-form{grid-template-columns:1fr}
.v2-futuro-plan{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.v2-futuro-objetivos{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.v2-futuro-objetivo{padding:14px;border-radius:12px;background:var(--superficie-2);display:flex;flex-direction:column;gap:8px}
.v2-futuro-objetivo-cabeza{display:flex;align-items:center;gap:10px}
.v2-futuro-objetivo-nombre{flex:1;min-width:0;display:flex;flex-direction:column}
.v2-futuro-objetivo-nombre span{font-size:13px;color:var(--tinta-2)}
.v2-futuro-barra{height:10px;border-radius:999px;background:var(--pista);overflow:hidden}
.v2-futuro-barra > span{display:block;height:100%;border-radius:999px;background:var(--esp-relleno)}
.v2-futuro-objetivo-numeros{margin:0;font-family:var(--letra-numeros);font-variant-numeric:tabular-nums}
.v2-futuro-objetivo-acciones{display:flex;gap:6px;flex-wrap:wrap}
.v2-futuro-sugerencias{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.v2-futuro-sugerencias li{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:12px;background:var(--superficie-2)}
.v2-futuro-sugerencias li span{color:var(--tinta-2)}
/* Inicio · ¿Cuánto nos dura la plata? (Plan v3, N1): en la columna ancha. */
.v2-inicio-futuro{padding:16px}
.v2-inicio-futuro-frase{margin:4px 0 8px;font:600 17px/23px var(--letra)}
.v2-inicio-futuro-meta{margin:0 0 6px}
@container marco (min-width: 768px){ .v2-inicio > .v2-inicio-futuro{grid-column:1} }
.v2-futuro-form [hidden]{display:none !important}
.v2-futuro-plan .v2-casilla{display:flex;align-items:center;gap:8px;font:400 15px/20px var(--letra)}
.v2-futuro-plan input[type="radio"]{display:inline-block;width:20px;height:20px;min-height:0;padding:0;margin:0;flex:none;accent-color:var(--accion)}
.v2-hoja .v2-futuro-form{max-height:min(80vh, 720px);overflow-y:auto}
/* LA AGENDA ÚNICA (Plan v3, T3b). */
.v2-agenda{display:flex;flex-direction:column;gap:16px;max-width:1080px}
.v2-agenda .v2-panel{padding:16px}
.v2-agenda-vistas{max-width:480px}
.v2-agenda-dia{font:600 14px/20px var(--letra);color:var(--tinta-2);margin:12px 0 4px}
.v2-agenda-dia:first-of-type{margin-top:0}
.v2-agenda-lista{list-style:none;margin:0;padding:0}
.v2-agenda-item{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 0;border-bottom:1px solid var(--separador)}
.v2-agenda-lista > .v2-agenda-item:last-child{border-bottom:0}
.v2-agenda-hora{flex:none;width:44px;font:600 14px/20px var(--letra-numeros);font-variant-numeric:tabular-nums;color:var(--tinta-2)}
.v2-agenda-texto{flex:1;min-width:160px;display:flex;flex-direction:column}
.v2-agenda-texto > span{font-size:13px;line-height:18px;color:var(--tinta-2)}
.v2-agenda-acciones{display:flex;gap:2px;flex-wrap:wrap}
.v2-agenda-acciones form{display:inline}
.v2-agenda-apagado .v2-agenda-texto b{color:var(--tinta-3);text-decoration:line-through}
.v2-agenda-vencido .v2-agenda-hora{color:var(--deuda)}
.v2-agenda-grilla{display:flex;flex-direction:column;gap:4px}
.v2-agenda-semana{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.v2-agenda-cabeza{font:600 12px/16px var(--letra);color:var(--tinta-3);text-align:center;text-transform:uppercase}
.v2-agenda-celda{position:relative;display:flex;flex-direction:column;gap:2px;min-height:48px;padding:6px;border-radius:10px;background:var(--superficie);
  color:var(--tinta);text-decoration:none;overflow:hidden}
.v2-agenda-celda.fuera{background:var(--superficie-2)}
.v2-agenda-celda.fuera .v2-agenda-num{color:var(--tinta-2)}
.v2-agenda-celda.hoy .v2-agenda-num{color:var(--esp-relleno);font-weight:700}
.v2-agenda-celda[aria-current="date"]{box-shadow:0 0 0 2px var(--accion)}
.v2-agenda-num{font:500 14px/18px var(--letra-numeros)}
.v2-agenda-mini{display:none;font-size:12px;line-height:16px;color:var(--tinta-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v2-agenda-punto{position:absolute;left:50%;bottom:6px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--esp-relleno)}
.v2-agenda-form{display:flex;flex-direction:column;gap:12px}
.v2-agenda-edicion{max-width:640px}
@container marco (min-width: 768px){
  .v2-agenda-celda{min-height:92px}
  .v2-agenda-mini{display:block}
  .v2-agenda-punto{display:none}
}
/* MEJORA CONTINUA (Plan v3, A1). */
.v2-mejora{display:flex;flex-direction:column;gap:16px;max-width:1080px}
.v2-mejora .v2-panel{padding:16px}
.v2-mejora-reporte{padding:10px 0;border-bottom:1px solid var(--separador)}
.v2-mejora-reporte:last-child{border-bottom:0}
.v2-mejora-reporte p{margin:4px 0}
.v2-mejora-h3{font:600 15px/20px var(--letra);margin:0 0 4px}
.v2-concilia-acciones{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px}
/* =====================================================================
   T4 · NADA VIEJO (sistema D1, PLAN-V3 §6): Plan de cuentas, Presupuesto,
   formulario de cajas, Panel financiero, Massi, Llaves de acceso,
   Propuestas, Avisos, Actividad del agente y "sin espacio".
   ===================================================================== */
/* Plan de cuentas */
.v2-plan-banda a{font-weight:600}
.v2-plan-tabla td{vertical-align:middle}
.v2-plan-codigo{font:400 13px/18px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--tinta-2)}
.v2-plan-nombre b{font-weight:600}
.v2-arbol .n4{padding-left:88px}
.v2-plan-contexto td{color:var(--tinta-2)}
.v2-plan-contexto .v2-plan-nombre b{font-weight:400}
.v2-plan-tope-form{display:inline-flex;align-items:center;justify-content:flex-end;gap:6px}
.v2-plan-tope-monto{width:104px;padding-right:10px;text-align:right;font-family:var(--letra-numeros)}
.v2-plan-tope-moneda{width:auto}
.v2-plan-pendiente{color:var(--revisar-texto)}
/* Presupuesto del mes */
.v2-presupuesto-barra{min-width:170px}
.v2-presupuesto-barra .v2-progreso{display:inline-block;width:110px;margin:0 8px 0 0;vertical-align:middle;background:var(--superficie-2)}
.v2-presupuesto-barra .v2-progreso-relleno{background:var(--esp-relleno)}
.v2-presupuesto-barra .v2-progreso.pasado .v2-progreso-relleno{background:var(--deuda)}
.v2-presupuesto-pct{font:400 13px/18px var(--letra-numeros);color:var(--tinta-2)}
/* Formulario de cajas (alta y edición, también en el celular) */
.v2-form-fijos > .v2-campo{margin-bottom:0}
.v2-caja-tarjeta{margin-bottom:16px}
.v2-caja-ayuda{margin:0 0 16px}
/* Panel financiero */
.v2-panelf-grilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr));gap:16px;align-items:start}
.v2-panelf .v2-conf-bloque{min-width:0}
.v2-panelf .v2-conf-titulo{margin-bottom:10px}
.v2-panelf-fecha{font-weight:400;color:inherit;opacity:.8}
.v2-panelf-fondo + .v2-panelf-fondo{margin-top:16px;padding-top:16px;border-top:1px solid var(--separador)}
.v2-panelf-fondo-cabeza{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;font-size:15px;line-height:20px}
.v2-panelf-fondo-cabeza b{font:700 17px/22px var(--letra-numeros);font-variant-numeric:tabular-nums}
.v2-panelf-piso{margin-left:auto;font-size:13px;color:var(--tinta-2)}
.v2-panelf-fondo .v2-progreso{background:var(--superficie-2)}
.v2-panelf-fondo .v2-progreso.pasado .v2-progreso-relleno{background:var(--deuda)}
.v2-panelf-piezas{line-height:20px}
.v2-panelf-editar{margin-top:4px}
.v2-panelf-sem{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}
.v2-panelf-sem p{font-size:15px;line-height:20px}
.v2-etiqueta.v2-panel-bien{background:var(--superficie-2);color:var(--ingreso);font-weight:600}
.v2-panelf-tabla{margin-top:8px}
.v2-panelf-tabla th[scope="row"]{position:static;background:transparent;font:400 14px/20px var(--letra);color:var(--tinta);text-transform:none;letter-spacing:0;white-space:normal;padding:10px 12px;border-bottom:1px solid var(--separador)}
.v2-panelf-tabla + .v2-nota,.v2-panelf-mini + .v2-panelf-tabla{margin-top:10px}
.v2-panelf-mini{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));margin-top:4px}
.v2-panelf-mini > div{box-shadow:none;background:var(--superficie-2)}
.v2-panelf-graf{display:block;width:100%;height:190px}
.v2-panelf-graf .cero{stroke:var(--separador);stroke-width:1}
.v2-panelf-graf .b{fill:var(--ingreso)}
.v2-panelf-graf .b.neg{fill:var(--deuda)}
.v2-panelf-graf .ac{fill:none;stroke:var(--accion);stroke-width:2}
.v2-panelf-graf .et{font-size:11px;fill:var(--tinta-2)}
.v2-panelf-supuestos ul{margin:4px 0 0 18px}
.v2-panelf-opinion{margin-top:12px;padding:12px 14px;border-radius:12px;background:var(--superficie-2);font-size:15px;line-height:22px;white-space:pre-line}
@media (max-width:600px){.v2-panelf-graf{height:160px}}
/* Massi (una sola pantalla para el celular y la compu) */
.v2-massi .v2-vacio{display:flex;flex-direction:column;align-items:center;gap:12px}
.v2-massi .v2-vacio > .v2-icono{width:32px;height:32px;color:var(--tinta-2)}
.v2-massi-agenda{margin-top:8px;padding:0}
.v2-massi-mes .v2-conf-titulo{margin:0 4px 10px}
/* Llaves de acceso, y su renglón en Perfil › Tu cuenta */
.v2-llaves .v2-conf-fila > .v2-icono{flex:none;color:var(--tinta-2)}
.v2-llaves-msg{margin-top:10px;text-align:center}
.v2-perfil-llaves{margin-bottom:12px}
.v2-perfil-llaves .v2-menu-item{gap:12px;min-height:60px;padding:8px 12px;border-radius:0;font:600 16px/21px var(--letra)}
/* Propuestas pendientes */
.v2-propuestas-datos{white-space:normal;word-break:break-all;font:400 13px/18px ui-monospace,SFMono-Regular,Menlo,monospace}
/* Avisos del agente y Actividad */
.v2-aviso-cabeza{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.v2-aviso-cabeza .v2-conf-titulo{flex:1 1 220px;margin:0}
.v2-aviso-cuando{font-size:13px;color:var(--tinta-2)}
.v2-aviso-cabeza form{margin-left:auto}
.v2-aviso-cuerpo{margin-top:8px;font-size:15px;line-height:22px;white-space:pre-line}
.v2-aviso.urgente{box-shadow:inset 3px 0 0 var(--deuda)}
.v2-aviso.atencion{box-shadow:inset 3px 0 0 var(--revisar-texto)}
.v2-aviso-ir{margin-top:12px}
.v2-avisos .v2-vacio p{margin:0 0 6px}
.v2-avisos-zona{margin:12px 4px 8px}
.v2-actividad-tool{font:400 13px/18px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--tinta-2)}
.v2-actividad-espacios{max-width:560px}
/* Sin espacio */
.v2-sin-espacio{display:flex;flex-direction:column;align-items:center;gap:10px}
.v2-sin-espacio > .v2-icono{width:32px;height:32px;color:var(--tinta-2)}
/* Para revisar · "¿Es de otro espacio?" (Plan v4 §1). */
.v2-revisar-otro{margin-top:4px}
.v2-revisar-otro > summary{list-style:none;cursor:pointer;font-size:13px}
.v2-revisar-otro > summary::-webkit-details-marker{display:none}
.v2-revisar-otro-form{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:6px}
/* ANÁLISIS · resumen y torta "En qué gastamos" (Plan v4 §3).
   SERIES DE LOS GRÁFICOS (panel de diseño, 03/10, docs/v2/PANEL-DISENO.md):
   10 colores SIN REPETIR (antes la serie 1 era el color de acción y la 3
   el mismo azul). Orden pensado para que dos vecinos nunca se parezcan:
   azul, naranja, verde, magenta, cian, rojo, violeta, ocre, oliva, gris.
   Medidos contra la superficie del bloque: claro ≥ 4,99:1 (#FFFFFF),
   oscuro ≥ 6,82:1 (#1A1A1E); pide 3:1 (WCAG 1.4.11). Los mismos para las
   barras, la torta y los abanicos del Plan v5 (§4 bis). */
:root{--serie-1:#1D5BC9;--serie-2:#C2410C;--serie-3:#0B7A5A;--serie-4:#94308F;--serie-5:#0E7490;--serie-6:#B42318;
  --serie-7:#6D28D9;--serie-8:#8A5A00;--serie-9:#4D7C0F;--serie-10:#5E5D64}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--serie-1:#76A7FF;--serie-2:#FF9F5A;--serie-3:#3FC98A;--serie-4:#E291DD;--serie-5:#4DD0E1;--serie-6:#FF7A6E;--serie-7:#B39DFF;--serie-8:#E0B04B;--serie-9:#A3D65C;--serie-10:#A3A3AB}}
:root[data-theme="dark"]{--serie-1:#76A7FF;--serie-2:#FF9F5A;--serie-3:#3FC98A;--serie-4:#E291DD;--serie-5:#4DD0E1;--serie-6:#FF7A6E;--serie-7:#B39DFF;--serie-8:#E0B04B;--serie-9:#A3D65C;--serie-10:#A3A3AB}
.v2-analisis-resumen{margin:0 0 4px}
.v2-analisis-torta{display:flex;justify-content:center;margin:4px 0 12px}
.v2-analisis-torta svg{width:min(220px,60vw);height:auto;transform:rotate(0deg)}
.v2-torta-fondo{fill:none;stroke:var(--pista);stroke-width:6}
.v2-torta-total{font:700 3.1px/1 var(--letra-numeros);fill:var(--tinta);text-anchor:middle}
.v2-torta-rotulo{font:400 2.8px/1 var(--letra);fill:var(--tinta-2);text-anchor:middle}
.v2-torta-punto{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:baseline}

/* =====================================================================
   SISTEMA DE MAQUETACIÓN V4 (docs/v2/DISENO-SISTEMA-V4.md, 03/10).
   Comparado con Apple (HIG), Linear, Stripe, Things, Copilot Money,
   Monarch, Mercury y Refactoring UI. La PALETA NO SE TOCA: esto es
   maquetación, espacios, tipografía y profundidad. Va al final a propósito:
   se aplica a todas las pantallas a la vez (arreglar de a una deja todo
   desparejo, como advierte Linear).
   ===================================================================== */
:root{--ancho-tablero:2240px;--ancho-lectura:720px;--r-tarjeta:16px;--fs-title:28px;--lh-title:34px}

/* 1 · Dos anchos, y el encabezado alineado con el contenido. */
.v2-contenido > *{width:100%;max-width:var(--ancho-tablero);margin-inline:0}
.v2-contenido:has(.v2-form,.v2-conf,.v2-perfil,.v2-enviar,.v2-agenda-edicion,.v2-solo-compu-aviso,.v2-ir-a-espacio,.v2-fijos-hoja) > *{max-width:var(--ancho-lectura)}
.v2-contenido:has(.v2-chat) > *{max-width:880px}
.v2-concilia,.v2-futuro,.v2-agenda,.v2-mejora,.v2-reportes,.v2-ingresos-confirmar,.v2-perfil,.v2-conf,.v2-form,.v2-enviar,
.v2-agenda-edicion,.v2-solo-compu-aviso,.v2-ir-a-espacio,.v2-chat{max-width:none}
.v2-enlaces,.v2-reporte-otros{max-width:var(--ancho-lectura)}

/* 2 · Un solo nivel de bloque, sin sombra: la profundidad la da el gris
   del fondo contra la superficie (como las listas agrupadas de iOS). La
   sombra queda para lo que flota (hojas, el botón del agente, avisos). */
:root:root:root{--sombra-1:none}
@media (prefers-color-scheme: dark){:root:root:root:not([data-theme="light"]){--sombra-1:0 0 0 1px rgba(255,255,255,.06)}}
:root:root:root[data-theme="dark"]{--sombra-1:0 0 0 1px rgba(255,255,255,.06)}
.v2-panel .v2-tabla-caja,.v2-conf-bloque .v2-tabla-caja,.v2-panel .v2-reporte-tabla,.v2-conf-bloque .v2-reporte-tabla{background:transparent;border-radius:0;box-shadow:none}
.v2-panel .v2-barras,.v2-conf-bloque .v2-barras{padding:0;background:transparent;box-shadow:none}

/* 3 · Tipografía con saltos claros (escala de Apple). */
.v2-titulo{letter-spacing:-.4px}
@container marco (min-width: 768px){
  .v2-titulo{font-size:34px;line-height:41px}
}
.v2-conf-titulo,.v2-analisis-h2,.v2-inicio-h2,.v2-panel-cabeza h2{font-weight:600;font-size:17px;line-height:22px;letter-spacing:-.1px}

/* 4 · Los números de arriba en UNA franja dividida, no tarjetas sueltas. */
.v2-reporte-kpis{gap:0;background:var(--superficie);border-radius:var(--r-tarjeta);overflow:hidden;box-shadow:var(--sombra-1);
  grid-template-columns:repeat(2,minmax(0,1fr))}
.v2-reporte-kpis > div{border-radius:0;background:transparent;box-shadow:-1px 0 0 var(--separador),0 -1px 0 var(--separador);padding:14px 16px}
@container marco (min-width: 768px){
  .v2-reporte-kpis{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
  .v2-reporte-kpis > div{padding:16px 20px}
}
.v2-panelf-mini{background:var(--superficie-2);box-shadow:none}

/* 5 · El amarillo, sólo para lo que hay que resolver; explicar va en gris. */
.v2-banda{background:var(--superficie-2);color:var(--tinta-2);font-weight:400}
.v2-banda .v2-icono{color:var(--tinta-3)}
.v2-banda:has(use[href="#i-alerta"]),.v2-banda.alerta,.v2-banda[data-tc-viejo]{background:var(--revisar-fondo);color:var(--revisar-texto);font-weight:600}
.v2-banda:has(use[href="#i-alerta"]) .v2-icono,.v2-banda.alerta .v2-icono{color:inherit}
.v2-banda.v2-banda-mal{background:var(--deuda-fondo);color:var(--deuda);font-weight:600}

/* 6 · Tablas: sin rayado, con separadores. */
.v2-tabla tbody tr:nth-child(even){background:transparent}
.v2-tabla tbody tr:hover{background:var(--superficie-2)}

/* 7 · La grilla de 12 columnas (4 en el celular, 8 en tableta). */
.v2-grilla-12{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:stretch}
.v2-grilla-12 > *{grid-column:1 / -1;min-width:0}
@container marco (min-width: 768px){
  .v2-grilla-12{grid-template-columns:repeat(8,minmax(0,1fr));gap:16px}
  .v2-grilla-12 > .v2-col-6,.v2-grilla-12 > .v2-col-4{grid-column:span 4}
}
@container marco (min-width: 1024px){
  .v2-grilla-12{grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
  .v2-grilla-12 > .v2-col-8{grid-column:span 8}
  .v2-grilla-12 > .v2-col-6{grid-column:span 6}
  .v2-grilla-12 > .v2-col-4{grid-column:span 4}
  .v2-grilla-12 > .v2-o-1{order:1} .v2-grilla-12 > .v2-o-2{order:2} .v2-grilla-12 > .v2-o-3{order:3}
  .v2-grilla-12 > .v2-o-4{order:4} .v2-grilla-12 > .v2-o-5{order:5}
}
/* El Panel financiero: las tablas ya no se aprietan en 360 px. */
.v2-panelf-grilla.v2-grilla-12{align-items:stretch}
.v2-panelf .v2-tabla td,.v2-panelf .v2-tabla th{white-space:normal}
/* ARQUEO DE CAJAS (Plan v4 §4). */
.v2-arqueo{display:flex;flex-direction:column;gap:16px}
.v2-arqueo .v2-panel{padding:16px}
.v2-arqueo-lista{list-style:none;margin:0;padding:0}
.v2-arqueo-fila{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--separador)}
.v2-arqueo-fila:last-child{border-bottom:0}
.v2-arqueo-nombre{flex:1 1 240px;display:flex;flex-direction:column;gap:2px}
.v2-arqueo-nombre span{font-size:13px;line-height:18px;color:var(--tinta-2)}
.v2-arqueo-form{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.v2-arqueo-input{width:170px;min-height:40px;padding:8px 12px;border:1px solid var(--campo-borde);border-radius:10px;background:var(--superficie);color:var(--tinta);font:400 16px/20px var(--letra-numeros)}
.v2-arqueo-dif{min-width:150px;font:600 14px/20px var(--letra-numeros);color:var(--tinta-2)}

/* ── PRESUPUESTO · DE DÓNDE SALE LA PLATA (Plan v4 §5) ─────────────────── */
.v2-presupuesto-fuentes{background:var(--superficie);border-radius:var(--r-tarjeta);padding:16px;margin:16px 0;box-sizing:border-box;width:100%}
.v2-presupuesto-fuentes-cabeza{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.v2-presupuesto-fuentes-cabeza .v2-analisis-h2{margin:0 0 4px}
.v2-presupuesto-cubre{margin:0;color:var(--tinta-2);font-size:15px;line-height:22px}
.v2-presupuesto-cubre b{color:var(--tinta);font-family:var(--letra-numeros)}
.v2-presupuesto-fuentes-lista{list-style:none;margin:16px 0 0;padding:0}
.v2-presupuesto-fuentes-lista li{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--separador)}
.v2-presupuesto-fuente-nombre{flex:1;min-width:0;display:flex;flex-direction:column}
.v2-presupuesto-fuente-tipo{font-size:13px;line-height:18px;color:var(--tinta-2);font-weight:400}
.v2-presupuesto-fuentes-lista .num{font-family:var(--letra-numeros);text-align:right}
.v2-presupuesto-fuentes .v2-progreso{margin-top:16px;background:var(--superficie-2)}
.v2-presupuesto-fuentes .v2-progreso-relleno{background:var(--esp-relleno)}
.v2-presupuesto-fuentes .v2-progreso.pasado .v2-progreso-relleno{background:var(--tinta-2)}
@media (max-width:480px){.v2-presupuesto-fuentes{padding:16px}}

/* ── PRECIOS DEL SÚPER (Plan v4 §6) ────────────────────────────────────── */
.v2-precios-buscar{display:flex;gap:8px;margin:16px 0}
.v2-precios-buscar input{flex:1;min-width:0}
.v2-precios-fecha{display:block;font-size:13px;line-height:18px;color:var(--tinta-2);font-weight:400}
.v2-precios-cambio{font-family:var(--letra-numeros);white-space:nowrap}
.v2-precios-cambio.sube{color:var(--deuda)}
.v2-precios-cambio.baja{color:var(--tinta-2)}
/* En el celular, lo que importa entra sin desplazar: producto, último y cambio. */
@media (max-width:560px){.v2-precios-tabla tr > :nth-child(2),.v2-precios-tabla tr > :nth-child(4){display:none}}

/* El tilde de "diferencia grande" del Arqueo arranca escondido (.v2-casilla le ponía display:flex). */
.v2-arqueo-grande[hidden]{display:none}

/* Para revisar › "¿Es de otro espacio?": rótulos a la vista, para no confundirlo con la cuenta de la fila. */
.v2-revisar-otro-form{border-top:1px solid var(--separador);margin-top:8px;padding-top:8px}
.v2-revisar-otro-titulo{margin:0 0 4px;font-weight:600;font-size:14px}
.v2-revisar-otro-rotulo{display:block;font-size:13px;line-height:18px;color:var(--tinta-2);margin:6px 0 2px}

/* =====================================================================
   V4 · PANTALLA POR PANTALLA. Cada pantalla pasa a la grilla de 12 con
   anchos explícitos; lo de abajo neutraliza las grillas y los anchos
   sueltos que peleaban con el sistema. Sólo maquetación: la paleta no se toca.
   ===================================================================== */

/* (1) Panel financiero: editar un fondo es una hoja, no un formulario
   metido en el tablero. */
.v2-panelf-fondo-cabeza{align-items:center}
.v2-panelf-editar{min-height:36px;padding:0 12px;font-size:14px}
.v2-panelf-hoja-form .v2-acciones{justify-content:flex-end;margin:8px 0 0}

/* =====================================================================
   V4 · ANÁLISIS PANTALLA POR PANTALLA (03/10). Antes: los números en una
   columna angosta al lado de un gráfico de 380 px y un hueco debajo. Ahora,
   de arriba hacia abajo y a todo el ancho: los números (franja de 4), el
   gráfico, y "En qué gastamos" con la torta a la izquierda y la lista a la
   derecha. Sólo maquetación.
   ===================================================================== */
@container marco (min-width: 768px){
  .v2-analisis{grid-template-columns:minmax(0,1fr)}
  .v2-analisis > *{grid-column:1 / -1}
  .v2-analisis-resumen{grid-template-columns:repeat(4,minmax(0,1fr))}
  .v2-analisis-cuentas{display:grid;grid-template-columns:240px minmax(0,1fr);column-gap:40px;align-items:start;padding:16px}
  .v2-analisis-cuentas > .v2-analisis-h2,.v2-analisis-cuentas > .v2-nota,.v2-analisis-cuentas > .v2-panel-vacio{grid-column:1 / -1}
  .v2-analisis-cuentas .v2-analisis-torta{margin:16px 0 0}
  .v2-analisis-cuentas .v2-analisis-torta svg{width:220px}
}

/* =====================================================================
   V4 · PASADA PANTALLA POR PANTALLA (experto #2, 03/10). Sólo maquetación:
   la paleta no se toca. Cada pantalla, en su propio sub-bloque.
   ===================================================================== */

/* (3) INICIO. Antes: "¿Cuánto nos dura la plata?" quedaba en la columna
   izquierda con un hueco a la derecha, y la columna de Próximos tenía un
   ancho propio (280–360 px) fuera de la grilla. Ahora, en la compu: grilla
   de 12; el número del mes y "¿Cuánto nos dura?" apilados en 8 y Próximos
   7 días en 4, de alto completo al lado de los dos. "El mes en números" es
   una franja dividida, como los KPIs del sistema. */
@container marco (min-width: 1024px){
  .v2-inicio{grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
  .v2-inicio > *{grid-column:1 / -1}
  .v2-inicio > .v2-inicio-hero,
  .v2-inicio > .v2-inicio-futuro{grid-column:1 / span 8;align-self:stretch}
  .v2-inicio > .v2-inicio-proximos{grid-column:9 / span 4;align-self:stretch}
  .v2-inicio-tc{margin-bottom:0}
}
/* Tableta (768–1023) con la barra lateral: quedan ~470 px; dos columnas
   dejaban el número del mes en 90 px. Una sola columna. */
@container marco (min-width: 768px) and (max-width: 1023px){
  .v2-inicio{grid-template-columns:minmax(0,1fr)}
  .v2-inicio > .v2-inicio-hero,.v2-inicio > .v2-inicio-futuro,.v2-inicio > .v2-inicio-proximos{grid-column:1 / -1}
}
@container marco (min-width: 1024px){
  .v2-inicio:has(> .v2-inicio-futuro) > .v2-inicio-proximos{grid-row:span 2}
}
@container marco (min-width: 768px){
  .v2-inicio-dl{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0}
  .v2-inicio-dl > div{padding:4px 20px;box-shadow:-1px 0 0 var(--separador)}
  .v2-inicio-dl > div:first-child{padding-left:0;box-shadow:none}
  .v2-inicio-dl dd{font-size:22px;line-height:28px}
}
/* A 1024 la consola deja ~700 px de contenido: 4 columnas son 200 px y
   Próximos se parte en tres renglones. Hasta 1279, mitad y mitad (6 + 6). */
@container marco (min-width: 1024px) and (max-width: 1279px){
  .v2-inicio > .v2-inicio-hero,
  .v2-inicio > .v2-inicio-futuro{grid-column:1 / span 6}
  .v2-inicio > .v2-inicio-proximos{grid-column:7 / span 6}
}

/* (4) MOVIMIENTOS. Antes: los cuatro totales eran tarjetas grises adentro
   del bloque (bloque dentro de bloque) y a 1024 la tabla no entraba: el
   Monto quedaba afuera, del otro lado de un desplazamiento lateral. Ahora:
   los totales son UNA franja dividida (en el celular, 2 × 2 sobre la
   superficie) y entre 768 y 1279 la columna Quién pasa a un renglón chico
   debajo de "Pagado con" ("Cargó …"), así el Monto siempre se ve. */
.v2-mov-resumen{gap:0;background:var(--superficie);border-radius:var(--r-tarjeta);overflow:hidden}
.v2-mov-total{border-radius:0;background:transparent;box-shadow:-1px 0 0 var(--separador),0 -1px 0 var(--separador);padding:12px 14px}
.v2-mov-total-valor{white-space:nowrap}
@container marco (min-width: 768px){
  .v2-mov-resumen{background:transparent;border:1px solid var(--separador);border-radius:12px;margin-bottom:8px}
  .v2-mov-total{background:transparent;box-shadow:-1px 0 0 var(--separador);padding:12px 16px}
  .v2-mov-total-valor{font-weight:600}
}
@container marco (min-width: 1200px){
  .v2-mov-total-valor{font-size:20px;line-height:26px}
  /* El espacio que sobra va a la descripción, no a la columna de etiquetas. */
  .v2-mov:not(.v2-revisar) .v2-mov-tabla td.v2-mov-desc{width:24%}
}
/* MENÚS (09/10): de 1440 para arriba el conjunto mide 1200 y a Movimientos le quedan 960 px
   (la tabla, ~850). Con la tabla de 8 columnas (con Quién) entre 1200 y 1279 de conjunto, el
   aire de las celdas baja a 8 px y el desplegable de la cuenta conserva "Elegí la cuenta" entero. */
@container marco (min-width: 1200px) and (max-width: 1279px){
  .v2-mov:not(.v2-revisar) .v2-mov-tabla th,.v2-mov:not(.v2-revisar) .v2-mov-tabla td{padding-inline:8px}
  .v2-mov:not(.v2-revisar) .v2-mov-cuenta select{min-width:164px;max-width:190px}
}
/* Para revisar usa las mismas clases de tabla con otras columnas: todo lo
   de abajo va acotado a Movimientos (.v2-mov sin .v2-revisar). */
/* R3 (12/10, Emi: "la columna Quién siempre en la compu"): desde 1024 (barra lateral) la tabla es la tabla y la columna Quién se ve
   SIEMPRE (antes se escondía por debajo de 1200). Lo que cede lugar entre 1024 y 1279 es Etiquetas, cuyo estado pasa a la línea de
   la descripción (REDISEÑO §1.6: debajo de 1280). La tableta (768 a 1023, riel de 84) sigue con la lista del celu (P2, más abajo). */
.v2-mov-estado-desc{display:none}
@container marco (min-width: 1024px) and (max-width: 1279.98px){
  .v2-mov:not(.v2-revisar) .v2-mov-tabla thead th:nth-child(7),.v2-mov:not(.v2-revisar) .v2-mov-tabla td.v2-mov-etiquetas,
  .v2-mov:not(.v2-revisar) .v2-mov-tabla td.v2-mov-pie-equivalente{display:none!important}
  .v2-mov:not(.v2-revisar) .v2-mov-estado-desc{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
  .v2-mov:not(.v2-revisar) .v2-mov-tabla th,.v2-mov:not(.v2-revisar) .v2-mov-tabla td{padding-inline:6px}
}
@container marco (min-width: 1024px) and (max-width: 1279px){
  /* En una tabla automática el min-width de una celda no cuenta: el ancho
     preferido sí. La descripción es lo que se lee primero. */
  .v2-mov:not(.v2-revisar) .v2-mov-tabla td.v2-mov-desc{width:30%}
  .v2-mov:not(.v2-revisar) .v2-mov-tabla td.v2-mov-cuenta{min-width:0}
  .v2-mov:not(.v2-revisar) .v2-mov-cuenta select{min-width:120px;max-width:170px}
}

/* (5) PARA REVISAR. Antes: el desplegable de la cuenta (lo único que hay
   que tocar) quedaba en 150 px ("4.1 Mercado y") mientras "Pagado con" se
   llevaba el espacio; a 1024 se veía UN carácter y la descripción iba en
   100 px. Ahora la columna Cuenta tiene ancho propio y, entre 768 y 1279,
   "Origen" pasa a un renglón chico debajo de "Pagado con". */
.v2-revisar-origen-chico{display:none}
@container marco (min-width: 768px){
  .v2-revisar .v2-mov-tabla td.v2-mov-cuenta{width:260px}
  .v2-revisar-asignar select{min-width:170px}
  .v2-revisar .v2-mov-tabla td.v2-mov-desc{width:32%}
  .v2-revisar-otro > summary{white-space:nowrap}
}
@container marco (min-width: 768px) and (max-width: 1279px){
  .v2-revisar .v2-mov-tabla thead th:nth-child(4),.v2-revisar .v2-mov-tabla td.v2-revisar-origen{display:none!important}
  .v2-revisar-origen-chico{display:block;font-size:13px;line-height:18px;color:var(--tinta-3)}
  .v2-revisar .v2-mov-tabla th,.v2-revisar .v2-mov-tabla td{padding-inline:6px}
  .v2-revisar .v2-mov-tabla td.v2-mov-cuenta{width:220px}
  .v2-revisar-asignar select{min-width:150px}
  .v2-revisar-filtros .v2-selector-fila{flex:1 1 180px}
}

/* (6) CAJAS Y TARJETAS. Antes: tres columnas de un tercio aunque no
   hubiera tarjetas (Familiar: un aviso chico flotando en el medio) y, a
   1024, "Cuentas" sola en la columna izquierda con un hueco a la derecha.
   Ahora, en la grilla de 12: Cajas (6) + Tarjetas (6) y las Cuentas del
   espacio a todo el ancho, en dos columnas. Sin tarjetas: Cajas (6) +
   Cuentas (6) y el aviso de "no hay tarjetas" abajo, a todo el ancho. El
   "Disponible" deja de ser un bloque gris adentro del bloque: es el pie de
   la lista, con un separador. En tableta con barra (768–1023), una columna. */
@container marco (min-width: 768px){
  .v2-cuentas{grid-template-columns:minmax(0,1fr)}
  .v2-cuentas > .v2-panel{align-self:stretch}
  .v2-disponible{margin-top:8px;padding:14px 0 0;border-radius:0;background:transparent;border-top:1px solid var(--separador)}
  /* El título de Tarjetas a la misma altura que el de Cajas. */
  .v2-panel-tarjetas .v2-panel-cabeza{padding:18px 4px 0;margin-bottom:12px}
}
@container marco (min-width: 1024px){
  .v2-cuentas{grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
  .v2-cuentas > .v2-panel{grid-column:span 6}
  .v2-cuentas > .v2-panel-cuentas{grid-column:1 / -1}
  .v2-cuentas > .v2-panel-cuentas .v2-barras{columns:2;column-gap:48px}
  .v2-cuentas > .v2-panel-cuentas .v2-barras li{break-inside:avoid}
  /* Sin tarjetas: las cuentas suben al lado de las cajas (una columna de lista). */
  .v2-cuentas:has(> .v2-panel-tarjetas > .v2-panel-vacio) > .v2-panel-cuentas{grid-column:span 6;order:1}
  .v2-cuentas:has(> .v2-panel-tarjetas > .v2-panel-vacio) > .v2-panel-cuentas .v2-barras{columns:auto}
  .v2-cuentas:has(> .v2-panel-tarjetas > .v2-panel-vacio) > .v2-panel-tarjetas{grid-column:1 / -1;order:2}
  .v2-cuentas:has(> .v2-panel-tarjetas > .v2-panel-vacio) > .v2-panel-tarjetas .v2-panel-cabeza{padding-top:0}
}

/* (7) FRANJA DE KPIs (Fijos, Plan de cuentas, Presupuesto, Actividad,
   Objetivos…). A 1024 cada número tiene ~130 px y "US$ 1.646,47" se partía
   en dos renglones ("US$" arriba, el número abajo). Entre 768 y 1279 el
   número va en un solo renglón, a 20 px, con un poco menos de aire. */
@container marco (min-width: 768px) and (max-width: 1279px){
  .v2-reporte-kpis > div{padding:14px 16px}
  .v2-reporte-kpis dd:not(.v2-kpi-nota){font-size:20px;line-height:26px;white-space:nowrap}
}

/* (8) FIJOS y PLAN DE CUENTAS a 1024. La tabla no entra y se desplaza de
   costado; antes "Pagar"/"Más" y "Subcuenta"/"Archivar" quedaban del otro
   lado, sin ninguna pista. Ahora la columna de acciones queda fija a la
   derecha (con un separador) y lo del medio se desplaza por debajo. En el
   Plan, las acciones van en dos renglones para no comerse media tabla. */
@container marco (min-width: 768px) and (max-width: 1279px){
  .v2-fijos-tabla tbody td.v2-fijos-acciones,.v2-fijos-tabla thead th:last-child,
  .v2-plan-tabla tbody td.v2-fijos-acciones,.v2-plan-tabla thead th:last-child{
    position:sticky;right:0;z-index:1;background:var(--superficie);box-shadow:-1px 0 0 var(--separador)}
  .v2-fijos-tabla tbody tr:hover td.v2-fijos-acciones,.v2-plan-tabla tbody tr:hover td.v2-fijos-acciones{background:var(--superficie-2)}
  .v2-plan-tabla td.v2-fijos-acciones{white-space:normal;width:190px;min-width:190px}
  .v2-plan-tabla td.v2-fijos-acciones > .v2-boton,.v2-plan-tabla td.v2-fijos-acciones > form{margin:0}
  .v2-plan-tabla td.v2-fijos-acciones .v2-boton{min-height:32px;padding:0 6px}
}

/* (9) AGENDA. Antes: el mes eran 42 tarjetitas sueltas (bloques que
   "flotan") y abajo dos bloques cortos a todo el ancho. Ahora, en la compu,
   el mes es UN bloque con líneas de 1 px entre días (como Calendario de
   Apple) y, desde 1024, "el día elegido" y "sin fecha" van mitad y mitad
   (en Semana: la semana en 8 y "sin fecha" en 4). */
@container marco (min-width: 768px){
  .v2-agenda-grilla{gap:0;background:var(--superficie);border-radius:var(--r-tarjeta);overflow:hidden}
  .v2-agenda-semana{gap:0}
  .v2-agenda-cabeza{padding:10px 0;box-shadow:inset 0 -1px 0 var(--separador)}
  .v2-agenda-celda{border-radius:0;box-shadow:inset -1px 0 0 var(--separador),inset 0 -1px 0 var(--separador)}
  .v2-agenda-semana > .v2-agenda-celda:last-child{box-shadow:inset 0 -1px 0 var(--separador)}
  .v2-agenda-celda[aria-current="date"]{box-shadow:inset 0 0 0 2px var(--accion)}
  .v2-agenda-celda:hover{background:var(--superficie-2)}
}
@container marco (min-width: 1024px){
  .v2-agenda{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px 24px;align-items:start}
  .v2-agenda > *{grid-column:1 / -1}
  .v2-agenda[data-agenda="mes"] > [data-dia],.v2-agenda[data-agenda="mes"] > [data-sin-fecha]{grid-column:span 6;align-self:stretch}
  .v2-agenda[data-agenda="semana"] > [data-semana],.v2-agenda[data-agenda="semana"] > [data-sin-fecha]{grid-column:span 6;align-self:stretch}
}
@container marco (min-width: 1280px){
  .v2-agenda[data-agenda="semana"] > [data-semana]{grid-column:span 8}
  .v2-agenda[data-agenda="semana"] > [data-sin-fecha]{grid-column:span 4}
}

/* (10) OBJETIVOS Y FUTURO. "Dónde podemos ahorrar": cada idea era un
   recuadro gris adentro del bloque; ahora son filas con separador, como
   el resto de las listas. */
.v2-futuro-sugerencias{gap:0}
.v2-futuro-sugerencias li{padding:10px 0;border-radius:0;background:transparent;border-top:1px solid var(--separador)}
.v2-futuro-sugerencias li:first-child{border-top:0}

/* (11) INGRESOS. "¿Entró …?" es un formulario: el bloque sigue a todo el
   ancho (alineado con la tabla de arriba) pero los campos van al ancho de
   lectura (720), no estirados a 1100 px. */
.v2-ingresos-confirmar > form{max-width:var(--ancho-lectura)}

/* (12) PRECIOS DEL SÚPER. El buscador era el campo del navegador sin estilo
   (borde negro, sin aire, pegado a la izquierda): ahora es como los demás
   campos, y no se estira más que el ancho de lectura. */
.v2-precios-buscar{max-width:var(--ancho-lectura)}
.v2-precios-buscar input{min-height:44px;padding:0 14px;border:1px solid var(--campo-borde);border-radius:var(--r-sm);
  background:var(--superficie);color:var(--tinta);font:400 16px/22px var(--letra)}
.v2-precios-buscar input:focus-visible{outline:2px solid var(--accion);outline-offset:2px}

/* REGLAS DE COMPRAS (03/10): el aviso en la fila y la lista al pie de Para revisar. */
.v2-revisar-regla{margin:0 0 6px;font-size:13px;line-height:18px;color:var(--tinta);background:var(--superficie-2);border-radius:8px;padding:6px 8px}
.v2-revisar-recordar{margin-top:8px;font-size:13px}
.v2-revisar-patron{width:100%;max-width:220px;margin:4px 0 8px}
.v2-revisar-reglas-lista{list-style:none;margin:8px 0 0;padding:0}
.v2-revisar-reglas-lista li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--separador)}
/* =====================================================================
   PANEL DE DISEÑO (03/10, docs/v2/PANEL-DISENO.md). Alan Dye (Apple),
   Karri Saarinen (Linear) y Katie Dill (Stripe) revisaron pantalla por
   pantalla. Va al final a propósito: completa el sistema v4, no lo
   deshace. Cada sub-bloque dice qué había antes y por qué cambió.
   ===================================================================== */

/* (P1) PLAN DE CUENTAS. Antes: Editar, Subcuenta, Archivar y Borrar en cada
   fila (dos renglones a 1024 y la columna "Este mes" tapada por la columna
   fija de acciones). Ahora: Editar a la vista y el resto en "Más", como
   Fijos (Saarinen: una acción visible por fila). */
.v2-plan-tabla td.v2-fijos-acciones{white-space:nowrap}
@container marco (min-width: 768px) and (max-width: 1279px){
  .v2-plan-tabla td.v2-fijos-acciones{white-space:nowrap;width:auto;min-width:0}
}
/* La columna fija de acciones (768–1279) es su propia capa: la celda de la
   fila de abajo tapaba el menú abierto de la de arriba (también en Fijos).
   La celda con el menú abierto sube por encima de las demás. */
.v2-fijos-acciones:has(> details[open]){position:relative;z-index:4}
@container marco (min-width: 768px) and (max-width: 1279px){
  .v2-fijos-tabla tbody td.v2-fijos-acciones:has(> details[open]),.v2-plan-tabla tbody td.v2-fijos-acciones:has(> details[open]){position:sticky;z-index:4}
}

/* (P2) MOVIMIENTOS ENTRE 768 Y 1023 PX (R3, 12/10: era 1199; desde 1024 la tabla entra con Quién siempre). Antes: la tabla de 7 columnas no
   entraba en los ~700 px que deja la barra lateral; la descripción quedaba
   en ~100 px partida en tres renglones y "Elegí la cuenta" se cortaba
   ("Elegí la c"). Saarinen y Dill: cuando la tabla no entra, filas de
   lista. A ese ancho la tabla se dibuja como la lista del celular
   (descripción y monto arriba, la cuenta a todo el ancho, las etiquetas
   debajo, un rótulo por día) y vuelve "Elegir varios" para el lote.
   Desde 1024, la tabla de siempre (R3). Sólo Movimientos: Para revisar entra. */
@container marco (min-width: 768px) and (max-width: 1023px){
  .v2-mov:not(.v2-revisar) .v2-mov-elegir{display:inline-flex}
  .v2-mov:not(.v2-revisar).eligiendo .v2-mov-todos{display:flex}
  .v2-mov:not(.v2-revisar) .v2-mov-tabla{overflow:visible}
  .v2-mov:not(.v2-revisar) .v2-mov-tabla thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .v2-mov:not(.v2-revisar) .v2-mov-tabla tbody,.v2-mov:not(.v2-revisar) .v2-mov-tabla tfoot{display:block}
  .v2-mov:not(.v2-revisar) .v2-mov-tabla tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"desc monto" "cuenta cuenta" "etiquetas etiquetas";column-gap:16px;align-items:start;
    padding:12px 4px;border-bottom:1px solid var(--separador)!important}
  .v2-mov:not(.v2-revisar).eligiendo .v2-mov-tabla tbody tr:not(.v2-mov-dia){grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:"casilla desc monto" "casilla cuenta cuenta" "casilla etiquetas etiquetas"}
  .v2-mov:not(.v2-revisar) .v2-mov-tabla tbody tr.v2-mov-dia{display:block;padding:16px 4px 6px}
  .v2-mov:not(.v2-revisar) .v2-mov-tabla tbody tr.v2-mov-dia:first-child{padding-top:4px}
  .v2-mov:not(.v2-revisar) .v2-mov-tabla tbody tr.v2-mov-dia th{display:block!important;padding:0;border:0;font:600 13px/18px var(--letra);color:var(--tinta-2)}
  .v2-mov:not(.v2-revisar) .v2-mov-tabla tbody td{display:block!important;padding:0;border:0;min-width:0;width:auto}
  .v2-mov:not(.v2-revisar) .v2-mov-tabla tbody td.v2-mov-fecha,.v2-mov:not(.v2-revisar) .v2-mov-tabla tbody td.v2-mov-caja,
  .v2-mov:not(.v2-revisar) .v2-mov-tabla tbody td.v2-mov-quien,.v2-mov:not(.v2-revisar) .v2-mov-tabla tbody td.v2-mov-casilla,
  .v2-mov:not(.v2-revisar) .v2-mov-tabla tbody td.v2-mov-cuenta:not(:has(form)){display:none!important}
  .v2-mov:not(.v2-revisar).eligiendo .v2-mov-tabla tbody td.v2-mov-casilla{display:block!important;padding-top:2px}
  .v2-mov:not(.v2-revisar) .v2-mov-tabla tbody td.v2-mov-desc{display:flex!important;align-items:flex-start;gap:12px;width:auto}
  .v2-mov:not(.v2-revisar) .v2-mov-icono{display:flex}
  .v2-mov:not(.v2-revisar).eligiendo .v2-mov-icono{display:none}
  .v2-mov:not(.v2-revisar) .v2-mov-meta{display:block;font-size:14px;line-height:19px}
  .v2-mov:not(.v2-revisar) .v2-mov-abrir{font-size:16px;line-height:21px}
  .v2-mov:not(.v2-revisar) .v2-mov-tabla tbody td.v2-mov-cuenta{margin-top:8px}
  .v2-mov:not(.v2-revisar) .v2-mov-tabla .v2-mov-cuenta select{width:100%;min-width:0;max-width:420px}
  .v2-mov:not(.v2-revisar) .v2-mov-tabla tbody td.v2-mov-etiquetas{display:flex!important;margin-top:6px}
  /* La cuenta y las etiquetas, alineadas con el texto (no con el ícono). */
  .v2-mov:not(.v2-revisar):not(.eligiendo) .v2-mov-tabla tbody td.v2-mov-cuenta,
  .v2-mov:not(.v2-revisar):not(.eligiendo) .v2-mov-tabla tbody td.v2-mov-etiquetas{margin-left:52px}
  .v2-mov:not(.v2-revisar) .v2-mov-tabla tbody td.v2-mov-monto{font-size:16px;line-height:21px}
  .v2-mov:not(.v2-revisar) .v2-mov-tabla tbody tr.v2-mov-vacio{display:block}
  .v2-mov:not(.v2-revisar) .v2-mov-tabla tfoot tr{display:block;padding-top:12px}
  .v2-mov:not(.v2-revisar) .v2-mov-tabla tfoot th,.v2-mov:not(.v2-revisar) .v2-mov-tabla tfoot td{display:block!important;padding:2px 4px;text-align:left}
  .v2-mov:not(.v2-revisar) .v2-mov-tabla tfoot td.v2-mov-quien{display:none!important}
  .v2-mov:not(.v2-revisar) .v2-mov-tabla tfoot .v2-mov-monto{text-align:left}
  /* La fila abierta (con el detalle al costado, desde 1100) conserva su marca. */
  .v2-mov:not(.v2-revisar) .v2-mov-tabla tbody tr.abierto{box-shadow:inset 3px 0 0 var(--esp-relleno)!important}
}
/* Para revisar, lo mismo entre 768 y 1023 (a 768 la tabla se desplazaba de
   costado y el monto quedaba afuera). Desde 1024 entra (v4, bloque 5). */
@container marco (min-width: 768px) and (max-width: 1023px){
  .v2-mov.v2-revisar .v2-mov-elegir{display:inline-flex}
  .v2-mov.v2-revisar.eligiendo .v2-mov-todos{display:flex}
  .v2-mov.v2-revisar .v2-mov-tabla{overflow:visible}
  .v2-mov.v2-revisar .v2-mov-tabla thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .v2-mov.v2-revisar .v2-mov-tabla tbody,.v2-mov.v2-revisar .v2-mov-tabla tfoot{display:block}
  .v2-mov.v2-revisar .v2-mov-tabla tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"desc monto" "cuenta cuenta" "etiquetas etiquetas";column-gap:16px;align-items:start;
    padding:12px 4px;border-bottom:1px solid var(--separador)!important}
  .v2-mov.v2-revisar.eligiendo .v2-mov-tabla tbody tr:not(.v2-mov-dia){grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:"casilla desc monto" "casilla cuenta cuenta" "casilla etiquetas etiquetas"}
  .v2-mov.v2-revisar .v2-mov-tabla tbody tr.v2-mov-dia{display:block;padding:16px 4px 6px}
  .v2-mov.v2-revisar .v2-mov-tabla tbody tr.v2-mov-dia:first-child{padding-top:4px}
  .v2-mov.v2-revisar .v2-mov-tabla tbody tr.v2-mov-dia th{display:block!important;padding:0;border:0;font:600 13px/18px var(--letra);color:var(--tinta-2)}
  .v2-mov.v2-revisar .v2-mov-tabla tbody td{display:block!important;padding:0;border:0;min-width:0;width:auto}
  .v2-mov.v2-revisar .v2-mov-tabla tbody td.v2-mov-fecha,.v2-mov.v2-revisar .v2-mov-tabla tbody td.v2-mov-caja,
  .v2-mov.v2-revisar .v2-mov-tabla tbody td.v2-mov-quien,.v2-mov.v2-revisar .v2-mov-tabla tbody td.v2-mov-casilla,
  .v2-mov.v2-revisar .v2-mov-tabla tbody td.v2-mov-cuenta:not(:has(form)){display:none!important}
  .v2-mov.v2-revisar.eligiendo .v2-mov-tabla tbody td.v2-mov-casilla{display:block!important;padding-top:2px}
  .v2-mov.v2-revisar .v2-mov-tabla tbody td.v2-mov-desc{display:flex!important;align-items:flex-start;gap:12px;width:auto}
  .v2-mov.v2-revisar .v2-mov-icono{display:flex}
  .v2-mov.v2-revisar.eligiendo .v2-mov-icono{display:none}
  .v2-mov.v2-revisar .v2-mov-meta{display:block;font-size:14px;line-height:19px}
  .v2-mov.v2-revisar .v2-mov-abrir{font-size:16px;line-height:21px}
  .v2-mov.v2-revisar .v2-mov-tabla tbody td.v2-mov-cuenta{margin-top:8px}
  .v2-mov.v2-revisar .v2-mov-tabla .v2-mov-cuenta select{width:100%;min-width:0;max-width:420px}
  .v2-mov.v2-revisar .v2-mov-tabla tbody td.v2-mov-etiquetas{display:flex!important;margin-top:6px}
  /* La cuenta y las etiquetas, alineadas con el texto (no con el ícono). */
  .v2-mov.v2-revisar:not(.eligiendo) .v2-mov-tabla tbody td.v2-mov-cuenta,
  .v2-mov.v2-revisar:not(.eligiendo) .v2-mov-tabla tbody td.v2-mov-etiquetas{margin-left:52px}
  .v2-mov.v2-revisar .v2-mov-tabla tbody td.v2-mov-monto{font-size:16px;line-height:21px}
  .v2-mov.v2-revisar .v2-mov-tabla tbody tr.v2-mov-vacio{display:block}
  .v2-mov.v2-revisar .v2-mov-tabla tfoot tr{display:block;padding-top:12px}
  .v2-mov.v2-revisar .v2-mov-tabla tfoot th,.v2-mov.v2-revisar .v2-mov-tabla tfoot td{display:block!important;padding:2px 4px;text-align:left}
  .v2-mov.v2-revisar .v2-mov-tabla tfoot td.v2-mov-quien{display:none!important}
  .v2-mov.v2-revisar .v2-mov-tabla tfoot .v2-mov-monto{text-align:left}
}

/* (P2b) FIJOS ENTRE 1280 Y 1519. La tabla mide ~1120 px y a 1280 quedan
   950: "Pagar" y "Más" quedaban del otro lado del desplazamiento, sin pista
   (la columna fija de v4 llegaba hasta 1279). R1 (09/10): con el marco sin tope el
   contenido de 1440 mide ~1100 (barra de 264 + margen), así que el corte sube de 1439 a
   1519; desde ahí la tabla entra entera (contenido >= 1120). */
@container marco (min-width: 1280px) and (max-width: 1519px){
  .v2-fijos-tabla tbody td.v2-fijos-acciones,.v2-fijos-tabla thead th:last-child{
    position:sticky;right:0;z-index:1;background:var(--superficie);box-shadow:-1px 0 0 var(--separador)}
  .v2-fijos-tabla tbody tr:hover td.v2-fijos-acciones{background:var(--superficie-2)}
  .v2-fijos-tabla tbody td.v2-fijos-acciones:has(> details[open]){z-index:4}
}

/* (P3) FILAS DE LISTA EN EL CELULAR (Movimientos, Para revisar, el
   "Para revisar" del Inicio). Antes: el ícono y el monto iban centrados en
   el alto de la fila; con tres renglones de texto, el monto quedaba a mitad
   de camino y no se leía "título → monto" de un vistazo. Dye (iOS): ícono
   y monto arriba, alineados con el título. */
.v2-mov-tabla tr{align-items:start}
.v2-mov-desc{align-items:flex-start!important}
.v2-mov-monto{padding-top:1px}
.v2-inicio-rev{align-items:flex-start}
/* Movimientos del celular con el mes vacío: el aviso y la franja de totales
   iban pegados (parecían un solo bloque). */
.v2-mov-tabla:has(.v2-mov-vacio) + .v2-mov-resumen,.v2-mov-panel:has(.v2-mov-vacio) .v2-mov-resumen{margin-top:16px}
/* Para revisar del celular: los tres desplegables tenían tres anchos. Ahora
   "quién" a lo ancho y el orden + el sentido + Filtrar en un renglón. */
@container marco (max-width: 767px){
  .v2-revisar-filtros .v2-mov-buscar{flex:1 1 100%}
  .v2-revisar-filtros > select{max-width:none;min-width:0}
  .v2-revisar-filtros > select[name="quien"],.v2-revisar-filtros > select[name="orden"]{flex:1 1 100%;width:100%}
  .v2-revisar-filtros > select[name="dir"]{flex:1 1 auto;width:auto}
  .v2-revisar-filtros > .v2-boton{flex:none}
  /* Las filas de chips (tipo y mes) se desplazan de costado: antes se
     cortaban secas contra el borde ("Sin cue", "Tod") sin pista de que
     había más. Un desvanecido en el borde lo dice (como iOS). */
  .v2-chips,.v2-mov-meses{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);
    mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);padding-right:24px}
}

/* (P4) INICIO. "¿Cuánto nos dura la plata?" era, en el celular, el único
   bloque sin fondo: el texto flotaba sobre el gris (Saarinen). Va en su
   bloque como los demás. Y "Nada para revisar": el tilde en un cuadrado
   gris parecía un botón apagado (en oscuro, más); es un estado de "todo
   bien": un anillo con el tilde, sin relleno (Dill). */
.v2-inicio-futuro{background:var(--superficie);border-radius:var(--r-tarjeta);box-shadow:var(--sombra-1)}
.v2-inicio-nada .v2-fila-icono{width:32px;height:32px;border-radius:50%;background:transparent;color:var(--ingreso);
  box-shadow:inset 0 0 0 1.5px currentColor}
.v2-inicio-nada .v2-fila-icono .v2-icono{width:18px;height:18px;stroke-width:2.2}

/* (P5) TARJETAS "PLÁSTICO" (Cuentas y Cajas). El panel las acepta como
   excepción tipo Wallet: representan un objeto real. Pero en oscuro el
   plástico se invertía a BLANCO y era lo más brillante de la pantalla, al
   revés de la jerarquía (Dye: Wallet no invierte las tarjetas). Ahora es
   oscuro en los dos temas; en oscuro, un borde fino lo separa del fondo.
   Texto blanco sobre #1F1F24: 16,2:1; los rótulos al 78 %: 9,6:1. */
.v2-tj-plastico{background:linear-gradient(145deg,#2A2A31 0%,#16161A 100%);color:#FFFFFF}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .v2-tj-plastico{box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}}
:root[data-theme="dark"] .v2-tj-plastico{box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.v2-tj-plastico a{color:#BFD3FF}

/* (P6) ARQUEO. Entre "Saldo real" y "Ajustar" quedaba un hueco fijo de
   150 px reservado para la diferencia aunque no hubiera ninguna. El lugar
   aparece sólo cuando hay algo que decir. */
.v2-arqueo-dif{min-width:0}
.v2-arqueo-dif:empty{display:none}
.v2-arqueo-dif:not(:empty){min-width:120px}

/* (P7) RÓTULOS DE ZONA (Actividad, Avisos, Configuración). Iban en
   MAYÚSCULAS grises: el sistema dice frase normal, nunca mayúsculas (Dye,
   Saarinen). Ahora un rótulo de sección en frase, en gris que llega a AA. */
.v2-conf-zona{text-transform:none;letter-spacing:0;font:600 15px/20px var(--letra);color:var(--tinta-2)}

/* (P8) AGENDA › RECORDATORIOS. "Semana · Mes · Recordatorios" medía 480 px y
   justo debajo "Hoy y vencidos · Próximos · Sin fecha · Hechos" ocupaba todo
   el ancho: dos anchos para el mismo control. Ahora los dos iguales. */
.v2-agenda-vistas,.v2-agenda-filtros{max-width:640px;width:100%}

/* (P9) REPORTES. A 1200 px eran 10 filas de 870 px con una línea de texto
   cada una: mucho recorrido para el ojo. Desde 1024, dos columnas. */
@container marco (min-width: 1024px){
  .v2-reportes-lista{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));list-style:none}
  .v2-reportes-lista > li + li{border-top:0}
  .v2-reportes-lista > li:nth-child(n+3){border-top:1px solid var(--separador)}
  .v2-reportes-lista > li:nth-child(odd){box-shadow:inset -1px 0 0 var(--separador)}
}

/* (P10) MOVIMIENTO QUE EXPLICA (Dye: el movimiento dice de dónde viene
   algo y qué cambió; nunca decora). Corto (160–480 ms), con la curva de
   iOS, sólo CSS y una clase que pone v2.js en el acordeón. Con "reducir
   movimiento" (prefers-reduced-motion) no se mueve nada.
   - El velo de las hojas aparece con un fundido (antes, un corte seco).
   - El acordeón del menú lateral se despliega desde arriba al abrirlo.
   - Los gráficos de Análisis entran: las barras crecen desde la base (en
     cascada), la torta gira un poco y las barritas de la lista se llenan.
   (El cambio de pantalla ya tenía su fundido: View Transitions, arriba.) */
@keyframes v2-velo-entra{from{opacity:0}}
@keyframes v2-sub-entra{from{opacity:0;transform:translateY(-6px)}}
@keyframes v2-barra-crece{from{transform:scaleY(0)}}
@keyframes v2-pista-llena{from{transform:scaleX(0)}}
@keyframes v2-torta-entra{from{opacity:0;transform:rotate(-40deg) scale(.94)}}
.v2-hoja[open]::backdrop,.v2-agente[open]::backdrop{animation:v2-velo-entra var(--t-fundido) ease-out}
.v2-sub.v2-sub-entra{animation:v2-sub-entra 200ms var(--curva-sale)}
.v2-barras-svg rect{transform-box:fill-box;transform-origin:50% 100%;
  animation:v2-barra-crece 420ms var(--curva-sale) both;animation-delay:calc(min(var(--i, 0), 30) * 12ms)}
.v2-analisis-cuentas .v2-barras-pista span{transform-origin:0 50%;animation:v2-pista-llena 480ms var(--curva-sale) both 120ms}
.v2-analisis-torta svg{animation:v2-torta-entra 480ms var(--curva-ios) both}
@media (prefers-reduced-motion: reduce){
  .v2-hoja[open]::backdrop,.v2-agente[open]::backdrop,.v2-sub.v2-sub-entra,.v2-barras-svg rect,
  .v2-analisis-cuentas .v2-barras-pista span,.v2-analisis-torta svg{animation:none!important}
}

/* =====================================================================
   DECISIONES DE EMI SOBRE EL PANEL DE DISEÑO (03/10, "sí a todo"):
   - el botón principal es de UN solo color en toda la app (el de acción,
     casi negro en claro, gris elevado en oscuro): el verde ya no se
     confunde con "entró plata" ni cambia de espacio en espacio;
   - el botón "Agente" en oscuro deja de ser lo más brillante de la
     pantalla (mismo relleno que el botón principal);
   - la barra de abajo del celular se achica al bajar y vuelve al subir.
   ===================================================================== */
.v2-boton.primario{background:var(--boton-relleno);color:var(--boton-texto)}
/* Sólo cuando es la barra de abajo (celular): al bajar quedan los íconos, sin rótulos; al subir, vuelven. */
@container marco (max-width: 767.98px){
  .v2-barra .v2-rotulo{transition:opacity .2s ease, max-height .2s ease;max-height:30px;overflow:hidden}
  .v2-barra.achicada{padding-top:2px}
  .v2-barra.achicada .v2-seccion{min-height:36px}
  .v2-barra.achicada .v2-rotulo{opacity:0;max-height:0}
}
@media (prefers-reduced-motion: reduce){.v2-barra .v2-rotulo{transition:none}}

/* Inicio · Próximos 7 días: "y N más" y los recordatorios vencidos (03/10). */
.v2-inicio-prox-mas{display:inline-block;margin:8px 0 0}
.v2-inicio-vencidos-linea{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 8px;padding:8px 0;text-decoration:none;color:inherit;border-bottom:1px solid var(--separador)}
/* =====================================================================
   PLAN V5 · PASO 1 (seguridad base): Perfil › Seguridad, los códigos de
   recuperación y "Confirmá que sos vos". Con las piezas de siempre
   (v2-conf, v2-conf-bloque); esto es sólo lo que no existía.
   ===================================================================== */
.v2-codigos-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(136px,1fr));gap:8px;margin:12px 0 16px;padding:0;list-style:none;counter-reset:codigo}
.v2-codigos-lista li{display:flex;align-items:center;gap:6px;min-height:44px;padding:8px 10px;border-radius:10px;background:var(--superficie-2);counter-increment:codigo}
.v2-codigos-lista li::before{content:counter(codigo);min-width:14px;font:400 12px/16px var(--letra);color:var(--tinta-3)}
.v2-codigos-lista code{font:600 15px/22px ui-monospace,SFMono-Regular,Menlo,monospace;white-space:nowrap;color:var(--tinta);user-select:all}
.v2-codigos-consejos{margin:8px 0 16px;padding-left:20px;color:var(--tinta-2);font-size:15px;line-height:22px}
.v2-seguridad-estado{display:inline-flex;align-items:center;gap:6px;font:600 15px/20px var(--letra)}
.v2-seguridad-estado.prendido{color:var(--ingreso)}
.v2-seguridad-falta{margin:8px 0 12px;padding-left:20px;color:var(--tinta-2);font-size:14px;line-height:20px}
.v2-seguridad-bloque .v2-boton{margin-top:8px}
@media print{
  .v2-codigos .v2-botones,.v2-codigos form,.v2-codigos-consejos{display:none}
  .v2-codigos-lista li{background:none;border:1px solid var(--separador)}
}
.v2-login-recordar{display:flex;align-items:center;gap:10px;min-height:44px;margin:-4px 0 12px;color:var(--tinta-2);font-size:14px;line-height:20px}
.v2-login-recordar input{width:20px;height:20px;accent-color:var(--tinta)}
/* =====================================================================
   OBJETIVOS Y FUTURO · REDISEÑO V5 (03/10). Una historia de arriba hacia
   abajo: tu plata hoy → cuánto te dura → objetivos → qué podés hacer →
   dónde ahorrar → qué falta cargar. Sistema v4: bloques planos de 16 px,
   sin sombra, títulos que concluyen, gráficos SVG a mano con la paleta de
   series (base en --serie-1 y la banda malo–bueno en el mismo color con
   transparencia: nunca rojo/verde, que acá significan deuda/ingreso).
   ===================================================================== */
.v2-fut{gap:16px}
.v2-fut .v2-fut-bloque{padding:16px;border-radius:var(--r-tarjeta);background:var(--superficie);box-shadow:var(--sombra-1);min-width:0}
@container marco (min-width: 768px){ .v2-fut .v2-fut-bloque{padding:16px} }
.v2-fut-paso{display:flex;align-items:center;gap:8px;margin:0;font:600 15px/20px var(--letra);color:var(--tinta-2)}
.v2-fut-paso > span{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:999px;background:var(--superficie-2);
  color:var(--tinta);font:600 12px/1 var(--letra-numeros);flex:none}
.v2-fut-paso-sin{color:var(--tinta)}
.v2-fut-cabeza{display:flex;align-items:center;justify-content:space-between;gap:12px}
.v2-fut-conclusion{margin:6px 0 14px;font:600 20px/26px var(--letra);color:var(--tinta);letter-spacing:-.2px;text-wrap:pretty}
@container marco (min-width: 768px){ .v2-fut-conclusion{font-size:22px;line-height:28px} }
.v2-fut-h3{margin:20px 0 4px;font:600 17px/22px var(--letra)}
.v2-fut-grafico-titulo{margin:0 0 10px;font:600 15px/20px var(--letra);color:var(--tinta)}
.v2-fut .v2-nota{color:var(--tinta-2)}

/* 1 · Tu plata hoy */
.v2-fut-kpis{margin:0 0 16px;background:var(--superficie-2)}
.v2-fut-kpis dd:not(.v2-kpi-nota){font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.v2-fut-reparto{margin:0 0 12px}
.v2-fut-reparto-barra{display:flex;height:14px;border-radius:999px;overflow:hidden;background:var(--pista);gap:2px}
.v2-fut-reparto-barra span{display:block;height:100%}
.v2-fut .libre{background:var(--serie-1)}
.v2-fut .apartado{background:var(--serie-3)}
.v2-fut .tarjetas{background:var(--serie-10)}
.v2-fut-leyenda{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;line-height:18px;color:var(--tinta-2)}
.v2-fut-leyenda li{display:inline-flex;align-items:center;gap:6px}
.v2-fut-leyenda b{color:var(--tinta);font-weight:600;font-variant-numeric:tabular-nums}
.v2-fut-leyenda i{display:inline-block;width:10px;height:10px;border-radius:3px;flex:none}
.v2-fut-leyenda i.base{height:3px;border-radius:2px;width:16px;background:var(--serie-1)}
.v2-fut-leyenda i.banda{width:16px;background:color-mix(in srgb, var(--serie-1) 22%, transparent)}
.v2-fut-leyenda i.prueba{height:0;width:16px;border-radius:0;border-top:2px dashed var(--serie-2)}
.v2-fut-explica{margin-top:4px}
.v2-fut-explica > summary{cursor:pointer;min-height:44px;display:inline-flex;align-items:center;color:var(--accion);font:400 15px/20px var(--letra)}
.v2-fut-explica dl{margin:4px 0 0;display:grid;gap:4px 16px;font-size:15px;line-height:21px}
.v2-fut-explica dt{font-weight:600;margin-top:8px}
.v2-fut-explica dd{margin:0;color:var(--tinta-2)}
@container marco (min-width: 768px){
  .v2-fut-explica dl{grid-template-columns:160px 1fr}
  .v2-fut-explica dt{margin-top:0}
}

/* 2 · ¿Cuánto te dura? */
.v2-fut-dura{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
@container marco (min-width: 1024px){ .v2-fut-dura{grid-template-columns:minmax(0,2fr) minmax(0,1fr);align-items:start} }
.v2-fut-abanico{margin:0;min-width:0}
.v2-fut-abanico-area{position:relative;padding-left:64px;height:200px}
@container marco (min-width: 768px){ .v2-fut-abanico-area{height:240px} }
.v2-fut-abanico-area svg{display:block;width:100%;height:100%;overflow:visible}
.v2-fut-eje-y{position:absolute;left:0;top:0;bottom:0;width:58px}
.v2-fut-eje-y span{position:absolute;right:0;transform:translateY(-50%);font:400 12px/16px var(--letra-numeros);color:var(--tinta-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.v2-fut-eje-x{position:relative;height:20px;margin:6px 0 0 64px}
.v2-fut-eje-x span{position:absolute;top:0;transform:translateX(-50%);font:400 12px/16px var(--letra);color:var(--tinta-3);white-space:nowrap}
.v2-fut-eje-x span.inicio{transform:none}
.v2-fut-eje-x span.fin{transform:translateX(-100%)}
.v2-fut-abanico svg .guia{stroke:var(--separador);stroke-width:1;vector-effect:non-scaling-stroke}
.v2-fut-abanico svg .cero{stroke:var(--tinta-3);stroke-width:1.5;vector-effect:non-scaling-stroke}
.v2-fut-abanico svg .banda{fill:var(--serie-1);fill-opacity:.18;stroke:none}
.v2-fut-abanico svg .base{fill:none;stroke:var(--serie-1);stroke-width:3;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.v2-fut-abanico svg .prueba{fill:none;stroke:var(--serie-2);stroke-width:2.5;stroke-dasharray:6 5;vector-effect:non-scaling-stroke}
.v2-fut-casos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.v2-fut-casos li,.v2-fut-obj-casos li{display:grid;grid-template-columns:56px minmax(0,1fr);gap:2px 10px;padding:10px 0;border-top:1px solid var(--separador)}
.v2-fut-casos li:first-child,.v2-fut-obj-casos li:first-child{border-top:0}
.v2-fut-caso-nombre{grid-row:span 2;font:600 13px/18px var(--letra);color:var(--tinta-2);padding-top:1px}
[data-caso="base"] > .v2-fut-caso-nombre{color:var(--serie-1)}
.v2-fut-caso-dato{font:600 15px/20px var(--letra);color:var(--tinta);font-variant-numeric:tabular-nums}
.v2-fut-caso-supuesto{font-size:13px;line-height:18px;color:var(--tinta-2)}

.v2-fut-pruebas{margin-top:20px;padding-top:4px;border-top:1px solid var(--separador)}
.v2-fut-lista-pruebas{list-style:none;margin:8px 0;padding:0}
.v2-fut-lista-pruebas li{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 0;border-top:1px solid var(--separador)}
.v2-fut-lista-pruebas li:first-child{border-top:0}
.v2-fut-lista-pruebas li.prendida .v2-fut-prueba-texto b::after{content:" · probando";font-weight:400;color:var(--serie-2)}
.v2-fut-prueba-texto{flex:1 1 220px;min-width:0;display:flex;flex-direction:column;gap:2px}
.v2-fut-prueba-texto span{font-size:13px;line-height:18px;color:var(--tinta-2)}
.v2-fut-prueba-texto .v2-fut-prueba-efecto{color:var(--tinta)}
.v2-fut-pruebas .v2-futuro-form{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}

/* 3 · Objetivos */
.v2-fut-objetivos{grid-template-columns:minmax(0,1fr);gap:12px}
@container marco (min-width: 900px){ .v2-fut-objetivos{grid-template-columns:repeat(2,minmax(0,1fr))} }
.v2-fut-objetivo{padding:16px;border-radius:14px;background:var(--superficie-2);gap:10px;min-width:0}
.v2-fut-objetivo .v2-futuro-objetivo-cabeza{align-items:flex-start;flex-wrap:wrap}
.v2-fut-objetivo .v2-futuro-objetivo-nombre{flex:1 1 140px}
.v2-fut-objetivo .v2-futuro-objetivo-numeros{font-size:15px;line-height:20px;color:var(--tinta-2)}
.v2-fut-objetivo .v2-futuro-objetivo-numeros b{font-size:20px;line-height:26px;color:var(--tinta)}
.v2-fut-objetivo .v2-futuro-barra > span{background:var(--serie-3)}
.v2-fut-datos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px;margin:2px 0 0}
.v2-fut-datos dt{font:400 13px/18px var(--letra);color:var(--tinta-2)}
.v2-fut-datos dd{margin:0;font:600 15px/20px var(--letra);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.v2-fut-objetivo-frase{margin:0;font:600 15px/21px var(--letra)}
.v2-fut-mini-titulo{margin:0 0 2px;font:600 13px/18px var(--letra);color:var(--tinta-2)}
.v2-fut-obj-casos ul{list-style:none;margin:0;padding:0}
.v2-fut-obj-casos li{padding:6px 0}
.v2-fut-prob p{margin:0;padding:10px 12px;border-radius:12px;background:var(--superficie);font-size:15px;line-height:21px}
.v2-fut-prob b{font:600 20px/24px var(--letra-numeros)}
.v2-fut-prob-rotulo{font-weight:600}
.v2-fut-modelos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@container marco (min-width: 768px){ .v2-fut-modelos{grid-template-columns:repeat(4,minmax(0,1fr))} }
.v2-fut-modelo{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:10px 12px;border:1px solid var(--separador);
  border-radius:12px;background:var(--superficie-2);color:var(--tinta);font:600 15px/20px var(--letra);text-align:left;cursor:pointer}
.v2-fut-modelo:hover{border-color:var(--campo-borde)}

/* 4 · Qué podés hacer */
.v2-fut-palancas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
@container marco (min-width: 1024px){ .v2-fut-palancas{grid-template-columns:repeat(3,minmax(0,1fr))} }
.v2-fut-palancas > li{padding:16px;border-radius:14px;background:var(--superficie-2);display:flex;flex-direction:column;gap:8px;min-width:0}
.v2-fut-palancas p{margin:0;color:var(--tinta-2);font-size:15px;line-height:21px}
.v2-fut-palanca-titulo{margin:0;font:600 17px/22px var(--letra)}
.v2-fut-antes-despues{display:grid;grid-template-columns:auto minmax(40px,1fr) auto;align-items:center;gap:6px 10px;margin-top:auto;padding-top:6px}
.v2-fut-ad-rotulo{font-size:13px;line-height:18px;color:var(--tinta-2)}
.v2-fut-ad-pista{display:block;height:10px;border-radius:999px;background:var(--pista);overflow:hidden}
.v2-fut-ad-pista > span{display:block;height:100%;border-radius:999px}
.v2-fut-ad-pista .antes{background:var(--serie-10)}
.v2-fut-ad-pista .despues{background:var(--serie-1)}
.v2-fut-ad-valor{font:600 13px/18px var(--letra-numeros);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.v2-fut-palancas .v2-fut-ad-unidad{font-size:12px;line-height:16px;color:var(--tinta-3)}

/* 5 · Dónde ahorrar */
.v2-fut-sugerencias li{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"tag tag" "texto monto";gap:6px 12px;align-items:start}
.v2-fut-sugerencias li > .v2-etiqueta{grid-area:tag;justify-self:start}
@container marco (min-width: 768px){
  .v2-fut-sugerencias li{grid-template-columns:110px minmax(0,1fr) auto;grid-template-areas:"tag texto monto"}
}
.v2-fut-sug-texto{grid-area:texto;display:flex;flex-direction:column;gap:2px;min-width:0}
.v2-fut-sug-texto span{color:var(--tinta-2);font-size:15px;line-height:21px}
.v2-fut-sug-monto{grid-area:monto;font:600 15px/20px var(--letra-numeros);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.v2-fut-sug-monto small{display:block;font:400 12px/16px var(--letra);color:var(--tinta-3)}

/* 6 · Lo que falta cargar */
.v2-fut-faltan{list-style:none;margin:10px 0 0;padding:0}
.v2-fut-faltan li{display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap;padding:12px 0;border-top:1px solid var(--separador)}
.v2-fut-faltan li:first-child{border-top:0}
.v2-fut-falta-texto{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;gap:2px}
.v2-fut-falta-texto span{color:var(--tinta-2);font-size:15px;line-height:21px}
.v2-fut-compu{font-weight:400;color:var(--tinta-2)}

/* La hoja: los modelos y la cuenta de la jubilación */
.v2-fut-chips{border:0;margin:0 0 4px;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.v2-fut-chips legend{font:600 13px/18px var(--letra);margin-bottom:6px;padding:0}
.v2-fut-chip{min-height:36px;padding:0 12px;border-radius:999px;border:1px solid var(--separador);background:var(--superficie-2);
  color:var(--tinta);font:400 14px/18px var(--letra);cursor:pointer}
.v2-fut-chip[aria-pressed="true"]{background:var(--boton-relleno);color:var(--boton-texto);border-color:var(--boton-relleno)}
.v2-fut-consejo{margin:4px 0 8px;padding:10px 12px;border-radius:12px;background:var(--superficie-2);color:var(--tinta-2);font-size:14px;line-height:20px}
.v2-fut-jubilacion{border:0;margin:0;padding:12px;border-radius:12px;background:var(--superficie-2)}
.v2-fut-jubilacion legend{font:600 15px/20px var(--letra);padding:0;float:left;width:100%;margin-bottom:8px}
.v2-fut-jub-resultado{margin:0;font:600 15px/21px var(--letra)}
.v2-fut-form [hidden]{display:none !important}
/* Ajustes de lectura en el celular (rediseño v5). */
.v2-fut-kpis dd:not(.v2-kpi-nota){font-size:22px;line-height:28px;white-space:nowrap}
@container marco (min-width: 768px){ .v2-fut-kpis dd:not(.v2-kpi-nota){font-size:26px;line-height:32px} }
.v2-fut-eje-x .solo-angosto{display:none}
@container marco (max-width: 559px){
  .v2-fut-eje-x .solo-ancho{display:none}
  .v2-fut-eje-x .solo-angosto{display:block}
}
.v2-fut-lista-pruebas li{display:grid;grid-template-columns:minmax(0,1fr);gap:4px}
@container marco (min-width: 768px){ .v2-fut-lista-pruebas li{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px} }
.v2-fut-prueba-acciones{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.v2-fut-obj-casos > summary{cursor:pointer;min-height:44px;display:flex;align-items:center;color:var(--accion);font:400 15px/20px var(--letra)}
.v2-fut-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
@container marco (min-width: 720px){ .v2-fut-kpis{grid-template-columns:repeat(4,minmax(0,1fr))} }

/* =====================================================================
   INICIO · KPIs Y GRÁFICOS (pedido de Emi, 05/10: "En Inicio de Familiar,
   Emi y Negocio tengo que ver gráficos y KPIs"). Va al final a propósito.
   De arriba hacia abajo: los números (el del mes y la franja de KPIs),
   después los gráficos, después lo que hay que hacer.
   - Celular: una columna; KPIs 2 × 2 (el último solo, a lo ancho).
   - Tableta (768–1023): una columna (regla de arriba).
   - 1024–1279: el número del mes + "¿Cuánto nos dura?" en 6 + 6, los
     gráficos en 6 + 6, Para revisar + Próximos en 6 + 6.
   - 1280 en adelante: 8 + 4 en las tres filas. KPIs siempre en 12.
   Colores de serie (--serie-*): gasto 1, ingreso 3, "sin cuenta" 10; el
   mes en curso, el mismo color más claro (y lo dice la leyenda).
   ===================================================================== */
.v2-inicio-kpis .v2-reporte-kpis > div{min-width:0}
/* El número entra en su celda: el tamaño sigue al ancho del marco (20 px a
   375, 17 a 320) y el monto no se parte (la unidad va pegada al número). */
.v2-inicio-kpis .v2-reporte-kpis dd:not(.v2-kpi-nota){font-size:min(22px,5.3cqi);line-height:1.3;overflow-wrap:normal}
.v2-inicio-kpis .v2-kpi-nota{overflow-wrap:break-word}
.v2-inicio-kpis dd.v2-kpi-nota.v2-inicio-pasado{color:var(--deuda);font-weight:600}
/* Celular: 2 × 2, y si son impares el último va a lo ancho. */
@container marco (max-width: 767px){
  .v2-inicio-kpis .v2-reporte-kpis > div:last-child:nth-child(odd){grid-column:1 / -1}
}
/* Tableta y compu chica: los que entren de a 150 px (3 + 2 con cinco). */
@container marco (min-width: 768px) and (max-width: 1279px){
  .v2-inicio-kpis .v2-reporte-kpis{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
}
/* Desde 1280: todos en un solo renglón (3, 4 o 5 según el espacio). */
@container marco (min-width: 1280px){
  .v2-inicio-kpis .v2-reporte-kpis{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
  .v2-inicio-kpis .v2-reporte-kpis dd:not(.v2-kpi-nota){font-size:22px;line-height:28px}
}
@container marco (min-width: 768px) and (max-width: 1279px){
  .v2-inicio-kpis .v2-reporte-kpis dd:not(.v2-kpi-nota){font-size:20px;line-height:26px;white-space:normal}
}

.v2-inicio-graf{padding:16px;border-radius:var(--r-tarjeta);background:var(--superficie);box-shadow:var(--sombra-1);min-width:0}
.v2-inicio-graf .v2-panel-cabeza{align-items:flex-start}
.v2-inicio-graf .v2-panel-cabeza h2{font-size:17px;line-height:22px;overflow-wrap:anywhere}
.v2-inicio-graf .v2-panel-cabeza .v2-inicio-ver{min-height:32px;flex:none}
.v2-inicio-graf .v2-panel-bajada{margin:-4px 0 12px}
.v2-inicio-graf .v2-panel-vacio{padding:0;background:none;box-shadow:none}
.v2-inicio-graf-enlace{display:block;color:inherit;text-decoration:none;border-radius:12px}
.v2-inicio-graf-enlace:focus-visible{outline:3px solid var(--accion);outline-offset:4px}

/* Barras de 6 meses */
.v2-inicio-barras-svg{height:140px}
.v2-inicio-barras-svg rect.gasto{fill:var(--serie-1)}
.v2-inicio-barras-svg rect.ingreso{fill:var(--serie-3)}
.v2-inicio-barras-svg rect.actual{fill-opacity:.5}
.v2-inicio-barras .v2-barras-eje{display:block}
.v2-inicio-leyenda{display:flex;flex-wrap:wrap;gap:4px 16px;margin:8px 0 0;padding:0;list-style:none;font-size:13px;line-height:18px;color:var(--tinta-2)}
.v2-inicio-leyenda li{display:inline-flex;align-items:center;gap:6px}
.v2-inicio-leyenda i{display:inline-block;width:10px;height:10px;border-radius:3px}
.v2-inicio-leyenda i.gasto{background:var(--serie-1)}
.v2-inicio-leyenda i.ingreso{background:var(--serie-3)}
.v2-inicio-leyenda i.actual{background:var(--serie-1);opacity:.5}

/* El aro "En qué se va" */
.v2-inicio-aro-cuerpo{display:flex;flex-direction:column;align-items:center;gap:12px}
.v2-inicio-aro-dibujo svg{display:block;width:min(180px,50vw);height:auto}
.v2-inicio-aro-lista{width:100%;margin:0;padding:0;list-style:none}
.v2-inicio-aro-lista li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:8px 0;border-bottom:1px solid var(--separador);font-size:15px;line-height:20px}
.v2-inicio-aro-lista li:last-child{border-bottom:0}
.v2-inicio-aro-nombre{min-width:0;overflow-wrap:anywhere}
.v2-inicio-aro-monto{flex:none;font:600 15px/20px var(--letra-numeros);font-variant-numeric:tabular-nums;white-space:nowrap}
.v2-inicio-aro-monto small{font-weight:400;color:var(--tinta-2);margin-left:4px}
.v2-inicio-aro-dibujo svg{animation:v2-torta-entra 480ms var(--curva-ios) both}
@media (prefers-reduced-motion: reduce){ .v2-inicio-aro-dibujo svg{animation:none!important} }

@container marco (min-width: 768px){
  .v2-inicio-graf{padding:18px 20px 16px}
  .v2-inicio-barras-svg{height:180px}
}
/* Al lado del aro, el bloque de barras se estira a su alto: el dibujo crece
   con él en vez de dejar un hueco abajo. */
@container marco (min-width: 1024px){
  .v2-inicio-barras{display:flex;flex-direction:column}
  .v2-inicio-barras > .v2-inicio-graf-enlace{flex:1 1 auto;display:flex;flex-direction:column;min-height:200px}
  .v2-inicio-barras .v2-inicio-barras-svg{flex:1 1 auto;height:auto;min-height:180px;max-height:320px}
}
/* Desde 1024: la grilla de 12, en el orden de lectura (grid-auto-flow:dense
   sube "¿Cuánto nos dura?" al lado del número del mes). */
@container marco (min-width: 1024px){
  .v2-inicio > .v2-inicio-hero{grid-column:1 / span 8}
  .v2-inicio > .v2-inicio-futuro{grid-column:9 / span 4;grid-row:auto}
  .v2-inicio:not(:has(> .v2-inicio-futuro)) > .v2-inicio-hero{grid-column:1 / -1}
  .v2-inicio > .v2-inicio-kpis{grid-column:1 / -1}
  .v2-inicio > .v2-inicio-barras{grid-column:1 / span 8}
  .v2-inicio > .v2-inicio-aro{grid-column:9 / span 4}
  .v2-inicio > .v2-inicio-revisar{grid-column:1 / span 8}
  .v2-inicio > .v2-inicio-proximos,
  .v2-inicio:has(> .v2-inicio-futuro) > .v2-inicio-proximos{grid-column:9 / span 4;grid-row:auto}
  .v2-inicio > .v2-inicio-barras,.v2-inicio > .v2-inicio-aro,
  .v2-inicio > .v2-inicio-revisar,.v2-inicio > .v2-inicio-proximos{align-self:stretch}
}
@container marco (min-width: 1024px) and (max-width: 1279px){
  .v2-inicio > .v2-inicio-hero,.v2-inicio > .v2-inicio-barras{grid-column:1 / span 6}
  .v2-inicio > .v2-inicio-futuro,.v2-inicio > .v2-inicio-aro{grid-column:7 / span 6}
  /* A este ancho, en 6 columnas las filas de Para revisar quedaban de tres
     palabras por renglón: Para revisar y Próximos van a lo ancho. */
  .v2-inicio > .v2-inicio-revisar,.v2-inicio > .v2-inicio-proximos,
  .v2-inicio:has(> .v2-inicio-futuro) > .v2-inicio-proximos{grid-column:1 / -1}
  .v2-inicio:not(:has(> .v2-inicio-futuro)) > .v2-inicio-hero{grid-column:1 / -1}
}
/* El aro con su lista al lado cuando hay lugar (tableta, o el bloque en 6). */
@container marco (min-width: 560px) and (max-width: 1023px){
  .v2-inicio-aro-cuerpo{flex-direction:row;align-items:center;gap:24px}
  .v2-inicio-aro-dibujo{flex:none}
}
/* "El mes en números" a 768–1279: con cuatro datos en fila, "Gastás 245 %
   más" no entraba en un renglón y se salía por la derecha. */
@container marco (min-width: 768px) and (max-width: 1279px){
  .v2-inicio-dl dd.v2-inicio-tendencia{white-space:normal}
}
/* =====================================================================
   PLAN DE JUBILACIÓN PRIVADA (Objetivos y futuro, 05/10): cuánto juntar,
   cuánto poner por mes, la curva por escenario, la mezcla por etapa de
   vida y el seguimiento. Colores de serie fijos: base = serie-1,
   prudente = serie-2, optimista = serie-3; la meta, en tinta.
   ===================================================================== */
.v2-jub-privado{display:flex;align-items:center;gap:6px;margin:-6px 0 8px;color:var(--tinta-2);font-size:14px;line-height:20px}
.v2-jub .v2-fut-h3{margin-top:24px}
.v2-jub-barras{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:auto minmax(40px,1fr) auto;align-items:center;gap:8px 10px}
.v2-jub-barras li{display:contents}
.v2-jub-barra-rotulo{font-size:14px;line-height:20px;color:var(--tinta-2);white-space:nowrap}
.v2-jub-barra-rotulo small{font-size:12px}
.v2-jub-barras li.base .v2-jub-barra-rotulo,.v2-jub-barras li.base .v2-jub-barra-valor{color:var(--tinta);font-weight:600}
.v2-jub-barra-pista{display:block;height:12px;border-radius:999px;background:var(--pista);overflow:hidden}
.v2-jub-barra-pista > span{display:block;height:100%;border-radius:999px;background:var(--serie-10)}
.v2-jub-barras li.base .v2-jub-barra-pista > span{background:var(--serie-1)}
.v2-jub-barra-valor{font:400 15px/20px var(--letra-numeros);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.v2-jub-capitales{margin:8px 0 0}

.v2-jub-tabla-envoltura{overflow-x:auto;margin:8px 0 4px;-webkit-overflow-scrolling:touch}
.v2-jub-tabla{width:100%;border-collapse:collapse;font-size:14px;line-height:20px;min-width:300px}
.v2-jub-tabla th,.v2-jub-tabla td{padding:8px 6px;text-align:right;border-top:1px solid var(--separador);font-variant-numeric:tabular-nums;vertical-align:top}
.v2-jub-tabla thead th{border-top:0;font-weight:600;font-size:12px;line-height:16px;color:var(--tinta-3)}
.v2-jub-tabla th:first-child{text-align:left}
.v2-jub-tabla tbody th{font-weight:600}
.v2-jub-tabla tbody th small{display:block;font-weight:400;font-size:12px;line-height:16px;color:var(--tinta-2)}
.v2-jub-tabla tbody th i{display:inline-block;width:12px;height:3px;border-radius:2px;margin:0 6px 3px 0;vertical-align:middle}
.v2-jub-tabla tr.base{background:var(--superficie-2)}
.v2-jub-tabla i.base{background:var(--serie-1)}
.v2-jub-tabla i.prudente{background:var(--serie-2)}
.v2-jub-tabla i.optimista{background:var(--serie-3)}
/* En el celular, las dos últimas columnas se esconden: quedan escenario, rendimiento y aporte. */
@container marco (max-width: 559px){
  .v2-jub-tabla th:nth-child(4),.v2-jub-tabla td:nth-child(4),.v2-jub-tabla th:nth-child(5),.v2-jub-tabla td:nth-child(5){display:none}
}

.v2-jub-curva{margin-top:16px}
.v2-jub-curva svg .esc-base{fill:none;stroke:var(--serie-1);stroke-width:3;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.v2-jub-curva svg .esc-prudente{fill:none;stroke:var(--serie-2);stroke-width:2;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.v2-jub-curva svg .esc-optimista{fill:none;stroke:var(--serie-3);stroke-width:2;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.v2-jub-curva svg .meta{stroke:var(--tinta);stroke-width:1.5;stroke-dasharray:6 5;vector-effect:non-scaling-stroke}
.v2-fut-leyenda i.jub-base{height:3px;border-radius:2px;width:16px;background:var(--serie-1)}
.v2-fut-leyenda i.jub-prudente{height:2px;border-radius:2px;width:16px;background:var(--serie-2)}
.v2-fut-leyenda i.jub-optimista{height:2px;border-radius:2px;width:16px;background:var(--serie-3)}
.v2-fut-leyenda i.jub-meta{height:0;width:16px;border-radius:0;border-top:2px dashed var(--tinta)}
.v2-fut-leyenda i.jub-rv,.v2-jub-fichas i.jub-rv{background:var(--serie-1)}
.v2-fut-leyenda i.jub-rf,.v2-jub-fichas i.jub-rf{background:var(--serie-3)}
.v2-fut-leyenda i.jub-liq,.v2-jub-fichas i.jub-liq{background:var(--serie-5)}

.v2-jub-tarde{margin:16px 0 0;padding:12px 14px;border-radius:12px;background:var(--superficie-2)}
.v2-jub-tarde-titulo{margin:0 0 6px;font-size:15px;line-height:21px}
.v2-jub-tarde ul{list-style:none;margin:0;padding:0}
.v2-jub-tarde li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:baseline;padding:6px 0;border-top:1px solid var(--separador);font-variant-numeric:tabular-nums}
.v2-jub-tarde li:first-child{border-top:0}
.v2-jub-sube{color:var(--deuda);font-weight:600}

.v2-jub-etapas{margin:8px 0 0}
.v2-jub-mezclas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.v2-jub-mezclas li{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;padding:8px;border-radius:12px}
@container marco (min-width: 640px){ .v2-jub-mezclas li{grid-template-columns:200px minmax(0,1fr);align-items:center;gap:12px} }
.v2-jub-mezclas li.actual{background:var(--superficie-2);box-shadow:inset 0 0 0 2px var(--serie-1)}
.v2-jub-etapa-nombre{font-weight:600;font-size:15px;line-height:20px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.v2-jub-etapa-nombre small{flex-basis:100%;font-weight:400;font-size:13px;line-height:18px;color:var(--tinta-2)}
.v2-jub-apilada{display:flex;gap:2px;height:28px;border-radius:8px;overflow:hidden}
.v2-jub-apilada > span{display:flex;align-items:center;justify-content:center;min-width:0;font:600 12px/16px var(--letra-numeros);color:var(--superficie);white-space:nowrap;overflow:hidden}
.v2-jub-apilada .rv{background:var(--serie-1)}
.v2-jub-apilada .rf{background:var(--serie-3)}
.v2-jub-apilada .liq{background:var(--serie-5)}

.v2-jub-fichas{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
@container marco (min-width: 900px){ .v2-jub-fichas{grid-template-columns:repeat(2,minmax(0,1fr))} }
.v2-jub-fichas li{padding:12px 14px;border-radius:12px;background:var(--superficie-2);min-width:0}
.v2-jub-fichas h4{margin:0 0 4px;font:600 15px/20px var(--letra);display:flex;align-items:center;gap:8px}
.v2-jub-fichas h4 i{display:inline-block;width:10px;height:10px;border-radius:3px;flex:none}
.v2-jub .v2-jub-fichas dl{grid-template-columns:minmax(0,1fr);gap:2px}
.v2-jub .v2-jub-fichas dt{margin-top:8px}

.v2-jub-seguimiento{margin-top:8px}
.v2-jub-seguimiento > p{font-size:15px;line-height:22px}
.v2-jub-datos{margin-top:20px}
.v2-jub-datos > summary{list-style:none;display:inline-flex}
.v2-jub-datos > summary::-webkit-details-marker{display:none}
.v2-jub .v2-futuro-form.v2-jub-form{display:block;margin-top:12px;max-width:720px}
.v2-jub-campos{display:grid;grid-template-columns:minmax(0,1fr);gap:0 16px}
@container marco (min-width: 720px){ .v2-jub-campos{grid-template-columns:repeat(2,minmax(0,1fr))} }
.v2-jub-form .v2-fut-jub-resultado{margin:4px 0 12px;min-height:21px}
.v2-jub-aviso{margin:20px 0 0}
.v2-jub-etapas + .v2-nota,.v2-jub-capitales + .v2-nota{margin-top:12px}
.v2-jub-tarde li > span:first-child{white-space:nowrap}
.v2-jub-tarde{max-width:560px}
.v2-jub-tabla td{white-space:nowrap}
/* 320 a 559 px: la tabla queda en escenario (con su rendimiento) y aporte; las barras de capital, apiladas. */
.v2-jub-tasa-angosta{display:none;font-weight:400;white-space:nowrap}
.v2-jub-tabla{min-width:0}
@container marco (max-width: 559px){
  .v2-jub-tasa-angosta{display:inline}
  .v2-jub-tabla th:nth-child(2),.v2-jub-tabla td:nth-child(2){display:none}
  .v2-jub-barras{grid-template-columns:minmax(0,1fr);gap:10px}
  .v2-jub-barras li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;align-items:baseline}
  .v2-jub-barra-pista{grid-column:1 / -1;grid-row:2}
}

/* ── Plan v5 paso 2: tu plan de inversión y "cuánto podemos gastar" (Mi panel y /mi-panel/plan) ── */
.v2-plan-bloque{min-width:0}
.v2-plan.mp{display:grid;gap:16px;max-width:880px}
.v2-plan-cabeza{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin-bottom:8px}
.v2-plan-cabeza .mp-h2{margin:0}
.v2-plan-kpis{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px 16px;margin:8px 0 0}
.v2-plan-kpis > div{min-width:0}
.v2-plan-kpis .v2-plan-kpi-principal{grid-column:1 / -1}
@media (min-width:768px){
  .v2-plan-kpis{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr)}
  .v2-plan-kpis .v2-plan-kpi-principal{grid-column:auto}
  .v2-plan-kpis > div + div{border-left:1px solid var(--separador);padding-left:16px}
}
.v2-plan-kpis dt{font:400 13px/18px var(--letra);color:var(--tinta-3)}
.v2-plan-kpis dd{margin:2px 0 0}
.v2-plan-num{font:600 28px/34px var(--letra-numeros,var(--letra));font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.v2-plan-kpi-principal .v2-plan-num{font-size:34px;line-height:41px}
.v2-plan-nota{font:400 13px/18px var(--letra);color:var(--tinta-2)}
@media (max-width:767px){.v2-plan-num{font-size:22px;line-height:28px}.v2-plan-kpi-principal .v2-plan-num{font-size:28px;line-height:34px}}
.v2-plan-cuenta{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin:14px 0 0;padding:10px 12px;border-radius:12px;background:var(--superficie-2);font:400 14px/20px var(--letra);color:var(--tinta-2);font-variant-numeric:tabular-nums}
.v2-plan-cuenta b{color:var(--tinta);font-weight:600}
.v2-plan-supuestos{margin-top:12px;font-size:13px;line-height:18px;color:var(--tinta-2)}
.v2-plan-supuestos summary{cursor:pointer;color:var(--tinta);font-weight:600;min-height:44px;display:flex;align-items:center}
.v2-plan-supuestos ul{margin:4px 0 0;padding-left:18px;display:grid;gap:4px}
.v2-plan-pie{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin:16px 0 0}
.v2-plan-pie .v2-nota{flex:1 1 260px;margin:0}

/* La barra de capas (<x-graf.capas>): colores de serie, en claro y oscuro. */
.v2-capas{margin:16px 0 4px}
.v2-capas-titulo{font:600 15px/20px var(--letra);margin-bottom:8px}
.v2-capas-filas{display:grid;gap:8px}
.v2-capas-fila{display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:8px}
.v2-capas-fila svg{display:block;width:100%;height:24px;overflow:visible}
.v2-capas-rotulo{font:400 13px/18px var(--letra);color:var(--tinta-2)}
.v2-capas-total{font:600 13px/18px var(--letra-numeros,var(--letra));font-variant-numeric:tabular-nums;white-space:nowrap}
.v2-capa-colchon{fill:var(--serie-1);background:var(--serie-1)}
.v2-capa-cercanos{fill:var(--serie-3);background:var(--serie-3)}
.v2-capa-largo{fill:var(--serie-5);background:var(--serie-5)}
.v2-capas-leyenda{list-style:none;display:flex;flex-wrap:wrap;gap:4px 16px;margin:10px 0 0;padding:0;font:400 13px/18px var(--letra);color:var(--tinta-2)}
.v2-capas-leyenda li{display:inline-flex;align-items:center;gap:6px}
.v2-capas-muestra{display:inline-block;width:10px;height:10px;border-radius:3px;flex:none}

/* El formulario del plan. */
.v2-plan-form{display:grid;gap:8px;margin-top:8px}
.v2-plan-grupo{border:0;margin:0;padding:12px 0 4px;border-top:1px solid var(--separador);min-width:0}
.v2-plan-grupo:first-of-type{border-top:0;padding-top:4px}
.v2-plan-grupo legend{display:flex;align-items:center;gap:8px;font:600 17px/22px var(--letra);padding:0;margin-bottom:10px}
.v2-plan-paso{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:999px;background:var(--superficie-2);font:600 13px/1 var(--letra-numeros,var(--letra));flex:none}
.v2-plan-grupo .v2-campo input{max-width:220px}
.v2-plan-grupo .v2-campo textarea{max-width:none;min-height:96px}
.v2-plan-grupo > .v2-ayuda{margin:0 0 12px}
.v2-plan-campos{display:grid;grid-template-columns:minmax(0,1fr);gap:0 16px}
@media (min-width:768px){.v2-plan-campos{grid-template-columns:repeat(3,minmax(0,1fr))}}
.v2-plan-campos .v2-campo input{max-width:none}
.v2-plan-aviso{margin:8px 0 0;padding:8px 12px;border-radius:10px;background:var(--revisar-fondo);font:400 13px/18px var(--letra);color:var(--tinta)}
.v2-plan-acciones{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:8px}
@media (max-width:600px){.v2-plan-acciones .v2-boton.primario{flex:1 1 100%}}
/* ── EL NEGOCIO (Plan v5, paso 4; DISEÑO §8.7) ─────────────────────────────
   /mi-panel/negocio y la tarjeta de la portada de Mi panel. Usa las clases
   mp-* de mi-panel.css (bloques, grilla, gráficos) y agrega sólo lo suyo.
   El Negocio va en índigo (--negocio-*); ventas en --ingreso, costos en
   --deuda; nada con color fijo, así claro y oscuro salen solos. */
.ng-kpis,.ng-cifras,.ng-tarjeta-cifras{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px;margin:0}
@media (min-width:768px){.ng-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.ng-cifras{grid-template-columns:repeat(4,minmax(0,1fr))}.ng-tarjeta-cifras{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1200px){.ng-kpis{grid-template-columns:repeat(6,minmax(0,1fr))}}
.ng-kpis>div,.ng-cifras>div,.ng-tarjeta-cifras>div{min-width:0}
.ng-kpis dt,.ng-cifras dt,.ng-tarjeta-cifras dt{font:400 13px/18px var(--letra);color:var(--tinta-3)}
.ng-kpis dd,.ng-cifras dd{margin:2px 0 0;font:600 24px/30px var(--letra-numeros,var(--letra));font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.ng-tarjeta-cifras dd{margin:2px 0 0;font:600 17px/22px var(--letra);font-variant-numeric:tabular-nums}
.ng-kpis dd.ng-kpi-nota,.ng-cifras dd.ng-kpi-nota{font:400 13px/18px var(--letra);color:var(--tinta-2)}
@media (max-width:767px){.ng-kpis dd,.ng-cifras dd{font-size:20px;line-height:26px}}
.ng-bien,.ng-bien-texto{color:var(--ingreso)}
.ng-mal{color:var(--deuda)}
.ng-grande{margin:0 0 4px;font:600 28px/34px var(--letra-numeros,var(--letra));font-variant-numeric:tabular-nums;color:var(--negocio-marca-texto)}
.ng-mini .mp-fila{padding:8px 0;font-size:15px}
.ng-roja{padding:8px 12px;border-radius:10px;background:var(--deuda-fondo);color:var(--deuda);font-size:14px;line-height:20px}
.ng-revisar{padding:8px 12px;border-radius:10px;background:var(--revisar-fondo);color:var(--revisar-texto);font-size:14px;line-height:20px}
.v2-etiqueta.ng-etiqueta-roja{background:var(--deuda-fondo);color:var(--deuda)}
.ng-opcion-roja{border-left:3px solid var(--deuda);padding-left:12px}
.ng-numero{color:var(--negocio-marca-texto)}

/* Escenarios de recupero */
.ng-escenarios{list-style:none;margin:6px 0 4px;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
@media (min-width:768px){.ng-escenarios{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}}
.ng-esc{padding:10px 12px;border-radius:12px;background:var(--superficie-2);min-width:0}
.ng-esc-nombre{display:block;font:600 13px/18px var(--letra);color:var(--tinta-2)}
.ng-esc.malo .ng-esc-nombre{color:var(--deuda)}
.ng-esc.base .ng-esc-nombre{color:var(--accion)}
.ng-esc.bueno .ng-esc-nombre{color:var(--ingreso)}
.ng-esc b{display:block;font-size:16px;line-height:22px}
.ng-esc-sup{display:block;font-size:13px;line-height:18px;color:var(--tinta-2)}

/* Gráficos propios (SVG a mano) */
.ng-graf svg{max-width:560px}
.ng-graf .ng-abanico .mp-rotulo,.ng-graf .ng-abanico .mp-eje{font-size:15px}
.ng-graf .ng-medidor{max-width:440px}
.ng-graf .ng-medidor .mp-eje,.ng-graf .ng-medidor .mp-valor{font-size:13px}
.ng-graf .ng-cascada{max-width:460px}
.ng-graf .ng-cascada .mp-eje,.ng-graf .ng-cascada .mp-valor{font-size:14px}
.ng-graf .ng-barras-h .mp-rotulo,.ng-graf .ng-barras-h .mp-valor{font-size:14px}
.ng-graf .ng-barras-mes .mp-eje{font-size:13px}
.ng-cero{stroke:var(--tinta-3);stroke-width:1}
.ng-umbral{stroke:var(--negocio-relleno);stroke-dasharray:5 4;stroke-width:1.5}
.ng-relleno.bien{fill:var(--ingreso)}
.ng-relleno.mal{fill:var(--deuda)}
.ng-marca{stroke:var(--tinta);stroke-width:2.5}
.ng-paso.entra,.ng-paso.total-bien{fill:var(--ingreso)}
.ng-paso.sale,.ng-paso.total-mal{fill:var(--deuda)}
.ng-paso.total-bien,.ng-paso.total-mal{opacity:.75}
.ng-barra,.ng-serie-a{fill:var(--negocio-relleno)}
.ng-serie-b{fill:var(--ingreso)}
.ng-muestra-a{background:var(--negocio-relleno)}
.ng-muestra-b{background:var(--ingreso)}
.ng-muestra-malo{background:var(--deuda)}
.ng-muestra-base{background:var(--accion)}
.ng-muestra-bueno{background:var(--ingreso)}

/* La revisión pactada */
.ng-form{margin-top:12px;max-width:760px}
.ng-campos{display:grid;grid-template-columns:minmax(0,1fr);gap:0 16px}
@media (min-width:768px){.ng-campos{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ng-campos small{display:block;margin-top:6px}

/* ── CENTRO DE CONTROL · base mínima del constructor A (el diseño final es del constructor B) ── */
.v2-centro-urgente{margin:0 0 12px;font:600 15px/20px var(--letra);color:var(--tinta)}
.v2-centro-filtros{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.v2-centro-filtro{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:22px;
  background:var(--superficie);border:1px solid var(--separador);color:var(--tinta);text-decoration:none;font:400 15px/20px var(--letra)}
.v2-centro-filtro[aria-current="true"]{background:var(--superficie-2);font-weight:600}
.v2-centro-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.v2-centro-fila{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px 12px;padding:12px 14px;border-radius:12px;
  background:var(--superficie);border:1px solid var(--separador);min-width:0}
.v2-centro-check{width:22px;height:22px;margin-top:2px;flex:none}
.v2-centro-texto{flex:1 1 200px;min-width:0}
.v2-centro-texto p{margin:0}
.v2-centro-linea1{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.v2-centro-titulo{font:600 16px/21px var(--letra);overflow-wrap:anywhere}
.v2-centro-linea2{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:2px}
.v2-centro-monto{font-variant-numeric:tabular-nums;white-space:nowrap}
.v2-centro-falta{color:var(--tinta-2)}
.v2-centro-detalle{overflow-wrap:anywhere}
.v2-centro-sello{display:inline-flex;align-items:center;min-height:22px;padding:0 8px;border-radius:11px;
  background:var(--esp-marca-fondo,var(--superficie-2));color:var(--esp-marca-texto,var(--tinta));font:600 12px/16px var(--letra)}
.v2-centro-acciones{display:flex;flex-wrap:wrap;align-items:center;gap:8px;max-width:100%}
.v2-centro-acciones form{margin:0;max-width:100%}
.v2-centro-asignar{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.v2-centro-asignar select,.v2-centro-asignar input[type="text"]{min-height:44px;max-width:100%;padding:0 10px;border-radius:10px;
  border:1px solid var(--campo-borde);background:var(--superficie);color:var(--tinta);font:400 15px/20px var(--letra)}
.v2-centro-asignar select{min-width:0;flex:1 1 160px}
.v2-centro-asignar input[type="text"]{width:9em}
.v2-centro-otro{flex-basis:100%}
.v2-centro-otro summary{min-height:44px;display:flex;align-items:center;cursor:pointer;color:var(--accion)}
.v2-centro-otro form{margin-top:8px}
.v2-centro-deshacer{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 12px;padding:8px 12px;border-radius:10px;background:var(--superficie-2)}
.v2-centro-lote{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:12px}
.v2-centro-lote .v2-nota{flex-basis:100%;margin:0}
.v2-centro-tarjetas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:12px}
.v2-centro-tarjeta{padding:16px;border-radius:var(--r-tarjeta,16px);background:var(--superficie);border:1px solid var(--separador);
  border-top:4px solid var(--esp-relleno,var(--separador));min-width:0}
.v2-centro-tarjeta h3{margin:0 0 4px;font:600 18px/24px var(--letra)}
.v2-centro-tarjeta p{margin:4px 0}
.v2-centro-kpis{display:grid;gap:8px;margin:12px 0}
.v2-centro-kpis dt{font:400 13px/18px var(--letra);color:var(--tinta-2)}
.v2-centro-kpis dd{margin:0;font-variant-numeric:tabular-nums}
.v2-centro-accesos{display:flex;flex-wrap:wrap;gap:8px}
.v2-centro-accesos form{margin:0}
.v2-centro-subtitulo{margin:20px 0 8px;font:600 16px/21px var(--letra)}
.v2-centro-tareas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.v2-centro-tareas li{display:flex;flex-wrap:wrap;gap:4px 12px;padding:8px 0;border-bottom:1px solid var(--separador)}
.v2-centro-tareas li > span:first-child{flex:1 1 180px;min-width:0}
.v2-inicio-centro a{font-weight:600}
/* Mi plata (Fondo-A): "además pusiste" y aportes sospechosos, mínimo (Fondo-B lo pule) */
.v2-ademas{margin-top:8px}
.v2-aportes-lista{list-style:none;margin:0;padding:0}
.v2-aportes-lista li{padding:12px 0;border-top:1px solid var(--separador)}
.v2-aportes-acciones{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:8px}
.v2-aportes-acciones form{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.v2-aportes-acciones select{max-width:100%}

/* =====================================================================
   MI PLATA (Fondo-B, FONDO-COMUN §3.2 y §3.3): la pantalla /mi-plata, los
   sellos de Movimientos, "Quién lo pagó" del Inicio y la tarjeta del
   Centro. Sólo tokens que ya existen (identidad de espacio, serie,
   ingreso, deuda, atención): ningún color nuevo. Prefijo mip-.
   ===================================================================== */
.mip-tono-familiar{fill:var(--familiar-relleno);background:var(--familiar-relleno)}
.mip-tono-emi{fill:var(--emi-relleno);background:var(--emi-relleno)}
.mip-tono-jessi{fill:var(--jessi-relleno);background:var(--jessi-relleno)}
.mip-tono-negocio{fill:var(--negocio-relleno);background:var(--negocio-relleno)}
.mip-tono-personal{fill:var(--personal-relleno);background:var(--personal-relleno)}
.mip-tono-entra{fill:var(--ingreso);background:var(--ingreso)}
.mip-tono-ahorro-sale{fill:var(--progreso-atencion);background:var(--progreso-atencion)}
.mip-tono-s1,.mp-tono-s1{fill:var(--serie-1);background:var(--serie-1)}
.mip-tono-s2,.mp-tono-s2{fill:var(--serie-3);background:var(--serie-3)}
.mip-tono-s3,.mp-tono-s3{fill:var(--serie-2);background:var(--serie-2)}
.mip-tono-s4,.mp-tono-s4{fill:var(--serie-5);background:var(--serie-5)}
.mip-tono-s5,.mp-tono-s5{fill:var(--serie-7);background:var(--serie-7)}
.mip-tono-s6,.mp-tono-s6{fill:var(--serie-10);background:var(--serie-10)}
.mip-nota{color:var(--tinta-2);font-size:13px;line-height:18px}
.mip-leyenda{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 16px;font-size:14px;line-height:20px}
.mip-muestra{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:middle}

/* La pantalla */
.mip .mp-grilla{align-items:start}
.mip-conclusion{font:600 17px/23px var(--letra);margin:4px 0 8px}
.mip-rotulo{margin:0;font:400 13px/18px var(--letra);color:var(--tinta-3)}
.mip-numero{margin:2px 0 4px;font:600 34px/41px var(--letra-numeros,var(--letra));font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.mip-hay{display:grid;grid-template-columns:1fr;gap:16px}
.mip-hay-lista{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;margin:0}
.mip-hay-lista > div{min-width:0}
.mip-hay-lista dt{font:400 13px/18px var(--letra);color:var(--tinta-3)}
.mip-hay-lista dd{margin:2px 0 0;font:600 20px/26px var(--letra-numeros,var(--letra));font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.mip-hay-lista dd.mip-nota{font:400 13px/18px var(--letra);color:var(--tinta-2)}
.mip-deuda{color:var(--deuda)}
.mip-acobrar{grid-column:1 / -1;padding:10px 12px;border:1px dashed var(--campo-borde);border-radius:12px}
.mip-tres{grid-template-columns:repeat(3,minmax(0,1fr));margin:8px 0}
@container marco (min-width: 1024px){
  .mip-hay{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}
  .mip-hay-lista{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mip-acobrar{grid-column:auto}
}
.mip-flujo-fig svg.mip-flujo{max-width:860px;margin:0 auto}
.mip-banda{opacity:.32}
.mip-flujo-centro{fill:var(--tinta-2)}
.mip-flujo .mip-flujo-rot{font-size:13px;fill:var(--tinta-2)}
.mip-flujo .mip-flujo-val{font-size:13px;fill:var(--tinta)}
.mip-graf .mip-apiladas{max-width:620px}
.mip-graf .mip-apiladas .mp-eje{font-size:12px}

/* Cuánto dura */
.mip-dura{width:100%;border-collapse:collapse;font-size:14px;line-height:19px;margin:8px 0}
.mip-dura th,.mip-dura td{padding:8px 6px;border-top:1px solid var(--separador);text-align:left;vertical-align:top;font-variant-numeric:tabular-nums}
.mip-dura thead th{border-top:0;font:600 12px/16px var(--letra);color:var(--tinta-2)}
.mip-dura tbody th{font-weight:600}
.mip-dura tbody th .mip-nota{display:block;font-weight:400}
.mip-dura-base td,.mip-dura-base th{background:var(--superficie-2)}

/* El reparto (sobres) */
.mip-sobres{list-style:none;margin:8px 0 0;padding:0}
.mip-sobre{padding:10px 0;border-top:1px solid var(--separador)}
.mip-sobre:first-child{border-top:0}
.mip-sobre-cabeza{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;align-items:baseline}
.mip-sobre-nombre{font-weight:600}
.mip-sobre-num{font-variant-numeric:tabular-nums;color:var(--tinta-2)}
.mip-barra{height:10px;border-radius:5px;background:var(--pista);margin:6px 0;overflow:hidden}
.mip-barra-relleno{display:block;height:100%;border-radius:5px;background:var(--tinta-3)}
.mip-barra-relleno.mip-sem-verde{background:var(--progreso-bien)}
.mip-barra-relleno.mip-sem-amarillo{background:var(--progreso-atencion)}
.mip-barra-relleno.mip-sem-rojo{background:var(--deuda)}
.mip-sobre-pie{display:flex;flex-wrap:wrap;gap:2px 10px;margin:0}
.mip-semaforo{font:600 13px/18px var(--letra)}
.mip-semaforo.mip-sem-verde{color:var(--ingreso)}
.mip-semaforo.mip-sem-amarillo{color:var(--revisar-texto)}
.mip-semaforo.mip-sem-rojo{color:var(--deuda)}
.mip-semaforo.mip-sem-sin{color:var(--tinta-2)}
.mip-sobre-ahorro .mip-sobre-num{color:var(--tinta)}
.mip-editar{margin-top:12px;border-top:1px solid var(--separador);padding-top:4px}
.mip-editar summary{min-height:44px;display:flex;align-items:center;cursor:pointer;color:var(--accion);font-weight:600}
.mip-form{display:flex;flex-direction:column;gap:10px}
.mip-campo{display:flex;flex-direction:column;gap:4px}
.mip-campo label{font:600 14px/19px var(--letra)}
.mip-campo input{min-height:44px;max-width:100%;width:100%;box-sizing:border-box}
.mip-form > .v2-boton{align-self:flex-start}

/* El Negocio y vos */
.mip-accion{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:12px}
.mip-aviso{padding:8px 12px;border-radius:10px;background:var(--superficie-2)}

/* El camino a separar */
.mip-pasos{list-style:none;margin:0;padding:0}
.mip-paso{padding:10px 0;border-top:1px solid var(--separador)}
.mip-paso:first-child{border-top:0}
.mip-paso fieldset{border:0;margin:0;padding:0;min-width:0}
.mip-paso-nombre{font-weight:600;padding:0}
.mip-paso[data-estado="hecho"] .mip-paso-nombre::before{content:"✓ ";color:var(--progreso-bien)}
.mip-opciones{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.mip-opcion{position:relative;display:inline-flex}
.mip-opcion input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.mip-opcion span{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--campo-borde);font:600 14px/18px var(--letra);color:var(--tinta)}
.mip-opcion input:checked + span{background:var(--boton-relleno);border-color:var(--boton-relleno);color:var(--boton-texto)}
.mip-opcion input:focus-visible + span{outline:2px solid var(--accion);outline-offset:2px}

/* Los sellos de Movimientos */
.mip-sellos{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0 2px}
.mip-sello{display:inline-flex;align-items:center;max-width:100%;padding:2px 8px;border-radius:999px;background:var(--superficie-2);color:var(--tinta);
  font:600 12px/16px var(--letra);white-space:normal;overflow-wrap:anywhere}
.mip-marca-familiar{background:var(--familiar-marca-fondo);color:var(--familiar-marca-texto)}
.mip-marca-emi{background:var(--emi-marca-fondo);color:var(--emi-marca-texto)}
.mip-marca-jessi{background:var(--jessi-marca-fondo);color:var(--jessi-marca-texto)}
.mip-marca-negocio{background:var(--negocio-marca-fondo);color:var(--negocio-marca-texto)}
.mip-marca-personal{background:var(--personal-marca-fondo);color:var(--personal-marca-texto)}
.mip-sello-paso{background:transparent;border:1px dashed var(--campo-borde);color:var(--tinta-2);font-weight:400}
tr:has(.mip-sello-paso) .v2-mov-monto{color:var(--tinta-2)}

/* Quién lo pagó (Inicio de Familiar y del Negocio) */
.mip-quien{padding:16px;border-radius:var(--r-tarjeta,16px);background:var(--superficie)}
.mip-quien-titulo{margin:0 0 4px;font:600 17px/22px var(--letra)}
.mip-quien-frase{margin:0 0 8px;font-size:16px;line-height:22px}
.mip-quien-barra{display:flex;gap:2px;height:12px;border-radius:6px;overflow:hidden;background:var(--pista)}
.mip-quien-parte{display:block;height:100%}

/* La tarjeta del Centro */
.mip-tarjeta{padding:16px;border-radius:var(--r-tarjeta,16px);background:var(--superficie);border:1px solid var(--separador);min-width:0}
.mip-tarjeta-titulo{margin:0 0 8px;font:600 18px/24px var(--letra)}
.mip-tarjeta-datos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px;margin:0 0 8px}
.mip-tarjeta-datos dt{font:400 13px/18px var(--letra);color:var(--tinta-2)}
.mip-tarjeta-datos dd{margin:0;font:600 20px/26px var(--letra-numeros,var(--letra));font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.mip-tarjeta .v2-boton{margin-top:8px}

@media (prefers-reduced-motion: no-preference){
  .mip-barra-relleno{transition:width .18s ease-out}
  .mip-opcion span{transition:background-color .15s ease,color .15s ease}
}

/* =====================================================================
   CENTRO DE CONTROL · diseño final (constructor B, CENTRO §4.1 y §4.3).
   Pisa la base mínima de arriba con la misma especificidad (viene después).
   - Celular: la lista primero; los espacios en una fila que se desliza
     (scroll-snap) adentro de su caja, sin correr la página; botones de 44.
   - Compu: hasta 1279 una columna; desde 1280, lista en 8 columnas y
     espacios + agentes en 4 (DISEÑO v4: grilla de 12).
   - Un solo nivel de bloque (16 px, sin sombra de más): la lista es UN
     bloque con filas separadas por 1 px; el grupo se abre adentro.
   - Movimiento sólo al resolver (la fila se va, 180 ms) y al abrir un
     grupo; con "reducir movimiento", nada. Sin colores nuevos: el espacio
     pinta con sus tokens (marca, relleno) y "falta" va en ámbar (revisar).
   ===================================================================== */
.v2-centro{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;align-items:start}
.v2-centro-resolver,.v2-centro-lado{min-width:0}
.v2-centro-lado{display:grid;gap:32px}
.v2-centro-cabeza{display:grid;gap:12px;margin:0 0 16px}
.v2-centro-total{margin:0;font:600 28px/34px var(--letra);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.v2-centro-total:focus{outline:none}
.v2-centro-total:focus-visible{outline:2px solid var(--accion);outline-offset:4px;border-radius:6px}
.v2-centro-urgente{margin:0;padding:10px 14px;border-radius:12px;background:var(--revisar-fondo);color:var(--revisar-texto);font:600 15px/20px var(--letra)}
.v2-centro-h2{margin:0 0 10px;font:600 20px/25px var(--letra)}

/* Los filtros: chips. En el celular se deslizan de costado con el borde desvanecido. */
.v2-centro-filtros{display:flex;flex-wrap:nowrap;gap:8px;margin:0;padding:2px;overflow-x:auto;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);padding-right:24px}
.v2-centro-filtros::-webkit-scrollbar{display:none}
.v2-centro-filtro{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:0;border-radius:var(--r-pill);
  background:var(--superficie);box-shadow:var(--sombra-1);color:var(--tinta);text-decoration:none;font:500 15px/20px var(--letra);white-space:nowrap}
.v2-centro-filtro-n{font-variant-numeric:tabular-nums;color:var(--tinta-2)}
.v2-centro-filtro[aria-current="true"]{background:var(--tinta);color:var(--superficie);font-weight:600}
.v2-centro-filtro[aria-current="true"] .v2-centro-filtro-n{color:inherit}
.v2-centro-filtro[data-space][aria-current="true"]{background:var(--esp-marca-fondo);color:var(--esp-marca-texto);box-shadow:inset 0 0 0 2px var(--esp-relleno)}
.v2-centro-punto{flex:none;display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--esp-relleno)}
@container marco (min-width: 768px){
  .v2-centro-filtros{flex-wrap:wrap;overflow:visible;-webkit-mask-image:none;mask-image:none;padding-right:2px}
}

/* La lista única: un bloque, filas con separador. */
.v2-centro-lista{display:block;gap:0;list-style:none;margin:0;padding:0;background:var(--superficie);border-radius:var(--r-tarjeta);box-shadow:var(--sombra-1);overflow:hidden}
.v2-centro-lista > li + li,.v2-centro-sublista > li + li{border-top:1px solid var(--separador)}
.v2-centro-fila{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px 12px;padding:14px 16px;border:0;border-radius:0;background:transparent;min-width:0}
.v2-centro-fila:focus{outline:none}
.v2-centro-fila:focus-visible{outline:2px solid var(--accion);outline-offset:-2px}
.v2-centro-check{width:22px;height:22px;margin:0;flex:none;accent-color:var(--accion)}
.v2-centro-texto{flex:1 1 220px;min-width:0}
.v2-centro-linea1{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}
.v2-centro-titulo{flex:1 1 auto;min-width:0;font:600 16px/21px var(--letra);overflow-wrap:anywhere}
.v2-centro-linea1 .v2-centro-monto{margin-left:auto;font:600 16px/21px var(--letra)}
.v2-centro-monto{font-variant-numeric:tabular-nums;white-space:nowrap}
.v2-centro-linea2{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin-top:4px}
.v2-centro-falta{display:inline-flex;align-items:center;min-height:22px;padding:0 8px;border-radius:var(--r-pill);
  background:var(--revisar-fondo);color:var(--revisar-texto);font:600 12px/16px var(--letra)}
.v2-centro-motivo{margin:6px 0 0;color:var(--revisar-texto);font:600 13px/18px var(--letra)}
.v2-centro-error:not([hidden]){display:block;margin:6px 0 0;color:var(--deuda);font:600 13px/18px var(--letra)}
.v2-centro-sello{display:inline-flex;align-items:center;gap:6px;min-height:22px;padding:0 8px;border-radius:var(--r-pill);
  background:var(--esp-marca-fondo);color:var(--esp-marca-texto);font:600 12px/16px var(--letra);white-space:nowrap}
.v2-centro-acciones{display:flex;flex-wrap:wrap;align-items:center;gap:8px;max-width:100%;flex:1 1 100%}
.v2-centro-acciones .v2-boton{min-height:44px}
.v2-centro-asignar{flex:1 1 auto}
.v2-centro-asignar select{flex:1 1 180px}
@container marco (min-width: 768px){
  .v2-centro-acciones{flex:0 1 auto;justify-content:flex-end;margin-left:auto}
  .v2-centro-asignar{flex:0 1 auto}
  .v2-centro-asignar select{flex:0 1 220px;max-width:240px}
  .v2-centro-otro{flex-basis:100%}
}
/* La fila resuelta se va (y el JS la esconde al terminar). */
@keyframes v2-centro-sale{to{opacity:0;transform:translateX(32px)}}
@keyframes v2-centro-vuelve{from{opacity:0;transform:translateX(-16px)}}
.v2-centro-fila.sale{animation:v2-centro-sale 180ms var(--curva-sale) forwards;pointer-events:none}
.v2-centro-fila.vuelve{animation:v2-centro-vuelve 180ms var(--curva-sale)}
.v2-centro-fila.ocupada{opacity:.6}

/* El grupo: "Negocio · 23 para confirmar · US$ 1.234", que se abre en el lugar. */
.v2-centro-grupo{padding:0}
.v2-centro-grupo-cabeza{display:flex;align-items:center;gap:12px;min-height:64px;padding:12px 16px;cursor:pointer;list-style:none}
.v2-centro-grupo-cabeza::-webkit-details-marker{display:none}
.v2-centro-grupo-cabeza:focus-visible{outline:2px solid var(--accion);outline-offset:-2px}
.v2-centro-grupo-texto{flex:1;min-width:0;display:grid;gap:2px}
.v2-centro-grupo-titulo{font:600 16px/21px var(--letra)}
.v2-centro-grupo-titulo [data-grupo-n]{font-variant-numeric:tabular-nums}
.v2-centro-grupo-nota{color:var(--tinta-2);font:400 13px/18px var(--letra)}
.v2-centro-grupo-nota .v2-centro-monto{color:var(--tinta);font-weight:600}
.v2-centro-grupo-caros{color:var(--revisar-texto);font-weight:600}
.v2-centro-grupo-flecha{flex:none;width:18px;height:18px;color:var(--tinta-3);transition:transform 180ms var(--curva-sale)}
.v2-centro-grupo-det[open] > summary .v2-centro-grupo-flecha{transform:rotate(180deg)}
@keyframes v2-centro-abre{from{opacity:0;transform:translateY(-4px)}}
.v2-centro-grupo-det[open] > .v2-centro-grupo-cuerpo{animation:v2-centro-abre 180ms var(--curva-sale)}
.v2-centro-grupo-cuerpo{border-top:1px solid var(--separador);background:var(--superficie-2)}
.v2-centro-todos{margin:0;padding:4px 16px;border-bottom:1px solid var(--separador)}
.v2-centro-todos.v2-nota{padding:12px 16px}
.v2-centro-todos .v2-casilla input{width:22px;height:22px}
.v2-centro-sublista{list-style:none;margin:0;padding:0}
.v2-centro-fuera{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;padding:8px 16px;border-top:1px solid var(--separador)}
.v2-centro-fuera .v2-nota{margin:0;flex:1 1 220px}
.v2-centro-fuera form{margin:0}

/* La barra del lote: oscura, como la de Para revisar; se queda a la vista al bajar. */
.v2-centro-barra{position:sticky;bottom:calc(var(--tabbar-h, 0px) + 8px);z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;
  margin:8px;padding:6px 6px 6px 16px;border-radius:14px;background:var(--tinta);color:var(--superficie);box-shadow:var(--sombra-flota)}
.v2-centro-barra-cuenta{margin-right:auto;font:600 15px/20px var(--letra);font-variant-numeric:tabular-nums}
.v2-centro-barra-revise{display:flex;align-items:center;gap:8px;min-height:44px;font:400 14px/18px var(--letra)}
.v2-centro-barra-revise input{width:22px;height:22px;flex:none;accent-color:var(--superficie)}
.v2-centro-barra .v2-boton.secundario{background:var(--superficie);color:var(--tinta);border-color:transparent}
.v2-centro-barra .v2-boton.texto{color:var(--superficie)}
.v2-centro-barra .v2-boton[disabled]{opacity:.5;cursor:default}
.v2-centro-barra :focus-visible{outline:2px solid var(--superficie);outline-offset:2px}
.v2-centro-barra-pregunta:not([hidden]){display:flex;flex-wrap:wrap;align-items:center;gap:8px;width:100%;font:600 15px/20px var(--letra)}
.v2-centro-barra-pregunta > span{flex:1 1 180px}
.v2-centro-barra-nota{margin:0;padding:0 16px 12px}
/* Con JS: la barra aparece al elegir y la pregunta de los 5 o más va en la barra. */
.v2-centro.con-js .v2-centro-barra:not(.visible){display:none}
.v2-centro.con-js .v2-centro-barra-revise{display:none}
.v2-centro.con-js .v2-centro-barra.preguntando > :not(.v2-centro-barra-pregunta){display:none}

.v2-centro-vacio:not([hidden]){display:flex;align-items:center;gap:10px;margin:0;padding:20px 16px;border-radius:var(--r-tarjeta);
  background:var(--superficie);box-shadow:var(--sombra-1);color:var(--tinta-2);font:400 16px/21px var(--letra)}
.v2-centro-vacio .v2-icono{flex:none;width:28px;height:28px;padding:4px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--ingreso);color:var(--ingreso)}
.v2-centro-deshacer{margin:0 0 12px}

/* Tus espacios: en el celular, una fila que se desliza adentro de su caja. */
.v2-centro-tarjetas{display:flex;gap:12px;list-style:none;margin:0;padding:2px 2px 6px;overflow-x:auto;scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;scrollbar-width:none}
.v2-centro-tarjetas::-webkit-scrollbar{display:none}
.v2-centro-tarjeta{flex:0 0 min(86%,320px);scroll-snap-align:start;display:flex;flex-direction:column;gap:4px;padding:16px;border:0;
  border-top:4px solid var(--esp-relleno);border-radius:var(--r-tarjeta);background:var(--superficie);box-shadow:var(--sombra-1);min-width:0}
.v2-centro-tarjeta-titulo{display:flex;align-items:center;gap:8px;margin:0;font:600 17px/22px var(--letra)}
.v2-centro-tarjeta-titulo small{font-weight:400}
.v2-centro-tarjeta-pend{margin:0;color:var(--tinta-2);font:400 14px/19px var(--letra)}
.v2-centro-kpis{display:block;margin:8px 0}
.v2-centro-kpis > div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 8px;padding:8px 0;border-top:1px solid var(--separador)}
.v2-centro-kpis dt{font:400 14px/19px var(--letra);color:var(--tinta-2)}
.v2-centro-kpis .v2-centro-kpi-valor{margin:0;font:600 15px/20px var(--letra);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.v2-centro-kpis .v2-nota{grid-column:1 / -1;margin:0}
.v2-centro-accesos{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:4px}
.v2-centro-accesos .v2-boton{min-height:44px}
@container marco (min-width: 768px){
  .v2-centro-tarjetas{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));overflow:visible;padding:0}
}

/* Tus agentes. */
.v2-centro-bloque{list-style:none;margin:0;padding:0 16px;background:var(--superficie);border-radius:var(--r-tarjeta);box-shadow:var(--sombra-1)}
.v2-centro-bloque > li + li{border-top:1px solid var(--separador)}
.v2-centro-agente{padding:14px 0}
.v2-centro-agente p{margin:4px 0 0}
.v2-centro-agente-cabeza{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.v2-centro-agente-cabeza h3{margin:0;font:600 17px/22px var(--letra)}
.v2-centro-agente-que{color:var(--tinta-2);font:400 15px/20px var(--letra)}
.v2-centro-agente-ir{margin-top:4px;padding:0}
.v2-centro-agente form{margin:4px 0 0}
.v2-centro-estado{color:var(--tinta-2);font:400 14px/19px var(--letra)}
.v2-centro-estado[data-ok="0"]{color:var(--revisar-texto);font-weight:600}
.v2-centro-estado-marca{display:inline-block;min-width:1em;font-weight:700}
.v2-centro-subtitulo{margin:20px 0 8px;font:600 17px/22px var(--letra)}
.v2-centro-tareas{display:block;gap:0}
.v2-centro-tareas li{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px;padding:12px 0;border-bottom:0}
.v2-centro-tarea-nombre{flex:1 1 180px;min-width:0;font:400 15px/20px var(--letra)}
@container marco (min-width: 768px) and (max-width: 1279px){
  .v2-centro-agentes-lista{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
  .v2-centro-agentes-lista > li + li{border-top:0}
  .v2-centro-agentes-lista > li:nth-child(n+3){border-top:1px solid var(--separador)}
}

/* La compu ancha: lista en 8 columnas, espacios y agentes en 4. */
@container marco (min-width: 1280px){
  .v2-centro{grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
  .v2-centro-resolver{grid-column:1 / span 8}
  .v2-centro-lado{grid-column:9 / span 4;gap:28px}
  .v2-centro-tarjetas{grid-template-columns:minmax(0,1fr)}
  .v2-centro-total{font-size:30px;line-height:36px}
  /* R1 (09/10): con el marco sin tope, este corte se activa también en 1440+; "Poné todo al día" ocupa el renglón entero. */
  .v2-centro > .v2-aldia-banner{grid-column:1 / -1}
}
@container marco (min-width: 1440px){
  .v2-centro > .v2-aldia-banner{width:fit-content;max-width:100%;justify-content:flex-start;gap:8px 24px}
}

/* El aviso con "Deshacer": abajo, arriba de la barra del celular. */
.v2-centro-aviso{position:fixed;left:50%;bottom:calc(var(--tabbar-h, 0px) + 16px);z-index:60;transform:translateX(-50%);
  display:flex;align-items:center;gap:4px;width:max-content;max-width:calc(100% - 32px);padding:4px 4px 4px 16px;border-radius:14px;
  background:var(--tinta);color:var(--superficie);box-shadow:var(--sombra-flota);font:600 15px/20px var(--letra);animation:v2-centro-aviso var(--t-fundido) ease-out}
@keyframes v2-centro-aviso{from{opacity:0}}
.v2-centro-aviso[hidden]{display:none}
.v2-centro-aviso > span{padding:10px 0}
.v2-centro-aviso .v2-boton.texto{color:var(--superficie);text-decoration:underline;text-underline-offset:3px}
.v2-centro-aviso .v2-boton-icono{color:var(--superficie)}
.v2-centro-aviso :focus-visible{outline:2px solid var(--superficie);outline-offset:2px}

@media (prefers-reduced-motion: reduce){
  .v2-centro-fila.sale,.v2-centro-fila.vuelve,.v2-centro-grupo-det[open] > .v2-centro-grupo-cuerpo,.v2-centro-aviso{animation:none!important}
  .v2-centro-grupo-flecha{transition:none}
}

/* INICIO · "Administrar este espacio" e "Informes" (CENTRO §4.2). */
.v2-inicio-administrar{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
.v2-adm-bloque .v2-panel-cabeza h2{font:600 var(--fs-h2)/var(--lh-h2) var(--letra)}
.v2-adm-lista{list-style:none;margin:0;padding:0;background:var(--superficie);border-radius:var(--r-tarjeta);box-shadow:var(--sombra-1);overflow:hidden}
.v2-adm-lista > li + li{border-top:1px solid var(--separador)}
.v2-adm-fila{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 16px;color:var(--tinta);text-decoration:none}
.v2-adm-texto{flex:1;min-width:0;display:grid;gap:2px}
.v2-adm-rotulo{font:400 16px/21px var(--letra)}
.v2-adm-fila > .v2-icono{flex:none;width:16px;height:16px;color:var(--tinta-3)}
.v2-adm-fila:focus-visible{outline:2px solid var(--accion);outline-offset:-2px}
@container marco (min-width: 768px){
  .v2-inicio-administrar{gap:24px}
  .v2-adm-bloque .v2-adm-lista{background:none;box-shadow:none;border-radius:0}
  .v2-adm-bloque .v2-adm-fila{padding:8px 0}
  .v2-adm-fila:hover .v2-adm-rotulo{text-decoration:underline;text-underline-offset:3px}
}
@container marco (min-width: 1024px){
  .v2-inicio-administrar{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.v2-centro-lado > .mip-tarjeta{border:0;box-shadow:var(--sombra-1)}

/* Centro: `hidden` siempre esconde (las filas y los botones tienen display
   propio, que si no le gana al atributo). Y en el celular la barra del lote
   y el aviso van ARRIBA del botón "Agente" (que flota 12 px sobre la barra
   de abajo, ~48 px de alto): si no, el botón tapaba "Confirmar" y "Deshacer". */
.v2-centro [hidden]{display:none!important}
/* El costado (Mi plata, espacios, agentes) nunca más ancho que la pantalla: la fila de
   tarjetas se desliza ADENTRO de su caja (sin esto, la columna crecía a 521 px a 375). */
.v2-centro-lado{grid-template-columns:minmax(0,1fr)}
.v2-centro-lado > *{min-width:0}
@container marco (max-width: 767.98px){
  .v2-centro-barra{bottom:calc(var(--tabbar-h, 0px) + 72px)}
  .v2-centro-aviso{bottom:calc(var(--tabbar-h, 0px) + 72px)}
  .v2-centro:has(.v2-centro-barra.visible) .v2-centro-aviso{bottom:calc(var(--tabbar-h, 0px) + 140px)}
}
/* En la compu, el sello de cada renglón de arriba con el mismo ancho: los títulos quedan alineados. */
@container marco (min-width: 768px){
  .v2-centro-lista > .v2-centro-fila .v2-centro-sello,.v2-centro-grupo-cabeza > .v2-centro-sello{min-width:76px;justify-content:center}
}
/* La primera línea de cada fila en grilla: el título se parte en su lugar y
   el monto queda arriba a la derecha (antes, con un título largo el monto
   bajaba solo a otro renglón). En el celular el sello va arriba, solo. */
.v2-centro-linea1{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:6px;align-items:baseline}
.v2-centro-linea1 > .v2-centro-sello{grid-column:1 / -1;justify-self:start}
.v2-centro-linea1 > .v2-centro-titulo{grid-column:1}
.v2-centro-linea1 > .v2-centro-monto{grid-column:2;margin-left:0}
@container marco (max-width: 767.98px){
  .v2-centro-grupo-cabeza{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"sello flecha" "texto flecha";row-gap:6px}
  .v2-centro-grupo-cabeza > .v2-centro-sello{grid-area:sello;justify-self:start}
  .v2-centro-grupo-cabeza > .v2-centro-grupo-texto{grid-area:texto}
  .v2-centro-grupo-cabeza > .v2-centro-grupo-flecha{grid-area:flecha}
}
@container marco (min-width: 768px){
  .v2-centro-lista > .v2-centro-fila .v2-centro-linea1{grid-template-columns:auto minmax(0,1fr) auto}
  .v2-centro-lista > .v2-centro-fila .v2-centro-linea1 > *{grid-column:auto}
}
/* El separador sólo entre filas a la vista: si la primera se resolvió (hidden), no queda una raya arriba. */
.v2-centro-lista > li + li,.v2-centro-sublista > li + li{border-top:0}
.v2-centro-lista > li:not([hidden]) ~ li,.v2-centro-sublista > li:not([hidden]) ~ li{border-top:1px solid var(--separador)}

/* ── QA 05/10: el texto para lectores de pantalla (.v2-oculto) queda anclado arriba: con
   position:absolute en su lugar natural estiraba el scroll del panel del Agente (534 px a 375). ── */
.v2-oculto{top:0;left:0}
/* ── T1-B · "Pagué la tarjeta" (tarjetas/pagar.blade.php) ─────────────── */
.v2-pago-tj{display:grid;gap:16px}
.v2-pago-tj-lista{display:grid;gap:8px}
.v2-pago-tj-elegir{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:12px;background:var(--superficie)}
.v2-pago-tj-texto{display:grid;gap:2px;min-width:0}
.v2-pago-tj-texto span{color:var(--tinta-2);font-size:13px;line-height:18px}
.v2-pago-tj-parte{border:0;margin:0 0 8px;padding:0;min-width:0}
.v2-pago-tj-parte legend{font:600 15px/20px var(--letra);margin-bottom:8px;padding:0}
.v2-pago-tj-fila{display:grid;grid-template-columns:minmax(0,1fr);gap:0 12px}
.v2-pago-tj-venta{margin:4px 0 8px;padding:12px;border-radius:12px;border:1px solid var(--separador)}
.v2-pago-tj-venta[hidden],.v2-pago-tj-aviso[hidden],.v2-pago-tj-form [hidden]{display:none}
.v2-pago-tj-aviso{margin:8px 0}
.v2-pago-tj-aviso p{margin:0 0 4px}
.v2-pago-tj-impuesto{margin:12px 0}
.v2-pago-tj-ultimo form{margin-top:8px}
@media (min-width: 600px){
  .v2-pago-tj-fila{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)}
}
/* ── T2-B · "Repartir el resumen" (conciliacion/repartir.blade.php) ──────
   Una columna por espacio (Familiar · lo tuyo · Negocio · No sé): en el
   celular una debajo de la otra, en la compu lado a lado. Chips de 44 px. */
.v2-rep{display:grid;gap:16px;min-width:0}
.v2-rep-form{display:grid;gap:16px;min-width:0}
.v2-rep-columnas{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
.v2-rep-col{min-width:0;padding:12px;border-radius:var(--r-tarjeta);background:var(--superficie);border-top:4px solid var(--rep-color,var(--separador))}
.v2-rep-col.destino{outline:3px solid var(--accion);outline-offset:2px;background:var(--rep-lavado,var(--superficie-2))}
.v2-rep-col-titulo{display:flex;align-items:center;gap:8px;margin:0 0 8px;font:600 17px/22px var(--letra)}
.v2-rep-lista{display:grid;gap:10px;min-height:44px;margin:0;padding:0;list-style:none}
.v2-rep-tj{display:grid;gap:8px;min-width:0;padding:12px;border-radius:12px;background:var(--superficie-2);border:1px solid var(--separador);cursor:grab}
.v2-rep-tj:focus-visible{outline:3px solid var(--accion);outline-offset:2px}
.v2-rep-tj.moviendo{opacity:.75;outline:3px dashed var(--accion);outline-offset:2px}
.v2-rep-tj-cabeza{display:flex;justify-content:space-between;align-items:baseline;gap:8px;min-width:0}
.v2-rep-tj-cabeza b{min-width:0;overflow-wrap:anywhere;font:600 15px/20px var(--letra)}
.v2-rep-tj-monto{flex:none;font:600 15px/20px var(--letra);font-variant-numeric:tabular-nums}
.v2-rep-tj-monto.usd{color:var(--usd-tinta)}
.v2-rep-tj-meta,.v2-rep-tj-iva{margin:0;color:var(--tinta-2);font-size:13px;line-height:18px}
.v2-rep-por{font-style:italic}
.v2-rep-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;border:0;min-width:0}
.v2-rep-chip{position:relative;display:inline-flex}
.v2-rep-chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.v2-rep-chip span{display:inline-flex;align-items:center;min-height:44px;min-width:44px;padding:0 14px;border-radius:var(--r-pill,999px);
  border:1px solid var(--campo-borde);background:var(--superficie);color:var(--tinta);font:500 14px/18px var(--letra)}
.v2-rep-chip input:checked + span{background:var(--rep-color,var(--tinta));border-color:var(--rep-color,var(--tinta));color:var(--emi-texto);font-weight:600}
.v2-rep-chip input:focus-visible + span{outline:3px solid var(--accion);outline-offset:2px}
.v2-rep-cuenta{display:grid;gap:4px;min-width:0}
.v2-rep-cuenta-rotulo{font-size:13px;line-height:18px;color:var(--tinta-2)}
.v2-rep-cuenta select{width:100%;min-height:44px;padding:8px 10px;border-radius:10px;border:1px solid var(--campo-borde);background:var(--superficie);color:var(--tinta);font:inherit}
.v2-rep-cuenta select:disabled{opacity:.6}
.v2-rep-cuotas span,.v2-rep-recordar span{font-size:14px;line-height:19px}
.v2-rep-recordar{display:grid;gap:4px}
.v2-rep-recordar[hidden]{display:none}
.v2-rep-patron{display:flex;align-items:center;gap:8px;min-width:0}
.v2-rep-patron span{flex:none;color:var(--tinta-2)}
.v2-rep-patron input{flex:1;min-width:0;min-height:44px;padding:8px 10px;border-radius:10px;border:1px solid var(--campo-borde);background:var(--superficie);color:var(--tinta);font:inherit}
.v2-rep-acciones{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.v2-rep-acciones .v2-boton{min-height:44px}
.v2-rep-listo{display:grid;gap:10px;padding:14px;border-radius:12px;background:var(--superficie);border-left:4px solid var(--ingreso)}
.v2-rep-listo p{margin:0;font:600 15px/20px var(--letra)}
.v2-rep-control-mal{color:var(--revisar-texto)}
.v2-rep-coincide summary{min-height:44px;display:flex;align-items:center;cursor:pointer}
@media (min-width: 900px){
  .v2-rep-columnas{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
}
/* ── T2-B · "Qué pagás y cuándo" (bloque de cada tarjeta, Cuentas y cajas) ── */
.v2-tj-cajones{display:grid;gap:6px}
.v2-tj-cajones .v2-tj-filas li span:first-child{min-width:0;overflow-wrap:anywhere}
/* Revisión final (12/10): «De qué es esta deuda», debajo del plástico. Los rótulos cortan en renglones; cada monto va entero. */
.v2-tj-deque{display:grid;gap:6px;margin-top:10px;padding:14px 16px;border-radius:var(--r-tarjeta);background:var(--superficie);box-shadow:var(--sombra-1)}
.v2-tj-deque .v2-tj-filas li{align-items:flex-start}
.v2-tj-deque .v2-tj-filas li > span:first-child{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
.v2-tj-deque .v2-tj-filas li > .v2-tj-monto{flex:none;max-width:55%;text-align:right;font-weight:600;font-variant-numeric:tabular-nums;white-space:normal}

/* ── T1-A · Pagar un fijo desde el celular y "¿es la Luz de octubre?" ── */
.v2-fijo-pagar-celu { list-style: none; padding: 0 0 12px; }
.v2-fijo-pagar-celu .v2-form-fila { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.v2-fijo-pagar-celu .v2-campo { flex: 1 1 140px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.v2-fijo-pagar-celu select, .v2-fijo-pagar-celu input { min-height: 44px; width: 100%; }
.v2-fijo-pagar-celu .v2-boton, .v2-parece-pago .v2-boton { min-height: 44px; }
.v2-parece-pago form { margin: 0; }

/* ── T1-C · Tu plata quieta: "¿te paga interés?" en un toque ── */
.mip-quieta-preguntas { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.mip-quieta-preguntas li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.mip-quieta-pregunta { flex: 1 1 200px; min-width: 0; }
.mip-quieta-botones { display: flex; gap: 6px; flex-wrap: wrap; }
.mip-quieta-botones form { margin: 0; }
.mip-quieta-botones .v2-boton { min-height: 44px; min-width: 44px; }

/* ── QA 07/10 · Repartir entra en 375 px (sin scroll de costado) ── */
/* La lista y la tarjetita no pueden crecer al ancho de la opción más larga del
   selector de cuenta: columnas mínimas en 0 y el selector se achica con su caja. */
.v2-rep,.v2-rep-form,.v2-rep-lista,.v2-rep-tj,.v2-rep-cuenta,.v2-rep-recordar{grid-template-columns:minmax(0,1fr)}
.v2-rep-lista,.v2-rep-cargos,.v2-rep-cargos .v2-tj-filas{min-width:0}
.v2-rep-cuenta select{min-width:0;max-width:100%;text-overflow:ellipsis}
.v2-rep-tj-cabeza{flex-wrap:wrap}
.v2-rep-tj-monto{margin-left:auto;white-space:nowrap}
.v2-rep-cargos .v2-tj-filas li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;min-width:0}
.v2-rep-cargos .v2-tj-filas li > span:first-child{flex:1 1 200px;min-width:0;overflow-wrap:anywhere;white-space:normal}
.v2-rep-cargos .v2-tj-filas li > span:last-child{margin-left:auto;white-space:nowrap;font-variant-numeric:tabular-nums}

/* ── QA 07/10 · Arqueo: el motivo elegido se lee entero (375 y 1440) ── */
select.v2-arqueo-input{width:auto;min-width:170px;max-width:100%}

/* ── Auditoría 07/10 · Deshacer todo el pago: la casilla y el botón juntos ── */
.v2-pago-tj-deshacer{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}

/* =====================================================================
   REVISIÓN DE EXPERTOS UI/UX (07/10): retoques chicos de Inicio, Centro,
   Mi plata, Pagué la tarjeta, Repartir y Arqueo. Sólo pisan lo de arriba.
   ===================================================================== */

/* Barra de abajo (celular): "Movimientos" entra entero. */
.v2-rotulo{max-width:100%}

/* Inicio: el aviso del dólar sin acción va en gris, con su ícono al lado. */
.v2-inicio-tc-nota{display:flex;align-items:flex-start;gap:8px;margin:0}
.v2-inicio-tc-nota .v2-icono{flex:none;width:18px;height:18px}
/* Inicio: "Revisar" con el color de acción también en el celular. */
.v2-inicio-rev-accion{color:var(--accion)}

/* Paneles en el celular: Pagué la tarjeta, Arqueo y Repartir con su tarjeta. */
@media (max-width:767px){
  .v2-pago-tj .v2-panel,.v2-arqueo .v2-panel,.v2-rep .v2-panel{padding:16px;border-radius:var(--r-tarjeta);background:var(--superficie)}
}

/* Mi plata: los colores de "Cuánto hay" no se confunden con los de los espacios. */
.mip .mip-tono-s1,.mip .mp-tono-s1{fill:var(--serie-5);background:var(--serie-5)}
.mip .mip-tono-s2,.mip .mp-tono-s2{fill:var(--serie-8);background:var(--serie-8)}
.mip .mip-tres{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
/* Una sola forma de "elegido" para Hecho / En curso / Falta. */
.mip .mip-opcion input:checked + span{background:var(--esp-lavado);border-color:var(--esp-relleno);color:var(--tinta)}
/* La barra de composición: redondeada sólo por fuera. */
.mp-apilada{border-radius:6px}
/* Cuánto dura: la frase larga sin negrita; sólo la conclusión va en negrita. */
.mip .mip-dura-frase{font-weight:400}
.mip .mip-dura-frase b{font-weight:600}
/* Mi plata: "A cobrar" chico y por mes; la tarjeta del Centro dice con qué cuenta cada número. */
.mip .mip-hay-lista dd.mip-acobrar-mes{font:600 15px/20px var(--letra);color:var(--tinta-2)}
.mip-tarjeta-datos dd.mip-nota{font:400 12px/16px var(--letra);color:var(--tinta-3)}
.v2-inicio-futuro-cuando{margin:0 0 8px}

/* Centro: el título largo corta entre palabras, y a 1440 el texto toma su lugar. */
.v2-centro-titulo{overflow-wrap:break-word}
@container marco (min-width:768px){ .v2-centro-texto{flex:1 1 340px} }
/* Centro: la casilla de cada fila con 44 px de toque (la etiqueta la envuelve). */
.v2-centro-check-zona{display:inline-flex;align-items:center;justify-content:center;flex:none;min-width:44px;min-height:44px;margin:-11px -11px -11px -11px;cursor:pointer}
/* Centro: tareas programadas plegadas. */
.v2-centro-tareas-det > summary{cursor:pointer;min-height:44px;display:flex;align-items:center}
.v2-centro-tareas-det > summary::-webkit-details-marker{display:none}
/* Centro en el celular: "Entrar" a lo ancho y los otros accesos como enlaces. */
@media (max-width:767px){
  .v2-centro-accesos > form:first-child{flex:1 1 100%}
  .v2-centro-accesos > form:first-child .v2-boton{width:100%}
  .v2-centro-accesos > form:not(:first-child) .v2-boton,.v2-centro-accesos > a.v2-boton{background:none;border-color:transparent;box-shadow:none;color:var(--accion);padding:0 8px}
}
/* Cuentas y Cajas: "Pagué la tarjeta" a la vista, debajo del plástico. */
.v2-tj-pagar{margin:12px 0 0}
.v2-tj-pagar .v2-boton{min-height:44px}

/* Pagué la tarjeta: aire arriba del formulario y "Pagué esta" sin cortarse. */
.v2-pago-tj-form{margin-top:16px}
.v2-pago-tj-elegir .v2-boton{white-space:nowrap}

/* Arqueo: "Saldo real" a la vista, campos de 44 px y, en el celular, a lo ancho. */
.v2-arqueo-campo{display:flex;flex-direction:column;gap:4px;min-width:0}
.v2-arqueo-campo[hidden]{display:none}
.v2-arqueo-rotulo{font:400 13px/18px var(--letra);color:var(--tinta-2)}
.v2-arqueo-form{align-items:flex-end}
.v2-arqueo-input,.v2-arqueo-form .v2-boton{min-height:44px}
@media (max-width:560px){
  .v2-arqueo-form{flex-direction:column;align-items:stretch;width:100%}
  .v2-arqueo-campo,.v2-arqueo-input,select.v2-arqueo-input,.v2-arqueo-form .v2-boton{width:100%;min-width:0}
}
.v2-arqueo-form .v2-boton[hidden]{display:none}

/* Repartir: columnas arriba de todo a 1440, el total en la cabecera, la ayuda de ancho legible y el chip con el texto de su espacio. */
.v2-rep-columnas{align-items:start}
.v2-rep-col-total{font-weight:400;color:var(--tinta-2);font-variant-numeric:tabular-nums}
#rep-ayuda,.v2-rep > .v2-nota{max-width:68ch}
.v2-rep-chip input:checked + span{color:var(--rep-texto,var(--esp-texto))}
/* En el celular: "No sé" primero (lo que falta decidir) y las columnas vacías plegadas. */
@media (max-width:767px){
  .v2-rep-col[data-col="0"]{order:-1}
  .v2-rep-col.vacia .v2-rep-lista{display:none}
  .v2-rep-col.vacia{padding-top:8px;padding-bottom:8px}
}

/* ── QA final 06/10: "Contra el mes pasado" sin veredicto puede ser una frase larga: que corte renglón
   (con nowrap ensanchaba el Inicio a 441 px en el celu). Mi plata: "Cuentas en el banco" con un color
   propio (s1 y s4 habían quedado iguales). ── */
.v2-inicio-dl dd[data-sin-veredicto]{white-space:normal;overflow-wrap:break-word}
.mip .mip-tono-s1,.mip .mp-tono-s1{fill:var(--serie-4);background:var(--serie-4)}

/* ── Contá tus cajas (T3, 07/10): todas las cajas de todos los espacios en una pantalla, agrupadas por
   espacio con su color, un día arriba y un solo "Guardar el conteo" abajo (fijo sobre la barra). En el
   celular cada caja es una columna; desde 768 px, una fila: caja · saldo real · diferencia · qué pasó. ── */
.v2-contar{padding-bottom:8px}
.v2-contar-ayuda{max-width:68ch;margin:0}
.v2-contar-dia{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 12px}
.v2-contar-dia .v2-arqueo-input{width:auto;min-width:0;max-width:100%}
.v2-contar-dia-nota{flex:1 1 100%;margin:0}
.v2-contar-form{display:flex;flex-direction:column;gap:16px}
.v2-contar .v2-contar-espacio{padding:16px;border-radius:var(--r-tarjeta);background:var(--superficie);box-shadow:var(--sombra-1);border-left:4px solid var(--contar-relleno,var(--separador))}
.v2-contar-tono-familiar{--contar-relleno:var(--familiar-relleno);--contar-lavado:var(--familiar-lavado);--contar-marca-fondo:var(--familiar-marca-fondo);--contar-marca-texto:var(--familiar-marca-texto)}
.v2-contar-tono-emi{--contar-relleno:var(--emi-relleno);--contar-lavado:var(--emi-lavado);--contar-marca-fondo:var(--emi-marca-fondo);--contar-marca-texto:var(--emi-marca-texto)}
.v2-contar-tono-jessi{--contar-relleno:var(--jessi-relleno);--contar-lavado:var(--jessi-lavado);--contar-marca-fondo:var(--jessi-marca-fondo);--contar-marca-texto:var(--jessi-marca-texto)}
.v2-contar-tono-negocio{--contar-relleno:var(--negocio-relleno);--contar-lavado:var(--negocio-lavado);--contar-marca-fondo:var(--negocio-marca-fondo);--contar-marca-texto:var(--negocio-marca-texto)}
.v2-contar-tono-personal{--contar-relleno:var(--personal-relleno);--contar-lavado:var(--personal-lavado);--contar-marca-fondo:var(--personal-marca-fondo);--contar-marca-texto:var(--personal-marca-texto)}
.v2-contar-esp-titulo{display:flex;align-items:center;gap:8px;margin:0 0 4px;font:600 var(--fs-h2)/var(--lh-h2) var(--letra);color:var(--contar-marca-texto,var(--tinta))}
.v2-contar-marca{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;flex:none;border-radius:50%;background:var(--contar-marca-fondo,var(--fondo));font-size:16px;line-height:1}
.v2-contar-cuantas{margin-left:auto;font:400 13px/18px var(--letra);color:var(--tinta-2)}
.v2-contar-fila{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;align-items:end;margin:0 -8px;padding:12px 8px;border-radius:10px;scroll-margin-top:96px;scroll-margin-bottom:calc(var(--tabbar-h, 0px) + 96px)}
.v2-contar-fila:target{background:var(--contar-lavado,var(--revisar-fondo));box-shadow:inset 0 0 0 2px var(--contar-relleno,var(--campo-borde))}
.v2-contar-fila .v2-arqueo-nombre{flex:none;align-self:center}
.v2-contar-fila .v2-arqueo-input,.v2-contar-fila select.v2-arqueo-input{width:100%;min-width:0;max-width:100%;min-height:44px}
.v2-contar-cuando{font-size:13px;line-height:18px;color:var(--tinta-2)}
.v2-contar-fila .v2-arqueo-dif{min-width:0;align-self:center}
.v2-contar-fila[data-estado="coincide"] .v2-arqueo-dif{color:var(--ingreso)}
.v2-contar-fila .v2-arqueo-grande{grid-column:1 / -1;margin:0}
.v2-contar-fila[data-con-error] .v2-arqueo-input[aria-invalid="true"]{border-color:var(--deuda);border-width:2px}
.v2-contar-error{grid-column:1 / -1;margin:0;font:600 13px/18px var(--letra);color:var(--deuda)}
.v2-contar-tarjetas{margin:0}
.v2-contar-tarjetas a{color:var(--tinta);text-decoration:underline;text-underline-offset:2px}
.v2-contar-listo{background:var(--superficie);color:var(--tinta);box-shadow:inset 4px 0 0 var(--ingreso)}
.v2-contar-listo p{margin:0}
.v2-contar-lineas{margin:6px 0 0;padding-left:18px;font-size:14px;line-height:20px;color:var(--tinta-2)}
.v2-contar-pie{position:sticky;bottom:calc(var(--tabbar-h, 0px) + 8px);z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;
  padding:8px 8px 8px 16px;border-radius:14px;background:var(--superficie);box-shadow:var(--sombra-flota, var(--sombra-1))}
.v2-contar-pie-texto{flex:1 1 160px;margin:0;font:400 14px/18px var(--letra);color:var(--tinta-2);font-variant-numeric:tabular-nums}
.v2-contar-pie .v2-boton{flex:1 1 auto;min-height:44px}
.v2-contar-pie .v2-boton:disabled{opacity:.7}
@media (min-width:768px){
  .v2-contar-fila{grid-template-columns:minmax(0,1.4fr) minmax(150px,180px) minmax(110px,.7fr) minmax(0,1.2fr)}
  .v2-contar-fila .v2-arqueo-dif:empty{display:block}
  .v2-contar-pie .v2-boton{flex:0 0 auto}
  .v2-contar-dia-nota{flex:1 1 auto;align-self:center}
}

/* ── 06/10: la barra fija de "Guardar el conteo" (quedaba en la mitad de la
   pantalla del celu: el sticky ya descuenta el padding de abajo del contenido (barra + 124 px), así que
   sumarle otra vez la barra la subía ~260 px. Pegada arriba de la barra de abajo. Con el teclado abierto
   el padding es 12 px: ahí va a 8 px del borde. ── */
@container marco (max-width: 767px){
  .v2-contar-pie{bottom:-56px} /* arriba del botón Agente (~48 px + 12) */
}
html.teclado .v2-contar-pie{bottom:8px}
/* ── Pagué la tarjeta, de a una pregunta (Emi, 06/10: "es inentendible el proceso").
   Cuánto (Todo / Otro monto / Nada), de dónde (botones grandes), ¿vendiste o compraste
   dólares?, y la frase antes del botón. Lo que se abre y se cierra es CSS (:has y details):
   anda sin JS. ── */
.v2-pago-tj-form{display:grid;gap:12px;margin-top:0;min-width:0}
.v2-pago-tj-cabeza{min-width:0}
.v2-pago-tj-debe{margin:0;font:600 20px/26px var(--letra);color:var(--tinta);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.v2-pago-tj-segun{margin:2px 0 0;font:400 15px/20px var(--letra);color:var(--tinta-2)}
.v2-pago-tj-form summary{display:flex;align-items:center;min-height:44px;cursor:pointer;list-style:none;font:600 15px/20px var(--letra);color:var(--accion)}
.v2-pago-tj-form summary::-webkit-details-marker{display:none}
.v2-pago-tj-form summary:focus-visible{outline:2px solid var(--accion);outline-offset:2px;border-radius:6px}
.v2-pago-tj-mas summary,.v2-pago-tj-30 summary,.v2-pago-tj-fecha summary{font-weight:500;font-size:14px}
.v2-pago-tj-mas p,.v2-pago-tj-30 p{margin:0 0 8px;max-width:60ch;font:400 14px/20px var(--letra);color:var(--tinta-2)}
.v2-pago-tj-paso{display:grid;gap:12px;min-width:0;padding:16px;border-radius:var(--r-tarjeta);background:var(--superficie);box-shadow:var(--sombra-1)}
.v2-pago-tj-pregunta{margin:0;padding:0;font:700 19px/24px var(--letra);color:var(--tinta)}
.v2-pago-tj-pregunta.chica{font-size:17px;line-height:22px;margin-bottom:10px}
.v2-pago-tj-subpregunta{margin:0;font:600 15px/20px var(--letra);color:var(--tinta)}
.v2-pago-tj-moneda,.v2-pago-tj-origen,.v2-pago-tj-sino{display:grid;gap:8px;min-width:0;margin:0;padding:0;border:0}
.v2-pago-tj-moneda > legend,.v2-pago-tj-origen > legend{margin:0 0 8px;padding:0;font:600 15px/20px var(--letra);color:var(--tinta-2)}
.v2-pago-tj-moneda + .v2-pago-tj-moneda,.v2-pago-tj-origen + .v2-pago-tj-origen{margin-top:8px}

/* Las opciones grandes: Todo / Otro monto / Nada, y No / Sí. */
.v2-pago-tj-seg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.v2-pago-tj-seg-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.v2-pago-tj-op{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;min-height:56px;padding:8px 6px;
  border:1px solid var(--separador);border-radius:12px;background:var(--superficie-2);color:var(--tinta);text-align:center;cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease}
.v2-pago-tj-op input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.v2-pago-tj-op span{font:600 16px/20px var(--letra)}
.v2-pago-tj-op small{max-width:100%;font:400 13px/17px var(--letra);color:var(--tinta-2);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.v2-pago-tj-op:has(input:checked){border-color:var(--accion);background:var(--elegido);box-shadow:inset 0 0 0 1px var(--accion)}
.v2-pago-tj-op:has(input:checked) small{color:var(--tinta)}
.v2-pago-tj-op:has(input:focus-visible),.v2-pago-tj-caja:has(input:focus-visible){outline:2px solid var(--accion);outline-offset:2px}

/* Las cajas como botones grandes. */
.v2-pago-tj-cajas{display:grid;gap:8px;min-width:0}
.v2-pago-tj-caja{display:flex;align-items:center;gap:12px;min-width:0;min-height:52px;padding:10px 14px;border:1px solid var(--separador);border-radius:12px;
  background:var(--superficie-2);color:var(--tinta);cursor:pointer;transition:background-color .15s ease,border-color .15s ease}
.v2-pago-tj-caja input{flex:none;width:20px;height:20px;margin:0;accent-color:var(--accion)}
.v2-pago-tj-caja-nombre{flex:1;min-width:0;font:500 16px/20px var(--letra);overflow-wrap:anywhere}
.v2-pago-tj-caja-espacio{flex:none;padding:2px 8px;border:1px solid var(--separador);border-radius:var(--r-pill);background:var(--superficie);font:500 12px/16px var(--letra);color:var(--tinta-2)}
.v2-pago-tj-caja:has(input:checked){border-color:var(--accion);background:var(--elegido)}
.v2-pago-tj-grupo{margin:8px 0 4px;font:600 13px/18px var(--letra);color:var(--tinta-2)}
@media (min-width:768px){ .v2-pago-tj-cajas{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))} }

/* "Otro monto", las cajas extra, el depósito y los datos del cambio: sólo cuando se piden. */
.v2-pago-tj-otro{display:none;margin:0}
.v2-pago-tj-moneda:has(input[value="otro"]:checked) .v2-pago-tj-otro{display:block}
.v2-pago-tj-form .v2-campo{margin-bottom:12px}
.v2-pago-tj-form:has(:is(input[name="ars_modo"][value="nada"]:checked,details[data-tambien="ARS"]:not([open]))) :is([data-origen="ARS"],[data-paso-venta]),
.v2-pago-tj-form:has(:is(input[name="usd_modo"][value="nada"]:checked,details[data-tambien="USD"]:not([open]))) :is([data-origen="USD"],[data-paso-compra]){display:none}
.v2-pago-tj-form:has(:is(input[name="ars_modo"][value="nada"]:checked,details[data-tambien="ARS"]:not([open]))):has(:is(input[name="usd_modo"][value="nada"]:checked,details[data-tambien="USD"]:not([open]))) [data-paso-origen]{display:none}
/* «Más opciones» (un solo desplegable por moneda): otra caja, pagar con más de una y el depósito previo. */
.v2-pago-tj-mas-opciones{display:grid;gap:10px;min-width:0}
.v2-pago-tj-mas-opciones[open] > summary{margin-bottom:2px}
.v2-pago-tj-fila-uno,.v2-pago-tj-fila-extra{display:grid;gap:0;min-width:0}
.v2-pago-tj-fila-extra{padding-top:8px;border-top:1px solid var(--separador)}
.v2-pago-tj-deposito{display:none}
.v2-pago-tj-origen:has(input[data-tipo="efectivo"]:checked) [data-deposito$="-0"]{display:block}
.v2-pago-tj-fila-extra:has(> .v2-campo > select option[data-tipo="efectivo"]:checked) > [data-deposito]{display:block}
.v2-pago-tj-deposito .v2-ayuda,.v2-pago-tj-cambio-datos .v2-ayuda{margin:0}
.v2-pago-tj-faltan{margin:0;font:500 14px/20px var(--letra);color:var(--tinta-2)}
.v2-pago-tj-faltan:empty{display:none}
.v2-pago-tj-error{margin:0;font:500 14px/20px var(--letra);color:var(--deuda)}
.v2-pago-tj-cambio-datos{display:none;gap:12px;min-width:0;margin-top:4px}
/* ¿Hubo cambio de moneda? No · Vendí · Compré: cada uno muestra lo suyo. */
.v2-pago-tj-cambio:has(input[name="cambio"][value="vendi"]:checked) [data-venta],
.v2-pago-tj-cambio:has(input[name="cambio"][value="compre"]:checked) [data-compra]{display:grid}
/* Compré: «los compré yo» pide el tipo de cambio; «el banco me los cobró en pesos» pide cuántos pesos debitó. */
[data-compra] [data-compra-banco]{display:none}
[data-compra]:has(input[name="compra_modo"][value="banco"]:checked) [data-compra-banco]{display:block}
[data-compra]:has(input[name="compra_modo"][value="banco"]:checked) [data-compra-propia]{display:none}
.v2-pago-tj-cambio .v2-pago-tj-fila{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px}
.v2-pago-tj-cambio .v2-pago-tj-fila .v2-campo{margin-bottom:0}
.v2-pago-tj-origen.chico > legend{font-size:14px;margin-bottom:6px}
.v2-pago-tj-destino{display:block}
.v2-pago-tj-aviso{margin:0}

/* La frase antes del botón, con el tilde cuando hace falta. */
.v2-pago-tj-resumen{display:grid;gap:8px;padding:16px;border:1px solid var(--separador);border-radius:var(--r-tarjeta);background:var(--superficie-2)}
.v2-pago-tj-frase{margin:0;font:500 17px/24px var(--letra);color:var(--tinta);overflow-wrap:anywhere}
.v2-pago-tj-resumen .v2-ayuda{margin:0}
.v2-pago-tj-revise{padding:10px 12px;border-radius:12px;background:var(--revisar-fondo);color:var(--revisar-texto)}
.v2-pago-tj-revise p{margin:0;font:400 14px/20px var(--letra)}
.v2-pago-tj-revise .v2-casilla{margin:0;font:600 15px/20px var(--letra);color:var(--revisar-texto)}
.v2-pago-tj-anotar{width:100%;min-height:52px;font-size:17px}
@media (min-width:768px){ .v2-pago-tj-anotar{width:auto;min-width:240px;justify-self:start} }
@media (prefers-reduced-motion: reduce){ .v2-pago-tj-op,.v2-pago-tj-caja{transition:none} }
/* Pagué la tarjeta a 1440: el ancho de lectura, como los formularios; el espacio de la caja, debajo del nombre. */
.v2-contenido:has(.v2-pago-tj) > *{max-width:var(--ancho-lectura)}
.v2-pago-tj{max-width:var(--ancho-lectura)}
.v2-pago-tj-caja-texto{display:flex;flex:1;flex-direction:column;align-items:flex-start;gap:2px;min-width:0}
.v2-pago-tj-caja-nombre{flex:none;max-width:100%}
.v2-pago-tj-nowrap{white-space:nowrap}
/* "+ Agregar otra caja" abierta dice cómo sacarla (el JS vacía lo que tenía). */
.v2-pago-tj-fecha > summary .v2-pago-tj-abierto,.v2-pago-tj-fecha[open] > summary .v2-pago-tj-cerrado{display:none}
.v2-pago-tj-fecha[open] > summary .v2-pago-tj-abierto{display:inline}

/* ── Pagué la tarjeta · "Este pago cubre" y repartir en el mismo paso (Emi, 06/10).
   La barra apilada por espacio (los colores de cada espacio, ya con su versión oscura)
   y las compras que faltaban repartir: chips de 44px (los de Repartir), la cuenta y
   "Recordar", que aparece sólo si cambió lo que sugería la app (CSS, anda sin JS). ── */
.v2-pago-cubre,.v2-pago-rep{display:grid;gap:10px;min-width:0;padding:16px;border-radius:var(--r-tarjeta);background:var(--superficie);box-shadow:var(--sombra-1)}
.v2-pago-cubre .v2-pago-tj-pregunta.chica,.v2-pago-rep .v2-pago-tj-pregunta.chica{margin-bottom:0}
.v2-pago-cubre-periodo,.v2-pago-cubre-nota{margin:0;font:400 15px/20px var(--letra);color:var(--tinta-2)}
.v2-pago-cubre-nota{color:var(--tinta)}
.v2-pago-cubre-moneda{display:grid;gap:8px;min-width:0}
.v2-pago-cubre-barra{display:flex;height:12px;overflow:hidden;border-radius:999px;background:var(--superficie-2)}
.v2-pago-cubre-barra span{flex:0 0 var(--w);min-width:3px;background:var(--c)}
.v2-pago-cubre-barra span + span{border-left:2px solid var(--superficie)}
.v2-pago-cubre-lista{display:flex;flex-wrap:wrap;gap:4px 16px;margin:0;padding:0;list-style:none;font:400 15px/20px var(--letra);color:var(--tinta)}
.v2-pago-cubre-lista li{display:inline-flex;align-items:center;gap:6px;min-width:0}
.v2-pago-cubre-lista b{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.v2-pago-cubre-punto{width:10px;height:10px;flex:none;border-radius:50%;background:var(--c)}
.v2-pago-cubre-mandar{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:0}
.v2-pago-cubre-mandar .v2-boton{min-height:44px}
.v2-pago-rep-lista{display:grid;gap:8px;margin:0;padding:0;list-style:none;min-width:0}
.v2-pago-rep-fila{display:grid;gap:8px;min-width:0;padding:12px;border:1px solid var(--separador);border-radius:12px;background:var(--superficie-2)}
.v2-pago-rep-cabeza{display:flex;align-items:baseline;justify-content:space-between;gap:8px;min-width:0}
.v2-pago-rep-cabeza b{min-width:0;font:600 15px/20px var(--letra);color:var(--tinta);overflow-wrap:anywhere}
.v2-pago-rep-monto{flex:none;font:600 15px/20px var(--letra);color:var(--tinta);font-variant-numeric:tabular-nums;white-space:nowrap}
.v2-pago-rep-meta{margin:0;font:400 13px/18px var(--letra);color:var(--tinta-2)}
.v2-pago-rep-cuenta{display:grid;gap:4px;min-width:0;font:400 13px/18px var(--letra);color:var(--tinta-2)}
.v2-pago-rep-cuenta select{min-height:44px;max-width:100%;min-width:0;font:400 16px/20px var(--letra)}
.v2-pago-rep-cuenta[hidden],.v2-pago-rep-sin[hidden]{display:none}
.v2-pago-rep-sin{margin:0;font:400 13px/18px var(--letra);color:var(--tinta-2)}
.v2-pago-rep-fila:has(input[data-rep-chip][value="0"]:checked) .v2-pago-rep-cuenta,
.v2-pago-rep-fila:has(input[data-rep-chip][value="0"]:checked) .v2-pago-rep-sin{display:none}
.v2-pago-rep-recordar,.v2-pago-rep-cuotas{min-height:44px;align-items:center}
.v2-pago-rep-fila:has(input[data-rep-chip][data-sugerido]:checked) .v2-pago-rep-recordar,
.v2-pago-rep-fila:has(input[data-rep-chip][value="0"]:checked) .v2-pago-rep-recordar{display:none}
@media (min-width:768px){
  .v2-pago-rep-fila{grid-template-columns:minmax(0,1fr) minmax(0,auto);align-items:center;column-gap:16px}
  .v2-pago-rep-cabeza,.v2-pago-rep-meta{grid-column:1 / -1}
  .v2-pago-rep-sin,.v2-pago-rep-recordar,.v2-pago-rep-cuotas{grid-column:1 / -1}
}
/* =====================================================================
   PONÉ TODO AL DÍA · CONCILIACIÓN DEL MES (/al-dia, App\Support\AlDia).
   Celular: un paso por vez (Anterior / Siguiente). Desde 768: la lista
   entera. Desde 1200: el chat del contador al lado. Sólo tokens: el modo
   oscuro sale solo.
   ===================================================================== */
.v2-aldia{display:grid;gap:16px;min-width:0}
.v2-aldia-cabeza{display:grid;gap:8px;padding:16px;border-radius:var(--r-tarjeta);background:var(--superficie);box-shadow:var(--sombra-1)}
.v2-aldia-cabeza .v2-banda{margin:0}
.v2-aldia-llevas{margin:0;font:700 20px/26px var(--letra);color:var(--tinta)}
.v2-aldia-barra{margin:4px 0}
.v2-aldia-contador{display:flex;gap:8px;align-items:flex-start;margin:0;font:500 15px/21px var(--letra);color:var(--tinta-2);overflow-wrap:anywhere}
.v2-aldia-contador-marca{flex:none}
.v2-aldia-nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.v2-aldia-nav-donde{margin:0;font:600 15px/20px var(--letra);color:var(--tinta-2)}
.v2-aldia-nav-botones{display:flex;gap:8px}
.v2-aldia-cuerpo{display:grid;gap:16px;min-width:0}
.v2-aldia-pasos{display:grid;gap:12px;margin:0;padding:0;list-style:none;min-width:0}
.v2-aldia-paso{display:grid;gap:10px;padding:16px;border-radius:var(--r-tarjeta);background:var(--superficie);box-shadow:var(--sombra-1);min-width:0}
.v2-aldia-paso:not([data-actual]){display:none}
.v2-aldia-paso-cabeza{display:flex;gap:12px;align-items:flex-start}
.v2-aldia-numero{flex:none;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;
  background:var(--superficie-2);color:var(--tinta);font:700 15px/1 var(--letra)}
.v2-aldia-paso[data-estado="hecho"] .v2-aldia-numero{background:var(--progreso-bien);color:var(--superficie)}
.v2-aldia-paso-titulos{flex:1;min-width:0}
.v2-aldia-paso-titulo{margin:0;font:700 17px/22px var(--letra);color:var(--tinta)}
.v2-aldia-porque{margin:2px 0 0;font:400 14px/20px var(--letra);color:var(--tinta-2)}
.v2-aldia-estado{flex:none;padding:4px 10px;border-radius:999px;background:var(--revisar-fondo);color:var(--revisar-texto);font:600 13px/18px var(--letra);white-space:nowrap}
.v2-aldia-paso[data-estado="hecho"] .v2-aldia-estado{background:var(--familiar-lavado);color:var(--ingreso)}
.v2-aldia-paso:is([data-estado="no_aplica"],[data-estado="info"]) .v2-aldia-estado{background:var(--superficie-2);color:var(--tinta-2)}
.v2-aldia-paso[data-al-final] .v2-aldia-estado{background:var(--superficie-2);color:var(--tinta-2)}
.v2-aldia-al-final{margin:0;padding:10px 12px;border-radius:12px;background:var(--superficie-2);color:var(--tinta-2);font:500 14px/20px var(--letra)}
.v2-aldia-resumen{margin:0;font:600 15px/21px var(--letra);color:var(--tinta)}
.v2-aldia-nota{margin:0}
.v2-aldia-items{display:grid;gap:0;margin:0;padding:0;list-style:none;border-top:1px solid var(--separador)}
.v2-aldia-item{display:grid;gap:8px;padding:12px 0;border-bottom:1px solid var(--separador);min-width:0}
.v2-aldia-item-texto{min-width:0}
.v2-aldia-item-nombre{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0;font:400 15px/21px var(--letra);color:var(--tinta);overflow-wrap:anywhere}
.v2-aldia-item-detalle{margin:2px 0 0;font:400 14px/20px var(--letra);color:var(--tinta-2);overflow-wrap:anywhere}
.v2-aldia-item[data-falta] .v2-aldia-item-detalle{color:var(--tinta)}
.v2-aldia-item-montos{margin:4px 0 0;font:500 14px/20px var(--letra-numeros);color:var(--tinta);font-variant-numeric:tabular-nums}
.v2-aldia-nuevas{color:var(--tinta-2)}
.v2-aldia-item-acciones,.v2-aldia-acciones,.v2-aldia-subir-botones{display:flex;flex-wrap:wrap;gap:8px}
.v2-aldia-item-acciones form,.v2-aldia-acciones form{margin:0}
.v2-aldia-numeros{display:grid;gap:8px;margin:0}
.v2-aldia-numero-fila{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:12px;background:var(--superficie-2)}
.v2-aldia-numero-fila dt{font:500 15px/21px var(--letra);color:var(--tinta-2)}
.v2-aldia-numero-fila dd{margin:0;text-align:right;font:700 17px/22px var(--letra-numeros);color:var(--tinta);font-variant-numeric:tabular-nums}
.v2-aldia-sin-dato{font:500 14px/20px var(--letra);color:var(--tinta-2)}
.v2-aldia-paso-nav{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px}
.v2-aldia-subir-boton{cursor:pointer}
.v2-aldia:not([data-js]) .v2-aldia-subir-boton{display:none}
.v2-aldia-subir{display:grid;gap:8px;padding:14px;border:2px dashed var(--separador);border-radius:var(--r-tarjeta)}
.v2-aldia-subir[hidden]{display:none}
.v2-aldia-hojas{display:grid;gap:8px}
.v2-aldia-hojas[hidden]{display:none}
.v2-aldia-subir[data-encima]{border-color:var(--accion);background:var(--elegido)}
.v2-aldia-subir-texto{margin:0;font:500 14px/20px var(--letra);color:var(--tinta-2)}
.v2-aldia-subir label,.v2-aldia-adjuntar{cursor:pointer}
.v2-aldia-archivos{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.v2-aldia-archivos:empty{display:none}
.v2-aldia-archivo{display:flex;justify-content:space-between;gap:8px;padding:8px 10px;border-radius:10px;background:var(--superficie-2);font:400 14px/20px var(--letra);color:var(--tinta);min-width:0}
.v2-aldia-archivo-nombre{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v2-aldia-archivo-estado{flex:none;font-weight:600;color:var(--tinta-2)}
.v2-aldia-archivo[data-estado="listo"] .v2-aldia-archivo-estado{color:var(--ingreso)}
.v2-aldia-archivo[data-estado="mal"] .v2-aldia-archivo-estado{color:var(--deuda)}
.v2-aldia-chat{display:grid;gap:10px;align-content:start;padding:16px;border-radius:var(--r-tarjeta);background:var(--superficie);box-shadow:var(--sombra-1);min-width:0}
.v2-aldia-chat[hidden]{display:none}
.v2-aldia-chat-titulo{margin:0;font:700 17px/22px var(--letra);color:var(--tinta)}
.v2-aldia-chat .v2-nota{margin:0}
.v2-aldia-mensajes{display:grid;gap:8px;max-height:320px;overflow-y:auto}
.v2-aldia-mensajes:empty{display:none}
.v2-aldia-msg{max-width:92%;padding:8px 12px;border-radius:14px;font:400 15px/21px var(--letra);overflow-wrap:anywhere;white-space:pre-line}
.v2-aldia-msg.yo{justify-self:end;background:var(--elegido);color:var(--tinta)}
.v2-aldia-msg.contador{justify-self:start;background:var(--superficie-2);color:var(--tinta)}
.v2-aldia-msg-enlace{color:var(--accion);font-weight:600}
.v2-aldia-chips{display:flex;flex-wrap:wrap;gap:8px}
.v2-aldia-chips[hidden]{display:none}
.v2-aldia-chip{min-height:44px;padding:0 14px;border:1px solid var(--campo-borde);border-radius:999px;background:var(--superficie);color:var(--tinta);
  font:500 14px/20px var(--letra);cursor:pointer;text-align:left}
.v2-aldia-chat-form{display:flex;gap:8px;min-width:0}
.v2-aldia-chat-input{flex:1;min-width:0;min-height:44px;padding:0 12px;border:1px solid var(--campo-borde);border-radius:12px;background:var(--superficie);color:var(--tinta);font:400 16px/22px var(--letra)}
.v2-aldia-solo-compu{display:none}
.v2-aldia-banner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin:0 0 12px}
.v2-aldia-banner p{margin:0}
.v2-aldia-banner .v2-boton{flex:none}
@media (min-width:768px){
  .v2-aldia-paso:not([data-actual]){display:grid}
  .v2-aldia-paso[data-actual]{box-shadow:0 0 0 2px var(--accion)}
  .v2-aldia-nav-botones,.v2-aldia-paso-nav{display:none}
  .v2-aldia-item{grid-template-columns:minmax(0,1fr) auto;align-items:center}
  .v2-aldia-solo-compu{display:inline}
  .v2-aldia-solo-celu{display:none}
}
@media (min-width:1200px){
  .v2-aldia-cuerpo{grid-template-columns:minmax(0,1fr) 380px;align-items:start}
  .v2-aldia-chat{position:sticky;top:16px}
  .v2-aldia-mensajes{max-height:50vh}
}
@media (min-width:768px){ .v2-boton.v2-aldia-solo-compu{display:inline-flex} }
/* Contá tus cajas: contada y después con un movimiento anterior (Conciliación del mes). */
.v2-contar-recontar{display:block;margin-top:4px;padding:6px 10px;border-radius:10px;background:var(--revisar-fondo);color:var(--revisar-texto);font:600 13px/18px var(--letra)}
/* Pagué la tarjeta · primero el resumen (Emi, 06/10): conciliado, con diferencias o sin resumen. */
.v2-pago-res{display:grid;gap:8px}
.v2-pago-res p{margin:0}
.v2-pago-res[data-estado-resumen="conciliado"]{box-shadow:inset 4px 0 0 var(--progreso-bien)}
.v2-pago-res[data-estado-resumen="conciliado"] .v2-pago-tj-pregunta{color:var(--ingreso)}
.v2-pago-res[data-estado-resumen="con_diferencias"],.v2-pago-res[data-estado-resumen="sin_resumen"]{box-shadow:inset 4px 0 0 var(--revisar-texto)}
.v2-pago-res-total{font:600 16px/22px var(--letra);color:var(--tinta);overflow-wrap:anywhere}
.v2-pago-res-dif{display:grid;gap:6px;margin:0;padding:10px 12px 10px 28px;border-radius:12px;background:var(--revisar-fondo);color:var(--revisar-texto);font:500 14px/20px var(--letra)}
.v2-pago-res-dif li{overflow-wrap:anywhere}
.v2-pago-res-acciones{display:flex;flex-wrap:wrap;gap:8px}
.v2-pago-res-subir{display:grid;gap:8px}
.v2-pago-res-mensajes{display:grid;gap:6px;margin:0;padding:0;list-style:none;font:400 14px/20px var(--letra);color:var(--tinta-2)}
.v2-pago-res-mensajes:empty{display:none}
.v2-pago-tj-sinres{padding:10px 12px;border-radius:12px;background:var(--revisar-fondo);color:var(--revisar-texto)}
.v2-pago-tj-sinres p{margin:0 0 4px;font:400 14px/20px var(--letra)}
.v2-pago-tj-sinres .v2-casilla{margin:0;font:600 15px/20px var(--letra);color:var(--revisar-texto)}
/* De dónde sale cada número: la deuda de la app en partes, y la fuente debajo de la primera opción. */
.v2-pago-res-desglose{display:grid;gap:6px;margin:0;padding:0 0 0 20px;font:400 14px/20px var(--letra);color:var(--tinta-2)}
.v2-pago-res-desglose li{overflow-wrap:anywhere}
.v2-pago-tj-op small.v2-pago-tj-fuente{font-size:12px;color:var(--tinta-2)}
/* Pagué la tarjeta, pesos y dólares (Emi, 08/10): las dos monedas siempre abiertas, el saldo de cada caja y los caminos si no alcanza. */
.v2-pago-tj-saldo{margin:0;font:600 17px/22px var(--letra);color:var(--tinta);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.v2-pago-tj-saldo.cero{font-weight:400;font-size:15px;line-height:20px;color:var(--tinta-2)}
.v2-pago-tj-caja-saldo{font:400 13px/17px var(--letra);color:var(--tinta-2);font-variant-numeric:tabular-nums}
.v2-pago-tj-propuesta{display:grid;gap:8px;padding:12px;border:1px solid var(--separador);border-radius:12px;background:var(--superficie-2)}
.v2-pago-tj-propuesta p{margin:0}
.v2-pago-tj-propuesta-titulo{font:600 15px/20px var(--letra);color:var(--tinta);overflow-wrap:anywhere}
.v2-pago-tj-propuesta-op{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;font:400 15px/20px var(--letra);color:var(--tinta)}
.v2-pago-tj-propuesta-op span{flex:1 1 220px;min-width:0;overflow-wrap:anywhere}
.v2-pago-tj-propuesta-op .v2-boton{flex:none}
.v2-pago-tj-percepcion{margin:0;font:400 14px/20px var(--letra)}
/* Una caja que queda en rojo: la alerta de siempre (.v2-banda.alerta), pegada a las cajas, no un gris de 14 px (#9b). */
.v2-pago-tj-descubierto{margin:0;flex-direction:column;gap:8px}
.v2-pago-tj-descubierto p{margin:0}
.v2-pago-tj-descubierto .v2-casilla{margin:0;font:600 15px/20px var(--letra)}
/* «Este pago cubre»: el encabezado de moneda y el porcentaje de cada parte (#25a). */
.v2-pago-cubre-moneda-titulo{margin:0;font:600 14px/20px var(--letra);color:var(--tinta-2)}
.v2-pago-cubre-pct{color:var(--tinta-2);font-variant-numeric:tabular-nums}

/* SUBIR PDF O FOTOS (08/10): el estado de un archivo puede traer el motivo entero ("No lo pude leer: ..."); se acomoda debajo del nombre. */
.v2-aldia-archivo{flex-wrap:wrap}
.v2-aldia-archivo-estado{flex:1 1 auto;min-width:0;text-align:right;overflow-wrap:anywhere}
.v2-aldia-archivo[data-estado="mal"] .v2-aldia-archivo-estado{flex-basis:100%;text-align:left}

/* =====================================================================
   MENÚS (08/10/2026; docs/v2/MENUS.md) y REDISEÑO R1 (09/10/2026;
   docs/v2/diseno/rediseno/REDISENO.md §1.1 y §1.2): UN SOLO sistema de
   navegación. Los mismos cinco lugares son:
     · celu (< 768):      barra de abajo, Hoy · Movimientos · Asistente · Plata · Futuro;
     · tablet (768-1023): riel de 84 px, ícono con el nombre abajo;
     · compu (>= 1024):   barra lateral PEGADA al borde izquierdo (248 px; 264 desde
       1440; 280 desde 1920), sin acordeón: cada destino lleva ícono y letra semibold
       y de él CUELGAN sus sub-ítems (sin ícono, más chicos, sangrados y unidos por
       un riel). El Asistente queda fijo al pie de la lista.
   Sin tope de 1200 ni franjas: el contenido llena el resto, alineado a la izquierda,
   con un margen fluido (--margen); lo que se lee (texto, formularios) conserva el
   ancho de lectura. El tamaño de letra no cambia con el ancho.
   Los cortes siguen siendo container queries sobre .v2-marco.
   ===================================================================== */

/* --- la barra de abajo: cinco lugares --- */
.v2-secciones{grid-template-columns:repeat(5,minmax(0,1fr))}
.v2-seccion-item{display:block;min-width:0}
.v2-seccion{position:relative;width:100%;border:0;background:none;cursor:pointer}
.v2-menu-globito.v2-barra-globito{position:absolute;top:0;left:calc(50% + 6px);margin:0;min-width:18px;height:18px;padding:0 5px;
  font:700 12px/18px var(--letra-numeros);text-align:center;background:var(--globito-fondo);color:var(--globito-texto)}
.v2-sub{display:none}

/* --- los botones de acción de Plata (verbos en infinitivo) --- */
.v2-acciones[data-acciones]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 20px}
.v2-accion{display:flex;align-items:center;gap:12px;min-height:60px;padding:10px 14px;border-radius:var(--r-tarjeta);
  background:var(--superficie);box-shadow:var(--sombra-1);color:var(--tinta);text-decoration:none;font:600 16px/21px var(--letra)}
.v2-accion .v2-icono{color:var(--esp-relleno)}
.v2-accion:focus-visible{outline:2px solid var(--accion);outline-offset:2px}
.v2-contenido:has(> [data-acciones],> [data-lugares]) > *{max-width:var(--ancho-lectura);margin-inline:0}
.v2-contenido:has(> [data-acciones],> [data-lugares]) > .v2-lugares{max-width:var(--ancho-lectura)}
.v2-lugares{margin-bottom:24px}

/* --- Hoy / Este espacio --- */
.v2-contenido > .v2-hoy-segmentado{max-width:360px;margin:0 0 16px;width:100%}
.v2-hoy-segmentado a{min-height:44px}

/* --- las hojas Más y Asistente --- */
.v2-hoja-lista{list-style:none;margin:0 0 12px;padding:0}
.v2-hoja-lista li + li{border-top:1px solid var(--separador)}
.v2-hoja-fila{display:flex;align-items:center;gap:14px;min-height:56px;padding:0 4px;color:var(--tinta);text-decoration:none;
  font:500 17px/22px var(--letra)}
.v2-hoja-fila .v2-icono{color:var(--tinta-2)}
.v2-hoja-fila-texto{flex:1;min-width:0}
/* REDISEÑO R1: en "Más" cada fila es un destino (ícono + semibold), igual que en la barra lateral. */
.v2-hoja-mas .v2-hoja-fila{font-weight:600}
.v2-hoja-fila .v2-menu-globito{margin-left:0}
.v2-hoja-fila-chev{color:var(--tinta-3)}
.v2-hoja-fila:focus-visible{outline:2px solid var(--accion);outline-offset:-2px;border-radius:8px}
.v2-hoja-escribir{margin-top:4px}
.v2-hoja-pie{margin:8px 0 0;text-align:center}

/* Android: toques de 48 dp (los de 44 pt del iPhone ya están en todos lados). */
@media (pointer: coarse){
  .v2-seccion{min-height:56px}
  .v2-boton-icono{width:48px;height:48px}
  .espchip{min-height:48px}
  .v2-accion,.v2-hoja-fila,.v2-enlace-fila{min-height:56px}
  .v2-hoy-segmentado a{min-height:48px}
  .v2-boton{min-height:48px}
}

/* --- tablet (768-1023): el riel de íconos de 84 px --- */
@container marco (min-width: 768px) and (max-width: 1023.98px){
  .v2-app{grid-template-columns:84px minmax(0,1fr)}
  .v2-chip-zona{padding:14px 0 6px;justify-content:center}
  .v2-chip-zona .espchip{width:48px;height:48px;min-height:48px;padding:0;justify-content:center;border-radius:50%}
  .v2-chip-zona .espchip .chev{display:none}
  .v2-chip-nombre{display:block;font-size:0;line-height:22px;white-space:nowrap;font-weight:600}
  .v2-chip-nombre::first-letter{font-size:18px}
  .v2-barra{padding:8px 4px 12px;align-items:stretch}
  .v2-lateral-mes{display:none}
  .v2-secciones{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin}
  .v2-seccion-item[data-barra="asistente"]{order:9;margin-top:auto}
  .v2-seccion{flex-direction:column;justify-content:center;align-items:center;gap:3px;min-height:62px;padding:6px 0;border-radius:12px;
    font:500 11.5px/14px var(--letra);letter-spacing:-.1px;text-align:center}
  .v2-seccion .v2-icono{width:24px;height:24px}
  .v2-seccion[aria-current="page"]{background:var(--esp-lavado);color:var(--tinta)}
  .v2-seccion[aria-current="page"] .v2-icono{color:var(--esp-marca-texto)}
  .v2-menu-globito.v2-barra-globito{top:2px;left:calc(50% + 4px)}
  .v2-lateral-pie{padding-top:8px;align-items:center;margin-top:0}
  .v2-lateral-fila{justify-content:center;padding:0;width:48px;min-height:48px}
  .v2-lateral-fila > span:not(.v2-inicial):not(.v2-menu-globito){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .v2-lateral-fila{position:relative}
  .v2-lateral-fila .v2-menu-globito{position:absolute;top:2px;right:6px;margin:0}
}

/* --- compu (>= 1024): la barra lateral pegada al borde, con los sub-ítems colgados de su destino ---
   Cinco DESTINOS: ícono + 16/22 semibold. Sus SUB-ÍTEMS cuelgan de ellos: sin ícono, 14,5/20 normal, sangrados
   hasta el texto del destino y unidos por un riel de 1,5 px. Cuatro señales a la vez (peso, tamaño, ícono y
   riel): el riel (--guia) no lleva solo la jerarquía, y por eso no tiene un mínimo de contraste propio.
   El destino activo se ilumina entero; si estás en un sub-ítem, el destino queda "en ruta" (ícono y riel en
   el color del espacio, sin fondo) y el sub-ítem lleva marca y fondo. Cada nombre una sola vez. */
@container marco (min-width: 1024px){
  .v2-app{grid-template-columns:248px minmax(0,1fr)}
  .v2-cabecera{justify-content:stretch;align-items:flex-start}
  .v2-barra{padding:8px 12px 12px}
  .v2-lateral-mes{margin:0 0 12px;padding:0 6px}
  .v2-secciones{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;gap:4px}
  .v2-seccion-item[data-barra="asistente"]{order:9;position:sticky;bottom:0;z-index:3;margin-top:auto;padding-top:6px;
    background:var(--superficie);border-top:1px solid var(--separador)}
  .v2-seccion{width:100%;flex-direction:row;justify-content:flex-start;align-items:center;gap:12px;min-height:44px;padding:0 12px;
    border-radius:10px;color:var(--tinta);font:600 16px/22px var(--letra);text-align:left}
  .v2-seccion .v2-icono{width:22px;height:22px;color:var(--tinta-2)}
  .v2-seccion:hover{background:var(--hover)}
  .v2-seccion[aria-current="page"] .v2-icono{color:var(--esp-marca-texto);stroke-width:2.1}
  .v2-seccion-item.en-ruta > .v2-seccion[aria-current="page"]{background:none}
  .v2-seccion-item.en-ruta > .v2-seccion .v2-icono{color:var(--esp-marca-texto);stroke-width:2.1}
  .v2-menu-globito.v2-barra-globito{position:static;margin-left:auto}
  .v2-sub{display:flex;flex-direction:column;gap:1px;list-style:none;margin:2px 0 8px 23px;padding:0;border-left:1.5px solid var(--guia)}
  .v2-seccion-item.en-ruta > .v2-sub{border-left-color:var(--esp-relleno)}
  .v2-sub-item{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:36px;padding:0 10px 0 21px;
    border-radius:0 8px 8px 0;color:var(--tinta-2);font:400 14.5px/20px var(--letra);text-decoration:none}
  .v2-sub-item:hover{background:var(--hover);color:var(--tinta)}
  .v2-sub-item:focus-visible{outline:2px solid var(--accion);outline-offset:-2px}
  .v2-sub-item[aria-current="page"]{background:var(--esp-lavado);color:var(--tinta);font-weight:600}
  .v2-sub-item[aria-current="page"]::before{content:"";position:absolute;left:-2px;top:4px;bottom:4px;width:3px;border-radius:2px;background:var(--esp-relleno)}
  .v2-sub-item .v2-menu-globito{margin-left:auto}
  .v2-lateral-pie{border-top:1px solid var(--separador);margin-top:8px}
  .v2-acciones[data-acciones]{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
}
@container marco (min-width: 1440px){.v2-app{grid-template-columns:264px minmax(0,1fr)}}
@container marco (min-width: 1920px){.v2-app{grid-template-columns:280px minmax(0,1fr)}}
/* Ventana baja con mouse: los sub-ítems se achican para que entren sin scroll. */
@media (min-width: 1024px) and (max-height: 940px) and (pointer: fine){
  .v2-sub-item{min-height:32px}
  .v2-sub{margin-top:0;margin-bottom:4px}
  .v2-seccion{min-height:40px}
  .v2-secciones{gap:2px}
}
/* Para dedos (iPad con teclado, Android grande): 44 pt los sub-ítems. */
@media (pointer: coarse){
  .v2-sub-item{min-height:44px}
}

/* Hojas Más y Asistente en la compu y la tablet: sobre el contenido, no hojas de abajo. */
@media (min-width: 768px){
  .v2-hoja-asistente:modal{margin:0 0 0 auto;width:min(400px,100vw);height:100dvh;max-height:100dvh;border-radius:0;
    box-shadow:var(--sombra-flota)}
  .v2-hoja-asistente[open]{animation:v2-entra-der var(--t-empuje) var(--curva-ios)}
  .v2-hoja-mas:modal{position:fixed;margin:0;inset:auto auto 16px 96px;width:min(320px,calc(100vw - 112px))}
}
@media (min-width: 1024px){
  .v2-hoja-mas:modal{left:12px;width:300px}
}
@media (prefers-reduced-motion: reduce){
  .v2-hoja-asistente[open]{animation:none!important}
}

/* Los cinco rótulos de la barra de abajo entran enteros en 375 px ("Movimientos" mide ~71 px a 11,5). */
@container marco (max-width: 767.98px){
  .v2-barra .v2-seccion{font-size:11.5px;line-height:14px}
  .v2-barra .v2-rotulo{max-width:none;white-space:nowrap}
}
/* =====================================================================
   LA VOZ DE LA EXPERTA y "HOY EN EL MERCADO" (EXPERTOS §2.2 y §3.2, etapa 1).
   Una tarjeta chica, de borde fino, con la superficie del tema (claro y
   oscuro) y sin sombra fuerte. El punto de color identifica a la persona
   (verde grisáceo = Finanzas, azul pizarra = Contadora), nunca "bueno" ni
   "malo". Mercado en tinta neutra con ▲ ▼ (nada de verde ni rojo de mercado).
   Los cortes son container queries sobre la propia tarjeta (.vx): 2 × 2 hasta
   ~400 px de tarjeta (celulares de hasta 430), 4 en fila desde ahí (a 768 con
   la barra lateral la tarjeta mide unos 420), y el contenido se centra a
   1200 px como máximo, el ancho de la columna del Inicio y de Mi panel (a
   1920 no se estira).
   ===================================================================== */
:root{--vx-finanzas:#4E6E5E;--vx-contadora:#3E5C86}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--vx-finanzas:#8DB3A0;--vx-contadora:#8FB0DD}}
:root[data-theme="dark"]{--vx-finanzas:#8DB3A0;--vx-contadora:#8FB0DD}

.vx{container-type:inline-size;container-name:vx;display:grid;gap:12px;align-content:start;width:100%;max-width:1200px;margin-inline:0;padding:16px;min-width:0;box-sizing:border-box;
  background:var(--superficie);border:1px solid var(--separador);border-radius:var(--r-tarjeta,16px);color:var(--tinta)}
.vx p,.mp .vx p{margin:0}
.vx-cab{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.vx-punto{flex:none;width:10px;height:10px;border-radius:50%;background:var(--vx-finanzas)}
.vx[data-voz="contadora"] .vx-punto{background:var(--vx-contadora)}
.vx-persona{font:600 13px/18px var(--letra);color:var(--tinta-2)}
.vx-titulo{margin:0;font:600 17px/24px var(--letra);color:var(--tinta)}
.vx-al{margin-left:auto;font:400 13px/18px var(--letra);color:var(--tinta-2);font-variant-numeric:tabular-nums}
.vx-prioridad{padding:2px 8px;border-radius:999px;background:var(--superficie-2);font:500 12px/16px var(--letra);color:var(--tinta-2)}
.vx-titular{font:500 16px/22px var(--letra);color:var(--tinta);overflow-wrap:anywhere}
.vx-detalle{font:400 14px/20px var(--letra);color:var(--tinta-2)}
.vx-ejemplo{padding:8px 12px;border-radius:10px;background:var(--revisar-fondo);color:var(--revisar-texto);font:500 13px/18px var(--letra)}

.vx-fichas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}
.vx-ficha{display:grid;gap:2px;align-content:start;min-width:0;padding:10px 12px;border-radius:12px;background:var(--superficie-2)}
.vx-ficha-rotulo{font:500 12px/16px var(--letra);color:var(--tinta-2)}
.vx-ficha-valor{font:600 18px/24px var(--letra);font-variant-numeric:tabular-nums;color:var(--tinta);overflow-wrap:anywhere}
.vx-cambio{font:500 12px/16px var(--letra);color:var(--tinta-2);font-variant-numeric:tabular-nums}
.vx-ficha-nota{font:400 12px/16px var(--letra);color:var(--tinta-3)}
.vx-ficha[data-estado="viejo"] .vx-ficha-valor,.vx-ficha[data-estado="sin_dato"] .vx-ficha-valor{color:var(--tinta-3)}
.vx-viejo{justify-self:start;padding:1px 8px;border:1px dashed var(--tinta-3);border-radius:999px;font:500 12px/16px var(--letra);color:var(--tinta-2)}

.vx-clases > summary,.vx-bancos > summary{display:flex;align-items:center;min-height:44px;cursor:pointer;font:600 14px/20px var(--letra);color:var(--tinta)}
.vx-filas{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin:4px 0 0;padding:0;list-style:none}
.vx-fila{display:grid;gap:4px;align-content:start;min-width:0;padding:10px 12px;border:1px solid var(--separador);border-radius:12px}
.vx-fila-cab{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.vx-fila-nombre{font:600 14px/20px var(--letra);color:var(--tinta)}
.vx-fila-fecha{margin-left:auto;font:400 12px/16px var(--letra);color:var(--tinta-2)}
.vx-marca{padding:1px 8px;border-radius:999px;background:var(--revisar-fondo);color:var(--revisar-texto);font:500 12px/16px var(--letra)}
.vx-fila-principal{font:600 15px/21px var(--letra);color:var(--tinta);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.vx-fila-detalle{font:400 13px/18px var(--letra);color:var(--tinta-2);overflow-wrap:anywhere}
.vx-fila-etiquetas{display:flex;flex-wrap:wrap;gap:4px 6px}
.vx-chip{padding:1px 8px;border-radius:999px;background:var(--superficie-2);font:400 12px/17px var(--letra);color:var(--tinta-2)}
.vx-chip b{font-weight:600;color:var(--tinta)}
/* De dónde sale un dato que no es oficial ("fuente comunitaria", "estimado de mercado, no oficial", "informal"): borde punteado, como el aviso de "desactualizado". */
.vx-etiqueta{padding:1px 8px;border:1px dashed var(--tinta-3);border-radius:999px;font:400 12px/17px var(--letra);color:var(--tinta-2);overflow-wrap:anywhere}
.vx-ficha .vx-etiqueta,.vx-ficha .vx-chip,.vx-ficha .vx-marca{justify-self:start}
.vx-fila[data-estado="viejo"] .vx-fila-principal,.vx-fila[data-estado="semanal"] .vx-fila-principal{color:var(--tinta-3)}
.vx-fila[data-estado="viejo"] .vx-fila-nombre{color:var(--tinta-2)}

.vx-bancos-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:2px 12px}
.vx-bancos fieldset{margin:0;padding:0;border:0}
.vx-bancos legend{padding:0 0 4px;font:500 13px/18px var(--letra);color:var(--tinta-2)}
.vx-banco{display:flex;align-items:center;gap:8px;min-height:44px;font:400 14px/20px var(--letra);color:var(--tinta)}
.vx-banco input{flex:none;width:20px;height:20px}
.vx-bancos-form{display:grid;gap:8px;justify-items:start}

.vx-fuente{font:400 12px/17px var(--letra);color:var(--tinta-2)}
.vx-sin{padding:2px 8px;border-radius:999px;background:var(--superficie-2);justify-self:start}
.vx-porque summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font:500 13px/18px var(--letra);color:var(--tinta-2)}
.vx-pie{font:400 12px/17px var(--letra);color:var(--tinta-2)}
.vx-pie a,.vx-fuente a{color:var(--accion);text-decoration:underline}
.vx-pie-cnv{color:var(--tinta-3)}

@container vx (min-width: 400px){
  .vx-fichas{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .vx-ficha{padding:8px 6px}
  .vx-ficha-valor{font-size:14px;line-height:20px}
}
@container vx (min-width: 640px){
  .vx{padding:20px}
  .vx-ficha{padding:10px 12px}
  .vx-ficha-valor{font-size:18px;line-height:24px}
  .vx-filas{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container vx (min-width: 960px){
  .vx-filas{grid-template-columns:repeat(3,minmax(0,1fr))}
  .vx-ficha-valor{font-size:20px;line-height:26px}
}

/* PAGO PARCIAL (08/10, CONCILIACION-BANCARIA E1): «Mínimo» en la hoja de pago, lo que queda del total, el aviso de pagar menos que el mínimo y «Pagado · Queda · vence». */
.v2-pago-tj-seg-4{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:560px){.v2-pago-tj-seg-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.v2-pago-tj-queda{margin:0;font:400 15px/20px var(--letra);color:var(--tinta-2);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.v2-pago-tj-minimo{flex-direction:column;align-items:stretch;gap:8px;margin:0;font:400 14px/20px var(--letra)}
.v2-pago-tj-minimo p{margin:0}
.v2-pago-tj-minimo-botones{display:flex;flex-wrap:wrap;gap:8px}
.v2-pago-tj-minimo .v2-casilla{margin:0;font:600 15px/20px var(--letra);color:var(--revisar-texto)}
.v2-pago-tj-minimo .v2-boton{max-width:100%;white-space:normal}
.v2-pago-res-queda{margin:0;font:600 15px/20px var(--letra);color:var(--tinta);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}

/* ESTADO DE CUENTA DE UNA CAJA DEL BANCO (08/10, CONCILIACION-BANCARIA E2a): subir el CSV y ver los dos saldos del banco. */
.v2-ext{display:grid;gap:16px;max-width:760px;margin:0 auto}
.v2-ext .v2-panel{display:grid;gap:12px}
.v2-ext h2{margin:0;font:600 18px/24px var(--letra);color:var(--tinta);display:flex;align-items:center;gap:8px}
.v2-ext-bajada{margin:0;font:400 15px/20px var(--letra);color:var(--tinta-2)}
.v2-ext-texto{margin:0;font:400 15px/22px var(--letra);color:var(--tinta);overflow-wrap:anywhere}
.v2-ext-nosubir{padding:12px;border-radius:12px;background:var(--revisar-fondo);color:var(--revisar-texto)}
.v2-ext-form{display:grid;gap:12px}
.v2-ext-form .v2-campo{margin:0}
.v2-ext-form input[type="file"]{min-height:44px;padding:8px 10px}
.v2-ext-control.mal{box-shadow:0 0 0 2px var(--deuda)}
.v2-ext-saldos{display:grid;gap:8px;margin:0}
.v2-ext-saldos div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px}
.v2-ext-saldos dt{font:400 15px/20px var(--letra);color:var(--tinta-2)}
.v2-ext-saldos dd{margin:0;font:600 18px/24px var(--letra);color:var(--tinta);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.v2-ext-mal{color:var(--deuda);font-weight:600}
.v2-ext-problemas{margin:0;padding-left:20px;font:400 14px/20px var(--letra);color:var(--tinta-2)}
.v2-ext-detalle summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font:600 15px/20px var(--letra);color:var(--accion)}
.v2-ext-lista{list-style:none;margin:0;padding:0;display:grid;gap:0}
.v2-ext-lista li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 12px;padding:10px 0;border-top:1px solid var(--separador);font:400 14px/20px var(--letra)}
.v2-ext-fecha{color:var(--tinta-2);font-variant-numeric:tabular-nums}
.v2-ext-desc{overflow-wrap:anywhere}
.v2-ext-monto{font-variant-numeric:tabular-nums;color:var(--ingreso);white-space:nowrap}
.v2-ext-monto.sale{color:var(--tinta)}
.v2-ext-releer{display:flex}

/* CONCILIAR LA CAJA CON EL ESTADO DE CUENTA (08/10, CONCILIACION-BANCARIA E2b): cabecera fija, tres listas con una acción por renglón, el cierre y el registro. */
.v2-ext.ancha{max-width:1280px}
.v2-ext-fija{display:contents}
.v2-ext-cabecera{display:grid;gap:8px;padding:12px 16px;border-radius:var(--r-tarjeta);background:var(--superficie);box-shadow:var(--sombra-1)}
.v2-ext-cabecera h2{margin:0;font:600 15px/20px var(--letra);color:var(--tinta-2);display:block;overflow-wrap:anywhere}
.v2-ext-cab-saldos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 12px;margin:0}
.v2-ext-cab-saldos div{display:grid;gap:2px;min-width:0}
.v2-ext-cab-saldos dt{font:400 13px/18px var(--letra);color:var(--tinta-2)}
.v2-ext-cab-saldos dd{margin:0;font:600 17px/22px var(--letra);color:var(--tinta);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.v2-ext-cab-saldos small{display:block;font:400 12px/16px var(--letra);color:var(--tinta-2)}
@media (max-width:559px){.v2-ext-cab-saldos{grid-template-columns:1fr}.v2-ext-cab-saldos div{display:flex;justify-content:space-between;align-items:baseline;gap:8px}}
.v2-ext-barra{display:grid;gap:6px;padding:10px 16px;border-radius:12px;background:var(--superficie);box-shadow:var(--sombra-1);font:600 14px/20px var(--letra);color:var(--tinta);position:sticky;top:0;z-index:4}
.v2-ext-barra-pista{display:block;height:6px;border-radius:3px;background:var(--pista);overflow:hidden}
.v2-ext-barra-pista span{display:block;height:100%;background:var(--progreso-bien);border-radius:3px}
@media (min-width:1100px){
  .v2-ext-fija{display:grid;gap:8px;position:sticky;top:0;z-index:4;background:var(--fondo);padding:4px 0 8px}
  .v2-ext-barra{position:static}
}
.v2-ext-resultado{margin:0;font:600 17px/24px var(--letra);color:var(--tinta);overflow-wrap:anywhere}
.v2-ext-columnas{display:none}
.v2-ext-grupo{border-radius:var(--r-tarjeta);background:var(--superficie);box-shadow:var(--sombra-1);padding:0 16px}
.v2-ext-grupo>summary{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:52px;cursor:pointer;font:600 17px/24px var(--letra);color:var(--tinta);list-style:none}
.v2-ext-grupo>summary::-webkit-details-marker{display:none}
.v2-ext-cero{font:600 14px/20px var(--letra);color:var(--ingreso)}
.v2-ext-par{display:grid;gap:10px;padding:14px 0;border-top:1px solid var(--separador)}
.v2-ext-lado{display:grid;gap:4px;min-width:0}
.v2-ext-lado-rotulo{margin:0;font:600 12px/16px var(--letra);color:var(--tinta-2);text-transform:uppercase;letter-spacing:.04em}
.v2-ext-fila{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 10px;align-items:baseline;font:400 15px/20px var(--letra);color:var(--tinta)}
.v2-ext-hueco{margin:0;font:400 14px/20px var(--letra);color:var(--tinta-2);overflow-wrap:anywhere}
.v2-ext-acciones{display:grid;gap:8px;align-content:start}
.v2-ext-acciones form{display:grid;gap:8px;margin:0}
.v2-ext-acciones .v2-boton{width:100%;white-space:normal;text-align:center}
.v2-ext-nota{margin:0;font:400 13px/18px var(--letra);color:var(--tinta-2);overflow-wrap:anywhere}
.v2-ext-form-fila select{min-height:44px;padding:8px 10px;border:1px solid var(--campo-borde);border-radius:10px;background:var(--superficie);color:var(--tinta);font:400 15px/20px var(--letra);width:100%}
.v2-ext-coinciden{list-style:none;margin:0;padding:0 0 8px}
.v2-ext-coinciden li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 10px;padding:10px 0;border-top:1px solid var(--separador);font:400 14px/20px var(--letra)}
.v2-ext-coinciden .v2-etiqueta{margin-left:6px}
.v2-ext-cerrar .v2-ext-texto{max-width:70ch}
.v2-ext-cerrada .v2-ext-saldos{margin-top:4px}
.v2-ext-registro h3{margin:12px 0 4px;font:600 15px/20px var(--letra);color:var(--tinta)}
.v2-ext-registro ul{margin:0;padding-left:20px;font:400 14px/20px var(--letra);color:var(--tinta-2)}
.v2-ext-registro li{overflow-wrap:anywhere}
@media (min-width:1100px){
  .v2-ext-columnas{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(220px,300px);gap:32px;padding:0 16px;font:600 12px/16px var(--letra);color:var(--tinta-2);text-transform:uppercase;letter-spacing:.04em}
  .v2-ext-par{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(220px,300px);gap:32px;align-items:start}
  .v2-ext-par .v2-ext-lado-rotulo{display:none}
  .v2-ext-par .v2-ext-lado[data-lado="banco"]{position:relative}
  .v2-ext-par .v2-ext-lado[data-lado="banco"]::after{content:"";position:absolute;right:-26px;top:10px;width:20px;border-top:1px dashed var(--campo-borde)}
}

/* Botones que pide una herramienta del agente en el chat (08/10, CONCILIACION-BANCARIA E4): elegir entre la caja en pesos y la de dólares. */
.v2-chat-opciones{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.v2-chat-opciones .v2-boton{max-width:100%;white-space:normal;text-align:center}