/* ============================================================================================
   BASE v2 de las apps de gestión — copia de ui-kit/html/propuestas/base-v2/base/base.css (la referencia
   que aprobó Mario el 24-10-2026) con tres cambios hechos por _base/v2/genera.py:
   · los colores van en :root[data-tema] (v2.js lo pone) para ganar a los :root de cada app;
   · las piezas que ya existían en las apps llevan nombre propio: .vnav .vacc .vseg .vmd .vwd .vwds;
   · el contenido vive en <main id="vista">.
   No editar a mano: cambiar el kit y regenerar. Lo de cada app que no está en el kit, en apps.css.
   ============================================================================================ */
/* ============================================================================================
   BASE v2 «Esencial × Apple × Revolut» — lo que comparten TODAS las apps de gestión.
   Por cliente solo cambian: marca (2 colores), claro u oscuro, logo y módulos (clientes/<cliente>.js).
   Mapa de efectos (dónde va cada cosa, y en ningún sitio más):
   · F30 (malla de color viva): el fondo de toda la app, uno solo, detrás de todo. Su color sigue al contexto
     (marca; en Inicio/Tesorería, la cuenta que miras). Más intenso solo en Entrada y Mantenimiento.
   · Orbe (PulsingBorder): solo el Copilot.
   · Cristal líquido: solo lo que navega o flota (barra/carril/menú lateral, cabecera al desplazar, hojas, menús,
     buscador, botones redondos de arriba). Nunca en listas ni tarjetas de contenido.
   · Brillo neón: UNO por pantalla (lente activa en la navegación + el protagonista: saldo, tarjeta de delante, orbe).
   · Movimiento: muelles suaves, todo sale de lo que tocas, una sola cosa se mueve cada vez.
   ============================================================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 48px;
  --gutter: 20px;
  --r-frame: 30px; --r-card: 22px; --r-inner: 14px; --r-ctrl: 14px; --r-pill: 999px;
  --h-ctrl: 48px; --h-btn: 50px; --h-mini: 36px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --t-hero: 52px; --t-h1: 34px; --t-h2: 20px; --t-body: 16px; --t-sub: 13.5px; --t-micro: 12px;
  --dur-micro: 160ms; --dur-quick: 240ms; --dur-sheet: 380ms; --dur-morph: 460ms; --dur-enter: 480ms; --dur-exit: 220ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.55, 0, 1, 0.45); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --spring: linear(0, 0.034 2%, 0.13 4.3%, 0.27 6.9%, 0.55 12%, 0.76 17%, 0.89 22%, 0.97 28%, 1.01 34%, 1.025 40%, 1.02 48%, 1.005 60%, 0.999 75%, 1);
  --nav-w: 0px; --insp-w: 0px;
}
/* Oscuro (por defecto) */
:root[data-tema="oscuro"] {
  --bg: #050507; --ink: #FFFFFF; --ink-2: #A1A1A8; --ink-3: #6B6B73;
  --surface: rgba(24, 24, 27, 0.80); --surface-2: rgba(255, 255, 255, 0.07); --surface-3: rgba(255, 255, 255, 0.13); --surface-solida: #141416;
  --line: rgba(255, 255, 255, 0.08); --line-2: rgba(255, 255, 255, 0.16);
  --action: #FFFFFF; --on-action: #000000;
  --ok: #30D158; --ok-bg: rgba(48, 209, 88, 0.14); --warn: #FFB340; --warn-bg: rgba(255, 159, 10, 0.14); --ko: #FF453A; --ko-bg: rgba(255, 69, 58, 0.14); --info: #64A8FF; --info-bg: rgba(10, 132, 255, 0.16);
  --lg-tint: rgba(40, 40, 44, 0.58); --lg-tint-2: rgba(22, 22, 24, 0.46); --lg-rim: rgba(255, 255, 255, 0.42); --lg-rim-2: rgba(255, 255, 255, 0.07);
  --lg-depth: rgba(0, 0, 0, 0.4); --lg-sh: 0 14px 40px rgba(0, 0, 0, 0.5); --lg-spec: rgba(255, 255, 255, 0.32); --lente: rgba(255, 255, 255, 0.12);
  --glow-k: 1; --velo: rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}
:root[data-tema="claro"] {
  --bg: #F2F3F7; --ink: #0F0F12; --ink-2: #63646B; --ink-3: #A0A1A8;
  --surface: rgba(255, 255, 255, 0.82); --surface-2: rgba(15, 15, 18, 0.05); --surface-3: rgba(15, 15, 18, 0.09); --surface-solida: #FFFFFF;
  --line: rgba(15, 15, 18, 0.07); --line-2: rgba(15, 15, 18, 0.14);
  --action: #0F0F12; --on-action: #FFFFFF;
  --ok: #16A34A; --ok-bg: #E9F9EF; --warn: #B45309; --warn-bg: #FFF6E5; --ko: #DC2626; --ko-bg: #FEEFEF; --info: #2563EB; --info-bg: #EEF4FF;
  --lg-tint: rgba(255, 255, 255, 0.80); --lg-tint-2: rgba(255, 255, 255, 0.62); --lg-rim: rgba(255, 255, 255, 0.95); --lg-rim-2: rgba(255, 255, 255, 0.35);
  --lg-depth: rgba(0, 0, 0, 0.06); --lg-sh: 0 12px 34px rgba(20, 20, 40, 0.12), 0 2px 6px rgba(20, 20, 40, 0.05); --lg-spec: rgba(255, 255, 255, 0.85); --lente: rgba(15, 15, 18, 0.07);
  --glow-k: 0.45; --velo: rgba(20, 20, 30, 0.28);
  color-scheme: light;
}
/* Marca: la ponen los clientes (--marca, --marca-2). Derivados: */
:root { --marca: var(--brand, #FF0B0B); --marca-2: color-mix(in srgb, var(--marca) 60%, #fff); --marca-tinte: color-mix(in srgb, var(--marca) 16%, transparent);
  --glow: 0 0 0 1px color-mix(in srgb, var(--marca) calc(40% * var(--glow-k)), transparent), 0 0 28px color-mix(in srgb, var(--marca) calc(45% * var(--glow-k)), transparent);
  --glow-txt: 0 0 28px color-mix(in srgb, var(--marca) calc(55% * var(--glow-k)), transparent); }
@media (min-width: 1100px) { :root { --gutter: 32px; --r-card: 18px; --r-ctrl: 12px; --h-ctrl: 42px; --h-btn: 42px; --t-hero: 56px; --t-h1: 30px; --t-body: 15px; } }

/* ---------- 2. Página y fondo F30 (uno para toda la app) ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--ink); font-family: var(--font); font-size: var(--t-body); line-height: 1.45; -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent; overflow-x: hidden; }
button { font: inherit; color: inherit; }
.ti { line-height: 1; }
#fondo { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(90% 60% at 80% 0%, color-mix(in srgb, var(--marca) 45%, transparent), transparent 70%), var(--bg); }
#fondo .capa { position: absolute; inset: 0; opacity: 0; transition: opacity 900ms var(--ease-out); }
#fondo .capa.listo { opacity: 1; }
#fondo .capa canvas { width: 100% !important; height: 100% !important; display: block; }
/* Lectura: el fondo se apaga hacia abajo (la luz arriba, el contenido tranquilo) */
#fondo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--bg) 55%, transparent) 38%, color-mix(in srgb, var(--bg) 88%, transparent) 70%); }
[data-pantalla="entrada"] #fondo::after, [data-pantalla="mantenimiento"] #fondo::after { background: radial-gradient(70% 50% at 50% 55%, transparent, color-mix(in srgb, var(--bg) 50%, transparent)); }

/* ---------- 3. Cristal líquido ---------- */
.glass { --mx: 30%; --my: 0%; isolation: isolate; border: 0;
  background: linear-gradient(160deg, var(--lg-tint), var(--lg-tint-2) 60%);
  -webkit-backdrop-filter: blur(22px) saturate(190%) brightness(1.04); backdrop-filter: blur(22px) saturate(190%) brightness(1.04);
  box-shadow: inset 0 0 0 0.5px var(--lg-rim-2), inset 0 -10px 18px -12px var(--lg-depth), inset 0 8px 14px -12px var(--lg-rim), var(--lg-sh); }
.glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: -1;
  background: linear-gradient(170deg, var(--lg-rim), var(--lg-rim-2) 38%, transparent 55%, var(--lg-rim-2) 85%, var(--lg-rim) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.glass::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: radial-gradient(circle 70px at var(--mx) var(--my), var(--lg-spec), transparent 70%); mix-blend-mode: soft-light; }
.rel { position: relative; }

/* ---------- 4. Esqueleto: navegación según el tamaño ---------- */
.app { position: relative; z-index: 1; min-height: 100%; }
#vista { padding: calc(env(safe-area-inset-top) + 58px) var(--gutter) calc(env(safe-area-inset-bottom) + 120px); max-width: 1240px; margin: 0 auto; }
/* Cabecera de arriba (móvil y tablet): logo · buscar · avatar. Cristal solo al desplazar */
.top { position: fixed; z-index: 20; top: 0; left: var(--nav-w); right: 0; height: calc(env(safe-area-inset-top) + 56px); padding: env(safe-area-inset-top) var(--gutter) 0;
  display: flex; align-items: center; gap: 10px; }
.top .fondo-top { position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity var(--dur-quick) var(--ease-out); }
body.plegado .top .fondo-top { opacity: 1; }
.top .logo { height: 22px; width: auto; display: block; transition: opacity var(--dur-quick); }
.top .titulo-mini { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; font-size: 17px; font-weight: 600; opacity: 0; transform: translateY(6px);
  transition: opacity var(--dur-quick) var(--ease-out), transform var(--dur-quick) var(--ease-out); pointer-events: none; }
body.plegado .top .titulo-mini { opacity: 1; transform: none; }
body.plegado .top .logo { opacity: 0; }
.top .der { margin-left: auto; display: flex; gap: 8px; }
.bt { position: relative; width: 40px; height: 40px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 19px; border: 0; background: var(--surface-2); color: var(--ink); cursor: pointer; flex: none; }
.bt.av { font-size: 14px; font-weight: 600; }
.buscador-d { display: none; position: relative; }

/* Barra de pestañas (móvil < 820): cápsula de cristal flotante con lente */
.vnav { position: fixed; z-index: 30; }
.vnav .lente { position: absolute; z-index: 0; background: var(--lente); border-radius: 26px; box-shadow: inset 0 0 0 0.5px var(--lg-rim-2), var(--glow); will-change: transform; pointer-events: none; }
.vnav a { position: relative; z-index: 1; display: flex; align-items: center; color: var(--ink); text-decoration: none; cursor: pointer; transition: color var(--dur-quick); }
.vnav a .ti { font-size: 23px; }
.vnav a.on { color: var(--marca); }
.vnav a .n { position: absolute; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--ko); color: #fff; font-size: 11px; font-weight: 600; display: grid; place-items: center; }
.vnav .arbol, .vnav .logo-nav, .vnav .yo, .vnav .finanzas { display: none; }
@media (max-width: 819px) {
  .vnav { left: 14px; right: 14px; bottom: calc(env(safe-area-inset-bottom) + 14px); height: 64px; border-radius: 34px; display: flex; align-items: center; padding: 0 6px;
    transition: transform var(--dur-morph) var(--spring); transform-origin: center bottom; }
  .vnav a { flex: 1; height: 54px; border-radius: 27px; flex-direction: column; justify-content: center; gap: 2px; font-size: 10.5px; font-weight: 500; }
  .vnav .lente { top: 5px; height: 54px; }
  .vnav a .n { top: 4px; left: 50%; margin-left: 6px; }
  .vnav .lbl { transition: opacity var(--dur-quick); }
  body.encogida .vnav { transform: translateY(8px) scale(0.86); }
  body.encogida .vnav .lbl { opacity: 0; }
}
/* Carril (tablet 820-1099): iconos con nombre a la izquierda, de cristal */
@media (min-width: 820px) and (max-width: 1099px) {
  :root { --nav-w: 100px; }
  .vnav { left: 12px; top: 12px; bottom: 12px; width: 76px; border-radius: 26px; display: flex; flex-direction: column; align-items: center; padding: 14px 0; gap: 4px; }
  .vnav .logo-nav { display: block; height: 22px; width: 52px; object-fit: contain; margin-bottom: 14px; }
  .vnav a { width: 64px; height: 62px; border-radius: 20px; flex-direction: column; justify-content: center; gap: 4px; font-size: 11px; font-weight: 500; }
  .vnav .lente { left: 6px; width: 64px; height: 62px; border-radius: 20px; }
  .vnav a .n { top: 6px; right: 8px; }
  .vnav .yo { display: grid; margin-top: auto; }
  #vista { padding-left: calc(var(--nav-w) + 8px); }
}
/* Menú lateral (escritorio ≥ 1100): cristal flotante con el árbol de la sección, Finanzas y tú al pie */
@media (min-width: 1100px) {
  :root { --nav-w: 284px; }
  .vnav { left: 12px; top: 12px; bottom: 12px; width: 260px; border-radius: 26px; display: flex; flex-direction: column; padding: 20px 12px 12px; gap: 2px; }
  .vnav .logo-nav { display: block; height: 26px; width: auto; align-self: flex-start; margin: 0 10px 20px; }
  .vnav a { height: 42px; border-radius: 13px; padding: 0 12px; gap: 12px; font-size: 15px; font-weight: 500; }
  .vnav a .ti { font-size: 20px; color: var(--ink-2); }
  .vnav a.on .ti { color: var(--marca); }
  .vnav a.on { color: var(--ink); }
  .vnav .lente { left: 12px; width: 236px; height: 42px; border-radius: 13px; }
  .vnav a .n { position: static; margin-left: auto; }
  .vnav .arbol { display: grid; gap: 1px; margin: 2px 0 6px 34px; padding-left: 10px; border-left: 1px solid var(--line-2); }
  .vnav .arbol a { height: 32px; font-size: 14px; font-weight: 400; color: var(--ink-2); padding: 0 10px; border-radius: 10px; }
  .vnav .arbol a.on { color: var(--ink); background: var(--lente); }
  .vnav .finanzas { display: flex; margin-top: 10px; color: var(--ink-2); }
  .vnav .yo { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 10px; border-top: 1px solid var(--line); font-size: 14px; }
  .vnav .yo span span { display: block; font-size: 12px; color: var(--ink-2); }
  .top { left: var(--nav-w); background: none; }
  .top .logo, .top .titulo-mini { display: none; }
  .buscador-d { display: flex; align-items: center; gap: 8px; height: 40px; width: min(360px, 40vw); border-radius: 20px; padding: 0 14px; color: var(--ink-3); font-size: 14px; cursor: pointer; }
  .buscador-d kbd { margin-left: auto; font: 500 12px var(--font); color: var(--ink-3); border: 1px solid var(--line-2); border-radius: 6px; padding: 1px 6px; }
  body.plegado .top .fondo-top { opacity: 0; }
  #vista { padding-left: calc(var(--nav-w) + var(--gutter) - 20px); padding-top: 72px; padding-bottom: 48px; }
}
@media (min-width: 1440px) { :root { --insp-w: 420px; } }

/* ---------- 5. Cabecera de pantalla ---------- */
.cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 6px 0 18px; }
.cab .fecha { font-size: 15px; color: var(--ink-2); margin: 0 0 2px; }
.cab h1 { font-size: var(--t-h1); font-weight: 600; letter-spacing: -0.028em; line-height: 1.08; margin: 0; transform-origin: left bottom; transition: opacity var(--dur-quick), transform var(--dur-quick) var(--ease-out); }
body.plegado .cab h1 { opacity: 0; transform: scale(0.85) translateY(-6px); }
.cab .botones { display: none; gap: 8px; }
@media (min-width: 1100px) { .cab .botones { display: flex; } body.plegado .cab h1 { opacity: 1; transform: none; } }
.sec { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 28px 4px 10px; font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-2); }
.sec a { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 15px; color: var(--marca); cursor: pointer; }

/* ---------- 6. Números (Esencial): ligeros, céntimos en gris ---------- */
.num { font-variant-numeric: tabular-nums; font-weight: 400; letter-spacing: -0.02em; white-space: nowrap; }
.num .c { color: inherit; font-size: 0.58em; letter-spacing: 0; }   /* céntimos y € del color de la cifra: el dinero se ve entero (Mario, 25-10) */
.mas { color: var(--ok); }

/* ---------- 7. Botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--h-btn); padding: 0 20px; border-radius: var(--r-pill); border: 0;
  background: var(--surface-2); color: var(--ink); font-size: 15px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: transform var(--dur-micro) var(--ease-out); }
.btn.pri { background: var(--action); color: var(--on-action); }
.btn.marca { background: var(--marca); color: #fff; box-shadow: var(--glow); }
.btn.mini { height: var(--h-mini); padding: 0 14px; font-size: 14px; }
.btn .ti { font-size: 18px; }
.btn.ancho { width: 100%; }
.pulsa { cursor: pointer; transition: transform var(--dur-micro) var(--ease-out); }
.pulsa:active, .btn:active { transform: scale(0.97); }

/* ---------- 8. Tarjetas y listas ---------- */
.card { background: var(--surface); border-radius: var(--r-card); padding: 16px; box-shadow: inset 0 0 0 1px var(--line); }
.grupo { background: var(--surface); border-radius: var(--r-card); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.fila { position: relative; display: flex; align-items: center; gap: 12px; padding: 11px 16px; min-height: 64px; cursor: pointer; transition: background-color var(--dur-micro); }
.fila:active { background: var(--surface-2); }
@media (hover: hover) { .fila:hover { background: var(--surface-2); } }
.fila.sel { background: var(--surface-3); }
.grupo .fila + .fila::before { content: ""; position: absolute; top: 0; right: 0; left: 68px; border-top: 1px solid var(--line); }
.grupo.sin-ico .fila + .fila::before { left: 16px; }
.fila .txt { flex: 1; min-width: 0; }
.fila .txt b { display: block; font-size: 15.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila .txt span { display: block; font-size: var(--t-sub); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }
.fila .der { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.fila .der .num { font-size: 16px; }
.fila > .ti.ir { color: var(--ink-3); font-size: 17px; }
.ver-todo { display: block; text-align: center; padding: 13px; font-size: 15px; font-weight: 500; color: var(--marca); border-top: 1px solid var(--line); cursor: pointer; }
@media (min-width: 1100px) { .fila { min-height: 56px; padding: 8px 18px; } }

/* Logo de quien cobra o paga (monograma con su color) e icono en contenedor */
.lq { width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; font-size: 14.5px; font-weight: 600; position: relative; }
.lq.g { width: 72px; height: 72px; font-size: 26px; }
.lq .cta-mini { position: absolute; right: -3px; bottom: -3px; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; background: var(--surface-solida); box-shadow: 0 0 0 2px var(--surface-solida); }
.ico { width: 40px; height: 40px; border-radius: 13px; flex: none; display: grid; place-items: center; font-size: 20px; background: var(--surface-2); color: var(--ink); }
.ico.marca { background: var(--marca-tinte); color: var(--marca); } .ico.ko { background: var(--ko-bg); color: var(--ko); } .ico.warn { background: var(--warn-bg); color: var(--warn); } .ico.ok { background: var(--ok-bg); color: var(--ok); }

/* Estados (semáforo) y etiquetas de cuenta */
.est { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.est.ok { background: var(--ok-bg); color: var(--ok); } .est.warn { background: var(--warn-bg); color: var(--warn); } .est.ko { background: var(--ko-bg); color: var(--ko); }
.est.gris { background: var(--surface-2); color: var(--ink-2); } .est.info { background: var(--info-bg); color: var(--info); }
.cta { --t: var(--ink-2); display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: var(--t); background: color-mix(in srgb, var(--t) 15%, transparent); white-space: nowrap; }

/* ---------- 9. Dinero arriba (Revolut) ---------- */
.dinero { margin: -6px calc(-1 * var(--gutter)) 0; text-align: center; }
.cuentas { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.cuentas::-webkit-scrollbar { display: none; }
.cuentas > .cuenta { flex: 0 0 100%; scroll-snap-align: center; padding: 18px var(--gutter) 6px; cursor: pointer; }
.cuenta .nom { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--ink-2); }
.cuenta .nom img { height: 12px; }
[data-tema="claro"] .cuenta .nom img { filter: brightness(0); opacity: 0.6; }
.cuenta .saldo { display: block; font-size: var(--t-hero); font-weight: 400; letter-spacing: -0.035em; line-height: 1.05; margin: 8px 0 6px; }
.cuenta.on .saldo { text-shadow: var(--glow-txt); }
.cuenta .sub { font-size: var(--t-sub); color: var(--ink-2); }
.puntos { display: flex; justify-content: center; gap: 6px; margin: 12px 0 0; }
.puntos i { width: 6px; height: 6px; border-radius: 3px; background: var(--ink-3); opacity: 0.6; transition: width var(--dur-quick) var(--ease-out), opacity var(--dur-quick); }
.puntos i.on { width: 18px; opacity: 1; background: var(--ink); }
.vacc { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 6px; margin: 22px auto 0; max-width: 420px; padding: 0 var(--gutter); }
.vacc a { display: flex; flex-direction: column; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-2); cursor: pointer; }
.vacc a span { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; color: var(--ink); background: var(--surface-2);
  box-shadow: inset 0 0 0 0.5px var(--lg-rim-2), inset 0 1px 0 var(--lg-rim-2); transition: transform var(--dur-micro) var(--ease-out); }
.vacc a:active span { transform: scale(0.92); }
.vacc a.pri span { background: var(--action); color: var(--on-action); }
/* En escritorio las cuentas se ven todas a la vez (no hace falta deslizar) */
@media (min-width: 820px) {
  .dinero { margin: 0; text-align: left; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px; }
  .cuentas { overflow: visible; gap: 10px; flex-wrap: wrap; }
  .cuentas > .cuenta { flex: 1 1 0; min-width: 0; padding: 16px 18px; border-radius: var(--r-card); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
  .cuentas > .cuenta:first-child { flex: 1.6 1 0; }
  .cuenta .saldo { font-size: 30px; margin: 6px 0 2px; }
  .cuentas > .cuenta:first-child .saldo { font-size: 42px; }
  .cuenta.on { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--marca) 55%, transparent), var(--glow); }
  .puntos { display: none; }
  .dinero .vacc { margin: 0; padding: 0; grid-column: 1 / -1; display: flex; gap: 8px; max-width: none; }
  .dinero .vacc a { flex-direction: row; height: 40px; padding: 0 16px 0 6px; border-radius: 20px; background: var(--surface-2); gap: 8px; font-size: 14px; font-weight: 500; color: var(--ink); }
  .dinero .vacc a span { width: 30px; height: 30px; font-size: 16px; box-shadow: none; background: transparent; }
  .dinero .vacc a.pri { background: var(--action); color: var(--on-action); } .dinero .vacc a.pri span { color: var(--on-action); background: transparent; }
}

/* ---------- 10. «Ahora»: lo urgente en pila ---------- */
.pila { position: relative; padding-bottom: 14px; margin-top: 22px; cursor: pointer; }
.nt { position: relative; z-index: 2; display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 22px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.nt b { display: block; font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; }
.nt .txt { min-width: 0; flex: 1; }
.nt .txt span { display: block; font-size: 14px; color: var(--ink-2); }
.nt .cuando { align-self: flex-start; font-size: 12.5px; color: var(--ink-3); flex: none; }
.pila .nt + .nt { position: absolute; left: 0; right: 0; top: 0; z-index: 1; opacity: 0; transform: translateY(12px) scale(0.94); transition: transform var(--dur-morph) var(--spring), opacity var(--dur-quick); }
.pila .nt + .nt + .nt { transform: translateY(22px) scale(0.88); z-index: 0; }
.pila .detras { position: absolute; left: 12px; right: 12px; bottom: 4px; height: 30px; border-radius: 0 0 18px 18px; background: var(--surface); opacity: 0.6; transition: opacity var(--dur-quick); }
.pila .detras + .detras { left: 24px; right: 24px; bottom: -4px; opacity: 0.35; }
.pila .cuantos { position: absolute; right: 14px; bottom: -2px; z-index: 3; font-size: 12px; font-weight: 600; color: var(--ink-2); background: var(--surface-solida); border-radius: 999px; padding: 2px 8px; transition: opacity var(--dur-quick); }
.pila.abierta .detras, .pila.abierta .cuantos { opacity: 0; }
.pila.abierta .nt + .nt { position: relative; opacity: 1; transform: none; margin-top: 8px; }
@media (min-width: 1100px) { .pila { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0; cursor: default; }
  .pila .nt + .nt, .pila .nt + .nt + .nt { position: relative; opacity: 1; transform: none; margin: 0; } .pila .detras, .pila .cuantos { display: none; } }

/* ---------- 11. Widgets: tres tamaños y un solo esqueleto ---------- */
.vwds { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 168px; gap: 12px; grid-auto-flow: row dense; }
@media (min-width: 820px) { .vwds { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 176px; } }
.vwd { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; padding: 16px; border-radius: var(--r-card); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.vwd.m { grid-column: span 2; }
.vwd .et { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.vwd .et .ti { font-size: 17px; }
.vwd .et .mas-et { margin-left: auto; font-weight: 400; color: var(--ink-3); }
.vwd .abajo { margin-top: auto; }
.vwd .num.v { font-size: 28px; display: block; line-height: 1.05; }
.vwd .pie { font-size: 13px; color: var(--ink-2); margin-top: 6px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.vwd .pie .bien { color: var(--ok); } .vwd .pie .mal { color: var(--ko); }
.barras { display: grid; grid-template-columns: repeat(12, 1fr); gap: 5px; align-items: end; height: 76px; }
.barras i { display: block; border-radius: 3px; background: var(--surface-3); min-height: 3px; transform-origin: bottom; animation: crece-y 700ms var(--ease-out) both; }
.barras i.on { background: var(--marca); box-shadow: var(--glow); }
@keyframes crece-y { from { transform: scaleY(0); } }
.ejes { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-3); margin-top: 6px; }
.vwd .quitar { position: absolute; top: 8px; left: 8px; z-index: 2; width: 26px; height: 26px; border-radius: 50%; display: none; place-items: center; background: var(--surface-3); font-size: 16px; cursor: pointer; }
.vwds.editando .vwd { animation: tiembla 0.28s ease-in-out infinite alternate; cursor: grab; }
.vwds.editando .vwd:nth-child(2n) { animation-delay: -0.14s; animation-duration: 0.31s; }
.vwds.editando .vwd .quitar { display: grid; }
@keyframes tiembla { from { transform: rotate(-0.9deg); } to { transform: rotate(0.9deg); } }
.vwd.cogido { animation: none !important; z-index: 5; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35); }
.vwd.sale { animation: sale 220ms var(--ease-in) both !important; }
@keyframes sale { to { transform: scale(0.6); opacity: 0; } }
.barra-editar { display: none; gap: 8px; margin-top: 12px; }
.editando-on .barra-editar { display: flex; }
.barra-editar .btn { flex: 1; }

/* ---------- 12. Cartera (Tesorería) ---------- */
.cartera { position: relative; height: 266px; margin-top: 4px; }
.w { --w: #EC0000; position: absolute; left: 0; right: 0; top: 0; height: 200px; padding: 18px; border-radius: 24px; color: #fff; display: flex; flex-direction: column; cursor: pointer;
  background: linear-gradient(150deg, color-mix(in srgb, var(--w) 85%, #fff) 0%, var(--w) 35%, color-mix(in srgb, var(--w) 55%, #000) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 -6px 18px rgba(0, 0, 0, 0.2);
  transition: transform var(--dur-morph) var(--spring); will-change: transform; }
.w.delante { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 18px 50px color-mix(in srgb, var(--w) calc(55% * var(--glow-k)), transparent); }
.w .w-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; }
.w .w-cab b { font-size: 17px; font-weight: 600; }
.w .w-cab img { height: 18px; }
.w .w-acc { display: flex; gap: 6px; }
.w .w-acc span { width: 32px; height: 32px; border-radius: 50%; background: #fff; color: var(--w); display: grid; place-items: center; font-size: 16px; }
.w .mini { font-size: 17px; opacity: 0; transition: opacity var(--dur-quick); }
.w .w-saldo { margin-top: auto; }
.w .w-saldo small { display: block; font-size: 13px; opacity: 0.78; margin-bottom: 4px; }
.w .w-saldo .num { font-size: 40px; line-height: 1; } .w .num .c { color: inherit; }
.w .w-pie { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 12px; font-size: 13.5px; }
.w .w-pie .op { opacity: 0.82; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w .w-pie .pill { flex: none; background: #fff; color: var(--w); border-radius: 999px; height: 26px; padding: 0 10px; display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; }
.w.atras .w-saldo, .w.atras .w-pie, .w.atras .w-acc { opacity: 0; } .w.atras .mini { opacity: 1; }
.w .w-saldo, .w .w-pie, .w .w-acc { transition: opacity var(--dur-exit); }
@media (min-width: 820px) {
  .cartera { height: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
  .w { position: relative; transform: none !important; height: 190px; }
  .w.atras .w-saldo, .w.atras .w-pie, .w.atras .w-acc { opacity: 1; } .w.atras .mini { opacity: 0; }
  .w:not(.delante) { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
}

/* ---------- 13. Segmentado con pieza que viaja ---------- */
.vseg { position: relative; display: flex; padding: 3px; border-radius: 999px; background: var(--surface-2); overflow-x: auto; scrollbar-width: none; }
.vseg span { position: relative; z-index: 1; flex: 1 0 auto; height: 34px; padding: 0 14px; display: grid; place-items: center; font-size: 14px; font-weight: 500; color: var(--ink-2); cursor: pointer; white-space: nowrap; transition: color var(--dur-quick); }
.vseg span.on { color: var(--ink); }
.vseg .pieza { position: absolute; top: 3px; bottom: 3px; left: 0; border-radius: 999px; background: var(--surface-3); box-shadow: inset 0 0 0 0.5px var(--lg-rim-2); transition: transform var(--dur-morph) var(--spring), width var(--dur-morph) var(--spring); }
[data-tema="claro"] .vseg .pieza { background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10); }
.buscar-l { display: flex; align-items: center; gap: 8px; height: 40px; border-radius: 12px; background: var(--surface-2); padding: 0 12px; color: var(--ink-3); font-size: 16px; margin-top: 12px; cursor: pointer; }
/* Maestro-detalle en escritorio ancho: la lista a la izquierda, la ficha a la derecha (en móvil, la ficha es una hoja) */
.vmd { display: block; }
@media (min-width: 1440px) { .vmd { display: grid; grid-template-columns: minmax(0, 1fr) var(--insp-w); gap: 18px; align-items: start; } .vmd > .insp { position: sticky; top: 72px; } }
.vmd > .insp { display: none; }
@media (min-width: 1440px) { .vmd > .insp { display: block; } }
.desliza { position: relative; background: var(--ok); }
.desliza .fila { background: var(--surface-solida); transform: translateX(-76px); }
.desliza .accion { position: absolute; right: 0; top: 0; bottom: 0; width: 76px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #fff; font-size: 12.5px; font-weight: 600; }
.obra-barra { height: 5px; border-radius: 3px; background: var(--surface-3); margin-top: 6px; overflow: hidden; width: 120px; }
.obra-barra i { display: block; height: 100%; background: var(--ok); border-radius: inherit; }

/* ---------- 14. Ficha (hoja en móvil, panel en escritorio) ---------- */
.ficha-c { display: grid; gap: 0; }
.ficha-c .f-cab { text-align: center; display: grid; justify-items: center; gap: 10px; margin-top: 8px; }
.ficha-c .f-cab b { font-size: 18px; font-weight: 600; }
.ficha-c .f-imp { font-size: 46px; font-weight: 300; letter-spacing: -0.03em; }
.ficha-c .f-cuando { color: var(--ink-2); font-size: 14px; margin-top: -6px; }
.ficha-c .f-acc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 22px 0 14px; }
.ficha-c .f-acc span { display: grid; justify-items: center; gap: 6px; padding: 12px 6px; border-radius: 18px; background: var(--surface-2); font-size: 12.5px; color: var(--ink-2); cursor: pointer; }
.ficha-c .f-acc .ti { font-size: 22px; color: var(--ink); }
.form .fila { min-height: 50px; padding: 0 16px; cursor: default; }
.form .fila .lab { flex: none; }
.form .fila .val { margin-left: auto; color: var(--ink-2); text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.insp .card { padding: 20px; }

/* ---------- 15. Hojas, ventanas, velo ---------- */
.capa { position: fixed; inset: 0; z-index: 50; pointer-events: none; }
.capa.activa { pointer-events: auto; }
.velo { position: absolute; inset: 0; background: var(--velo); opacity: 0; transition: opacity var(--dur-sheet) var(--ease-out); }
.capa.activa .velo { opacity: 1; }
#vista { transition: transform var(--dur-sheet) var(--ease-out), filter var(--dur-sheet); }
.top { transition: opacity var(--dur-sheet) var(--ease-out); }
@media (max-width: 819px) { body.con-hoja #vista { transform: translateY(10px) scale(0.94); filter: brightness(0.8); }
  body.con-hoja .top, body.con-hoja .vnav { opacity: 0.35; } .vnav { transition: transform var(--dur-morph) var(--spring), opacity var(--dur-sheet); } }
.hoja { position: absolute; left: 0; right: 0; bottom: 0; max-height: calc(100% - env(safe-area-inset-top) - 54px); min-height: 60%; border-radius: 34px 34px 0 0; padding: 8px var(--gutter) calc(env(safe-area-inset-bottom) + 24px);
  display: flex; flex-direction: column; touch-action: none; will-change: transform; overflow: hidden; }
.hoja.solida { background: var(--bg); }
.hoja .asa { width: 38px; height: 5px; border-radius: 3px; background: var(--ink-3); opacity: 0.55; margin: 0 auto 6px; flex: none; }
.hoja .h-cab { display: flex; align-items: center; justify-content: space-between; min-height: 48px; flex: none; }
.hoja .h-cab b { font-size: 17px; font-weight: 600; }
.hoja .h-cuerpo { overflow-y: auto; flex: 1; display: flex; flex-direction: column; }
@media (min-width: 820px) {
  .hoja { left: 50%; top: 50%; bottom: auto; width: min(480px, calc(100% - 48px)); min-height: 0; max-height: min(760px, calc(100% - 48px)); border-radius: 28px; transform: translate(-50%, -50%); padding: 18px 24px 24px; touch-action: auto; }
  .hoja .asa { display: none; }
  .hoja.lado { left: auto; right: 12px; top: 12px; bottom: 12px; transform: none; width: 420px; max-height: none; }
}
.importe { text-align: center; margin: 14px 0 4px; }
.importe .num { font-size: 60px; font-weight: 300; }
.importe small { display: block; color: var(--ink-2); font-size: 14px; margin-top: 6px; }
.elige { display: flex; gap: 8px; justify-content: center; margin: 14px 0 18px; flex-wrap: wrap; }
.elige span { height: 36px; padding: 0 14px; border-radius: 999px; display: inline-flex; align-items: center; font-size: 14px; font-weight: 500; background: var(--surface-2); cursor: pointer; }
.elige span.on { background: var(--action); color: var(--on-action); }
.teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: auto 0 12px; }
.teclado span { height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; background: var(--surface-2); cursor: pointer; user-select: none; }
@media (min-width: 820px) { .teclado { display: none; } }
.ok-check { width: 84px; height: 84px; border-radius: 50%; margin: 0 auto; display: grid; place-items: center; background: var(--ok-bg); color: var(--ok); font-size: 42px; animation: rebote 600ms var(--ease-out) both; box-shadow: 0 0 40px color-mix(in srgb, var(--ok) 35%, transparent); }
@keyframes rebote { 0% { transform: scale(0.6); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
.entra > * { animation: entra var(--dur-enter) var(--ease-out) both; }
.entra > :nth-child(2) { animation-delay: 40ms; } .entra > :nth-child(3) { animation-delay: 80ms; } .entra > :nth-child(4) { animation-delay: 120ms; } .entra > :nth-child(5) { animation-delay: 160ms; } .entra > :nth-child(n+6) { animation-delay: 200ms; }
@keyframes entra { from { opacity: 0; filter: blur(8px); transform: translateY(8px); } }
.recien { animation: recien 1600ms var(--ease-out) both; }
@keyframes recien { 0% { background: var(--marca-tinte); opacity: 0; transform: translateY(-8px); } 25% { opacity: 1; transform: none; } 100% { background: transparent; } }

/* Buscador universal */
.spot { position: absolute; inset: 0; background: var(--bg); padding: calc(env(safe-area-inset-top) + 70px) var(--gutter) 24px; overflow: auto; animation: aparece var(--dur-quick) var(--ease-out) both; }
@keyframes aparece { from { opacity: 0; } }
.spot-campo { position: absolute; top: calc(env(safe-area-inset-top) + 8px); left: var(--gutter); right: var(--gutter); height: 46px; border-radius: 23px; display: flex; align-items: center; gap: 8px; padding: 0 16px; font-size: 16px; z-index: 2; }
.spot-campo .q { color: var(--ink); } .spot-campo .cur { width: 2px; height: 20px; background: var(--marca); animation: cur 1s steps(1) infinite; }
@keyframes cur { 50% { opacity: 0; } }
.spot-campo .x { margin-left: auto; color: var(--marca); font-weight: 500; font-size: 15px; cursor: pointer; }
@media (min-width: 820px) { .spot { left: 50%; top: 10%; bottom: auto; transform: translateX(-50%); width: min(620px, calc(100% - 48px)); max-height: 70%; border-radius: 26px; padding: 76px 20px 20px; background: var(--surface-solida); box-shadow: var(--lg-sh); }
  .spot-campo { top: 14px; left: 14px; right: 14px; } }

/* ---------- 16. Copilot ---------- */
.cp { min-height: calc(100vh - 260px); display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 4vh; max-width: 720px; margin: 0 auto; }
.orbe { width: 150px; height: 150px; position: relative; border-radius: 50%; transition: transform var(--dur-morph) var(--spring);
  background: radial-gradient(circle at 50% 45%, transparent 40%, color-mix(in srgb, var(--marca) 70%, transparent) 50%, rgba(255, 255, 255, 0.5) 56%, transparent 66%);
  filter: drop-shadow(0 0 50px color-mix(in srgb, var(--marca) calc(45% * var(--glow-k)), transparent)); }
.orbe.vivo { background: none; color: var(--marca); display: grid; place-items: center; transition: transform var(--dur-morph) var(--spring), opacity 0.18s; }
.orbe.fuera { opacity: 0; }
.orbe svg { display: block; width: 100%; height: 100%; overflow: visible; }
.orbe::before { content: ""; position: absolute; inset: -30%; border-radius: 50%; pointer-events: none; z-index: -1; background: radial-gradient(closest-side, color-mix(in srgb, var(--marca) 26%, transparent), transparent); }
.orbe .capa-orbe { position: absolute; inset: 0; } .orbe canvas { width: 100% !important; height: 100% !important; display: block; }
.orbe.piensa { transform: scale(0.8); }
.cp-hola { color: var(--ink-2); font-size: 15px; margin-top: 18px; } .cp-preg { font-size: 26px; font-weight: 500; letter-spacing: -0.02em; margin: 4px 0 24px; }
.cp-chips { display: grid; gap: 8px; justify-items: center; }
.cp-chips span { padding: 10px 16px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: 15px; display: inline-flex; gap: 8px; align-items: center; cursor: pointer; }
.cp-chips .ti { color: var(--marca); }
.cp-resp { width: 100%; text-align: left; font-size: 16px; line-height: 1.55; margin-top: 14px; }
.cp-resp .preg { display: block; margin: 0 0 14px auto; width: fit-content; max-width: 80%; padding: 9px 14px; border-radius: 18px 18px 4px 18px; background: var(--surface-3); font-size: 15px; }
.cp-resp .lbl { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--marca); margin-bottom: 6px; }
.pal { opacity: 0.15; filter: blur(2px); transition: opacity 220ms var(--ease-out), filter 220ms var(--ease-out); } .pal.ya { opacity: 1; filter: none; }
.cp-campo { position: fixed; z-index: 25; left: calc(var(--nav-w) + 14px); right: 14px; bottom: calc(env(safe-area-inset-bottom) + 92px); height: 56px; border-radius: 28px; display: flex; align-items: center; padding: 0 8px 0 18px; color: var(--ink-3); font-size: 16px; }
.cp-campo .env { margin-left: auto; width: 40px; height: 40px; border-radius: 50%; background: var(--action); color: var(--on-action); display: grid; place-items: center; font-size: 18px; }
@media (min-width: 820px) { .cp-campo { bottom: 24px; left: calc(var(--nav-w) + (100% - var(--nav-w)) / 2 - min(340px, (100% - var(--nav-w)) / 2 - 24px)); right: auto; width: min(680px, calc(100% - var(--nav-w) - 48px)); } }

/* ---------- 17. Entrada (acceso) y mantenimiento: el F30 a pleno ---------- */
.entrada { min-height: 100vh; display: grid; place-items: center; text-align: center; padding: 24px; }
.entrada .caja { width: min(380px, 100%); display: grid; gap: 14px; justify-items: center; }
.entrada .logo-g { height: 44px; width: auto; filter: drop-shadow(0 0 30px color-mix(in srgb, var(--marca) 50%, transparent)); }
[data-tema="claro"] .entrada .logo-g { filter: none; }
.entrada h2 { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; margin: 18px 0 0; }
.entrada p { color: var(--ink-2); margin: 0 0 10px; }
.entrada .panel-e { width: 100%; padding: 20px; border-radius: 28px; display: grid; gap: 10px; position: relative; }
.entrada .campo-e { height: 50px; border-radius: 16px; background: var(--surface-2); display: flex; align-items: center; padding: 0 16px; color: var(--ink-3); font-size: 16px; text-align: left; }
.mant .anillo { width: 72px; height: 72px; border-radius: 50%; border: 3px solid var(--surface-3); border-top-color: var(--marca); animation: gira 1.1s linear infinite; box-shadow: var(--glow); }
@keyframes gira { to { transform: rotate(360deg); } }

/* ---------- 18. Ajustes ---------- */
.ajustes .grupo { margin-bottom: 8px; }
.ajustes .fila .val { margin-left: auto; color: var(--ink-2); }
.muestras { display: flex; gap: 8px; }
.muestras i { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); }

/* ---------- 19. Utilidades ---------- */
[hidden] { display: none !important; }
[data-a], [data-r] { cursor: pointer; }
[data-tema="claro"] .logo.blanco, [data-tema="claro"] .logo-nav.blanco, [data-tema="claro"] .logo-g.blanco { filter: invert(1); }
@media (min-width: 1100px) { .solo-movil { display: none !important; } }

/* ---------- 20. Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .pal { opacity: 1; filter: none; }
}

/* Céntimos legibles en cifras pequeñas (filas, etiquetas): nunca por debajo de ~11 px */
.fila .num .c, .w .mini .c, .ficha-c .form .c, .cp-resp .c { font-size: 0.74em; }
/* Segmentado con más pestañas de las que caben: se desliza y lo indica con un fundido en el borde */
.vseg.desborda { -webkit-mask: linear-gradient(90deg, #000 85%, transparent); mask: linear-gradient(90deg, #000 85%, transparent); }

/* Ajustes tras la revisión en los cuatro tamaños */
@media (min-width: 820px) and (max-width: 1099px) {
  .top .logo { display: none; }                         /* el logo ya está en el carril */
  .vnav .yo > span:last-child { display: none; }         /* en el carril, solo el avatar */
  .cuentas > .cuenta:first-child { flex-basis: 100%; }  /* Disponible en su fila; el resto, debajo */
}
/* Lectura en oscuro: el F30 da luz arriba y se calma donde está el contenido */
:root:not([data-tema="claro"]) #fondo::after { background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 20%, transparent) 0%, color-mix(in srgb, var(--bg) 62%, transparent) 30%, color-mix(in srgb, var(--bg) 86%, transparent) 62%); }
@media (min-width: 1100px) { :root:not([data-tema="claro"]) #fondo::after { background: radial-gradient(120% 90% at 85% 0%, transparent 0%, color-mix(in srgb, var(--bg) 55%, transparent) 45%, color-mix(in srgb, var(--bg) 85%, transparent) 80%); } }
.vmd > .insp { margin-top: 28px; }
/* Entrada y mantenimiento: a pantalla completa, sin el hueco del menú */
[data-pantalla="entrada"] #vista, [data-pantalla="mantenimiento"] #vista { padding: 0; max-width: none; }
/* En las hojas nada se encoge: si no cabe, se desplaza */
.h-cuerpo > * { flex-shrink: 0; }

/* ============ Materiales (24-10, tras la revisión de Mario) ============
   1 Fondo: F30, solo luz. Encima, sin material, solo títulos grandes.
   2 Contenido: cristal «grueso». Casi opaco, con canto de luz y un brillo suave. Sobre un degradado sin detalle como el
     F30 el desenfoque no aporta nada: la opacidad da el cristal y garantiza que el texto se lea siempre igual.
   3 Navegación y lo que flota: cristal «fino» (desenfoque real), solo iconos y etiquetas cortas. */
:root[data-tema="oscuro"] { --mat: rgba(16, 16, 19, 0.88); --mat-brillo: rgba(255, 255, 255, 0.05); --mat-canto: rgba(255, 255, 255, 0.09); }
:root[data-tema="claro"] { --mat: rgba(255, 255, 255, 0.88); --mat-brillo: rgba(255, 255, 255, 0.6); --mat-canto: rgba(255, 255, 255, 0.9); }
.card, .grupo, .vwd, .nt, .cp-chips span, .insp .card, .pila .detras {
  background: linear-gradient(180deg, var(--mat-brillo), transparent 46%), var(--mat);
  box-shadow: inset 0 1px 0 var(--mat-canto), inset 0 0 0 1px var(--line); }
@media (min-width: 820px) { .cuentas > .cuenta { background: linear-gradient(180deg, var(--mat-brillo), transparent 46%), var(--mat); box-shadow: inset 0 1px 0 var(--mat-canto), inset 0 0 0 1px var(--line); } }
.hoja.solida { background: var(--bg); }
.desliza .fila { background: var(--mat); }

/* Texto sobre el F30: lo pequeño nunca va «al aire» sin apoyo */
:root:not([data-tema="claro"]) .cab .fecha, :root:not([data-tema="claro"]) .sec, :root:not([data-tema="claro"]) .cp-hola { color: rgba(255, 255, 255, 0.74); text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55); }
:root:not([data-tema="claro"]) .cab h1 { text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35); }
[data-tema="claro"] .cab .fecha, [data-tema="claro"] .sec { color: rgba(15, 15, 18, 0.62); }
/* El saldo grande en el móvil va sobre el F30: un velo suave detrás asegura el contraste sin que se note */
@media (max-width: 819px) {
  :root:not([data-tema="claro"]) .cuentas > .cuenta { background: radial-gradient(58% 62% at 50% 52%, color-mix(in srgb, var(--bg) 42%, transparent), transparent 72%); }
  .cuenta .nom, .cuenta .sub { color: color-mix(in srgb, var(--ink) 78%, transparent); }
  :root:not([data-tema="claro"]) .cuenta .saldo { text-shadow: var(--glow-txt), 0 2px 20px rgba(0, 0, 0, 0.45); }
  .vacc a { color: color-mix(in srgb, var(--ink) 78%, transparent); }
}
/* Escritorio: el árbol del menú lateral ya lleva las subsecciones; arriba no se repiten */
@media (min-width: 1100px) { #seg, .vseg.seccion { display: none; } .buscar-l { margin-top: 0; } }
/* Enlaces de sección sobre el F30: el color de marca sobre luz de marca no se lee → tinta clara con subrayado fino */
:root:not([data-tema="claro"]) .sec a { color: rgba(255, 255, 255, 0.9); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--marca) 80%, transparent); text-underline-offset: 4px; text-decoration-thickness: 2px; }
/* Navegación: cristal fino, pero con el tinte justo para que sus etiquetas ganen siempre a lo que pasa por debajo */
:root:not([data-tema="claro"]) .vnav.glass { --lg-tint: rgba(30, 30, 34, 0.84); --lg-tint-2: rgba(20, 20, 24, 0.78); }

/* ============ Un solo cristal (24-10, Mario: «homogeneidad de elementos») ============
   El mismo material en todo: canto de luz, profundidad y brillo. Solo cambia el grosor:
   · fino (controles: barra, botones, círculos, segmentado, buscador): tinte de la navegación y desenfoque real;
   · grueso (contenido: tarjetas, listas, fichas, widgets): el mismo tinte algo más denso, sin desenfoque
     (sobre el F30 no se nota y no gasta), para que el texto se lea siempre.
   El botón principal sigue sólido: es la acción. «Sólido» (Ajustes) vuelve a las tarjetas opacas para comparar. */
:root[data-tema="oscuro"] { --cr-1: rgba(44, 44, 49, 0.62); --cr-2: rgba(22, 22, 26, 0.56); --crg-1: rgba(40, 40, 45, 0.86); --crg-2: rgba(20, 20, 24, 0.90); }
:root[data-tema="claro"] { --cr-1: rgba(255, 255, 255, 0.72); --cr-2: rgba(255, 255, 255, 0.52); --crg-1: rgba(255, 255, 255, 0.90); --crg-2: rgba(255, 255, 255, 0.80); }
/* :where = sin especificidad: no pisa posiciones propias (p. ej. la pila de «Ahora») */
body:not(.solido) :where(.btn:not(.pri):not(.marca), .vacc a:not(.pri) span, .vseg, .buscar-l, .elige span:not(.on), .bt.pulsa:not(.glass), .card, .grupo, .vwd, .nt, .cp-chips span, .ficha-c .f-acc span) { position: relative; isolation: isolate; }
body:not(.solido) .pila .nt + .nt { position: absolute; }
body:not(.solido) .pila.abierta .nt + .nt { position: relative; }
@media (min-width: 1100px) { body:not(.solido) .pila .nt + .nt { position: relative; } }
/* fino */
body:not(.solido) :is(.btn:not(.pri):not(.marca), .vacc a:not(.pri) span, .vseg, .buscar-l, .elige span:not(.on), .bt.pulsa:not(.glass)) {
  background: linear-gradient(160deg, var(--cr-1), var(--cr-2) 60%);
  -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%);
  box-shadow: inset 0 0 0 0.5px var(--lg-rim-2), inset 0 -8px 14px -10px var(--lg-depth), inset 0 6px 12px -10px var(--lg-rim), 0 6px 18px rgba(0, 0, 0, 0.18); }
/* grueso */
body:not(.solido) :is(.card, .grupo, .vwd, .nt, .cp-chips span, .ficha-c .f-acc span) {
  background: linear-gradient(160deg, var(--crg-1), var(--crg-2) 60%);
  box-shadow: inset 0 0 0 0.5px var(--lg-rim-2), inset 0 -12px 22px -16px var(--lg-depth), inset 0 10px 18px -16px var(--lg-rim), 0 10px 30px rgba(0, 0, 0, 0.22); }
@media (min-width: 820px) { body:not(.solido) .cuentas > .cuenta { position: relative; isolation: isolate; background: linear-gradient(160deg, var(--crg-1), var(--crg-2) 60%);
  box-shadow: inset 0 0 0 0.5px var(--lg-rim-2), inset 0 -12px 22px -16px var(--lg-depth), inset 0 10px 18px -16px var(--lg-rim), 0 10px 30px rgba(0, 0, 0, 0.22); }
  body:not(.solido) .cuentas > .cuenta.on { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--marca) 55%, transparent), inset 0 10px 18px -16px var(--lg-rim), var(--glow); } }
/* el canto de luz (igual que la barra): un borde que brilla arriba-izquierda y abajo-derecha */
body:not(.solido) :is(.btn:not(.pri):not(.marca), .vacc a:not(.pri) span, .vseg, .buscar-l, .bt.pulsa:not(.glass), .card, .grupo, .vwd, .nt, .cp-chips span)::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 3;
  background: linear-gradient(170deg, var(--lg-rim), var(--lg-rim-2) 38%, transparent 55%, var(--lg-rim-2) 85%, var(--lg-rim) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0.8; }
@media (min-width: 820px) { body:not(.solido) .cuentas > .cuenta::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(170deg, var(--lg-rim), var(--lg-rim-2) 38%, transparent 55%, var(--lg-rim-2) 85%, var(--lg-rim) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0.8; } }
/* la barra de pestañas usa ahora el mismo tinte fino que los controles */
:root:not([data-tema="claro"]) .vnav.glass { --lg-tint: rgba(36, 36, 41, 0.80); --lg-tint-2: rgba(20, 20, 24, 0.74); }
/* las filas, dentro del grupo de cristal, sin fondo propio (la fila deslizada sí lo lleva) */
body:not(.solido) .desliza .fila { background: linear-gradient(160deg, var(--crg-1), var(--crg-2) 60%); }
/* En tablet y escritorio las acciones de Inicio son píldoras: el cristal va en la píldora, no en el icono */
@media (min-width: 820px) {
  body:not(.solido) .dinero .vacc a span { background: none !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  body:not(.solido) .dinero .vacc a span::after { display: none; }
  body:not(.solido) .dinero .vacc a:not(.pri) { position: relative; isolation: isolate; background: linear-gradient(160deg, var(--cr-1), var(--cr-2) 60%);
    -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%);
    box-shadow: inset 0 0 0 0.5px var(--lg-rim-2), inset 0 6px 12px -10px var(--lg-rim), 0 6px 18px rgba(0, 0, 0, 0.18); }
}
body:not(.solido) .vwd.cogido { box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35); }

/* ============ Inicio: cómo va el negocio (24-10) ============ */
.ini-top { display: grid; gap: 12px; margin-top: 22px; }
.ini-top .disp { display: none; }
@media (min-width: 820px) { .ini-top { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } .ini-top .disp { display: flex; } }
.graf { padding: 18px 18px 14px; overflow: hidden; }
.g-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.g-lbl { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.g-num { display: block; font-size: 38px; line-height: 1.1; margin: 4px 0 2px; text-shadow: var(--glow-txt); }
.g-num.neg { color: var(--ko); }
.g-delta { display: block; font-size: 13px; min-height: 18px; }
.g-delta .bien { color: var(--ok); } .g-delta .mal { color: var(--ko); }
.g-seg { flex: none; } .g-seg span { height: 30px; padding: 0 12px; font-size: 13px; }
.g-lienzo { position: relative; height: 170px; margin: 14px -4px 4px; touch-action: pan-y; cursor: crosshair; user-select: none; }
@media (min-width: 1100px) { .g-lienzo { height: 220px; } .g-num { font-size: 44px; } }
.g-lienzo svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.g-ing { fill: none; stroke: var(--marca); stroke-width: 2.6; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.g-gas { fill: none; stroke: var(--ink-3); stroke-width: 1.8; stroke-dasharray: 5 6; vector-effect: non-scaling-stroke; }
.g-guia { position: absolute; top: 0; bottom: 0; left: 0; width: 1px; background: var(--line-2); opacity: 0; transition: opacity var(--dur-micro); pointer-events: none; }
.g-punto { position: absolute; top: 0; left: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--marca); box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca) 30%, transparent), var(--glow); opacity: 0; transition: opacity var(--dur-micro); pointer-events: none; }
.g-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 13px; color: var(--ink-2); }
.g-pie .ley { display: inline-flex; align-items: center; gap: 6px; } .g-pie .ley b { font-weight: 500; color: var(--ink); }
.g-pie .ley i { width: 14px; height: 3px; border-radius: 2px; background: var(--marca); box-shadow: var(--glow); } .g-pie .ley i.l-gas { background: var(--ink-3); box-shadow: none; }
.g-pie .g-cuando { margin-left: auto; font-weight: 600; color: var(--ink); }
.disp { flex-direction: column; padding: 18px; cursor: pointer; }
.disp .d-num { font-size: 34px; margin: 4px 0 2px; } .disp .d-sub { font-size: 13px; color: var(--ink-2); }
.disp .d-cuentas { display: grid; gap: 8px; margin: 16px 0 auto; font-size: 14px; }
.disp .d-cuentas div { display: flex; justify-content: space-between; gap: 10px; } .disp .d-cuentas span:first-child { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); }
.disp .d-cuentas i { width: 10px; height: 10px; border-radius: 3px; }
.disp .d-ir { margin-top: 16px; font-size: 14px; font-weight: 500; color: var(--ink); display: inline-flex; align-items: center; gap: 6px; }

/* ============ Tesorería: el Disponible grande arriba (estilo Revolut) ============ */
.saldo-total { text-align: center; margin: -4px 0 18px; }
.saldo-total .nom { display: block; font-size: 14px; font-weight: 500; color: color-mix(in srgb, var(--ink) 78%, transparent); }
.saldo-total .saldo { display: block; font-size: var(--t-hero); letter-spacing: -0.035em; line-height: 1.05; margin: 6px 0 4px; text-shadow: var(--glow-txt); }
.saldo-total .sub { font-size: var(--t-sub); color: color-mix(in srgb, var(--ink) 70%, transparent); }
:root:not([data-tema="claro"]) .saldo-total { text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4); }
@media (min-width: 820px) { .saldo-total { text-align: left; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: -2px 0 16px; }
  .saldo-total .saldo { font-size: 40px; margin: 0; order: 2; } .saldo-total .nom { order: 1; } .saldo-total .sub { order: 3; } }

/* ============ Buscador de escritorio: ancho y centrado sobre la columna de contenido ============ */
@media (min-width: 1100px) {
  .top { justify-content: center; padding: 0 var(--gutter); }
  .buscador-d { width: min(640px, calc(100% - 140px)); margin: 0 auto; height: 44px; border-radius: 22px; font-size: 15px; }
  .top .der { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); margin: 0; }
}
.g-pie .num .c, .disp .d-cuentas .num .c { font-size: 0.82em; }   /* céntimos legibles en cifras pequeñas */

/* ============ Personalización (Ajustes) ============ */
.perso { padding: 4px 18px; }
.p-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; padding: 14px 0; }
.p-fila.linea { border-top: 1px solid var(--line); }
.p-lbl { font-size: 15.5px; font-weight: 500; flex: 1 1 200px; }
.p-nota { display: block; font-size: 13px; font-weight: 400; color: var(--ink-2); margin-top: 2px; }
.p-fila > .p-nota { flex-basis: 100%; margin-top: -4px; }
.p-fila .vseg { flex: 0 1 auto; max-width: 100%; }
.p-fila .vseg span { height: 32px; padding: 0 12px; font-size: 13.5px; }
.muestras-p { display: flex; gap: 10px; flex-wrap: wrap; }
.mp { position: relative; width: 38px; height: 38px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  transition: transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-quick); display: grid; place-items: center; color: #fff; font-size: 18px; overflow: hidden; }
.mp:active { transform: scale(0.92); }
.mp.on { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ink), 0 0 18px color-mix(in srgb, var(--marca) 45%, transparent); }
.mp.libre { background: conic-gradient(#ff3b30, #ff9500, #ffcc00, #34c759, #0a84ff, #5e5ce6, #ff2d55, #ff3b30); }
.mp.libre input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; border: 0; padding: 0; }
.mp.libre .ti { text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); pointer-events: none; }
.interr { position: relative; width: 52px; height: 32px; border-radius: 16px; border: 0; padding: 0; cursor: pointer; flex: none; background: var(--surface-3); transition: background var(--dur-quick); }
.interr i { position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); transition: transform var(--dur-morph) var(--spring); }
.interr.on { background: var(--ok); } .interr.on i { transform: translateX(20px); }
.orden { flex: 1 1 100%; } .orden .fila { min-height: 50px; cursor: default; gap: 10px; } .orden .bt { width: 34px; height: 34px; font-size: 16px; }
.bt[disabled] { opacity: 0.3; pointer-events: none; }
/* Intensidad «suave»: el F30 se queda en un velo de color */
body.fondo-suave #fondo .capa.listo { opacity: 0.5; }
/* Densidad compacta: lo mismo, más junto */
body.compacta { --t-body: 15px; }
body.compacta .fila { min-height: 52px; padding-top: 7px; padding-bottom: 7px; }
body.compacta .card, body.compacta .vwd { padding: 12px 14px; }
body.compacta .vwds { grid-auto-rows: 140px; gap: 10px; }
body.compacta .sec { margin-top: 20px; }
body.compacta .nt { padding: 10px 14px; }
body.compacta .g-lienzo { height: 140px; }
/* Copilot: el fondo se apaga detrás del orbe para que sus puntos de marca se lean (como el L8 sobre negro) */
:root:not([data-tema="claro"]) [data-pantalla="copilot"] #fondo::after { background: radial-gradient(34% 26% at var(--orbe-x, calc(50% + var(--nav-w) / 2)) var(--orbe-y, 24%), color-mix(in srgb, var(--bg) 92%, transparent) 0%, color-mix(in srgb, var(--bg) 70%, transparent) 55%, transparent 100%),
  linear-gradient(180deg, color-mix(in srgb, var(--bg) 40%, transparent) 0%, color-mix(in srgb, var(--bg) 70%, transparent) 38%, color-mix(in srgb, var(--bg) 86%, transparent) 70%) !important; }
[data-tema="claro"] [data-pantalla="copilot"] #fondo::after { background: radial-gradient(34% 26% at var(--orbe-x, calc(50% + var(--nav-w) / 2)) var(--orbe-y, 24%), color-mix(in srgb, var(--bg) 85%, transparent), transparent 100%), linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--bg) 55%, transparent) 38%, color-mix(in srgb, var(--bg) 88%, transparent) 70%) !important; }

/* ============ Minimalismo (24-10 noche, Mario): navegación sin cápsulas, sugerencias en línea, orbe con neón y el F30
   tranquilo donde se trabaja (en Inicio y en el saldo de Tesorería, a pleno) ============ */
/* Pestañas de una sección: solo texto, con una raya fina de la marca bajo la activa que viaja de una a otra */
#seg, .vseg.seccion { background: none !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  padding: 0; border-radius: 0; gap: 4px; overflow-y: hidden; border-bottom: 1px solid var(--line); isolation: auto !important; }
#seg::after, .vseg.seccion::after { display: none !important; }
#seg span, .vseg.seccion span { flex: 0 0 auto; height: 40px; padding: 0 10px; font-size: 15px; }
#seg .pieza, .vseg.seccion .pieza { top: auto; bottom: 0; height: 2px; border-radius: 2px; background: var(--marca) !important; box-shadow: 0 0 10px color-mix(in srgb, var(--marca) 70%, transparent) !important; }
:root:not([data-tema="claro"]) #seg span { text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5); }
/* Sugerencias del Copilot: líneas de texto con su estrellita, sin cápsulas */
.cp-chips { gap: 0; }
body:not(.solido) .cp-chips span, .cp-chips span { background: none !important; box-shadow: none !important; padding: 7px 4px; font-size: 15px; color: var(--ink-2); border-radius: 0; }
.cp-chips span::after { display: none !important; }
.cp-chips span:active { color: var(--ink); }
@media (hover: hover) { .cp-chips span:hover { color: var(--ink); } }
:root:not([data-tema="claro"]) .cp-chips span { color: rgba(255, 255, 255, 0.78); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55); }
/* El orbe con neón: puntos más claros y el brillo de la marca alrededor, para que destaque sobre el F30 */
:root:not([data-tema="claro"]) .orbe.vivo { color: color-mix(in srgb, var(--marca) 62%, #fff);
  filter: drop-shadow(0 0 2px var(--marca)) drop-shadow(0 0 12px color-mix(in srgb, var(--marca) 85%, transparent)) drop-shadow(0 0 36px color-mix(in srgb, var(--marca) 50%, transparent)); }
[data-tema="claro"] .orbe.vivo { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--marca) 45%, transparent)); }
/* Donde se trabaja (listas, fichas, formularios, ajustes) el F30 se queda en un velo: lo que se escribe se lee sin distraer */
:root:not([data-tema="claro"]) :is([data-pantalla="trabajo"], .v2-tranquila) #fondo::after { background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 50%, transparent) 0%, color-mix(in srgb, var(--bg) 84%, transparent) 26%, color-mix(in srgb, var(--bg) 94%, transparent) 55%) !important; }
[data-tema="claro"] :is([data-pantalla="trabajo"], .v2-tranquila) #fondo::after { background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 35%, transparent) 0%, color-mix(in srgb, var(--bg) 78%, transparent) 26%, color-mix(in srgb, var(--bg) 92%, transparent) 55%) !important; }
/* El lienzo del F30 lleva la clase .capa (como la capa de hojas, z 50) y tapaba su velo: donde el velo tiene que verse
   (trabajo y Copilot) se pone debajo. En Inicio y Tesorería el F30 sigue a pleno, como lo aprobó Mario. */
:is([data-pantalla="trabajo"], [data-pantalla="copilot"], .v2-tranquila) #fondo .capa { z-index: 0; }
/* Tarjetas de la cartera en cristal de color (Mario, 24-10 noche): conservan su color, pero translúcidas, con desenfoque,
   canto de luz y brillo; detrás se intuye el F30. «Sólido» (Ajustes) las vuelve opacas. */
body:not(.solido) .w { background: linear-gradient(150deg, color-mix(in srgb, var(--w) 70%, rgba(255, 255, 255, 0.38)) 0%, color-mix(in srgb, var(--w) 74%, transparent) 38%, color-mix(in srgb, var(--w) 62%, rgba(0, 0, 0, 0.45)) 100%);
  -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -20px 34px -22px rgba(0, 0, 0, 0.4), 0 -6px 18px rgba(0, 0, 0, 0.18); }
body:not(.solido) .w.delante { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -20px 34px -22px rgba(0, 0, 0, 0.4), 0 18px 50px color-mix(in srgb, var(--w) calc(55% * var(--glow-k)), transparent); }
body:not(.solido) .w::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 70% at 18% 0%, rgba(255, 255, 255, 0.28), transparent 55%); mix-blend-mode: soft-light; }
body:not(.solido) .w > * { position: relative; }
/* iPhone (app instalada): la página desplaza el documento, no el body. Con html/body al 100 % y overflow-x: hidden el body
   se volvía una caja con desplazamiento propio que iOS dejaba por encima de la barra de inicio: se cortaba abajo. */
html, body { height: auto; min-height: 100%; }
body { overflow-x: clip; }
/* iPhone (Mario, 25-10): la barra de abajo se apoya junto a la raya de inicio, como en iOS, en vez de flotar 14 px por
   encima de toda la zona segura; lo que va pegado a ella baja con ella */
:root { --nav-abajo: max(12px, calc(env(safe-area-inset-bottom) - 10px)); }
@media (max-width: 819px) {
  .vnav { bottom: var(--nav-abajo); }
  .cp-campo { bottom: calc(var(--nav-abajo) + 76px); }
  #vista { padding-bottom: calc(var(--nav-abajo) + 100px); }
}
/* La barra de arriba al desplazar: cristal liso a todo el ancho con una línea fina abajo (el canto de luz por los cuatro
   lados la dibujaba como un recuadro) */
.top .fondo-top { border-bottom: 0.5px solid var(--line-2); box-shadow: none; -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); }
.top .fondo-top::before, .top .fondo-top::after { display: none; }
/* (Mario, 25-10) Al encogerse la barra de abajo, los iconos bajan al centro (el texto desaparece y no deja su hueco) */
@media (max-width: 819px) {
  .vnav a .ti, .vnav a .n { transition: transform var(--dur-morph) var(--spring); }
  body.encogida .vnav a .ti { transform: translateY(8px) scale(1.06); }
  body.encogida .vnav a .n { transform: translateY(8px); }
}
/* El título plegado entra desde la izquierda, en el sitio del logo (que se va), no en el centro */
.top .titulo-mini { left: var(--gutter); right: auto; top: env(safe-area-inset-top); bottom: auto; height: 56px; max-width: calc(100% - var(--gutter) * 2 - 104px);
  display: flex; align-items: center; text-align: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; transform: translateX(-16px); }
body.plegado .top .titulo-mini { transform: none; }
body.con-atras .top .titulo-mini { left: calc(var(--gutter) + 50px); }