/* PYASA · KPIs — identidad: cobalto PYASA sobre porcelana fría, medianoche cobalto para lo importante,
   y un solo gesto de marca: la línea de alambre (el trazo del logotipo) que dibuja la tendencia de ventas. */
:root {
  --cobalto: #0e19b2;          /* azul del logotipo */
  --cobalto-claro: #3d4be6;
  --marino: #011f85;           /* azul de navegación de pyasa.mx */
  --medianoche: #050a33;       /* fondo de lujo derivado del cobalto */
  --porcelana: #f4f5f9;        /* fondo frío */
  --papel: #ffffff;
  --tinta: #121a3a;
  --tinta-2: #4a5272;
  --tinta-3: #8a90a8;
  --filo: #e3e5ee;             /* líneas finas */
  --platino: #c5cadb;
  --bien: #0f7a55; --bien-s: #e2f3ec;
  --mal: #b4232a; --mal-s: #fbe8e8;
  --aviso: #9a5b00; --aviso-s: #fbf0dc;
  --neutro: #646b85; --neutro-s: #eceef4;
  --barra: #d3d7e6;
  --sombra: 0 1px 0 rgba(5,10,51,.04), 0 12px 32px -18px rgba(5,10,51,.28);
  --r-xl: 22px; --r-l: 16px; --r-m: 12px;
  --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px);
  --f: "Figtree", "Avenir Next", Avenir, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
  --acc: var(--cobalto); --acc-soft: #e8eafb; --bar: var(--barra); --ink: var(--tinta); --ink2: var(--tinta-2); --ink3: var(--tinta-3); --line: var(--filo); --card: var(--papel);
}
@media (prefers-color-scheme: dark) {
  :root {
    --porcelana: #04071f; --papel: #0b1238; --tinta: #eef0fa; --tinta-2: #b4b9d3; --tinta-3: #7c83a6; --filo: #1c2556;
    --cobalto: #8b95ff; --cobalto-claro: #a3abff; --acc-soft: #161f5c; --barra: #26306a; --platino: #3a4482;
    --bien: #4fd1a0; --bien-s: #0e3328; --mal: #ff8a8a; --mal-s: #3a1420; --aviso: #f2b75b; --aviso-s: #33260f;
    --neutro: #9aa0c0; --neutro-s: #161d4a; --sombra: none; color-scheme: dark;
  }
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; overflow-x: hidden; background: var(--porcelana); color: var(--tinta); }
body { font: 400 15px/1.5 var(--f); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; transition: transform .12s ease, background-color .2s, color .2s; }
button:active:not(:disabled) { transform: scale(.985); }
:focus-visible { outline: 2px solid var(--cobalto-claro); outline-offset: 2px; border-radius: 6px; }
.num, .valor, td.n, .delta { font-variant-numeric: tabular-nums lining-nums; }
a { color: var(--cobalto); }
.carga { min-height: 100vh; display: grid; place-items: center; background: var(--medianoche); }
.spin { width: 26px; height: 26px; border: 2px solid rgba(255,255,255,.15); border-top-color: #fff; border-radius: 50%; animation: g .8s linear infinite; }
@keyframes g { to { transform: rotate(360deg); } }

/* ── Encabezado: medianoche con el monograma como marca de agua */
.top { position: sticky; top: 0; z-index: 20; color: #fff; padding: calc(var(--safe-t) + 12px) 18px 0; background: var(--medianoche); overflow: hidden; isolation: isolate; }
.top::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 140% at 100% 0%, rgba(14,25,178,.55), transparent 55%); }
.top::after { content: ""; position: absolute; z-index: -1; right: -18px; bottom: -22px; width: 120px; height: 104px; opacity: .06; background: url(/marca/monograma-blanco.svg) no-repeat center / contain; }
.top-fila { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.top h1 { font-size: 19px; margin: 0; font-weight: 700; letter-spacing: -.015em; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
.top .sub { font-size: 12.5px; color: rgba(255,255,255,.55); font-weight: 500; }
.top .btn-ico { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.08); color: #fff; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.top .btn-ico svg { width: 19px; height: 19px; }
.chips { display: flex; gap: 4px; overflow-x: auto; padding: 12px 18px 14px; margin: 0 -18px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; border: 0; background: none; color: rgba(255,255,255,.62); padding: 7px 13px; border-radius: 999px; font-size: 14px; font-weight: 600; position: relative; }
.chip[disabled] { opacity: .28; }
.chip.on { background: #fff; color: var(--medianoche); }
.chip .pt { position: absolute; top: 5px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: #f2b75b; box-shadow: 0 0 0 2px var(--medianoche); }

main { padding: 18px 16px calc(112px + var(--safe-b)); max-width: 760px; margin: 0 auto; }

/* ── Navegación: píldora flotante */
.nav { position: fixed; z-index: 30; left: 12px; right: 12px; bottom: calc(10px + var(--safe-b)); max-width: 520px; margin: 0 auto; display: flex; padding: 6px; border-radius: 22px;
  background: rgba(5,10,51,.92); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); box-shadow: 0 18px 40px -16px rgba(5,10,51,.55); }
.nav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; text-decoration: none; color: rgba(255,255,255,.5); font-size: 10.5px; font-weight: 600; padding: 7px 0 6px; border-radius: 16px; transition: background-color .2s, color .2s; }
.nav a svg { width: 21px; height: 21px; }
.nav a.on { color: #fff; background: rgba(255,255,255,.1); }

/* ── Superficies */
.card { background: var(--papel); border-radius: var(--r-l); box-shadow: var(--sombra); padding: 18px; margin-bottom: 12px; border: 1px solid var(--filo); }
.card h2 { font-size: 15px; color: var(--tinta); margin: 0 0 12px; font-weight: 700; }
.seccion { font-size: 15px; color: var(--tinta); margin: 26px 4px 10px; font-weight: 700; }

/* El estado del mes: la pieza protagonista */
.estado { background: var(--medianoche); color: #fff; border: 0; border-radius: var(--r-xl); padding: 22px 20px 0; position: relative; overflow: hidden; isolation: isolate; box-shadow: 0 24px 50px -28px rgba(5,10,51,.7); }
.estado::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(90% 70% at 0% 0%, rgba(14,25,178,.7), transparent 60%), radial-gradient(60% 50% at 100% 100%, rgba(61,75,230,.35), transparent 70%); }
.estado .badge { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; }
.estado .badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px rgba(255,255,255,.08); }
.e-solido .badge { color: #6ee7b7; } .e-estable .badge { color: #a5b4ff; } .e-atencion .badge { color: #fcd34d; } .e-riesgo .badge { color: #fca5a5; }
.estado .titular { font-size: 25px; line-height: 1.18; font-weight: 750; letter-spacing: -.025em; margin: 12px 0 10px; text-wrap: balance; }
.estado .resumen { color: rgba(255,255,255,.72); margin: 0; font-size: 15px; line-height: 1.55; max-width: 62ch; }
.estado .nota { margin-top: 14px; font-size: 13px; color: #fde68a; background: rgba(252,211,77,.1); border: 1px solid rgba(252,211,77,.18); padding: 9px 12px; border-radius: 12px; }
.alambre { display: block; width: calc(100% + 40px); margin: 16px -20px 0; height: auto; }
.alambre .trazo { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.alambre .area { fill: url(#gArea); }
.alambre .pt { fill: #fff; }
.alambre .halo { fill: rgba(255,255,255,.16); }
.alambre text { fill: rgba(255,255,255,.42); font: 600 10px var(--f); }
.alambre .et-v { fill: #fff; font-size: 11.5px; font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  .alambre.anim .trazo { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: dibuja 1.7s cubic-bezier(.65,.05,.25,1) .1s forwards; }
  .alambre.anim .area, .alambre.anim .pt, .alambre.anim .halo, .alambre.anim .et-v { opacity: 0; animation: aparece .6s ease 1.55s forwards; }
}
@keyframes dibuja { to { stroke-dashoffset: 0; } }
@keyframes aparece { to { opacity: 1; } }

/* Cifras clave */
.heroes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }
.hero { background: var(--papel); border-radius: var(--r-l); box-shadow: var(--sombra); padding: 15px 15px 14px; text-align: left; border: 1px solid var(--filo); display: block; width: 100%; }
.hero .et { font-size: 13px; color: var(--tinta-2); font-weight: 600; }
.hero .valor { font-size: 25px; font-weight: 750; letter-spacing: -.03em; margin: 6px 0 8px; white-space: nowrap; color: var(--tinta); }
.hero .extra { font-size: 12.5px; color: var(--tinta-3); margin-top: 6px; }
.delta { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.delta svg { width: 9px; height: 9px; }
.t-bien { background: var(--bien-s); color: var(--bien); }
.t-mal { background: var(--mal-s); color: var(--mal); }
.t-neutro { background: var(--neutro-s); color: var(--neutro); }

/* Hallazgos */
.hall { list-style: none; margin: 0; padding: 0; }
.hall li { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--filo); font-size: 14.5px; color: var(--tinta-2); cursor: pointer; line-height: 1.45; }
.hall li:first-child { border-top: 0; padding-top: 2px; }
.hall .ic { flex: none; width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; }
.hall .ic svg { display: none; }
.h-pos .ic { background: var(--bien); } .h-neg .ic { background: var(--mal); } .h-vig .ic { background: #d4920f; }
.hall-titulo { font-weight: 700; font-size: 15px; margin: 0 0 10px; color: var(--tinta); }

/* Progreso */
.barra { height: 6px; border-radius: 99px; background: var(--neutro-s); overflow: hidden; margin: 10px 0 14px; }
.barra > i { display: block; height: 100%; background: linear-gradient(90deg, var(--marino), var(--cobalto-claro)); border-radius: 99px; transition: width .6s cubic-bezier(.2,.8,.2,1); }
.barra.ok > i { background: var(--bien); }
.personas { display: grid; gap: 10px; }
.persona { display: flex; align-items: center; gap: 11px; font-size: 14.5px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--acc-soft); color: var(--cobalto); display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none; }
.persona .nm { flex: 1; font-weight: 600; }
.persona .cnt { font-size: 13px; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.persona .ok { color: var(--bien); font-weight: 700; }
.fila-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.fila-meta .grande { font-size: 22px; font-weight: 750; letter-spacing: -.02em; }
.muted { color: var(--tinta-3); font-size: 13px; }

/* Listas de KPIs */
.kpi-row { display: flex; align-items: center; gap: 12px; padding: 15px 16px; background: var(--papel); border-radius: var(--r-l); box-shadow: var(--sombra); margin-bottom: 8px; width: 100%; border: 1px solid var(--filo); text-align: left; }
.kpi-row .izq { flex: 1; min-width: 0; }
.kpi-row .nm { font-size: 14.5px; font-weight: 650; color: var(--tinta); line-height: 1.25; }
.kpi-row .who { font-size: 12px; color: var(--tinta-3); margin-top: 3px; }
.kpi-row .der { text-align: right; flex: none; }
.kpi-row .valor { font-size: 18px; font-weight: 750; letter-spacing: -.02em; margin-bottom: 4px; white-space: nowrap; }
.kpi-row .spark { flex: none; width: 60px; height: 28px; }

/* Detalle */
.det-head { margin: 6px 2px 18px; }
.det-head .et { font-size: 13px; color: var(--tinta-3); font-weight: 500; }
.det-head h2 { font-size: 24px; margin: 4px 0 12px; letter-spacing: -.025em; line-height: 1.15; font-weight: 750; text-wrap: balance; }
.det-head .valor { font-size: 42px; font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--cobalto); }
.det-head .vs { margin-top: 10px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--tinta-3); }
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart text { fill: var(--tinta-3); font-size: 10px; font-family: var(--f); font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
  .chart rect { transform-box: fill-box; transform-origin: bottom; animation: crece .7s cubic-bezier(.2,.8,.2,1) both; }
}
@keyframes crece { from { transform: scaleY(0); } }
.info { background: var(--acc-soft); color: var(--tinta-2); border-radius: var(--r-m); padding: 13px 14px; font-size: 14px; line-height: 1.5; }
.info b { color: var(--tinta); }
.aviso { background: var(--aviso-s); color: var(--aviso); border-radius: var(--r-m); padding: 11px 13px; font-size: 13.5px; margin-bottom: 12px; line-height: 1.45; }
.tabla-wrap { overflow-x: auto; margin: 0 -18px; padding: 0 18px; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th { text-align: left; font-size: 12.5px; color: var(--tinta-3); font-weight: 600; padding: 4px 8px 9px 0; border-bottom: 1px solid var(--filo); }
td { padding: 10px 8px 10px 0; border-bottom: 1px solid var(--filo); vertical-align: top; }
td.n, th.n { text-align: right; white-space: nowrap; padding-right: 0; }
tr.sel td { color: var(--cobalto); font-weight: 700; }
.desg-item { padding: 12px 0; border-bottom: 1px solid var(--filo); display: flex; gap: 14px; justify-content: space-between; }
.desg-item:last-child { border-bottom: 0; }
.desg-item .t { font-weight: 600; font-size: 14.5px; }
.desg-item .s { font-size: 12.5px; color: var(--tinta-3); margin-top: 2px; }
.desg-item .m { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hist { padding: 0; margin: 0; }
.hist li { font-size: 13.5px; color: var(--tinta-2); padding: 8px 0; border-top: 1px solid var(--filo); list-style: none; }
.atras { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; color: #fff; padding: 0; font-weight: 600; font-size: 15px; }
.atras svg { width: 20px; height: 20px; }

/* ── Acceso */
.login { min-height: 100vh; min-height: 100dvh; background: var(--medianoche); color: #fff; display: flex; flex-direction: column; padding: calc(var(--safe-t) + 48px) 24px calc(var(--safe-b) + 28px); position: relative; overflow: hidden; isolation: isolate; }
.login::before { content: ""; position: absolute; inset: -20%; z-index: -1; background: radial-gradient(50% 40% at 20% 10%, rgba(14,25,178,.75), transparent 70%), radial-gradient(45% 35% at 90% 85%, rgba(61,75,230,.35), transparent 70%); }
.login .marca { text-align: center; margin-bottom: 34px; }
.login .logo-completo { width: 76px; height: 66px; color: #fff; margin: 0 auto 22px; display: block; }
.login h1 { margin: 0; font-size: 26px; letter-spacing: -.025em; font-weight: 750; }
.login p { margin: 6px 0 0; color: rgba(255,255,255,.6); font-size: 15px; }
.quien { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; max-width: 440px; margin: 0 auto; width: 100%; }
.quien button { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); color: #fff; border-radius: 18px; padding: 16px 10px 14px; text-align: center; font-weight: 650; }
.quien button .avatar { margin: 0 auto 10px; width: 42px; height: 42px; font-size: 16px; background: rgba(255,255,255,.1); color: #fff; }
.quien button .p { display: block; font-size: 12px; color: rgba(255,255,255,.5); margin-top: 2px; font-weight: 500; }
.login .avatar-grande { width: 68px; height: 68px; border-radius: 50%; margin: 0 auto 18px; display: grid; place-items: center; font-size: 26px; font-weight: 750; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); }
.pin-box { max-width: 300px; margin: 0 auto; width: 100%; text-align: center; }
.pin-dots { display: flex; justify-content: center; gap: 16px; margin: 4px 0 10px; }
.pin-dots i { width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.45); transition: background-color .15s, transform .15s; }
.pin-dots i.on { background: #fff; border-color: #fff; transform: scale(1.08); }
.pin-err { min-height: 22px; color: #fca5a5; font-size: 13.5px; margin-bottom: 10px; }
.teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 12px; }
.teclado button { height: 68px; width: 68px; border-radius: 50%; margin: 0 auto; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.06); color: #fff; font-size: 27px; font-weight: 500; }
.teclado button:active { background: rgba(255,255,255,.2); }
.teclado button.txt { background: none; border: 0; font-size: 14px; font-weight: 600; color: rgba(255,255,255,.7); }
.shake { animation: sh .35s; }
@keyframes sh { 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }

/* ── Captura */
.limite { display: flex; gap: 14px; align-items: center; }
.limite .cal { width: 50px; height: 54px; border-radius: 14px; background: var(--medianoche); color: #fff; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.limite .cal b { font-size: 21px; font-weight: 800; }
.limite .cal span { font-size: 11px; font-weight: 600; margin-top: 3px; color: rgba(255,255,255,.65); }
.limite.vencido .cal { background: var(--mal); }
.cap-item { display: flex; align-items: center; gap: 12px; padding: 15px 16px; background: var(--papel); border-radius: var(--r-l); box-shadow: var(--sombra); margin-bottom: 8px; width: 100%; border: 1px solid var(--filo); text-align: left; }
.cap-item .izq { flex: 1; min-width: 0; }
.cap-item .nm { font-weight: 650; font-size: 15px; }
.cap-item .s { font-size: 12.5px; color: var(--tinta-3); margin-top: 2px; }
.est { font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
.est-pendiente { background: var(--neutro-s); color: var(--neutro); }
.est-borrador { background: var(--aviso-s); color: var(--aviso); }
.est-enviado, .est-importado { background: var(--bien-s); color: var(--bien); }
.chev { color: var(--tinta-3); width: 18px; height: 18px; flex: none; }
.campo { margin-bottom: 16px; }
.campo label { display: block; font-size: 13.5px; font-weight: 600; color: var(--tinta-2); margin-bottom: 7px; }
.campo .ref { font-size: 12.5px; color: var(--tinta-3); margin-top: 5px; }
.inp { width: 100%; border: 1px solid var(--filo); background: var(--porcelana); border-radius: var(--r-m); padding: 13px 14px; font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; outline: none; transition: border-color .15s, background-color .15s, box-shadow .15s; }
.inp:focus { border-color: var(--cobalto); background: var(--papel); box-shadow: 0 0 0 4px var(--acc-soft); }
.inp.txt { font-size: 15px; font-weight: 500; }
.inp-pre { position: relative; }
.inp-pre > span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--tinta-3); font-size: 18px; font-weight: 600; pointer-events: none; }
.inp-pre .inp { padding-left: 29px; }
.grupo-t { font-size: 14px; color: var(--tinta); font-weight: 700; margin: 20px 0 10px; }
.renglon { border: 1px solid var(--filo); border-radius: var(--r-m); padding: 10px 10px 10px 36px; margin-bottom: 8px; position: relative; }
.renglon .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.renglon .grid .full { grid-column: 1 / -1; }
.renglon label { font-size: 11.5px; font-weight: 600; color: var(--tinta-3); display: block; margin-bottom: 3px; }
.renglon .inp { padding: 8px 10px; font-size: 15px; border-radius: 10px; }
.renglon .inp-pre > span { font-size: 15px; left: 10px; }
.renglon .inp-pre .inp { padding-left: 22px; }
.renglon .quitar { position: absolute; bottom: 8px; left: 3px; border: 0; background: none; color: var(--tinta-3); width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; }
.renglon .quitar svg { width: 16px; height: 16px; }
.renglon .linea { font-size: 13px; color: var(--tinta-2); margin-top: 8px; text-align: right; font-weight: 600; }
.renglon .num-r { position: absolute; left: 0; top: 13px; width: 36px; text-align: center; font-size: 11.5px; font-weight: 700; color: var(--tinta-3); }
.btn { border: 0; border-radius: 14px; padding: 14px 16px; font-weight: 700; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; text-decoration: none; }
.btn svg { width: 18px; height: 18px; }
.btn-p { background: var(--cobalto); color: #fff; box-shadow: 0 10px 22px -12px rgba(14,25,178,.8); }
.btn-s { background: var(--acc-soft); color: var(--cobalto); }
.btn-g { background: var(--neutro-s); color: var(--tinta); }
.btn-d { background: var(--mal-s); color: var(--mal); }
.btn:disabled { opacity: .5; }
.btn-bloque { width: 100%; }
.btn-chico { padding: 8px 13px; font-size: 13.5px; border-radius: 11px; }
.acciones { position: fixed; left: 12px; right: 12px; bottom: calc(10px + var(--safe-b)); z-index: 25; max-width: 520px; margin: 0 auto; padding: 8px; display: flex; gap: 8px; border-radius: 22px; background: rgba(255,255,255,.86); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border: 1px solid var(--filo); box-shadow: 0 18px 40px -18px rgba(5,10,51,.4); }
@media (prefers-color-scheme: dark) { .acciones { background: rgba(11,18,56,.88); } .btn-p { background: #3d4be6; } .det-head .valor { color: #a3abff; } }
.acciones .btn { flex: 1; }
.total-vivo { position: sticky; top: calc(var(--safe-t) + 70px); z-index: 5; display: block; background: var(--medianoche); color: #fff; border-radius: var(--r-l); padding: 14px 16px; margin-bottom: 14px; box-shadow: 0 16px 30px -20px rgba(5,10,51,.8); }
.total-vivo .et { font-size: 12.5px; color: rgba(255,255,255,.6); font-weight: 600; }
.total-vivo .valor { font-size: 24px; font-weight: 800; letter-spacing: -.03em; }
.total-vivo .prev { font-size: 12.5px; color: rgba(255,255,255,.6); text-align: right; }
.total-vivo .prev b { color: #fff; }
.derivados { display: grid; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.12); }
.derivados div { display: flex; justify-content: space-between; font-size: 14px; color: rgba(255,255,255,.75); }
.derivados b { font-variant-numeric: tabular-nums; color: #fff; }

/* ── Administración */
.adm-u { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-top: 1px solid var(--filo); }
.adm-u:first-of-type { border-top: 0; padding-top: 0; }
.adm-u .nm { flex: 1; min-width: 0; }
.adm-u .nm b { display: block; font-size: 15px; }
.adm-u .nm span { font-size: 12.5px; color: var(--tinta-3); }
.sel { width: 100%; border: 1px solid var(--filo); background: var(--porcelana); border-radius: 10px; padding: 8px 10px; font-size: 14px; font-weight: 600; }
.asig { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--filo); font-size: 14.5px; }
.asig:first-of-type { border-top: 0; }
.asig .nm { flex: 1; }
.asig .sel { width: 130px; flex: none; }
.modal-bg { position: fixed; inset: 0; background: rgba(5,10,51,.55); backdrop-filter: blur(4px); z-index: 50; display: flex; align-items: flex-end; justify-content: center; animation: aparece .2s ease; opacity: 1; }
.modal { background: var(--papel); width: 100%; max-width: 520px; border-radius: 26px 26px 0 0; padding: 22px 20px calc(20px + var(--safe-b)); max-height: 90vh; overflow: auto; animation: sube .28s cubic-bezier(.2,.8,.2,1); }
@keyframes sube { from { transform: translateY(40px); opacity: 0; } }
.modal h3 { margin: 0 0 14px; font-size: 20px; letter-spacing: -.02em; }

/* Análisis redactado */
.ia-card { border-left: 3px solid var(--cobalto); }
.ia-texto { white-space: pre-wrap; font-size: 15px; color: var(--tinta-2); line-height: 1.6; max-width: 64ch; }
.ia-meta { font-size: 12.5px; color: var(--tinta-3); margin-top: 12px; }

#toast { position: fixed; left: 50%; bottom: calc(96px + var(--safe-b)); transform: translateX(-50%) translateY(16px); background: var(--medianoche); color: #fff; padding: 11px 18px; border-radius: 14px; font-size: 14px; font-weight: 600; opacity: 0; pointer-events: none; transition: .25s; z-index: 60; max-width: calc(100% - 32px); text-align: center; box-shadow: 0 16px 30px -14px rgba(5,10,51,.6); }
#toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }
.vacio { text-align: center; color: var(--tinta-3); padding: 30px 10px; }
.act { padding: 0; margin: 0; }
.act li { display: flex; gap: 8px; font-size: 14px; color: var(--tinta-2); padding: 10px 0; border-top: 1px solid var(--filo); list-style: none; }
.act li:first-child { border-top: 0; padding-top: 0; }
.act .t { color: var(--tinta-3); margin-left: auto; white-space: nowrap; font-size: 12.5px; }
.acum { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.acum .et { font-size: 13px; color: var(--tinta-2); font-weight: 600; }
.acum .v { font-size: 24px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; margin-top: 2px; }
.pie-marca { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--tinta-3); font-size: 12.5px; margin: 28px 0 0; }
.pie-marca svg { width: 22px; height: 19px; color: var(--platino); }
@media (min-width: 700px) { .heroes { grid-template-columns: repeat(4, 1fr); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ── Presentación para junta */
.junta { min-height: 100vh; background: #e9ebf2; }
@media (prefers-color-scheme: dark) { .junta { background: #02041a; } }
.j-barra { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 10px; padding: calc(var(--safe-t) + 10px) 16px 10px; background: var(--medianoche); color: #fff; flex-wrap: wrap; }
.j-barra .tt { flex: 1; min-width: 160px; }
.j-barra .tt b { display: block; font-size: 16px; }
.j-barra .tt span { font-size: 12.5px; color: rgba(255,255,255,.6); }
.j-barra .btn { padding: 10px 14px; font-size: 14px; border-radius: 12px; }
.j-barra .btn-g { background: rgba(255,255,255,.1); color: #fff; }
.j-lista { max-width: 1100px; margin: 0 auto; padding: 18px 14px 60px; display: grid; gap: 16px; }
.j-marco { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; box-shadow: 0 20px 40px -24px rgba(5,10,51,.5); background: #f4f5f9; }
.j-marco > .js { position: absolute; left: 0; top: 0; transform: scale(var(--k, .3)); transform-origin: 0 0; }

.js { width: 1280px; height: 720px; position: relative; overflow: hidden; background: #f4f5f9; color: #121a3a; padding: 52px 64px; font-family: var(--f); isolation: isolate; }
.js.osc { background: #050a33; color: #fff; }
.js .j-glow { position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 70% at 0% 0%, rgba(14,25,178,.75), transparent 62%), radial-gradient(45% 50% at 100% 100%, rgba(61,75,230,.35), transparent 70%); }
.js .j-h { font-size: 40px; font-weight: 800; letter-spacing: -.03em; margin: 0 0 30px; }
.js .mu { color: #8a90a8; }
.j-pie { position: absolute; left: 64px; right: 64px; bottom: 26px; display: flex; align-items: center; gap: 10px; font-size: 13px; color: #8a90a8; font-weight: 500; }
.j-pie.osc { color: rgba(255,255,255,.45); }
.j-pie .j-mono svg { width: 26px; height: 16px; display: block; color: #c5cadb; }
.j-pie.osc .j-mono svg { color: rgba(255,255,255,.4); }
.j-pie .j-n { margin-left: auto; font-variant-numeric: tabular-nums; }
.portada { display: flex; flex-direction: column; justify-content: space-between; padding: 72px 80px; }
.portada .j-logo svg, .cierre .j-logo svg { width: 120px; height: 104px; color: #fff; display: block; }
.j-port-t .j-k { font-size: 22px; color: rgba(255,255,255,.65); font-weight: 500; }
.j-port-t h1 { font-size: 96px; line-height: 1; margin: 10px 0 14px; letter-spacing: -.045em; font-weight: 800; }
.j-port-t p { font-size: 22px; margin: 0; color: rgba(255,255,255,.8); }
.j-port-f { font-size: 16px; color: rgba(255,255,255,.75); font-weight: 600; }
.j-port-f span { font-weight: 400; color: rgba(255,255,255,.5); font-size: 14px; }
.j-badge { font-size: 18px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.j-badge::before { content: ""; width: 11px; height: 11px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 6px rgba(255,255,255,.07); }
.j-titular { font-size: 46px; line-height: 1.1; letter-spacing: -.03em; font-weight: 800; margin: 18px 0 16px; max-width: 1050px; }
.j-resumen { font-size: 19px; line-height: 1.55; color: rgba(255,255,255,.72); margin: 0; max-width: 1080px; }
.j-alambre { position: absolute; left: 72px; right: 72px; bottom: 60px; }
.j-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.j-tile { background: #fff; border: 1px solid #e3e5ee; border-radius: 20px; padding: 26px 24px; min-height: 250px; }
.j-tl { font-size: 17px; font-weight: 700; color: #4a5272; }
.j-tv { font-size: 50px; font-weight: 800; letter-spacing: -.04em; margin: 18px 0 12px; white-space: nowrap; }
.j-tp { font-size: 14.5px; color: #8a90a8; margin-top: 14px; line-height: 1.4; }
.jd { display: inline-block; font-size: 15px; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.jd.t-bien { background: #e2f3ec; color: #0f7a55; } .jd.t-mal { background: #fbe8e8; color: #b4232a; } .jd.t-neutro { background: #eceef4; color: #646b85; }
.j-acum { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 40px; padding-top: 26px; border-top: 1px solid #e3e5ee; }
.j-acum span { display: block; font-size: 15px; color: #8a90a8; font-weight: 600; }
.j-acum b { font-size: 34px; font-weight: 800; letter-spacing: -.03em; color: #0e19b2; }
.j-bloque { display: grid; grid-template-columns: 1fr 520px; gap: 34px; align-items: start; }
.j-tabla { width: 100%; border-collapse: collapse; font-size: 17px; background: #fff; border-radius: 16px; overflow: hidden; }
.j-tabla th { font-size: 13.5px; color: #8a90a8; padding: 14px 14px 10px; text-align: right; border-bottom: 1px solid #e3e5ee; }
.j-tabla th:first-child { text-align: left; }
.j-tabla td { padding: 11px 14px; border-bottom: 1px solid #eef0f5; font-weight: 600; }
.j-tabla td.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.j-tabla td.mu { font-weight: 500; }
.j-tabla tr:last-child td { border-bottom: 0; }
.j-tabla.denso { font-size: 14.5px; } .j-tabla.denso td { padding: 7.5px 12px; } .j-tabla.denso .jd { font-size: 12.5px; padding: 2px 8px; }
.j-tabla .jd { font-size: 13.5px; }
.j-graf { background: #fff; border-radius: 16px; padding: 18px 16px 8px; border: 1px solid #e3e5ee; }
.j-graf svg { width: 100%; height: auto; display: block; }
.j-gt { display: flex; gap: 16px; flex-wrap: wrap; font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.j-gt i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; }
.j-gt .c0 { background: #0e19b2; } .j-gt .c1 { background: #8e98f0; } .j-gt .c2 { background: #c5cadb; }
.j-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.j-col { border-top: 4px solid; padding-top: 16px; }
.j-col.neg { border-color: #b4232a; } .j-col.vig { border-color: #d4920f; } .j-col.pos { border-color: #0f7a55; }
.j-col h3 { font-size: 22px; margin: 0 0 14px; }
.j-col ul { margin: 0; padding-left: 20px; }
.j-col li { font-size: 16.5px; line-height: 1.45; color: #4a5272; margin-bottom: 12px; }
.j-ia { white-space: pre-wrap; font-size: 17px; line-height: 1.6; color: #4a5272; column-count: 2; column-gap: 48px; max-height: 520px; overflow: hidden; }
.cierre { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; }
.cierre p { color: rgba(255,255,255,.6); font-size: 18px; margin: 0; }

/* Modo presentar */
.presentando { background: #000; overflow: hidden; }
.presentando .j-barra { display: none; }
.presentando .j-lista { position: fixed; inset: 0; max-width: none; padding: 0; display: block; }
.presentando .j-marco { display: none; position: absolute; left: 50%; top: 50%; width: calc(1280px * var(--kp)); height: calc(720px * var(--kp)); transform: translate(-50%, -50%); border-radius: 0; aspect-ratio: auto; box-shadow: none; }
.presentando .j-marco.on { display: block; }
.presentando .j-marco > .js { transform: scale(var(--kp)); }
.j-ctl { display: none; }
.presentando .j-ctl { display: flex; position: fixed; bottom: 16px; right: 16px; z-index: 20; gap: 8px; opacity: .25; transition: opacity .2s; }
.presentando .j-ctl:hover { opacity: 1; }
.j-ctl button { background: rgba(255,255,255,.12); color: #fff; border: 0; border-radius: 10px; padding: 8px 12px; font-weight: 600; }

@media print {
  @page { size: 13.333in 7.5in; margin: 0; }
  body, .junta { background: #fff !important; }
  .j-barra, .j-ctl, #toast { display: none !important; }
  .j-lista { display: block; padding: 0; max-width: none; }
  .j-marco { width: 1280px; height: 720px; aspect-ratio: auto; border-radius: 0; box-shadow: none; page-break-after: always; break-after: page; }
  .j-marco > .js { transform: none; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ── Presentación editorial */
.js .e-k { display: flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 700; color: #0e19b2; }
.js .e-k::before { content: ""; width: 30px; height: 4px; background: currentColor; border-radius: 2px; }
.js.osc .e-k { color: rgba(255,255,255,.75); }
.js .e-pie { position: absolute; left: 64px; right: 64px; bottom: 28px; display: flex; align-items: center; gap: 12px; font-size: 13px; color: #8a90a8; font-weight: 500; }
.js .e-pie .e-mono svg { width: 28px; height: 17px; display: block; color: #c5cadb; }
.js .e-pie b { margin-left: auto; color: #121a3a; font-size: 14px; font-variant-numeric: tabular-nums; }
.js .jp { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 800; padding: 6px 13px; border-radius: 999px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.js .jp.g { font-size: 20px; padding: 8px 16px; }
.js .jp.t-bien { background: #e2f3ec; color: #0f7a55; } .js .jp.t-mal { background: #fbe8e8; color: #b4232a; } .js .jp.t-neutro { background: #eceef4; color: #646b85; }
.js.osc .jp.t-bien { background: rgba(110,231,183,.14); color: #6ee7b7; } .js.osc .jp.t-mal { background: rgba(252,165,165,.14); color: #fca5a5; } .js.osc .jp.t-neutro { background: rgba(255,255,255,.1); color: #c9cde6; }
.js .e-sub { display: flex; align-items: center; gap: 16px; font-size: 18px; color: #8a90a8; font-weight: 500; }
.js.osc .e-sub { color: rgba(255,255,255,.6); }

.e-portada { padding: 56px 72px; }
.e-portada .e-top { display: flex; justify-content: space-between; align-items: flex-start; }
.e-portada .e-logo svg, .e-cierre .e-logo svg { width: 92px; height: 80px; color: #fff; display: block; }
.e-portada .e-tag { text-align: right; font-size: 16px; line-height: 1.4; color: rgba(255,255,255,.7); font-weight: 600; }
.e-portada h1 { font-size: 168px; line-height: .9; letter-spacing: -.055em; font-weight: 800; margin: 44px 0 0; }
.e-portada h1 span { display: block; color: rgba(125,136,255,.55); font-size: 168px; }
.e-portada .e-wire, .e-cierre .e-wire { position: absolute; left: 0; right: 0; bottom: 64px; }
.e-portada .e-firma { position: absolute; left: 72px; bottom: 34px; font-size: 15px; color: rgba(255,255,255,.55); font-weight: 600; }

.e-frase { background: #f4f5f9; padding: 64px 72px; display: flex; flex-direction: column; }
.e-frase .e-k { margin-bottom: auto; }
.e-frase .e-estado { margin-bottom: auto; }
.e-frase .e-marca-agua { position: absolute; right: -60px; top: 150px; width: 640px; color: #e6e8f2; z-index: -1; }
.e-frase .e-marca-agua svg { width: 100%; height: auto; display: block; }
.e-frase h2 { font-size: 84px; line-height: 1.0; letter-spacing: -.045em; font-weight: 800; margin: 0 0 40px; max-width: 1000px; text-wrap: balance; }
.e-frase .e-estado { display: inline-flex; align-items: center; gap: 12px; font-size: 22px; font-weight: 700; color: #4a5272; }
.e-frase .e-estado i { width: 14px; height: 14px; border-radius: 50%; }

.e-hero { background: #fff; padding: 56px 64px; }
.e-hero .e-acum { position: absolute; right: 64px; top: 58px; font-size: 17px; color: #8a90a8; }
.e-hero .e-acum b { color: #121a3a; font-size: 22px; margin-left: 8px; }
.js .e-num { font-size: 168px; line-height: 1; font-weight: 800; letter-spacing: -.055em; color: #0e19b2; margin: 22px 0 16px; font-variant-numeric: tabular-nums; }
.js .e-num.blanco { color: #fff; }
.e-hero .e-barras { position: absolute; left: 64px; right: 64px; bottom: 70px; }
.e-hero .e-barras svg { width: 100%; height: auto; display: block; }

.e-dos { padding: 56px 64px; }
.e-pares { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 40px; }
.e-mitad { padding-right: 48px; }
.e-mitad + .e-mitad { padding: 0 0 0 48px; border-left: 1px solid #e3e5ee; }
.js .e-l { font-size: 22px; font-weight: 700; color: #4a5272; }
.e-mitad .e-num2 { font-size: 128px; font-weight: 800; letter-spacing: -.05em; line-height: 1; margin: 14px 0 16px; font-variant-numeric: tabular-nums; }
.e-mitad .e-sub { font-size: 16px; }
.e-mitad .e-spark { margin-top: 28px; }
.e-mitad .e-spark svg { width: 100%; height: auto; display: block; }

.e-caja { padding: 56px 72px; }
.e-meses { display: flex; gap: 16px; margin: 48px 0 26px; }
.e-meses i { position: relative; width: 150px; height: 104px; border-radius: 14px; background: rgba(255,255,255,.09); overflow: hidden; }
.e-meses i::after { content: ""; position: absolute; inset: 0; width: calc(var(--f) * 100%); background: #fff; border-radius: 14px; }
.js .e-cap { font-size: 21px; color: rgba(255,255,255,.62); }
.js .e-cap b { color: #fff; }

.e-ccc { padding: 56px 64px; }
.e-ccc h3 { font-size: 42px; font-weight: 800; letter-spacing: -.03em; margin: 26px 0 50px; max-width: 900px; line-height: 1.1; }
.e-ec { display: flex; align-items: center; gap: 14px; }
.e-c { flex: 1; background: #fff; border: 1px solid #e3e5ee; border-radius: 22px; padding: 26px 24px 24px; min-height: 290px; display: flex; flex-direction: column; }
.e-c .e-cl { font-size: 18px; font-weight: 700; color: #4a5272; }
.e-c .e-cv { font-size: 104px; font-weight: 800; letter-spacing: -.05em; line-height: 1; margin: 28px 0 14px; font-variant-numeric: tabular-nums; }
.e-c .e-cv small { font-size: 22px; letter-spacing: 0; font-weight: 600; color: #8a90a8; margin-left: 8px; }
.e-c .jp { align-self: flex-start; margin-top: auto; }
.e-c.fin { background: #0e19b2; border-color: #0e19b2; color: #fff; box-shadow: 0 30px 50px -30px rgba(14,25,178,.8); }
.e-c.fin .e-cl, .e-c.fin .e-cv small { color: rgba(255,255,255,.7); }
.e-c.fin .jp { background: rgba(255,255,255,.16) !important; color: #fff !important; }
.e-op { font-size: 46px; font-weight: 800; color: #c5cadb; }

.e-op4 { padding: 56px 64px; }
.e-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 34px 56px; margin-top: 44px; }
.e-st { border-top: 2px solid #121a3a; padding-top: 16px; }
.e-st .e-l { font-size: 19px; }
.e-st .e-sv { font-size: 86px; font-weight: 800; letter-spacing: -.045em; line-height: 1.05; margin: 10px 0 12px; font-variant-numeric: tabular-nums; }

.e-senales { padding: 56px 64px; }
.e-tres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; margin-top: 52px; }
.e-sen { border-top: 6px solid; padding-top: 20px; }
.e-sen.neg { border-color: #b4232a; } .e-sen.vig { border-color: #c27c0e; } .e-sen.pos { border-color: #0f7a55; }
.e-sen .e-sl { font-size: 20px; font-weight: 800; }
.e-sen.neg .e-sl { color: #b4232a; } .e-sen.vig .e-sl { color: #c27c0e; } .e-sen.pos .e-sl { color: #0f7a55; }
.e-sen p { font-size: 36px; line-height: 1.12; font-weight: 800; letter-spacing: -.025em; margin: 18px 0 18px; color: #121a3a; text-wrap: balance; }
.e-sen span { font-size: 16px; color: #8a90a8; }

.e-cita { padding: 64px 90px; display: flex; flex-direction: column; justify-content: center; }
.e-cita .e-q { position: absolute; left: 70px; top: 30px; font: 800 240px/1 Georgia, serif; color: rgba(125,136,255,.5); }
.e-cita blockquote { margin: 40px 0 34px; font-size: 52px; line-height: 1.15; font-weight: 800; letter-spacing: -.03em; max-width: 1080px; text-wrap: balance; }

.e-anexo { padding: 56px 64px; }
.e-tablas { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 22px; }
.e-tablas table { width: 100%; border-collapse: collapse; font-size: 14px; }
.e-tablas td { padding: 5.5px 0; border-bottom: 1px solid #e3e5ee; font-weight: 600; }
.e-tablas td.n { text-align: right; padding-left: 14px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.e-tablas .t-bien { color: #0f7a55; } .e-tablas .t-mal { color: #b4232a; } .e-tablas .t-neutro { color: #8a90a8; }

.e-cierre { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; }
.e-cierre p { color: rgba(255,255,255,.6); font-size: 19px; margin: 0; }

/* Animaciones al presentar */
@media (prefers-reduced-motion: no-preference) {
  .presentando .j-marco.on .a { animation: e-entra .9s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--d, 0) * 140ms + 120ms); }
  .presentando .j-marco.on .wl { stroke-dasharray: 1; animation: e-traza 1.8s cubic-bezier(.65,.05,.25,1) .4s both; }
  .presentando .j-marco.on .wa, .presentando .j-marco.on .wp { animation: e-aparece .8s ease 1.8s both; }
  .presentando .j-marco.on .bb { transform-box: fill-box; transform-origin: bottom; animation: e-crece .9s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * 60ms + 500ms); }
  .presentando .j-marco.on .e-meses i::after { animation: e-llena 1.1s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * 140ms + 700ms); transform-origin: left; }
  .presentando .j-marco.on { animation: e-aparece .5s ease both; }
}
@keyframes e-entra { from { opacity: 0; transform: translateY(28px); } }
@keyframes e-traza { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes e-aparece { from { opacity: 0; } }
@keyframes e-crece { from { transform: scaleY(0); } }
@keyframes e-llena { from { transform: scaleX(0); } }

/* Carga del Excel */
.soltar { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; min-height: 230px; padding: 28px 22px; border: 2px dashed var(--platino); border-radius: var(--r-xl); background: var(--papel); cursor: pointer; transition: border-color .2s, background-color .2s; }
.soltar.sobre, .soltar:hover { border-color: var(--cobalto); background: var(--acc-soft); }
.soltar b { font-size: 18px; letter-spacing: -.01em; }
.soltar span { color: var(--tinta-3); font-size: 14px; max-width: 34ch; }
.soltar .soltar-ic { width: 54px; height: 54px; border-radius: 16px; background: var(--medianoche); color: #fff; display: grid; place-items: center; margin-bottom: 6px; }
.soltar .soltar-ic svg { width: 24px; height: 24px; }
.chips-d { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip-d { font-size: 12.5px; font-weight: 600; background: var(--acc-soft); color: var(--cobalto); padding: 5px 10px; border-radius: 999px; }