/* OpenFin v3 — app bancaria con franja marina. Hanken Grotesk (OFL, autohospedada), cifras tabulares.
   Reglas: sin degradados; colores solo como variables; un acento (cian brillante de la marca CSI) para acciones;
   verde/ámbar/rojo solo para estado y siempre con ícono y texto; series de gráficas validadas (dataviz). */
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("fonts/hanken-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("fonts/hanken-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  color-scheme: light;
  /* marino: el color de la casa; cian: el acento */
  --navy: #0b1f33; --navy-2: #122c47; --navy-3: #1a3a5c; --on-navy: #ffffff; --on-navy-2: #afc3d6; --navy-line: #27456a;
  --accent: #22c3f0; --accent-hover: #4fd1f5; --accent-ink: #0b1f33; --accent-deep: #0b93c8; --accent-soft: #d9f3fc;
  --ground: #eef2f6; --surface: #ffffff; --raised: #f4f7fa; --hundido: #e3e9ef;
  --ink: #0b1f33; --ink-2: #4a5a6b; --ink-3: #6b7a8a; --line: #dbe3eb; --line-strong: #8b9aab;
  --serie-1: #0b93c8; --serie-2: #d9672c; --pista: #e3e9ef;
  --ok: #1b7a46; --ok-soft: #dcf3e4; --warn: #8a5900; --warn-soft: #fcefd0; --bad: #b32820; --bad-soft: #fbe3e0;
  --select: #bfe9f7; --sombra: 0 1px 2px rgba(11, 31, 51, .06), 0 10px 28px rgba(11, 31, 51, .08);
  --font: "Hanken Grotesk", "Helvetica Neue", sans-serif;
  --t-1: .875rem; --t0: 1rem; --t1: 1.25rem; --t2: 1.75rem; --t3: 2.5rem; --t4: 4.25rem;
  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 5rem;
  --r: 20px; --r-sm: 12px; --ancho: 76rem; --medida: 66ch;
  --cat-1: #0b93c8; --cat-2: #d9672c; --cat-3: #6b5bd2; --cat-4: #2a8f6e; --cat-5: #b8536f; --cat-6: #8b9aab;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --navy: #081a2c; --navy-2: #0f2238; --navy-3: #16304c; --on-navy: #f2f7fb; --on-navy-2: #a9bed2; --navy-line: #22405f;
    --accent: #2fc6f2; --accent-hover: #63d6f6; --accent-ink: #06202f; --accent-deep: #2a9fc8; --accent-soft: #0f3346;
    --ground: #0b1622; --surface: #172838; --raised: #1f3245; --hundido: #10202f;
    --ink: #e9f0f6; --ink-2: #a8b8c8; --ink-3: #8798aa; --line: #26394d; --line-strong: #6e8296;
    --serie-1: #2a9fc8; --serie-2: #c9784a; --pista: #233548;
    --ok: #72d39b; --ok-soft: #123222; --warn: #f3bd58; --warn-soft: #372a11; --bad: #ff9088; --bad-soft: #3d1916;
    --select: #1b4a5c; --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .35);
    --cat-1: #2a9fc8; --cat-2: #c9784a; --cat-3: #9b8df0; --cat-4: #5fc39a; --cat-5: #e08aa2; --cat-6: #6e8296;
  }
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font); font-size: var(--t0); line-height: 1.5; -webkit-font-smoothing: antialiased; }
::selection { background: var(--select); color: var(--ink); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
a { color: var(--accent-deep); text-underline-offset: .2em; }
h1, h2, h3 { margin: 0; line-height: 1.12; letter-spacing: -.02em; text-wrap: balance; }
h1 { font-size: var(--t3); font-weight: 800; }
h2 { font-size: var(--t1); font-weight: 750; letter-spacing: -.01em; }
h3 { font-size: var(--t0); font-weight: 700; letter-spacing: 0; }
p { margin: 0; max-width: var(--medida); }
.num, .cifra { font-variant-numeric: tabular-nums; }
.sec { color: var(--ink-2); } .peq { font-size: var(--t-1); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
svg.ico { width: 1.15em; height: 1.15em; vertical-align: -.2em; flex: none; }
.sprite { position: absolute; width: 0; height: 0; }

/* ====== Barra y franja marina ====== */
.barra { background: var(--navy); color: var(--on-navy); }
.barra-int { max-width: var(--ancho); margin: 0 auto; padding: var(--s3) var(--s5); display: flex; align-items: center; gap: var(--s5); min-height: 4.25rem; }
.logo { display: flex; align-items: center; gap: var(--s3); text-decoration: none; color: var(--on-navy); }
.logo img { height: 34px; width: auto; display: block; }
.logo b { font-size: var(--t1); font-weight: 800; letter-spacing: -.02em; padding-left: var(--s3); border-left: 1px solid var(--navy-line); }
.barra nav { display: flex; gap: var(--s1); flex: 1; }
.barra nav a { color: var(--on-navy-2); text-decoration: none; font-weight: 650; padding: var(--s2) var(--s4); border-radius: 999px; }
.barra nav a:hover { background: var(--navy-2); color: var(--on-navy); }
.barra nav a[aria-current="page"] { background: var(--accent); color: var(--accent-ink); }
.usuario { display: flex; align-items: center; gap: var(--s3); }
.avatar { width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-weight: 800; font-size: var(--t-1); }
.usuario .quien { line-height: 1.2; font-size: var(--t-1); color: var(--on-navy-2); } .usuario .quien b { display: block; font-size: var(--t0); color: var(--on-navy); }
.boton-texto { font: inherit; font-weight: 650; color: var(--on-navy-2); background: none; border: 1px solid var(--navy-line); padding: var(--s2) var(--s4); border-radius: 999px; cursor: pointer; }
.boton-texto:hover { background: var(--navy-2); color: var(--on-navy); }

/* Franja: la cifra principal de la vista vive aquí, en marino, y los paneles se montan encima */
.franja { background: var(--navy); color: var(--on-navy); padding: var(--s6) 0 calc(var(--s8) + var(--s5)); }
.franja-int { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--s5); }
.franja .sec, .franja .meta { color: var(--on-navy-2); }
.franja h1 { color: var(--on-navy); }
.franja .volver { color: var(--on-navy-2); margin-bottom: var(--s4); }
.franja .volver:hover { color: var(--on-navy); }
.franja .gigante { color: var(--on-navy); }
.franja .acento { color: var(--accent); }
.franja-dos { display: grid; grid-template-columns: 1fr auto; gap: var(--s6); align-items: end; }
main { max-width: var(--ancho); margin: calc(-1 * var(--s8)) auto 0; padding: 0 var(--s5) var(--s8); position: relative; }
main.sin-franja { margin-top: var(--s6); }
.volver { display: inline-flex; align-items: center; gap: var(--s2); color: var(--ink-2); text-decoration: none; font-weight: 650; }
.volver .ico { transform: scaleX(-1); }

/* ====== Superficies ====== */
.panel { background: var(--surface); border-radius: var(--r); box-shadow: var(--sombra); padding: var(--s6); }
.bloque { margin-top: var(--s5); }
.panel-cab { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s5); flex-wrap: wrap; }
.panel.marino { background: var(--navy-2); color: var(--on-navy); }
.panel.marino .sec, .panel.marino .e, .panel.marino .k { color: var(--on-navy-2); }
.panel.marino h2 { color: var(--on-navy); }

/* ====== Botones: UNA sola regla. Primario = cian relleno; secundario = contorno; mismo alto y radio siempre ====== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); font: inherit; font-weight: 750; height: 3.25rem;
  padding: 0 var(--s6); border-radius: 999px; border: 2px solid var(--accent); background: var(--accent); color: var(--accent-ink);
  text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .15s ease-out, border-color .15s ease-out, transform .15s ease-out; }
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-ink); }
.btn:active { transform: scale(.98); }
.btn.sec { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn.sec:hover { background: var(--hundido); border-color: var(--ink); color: var(--ink); }
.franja .btn.sec, .panel.marino .btn.sec { color: var(--on-navy); border-color: var(--on-navy-2); }
.franja .btn.sec:hover, .panel.marino .btn.sec:hover { background: var(--navy-3); border-color: var(--on-navy); color: var(--on-navy); }
.btn.peligro { background: transparent; color: var(--bad); border-color: var(--bad); }
.btn.peligro:hover { background: var(--bad-soft); }
.btn[aria-disabled="true"] { background: var(--hundido); border-color: var(--hundido); color: var(--ink-3); cursor: not-allowed; }
.btn.chico { height: 2.5rem; padding: 0 var(--s4); font-size: var(--t-1); border-width: 1.5px; }
.btn.ancho { width: 100%; }
.acciones { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center; }

/* ====== Píldoras de estado (siempre ícono + texto) ====== */
.pill { display: inline-flex; align-items: center; gap: .4em; padding: .35em .85em; border-radius: 999px; font-size: var(--t-1); font-weight: 700;
  background: var(--hundido); color: var(--ink-2); white-space: nowrap; }
.pill.ok { background: var(--ok-soft); color: var(--ok); } .pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.bad { background: var(--bad-soft); color: var(--bad); } .pill.acento { background: var(--accent-soft); color: var(--accent-deep); }
.franja .pill, .panel.marino .pill { background: var(--navy-3); color: var(--on-navy); }
.franja .pill.ok, .panel.marino .pill.ok { background: var(--ok-soft); color: var(--ok); }
.franja .pill.acento, .panel.marino .pill.acento { background: var(--accent); color: var(--accent-ink); }
.pills { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* ====== Certeza de un dato (forma distinta, nunca solo color) ====== */
.cert { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; border: 1.5px solid currentColor; opacity: .75; vertical-align: .05em; margin-left: .4em; }
.cert.f-verificado { background: currentColor; }
.cert.f-terceros { border-radius: 1px; transform: rotate(45deg); width: .5rem; height: .5rem; }
.cert.f-pendiente { border-style: dashed; }
.leyenda-cert { display: flex; gap: var(--s5); flex-wrap: wrap; font-size: var(--t-1); color: var(--ink-2); }

/* ====== Insignias de proveedor ====== */
.insignia { width: 3rem; height: 3rem; border-radius: 14px; display: grid; place-items: center; font-weight: 800; font-size: var(--t1); flex: none; color: #fff; }
.insignia.syncfy { background: var(--cat-1); } .insignia.prometeo { background: var(--cat-3); } .insignia.finerio { background: var(--cat-5); }
.insignia.grande { width: 4rem; height: 4rem; border-radius: 18px; font-size: var(--t2); }

/* Logos reales de los proveedores (wordmarks) sobre chip blanco para que se lean en claro, oscuro y sobre la franja */
.logo-prov { display: inline-flex; align-items: center; height: 3.25rem; padding: 0 var(--s4); border-radius: 14px; background: #ffffff; border: 1px solid var(--line); flex: none; }
.logo-prov img { height: 1.6rem; width: auto; display: block; }
.logo-prov.syncfy img { height: 1.9rem; } .logo-prov.finerio img { height: 1.5rem; }
.logo-prov.grande { height: 4rem; padding: 0 var(--s5); border-radius: 18px; border: 0; }
.logo-prov.grande img { height: 2.1rem; } .logo-prov.grande.syncfy img { height: 2.5rem; }
.prov-card .cab { align-items: center; }
/* ====== Inicio ====== */
.gigante { font-size: var(--t4); font-weight: 800; line-height: .95; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.gigante + .lbl { font-size: var(--t1); font-weight: 650; margin-top: var(--s2); }
.tres { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
.prov-card { display: grid; gap: var(--s4); padding: var(--s5); border-radius: var(--r); background: var(--surface); box-shadow: var(--sombra); color: var(--ink); text-decoration: none;
  transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease-out; position: relative; }
.prov-card:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(11,31,51,.08), 0 16px 36px rgba(11,31,51,.14); }
.prov-card.lider { outline: 3px solid var(--accent); outline-offset: -3px; }
.prov-card .cab { display: flex; align-items: center; gap: var(--s3); }
.prov-card .cab h2 { font-size: var(--t1); } .prov-card .cab .sec { font-size: var(--t-1); }
.prov-card .n { font-size: var(--t3); font-weight: 800; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.prov-card .n small { font-size: var(--t-1); font-weight: 600; color: var(--ink-2); letter-spacing: 0; display: block; margin-top: var(--s1); }
.prov-card .pista { height: .6rem; border-radius: 999px; background: var(--pista); overflow: hidden; }
.prov-card .pista i { display: block; height: 100%; border-radius: 999px; }
.prov-card .btn { justify-self: start; margin-top: auto; }
.prov-card { grid-template-rows: auto auto auto 1fr auto auto; min-height: 31rem; }
.prov-card .datos.compacta li { padding: var(--s2) 0; font-size: var(--t-1); align-items: baseline; }
.prov-card .datos.compacta .k { flex: none; }
.prov-card .datos.compacta .v { font-weight: 700; text-align: right; }
.prov-card .datos.compacta .v .cert { white-space: nowrap; }
.notas-pie { margin-top: var(--s5); display: grid; gap: var(--s2); }
.barras-h { display: grid; gap: var(--s4); }
.barras-h .fila { display: grid; grid-template-columns: 8rem 1fr 3rem; align-items: center; gap: var(--s3); }
.barras-h .pista { height: 1.4rem; background: var(--pista); border-radius: 8px; overflow: hidden; }
.barras-h .pista i { display: block; height: 100%; background: var(--serie-1); border-radius: 0 6px 6px 0; }
.barras-h .v { text-align: right; font-weight: 800; font-size: var(--t1); font-variant-numeric: tabular-nums; }
.semaforo { display: grid; gap: var(--s3); }
.semaforo .fila { display: grid; grid-template-columns: 8rem 1fr 1fr 1fr; gap: var(--s3); align-items: center; padding: var(--s3) 0; border-top: 1px solid var(--line); }
.semaforo .fila:first-child { border-top: 0; }

/* ====== Ficha ====== */
.probar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); }
.opcion { display: grid; gap: var(--s3); align-content: start; padding: var(--s6); border-radius: var(--r); background: var(--surface); box-shadow: var(--sombra); color: var(--ink); text-decoration: none;
  transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease-out; }
a.opcion:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(11,31,51,.08), 0 16px 36px rgba(11,31,51,.14); }
.opcion .icono { width: 3.25rem; height: 3.25rem; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-deep); }
.opcion .icono .ico { width: 1.6rem; height: 1.6rem; }
.opcion h2 { font-size: var(--t2); display: flex; align-items: center; justify-content: space-between; }
.opcion.apagada { background: var(--raised); box-shadow: none; color: var(--ink-3); }
.opcion.apagada .icono { background: var(--hundido); color: var(--ink-3); }
.opcion .pill { justify-self: start; }
.opcion .btn { justify-self: start; margin-top: var(--s2); }
.dos-col { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--s5); margin-top: var(--s5); align-items: start; }
.dos-col > .panel { margin-top: 0; }
.chips-bancos { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chips-bancos span { padding: .5em 1em; border-radius: 999px; background: var(--accent-soft); color: var(--ink); font-weight: 650; }
.datos { list-style: none; margin: 0; padding: 0; }
.datos li { display: flex; justify-content: space-between; gap: var(--s4); padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.datos li:last-child { border-bottom: 0; } .datos .k { color: var(--ink-2); } .datos .v { font-weight: 700; text-align: right; }
.aviso { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s3) var(--s4); border-radius: var(--r-sm); background: var(--warn-soft); color: var(--ink); }
.aviso .ico { color: var(--warn); margin-top: .15em; } .aviso.ok { background: var(--ok-soft); } .aviso.ok .ico { color: var(--ok); }
.avisos { display: grid; gap: var(--s2); list-style: none; padding: 0; margin: var(--s5) 0 0; }
details.fuentes { margin-top: var(--s5); font-size: var(--t-1); color: var(--ink-2); }
details.fuentes summary { cursor: pointer; font-weight: 700; color: var(--accent-deep); padding: var(--s2) 0; }
details.fuentes ol { padding-left: 1.4em; display: grid; gap: var(--s2); }

/* ====== Conectar ====== */
.conectar { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(18rem, 1fr); gap: var(--s5); align-items: start; }
#widget { min-height: 30rem; }
.pista-test { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; margin-top: var(--s3); }
.pista-test code { font-family: inherit; font-weight: 800; background: var(--accent); color: var(--accent-ink); padding: .2em .6em; border-radius: 8px; }
.vivo { margin-top: var(--s3); min-height: 1.5em; color: var(--ink-2); font-weight: 650; }
.conexion { display: grid; gap: var(--s3); padding: var(--s4) 0; border-bottom: 1px solid var(--line); }
.conexion:last-child { border-bottom: 0; }
.conexion .t { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); }
.conexion .t b { font-size: var(--t1); }
.vacio { color: var(--ink-2); padding: var(--s4) 0; } .vacio b { display: block; color: var(--ink); margin-bottom: var(--s1); }

/* ====== Cuentas ====== */
.saldo { font-size: var(--t4); font-weight: 800; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.saldo small { font-size: var(--t1); font-weight: 600; letter-spacing: 0; color: var(--on-navy-2); }
.otras-cuentas { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s5); }
.otras-cuentas a { display: grid; padding: var(--s3) var(--s4); border-radius: var(--r-sm); background: var(--navy-2); border: 2px solid var(--navy-3); color: var(--on-navy); text-decoration: none; line-height: 1.3; min-width: 13rem; }
.otras-cuentas a:hover, .otras-cuentas a[aria-current="true"] { border-color: var(--accent); }
.otras-cuentas b { font-variant-numeric: tabular-nums; } .otras-cuentas span { font-size: var(--t-1); color: var(--on-navy-2); }
.meses-pdf { display: flex; gap: var(--s2); flex-wrap: wrap; }
.movs { list-style: none; margin: 0; padding: 0; }
.movs .dia { font-size: var(--t-1); font-weight: 750; color: var(--ink-2); padding: var(--s4) 0 var(--s2); }
.movs .mov { display: grid; grid-template-columns: 2.6rem 1fr auto; gap: var(--s3); align-items: center; padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.movs .mov .circ { width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; background: var(--hundido); color: var(--ink-2); }
.movs .mov.entra .circ { background: var(--accent-soft); color: var(--serie-1); }
.movs .desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .movs .cat { font-size: var(--t-1); color: var(--ink-2); }
.movs .monto { font-weight: 800; font-variant-numeric: tabular-nums; } .movs .entra .monto { color: var(--serie-1); }
.mas { margin-top: var(--s4); }

/* ====== Gráficas ====== */
.grafica svg { width: 100%; height: auto; display: block; overflow: visible; }
.grafica .eje { stroke: var(--line); stroke-width: 1; }
.grafica .tick text, .grafica .etq { fill: var(--ink-3); font-size: 12px; font-family: var(--font); font-variant-numeric: tabular-nums; }
.grafica .val { fill: var(--ink-2); font-size: 11px; font-weight: 700; font-family: var(--font); }
.grafica .s-ingresos { fill: var(--serie-1); } .grafica .s-egresos { fill: var(--serie-2); }
.grafica path:hover { opacity: .8; }
.leyenda { display: flex; gap: var(--s5); font-size: var(--t-1); color: var(--ink-2); font-weight: 650; }
.leyenda i { display: inline-block; width: .8rem; height: .8rem; border-radius: 3px; margin-right: .4em; vertical-align: -.05em; }
.leyenda .l-ingresos { background: var(--serie-1); } .leyenda .l-egresos { background: var(--serie-2); }
details.tabla { margin-top: var(--s4); font-size: var(--t-1); }
details.tabla summary { cursor: pointer; color: var(--accent-deep); font-weight: 700; }
table { width: 100%; border-collapse: collapse; font-size: var(--t-1); margin-top: var(--s3); }
th { text-align: left; color: var(--ink-2); font-weight: 700; padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line-strong); }
td { padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dona { display: grid; grid-template-columns: auto 1fr; gap: var(--s5); align-items: center; }
.dona svg { width: 152px; height: 152px; }
.dona circle.seg { fill: none; stroke-width: 22; transform: rotate(-90deg); transform-origin: center; }
.dona .c-0 { stroke: var(--cat-1); } .dona .c-1 { stroke: var(--cat-2); } .dona .c-2 { stroke: var(--cat-3); } .dona .c-3 { stroke: var(--cat-4); } .dona .c-4 { stroke: var(--cat-5); } .dona .c-5 { stroke: var(--cat-6); }
.dona .centro { font-weight: 800; font-size: 20px; fill: var(--ink); font-family: var(--font); font-variant-numeric: tabular-nums; }
.dona .centro-l { font-size: 11px; fill: var(--ink-2); font-family: var(--font); }
.dona ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.dona li { display: grid; grid-template-columns: .9rem 1fr auto; gap: var(--s2); align-items: center; }
.dona li i { width: .9rem; height: .9rem; border-radius: 3px; }
.dona li .l-0 { background: var(--cat-1); } .dona li .l-1 { background: var(--cat-2); } .dona li .l-2 { background: var(--cat-3); } .dona li .l-3 { background: var(--cat-4); } .dona li .l-4 { background: var(--cat-5); } .dona li .l-5 { background: var(--cat-6); }
.dona li b { font-variant-numeric: tabular-nums; }

/* ====== Perfil ====== */
.veredicto { display: grid; grid-template-columns: auto 1fr; gap: var(--s6); align-items: center; }
.medidor { position: relative; width: 224px; }
.medidor svg { display: block; width: 100%; height: auto; }
.medidor .pista-arco { stroke: var(--navy-3); } .medidor .arco { stroke-linecap: round; }
.medidor .arco.Alto { stroke: var(--ok); } .medidor .arco.Medio { stroke: var(--warn); } .medidor .arco.Bajo { stroke: var(--bad); }
.medidor .score { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-size: var(--t3); font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--on-navy); }
.medidor .score small { font-size: var(--t-1); color: var(--on-navy-2); font-weight: 600; display: block; letter-spacing: 0; margin-top: var(--s1); }
.veredicto h2 { font-size: var(--t2); margin: var(--s3) 0 var(--s2); color: var(--on-navy); }
.veredicto .cuota { margin-top: var(--s4); padding: var(--s4) var(--s5); border-radius: var(--r-sm); background: var(--navy-3); display: inline-grid; }
.veredicto .cuota b { font-size: var(--t2); font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--accent); }
.metricas { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); }
.metricas > div { background: var(--surface); border-radius: var(--r); box-shadow: var(--sombra); padding: var(--s5); }
.metricas .v { font-size: var(--t2); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.metricas > div:first-child { background: var(--accent); color: var(--accent-ink); }
.metricas > div:first-child .k, .metricas > div:first-child .e { color: var(--accent-ink); opacity: .8; }
.metricas .k { color: var(--ink-2); font-weight: 650; font-size: var(--t-1); } .metricas .e { color: var(--ink-2); font-size: var(--t-1); }
.factores { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); }
.factores li { display: grid; grid-template-columns: 1fr auto; gap: var(--s1) var(--s4); }
.factores .barrita { grid-column: 1 / -1; height: .6rem; background: var(--pista); border-radius: 999px; overflow: hidden; }
.factores .barrita i { display: block; height: 100%; background: var(--accent-deep); border-radius: 999px; }
.factores .p { font-weight: 800; font-variant-numeric: tabular-nums; } .factores .d { grid-column: 1 / -1; font-size: var(--t-1); color: var(--ink-2); }

/* ====== Documentos (consentimiento, estado, login, error) ====== */
.documento { max-width: 44rem; }
.documento ol { padding-left: 1.3em; display: grid; gap: var(--s3); margin: var(--s5) 0; }
.check { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s4); border-radius: var(--r-sm); background: var(--accent-soft); font-weight: 650; margin: var(--s5) 0; }
.check input { width: 1.3rem; height: 1.3rem; accent-color: var(--accent-deep); margin-top: .1em; flex: none; }
.login { min-height: 100vh; background: var(--navy); color: var(--on-navy); display: grid; grid-template-columns: 1.1fr 1fr; }
.login-lado { padding: var(--s7) var(--s7); display: grid; align-content: space-between; gap: var(--s6); }
.login-lado .logo { align-self: start; }
.login-lado h1 { font-size: var(--t3); max-width: 16ch; }
.login-lado h1 em { font-style: normal; color: var(--accent); }
.login-lado .puntos { display: grid; gap: var(--s3); color: var(--on-navy-2); max-width: 40ch; }
.login-lado .puntos div { display: flex; gap: var(--s3); align-items: flex-start; } .login-lado .puntos .ico { color: var(--accent); margin-top: .15em; }
.login-forma { display: grid; place-items: center; padding: var(--s6); background: var(--ground); color: var(--ink); }
.login-forma .panel { width: min(26rem, 100%); display: grid; gap: var(--s4); }
.login-arte svg { width: 100%; max-width: 30rem; height: auto; display: block; }
.login-arte .a1 { fill: var(--serie-1); } .login-arte .a2 { fill: var(--serie-2); } .login-arte .a3 { fill: var(--navy-3); } .login-arte .l { stroke: var(--accent); fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
select { font: inherit; padding: var(--s2) var(--s3); border: 1.5px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); min-height: 3rem; }
.ec { max-width: 54rem; margin: 0 auto; }
.ec-cab { display: flex; justify-content: space-between; gap: var(--s5); padding-bottom: var(--s4); margin-bottom: var(--s5); border-bottom: 3px solid var(--navy); }
.ec-cab img { height: 34px; }
.ec-totales { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); margin: var(--s5) 0; }
.ec-totales > div { padding: var(--s3) var(--s4); background: var(--raised); border-radius: var(--r-sm); }
.ec-totales > div:last-child { background: var(--navy); color: var(--on-navy); } .ec-totales > div:last-child .sec { color: var(--on-navy-2); }
.ec-totales .v { font-size: var(--t1); font-weight: 800; font-variant-numeric: tabular-nums; }
.ec-datos { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); }
.ec-datos div { display: grid; } .ec-datos span { font-size: var(--t-1); color: var(--ink-2); }
.ec-pie { margin-top: var(--s5); font-size: var(--t-1); color: var(--ink-2); }
.barra-doc { max-width: 54rem; margin: var(--s5) auto 0; display: flex; justify-content: space-between; align-items: center; gap: var(--s3); padding: 0 var(--s5); }

@media (max-width: 960px) {
  .tres, .probar, .dos-col, .conectar, .veredicto, .franja-dos, .login { grid-template-columns: 1fr; }
  .metricas { grid-template-columns: 1fr 1fr; } .login-lado { padding: var(--s6) var(--s5); }
  .barra nav { order: 3; flex-basis: 100%; } .barra-int { flex-wrap: wrap; } .usuario .quien { display: none; }
  .semaforo .fila { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  :root { --t3: 2rem; --t4: 3rem; } main { padding: 0 var(--s4) var(--s7); } .panel { padding: var(--s5); }
  .ec-totales, .ec-datos, .metricas { grid-template-columns: 1fr 1fr; } .logo b { display: none; } .dona { grid-template-columns: 1fr; }
}
@media print {
  :root { color-scheme: light; --ground: #fff; --surface: #fff; --raised: #f4f6f8; --ink: #000; --ink-2: #333; --line: #bbb; --sombra: none; }
  .barra, .barra-doc, .no-imprimir { display: none !important; } main { padding: 0; margin-top: 0; } .panel { box-shadow: none; padding: 0; }
  .franja { padding: var(--s4) 0; } .panel, .metricas, li { break-inside: avoid; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
input.campo { font: inherit; width: 100%; padding: var(--s3) var(--s4); border: 1.5px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); min-height: 3rem; margin-top: var(--s1); }
input.campo:focus { border-color: var(--accent-deep); }
/* ====== Ficha v3b: bancos en lista, ventana de costo, pruebas ====== */
.lista-bancos { list-style: none; margin: 0; padding: 0; columns: 3 9rem; column-gap: var(--s5); }
.lista-bancos li { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) 0; border-bottom: 1px solid var(--line); break-inside: avoid; font-weight: 600; }
.lista-bancos .ico { color: var(--accent-deep); }
.opcion { grid-template-rows: auto auto 1fr auto auto; min-height: 19rem; }
.opcion .btn { margin-top: 0; }
dialog.ventana { border: 0; border-radius: var(--r); padding: 0; width: min(44rem, calc(100% - 2rem)); background: var(--surface); color: var(--ink); box-shadow: var(--sombra); }
dialog.ventana::backdrop { background: rgba(11, 31, 51, .55); }
.ventana-cab { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); padding: var(--s5) var(--s6); border-bottom: 1px solid var(--line); }
.ventana-cuerpo { padding: var(--s5) var(--s6) var(--s6); max-height: 70vh; overflow: auto; }
.ventana-cuerpo table { margin-top: var(--s2); }
.boton-cerrar { font: inherit; background: var(--hundido); border: 0; width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center; color: var(--ink); cursor: pointer; }
.boton-cerrar:hover { background: var(--line); }
.notas-lista { margin: var(--s5) 0 0; padding-left: 1.3em; display: grid; gap: var(--s2); font-size: var(--t-1); color: var(--ink-2); }
.datos-prueba { margin: var(--s4) 0 0; display: flex; gap: var(--s4); flex-wrap: wrap; }
.datos-prueba div { display: grid; padding: var(--s3) var(--s4); border-radius: var(--r-sm); background: var(--raised); min-width: 8rem; }
.datos-prueba dt { font-size: var(--t-1); color: var(--ink-2); } .datos-prueba dd { margin: 0; font-weight: 800; font-size: var(--t1); font-variant-numeric: tabular-nums; }
.oculto { display: none !important; }
.prueba { display: grid; grid-template-columns: 1fr auto; gap: var(--s2) var(--s4); align-items: center; padding: var(--s4) 0; border-bottom: 1px solid var(--line); }
.prueba:last-child { border-bottom: 0; }
.prueba-info { display: grid; } .prueba-info b { font-size: var(--t0); }
.prueba-acc { grid-column: 1 / -1; display: flex; gap: var(--s3); align-items: center; }
.boton-quieto { font: inherit; font-weight: 650; font-size: var(--t-1); color: var(--ink-2); background: none; border: 0; padding: var(--s2) var(--s3); border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: .3em; }
.boton-quieto:hover { background: var(--bad-soft); color: var(--bad); }