/* =========================================================
   Gemaque — Simulador de dashboards (identidade do site:
   azul-marinho / azul · Oswald + Poppins · fundo claro)
   ========================================================= */

.page-simulador .page-hero { min-height: 44vh; }
.section-sim { padding-top: 3.5rem; background: var(--paper-alt); }
.sim-note { margin: 1.2rem 0 0; font-size: .88rem; color: var(--ink-soft); max-width: 60rem; }
.num { font-variant-numeric: tabular-nums; letter-spacing: 0; }
.mono { font-family: var(--font); font-variant-numeric: tabular-nums; }

/* ---------- contêiner ---------- */
.bi { background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden; }
.bi-topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1.4rem; background: linear-gradient(90deg, var(--navy-800), #22367a 60%, var(--blue-500)); color: #fff; flex-wrap: wrap; }
.bi-brand { display: flex; align-items: center; gap: .8rem; }
.bi-brand img { width: 84px; height: auto; }
.bi-title { font-family: var(--font-display); font-size: 1.15rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 400; }
.bi-live { display: inline-flex; align-items: center; gap: .4rem; margin-left: .4rem; padding: .25rem .65rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.12); font-size: .7rem; font-weight: 500; }
.bi-live i { width: 6px; height: 6px; border-radius: 50%; background: #7CF2B2; box-shadow: 0 0 8px #7CF2B2; animation: biPulse 2s infinite; }
@keyframes biPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.bi-filters { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end; }
.bi-filters label, .bi-select { display: flex; flex-direction: column; gap: .15rem; font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.75); font-weight: 600; }
.bi-select { color: var(--ink-soft); }
.bi-filters select, .bi-select select { font-family: var(--font); font-size: .82rem; font-weight: 500; color: var(--navy-800); background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: .45rem 2rem .45rem .65rem; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b6cb0' stroke-width='2.5' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right .55rem center; background-size: 12px; cursor: pointer; min-width: 150px; }
.bi-period { align-self: flex-end; font-size: .74rem; font-weight: 600; color: #fff; padding: .5rem .75rem; border: 1px dashed rgba(255,255,255,.55); border-radius: 6px; white-space: nowrap; }
.bi-tabs { display: flex; gap: .2rem; padding: .6rem 1.4rem 0; border-bottom: 1px solid var(--line); background: #fff; overflow-x: auto; }
.bi-tabs button { font-family: var(--font-display); font-weight: 400; font-size: 1rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); background: none; border: 0; border-bottom: 3px solid transparent; padding: .7rem 1rem .8rem; cursor: pointer; white-space: nowrap; transition: color .25s, border-color .25s; margin-bottom: -1px; }
.bi-tabs button:hover { color: var(--navy-800); }
.bi-tabs button.active { color: var(--blue-500); border-bottom-color: var(--blue-500); }
.bi-panel { padding: 1.4rem; background: var(--paper-alt); animation: biFade .4s var(--ease); }
.bi-panel[hidden] { display: none; }
@keyframes biFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.bi-footer { padding: .7rem 1.4rem; border-top: 1px solid var(--line); font-size: .72rem; color: var(--ink-soft); background: #fff; }

/* ---------- KPI cards ---------- */
.kpi-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: .8rem; margin-bottom: 1.2rem; }
.kpi { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--kpi-color, var(--blue-500)); padding: .9rem 1rem; }
.kpi small { display: block; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; margin-bottom: .3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi strong { display: block; font-family: var(--font-display); font-size: 1.7rem; font-weight: 400; color: var(--navy-800); line-height: 1.05; font-variant-numeric: tabular-nums; }
.kpi span { display: block; font-size: .72rem; margin-top: .3rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.kpi .up { color: #2e9e5b; } .kpi .down { color: #d64545; }

/* ---------- tabelas ---------- */
.bi-table-wrap { overflow-x: auto; border: 1px solid var(--line); background: #fff; }
.bi-table { width: 100%; border-collapse: collapse; font-size: .86rem; min-width: 640px; }
.bi-table th { text-align: right; font-weight: 600; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); padding: .75rem .9rem; border-bottom: 2px solid var(--line); white-space: nowrap; background: #f7f9fc; }
.bi-table th:first-child, .bi-table td:first-child { text-align: left; }
.bi-table td { padding: .6rem .9rem; border-bottom: 1px solid #eef1f6; text-align: right; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bi-table td:first-child { color: var(--ink-soft); }
.bi-table tr.grp td { background: #fafbfd; }
.bi-table tr.grp td:first-child { color: var(--navy-800); font-weight: 600; }
.bi-table tr.sub td:first-child { padding-left: 1.9rem; }
.bi-table tr.sub2 td:first-child { padding-left: 3rem; color: var(--ink-soft); }
.bi-table tr.total td { background: var(--blue-100); border-top: 1px solid rgba(43,108,176,.35); }
.bi-table tr.total td:first-child { color: var(--blue-500); font-weight: 700; }
.bi-table tr:hover td { background: #eef3fa; }
.bi-table tr.sel td { background: #e3edf8; }
.bi-table .pos { color: #2e9e5b; font-weight: 600; } .bi-table .neg { color: #d64545; font-weight: 600; } .bi-table .neu { color: var(--ink-soft); }
.bi-table .bar { display: inline-block; vertical-align: middle; height: 6px; border-radius: 3px; margin-left: .5rem; opacity: .8; }
.bi-table-compact { min-width: 0; font-size: .82rem; }
.bi-table-compact td, .bi-table-compact th { padding: .5rem .6rem; }
.bi-table-compact th { white-space: normal; line-height: 1.3; font-size: .6rem; }
.bi-note { margin: 1rem 0 0; font-size: .78rem; color: var(--ink-soft); display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

/* ---------- cards de gráfico ---------- */
.bi-grid-2 { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1rem; }
.bi-grid-kpi { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.bi-grid-bal { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.bi-card { min-width: 0; background: #fff; border: 1px solid var(--line); padding: 1rem 1.1rem; }
.bi-card-head { display: flex; justify-content: space-between; align-items: center; gap: .8rem; margin-bottom: .6rem; flex-wrap: wrap; }
.bi-card-head h4 { margin: 0; font-size: 1.05rem; font-family: var(--font-display); text-transform: uppercase; font-weight: 400; letter-spacing: .03em; }
.bi-card-head .mono { font-size: .72rem; color: var(--ink-soft); }
.bi-legend { display: flex; gap: 1rem; font-size: .76rem; color: var(--ink-soft); margin-bottom: .4rem; flex-wrap: wrap; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: .35rem; vertical-align: -1px; }
.sw-emerald, .sw-blue { background: #2b6cb0; } .sw-light { background: #6fa3dc; } .sw-amber { background: #e0a62b; } .sw-red { background: #d64545; }
.bi-chart svg { width: 100%; height: auto; display: block; }
.bi-chart text { font-family: var(--font); fill: var(--ink-soft); font-size: 10px; }
.bi-chart .lbl { fill: var(--ink); font-weight: 600; }
.bi-chart .grid { stroke: #edf0f5; }
.bi-chart .target { stroke: #e0a62b; stroke-dasharray: 4 4; }
.bi-chart rect { transition: opacity .2s; }
.bi-chart rect:hover { opacity: .8; }
.evo-groups { display: grid; gap: .75rem; }
.evo-group { display: grid; grid-template-columns: 1fr auto; gap: .2rem .8rem; align-items: center; }
.evo-group .name { font-size: .86rem; color: var(--ink); font-weight: 500; }
.evo-group .val { font-size: .86rem; color: var(--navy-800); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.evo-group .track { grid-column: 1 / -1; height: 7px; border-radius: 4px; background: #eef1f6; overflow: hidden; }
.evo-group .fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, #e0a62b, #f0c050); width: 0; transition: width 1.1s var(--ease); }
.evo-group .deltas { grid-column: 1 / -1; display: flex; gap: .6rem; font-size: .72rem; color: var(--ink-soft); }
.evo-group .deltas b { font-weight: 600; }
.evo-group .deltas .pos { color: #2e9e5b; } .evo-group .deltas .neg { color: #d64545; }
.bi-callouts { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; }
.bi-callout { border: 1px dashed rgba(224,166,43,.7); background: #fff8e8; padding: .9rem 1.1rem; }
.bi-callout .mono { display: block; font-size: .68rem; color: #b07f14; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; margin-bottom: .3rem; }
.bi-callout p { margin: 0; font-size: .88rem; color: var(--ink-soft); }
.st { display: inline-block; width: 9px; height: 9px; border-radius: 50%; vertical-align: -1px; }
.st-ok { background: #2e9e5b; } .st-warn { background: #e0a62b; } .st-bad { background: #d64545; }
.gauges { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.gauge { text-align: center; padding: .4rem .2rem; border: 1px solid var(--line); background: #fafbfd; }
.gauge svg { width: 100%; max-width: 170px; height: auto; margin: 0 auto; }
.gauge span { display: block; font-size: .7rem; color: var(--ink-soft); margin-top: .1rem; line-height: 1.3; }
.gauge.nok span { color: #b07f14; font-weight: 600; }

/* ---------- What If ---------- */
.wi-grid { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 1rem; align-items: start; }
.wi-presets { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0 1rem; }
.wi-presets button { font: inherit; font-size: .74rem; font-weight: 600; color: var(--navy-800); background: var(--blue-100); border: 1px solid transparent; border-radius: 999px; padding: .35rem .75rem; cursor: pointer; transition: background .2s, color .2s; }
.wi-presets button:hover { background: var(--blue-500); color: #fff; }
.wi-presets .wi-reset { background: #fff; border-color: var(--line); color: var(--ink-soft); }
.wi-slider { margin-bottom: .9rem; }
.wi-slider label { display: block; font-size: .8rem; font-weight: 600; color: var(--navy-800); margin-bottom: .25rem; }
.wi-slider label small { display: block; font-weight: 400; color: var(--ink-soft); font-size: .72rem; }
.wi-row { display: grid; grid-template-columns: 1fr 64px; gap: .6rem; align-items: center; }
.wi-row output { font-size: .9rem; font-weight: 600; color: var(--blue-500); text-align: right; font-variant-numeric: tabular-nums; }
.wi-row input[type="range"] { width: 100%; accent-color: var(--blue-500); cursor: pointer; }
.wi-regime { margin-bottom: 1rem; padding: 1rem; background: var(--blue-100); border-left: 3px solid var(--blue-500); }
.wi-regime > label { display: block; font-family: var(--font-display); font-size: 1.05rem; text-transform: uppercase; color: var(--navy-800); margin-bottom: .4rem; letter-spacing: .03em; }
.wi-regime select { width: 100%; font: inherit; font-size: .9rem; font-weight: 500; padding: .5rem .65rem; border: 1px solid var(--line); background: #fff; color: var(--navy-800); border-radius: 6px; }
.wi-regime-extra { margin-top: .7rem; }
.wi-regime-extra label { display: block; font-size: .78rem; font-weight: 600; color: var(--navy-800); margin-bottom: .2rem; }
.wi-regime-extra label small { display: block; font-weight: 400; color: var(--ink-soft); font-size: .7rem; }
.wi-regime-note { margin: .6rem 0 0; font-size: .76rem; color: var(--ink-soft); }
.kpi-row-4 { grid-template-columns: repeat(4, 1fr); }
.kpi .delta { font-size: .72rem; margin-top: .25rem; }
.bi-table .pos.soft, .bi-table .neg.soft { font-weight: 500; }
@media (max-width: 1024px) { .wi-grid { grid-template-columns: 1fr; } .kpi-row-4 { grid-template-columns: 1fr 1fr; } }

/* ---------- explicação ---------- */
.sim-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.sim-item { background: #fff; border: 1px solid var(--line); padding: 1.8rem 2rem; border-top: 4px solid var(--blue-500); }
.sim-item h3 { text-transform: uppercase; font-size: 1.3rem; }
.sim-item p { margin: 0; color: var(--ink-soft); font-size: .95rem; }

/* ---------- responsivo ---------- */
@media (max-width: 1024px) {
  .kpi-row { grid-template-columns: repeat(3, 1fr); }
  .bi-grid-2, .bi-grid-kpi, .bi-grid-bal, .bi-callouts { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .kpi-row { grid-template-columns: 1fr 1fr; }
  .kpi small { white-space: normal; line-height: 1.3; }
  .kpi strong { font-size: 1.35rem; }
  .bi-topbar { padding: .8rem 1rem; }
  .bi-panel { padding: 1rem; }
  .bi-tabs { padding: .5rem 1rem 0; }
  .bi-tabs button { font-size: .9rem; padding: .6rem .7rem .7rem; }
  .bi-live, .bi-period { display: none; }
  .bi-filters select { min-width: 0; }
  .sim-grid { grid-template-columns: 1fr; }
}