/* Protótipo do Mapa · base compartilhada (participante, painel e índice).
 * Consome ../ds/tokens.css (cópia do design system da Viviane). Sem hex nem px crus. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--surface-page); color: var(--text-primary);
  font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-normal);
}
::selection { background: var(--surface-dourado); color: var(--text-onDourado); }
:focus-visible { outline: var(--outline-focus); outline-offset: var(--outline-focusOffset); }
.on-raiz :focus-visible { outline-color: var(--border-dourado); }
img, svg { display: block; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: var(--text-link); text-underline-offset: .2em; }
h1, h2, h3, h4 { margin: 0; line-height: var(--leading-titulo); letter-spacing: var(--tracking-titulo); }
p { margin: 0; }

.vp-icon { width: var(--size-icon-md); height: var(--size-icon-md); flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.vp-icon--sm { width: var(--size-icon-sm); height: var(--size-icon-sm); }

.voz { font-family: var(--font-serif); font-weight: var(--weight-light); line-height: var(--leading-voz); letter-spacing: var(--tracking-normal); }
.rotulo { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-rotulo); text-transform: uppercase; color: var(--text-secondary); }
.fio { display: block; width: var(--space-12); height: var(--border-fio); background: var(--surface-dourado); }

/* Botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--size-touchTarget); padding: 0 var(--space-6);
  background: var(--action-primary); color: var(--action-primaryText);
  border: 0; border-radius: var(--radius-none); cursor: pointer; text-decoration: none;
  font-size: var(--text-sm); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase;
  transition: color var(--motion-duration-fast) var(--motion-easing-standard), background var(--motion-duration-fast) var(--motion-easing-standard);
}
.btn:hover { color: var(--action-primaryHoverText); }
.btn[disabled] { background: var(--action-disabledBg); color: var(--action-disabledText); cursor: not-allowed; }
.btn--dourado { background: var(--action-secondary); color: var(--action-secondaryText); }
.btn--dourado:hover { color: var(--action-secondaryText); background: color-mix(in srgb, var(--action-secondary) 80%, var(--surface-primary)); }
.btn--linha { background: transparent; color: var(--text-primary); box-shadow: inset 0 0 0 var(--border-thin) var(--border-raiz); }
.btn--linha:hover { color: var(--text-primary); background: var(--surface-primary); }
.btn--texto { background: transparent; color: var(--text-secondary); padding: 0 var(--space-3); text-transform: none; letter-spacing: var(--tracking-normal); font-weight: var(--weight-medium); text-decoration: underline; }
.btn--texto:hover { color: var(--text-primary); }
.btn--bloco { width: 100%; }

.chip {
  display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide);
  background: var(--surface-subtle); color: var(--text-primary); white-space: nowrap;
}
.chip--raiz { background: var(--surface-raiz); color: var(--text-onRaiz); }
.chip--dourado { background: var(--surface-dourado); color: var(--text-onDourado); }
.chip--nevoa { background: color-mix(in srgb, var(--surface-nevoa) 40%, var(--surface-primary)); color: var(--text-primary); }
.chip--alerta { background: var(--feedback-warningSoft); color: var(--feedback-warningText); }
.chip--linha { background: transparent; box-shadow: inset 0 0 0 var(--border-hairline) var(--border-strong); }

/* Faixa de protótipo */
.faixa-proto {
  padding: var(--space-2) var(--space-4); text-align: center;
  background: var(--feedback-warningSoft); color: var(--feedback-warningText);
  font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide);
}
.faixa-proto a { color: inherit; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation: none !important; }
}