/* =====================================================================
 * Panel de calculadoras (BeroCalc) — flat, paleta Bero, claro/oscuro
 * ===================================================================== */
.bcalc {
    --bc-navy: #001D3B;
    --bc-teal: #59C2AB;
    --bc-teal-d: #2f9c86;
    --bc-ink: #1b2430;
    --bc-muted: #6b7785;
    --bc-line: #e3e7ec;
    --bc-soft: #f5f7f9;
    --bc-card: #ffffff;
    --bc-good: #12805c;
    --bc-good-bg: #e7f6f0;
    --bc-bad: #c2362b;
    --bc-bad-bg: #fcecea;
    --bc-warn: #8a5a00;
    --bc-warn-bg: #fff6e0;
    --bc-amo: #001D3B;
    --bc-int: #59C2AB;
    color: var(--bc-ink);
    font-family: 'Plus Jakarta Sans', sans-serif;
}
[data-theme="dark"] .bcalc {
    --bc-navy: #58a6ff;
    --bc-ink: #d6dde5;
    --bc-muted: #8b949e;
    --bc-line: #30363d;
    --bc-soft: #161b22;
    --bc-card: #0d1117;
    --bc-good: #3fb98a;
    --bc-good-bg: rgba(63, 185, 138, .12);
    --bc-bad: #f07167;
    --bc-bad-bg: rgba(240, 113, 103, .12);
    --bc-warn: #e3b341;
    --bc-warn-bg: rgba(227, 179, 65, .10);
    --bc-amo: #3b6ea8;
    --bc-int: #59C2AB;
}
.bcalc .bc-mono, .bcalc .bc-tv, .bcalc .bc-sens, .bcalc table, .bcalc .bc-flowline b, .bcalc .bc-mini b {
    font-variant-numeric: tabular-nums;
}

/* ---------- formulario ---------- */
.bc-form {
    display: grid;
    grid-template-columns: minmax(150px, 1.2fr) minmax(170px, 1.3fr) minmax(230px, 1.5fr) minmax(120px, .7fr);
    gap: 12px 14px;
    align-items: start;
    padding: 14px 16px;
    background: var(--bc-soft);
    border: 1px solid var(--bc-line);
}
.bc-field { display: flex; flex-direction: column; gap: 4px; position: relative; min-width: 0; }
.bc-field label {
    font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--bc-muted); margin: 0;
}
.bc-unit { font-weight: 500; text-transform: none; letter-spacing: 0; opacity: .8; }
.bc-input {
    width: 100%; height: 38px; padding: 6px 10px; font-size: .95rem; font-weight: 600;
    color: var(--bc-ink); background: var(--bc-card); border: 1px solid var(--bc-line); border-radius: 0; outline: none;
}
.bc-input:focus { border-color: var(--bc-teal); box-shadow: 0 0 0 2px rgba(89, 194, 171, .25); }
#bcalc-ons .bc-f-ticker input, .bc-f-ticker input { text-transform: uppercase; }
.bc-mkt-chip {
    align-self: flex-start; margin-top: 2px; padding: 1px 8px; font-size: .72rem; font-weight: 600;
    color: var(--bc-teal-d); background: transparent; border: 1px dashed var(--bc-teal); border-radius: 0; cursor: pointer;
}
.bc-mkt-chip span { text-decoration: underline; margin-left: 4px; }
.bc-mkt-chip:hover { background: rgba(89, 194, 171, .12); }
[data-theme="dark"] .bc-mkt-chip { color: var(--bc-teal); }
.bc-seg-wrap { display: flex; align-items: stretch; }
.bc-seg-wrap .bc-input { width: 76px; flex: 0 0 76px; border-right: none; text-align: right; }
.bc-suffix {
    display: flex; align-items: center; padding: 0 8px 0 2px; font-weight: 600; color: var(--bc-muted);
    background: var(--bc-card); border: 1px solid var(--bc-line); border-left: none;
}
.bc-seg { display: flex; margin-left: 8px; flex: 1; }
.bc-seg button {
    flex: 1; height: 38px; padding: 0 10px; font-size: .8rem; font-weight: 600; color: var(--bc-muted);
    background: var(--bc-card); border: 1px solid var(--bc-line); border-radius: 0; cursor: pointer;
}
.bc-seg button + button { border-left: none; }
.bc-seg button.on { color: #fff; background: var(--bc-navy); border-color: var(--bc-navy); }
[data-theme="dark"] .bc-seg button.on { color: #0d1117; }
.bc-hint { font-size: .7rem; color: var(--bc-muted); min-height: 1em; }
.bc-f-go { padding-top: 20px; }
.bc-go {
    height: 38px; width: 100%; font-weight: 700; letter-spacing: .02em; color: #fff;
    background: var(--bc-navy); border: none; border-radius: 0; transition: background .15s, color .15s;
}
.bc-go:hover { background: var(--bc-teal); color: #001D3B; }
[data-theme="dark"] .bc-go { color: #0d1117; }
.bc-error {
    margin-top: 10px; padding: 8px 12px; font-size: .85rem; color: var(--bc-bad); background: var(--bc-bad-bg);
    border-left: 3px solid var(--bc-bad);
}

/* ---------- salida ---------- */
.bc-out { margin-top: 16px; transition: opacity .15s; }
.bcalc.bc-loading .bc-out { opacity: .45; }
.bc-empty {
    display: flex; align-items: center; justify-content: center; gap: 16px; min-height: 220px; padding: 24px;
    color: var(--bc-muted); font-size: .92rem; text-align: left; border: 1px dashed var(--bc-line); background: var(--bc-soft);
}
.bc-empty span { font-size: .8rem; opacity: .85; }
.bc-empty-ico { font-size: 2rem; color: var(--bc-teal); }

.bc-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.bc-tk { font-size: 1.35rem; font-weight: 800; color: var(--bc-navy); letter-spacing: .02em; }
.bc-meta { font-size: .78rem; color: var(--bc-muted); }

.bc-warn {
    display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; padding: 9px 12px; font-size: .82rem;
    color: var(--bc-warn); background: var(--bc-warn-bg); border-left: 3px solid var(--bc-warn);
}
.bc-warn i { font-size: 1rem; line-height: 1.2; }

/* KPIs */
.bc-tiles { display: grid; grid-template-columns: 1.35fr repeat(4, 1fr); gap: 0; border: 1px solid var(--bc-line); }
.bc-tiles.bc-tiles-6 { grid-template-columns: 1.3fr repeat(5, 1fr); }  /* calculadora TAMAR: 6 tarjetas en una fila */
.bc-tiles-6 .bc-tile { padding: 12px 12px; }
.bc-tiles-6 .bc-tv { font-size: 1.4rem; }
.bc-tile { padding: 12px 14px 12px; background: var(--bc-card); min-width: 0; position: relative; }
.bc-tile + .bc-tile { border-left: 1px solid var(--bc-line); }
.bc-tl { font-size: .66rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--bc-muted); }
.bc-tl i { font-size: .7rem; cursor: help; }
.bc-tv { margin-top: 4px; font-size: 1.55rem; font-weight: 800; line-height: 1.1; color: var(--bc-ink); white-space: nowrap; }
.bc-tv small { font-size: .62em; font-weight: 700; color: var(--bc-muted); }
.bc-ts { margin-top: 4px; font-size: .74rem; line-height: 1.35; color: var(--bc-muted); }
.bc-dim { color: var(--bc-muted); opacity: .85; }
.bc-hero { background: var(--bc-navy); }
.bc-hero .bc-tl, .bc-hero .bc-ts { color: rgba(255, 255, 255, .72); }
.bc-hero .bc-tv { color: var(--bc-teal); font-size: 2.15rem; }
.bc-hero .bc-pre { color: rgba(255, 255, 255, .8); font-size: .5em; margin-right: 4px; vertical-align: middle; }
.bc-hero.neg .bc-tv { color: #ff8a80; }
[data-theme="dark"] .bc-hero { background: #10233a; }
.bc-delta.good .bc-tv { color: var(--bc-good); }
.bc-delta.bad .bc-tv { color: var(--bc-bad); }
.bc-delta.good { box-shadow: inset 0 -3px 0 var(--bc-good); }
.bc-delta.bad { box-shadow: inset 0 -3px 0 var(--bc-bad); }

/* barra de paridad */
.bc-pbar { position: relative; height: 16px; margin-top: 8px; }
.bc-pbar-track { position: absolute; left: 0; right: 0; top: 7px; height: 3px; background: var(--bc-line); }
.bc-pbar-par { position: absolute; top: 2px; width: 1px; height: 13px; background: var(--bc-muted); }
.bc-pbar-par span { position: absolute; top: -12px; left: 3px; font-size: .58rem; color: var(--bc-muted); text-transform: uppercase; letter-spacing: .05em; }
.bc-pbar-dot { position: absolute; top: 3px; width: 11px; height: 11px; margin-left: -5px; background: var(--bc-navy); border: 2px solid var(--bc-card); box-shadow: 0 0 0 1px var(--bc-navy); }

/* grilla inferior */
.bc-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 14px; margin-top: 14px; }
.bc-grid > .bc-card:nth-child(3) { grid-column: 1 / -1; }
.bc-card { padding: 14px 16px; background: var(--bc-card); border: 1px solid var(--bc-line); min-width: 0; }
.bc-card h6 {
    display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0 0 12px;
    font-size: .74rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--bc-navy);
}
.bc-card h6 > span { font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--bc-muted); font-size: .74rem; }
.bc-foot { margin: 10px 0 0; font-size: .7rem; color: var(--bc-muted); }

/* inversión */
.bc-inv-in { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.bc-inv-in label { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--bc-muted); }
.bc-inv-in label span { display: none; }
.bc-inv-in .bc-input { text-align: right; height: 34px; }
.bc-flowline { display: grid; grid-template-columns: 1fr auto 1fr 1.1fr; align-items: end; gap: 8px; }
.bc-flowline > i { color: var(--bc-muted); padding-bottom: 6px; }
.bc-flowline span, .bc-mini span { display: block; font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--bc-muted); }
.bc-flowline b { display: block; font-size: 1.02rem; font-weight: 800; white-space: nowrap; }
.bc-flowline em, .bc-mini em { display: block; font-style: normal; font-size: .7rem; color: var(--bc-muted); }
.bc-gain { padding: 6px 10px; }
.bc-gain.good { background: var(--bc-good-bg); }
.bc-gain.good b { color: var(--bc-good); }
.bc-gain.bad { background: var(--bc-bad-bg); }
.bc-gain.bad b { color: var(--bc-bad); }
.bc-split { display: flex; height: 10px; margin-top: 14px; background: var(--bc-line); }
.bc-split .cap { background: var(--bc-amo); }
.bc-split .gan { background: var(--bc-good); }
.bc-split-lg { display: flex; justify-content: space-between; margin-top: 5px; font-size: .68rem; color: var(--bc-muted); }
.bc-split-lg i { display: inline-block; width: 8px; height: 8px; margin-right: 5px; }
.bc-split-lg i.cap { background: var(--bc-amo); }
.bc-split-lg i.gan { background: var(--bc-good); }
.bc-mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px 14px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--bc-line); }
.bc-mini b { display: block; font-size: .95rem; font-weight: 800; }

/* gráfico de cobros */
.bc-lg i { display: inline-block; width: 9px; height: 9px; margin: 0 4px 0 10px; vertical-align: -1px; }
.bc-lg i.int { background: var(--bc-int); }
.bc-lg i.amo { background: var(--bc-amo); }
.bc-chart { display: block; width: 100%; height: 190px; overflow: visible; }
.bc-chart .base { stroke: var(--bc-line); stroke-width: 1; }
.bc-chart rect.amo { fill: var(--bc-amo); }
.bc-chart rect.int { fill: var(--bc-int); }
.bc-chart .bc-bar:hover rect { opacity: .78; }
.bc-chart text { font-family: 'Plus Jakarta Sans', sans-serif; text-anchor: middle; fill: var(--bc-muted); }
.bc-chart text.lbl { font-size: 10px; }
.bc-chart text.val { font-size: 9.5px; font-weight: 700; fill: var(--bc-ink); }
.bc-bullet { display: flex; align-items: center; justify-content: center; min-height: 120px; background: var(--bc-soft); text-align: center; }
.bc-bullet span { display: block; font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--bc-muted); }
.bc-bullet b { display: block; font-size: 1.5rem; font-weight: 800; color: var(--bc-navy); }
.bc-bullet em { font-style: normal; font-size: .75rem; color: var(--bc-muted); }

/* línea de tiempo con recupero */
.bc-tline { position: relative; margin-top: 18px; padding-top: 22px; }
.bc-tl-track { position: relative; height: 6px; background: var(--bc-line); }
.bc-tl-fill { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, rgba(89, 194, 171, .35), var(--bc-teal)); }
.bc-tl-track i { position: absolute; top: -2px; width: 1px; height: 10px; background: var(--bc-muted); opacity: .45; }
.bc-tl-pb { position: absolute; top: 0; height: 30px; border-left: 2px solid var(--bc-teal-d); }
.bc-tl-pb span { position: absolute; top: -2px; left: 6px; white-space: nowrap; font-size: .7rem; font-weight: 700; color: var(--bc-teal-d); }
.bc-tl-pb.r span { left: auto; right: 6px; }
[data-theme="dark"] .bc-tl-pb { border-color: var(--bc-teal); }
[data-theme="dark"] .bc-tl-pb span { color: var(--bc-teal); }
.bc-tl-ends { display: flex; justify-content: space-between; margin-top: 6px; font-size: .68rem; color: var(--bc-muted); }

/* sensibilidad */
.bc-sens { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 36px; }
.bc-sr { display: grid; grid-template-columns: 92px 1fr 62px 70px; align-items: center; gap: 10px; font-size: .8rem; }
.bc-sr-l { color: var(--bc-muted); font-weight: 600; }
.bc-sr-bar { position: relative; height: 12px; background: linear-gradient(90deg, transparent calc(50% - .5px), var(--bc-line) calc(50% - .5px), var(--bc-line) calc(50% + .5px), transparent calc(50% + .5px)); }
.bc-sr-bar span { position: absolute; top: 2px; bottom: 2px; }
.bc-sr-bar span.up { background: var(--bc-good); }
.bc-sr-bar span.dn { background: var(--bc-bad); }
.bc-sr-v { text-align: right; font-weight: 800; }
.bc-sr-v.up { color: var(--bc-good); }
.bc-sr-v.dn { color: var(--bc-bad); }
.bc-sr-p { text-align: right; color: var(--bc-muted); }

/* cronograma */
.bc-sched { margin-top: 14px; border: 1px solid var(--bc-line); background: var(--bc-card); }
.bc-sched summary { padding: 10px 14px; font-size: .8rem; font-weight: 700; color: var(--bc-navy); cursor: pointer; list-style: none; }
.bc-sched summary::-webkit-details-marker { display: none; }
.bc-sched summary::after { content: '\F282'; font-family: 'bootstrap-icons'; float: right; transition: transform .15s; }
.bc-sched[open] summary::after { transform: rotate(180deg); }
.bc-sched summary span { margin-left: 8px; font-weight: 500; color: var(--bc-muted); }
.bc-sched-wrap { max-height: 280px; overflow: auto; border-top: 1px solid var(--bc-line); }
.bc-sched table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.bc-sched th { position: sticky; top: 0; padding: 6px 12px; font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; text-align: right; color: #fff; background: #001D3B; }
.bc-sched td { padding: 5px 12px; text-align: right; border-bottom: 1px solid var(--bc-line); }
.bc-sched th:first-child, .bc-sched td:first-child { text-align: left; }
.bc-sched td.b { font-weight: 800; color: var(--bc-good); }
.bc-sched tbody tr:hover td { background: var(--bc-soft); }

/* responsive */
@media (max-width: 1100px) {
    .bc-tiles, .bc-tiles.bc-tiles-6 { grid-template-columns: repeat(3, 1fr); }
    .bc-tile + .bc-tile { border-left: none; }
    .bc-tile { border-right: 1px solid var(--bc-line); border-bottom: 1px solid var(--bc-line); }
    .bc-sens { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
    .bc-form { grid-template-columns: 1fr 1fr; }
    .bc-f-go { padding-top: 0; }
    .bc-grid { grid-template-columns: 1fr; }
    .bc-tiles, .bc-tiles.bc-tiles-6 { grid-template-columns: 1fr 1fr; }
    .bc-hero { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
    .bc-form { grid-template-columns: 1fr; }
    .bc-flowline { grid-template-columns: 1fr 1fr; }
    .bc-flowline > i { display: none; }
    .bc-gain { grid-column: 1 / -1; }
    .bc-sr { grid-template-columns: 80px 1fr 56px; }
    .bc-sr-p { display: none; }
}

/* Duales: tarjeta con las dos patas */
.bc-dual { margin: 14px 0 0; }
.bc-dual-t { width: 100%; }
.bc-dual-t td, .bc-dual-t th { text-align: left; vertical-align: top; }
.bc-dual-t td .bc-dim { font-size: .72rem; }
.bc-dual-vista td { background: var(--bc-soft); }
.bc-dual-tag { display: inline-block; margin-right: 4px; padding: 0 6px; font-size: .64rem; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; border: 1px solid var(--bc-line); color: var(--bc-muted); }
.bc-dual-tag.gana { border-color: #59C2AB; color: #59C2AB; }
.bc-dual-be { margin: 10px 0 0; font-size: .82rem; font-weight: 600; color: var(--bc-ink); }
.bc-dual .bc-sched-wrap { max-height: none; }
.bc-dual-t { border-collapse: collapse; font-size: .82rem; }
.bc-dual-t th { padding: 6px 12px; font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #fff; background: #001D3B; }
.bc-dual-t td { padding: 7px 12px; border-bottom: 1px solid var(--bc-line); color: var(--bc-ink); }
.bc-dual-t td.b { font-weight: 700; }

/* CER: escenario de inflación (REM vs implícita de mercado) */
.bc-infl { margin: 14px 0; }
.bc-infl-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bc-infl-h h6 { margin: 0; }
.bc-infl-seg { flex: 0 0 auto; margin-left: 0; }
.bc-infl-seg button { height: 32px; font-size: .76rem; white-space: nowrap; }
.bc-infl-seg button:disabled { opacity: .45; cursor: not-allowed; }
.bc-infl-kpis { margin-top: 12px; }
.bc-infl .bc-foot { margin-bottom: 0; }
@media (max-width: 575px) { .bc-infl-seg { width: 100%; } }
