/* Base da Pirâmide · HSE — estilos. Tokens alinhados ao SIG SmartHow. */

:root {
  --primary: #348BE2;
  --primary-dark: #2477CC;
  --primary-soft: #EAF3FC;
  --primary-ink: #1B5FA3;

  --ok: #12B76A;      --ok-soft: #E6F7EF;    --ok-ink: #0B7A46;
  --warn: #F79009;    --warn-soft: #FEF3E2;  --warn-ink: #B25E00;
  --err: #F04438;     --err-soft: #FEECEB;   --err-ink: #B42318;

  --surface: #ffffff;
  --canvas: #f7f7f5;
  --border: #e7e5e4;
  --border-soft: rgba(231, 229, 228, 0.6);
  --ink: #1c1917;
  --ink-soft: #57534e;
  --ink-faint: #a8a29e;
  --stone-50: #fafaf9;
  --stone-100: #f5f5f4;
  --stone-200: #e7e5e4;

  --r-lg: 12px; --r-md: 10px; --r-sm: 8px;
  --shadow: 0 1px 2px rgba(28, 25, 23, 0.05);
  --shadow-md: 0 8px 24px rgba(28, 25, 23, 0.08);
  --sidebar-w: 240px;
  --font: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; scrollbar-width: thin; scrollbar-color: #d6d3d1 transparent; }
html, body { height: 100%; }
body {
  margin: 0; font-family: var(--font); font-size: 14px; line-height: 1.5; color: var(--ink);
  background: var(--canvas); font-feature-settings: "tnum"; -webkit-font-smoothing: antialiased;
}
::selection { background: var(--primary-soft); }
h1, h2, h3, h4, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
svg.i { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
svg.i.sm { width: 13px; height: 13px; }
svg.i.lg { width: 22px; height: 22px; stroke-width: 1.6; }
.hidden { display: none !important; }
.tnum { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); }
.xs { font-size: 12px; }
.xxs { font-size: 11px; }
.bold { font-weight: 600; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; }
.mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; }
.row { display: flex; align-items: center; gap: 8px; }
.row.between { justify-content: space-between; }
.row.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.stack { display: flex; flex-direction: column; gap: 8px; }

/* ── Casca ── */
.app { display: flex; height: 100vh; overflow: hidden; }
.sidebar {
  width: var(--sidebar-w); flex-shrink: 0; display: flex; flex-direction: column;
  background: var(--surface); border-right: 1px solid var(--border); transition: transform .2s ease;
}
.sidebar .brand { display: flex; align-items: center; padding: 20px 20px 16px; }
.sidebar nav { flex: 1; overflow-y: auto; padding: 0 12px 24px; display: flex; flex-direction: column; gap: 20px; }
.sidebar .grp-title { margin: 0 8px 4px; font-size: 11px; font-weight: 600; color: var(--ink-faint); letter-spacing: .01em; }
.sidebar ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.sidebar a {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-sm); font-size: 14px;
  color: var(--ink-soft); transition: background .12s, color .12s;
}
.sidebar a:hover { background: var(--stone-100); color: var(--ink); }
.sidebar a.active { background: var(--primary-soft); color: var(--primary-ink); font-weight: 500; }
.sidebar a .pill { margin-left: auto; background: var(--primary); color: #fff; font-size: 10px; font-weight: 600; border-radius: 999px; padding: 2px 6px; line-height: 1.2; }
.sidebar .foot { border-top: 1px solid var(--border); padding: 12px 20px; font-size: 10px; color: var(--ink-faint); }
.sidebar .close { display: none; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  height: 56px; display: flex; align-items: center; gap: 12px; padding: 0 24px;
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.topbar .menu { display: none; }
.topbar .crumbs { font-size: 12px; color: var(--ink-faint); display: flex; align-items: center; gap: 6px; }
.topbar .crumbs b { color: var(--ink); font-weight: 500; }
.topbar .spacer { flex: 1; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: 12px;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink-soft); white-space: nowrap;
}
.chip.dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.avatar {
  width: 30px; height: 30px; border-radius: 50%; background: var(--primary-soft); color: var(--primary-ink);
  display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600;
}
.content { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 24px 32px 48px; }
.container { max-width: 1120px; margin: 0 auto; }
.container.narrow { max-width: 760px; }

/* ── Cabeçalho de página ── */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.page-head h1 { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.page-head .desc { margin-top: 4px; font-size: 13px; color: var(--ink-soft); max-width: 640px; }
.page-head .actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── Cards ── */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--border); }
.card-head h2 { font-size: 14px; font-weight: 600; }
.card-head p { margin-top: 2px; font-size: 12px; color: var(--ink-soft); }
.card-body { padding: 16px 20px; }
.card-body.tight { padding: 8px 20px; }
.card-body.flush { padding: 0; }
.card-foot { border-top: 1px solid var(--border); padding: 10px 20px; font-size: 12px; color: var(--ink-soft); }
.card.link { transition: border-color .12s, box-shadow .12s; }
.card.link:hover { border-color: var(--primary); box-shadow: var(--shadow-md); }

.grid { display: grid; gap: 16px; }
.grid > * { min-width: 0; }
.card { min-width: 0; }
.grid.kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.span-2 { grid-column: span 2; }

.stat { padding: 14px 18px; height: 100%; }
.grid > a { display: block; }
.stat .lbl { font-size: 12px; font-weight: 500; color: var(--ink-soft); }
.stat .val { margin-top: 4px; font-size: 26px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.stat .det { margin-top: 2px; font-size: 12px; color: var(--ink-faint); }
.stat.ok .val { color: var(--ok-ink); } .stat.warn .val { color: var(--warn-ink); } .stat.err .val { color: var(--err-ink); } .stat.blue .val { color: var(--primary-ink); }

.sec-title { margin-bottom: 8px; font-size: 12px; font-weight: 600; color: var(--ink-faint); }

/* ── Badges ── */
.badge { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; border-radius: 999px; padding: 2px 8px; font-size: 11px; font-weight: 500; line-height: 1.5; }
.badge.blue { background: var(--primary-soft); color: var(--primary-ink); }
.badge.green { background: var(--ok-soft); color: var(--ok-ink); }
.badge.amber { background: var(--warn-soft); color: var(--warn-ink); }
.badge.red { background: var(--err-soft); color: var(--err-ink); }
.badge.stone { background: var(--stone-100); color: var(--ink-soft); }
.badge.violet { background: #F1EBFE; color: #6D3AC9; }
.badge.outline { background: transparent; border: 1px solid var(--border); color: var(--ink-soft); }

/* ── Botões ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: var(--r-md); font-weight: 500;
  padding: 8px 14px; font-size: 14px; transition: background .12s, border-color .12s, color .12s; white-space: nowrap;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary { background: var(--primary); color: #fff; }
.btn.primary:hover:not(:disabled) { background: var(--primary-dark); }
.btn.secondary { background: var(--surface); border: 1px solid var(--border); color: var(--ink); }
.btn.secondary:hover:not(:disabled) { background: var(--stone-50); }
.btn.ghost { color: var(--ink-soft); }
.btn.ghost:hover:not(:disabled) { background: var(--stone-100); color: var(--ink); }
.btn.danger { background: var(--err); color: #fff; }
.btn.sm { padding: 5px 10px; font-size: 12px; border-radius: var(--r-sm); }
.btn.block { width: 100%; }
.link-btn { color: var(--primary-ink); font-weight: 500; font-size: 13px; display: inline-flex; align-items: center; gap: 4px; }
.link-btn:hover { text-decoration: underline; }

/* ── Campos ── */
.field { display: block; }
.field > span.lbl { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: 12px; font-weight: 500; color: var(--ink-soft); }
.field .req { color: var(--err); }
.tag-intelex { font-size: 10px; font-weight: 600; color: var(--primary-ink); background: var(--primary-soft); border-radius: 4px; padding: 0 5px; line-height: 1.6; }
.tag-extra { font-size: 10px; font-weight: 600; color: var(--ink-soft); background: var(--stone-100); border-radius: 4px; padding: 0 5px; line-height: 1.6; }
.input, select.input, textarea.input {
  width: 100%; border: 1px solid var(--border); background: var(--surface); border-radius: var(--r-md); padding: 9px 12px; font-size: 14px; outline: none;
  transition: border-color .12s, box-shadow .12s; min-height: 40px;
}
select.input { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2357534e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 34px; }
.input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(52, 139, 226, .15); }
.input::placeholder { color: var(--ink-faint); }
textarea.input { min-height: 88px; resize: vertical; }
.input[readonly] { background: var(--stone-50); color: var(--ink-soft); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.form-grid .full { grid-column: 1 / -1; }
.help { font-size: 12px; color: var(--ink-faint); margin-top: 4px; }

/* opções tipo cartão (lista de rádio/checkbox) */
.opts { display: flex; flex-direction: column; gap: 6px; }
.opt {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); cursor: pointer; transition: border-color .12s, background .12s; font-size: 14px; text-align: left; width: 100%;
}
.opt:hover { border-color: #c9c5c2; }
.opt.on { border-color: var(--primary); background: var(--primary-soft); }
.opt .box { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #c9c5c2; flex-shrink: 0; margin-top: 2px; display: grid; place-items: center; background: #fff; }
.opt .box.sq { border-radius: 5px; }
.opt.on .box { border-color: var(--primary); background: var(--primary); }
.opt.on .box::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.opt.on .box.sq::after { width: 9px; height: 5px; border-radius: 0; background: none; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-1px) rotate(-45deg); }
.opt.on .box.sq { border-radius: 5px; }
.opt .txt { flex: 1; }
.opt .sub { font-size: 12px; color: var(--ink-soft); margin-top: 1px; }

/* cascata (cartões de escolha em etapas) */
.cascade { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.cascade .opt { flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px; min-height: 64px; }
.cascade .opt b { font-weight: 600; font-size: 14px; }
.cascade .opt .sub { font-size: 12px; }
.crumb-path { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; color: var(--ink-soft); }
.crumb-path .badge { cursor: pointer; }

.segment { display: inline-flex; border: 1px solid var(--border); border-radius: var(--r-md); padding: 3px; background: var(--stone-50); gap: 2px; }
.segment button { padding: 5px 12px; border-radius: 7px; font-size: 13px; color: var(--ink-soft); font-weight: 500; }
.segment button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }

.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.switch .track { width: 36px; height: 20px; border-radius: 999px; background: #d6d3d1; position: relative; transition: background .15s; flex-shrink: 0; }
.switch .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.switch.on .track { background: var(--primary); }
.switch.on .track::after { transform: translateX(16px); }

/* Alertas */
.alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-md); font-size: 13px; border: 1px solid; }
.alert.red { background: var(--err-soft); border-color: #F9C4C0; color: var(--err-ink); }
.alert.amber { background: var(--warn-soft); border-color: #FBD9A5; color: var(--warn-ink); }
.alert.blue { background: var(--primary-soft); border-color: #BBDAF6; color: var(--primary-ink); }
.alert.green { background: var(--ok-soft); border-color: #A9E9C9; color: var(--ok-ink); }
.alert b { font-weight: 600; }
.alert .i { margin-top: 1px; }
.nota { border: 1px solid #FBD9A5; background: var(--warn-soft); color: var(--warn-ink); border-radius: var(--r-sm); padding: 6px 10px; font-size: 12px; }

/* Passos */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.step { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); font-size: 13px; color: var(--ink-faint); }
.step .n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 600; background: var(--stone-100); color: var(--ink-soft); }
.step.on { border-color: var(--primary); color: var(--primary-ink); background: var(--primary-soft); }
.step.on .n { background: var(--primary); color: #fff; }
.step.done { color: var(--ink-soft); }
.step.done .n { background: var(--ok); color: #fff; }

/* Cartões de escolha de tipo */
.choice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.choice { text-align: left; padding: 18px; border: 1.5px solid var(--border); border-radius: var(--r-lg); background: var(--surface); transition: border-color .12s, box-shadow .12s; display: flex; flex-direction: column; gap: 8px; }
.choice:hover { border-color: var(--primary); box-shadow: var(--shadow-md); }
.choice.on { border-color: var(--primary); background: var(--primary-soft); }
.choice .ico { width: 38px; height: 38px; border-radius: var(--r-md); display: grid; place-items: center; }
.choice .ico.blue { background: var(--primary-soft); color: var(--primary-ink); }
.choice.on .ico.blue { background: #fff; }
.choice .ico.amber { background: var(--warn-soft); color: var(--warn-ink); }
.choice .ico.green { background: var(--ok-soft); color: var(--ok-ink); }
.choice .ico.red { background: var(--err-soft); color: var(--err-ink); }
.choice b { font-size: 15px; font-weight: 600; }
.choice p { font-size: 13px; color: var(--ink-soft); }

/* Tabelas */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; white-space: nowrap; padding: 10px 16px; font-size: 12px; font-weight: 600; color: var(--ink-soft); border-bottom: 1px solid var(--border); }
td { padding: 11px 16px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tr.click { cursor: pointer; }
tr.click:hover td { background: var(--stone-50); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Barras */
.bar { height: 8px; border-radius: 999px; background: var(--stone-200); overflow: hidden; display: flex; }
.bar.thin { height: 6px; }
.bar.thick { height: 14px; }
.bar > i { display: block; height: 100%; border-radius: 999px; }
.bar > i.b { background: var(--primary); } .bar > i.g { background: var(--ok); } .bar > i.a { background: var(--warn); } .bar > i.r { background: var(--err); } .bar > i.s { background: #d6d3d1; }
.bar.stack { flex-direction: row; gap: 0; }
.bar.stack > i { border-radius: 0; }
.bar.stack > i:first-child { border-radius: 999px 0 0 999px; } .bar.stack > i:last-child { border-radius: 0 999px 999px 0; }
.bars { display: flex; flex-direction: column; gap: 10px; }
.bars .brow { display: grid; grid-template-columns: 150px 1fr auto; gap: 10px; align-items: center; font-size: 13px; }
.bars .brow.click { cursor: pointer; border-radius: 6px; }
.bars .brow.click:hover { color: var(--primary-ink); }
.bars .brow .v { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 36px; text-align: right; }
.legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--ink-soft); }
.legend span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: 1px; background: var(--k, #ccc); }

/* Gráfico SVG */
.chart { width: 100%; height: auto; display: block; }
.chart text { font-family: var(--font); font-size: 11px; fill: var(--ink-soft); }
.chart .grid-line { stroke: var(--border); stroke-dasharray: 2 3; }
.chart .target { stroke: var(--err); stroke-dasharray: 4 3; stroke-width: 1.2; }

/* Lista de registros */
.reg-row { display: flex; gap: 14px; align-items: flex-start; padding: 12px 20px; border-bottom: 1px solid var(--border-soft); cursor: pointer; }
.reg-row:hover { background: var(--stone-50); }
.reg-row:last-child { border-bottom: 0; }
.reg-row .ico { width: 34px; height: 34px; border-radius: var(--r-md); display: grid; place-items: center; flex-shrink: 0; }
.ico.desvio { background: var(--warn-soft); color: var(--warn-ink); } .ico.seguro { background: var(--ok-soft); color: var(--ok-ink); } .ico.armadilha { background: var(--primary-soft); color: var(--primary-ink); } .ico.critico { background: var(--err-soft); color: var(--err-ink); }
.reg-row .t { font-weight: 500; }
.reg-row .m { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }

.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.filters select.input, .filters input.input { width: auto; min-width: 150px; min-height: 36px; padding: 6px 10px; font-size: 13px; }
.filters select.input { padding-right: 32px; }
.fchip { padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 500; border: 1px solid var(--border); background: var(--surface); color: var(--ink-soft); }
.fchip.on { background: var(--ink); color: #fff; border-color: var(--ink); }

/* Detalhe / modal */
.overlay { position: fixed; inset: 0; background: rgba(28, 25, 23, .35); z-index: 40; display: flex; justify-content: flex-end; }
.drawer { width: min(520px, 100%); height: 100%; background: var(--surface); box-shadow: -8px 0 32px rgba(0,0,0,.12); display: flex; flex-direction: column; animation: slide .18s ease; }
@keyframes slide { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.drawer .dh { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--border); }
.drawer .db { flex: 1; overflow-y: auto; padding: 18px 22px; }
.drawer .df { border-top: 1px solid var(--border); padding: 12px 22px; display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
dl.kv { display: grid; grid-template-columns: 140px 1fr; gap: 8px 14px; margin: 0; font-size: 13px; }
dl.kv dt { color: var(--ink-faint); } dl.kv dd { margin: 0; }
.mail { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.mail .mh { background: var(--stone-50); padding: 10px 14px; font-size: 12px; color: var(--ink-soft); border-bottom: 1px solid var(--border); display: grid; gap: 2px; }
.mail .mh b { color: var(--ink); font-weight: 500; }
.mail pre { margin: 0; padding: 12px 14px; font: 13px/1.5 var(--font); white-space: pre-wrap; }

/* Toast */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px; font-size: 13px; z-index: 60; box-shadow: var(--shadow-md); display: flex; gap: 8px; align-items: center; animation: up .2s ease; max-width: calc(100% - 32px); }
@keyframes up { from { transform: translate(-50%, 8px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }

/* Sucesso */
.success { text-align: center; padding: 36px 24px; }
.success .big { width: 56px; height: 56px; border-radius: 50%; background: var(--ok-soft); color: var(--ok-ink); display: grid; place-items: center; margin: 0 auto 14px; }
.success h2 { font-size: 20px; font-weight: 600; }

/* Potencial */
.hero { background: linear-gradient(135deg, #14385A 0%, #1D2939 55%, #101828 100%); color: #fff; border-radius: 16px; padding: 32px; position: relative; overflow: hidden; }
.hero::after { content: ""; position: absolute; inset: auto -20% -60% -20%; height: 80%; background: radial-gradient(ellipse at center, rgba(52,139,226,.55), transparent 65%); pointer-events: none; }
.hero h1 { font-size: 26px; font-weight: 600; letter-spacing: -0.01em; position: relative; }
.hero p { margin-top: 8px; color: #E4E7EC; max-width: 640px; position: relative; font-size: 15px; }
.hero .badge { position: relative; background: rgba(255,255,255,.12); color: #fff; }
.pot { padding: 20px; display: flex; gap: 14px; }
.pot .ico { width: 40px; height: 40px; border-radius: var(--r-md); background: var(--primary-soft); color: var(--primary-ink); display: grid; place-items: center; flex-shrink: 0; }
.pot b { font-size: 15px; font-weight: 600; display: block; }
.pot p { font-size: 13px; color: var(--ink-soft); margin-top: 4px; }
.timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tl { padding: 16px 18px; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface); }
.tl.now { border-color: var(--primary); background: var(--primary-soft); }
.tl h3 { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.tl ul { margin: 0; padding-left: 16px; font-size: 13px; color: var(--ink-soft); display: grid; gap: 4px; }

/* Login */
.login { min-height: 100vh; width: 100%; display: flex; align-items: center; justify-content: center; padding: 24px 16px; background: var(--canvas); }
.login-card { width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 32px 28px; box-shadow: var(--shadow-md); }
.login-card h1 { font-size: 18px; font-weight: 600; text-align: center; letter-spacing: -0.01em; }
.login-mode .app { height: auto; overflow: visible; }
.embed .login { min-height: 100vh; }

/* Compartilhar · mockup de celular */
.share-grid { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 32px; align-items: start; }
.phone-wrap { width: 320px; height: 692px; }
.phone { width: 375px; height: 812px; transform: scale(.85); transform-origin: top left; background: #111; border-radius: 52px; padding: 12px; position: relative; box-shadow: 0 24px 60px rgba(28,25,23,.25), inset 0 0 0 2px #3a3a3a; }
.phone .island { position: absolute; top: 24px; left: 50%; transform: translateX(-50%); width: 110px; height: 32px; background: #111; border-radius: 20px; z-index: 2; }
.phone .screen { width: 100%; height: 100%; border-radius: 40px; overflow: hidden; background: var(--canvas); }
.phone iframe { width: 100%; height: 100%; border: 0; display: block; }
.embed .sidebar, .embed .topbar, .embed .fab, .embed .no-embed, .embed .scrim { display: none !important; }
.embed .content { padding: 52px 16px 40px; }
.embed .page-head { margin-bottom: 16px; }
@media (max-width: 900px) { .share-grid { grid-template-columns: minmax(0, 1fr); justify-items: center; } .phone-wrap { width: 300px; height: 650px; } .phone { transform: scale(.8); } }

/* Config */
.cfg-card { padding: 20px; display: flex; flex-direction: column; }
.cfg-card .row.between { margin-top: auto; }
.cfg-list { display: flex; flex-direction: column; }
.cfg-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border-soft); font-size: 13px; }
.cfg-item:last-child { border-bottom: 0; }
.cfg-item .x { color: var(--ink-faint); padding: 4px; border-radius: 6px; }
.cfg-item .x:hover { color: var(--err-ink); background: var(--err-soft); }
.cfg-add { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.cfg-add .input { flex: 1; min-width: 140px; min-height: 36px; padding: 6px 10px; font-size: 13px; }

/* Mobile */
.fab { display: none; }
@media (max-width: 1100px) { .grid.kpis { grid-template-columns: repeat(3, 1fr); } .grid.four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) {
  .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 50; transform: translateX(-100%); box-shadow: var(--shadow-md); }
  .sidebar.open { transform: none; }
  .sidebar .close { display: inline-flex; margin-left: auto; color: var(--ink-soft); }
  .scrim { position: fixed; inset: 0; background: rgba(28,25,23,.35); z-index: 45; }
  .topbar { padding: 0 16px; }
  .topbar .menu { display: inline-flex; color: var(--ink-soft); }
  .topbar .user-name { display: none; }
  .content { padding: 16px 16px 96px; }
  .grid.two, .grid.three { grid-template-columns: minmax(0, 1fr); }
  .grid.kpis, .grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .span-2 { grid-column: auto; }
  .page-head h1 { font-size: 20px; }
  .form-grid { grid-template-columns: 1fr; }
  .bars .brow { grid-template-columns: 110px 1fr auto; }
  .steps { gap: 6px; }
  .step span.t { display: none; }
  .step { justify-content: center; }
  .choice-grid { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: 1fr; }
  dl.kv { grid-template-columns: 110px 1fr; }
  .fab { display: inline-flex; position: fixed; right: 16px; bottom: 20px; z-index: 30; border-radius: 999px; padding: 12px 18px; box-shadow: var(--shadow-md); }
}
@media (max-width: 560px) { .grid.kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid.four { grid-template-columns: minmax(0, 1fr); } .stat .val { font-size: 22px; } }