/* Página «Áreas da proposta»: cada área com Hoje (CSS servido em 4do.io, valores copiados de AppShell.module.css
   e tokens.css) ao lado da Proposta (proposta.css). */

/* Tokens de hoje (shared/ui/theme/tokens.css), só dentro de .hoje */
:root, :root[data-theme="light"] {
  --h-bg: #f8f9fe; --h-surface: #ffffff; --h-surface-2: #eef1fa; --h-border: #c3ccde; --h-line: #647390; --h-text: #050823; --h-muted: #495777;
  --h-primary: #7100be; --h-accent: #01e2fe; --h-accent-ink: #010214; --h-chip: #f1e6fb; --h-side: #eef1fa; --h-side-text: #495777;
  --h-ok: #0b6b57; --h-ok-bg: #e0f5ef; --h-danger: #790b39; --h-danger-bg: #fde8ef;
}
:root[data-theme="dark"] {
  --h-bg: #010214; --h-surface: #101731; --h-surface-2: #050823; --h-border: #303b60; --h-line: #69799e; --h-text: #f8f9fe; --h-muted: #b6c0dd;
  --h-primary: #cc9bff; --h-accent: #01e2fe; --h-accent-ink: #010214; --h-chip: #241a4d; --h-side: #050823; --h-side-text: #b6c0dd;
  --h-ok: #5eead4; --h-ok-bg: #0b2b33; --h-danger: #ffb8ce; --h-danger-bg: #3a0f22;
}

.pagina { max-width: 1360px; margin: 0 auto; padding: var(--s6) clamp(var(--s4), 3vw, var(--s7)) var(--s7); }
.pagina > h1 { font-size: var(--t-2xl); font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.pagina > p { max-width: 70ch; margin-top: var(--s3); color: var(--ink-2); }
.indice { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s5) 0 var(--s6); }
.indice a { padding: 6px 14px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink); font-size: var(--t-sm); font-weight: 600; text-decoration: none; }
.indice a:hover { background: var(--surface-2); }

.area-bloco { margin-bottom: var(--s7); scroll-margin-top: 80px; }
.area-bloco > header { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s3); margin-bottom: var(--s4); padding-bottom: var(--s3); border-bottom: 1px solid var(--line); }
.area-bloco > header span { font: 400 12px var(--mono); color: var(--ink-3); }
.area-bloco > header h2 { font-size: var(--t-xl); font-weight: 600; letter-spacing: -.01em; }
.lado { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.painel { min-width: 0; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.painel > .rot { display: flex; align-items: center; gap: var(--s2); padding: 10px var(--s4); background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: var(--t-xs); font-weight: 600; color: var(--ink-2); }
.painel > .rot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.painel.novo > .rot::before { background: var(--brand); }
.painel > .palco-mini { padding: var(--s5); min-width: 0; overflow: hidden; }
.porque { margin-top: var(--s3); display: grid; gap: var(--s2); padding-left: 0; list-style: none; }
.porque li { position: relative; padding-left: 20px; font-size: var(--t-sm); color: var(--ink-2); }
.porque li::before { content: ""; position: absolute; left: 4px; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
.porque b { color: var(--ink); font-weight: 600; }

/* ── HOJE: reprodução do CSS servido ── */
.hoje { font: 400 15px/1.55 "Montserrat 4DO", Arial, sans-serif; color: var(--h-text); }
.hoje .top { display: flex; align-items: center; gap: 16px; min-height: 68px; padding: 8px 20px; background: var(--h-bg); border: 1px solid var(--h-border); border-radius: 8px; }
.hoje .brand { display: flex; align-items: center; gap: 14px; }
.hoje .brand svg { width: 64px; color: var(--h-text); }
.hoje .brand span { font: 11px var(--mono); letter-spacing: .14em; border-left: 1px solid var(--h-line); padding-left: 14px; }
.hoje .company { min-height: 44px; padding: 8px 14px; border: 1px solid var(--h-line); border-radius: 10px; background: var(--h-surface); color: var(--h-text); font-size: 14px; font-weight: 600; }
.hoje .find { min-height: 44px; flex: 1; min-width: 0; padding: 8px 18px; border: 1px solid var(--h-border); border-radius: 999px; background: var(--h-surface-2); color: var(--h-muted); font-size: 14px; }
.hoje .primary { background: var(--h-accent); color: var(--h-accent-ink); border: 0; border-radius: 999px; min-height: 46px; padding: 10px 28px; font-weight: 600; }
.hoje .ghost { background: none; color: var(--h-text); border: 1.5px solid var(--h-line); border-radius: 999px; min-height: 44px; padding: 8px 20px; font-size: 13px; font-weight: 600; }
.hoje .btn { min-height: 34px; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--h-line); background: var(--h-surface-2); color: var(--h-text); }
.hoje .primaryV { min-height: 40px; padding: 8px 16px; border-radius: 8px; border: 1px solid var(--h-primary); background: var(--h-primary); color: var(--h-accent-ink); font-weight: 600; }
.hoje .side { width: 264px; max-width: 100%; padding: 18px 12px; background: var(--h-side); border: 1px solid var(--h-border); border-radius: 8px; display: grid; gap: 2px; }
.hoje .sideTitle { font: 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--h-muted); padding: 0 12px 6px; }
.hoje .group { display: flex; align-items: center; min-height: 44px; padding: 8px 12px; border-radius: 10px; color: var(--h-side-text); font-size: 14px; }
.hoje .group[aria-current] { background: var(--h-surface); color: var(--h-text); font-weight: 600; box-shadow: inset 3px 0 0 var(--h-accent); }
.hoje .input { min-height: 44px; padding: 10px 11px; border: 1px solid var(--h-line); border-radius: 8px; background: var(--h-surface); color: var(--h-text); font-size: 14px; }
.hoje .kicker { color: var(--h-primary); font: 600 11px/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.hoje .pill { display: inline-block; padding: 1px 7px; border: 1px solid #0e7490; border-radius: 999px; color: #0e7490; font: 700 10px var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.hoje .tabsH { display: flex; gap: 6px; }
.hoje .tabsH span { padding: 8px 14px; border-radius: 999px; font-size: 14px; color: var(--h-muted); }
.hoje .tabsH span[aria-current] { background: var(--h-surface); color: var(--h-text); font-weight: 600; box-shadow: 0 0 0 1px var(--h-border); }

/* ── Amostras ── */
.fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.fila + .fila { margin-top: var(--s4); }
.leg { display: block; margin-bottom: var(--s2); font: 400 12px var(--mono); color: var(--ink-3); }
.amostras { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s3); }
.amostra { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
.amostra i { display: block; height: 52px; border-bottom: 1px solid var(--line); }
.amostra div { padding: 8px 10px; }
.amostra b { display: block; font-size: var(--t-xs); font-weight: 600; }
.amostra span { font: 400 12px var(--mono); color: var(--ink-3); }
.escala { display: grid; gap: var(--s3); }
.escala div { display: flex; align-items: baseline; gap: var(--s4); }
.escala span:first-child { width: 96px; flex: none; font: 400 12px var(--mono); color: var(--ink-3); }

/* Botões da proposta: famílias e estados */
.b { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 44px; padding: 10px 24px; border-radius: 999px; border: 1.5px solid transparent; font: 600 var(--t-sm) var(--font); cursor: pointer; transition: box-shadow var(--dur), background var(--dur); }
.b.prim { background: var(--action); color: var(--action-ink); }
.b.prim:hover, .b.prim.h { box-shadow: 0 0 0 4px var(--surface-3); }
.b.sec { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.b.sec:hover, .b.sec.h { background: var(--surface-2); border-color: var(--ink-2); }
.b.ter { background: none; color: var(--brand); padding: 10px 12px; }
.b.ter:hover, .b.ter.h { background: var(--brand-wash); color: var(--brand-ink); }
.b.per { background: var(--bad); color: var(--surface); }
.b.per:hover, .b.per.h { box-shadow: 0 0 0 4px var(--bad-wash); }
.b.f { box-shadow: var(--focus); }
.b:disabled { background: var(--surface-2); color: var(--ink-3); border-color: var(--line); box-shadow: none; cursor: not-allowed; }
.b.peq { min-height: 36px; padding: 6px 16px; font-size: var(--t-xs); }

@media (max-width: 900px) { .lado { grid-template-columns: 1fr; } }
.lado.um { grid-template-columns: 1fr; }