/* ============================================================================
   PORTAL CLIENTES ELL — sistema visual (portalclientes.ell.cl)
   Identidad de ESTUDIO: sobria, editorial, premium. Distinta de MiPlanifica.
   Todo el movimiento respeta prefers-reduced-motion.
   ========================================================================== */
/* Paleta = los MISMOS tokens de marca de MiPlanifica (css/styles.css de
   portal-cliente-el), que salen del logo oficial. Los nombres de variable se
   conservan para que ningún componente ni el JS tengan que cambiar: solo cambia
   el VALOR. El acento interactivo pasa de dorado a --ocean, como en la propuesta. */
:root{
  --ink:#0D1B2A; --ink2:#1A2E45; --ink3:#1B4F7E;
  --ocean:#1B4F7E; --ocean-dim:rgba(27,79,126,.08);
  --paper:#F7F9FC; --surface:#FFFFFF; --surface2:#F7F9FC; --cloud:#EEF2F7;
  --gold:#C9A84C; --gold-d:#8A6F1E; --gold-soft:rgba(201,168,76,.12);
  --teal:#0E7C7B; --teal-soft:rgba(14,124,123,.10);
  --green:#059669; --green-soft:rgba(5,150,105,.10);
  --red:#E53E3E; --red-soft:rgba(229,62,62,.10);
  --amber:#D97706; --amber-soft:rgba(217,119,6,.10);
  --slate:#4A5568; --mist:#8FA3B1; --line:#D8E3ED; --line2:#EEF2F7;
  --navy-soft:#EEF2F7;
  --shadow:0 8px 28px rgba(13,27,42,.11);
  --shadow-sm:0 2px 12px rgba(13,27,42,.07);
  --shadow-lg:0 20px 56px rgba(13,27,42,.16);
  --serif:"DM Serif Display",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Consolas,Menlo,monospace;
  --rail:272px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--sans);background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.55}
.wrap{max-width:1060px;margin:0 auto;padding:0 20px}
.main{padding-bottom:72px}
.hidden{display:none!important}
button{font-family:inherit}

/* ── Cascarón: riel lateral + columna principal ──────────────────────────
   Mismo ancho de riel que la sidebar de MiPlanifica (240px). Los ids que usa
   el JS (#nav, #nav-in, #idbox, #who, #emp-chip, #logout) se conservan. */
.shell{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:var(--rail) minmax(0,1fr);min-height:100vh;background:var(--surface)}
.rail{border-right:1px solid var(--line);background:var(--surface);padding:20px 0 32px;display:flex;flex-direction:column;gap:20px;position:sticky;top:0;align-self:start;max-height:100vh;overflow-y:auto}
/* Marca: logo Tax Capital (TK) (ni recolor, ni recorte, ni reescala
   no proporcional). Solo se fija su alto; el ancho sale del viewBox 640x140.
   Sobre el riel CLARO corresponde la variante navy (ELLCL_logo_nav.svg). */
.rail-head{display:flex;flex-direction:column;gap:9px;padding:0 20px 18px;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit;min-width:0}
.brand-logo{height:44px;width:auto;display:block;flex:none;max-width:100%}
.brand-txt{display:flex;flex-direction:column;line-height:1.05;min-width:0}
.brand-name{font-family:var(--serif);font-size:19px;color:var(--ink);letter-spacing:-.2px}
.brand-sub{font-family:var(--sans);font-size:10.5px;font-weight:600;color:var(--mist);text-transform:uppercase;letter-spacing:.07em;margin-top:3px}
.brand-site{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;color:var(--ocean);text-decoration:none}
.brand-site:hover{text-decoration:underline}
.spacer{flex:1}

.nav{padding:0}
.nav-in{display:flex;flex-direction:column;gap:2px;padding:0 12px}
.nav-in::-webkit-scrollbar{display:none}
/* Los rótulos del menú son frases ("Mis declaraciones de impuestos"), no una
   palabra: el riel mide 272px, así que el tipo baja un punto y la línea respira
   para que un rótulo que se parte en dos se vea intencional y no roto. */
.nv{position:relative;display:flex;align-items:center;gap:11px;width:100%;background:none;border:none;color:var(--slate);font-size:14.5px;line-height:1.35;font-weight:500;text-align:left;padding:11px 13px;border-radius:10px;cursor:pointer;transition:background .15s,color .15s}
.nv:hover{background:var(--cloud);color:var(--ink)}
.nv.on{background:var(--ocean-dim);color:var(--ocean);font-weight:650}
.nv .dot{margin-left:auto;font-family:var(--mono);min-width:21px;text-align:center;border-radius:6px;background:var(--amber-soft);color:var(--amber);font-size:11.5px;font-weight:700;padding:1px 5px;font-variant-numeric:tabular-nums}
.rail-foot{margin-top:auto;padding:18px 20px 0;font-size:12px;color:var(--mist);line-height:1.6;border-top:1px solid var(--line);margin-left:12px;margin-right:12px}

/* Barra de contexto (identidad + salir) */
.ctx{position:sticky;top:0;z-index:40;min-height:60px;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:11px 26px}
.idbox{min-width:0;line-height:1.3;text-align:right;margin-left:auto}
.idbox .emp{font-size:12.5px;font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:280px}
.idbox .who{font-size:11.5px;color:var(--mist);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:280px}
.btn-out{background:var(--surface);border:1px solid var(--line);color:var(--slate);font:inherit;font-size:12.5px;padding:8px 14px;border-radius:8px;cursor:pointer;transition:border-color .15s,color .15s}
.btn-out:hover{border-color:var(--ocean);color:var(--ocean)}
/* ── Barra de vista superadmin ───────────────────────────────────────────
   Deliberadamente distinta del resto (fondo oscuro, no la paleta del cliente):
   mirando el portal de otro NUNCA debe confundirse con la cuenta propia. */
.staffbar{background:var(--ink);color:#e6ecf2;border-bottom:1px solid var(--ink2)}
.staffbar.on{background:var(--ocean)}
.staffbar.cargando{opacity:.65;pointer-events:none}
.sb-in{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 26px}
.sb-tag{font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
        color:var(--gold);flex:none}
/* Buscador de clientes (combobox): se escribe nombre, RUT o correo */
.sb-box{position:relative;flex:1 1 320px;max-width:460px;min-width:0}
.sb-q{width:100%;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.26);
      border-radius:var(--r);color:#fff;font:inherit;font-size:13.5px;padding:9px 12px}
.sb-q::placeholder{color:rgba(255,255,255,.60)}
.sb-q:focus{outline:none;border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.16);
            background:rgba(255,255,255,.16)}
.sb-q::-webkit-search-cancel-button{filter:invert(1);opacity:.6}
.sb-list{position:absolute;z-index:60;top:calc(100% + 6px);left:0;right:0;max-height:min(58vh,420px);
         overflow-y:auto;background:var(--surface);border:1px solid var(--line);
         border-radius:var(--r);box-shadow:var(--shadow-lg);padding:5px}
.sb-it{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:none;
       background:none;padding:9px 10px;border-radius:8px;cursor:pointer;font:inherit;color:var(--ink)}
.sb-it:hover,.sb-it.on{background:var(--ocean-dim)}
.sb-it-mia{border-bottom:1px solid var(--line);border-radius:8px 8px 0 0;margin-bottom:4px;
           padding-bottom:11px;color:var(--ocean)}
.sb-pt{width:7px;height:7px;border-radius:50%;flex:none;background:var(--line);
       box-shadow:0 0 0 2px var(--surface)}
.sb-pt.ok{background:var(--green)}
.sb-it-tx{min-width:0;line-height:1.35}
.sb-it-tx b{display:block;font-size:13px;font-weight:600;overflow:hidden;
            text-overflow:ellipsis;white-space:nowrap}
.sb-it-tx span{display:block;font-family:var(--mono);font-size:10.5px;color:var(--mist);
               overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-vacio{padding:16px 12px;text-align:center;font-size:12.5px;color:var(--mist)}
.sb-now{font-size:12.5px;color:#dfe7ef;min-width:0}
.sb-now b{color:#fff}
.sb-now.sb-mut{color:#9fb0c1}
.staffbar .cta.ghost{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.30);color:#fff;margin-left:auto}
.staffbar .cta.ghost:hover{background:rgba(255,255,255,.20);border-color:#fff;color:#fff}

.colmain{min-width:0;background:var(--paper);display:flex;flex-direction:column}
.colmain .wrap{max-width:100%;padding:0 26px}
.rail-foot a{color:var(--ocean);font-weight:600;text-decoration:none}
.rail-foot a:hover{text-decoration:underline}
/* Sin sesión el riel no aporta nada: la tarjeta de login manda sola. */
.shell:has(#app.hidden) .rail{display:none}
.shell:has(#app.hidden){grid-template-columns:minmax(0,1fr)}

/* Cifras en monoespaciada tabular (ADN de libro contable) */
.kpi .k-v,.row .rm,table.fin td.n,.mini .m b{font-family:var(--mono)}
.kpi .k-v{font-weight:600;letter-spacing:-.02em}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero{margin:34px 0 20px}
.hero .eyebrow{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-d);margin-bottom:8px}
.hero h1{font-family:var(--serif);font-weight:400;font-size:31px;margin:0 0 8px;letter-spacing:-.2px;line-height:1.15}
.hero p{margin:0;color:var(--slate);font-size:14.5px;max-width:640px}

/* ── Franja de atención ──────────────────────────────────────────────────── */
.atencion{display:flex;flex-direction:column;gap:10px;margin:0 0 22px}
.at{display:flex;align-items:center;gap:14px;padding:15px 18px;border-radius:14px;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--amber);box-shadow:var(--shadow-sm);animation:rise .5s var(--ease) both}
.at.urg{border-left-color:var(--red)}
.at .at-ic{width:36px;height:36px;border-radius:10px;flex:none;display:flex;align-items:center;justify-content:center;background:var(--amber-soft);color:var(--amber)}
.at.urg .at-ic{background:var(--red-soft);color:var(--red)}
.at .at-ic svg{width:19px;height:19px}
.at .at-tx{min-width:0;line-height:1.4}
.at .at-tx b{display:block;font-size:14px}
.at .at-tx span{font-size:12.5px;color:var(--slate)}
.at .at-go{margin-left:auto;flex:none}

/* ── Vistas ──────────────────────────────────────────────────────────────── */
.view{animation:viewin .34s var(--ease) both}
@keyframes viewin{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

/* ── Cards ───────────────────────────────────────────────────────────────── */
/* minmax(0,1fr): sin esto la columna se dimensiona por min-content y cualquier
   texto con nowrap (cabeceras de acordeón) desborda la pantalla en móvil. */
.grid{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.card{min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px 24px;box-shadow:var(--shadow-sm);animation:rise .55s var(--ease) both;animation-delay:calc(var(--i,0)*70ms)}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.ch{display:flex;align-items:center;gap:13px;margin-bottom:6px}
.ch .ic{width:40px;height:40px;border-radius:11px;flex:none;display:flex;align-items:center;justify-content:center;background:var(--ocean-dim);color:var(--ocean)}
.ch .ic svg{width:20px;height:20px}
.ch h2{font-weight:650;font-size:15px;margin:0;letter-spacing:-.1px}
.ch .tag{margin-left:auto;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:var(--gold-soft);color:var(--gold-d)}
.csub{color:var(--slate);font-size:13.5px;margin:0 0 16px}

/* ── KPI tiles ───────────────────────────────────────────────────────────── */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:12px}
.kpi{background:var(--surface2);border:1px solid var(--line);border-radius:13px;padding:15px 16px;animation:rise .5s var(--ease) both;animation-delay:calc(var(--i,0)*60ms)}
.kpi .k-l{display:block;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--mist);margin-bottom:6px}
.kpi .k-v{font-size:21px;font-weight:800;letter-spacing:-.4px;font-variant-numeric:tabular-nums;line-height:1.2}
.kpi .k-d{font-size:11.5px;color:var(--slate);margin-top:4px}
.kpi .k-d.up{color:var(--green)} .kpi .k-d.down{color:var(--red)}
.kpi.neg .k-v{color:var(--red)}

/* ══ TABLERO DEL RESUMEN (BI) ══════════════════════════════════════════════
   Los KPI y el gráfico son UNA pieza: las baldosas son las pestañas y el
   escenario de abajo es el detalle de la que esté activa. Antes eran dos
   bloques sin relación visual y ninguno se podía abrir.

   Movimiento: el portal no usa React, así que no hay framer-motion — el mismo
   lenguaje (entrada escalonada, resorte al elegir, cifras que suben, barras que
   crecen desde su base) se hace con CSS y Web Animations. Todo se apaga bajo
   prefers-reduced-motion, que está al final del bloque. */
.bi{display:flex;flex-direction:column;gap:14px;min-width:0}
.bi *{min-width:0}

/* Curvas: --ease sale del sistema; --spring tiene sobrepaso, para el clic. */
.bi{--spring:cubic-bezier(.34,1.4,.5,1)}

/* ── Bloque principal: cabecera + KPI + escenario ─────────────────────────── */
.bi-main{background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:16px 16px 18px;box-shadow:var(--shadow-sm);animation:rise .5s var(--ease) both}
.bi-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.bi-head h2{font-family:var(--serif);font-size:22px;font-weight:400;letter-spacing:-.2px;margin:0;color:var(--ink)}
.bi-head p{margin:3px 0 0;font-size:12px;color:var(--mist)}
.bi-slicer{display:flex;gap:3px;background:var(--surface2);border:1px solid var(--line);border-radius:9px;padding:3px}
.bi-sl{font:inherit;font-size:11.5px;font-weight:700;color:var(--slate);background:none;border:none;
  border-radius:6px;padding:5px 11px;cursor:pointer;transition:background .18s var(--ease),color .18s}
.bi-sl:hover{color:var(--ink)}
.bi-sl.on{background:var(--ocean);color:#fff}

/* ── KPI = pestañas ───────────────────────────────────────────────────────
   La activa se ancla al escenario con su color y una lengüeta inferior, para
   que se lea "esto de arriba es lo que estoy viendo abajo". */
.bi-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
@media (min-width:900px){.bi-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}}
.bi-kpi{position:relative;overflow:hidden;text-align:left;font:inherit;cursor:pointer;
  background:var(--surface2);border:1px solid var(--line);border-radius:12px;padding:11px 12px 26px;
  transition:transform .28s var(--spring),box-shadow .22s var(--ease),border-color .22s,background .22s;
  animation:rise .5s var(--ease) both;animation-delay:calc(var(--i,0)*40ms)}
.bi-kpi:hover{background:var(--surface);border-color:var(--c);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.bi-kpi:focus-visible{outline:2px solid var(--c);outline-offset:2px}
.bi-kpi.on{background:var(--surface);border-color:var(--c);box-shadow:0 4px 16px rgba(13,27,42,.10);transform:translateY(-2px)}
/* Lengüeta: la pestaña activa "toca" el escenario. */
.bi-kpi.on::after{content:'';position:absolute;left:12px;right:12px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--c)}
.bi-kl{display:block;font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mist);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bi-kv{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;margin-top:6px;font-family:var(--mono);font-size:18px;
  font-weight:600;letter-spacing:-.4px;font-variant-numeric:tabular-nums;line-height:1.15;color:var(--ink)}
.bi-kpi.neg .bi-kv{color:var(--red)}
.bi-u{font-size:11.5px;font-weight:500;color:var(--mist)}
.bi-esp{font-family:var(--sans);font-size:13.5px;font-weight:650;letter-spacing:0;color:var(--slate)}
.bi-var{font-family:var(--sans);font-size:10px;font-weight:700;color:var(--mist);white-space:nowrap}
.bi-var.up{color:var(--green)}.bi-var.dn{color:var(--red)}
.bi-kd{position:relative;z-index:1;display:block;font-size:10px;color:var(--slate);margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bi-spark{position:absolute;left:0;right:0;bottom:0;width:100%;height:24px;pointer-events:none;opacity:.85;
  transition:opacity .22s}
.bi-kpi.on .bi-spark{opacity:1}

/* ── Escenario: el detalle de la métrica abierta ─────────────────────────── */
.bi-stage{margin-top:14px;padding-top:14px;border-top:1px solid var(--line2);
  animation:stageIn .38s var(--ease) both}
@keyframes stageIn{from{opacity:0;transform:translateY(8px)}}
.bi-sh{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px}
.bi-sh h3{margin:0;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ocean)}
.bi-sh span{font-size:10.5px;color:var(--mist);font-variant-numeric:tabular-nums}
.bi-load{font-size:12.5px;color:var(--mist);padding:18px 2px}
.bi-det{animation:stageIn .3s var(--ease) both}
.bi-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
/* Rótulo de cada bloque de estadísticos: con dos series lado a lado, ocho
   baldosas sin encabezado no dicen cuál es de ventas y cuál de compras. */
.bi-sl2{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--slate);margin-bottom:6px}
.bi-two .bi-stats{margin-top:0}

/* ── Gráfico ──────────────────────────────────────────────────────────────
   Rejilla y ejes en hairline, un tono sobre la superficie; el texto usa los
   tokens de texto, nunca el color de la serie. */
.bi-chartw{position:relative}
.bi-chart{width:100%;height:auto;display:block;overflow:visible}
.bi-chart .bi-grid{stroke:var(--line2);stroke-width:1}
.bi-chart .bi-zero{stroke:var(--line);stroke-width:1.4}
.bi-chart .bi-ax{font-family:var(--sans);font-size:9.5px;fill:var(--mist)}
.bi-chart .bi-axt{font-family:var(--sans);font-size:9px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;fill:var(--mist)}
.bi-bar{transform-box:fill-box;transform-origin:center var(--o,bottom);
  animation:barIn .55s var(--ease) both;animation-delay:calc(var(--i,0)*22ms);transition:opacity .16s}
@keyframes barIn{from{transform:scaleY(.02)}}
.bi-chartw[data-act] .bi-bar{opacity:.38}
.bi-chartw[data-act] .bi-bar.hot{opacity:1}
.bi-chartw .bi-hit{cursor:crosshair}
.bi-leg{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px;font-size:11px;color:var(--slate)}
.bi-leg span{display:inline-flex;align-items:center;gap:5px}
.bi-leg i{width:9px;height:9px;border-radius:2px;display:block}

/* Tooltip: valor primero en fuerte, rótulo después. */
.bi-tip{position:absolute;top:6px;pointer-events:none;background:var(--ink);color:#fff;border-radius:9px;
  padding:8px 11px;font-size:11.5px;line-height:1.45;box-shadow:var(--shadow);z-index:5;white-space:nowrap;
  animation:tipIn .14s var(--ease) both}
@keyframes tipIn{from{opacity:0;transform:translateY(-3px)}}
.bi-tip-h{font-weight:700;font-size:10px;letter-spacing:.05em;text-transform:uppercase;opacity:.7;margin-bottom:4px}
.bi-tip-r{display:flex;align-items:center;gap:7px}
.bi-tip-r i{width:11px;height:2.5px;border-radius:2px;flex:none}
.bi-tip-r b{font-family:var(--mono);font-variant-numeric:tabular-nums}
.bi-tip-r span{opacity:.72}

/* ── Estadísticos del rango ───────────────────────────────────────────────── */
.bi-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:8px;margin-top:14px}
.bi-stats>div{background:var(--surface2);border:1px solid var(--line2);border-radius:10px;padding:9px 11px;
  animation:rise .45s var(--ease) both;animation-delay:calc(var(--i,0)*40ms)}
.bi-stats span{display:block;font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--mist)}
.bi-stats b{display:block;margin-top:3px;font-family:var(--mono);font-size:14px;font-weight:600;
  font-variant-numeric:tabular-nums;color:var(--ink)}

/* ── Barras horizontales (composición / ranking) ──────────────────────────── */
.bi-bh{display:flex;flex-direction:column;gap:9px}
.bi-bh-r{display:grid;grid-template-columns:minmax(74px,auto) 1fr auto;align-items:center;gap:10px;
  animation:rise .5s var(--ease) both;animation-delay:calc(var(--i,0)*55ms)}
.bi-bh-l{font-size:11.5px;color:var(--slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bi-bh-t{display:block;height:9px;border-radius:99px;background:var(--surface2);overflow:hidden}
.bi-bh-t i{display:block;height:100%;border-radius:99px;transform-origin:left;
  animation:grow .6s var(--ease) both;animation-delay:calc(var(--i,0)*55ms + 60ms)}
@keyframes grow{from{transform:scaleX(0)}}
.bi-bh-v{font-family:var(--mono);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink)}

/* ── Tabla ────────────────────────────────────────────────────────────────── */
.bi-tw{overflow-x:auto;margin-top:14px}
.bi-t{width:100%;border-collapse:collapse;font-size:12.5px;min-width:380px}
.bi-t th{text-align:left;font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--mist);
  padding:0 10px 7px 0;border-bottom:1px solid var(--line)}
.bi-t td{padding:8px 10px 8px 0;border-bottom:1px solid var(--line2);vertical-align:middle}
.bi-t th.n,.bi-t td.n{text-align:right;padding-right:0;font-variant-numeric:tabular-nums;white-space:nowrap}
.bi-t td.n{font-family:var(--mono)}
.bi-t td.mut{color:var(--mist)}
.bi-t td.up{color:var(--green)}.bi-t td.dn{color:var(--red)}
.bi-t td.w{width:36%;min-width:88px}
.bi-t tbody tr{animation:rise .4s var(--ease) both;animation-delay:calc(var(--i,0)*30ms)}
.bi-t tbody tr:hover td{background:var(--surface2)}
.bi-db{display:block;height:11px;border-radius:3px;background:var(--surface2);overflow:hidden}
.bi-db i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#2E7CC4,#5FA0DC);
  transform-origin:left;animation:grow .6s var(--ease) both;animation-delay:calc(var(--i,0)*30ms + 80ms)}

/* ── Paneles secundarios ──────────────────────────────────────────────────── */
.bi-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.bi-p{min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:15px 16px 16px;
  box-shadow:var(--shadow-sm);animation:rise .55s var(--ease) both}
.bi-p.w2{grid-column:1 / -1}
.bi-ph{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:12px}
.bi-ph h3{margin:0;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ocean)}
.bi-ph span{font-size:10.5px;color:var(--mist)}
.bi-none{font-size:12.5px;color:var(--slate);line-height:1.55;background:var(--surface2);border:1px dashed var(--line);
  border-radius:10px;padding:14px 15px}
.bi-nota{font-size:10.5px;color:var(--mist);line-height:1.5;margin-top:10px}

/* ── Cumplimiento: un cuadro por período ──────────────────────────────────── */
.bi-heat{display:grid;grid-template-columns:repeat(auto-fit,minmax(46px,1fr));gap:5px}
.bi-hc{border-radius:7px;padding:11px 3px 9px;text-align:center;border:1px solid transparent;cursor:default;
  animation:rise .45s var(--ease) both;animation-delay:calc(var(--i,0)*35ms);transition:transform .2s var(--spring)}
.bi-hc:hover{transform:translateY(-2px)}
.bi-hc span{display:block;font-size:9.5px;font-weight:700}
.bi-hc.ok{background:var(--green-soft);color:var(--green);border-color:rgba(5,150,105,.22)}
.bi-hc.warn{background:var(--amber-soft);color:var(--amber);border-color:rgba(217,119,6,.22)}
.bi-hc.err{background:var(--red-soft);color:var(--red);border-color:rgba(229,62,62,.22)}
.bi-hc.mut{background:var(--surface2);color:var(--mist);border-color:var(--line)}

@media (max-width:820px){
  .bi-grid{grid-template-columns:minmax(0,1fr)}
  .bi-p.w2{grid-column:auto}
  .bi-head h2{font-size:19px}
}
@media (max-width:560px){
  .bi-main,.bi-p{padding-left:13px;padding-right:13px}
  .bi-kpis{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
}

/* Quien pide menos movimiento no recibe ninguno: sin entradas escalonadas, sin
   barras que crecen y sin cifras que suben (esas las apaga el propio JS). */
@media (prefers-reduced-motion: reduce){
  .bi-main,.bi-kpi,.bi-stage,.bi-det,.bi-bar,.bi-bh-r,.bi-bh-t i,.bi-t tbody tr,.bi-db i,.bi-hc,.bi-p,.bi-stats>div,.bi-tip{
    animation:none!important}
  .bi-kpi,.bi-hc,.bi-sl{transition:none!important}
  .bi-kpi:hover,.bi-kpi.on,.bi-hc:hover{transform:none}
}

/* ── Desglose por documento del mes ────────────────────────────────────────
   La fila del mes es el control: chevrón que gira, hover y foco visibles. El
   detalle se pinta como una fila más de la misma tabla, para que quede pegado
   a su mes y no flote en un panel aparte. */
.bi-t-click tr.mes{cursor:pointer}
.bi-t-click tr.mes:hover td{background:var(--surface2)}
.bi-t-click tr.mes:focus-visible{outline:2px solid var(--ocean);outline-offset:-2px}
.bi-t-click tr.mes.on td{background:var(--ocean-dim)}
.dx-ch{display:inline-block;width:13px;margin-right:7px;color:var(--mist);vertical-align:-1px;
  transition:transform .2s var(--ease)}
.dx-ch svg{width:13px;height:13px;display:block}
.bi-t-click tr.mes.on .dx-ch{transform:rotate(180deg);color:var(--ocean)}
.dx{padding:13px 14px 15px;border-left:3px solid var(--ocean);animation:stageIn .3s var(--ease) both}
/* El panel del mes vive pegado al gráfico, no en una lista aparte. */
.dx-panel{margin-top:12px;background:var(--surface2);border:1px solid var(--line);border-radius:12px}
.dx-x{margin-left:auto;border:none;background:none;color:var(--mist);font-size:22px;line-height:1;
  cursor:pointer;padding:0 4px;border-radius:7px}
.dx-x:hover{color:var(--ink);background:var(--cloud)}
.dx-x:focus-visible{outline:2px solid var(--ocean);outline-offset:2px}
.dx-sub{margin-top:16px;padding-top:12px;border-top:1px solid var(--line);font-size:11px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ocean)}
.dx-sub i{font-style:normal;font-weight:600;color:var(--mist)}
.dx-nota{font-size:10.5px;color:var(--mist);line-height:1.5;margin:8px 0 0}
/* El mes del gráfico ES el control. */
.bi-chartw .bi-hit{cursor:pointer}
.bi-chartw .bi-hit:focus-visible{outline:2px solid var(--ocean);outline-offset:-2px}
.dx-h{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.dx-h b{font-size:13px;color:var(--ink)}
.dx-lado,.dx-ord{display:flex;gap:4px}
.dx-lado button,.dx-ord button{font:inherit;font-size:11px;font-weight:600;color:var(--slate);
  background:var(--surface);border:1px solid var(--line);border-radius:99px;padding:4px 11px;cursor:pointer}
.dx-lado button.on,.dx-ord button.on{background:var(--ocean);border-color:var(--ocean);color:#fff}
.dx-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.dx-n{font-size:11.5px;color:var(--slate)}
.dx-n b{font-family:var(--mono);color:var(--ink)}
.dx-org{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.dx-org span{font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--ocean);
  background:var(--ocean-dim);border-radius:99px;padding:3px 9px}
.dx-load,.dx-vacio{font-size:12.5px;color:var(--mist);padding:12px 2px}
.dx-tw{overflow-x:auto}
.dx-t{width:100%;border-collapse:collapse;font-size:12px;min-width:520px;background:var(--surface);border-radius:9px}
.dx-t th{text-align:left;font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--mist);padding:8px 10px;border-bottom:1px solid var(--line)}
.dx-t td{padding:8px 10px;border-bottom:1px solid var(--line2);vertical-align:middle}
.dx-t th.n,.dx-t td.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.dx-t td.n{font-family:var(--mono)}
.dx-t td b{display:block;color:var(--ink)}
.dx-t td i{display:block;font-style:normal;font-size:10.5px;color:var(--mist);margin-top:1px}
.dx-t tbody tr:last-child td{border-bottom:none}
.dx-t tbody tr:hover td{background:var(--surface2)}
/* Una nota de crédito resta: se lee en rojo para que no se confunda con una venta. */
.dx-t tr.neg td.n b{color:var(--red)}
/* Los subtotales por tipo son un RESUMEN, no otra lista: fondo tenue y filas más
   apretadas para que el ojo los separe del detalle documento a documento que
   viene abajo, sin agregar un borde ni un título más. */
.dx-st{background:var(--surface2);border-radius:10px}
.dx-st td{padding:6px 10px}
.dx-st tbody tr:last-child td{border-bottom:0}
/* Fila AGREGADA (boletas 39/41 y comprobantes 48): el SII las publica como total del
   mes y no baja el detalle, así que una sola línea vale por N documentos. Se distingue
   con una guía a la izquierda —no con fondo tintado, que la convertiría en un cajón—
   porque el monto es tan real como el de las demás: lo que cambia es el grano. */
.dx-t tr.agr td:first-child{box-shadow:inset 2px 0 0 var(--line)}

/* ── Cobranza: planes vigentes, desglose y pagos ───────────────────────────
   La pregunta que el cliente trae es "¿cuánto me cobran, cuándo y por qué".
   Por eso el desglose neto → IVA → total va SIEMPRE visible, no escondido: el
   monto en UF a la izquierda y su equivalente en pesos a la derecha, para que
   se lea que el contrato es en UF y el peso es referencia. */
.cb-k{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:10px}
.cb-kpi{background:var(--surface2);border:1px solid var(--line);border-radius:12px;padding:12px 13px;
  animation:rise .5s var(--ease) both;animation-delay:calc(var(--i,0)*55ms)}
.cb-kpi>span{display:block;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mist)}
/* Cuando el valor es un nombre y no una cifra, baja a la tipografía de texto:
   la mono con letras se lee como código. */
.cb-v b:not([class]){font-family:var(--sans)}
.cb-v{margin-top:6px;font-family:var(--mono);font-size:17px;font-weight:600;letter-spacing:-.3px;
  font-variant-numeric:tabular-nums;color:var(--ink);line-height:1.2}
.cb-v i{display:block;font-style:normal;font-size:11.5px;font-weight:500;color:var(--mist);margin-top:2px}
.cb-d2{font-size:10.5px;color:var(--slate);margin-top:4px}

.cb-planes{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.cb-plan{border:1px solid var(--line);border-radius:12px;padding:13px 14px;background:var(--surface)}
.cb-ph{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.cb-ph b{font-size:13.5px;color:var(--ink)}
.cb-pm{font-size:11.5px;color:var(--slate);margin-top:3px}

/* Desglose: rótulo · monto en su moneda · equivalente en pesos */
.cb-desg{margin-top:10px;border-top:1px dashed var(--line);padding-top:8px}
.cb-d{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:baseline;padding:4px 0;font-size:12.5px}
.cb-d>span{color:var(--slate)}
.cb-d>b{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
.cb-d>i{font-style:normal;font-family:var(--mono);font-size:11.5px;color:var(--mist);
  font-variant-numeric:tabular-nums;white-space:nowrap;min-width:78px;text-align:right}
.cb-d.tot{border-top:1px solid var(--line2);margin-top:4px;padding-top:7px}
.cb-d.tot>span{color:var(--ink);font-weight:700}
.cb-d.tot>b{font-size:14px;font-weight:700}

.cb-tw{overflow-x:auto;margin-top:10px}
.cb-t{width:100%;border-collapse:collapse;font-size:12.5px;min-width:440px}
.cb-t th{text-align:left;font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--mist);padding:0 10px 7px 0;border-bottom:1px solid var(--line)}
.cb-t td{padding:9px 10px 9px 0;border-bottom:1px solid var(--line2);vertical-align:middle}
.cb-t th.n,.cb-t td.n{text-align:right;padding-right:0;white-space:nowrap}
.cb-t td b{display:block;color:var(--ink)}
.cb-t td i{display:block;font-style:normal;font-size:10.5px;color:var(--mist);margin-top:2px}
.cb-t td.n b{font-family:var(--mono);font-variant-numeric:tabular-nums}
.cb-t td.n i{font-family:var(--mono)}
.cb-t tbody tr:hover td{background:var(--surface2)}
.cb-nota{font-size:10.5px;color:var(--mist);line-height:1.5;margin:10px 0 0}

/* ── Sub-pestañas dentro de una vista ─────────────────────────────────────
   Hoy: cartera / Tablero dentro de "Mi vida inmobiliaria". */
.subtabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.stab{font:inherit;font-size:13px;font-weight:600;color:var(--slate);background:var(--surface2);
  border:1px solid var(--line);border-radius:999px;padding:8px 16px;cursor:pointer;
  transition:background .15s,color .15s,border-color .15s}
.stab:hover{color:var(--ink);border-color:var(--ocean)}
.stab.on{background:var(--ocean);border-color:var(--ocean);color:#fff}

/* ── Filas / tablas ──────────────────────────────────────────────────────── */
.row{display:flex;align-items:center;gap:12px;padding:13px 0;border-top:1px solid var(--line2);font-size:13.5px}
.row:first-of-type{border-top:none}
.row .rn{font-weight:700}
.row .rd{color:var(--mist);font-size:12px}
.row .rm{margin-left:auto;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.sec-h{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ocean);margin:20px 0 6px}
.sec-h:first-child{margin-top:0}

.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -4px}
table.fin{width:100%;border-collapse:collapse;font-size:13.5px;min-width:340px}
table.fin th,table.fin td{padding:9px 6px;text-align:left;border-bottom:1px solid var(--line2)}
table.fin th{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mist)}
table.fin td.n,table.fin th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.fin tr.tot td{font-weight:800;border-top:1.5px solid var(--line);border-bottom:none;padding-top:11px}
table.fin tr.sub td{color:var(--slate)}
table.fin tr.neg td.n{color:var(--red)}

/* ── Pills / badges ──────────────────────────────────────────────────────── */
.pill{display:inline-block;font-size:10px;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap;letter-spacing:.02em}
.pill.ok{background:var(--green-soft);color:var(--green)}
.pill.err{background:var(--red-soft);color:var(--red)}
.pill.warn{background:var(--amber-soft);color:var(--amber)}
.pill.mut{background:#efece6;color:#8a8272}
.pill.info{background:var(--teal-soft);color:var(--teal)}

/* ── Estados vacíos ──────────────────────────────────────────────────────── */
.empty{color:var(--slate);font-size:13px;padding:26px 20px;border:1px dashed var(--line);border-radius:13px;text-align:center;background:var(--surface2)}
/* `> b` y no `b` a secas: el bloque es el TÍTULO del estado vacío. Con el selector
   ancho, cualquier negrita dentro del texto se volvía un bloque y partía la frase en
   tres líneas (lo destapó el estado de «período publicado sin movimientos», que resalta
   el período dentro de la oración). Verificado que los 28 estados vacíos del portal
   ponen su <b> como hijo directo, así que ninguno cambia. */
.empty > b{color:var(--ink);display:block;font-size:14px;margin-bottom:5px}
.empty .e-ic{width:40px;height:40px;border-radius:11px;margin:0 auto 11px;display:flex;align-items:center;justify-content:center;background:var(--ocean-dim);color:var(--ocean)}
.empty .e-ic svg{width:20px;height:20px}
.empty a{color:var(--ocean);font-weight:600}

/* ── Skeletons ───────────────────────────────────────────────────────────── */
.sk{position:relative;overflow:hidden;background:var(--line2);border-radius:12px;height:54px;margin:10px 0}
.sk.sk-lg{height:96px}
.sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);animation:shimmer 1.3s infinite}
@keyframes shimmer{100%{transform:translateX(100%)}}
.load{padding:26px 0}

/* ── Botones ─────────────────────────────────────────────────────────────── */
.cta{display:inline-flex;align-items:center;gap:8px;background:var(--ocean);color:#fff;font:inherit;font-weight:600;font-size:13.5px;padding:11px 19px;border-radius:10px;text-decoration:none;border:none;cursor:pointer;transition:background .16s,transform .16s}
.cta:hover{background:#17436B;transform:translateY(-1px)}
.cta:disabled{opacity:.55;cursor:not-allowed;transform:none}
.cta.gold{background:var(--gold-d)} .cta.gold:hover{background:var(--gold)}
.cta.sm{padding:8px 14px;font-size:12.5px}
.cta.ghost{background:none;color:var(--ink);border:1px solid var(--line)}
.cta.ghost:hover{background:var(--surface2);border-color:var(--ocean)}
.lnk{color:var(--ocean);font-weight:600;font-size:13px;text-decoration:none}
.lnk:hover{text-decoration:underline}

/* ── Selector de período ─────────────────────────────────────────────────── */
.perbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 16px}
.perbar label{font-size:12px;color:var(--slate)}
.sel{border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);font:inherit;font-size:13px;font-weight:600;padding:8px 11px;cursor:pointer}
.sel:focus{outline:none;border-color:var(--ocean);box-shadow:0 0 0 3px rgba(27,79,126,.13)}

/* ── Barras de presupuesto ───────────────────────────────────────────────── */
.bpr{margin:14px 0 0}
.bpr .b-h{display:flex;align-items:baseline;gap:10px;font-size:13.5px;margin-bottom:6px}
.bpr .b-h .b-n{font-weight:700}
.bpr .b-h .b-m{margin-left:auto;font-variant-numeric:tabular-nums;font-size:12.5px;color:var(--slate)}
.bar{height:9px;border-radius:999px;background:var(--line2);overflow:hidden}
.bar i{display:block;height:100%;border-radius:999px;background:var(--teal);width:0;transition:width .8s var(--ease)}
.bar i.over{background:var(--red)}

/* ── Franja "contratar" (secundaria, compacta) ───────────────────────────── */
.contratar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:15px 18px;border-radius:14px;background:linear-gradient(120deg,var(--surface2),var(--gold-soft));border:1px solid var(--line)}
.contratar .c-tx{min-width:0;line-height:1.4}
.contratar .c-tx b{display:block;font-size:13.5px}
.contratar .c-tx span{font-size:12.5px;color:var(--slate)}
.contratar .c-go{margin-left:auto;flex:none}

/* ── Opt-in MiPlanifica ──────────────────────────────────────────────────── */
.optin{display:flex;align-items:center;gap:14px;margin-top:22px;padding:17px 20px;border-radius:14px;text-decoration:none;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm);transition:transform .16s,box-shadow .16s}
.optin:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.optin .oi-ic{width:38px;height:38px;border-radius:10px;flex:none;display:flex;align-items:center;justify-content:center;background:var(--teal-soft);color:var(--teal)}
.optin .oi-ic svg{width:20px;height:20px}
.optin .oi-tx{display:flex;flex-direction:column;line-height:1.4;min-width:0}
.optin .oi-tx b{color:var(--ink);font-size:14px}
.optin .oi-tx span{color:var(--slate);font-size:12.5px}
.optin .oi-go{margin-left:auto;font-weight:700;color:var(--teal);font-size:13.5px;white-space:nowrap}

.foot{margin-top:34px;text-align:center;color:var(--mist);font-size:11.5px;line-height:1.6}

/* ── Modal ───────────────────────────────────────────────────────────────── */
.modal-bg{position:fixed;inset:0;z-index:80;background:rgba(14,28,43,.52);backdrop-filter:blur(3px);display:flex;align-items:flex-start;justify-content:center;padding:28px 16px;overflow-y:auto;animation:fade .22s ease both}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{position:relative;width:100%;max-width:560px;background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-lg);padding:26px 26px 24px;margin:auto;animation:pop .3s var(--ease) both}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.modal-x{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:9px;border:1px solid var(--line);background:var(--surface2);color:var(--slate);font-size:20px;line-height:1;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.modal-x:hover{background:var(--red-soft);color:var(--red);border-color:var(--red-soft)}
.modal-t{font-family:var(--serif);font-weight:400;font-size:20px;margin:0 34px 4px 0;letter-spacing:-.2px}
.modal-hint{font-size:11.5px;color:var(--mist);text-align:center;margin-top:14px}
.ta{width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 12px;font:inherit;font-size:13.5px;background:#fff;resize:vertical;min-height:82px}
.ta:focus{outline:none;border-color:var(--ocean);box-shadow:0 0 0 3px rgba(27,79,126,.13)}
.mrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.msg{font-size:12.5px;margin-top:10px}
.msg.ok{color:var(--teal)} .msg.err{color:var(--red)}

/* ── Login ───────────────────────────────────────────────────────────────── */
.login{max-width:420px;margin:58px auto;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:36px 32px 30px;box-shadow:var(--shadow);animation:rise .55s var(--ease) both}
.lg-logo{display:flex;justify-content:center;margin-bottom:6px}
.lg-logo img{height:50px;width:auto;display:block;max-width:100%}
.login h2{font-family:var(--serif);font-weight:600;font-size:22px;margin:16px 0 4px;text-align:center;letter-spacing:-.2px}
.lg-sub{color:var(--slate);font-size:13px;text-align:center;margin:0 auto 20px;max-width:300px}
.fld{margin-bottom:12px}
.fld label{display:block;font-size:12.5px;color:var(--slate);margin-bottom:5px}
.fld input{width:100%;border:1px solid var(--line);border-radius:10px;padding:12px 13px;font:inherit;font-size:14px;background:#fff}
.fld input:focus{outline:none;border-color:var(--ocean);box-shadow:0 0 0 3px rgba(27,79,126,.13)}
.btn-main{width:100%;border:none;cursor:pointer;background:var(--ocean);color:#fff;font:inherit;font-weight:600;font-size:15px;padding:14px;border-radius:11px;transition:background .16s}
.btn-main:hover{background:#17436B}.btn-main:disabled{opacity:.55;cursor:not-allowed}
.or{display:flex;align-items:center;gap:11px;margin:16px 0 4px;color:var(--mist);font-size:11.5px}
.or span{flex:1;height:1px;background:var(--line)}
.btn-google{width:100%;display:flex;align-items:center;justify-content:center;gap:11px;padding:13px;border:1.5px solid var(--line);border-radius:11px;background:#fff;color:#3c4043;font-weight:600;font-size:14.5px;cursor:pointer;font-family:inherit;transition:border-color .16s,box-shadow .16s}
.btn-google:hover{border-color:#c9c2b6;box-shadow:var(--shadow-sm)}
.lg-goohint{text-align:center;color:var(--slate);font-size:11.5px;margin:9px 0 0}
.lg-goohint b{color:var(--ink)}
.btn-link{display:block;width:100%;text-align:center;background:none;border:none;color:var(--ocean);font:inherit;font-size:12.5px;font-weight:600;margin-top:14px;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.btn-link:hover{color:var(--ink)}
.lg-err{color:var(--red);font-size:12.5px;text-align:center;margin:10px 0 0;min-height:16px}
.lg-err.lg-ok{color:var(--teal)}
.lg-foot{text-align:center;color:var(--mist);font-size:11.5px;margin-top:18px;line-height:1.6;padding-top:16px;border-top:1px solid var(--line2)}
.lg-foot a{color:var(--ocean);text-decoration:none;font-weight:600}
.lg-foot a:hover{text-decoration:underline}

/* ── Responsive ──────────────────────────────────────────────────────────── */
/* Bajo 900px el riel se acuesta: pasa a una tira horizontal desplazable arriba,
   igual que MiPlanifica colapsa su sidebar. */
@media (max-width:900px){
  .shell,.shell:has(#app.hidden){grid-template-columns:minmax(0,1fr)}
  .rail{position:static;max-height:none;border-right:none;border-bottom:1px solid var(--line);padding:14px 0 0;gap:12px}
  .rail-head{border-bottom:none;padding:0 16px}
  .nav-in{flex-direction:row;overflow-x:auto;padding:0 12px 10px;gap:5px;scrollbar-width:none}
  .nv{width:auto;flex:none;white-space:nowrap;padding:8px 13px}
  .rail-foot{display:none}
  .ctx{padding:10px 16px;min-height:52px}
  .colmain .wrap{padding:0 16px}
}
@media (max-width:720px){
  .wrap{padding:0 15px}
  .hero{margin:24px 0 16px}
  .hero h1{font-size:25px}
  .idbox .emp,.idbox .who{max-width:120px}
  /* El logo se achica proporcionalmente (nunca se deforma ni se recorta). La
     etiqueta del producto cede el paso: la nav de secciones ya dice dónde estás. */
  .brand-logo{height:40px}
  .brand-name{font-size:17px}
  .brand-sub{display:none}
  .idbox{max-width:60%}
  .lg-logo img{height:42px}
  .card{padding:19px 17px;border-radius:14px}
  .kpi .k-v{font-size:19px}
  .at{flex-wrap:wrap}
  .at .at-go{margin-left:0;width:100%}
  .at .at-go .cta{width:100%;justify-content:center}
  .contratar .c-go{margin-left:0;width:100%}
  .contratar .c-go .cta{width:100%;justify-content:center}
  .optin{flex-wrap:wrap}
  .optin .oi-go{margin-left:52px}
  .modal{padding:22px 18px 20px}
}

/* ── Presupuesto personal (planilla anual: ítems × meses) ────────────────── */
.pm-anio{display:flex;align-items:center;justify-content:center;gap:12px;margin:14px 0 2px}
.pm-anio-n{font-weight:800;font-size:15px;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.pm-nav{font:inherit;font-size:16px;line-height:1;width:30px;height:30px;border:1.5px solid var(--line);border-radius:9px;background:var(--surface2);color:var(--slate);cursor:pointer;transition:border-color .15s,background .15s}
.pm-nav:hover{border-color:var(--ocean);background:var(--ocean-dim)}
.pm-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:13px;background:#fff}
/* table-layout FIXED + colgroup: el ancho sobrante se reparte parejo entre los
   12 meses (no se infla la columna Ítem) y th/td quedan en la MISMA grilla. */
.pm-tabla{border-collapse:separate;border-spacing:0;table-layout:fixed;width:100%;min-width:1290px;font-size:12.5px}
.pm-tabla col.c-item{width:230px}
.pm-tabla col.c-tot{width:112px}
.pm-tabla col.c-del{width:34px}
.pm-tabla th{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mist);text-align:right;padding:9px 12px 7px;border-bottom:1.5px solid var(--line);background:var(--surface2);white-space:nowrap}
.pm-tabla th.pm-item{text-align:left;padding-left:13px}
.pm-tabla td{padding:5px 5px;border-bottom:1px solid var(--line2);vertical-align:middle;white-space:nowrap;overflow:hidden}
.pm-tabla tbody tr:last-child td{border-bottom:none}
.pm-item{position:sticky;left:0;background:#fff;z-index:2;box-shadow:6px 0 8px -8px rgba(11,37,69,.22)}
th.pm-item{background:var(--surface2);z-index:3}
.pm-mes{text-align:right;font-variant-numeric:tabular-nums}
.pm-mes.cur{background:var(--ocean-dim)}
th.pm-mes.cur{color:var(--ocean)}
.pm-mes.neg,.pm-tot.neg{color:var(--red)}
.pm-tot{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;color:var(--slate)}
.pm-del{text-align:center}
/* Mismo borde derecho para encabezados, celdas editables y totales (12px). */
.pm-tabla td.pm-tot{padding-right:12px}
.pm-total td.pm-mes,.pm-grp td.pm-tot{padding-right:12px}
.pm-total td.pm-item,.pm-grp td.pm-item{padding-left:13px}
.pm-in{font:inherit;font-size:12.5px;color:var(--ink);background:var(--surface2);border:1.5px solid transparent;border-radius:8px;padding:6px 7px;min-width:0;width:100%;outline:none;transition:border-color .15s,background .15s;text-align:right;font-variant-numeric:tabular-nums}
.pm-in:hover{border-color:var(--line)}
.pm-in:focus{border-color:var(--ocean);background:#fff}
.pm-in.nom{text-align:left;font-weight:600}
.pm-sub{display:flex;gap:4px;margin-top:3px}
.pm-in.mini{font-size:10.5px;padding:3px 6px;text-align:left;color:var(--slate);background:transparent;border-color:transparent}
.pm-in.mini:hover,.pm-in.mini:focus{border-color:var(--line);background:#fff}
.pm-grp td{background:var(--surface2);font-weight:800;font-size:12px;border-bottom:1px solid var(--line)}
.pm-grp .pm-item{background:var(--surface2)}
.pm-total td{background:var(--navy-soft,#f2f5f9);font-weight:700;border-top:1.5px solid var(--line)}
.pm-total .pm-item{background:var(--navy-soft,#f2f5f9)}
.pm-total.neto td{font-weight:800}
.ppb-x{flex:none;width:26px;height:26px;border:none;border-radius:8px;background:transparent;color:var(--mist);font-size:17px;line-height:1;cursor:pointer;transition:background .15s,color .15s}
.ppb-x:hover{background:var(--red-soft);color:var(--red)}
.ppb-add{display:inline-flex;align-items:center;font:inherit;font-size:12.5px;font-weight:600;color:var(--ocean);background:transparent;border:1.5px dashed var(--line);border-radius:9px;padding:7px 13px;margin-top:9px;cursor:pointer;transition:border-color .15s,background .15s}
.ppb-add:hover{border-color:var(--ocean);background:var(--ocean-dim)}
.ppb-add.sm{font-size:11.5px;padding:5px 11px;margin-top:6px}
.ppb-status{min-height:17px;font-size:12px;color:var(--mist);margin-top:12px}
.ppb-status.ok{color:var(--green)} .ppb-status.err{color:var(--red)} .ppb-status.warn{color:var(--amber)}
.ppb-note{font-size:12px;color:var(--slate);line-height:1.5;margin:8px 0 0}
.ppb-note a{color:var(--ocean);font-weight:600}
@media (max-width:640px){
  .pm-tabla{min-width:1080px}
  .pm-tabla col.c-item{width:150px}
  .pm-tabla col.c-tot{width:96px}
}

/* ── Acordeones compactos (desplegar según interacción) ──────────────────── */
.acc{border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden;margin-top:9px}
.acc:first-child{margin-top:0}
.acc-h{display:flex;align-items:center;gap:10px;width:100%;padding:12px 14px;cursor:pointer;user-select:none;background:var(--surface);border:none;font:inherit;text-align:left;transition:background .15s}
.acc-h:hover{background:var(--cloud)}
.acc-h .st{flex:none}
.acc-h b{flex:1 1 auto;font-size:13.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acc-h .meta{flex:0 1 auto;font-size:11.5px;color:var(--mist);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.acc-h .pill{flex:none}
.acc-h .chev{margin-left:auto;flex:none;width:24px;height:24px;border-radius:8px;background:var(--ocean-dim);color:var(--ocean);display:flex;align-items:center;justify-content:center;transition:transform .24s var(--ease)}
.acc-h .chev svg{width:14px;height:14px}
.acc.open .acc-h .chev{transform:rotate(180deg)}
.acc-b{display:none;padding:4px 15px 14px;border-top:1px dashed var(--line2)}
.acc.open .acc-b{display:block;animation:accin .28s var(--ease) both}
@keyframes accin{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.acc-hint{font-size:11px;color:var(--mist);margin:10px 2px 0;display:flex;align-items:center;gap:6px}
.acc-hint svg{width:12px;height:12px;color:var(--ocean)}

/* ── Despliegue de una empresa: pestañas dentro de su fila ───────────────────
   La empresa ES la fila del acordeón; al abrirla, su información se organiza en
   pestañas (ficha · compras y ventas · cumplimiento SII · servicios) en vez de
   apilarse. Mismo formato que MiPlanifica, con el lenguaje visual del Estudio. */
.etabs{display:flex;gap:2px;margin:6px 0 12px;border-bottom:1px solid var(--line2);overflow-x:auto;-webkit-overflow-scrolling:touch}
.etab{flex:none;font:inherit;font-size:12.5px;font-weight:600;color:var(--slate);background:none;border:none;
  border-bottom:2px solid transparent;padding:8px 12px;margin-bottom:-1px;cursor:pointer;white-space:nowrap;transition:color .15s,border-color .15s}
.etab:hover{color:var(--ocean)}
.etab.on{color:var(--ocean);border-bottom-color:var(--ocean);font-weight:700}
.etab:focus-visible{outline:2px solid var(--ocean);outline-offset:-2px;border-radius:6px}
.epanel{animation:accin .24s var(--ease) both}
.esub{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mist);margin:14px 0 6px}
.esub:first-child{margin-top:2px}
/* Segmentado Compras · Ventas · Boletas */
.eseg{display:inline-flex;gap:2px;background:var(--cloud);border:1px solid var(--line2);border-radius:10px;padding:3px;margin:0 0 12px}
.eseg-b{font:inherit;font-size:12.5px;font-weight:600;color:var(--slate);background:transparent;border:none;
  border-radius:8px;padding:6px 14px;cursor:pointer;transition:background .15s,color .15s}
.eseg-b.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(11,37,69,.12)}
.eseg-b:focus-visible{outline:2px solid var(--ocean);outline-offset:1px}
@media (max-width:640px){
  .acc-h .meta{display:none}
  .eseg-b{padding:6px 11px}
}

/* ── Presupuesto de empresa: selector + panel de datos reales ────────────────
   El presupuesto se arma sobre la empresa elegida (selector). El panel "Tus
   datos reales" surface las fuentes disponibles (RCV, boletas) para llevarlas a
   la planilla con un toque; honorarios/rinde quedan listadas "en preparación". */
.presup-emp{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.presup-emp label{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--mist)}
.presup-emp .sel{flex:1 1 240px;min-width:0;max-width:360px}
.fr-list{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.fr{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line2);border-radius:11px;background:var(--surface2)}
.fr-n{flex:1 1 auto;min-width:0;font-size:13px;font-weight:600;color:var(--ink);display:flex;flex-direction:column;gap:1px}
.fr-p{font-size:10.5px;font-weight:500;color:var(--mist);letter-spacing:.01em}
.fr-v{font-family:var(--mono);font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap}
.fr-v.mut{font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--mist);font-style:italic}
.fr-b{flex:none;font:inherit;font-size:12px;font-weight:600;color:var(--ocean);background:var(--ocean-dim);
  border:1px solid transparent;border-radius:9px;padding:7px 12px;cursor:pointer;transition:background .15s,border-color .15s;white-space:nowrap}
.fr-b:hover{background:#fff;border-color:var(--ocean)}
.fr-b:focus-visible{outline:2px solid var(--ocean);outline-offset:1px}
@media (max-width:560px){
  .fr{flex-wrap:wrap;gap:6px 12px}
  .fr-b{width:100%;text-align:center}
}

/* ── Clasificar contrapartes en familias (IA+ sugiere · el humano valida) ─── */
.cl-acc{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0}
.cl-msg{font-size:12px;color:var(--slate)}
.cl-list{display:flex;flex-direction:column;gap:7px}
.cl-row{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(84px,auto) minmax(180px,1fr);gap:10px;align-items:center;
  padding:9px 12px;border:1px solid var(--line2);border-radius:11px;background:var(--surface2)}
.cl-row.sug{border-color:var(--gold);background:var(--gold-soft)}
.cl-n{min-width:0;line-height:1.3}
.cl-n b{display:block;font-size:13px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cl-rut{font-family:var(--mono);font-size:10.5px;color:var(--mist)}
.cl-v{font-family:var(--mono);font-size:12.5px;color:var(--slate);text-align:right;white-space:nowrap}
.cl-f{min-width:0;display:flex;flex-direction:column;gap:3px}
.cl-sel{width:100%;font-size:12.5px;padding:6px 9px}
.cl-tag{font-size:10.5px;font-weight:600;color:var(--gold-d)}
@media (max-width:640px){
  .cl-row{grid-template-columns:1fr auto;gap:6px 10px}
  .cl-f{grid-column:1/-1}
}

/* ── Presupuesto: vista ejecutiva (toggle + gráfico + resumen anual) ─────── */
.pv-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:14px 0 6px}
.pv{display:inline-flex;gap:2px;background:var(--cloud);border:1px solid var(--line2);border-radius:10px;padding:3px}
.pv-b{font:inherit;font-size:12.5px;font-weight:600;color:var(--slate);background:transparent;border:none;border-radius:8px;padding:6px 13px;cursor:pointer;transition:background .15s,color .15s;white-space:nowrap}
.pv-b.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(11,37,69,.12)}
.pv-b:focus-visible{outline:2px solid var(--ocean);outline-offset:1px}
/* Gráfico mensual ingresos vs gastos (barras deterministas) */
.mc{margin:6px 0 2px;padding:14px 14px 10px;background:var(--surface2);border:1px solid var(--line2);border-radius:13px}
.mc-empty{font-size:12.5px;color:var(--mist);text-align:center;padding:22px 10px}
.mc-legend{display:flex;gap:16px;font-size:11px;color:var(--slate);margin-bottom:12px}
.mc-lg{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.mc-lg::before{content:'';width:9px;height:9px;border-radius:3px;display:inline-block}
.mc-lg.i::before{background:var(--green)}
.mc-lg.g::before{background:var(--amber)}
.mc-plot{display:flex;align-items:flex-end;gap:3px}
.mc-col{flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0;padding-top:2px;border-radius:6px}
.mc-col.cur{background:var(--ocean-dim)}
.mc-bars{display:flex;align-items:flex-end;justify-content:center;gap:2px}
.mc-bars i{width:8px;border-radius:3px 3px 0 0;display:block;transition:height .3s var(--ease)}
.mc-i{background:var(--green)}
.mc-g{background:var(--amber)}
.mc-l{font-size:10px;color:var(--mist);font-weight:600;text-transform:uppercase}
.mc-col.cur .mc-l{color:var(--ocean)}
/* Resumen anual: roll-up por centro de costo (solo totales, con barra) */
.rs{margin-top:14px;border:1px solid var(--line2);border-radius:13px;overflow:hidden}
.rs-row{display:grid;grid-template-columns:minmax(96px,1.1fr) 2fr minmax(84px,auto);gap:10px;align-items:center;padding:9px 13px;border-top:1px solid var(--line2);font-size:13px}
.rs-row:first-child{border-top:none}
.rs-n{color:var(--ink);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rs-bar{height:7px;background:var(--cloud);border-radius:99px;overflow:hidden}
.rs-bar i{display:block;height:100%;background:var(--amber);border-radius:99px}
.rs-v{font-family:var(--mono);font-size:12.5px;text-align:right;color:var(--slate);white-space:nowrap}
.rs-none{color:var(--mist);grid-column:1/-1;font-size:12.5px}
.rs-tot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 13px;border-top:1px solid var(--line);font-size:13.5px;font-weight:700}
.rs-tot b{font-family:var(--mono)}
.rs-ing{background:rgba(5,150,105,.06)}
.rs-ing b{color:var(--green)}
.rs-gas{background:var(--surface2)}
.rs-net{background:var(--navy-soft);font-size:14.5px}
.rs-net b{color:var(--ocean)}
.rs-net.neg b{color:var(--red)}

/* ── Mini-stats compactos (dentro de acordeones) ─────────────────────────── */
.mini{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.mini .m{background:var(--surface2);border:1px solid var(--line2);border-radius:10px;padding:7px 12px;font-size:12.5px;line-height:1.3}
.mini .m span{display:block;color:var(--mist);font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.mini .m b{font-variant-numeric:tabular-nums;font-size:13.5px}

/* ── Chips de servicios (hero) ───────────────────────────────────────────── */
.svc-chips{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0 0}
.chip{font-size:11.5px;font-weight:600;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:4px 12px;color:var(--ink)}
.chip b{color:var(--ocean);font-weight:800;margin-right:4px}
.chip.off{border-style:dashed;color:var(--slate);font-weight:500}

/* ── Selector de empresas (vista Mis empresas) ───────────────────────────── */
.st.ok{background:var(--green)} .st.mut{background:var(--mist)}

/* ── Ficha de empresa ────────────────────────────────────────────────────── */
.ficha{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:2px 24px}
.fx{padding:8px 0;border-bottom:1px dashed var(--line2);font-size:13.5px;min-width:0}
.fx .l{display:block;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mist);margin-bottom:1px}
.fx b{color:var(--ink);overflow-wrap:anywhere}

/* ── Organigrama societario ──────────────────────────────────────────────── */
.org{display:flex;flex-direction:column;align-items:center;margin-top:8px}
.org .p{background:var(--ink);color:#f4efe7;border-radius:11px;padding:11px 20px;text-align:center;font-size:12.5px}
.org .p b{display:block;font-family:var(--serif);font-size:15px}
.org .vline{width:2px;height:20px;background:var(--ocean)}
.org .hijos{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.org .h{background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:10px 15px;text-align:center;font-size:12.5px;min-width:170px;max-width:240px}
.org .h b{display:block;color:var(--ink);overflow-wrap:anywhere}
.org .h .pct{color:var(--ocean);font-weight:800;font-size:12.5px}
.org .h i{display:block;font-style:normal;color:var(--mist);font-size:11px;margin-top:2px}

/* ── Invitación MiPlanifica (contextual) ─────────────────────────────────── */
.invite{display:flex;align-items:center;gap:15px;flex-wrap:wrap;background:linear-gradient(110deg,var(--ink),var(--ink3));color:#eef3f8;border-radius:15px;padding:19px 21px;margin-top:16px}
.invite .tx{min-width:220px;flex:1;line-height:1.45}
.invite .tx b{display:block;font-family:var(--serif);font-size:16px;margin-bottom:3px}
.invite .tx span{font-size:12.5px;opacity:.85}
.invite .go{margin-left:auto;flex:none}

/* ── Teaser (módulo no activo: upsell honesto de 1 línea) ────────────────── */
.teaser{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border:1px dashed var(--line);border-radius:13px;padding:13px 16px;background:var(--surface2);font-size:12.5px;color:var(--slate);margin-top:16px}
.teaser b{color:var(--ink)}
.teaser .go{margin-left:auto;flex:none}
@media (max-width:720px){
  .invite .go,.teaser .go{margin-left:0;width:100%}
  .invite .go .cta,.teaser .go .cta{width:100%;justify-content:center}
}
@media (max-width:480px){
  /* En pantalla chica el nombre manda: el punto de estado ya dice si está
     con el Estudio, así que la etiqueta cede el espacio. */
  .acc-h .pill{display:none}
  .acc-h{padding:12px 12px;gap:8px}
  .mini .m{flex:1 1 132px}
}

/* ── Medio de pago y cobros por pagar (Mi cuenta) ────────────────────────── */
/* Fila de un cobro pagable: concepto · monto · estado · botón. El botón es lo
   último en el orden de lectura a propósito — primero qué y cuánto. */
.pg-fila{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);margin-bottom:8px}
.pg-f-x{flex:1 1 220px;min-width:0}
.pg-f-x b{display:block;font-size:13.5px;color:var(--ink);overflow-wrap:anywhere}
.pg-f-x i{display:block;font-style:normal;font-size:11.5px;color:var(--mist);margin-top:2px}
.pg-f-m{flex:none;text-align:right;font-variant-numeric:tabular-nums}
.pg-f-m b{display:block;font-size:14px;color:var(--ink)}
.pg-f-m i{display:block;font-style:normal;font-size:11px;color:var(--mist)}
.pg-f-e{flex:none}
.pg-f-b{flex:none}

/* Estado de la tarjeta inscrita. */
.pg-tar{display:flex;gap:13px;align-items:flex-start;padding:14px 16px;border:1px solid var(--line);border-radius:13px;background:var(--surface2)}
.pg-tar.vacia{border-style:dashed}
.pg-tar .pg-t-i{flex:none;width:34px;height:34px;border-radius:9px;background:var(--ocean-dim);color:var(--ocean);display:grid;place-items:center}
.pg-tar .pg-t-i svg{width:19px;height:19px}
.pg-tar .pg-t-x{min-width:0;flex:1}
.pg-tar .pg-t-x b{font-size:14px;color:var(--ink);margin-right:8px}
.pg-tar .pg-t-x i{display:block;font-style:normal;font-size:12px;color:var(--slate);line-height:1.5;margin-top:6px}
.pg-acc{display:flex;gap:9px;flex-wrap:wrap;margin-top:12px}
.pg-nota{font-size:12px;color:var(--slate);line-height:1.5;margin:10px 0 0}

/* Resultado de una acción de pago: silencioso hasta que hay algo que decir. */
.pg-msg{font-size:12.5px;line-height:1.5;margin-top:10px}
.pg-msg:empty{margin-top:0}
.pg-msg.err{color:var(--red)}
.pg-msg.ok{color:var(--green)}

/* Disclaimer de custodia de la tarjeta. Va SIEMPRE bajo los botones: es lo que
   el cliente necesita saber justo antes de decidir teclear su tarjeta. */
.pg-disc{display:flex;gap:9px;align-items:flex-start;font-size:11.5px;color:var(--slate);line-height:1.5;margin:14px 0 0;padding:11px 13px;border-radius:11px;background:var(--cloud)}
.pg-disc svg{flex:none;width:15px;height:15px;color:var(--mist);margin-top:1px}
.pg-disc b{color:var(--ink)}

@media (max-width:560px){
  .pg-f-m{text-align:left}
  .pg-f-b{width:100%}
  .pg-f-b .cta{width:100%;justify-content:center}
  .pg-acc .cta{flex:1 1 100%;justify-content:center}
}

/* ── Accesibilidad de movimiento ─────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::after,*::before{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .bar i{transition:none}
}
:focus-visible{outline:2px solid var(--ocean);outline-offset:2px;border-radius:6px}

/* ── «No pudimos cargar esto» — UN solo tratamiento para todo el portal ──────
   El portal fue acumulando dialectos distintos para la MISMA idea: un aviso
   ámbar en el Resumen, un recuadro punteado en el cuadro de Cumplimiento, un
   `.empty` en la vista tributaria, otro en Rinde, otro en el Plan de Retiro.
   Cinco formas de decir lo mismo es ruido: el cliente aprende una vez qué
   significa este bloque y lo reconoce en cualquier pantalla.

   Ámbar y no rojo a propósito: no se perdió nada ni hay nada roto en sus datos
   — falta información que se puede volver a pedir. El rojo se reserva para lo
   que de verdad exige actuar. */
.falla{display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  padding:14px 16px;margin-bottom:16px;border:1px solid #f0c36d;border-radius:12px;
  background:#fdf6e6;color:#8a5a00}
.falla b{font-size:13.5px}
.falla span{font-size:12.5px;line-height:1.55}
.falla p{margin:0;font-size:12.5px;line-height:1.55}
.falla a{color:inherit;text-decoration:underline}
.falla .cta[disabled]{opacity:.6;cursor:default}
/* Variante en línea, para cuando ya hay datos en pantalla y esto es una nota
   al margen y no el contenido principal. */
.falla.nota{flex-direction:row;flex-wrap:wrap;align-items:center;padding:9px 12px;
  margin-bottom:10px;font-size:12px}
.falla-rein{border:0;background:none;padding:0;font:inherit;color:inherit;
  text-decoration:underline;cursor:pointer}
.falla-rein[disabled]{opacity:.6;cursor:default}

/* Clasificación de contrapartes en «Ver como»: la familia se muestra, no se
   elige. Se pinta como dato y no como control, para que no invite a tocarlo. */
.cl-ro{display:inline-block;font-size:13px;color:var(--slate);padding:6px 0}

/* Vista personal del Resumen: elegir qué indicadores ver. El control vive junto
   al slicer y solo aparece cuando hay algo que elegir. */
.bi-pers{border:1px solid var(--line);background:transparent;color:var(--slate);
  border-radius:999px;padding:5px 12px;font-size:12px;cursor:pointer}
.bi-pers:hover{border-color:var(--gold-d);color:var(--gold-d)}
.bi-pers-p{margin:10px 0 12px;padding:12px 14px;border:1px dashed var(--line);
  border-radius:12px;background:var(--surface2)}
.bi-pers-p p{margin:0 0 8px;font-size:12.5px;color:var(--slate);line-height:1.5}
.bi-pers-l{display:flex;flex-wrap:wrap;gap:8px}
.bi-pers-i{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;
  padding:5px 10px;border:1px solid var(--line);border-radius:999px;cursor:pointer;
  background:#fff;color:var(--slate)}
.bi-pers-i.on{border-color:var(--gold-d);color:var(--ink,#12232e)}
.bi-pers-i input{margin:0;cursor:pointer}
.bi-pers-i label{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.bi-pers-m{border:0;background:none;padding:0 2px;font-size:13px;line-height:1;
  color:var(--slate);cursor:pointer}
.bi-pers-m:disabled{opacity:.25;cursor:default}
.bi-pers-m:not(:disabled):hover{color:var(--gold-d)}

/* Blancos de toque en pantallas táctiles.
   Las flechas de reordenar median ~17×13 px de superficie real: intocables con
   el pulgar, y el portal se usa sobre todo en el teléfono. Se agranda por
   `pointer: coarse` y no por ancho de pantalla porque lo que decide es el DEDO,
   no el tamaño: una tablet es ancha y táctil, y un notebook angosto no lo es.
   El ratón conserva los controles compactos. */
@media (pointer: coarse) {
  .bi-pers-m{padding:9px 11px;font-size:16px}
  .bi-pers-i{padding:8px 12px;font-size:13px}
  .bi-pers-i input{width:18px;height:18px}
  .bi-pers{padding:9px 16px;font-size:13px}
  .falla-rein{padding:6px 0}
  /* Los botones de acción llegan al blanco de toque recomendado (44 px).
     MEDIDO en navegador con emulación táctil, no calculado: `.cta.sm` daba
     35 px y `.cta` 43. (Una nota anterior decía «~30 px» — venía de sumar
     padding y font-size a mano, sin el line-height; y una primera medición dio
     43 para los dos porque el probe los tenía en una fila flex, que estira los
     hijos al más alto. Las dos veces el número estaba mal por no mirar.)
     Se usa `min-height` y no más padding: sube el piso sin tocar la métrica del
     texto ni el ancho, así ninguna fila existente se reacomoda de lado.
     `.falla-rein` queda fuera a propósito: es un botón EN LÍNEA dentro de una
     frase, y estirarlo a 44 px rompería el párrafo (las guías eximen al destino
     que va embebido en texto). */
  .cta{min-height:44px}
}