/* ==============================================================================
   MARCA CRG ESQUADRIAS + TEMA ESCURO (só a página inicial; carregado por último
   em views/layouts/header_crg.php). Itens A–E do protótipo aprovado:
   A logo no topo · B hero com o símbolo · C prévia em prancheta · D "Sua proposta"
   · E ícones de tipologia. tokens.css e a página atual não mudam.
   ============================================================================== */

/* ------------------------------------------------------------------------------
   TOKENS DA MARCA (claro). O vidro do símbolo é o próprio accent (Safira).
   ------------------------------------------------------------------------------ */
:root {
  --brand-graphite: #1D2430;          /* perfil anodizado escuro: traço do logo */
  --brand-aluminum: #A7AEB8;          /* alumínio natural: cotas e ícones de tipologia */
  --crg-glass: var(--accent);         /* folha de vidro dos symbols (crg_marca.php) */
  --canvas-grid: rgba(0, 0, 0, .05);  /* quadriculado da prancheta */
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --segment-active-bg: var(--bg-surface);
}

/* ------------------------------------------------------------------------------
   A. LOGO NO TOPO (inline: segue a cor do tema) e no rodapé
   ------------------------------------------------------------------------------ */
.crg-logo { color: var(--brand-graphite); }
.site-nav-logo.crg-logo { width: auto; aspect-ratio: 196 / 58; }

/* A folha de vidro do símbolo desliza para o lugar ao abrir */
/* .crg-slide-glass está no <symbol> (crg_marca.php): a regra vale para as cópias do <use> */
.crg-slide-glass,
.crg-hero-folha { animation: crg-slide 1.4s var(--ease-spring) .3s both; }
@keyframes crg-slide { from { transform: translateX(-9px); } to { transform: none; } }
.crg-hero-folha { animation-name: crg-slide-hero; }
@keyframes crg-slide-hero { from { transform: translateX(-56px); opacity: .4; } to { transform: none; opacity: 1; } }

/* Botão de tema (sol/lua): mostra o ícone do tema para onde leva */
.crg-theme-toggle.btn-tertiary { color: var(--text-secondary); font-size: 18px; }
.crg-theme-toggle.btn-tertiary:hover { color: var(--text); background: var(--fill-control); text-decoration: none; }
.crg-theme-toggle:focus-visible { box-shadow: var(--focus-ring); }
.crg-theme-ic-light { display: none; }
:root[data-theme="dark"] .crg-theme-ic-light { display: inline; }
:root[data-theme="dark"] .crg-theme-ic-dark { display: none; }

/* ------------------------------------------------------------------------------
   B. HERO (protótipo .m-hero): texto à esquerda e símbolo à direita no desktop;
   empilhado abaixo de 768px com a arte acima. Altura pelo conteúdo (sem 100vh).
   Garantias e nota numa faixa centralizada logo abaixo das duas colunas.
   ------------------------------------------------------------------------------ */
.crg-hero { text-align: left; padding: var(--space-16) 0 var(--space-12); }
/* Mesma largura/margens do simulador (.container-app), que o .hero-inner de site-hero.css estreita */
.crg-hero .hero-inner { max-width: 1760px; padding-inline: clamp(16px, 4vw, 56px); }
/* O "padding: … 0" do .how (site-hero.css) zera o respiro lateral do .container-app */
.crg .how.container-app { padding-inline: clamp(16px, 4vw, 56px); }
.crg-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: var(--space-8) var(--space-12);
  align-items: center;
}
.crg-hero .hero-title { font-size: clamp(40px, 4.4vw, var(--fs-display)); }
.crg-hero .hero-lead { max-width: 52ch; margin: 0 0 var(--space-8); }
.crg-hero .hero-ctas { justify-content: flex-start; }
/* Telas pequenas: botões compactos lado a lado (alvo de toque de 44px); só quebram se não couberem.
   "Simular agora" do topo fica com 36px visíveis e a área de toque estendida a 44px pelo ::before. */
@media (max-width: 767.98px) {
  .crg-hero .hero-ctas { gap: var(--space-2); }
  .crg-hero .hero-ctas .btn-lg {
    flex: 0 1 auto;
    white-space: nowrap;
    min-height: var(--tap);
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    font-size: 14px;
  }
  .crg .site-nav-cta.btn-sm {
    position: relative;
    min-height: 36px;
    padding-left: var(--space-3);
    padding-right: var(--space-3);
    font-size: 13px;
  }
  .crg .site-nav-cta.btn-sm::before { content: ""; position: absolute; inset: -4px 0; }
  /* Rodapé do wizard (Voltar / Avançar) no mesmo tamanho compacto */
  .crg .sim-wizard-footer .btn-lg {
    min-height: var(--tap);
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    font-size: 15px;
  }
}
.hero-art.crg-hero-art { width: min(400px, 100%); margin: 0 auto; }
.crg-hero .hero-guarantees {
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--separator);
}
.crg-hero .hero-note { text-align: center; }
@media (max-width: 767.98px) {
  .crg-hero { padding: var(--space-8) 0 var(--space-10); }
  .crg-hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  /* A arte vem depois do texto e dos botões (ordem do DOM) */
  .hero-art.crg-hero-art { width: min(280px, 72%); }
  .crg-hero .hero-guarantees { margin-top: var(--space-8); flex-direction: column; align-items: center; text-align: center; }
  .crg-hero .hero-note { text-align: center; }
}
/* Subtítulo "Alumínio e vidro sob medida": logo abaixo do título, antes do parágrafo */
.crg-hero .hero-eyebrow {
  display: block;
  margin: var(--space-3) 0 var(--space-4);
  font-size: var(--fs-headline);
  line-height: 1.3;
  font-weight: 600;
  color: var(--accent-text);
}
.crg-hero-art svg { display: block; width: 100%; height: auto; overflow: visible; }
.crg-hero-cotas { stroke: var(--brand-aluminum); }
.crg-hero-caixilho { stroke: var(--brand-graphite); }
.crg-hero-folha rect { fill: var(--crg-glass); }

/* ------------------------------------------------------------------------------
   C. PRÉVIA COM CARA DE PRANCHETA: quadriculado leve, cotas mono em Safira
   ------------------------------------------------------------------------------ */
.sim-preview-card .preview-stage {
  background:
    linear-gradient(var(--canvas-grid) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, var(--canvas-grid) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--bg-grouped);
}
.sim-preview-card .dimension-line-h,
.sim-preview-card .dimension-line-v { color: var(--brand-aluminum); }
.sim-preview-card .preview-dim-label {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--accent-text);
}

/* Marcação de planta (J1, P1, B1, E1…): caixa com borda grafite em mono */
.crg-mark-code {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  min-width: 30px;
  height: 22px;
  padding: 0 6px;
  border: 1.5px solid var(--brand-graphite);
  border-radius: 6px;
  color: var(--brand-graphite);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
/* No badge do modelo a marcação herda a cor do badge e substitui a bolinha */
.sim-preview-badge .crg-badge-mark { min-width: 24px; height: 18px; font-size: 11px; border-color: currentColor; color: inherit; }
.sim-preview-badge:has(.crg-badge-mark:not(.d-none))::before { display: none; }

/* ------------------------------------------------------------------------------
   D. "SUA PROPOSTA" (partials/resumo_crg.php): card fixo na coluna da prévia; a
   lista rola sozinha (~3 linhas) e a prévia fica com o resto da altura
   ------------------------------------------------------------------------------ */
.crg-proposta {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-card);
  background: var(--bg-surface);
  box-shadow: var(--shadow-card);
  color: var(--text);
}
.crg-proposta-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.crg-proposta-title {
  margin: 0;
  font-size: var(--fs-headline);
  line-height: var(--lh-headline);
  font-weight: var(--fw-headline);
  letter-spacing: var(--ls-headline);
  color: var(--text);
}

.crg-proposta-list {
  position: relative;          /* offsetTop das linhas relativo à lista (rolagem no simulator.js) */
  margin: 0 -4px;
  padding: 0 4px;              /* respiro para o anel de foco não ser cortado */
  list-style: none;
  max-height: min(234px, 30vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--fill-control-hover) transparent;
}
.crg-proposta-list:empty { display: none; }
.crg-proposta-title:focus { outline: none; }

/* Telas baixas (1280x720, 1366x768): a lista mostra ~1,5 linha e o palco aceita menos altura,
   para prévia + proposta caberem na coluna sem sobreposição */
@media (min-width: 992px) and (max-height: 800px) {
  .crg-proposta { gap: var(--space-2); padding: var(--space-3) var(--space-4); }
  .crg-proposta-list { max-height: 84px; }
  .sim-preview-card .preview-stage,
  .sim-preview-card .sim-preview-photos:not(.d-none) { min-height: 120px; }
}

.crg-proposta-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--separator);
}
.crg-proposta-row:first-child { border-top: 0; }
.crg-proposta-text { display: flex; flex-direction: column; min-width: 0; }
.crg-proposta-name,
.crg-proposta-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crg-proposta-name { font-size: var(--fs-callout); line-height: var(--lh-callout); font-weight: 600; }
.crg-proposta-meta { font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--text-secondary); }
.crg-proposta-actions { display: flex; align-items: center; gap: 2px; }
.crg-proposta-edit {
  min-height: var(--tap);
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--accent-text);
  font: inherit;
  font-size: var(--fs-footnote);
  font-weight: 600;
  cursor: pointer;
}
.crg-proposta-edit:hover { background: var(--accent-tint); }
.crg-proposta-edit:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* Item em edição: marcação e nome em Safira (não depende só de cor: o Editar tem aria-current) */
.crg-proposta-row.is-editing .crg-mark-code { border-color: var(--accent); color: var(--accent-text); background: var(--accent-tint); }
.crg-proposta-row.is-editing .crg-proposta-name { color: var(--accent-text); }

.crg-proposta-foot { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3) var(--space-4); }
.crg-proposta-foot .price-teaser-box { text-align: left; }
.crg-proposta-foot .unlock-gate { flex: 1 1 200px; }
.crg-proposta-foot .unlock-gate-btn { width: 100%; }

/* Sheet inferior: respiro nas laterais para o card não encostar na borda nem cortar o anel de foco */
.crg .mobile-sheet-items { padding: 4px var(--space-3) var(--space-2); }
/* × do sheet (modo lista): alvo de 44px ao lado do Editar, sem encolher */
.crg .mobile-sheet-item { gap: var(--space-1); }
.crg .mobile-sheet-item-text { margin-right: var(--space-2); }
.crg .mobile-sheet-remove { flex: 0 0 auto; }

/* Aviso legal (página inicial, fora da coluna sticky): nota compacta à esquerda; no desktop com a
   largura da coluna da prévia (a do wizard é minmax(360px, 400px) e fica em 400px a partir de 992px) */
.crg .sim-section .crg-aviso-legal { margin: var(--space-8) 0 0; text-align: left; }
@media (min-width: 992px) {
  .crg .sim-section .crg-aviso-legal { max-width: calc(100% - 400px - var(--space-8)); }
}

/* Modal "Como funciona" (abaixo de 992px): os passos da seção em lista numerada */
.crg-how-list { display: flex; flex-direction: column; gap: var(--space-5); margin: 0; padding: 0; list-style: none; }
.crg-how-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.crg-how-item .how-step-num { margin: 0; min-width: 2ch; }

/* Contraste >= 4,5:1 nos dois temas (os tokens padrão ficam abaixo) */
.crg .preview-specs-list .spec-sep { color: var(--text-secondary); }
.crg .wa-float-btn { background: #167A40; }
.crg .wa-float-btn:hover { background: #126A37; }
/* WhatsApp flutuante só com o ícone (o nome fica no aria-label): círculo de 48px em todas as telas */
.crg .wa-float-btn { width: 48px; height: 48px; padding: 0; gap: 0; }
.crg .wa-float-btn i { font-size: 1.5rem; }
/* Desktop: com a coluna do wizard rente ao pé da tela, o "Avançar" ficaria sob o círculo
   (topo dele a 20 + 48 = 68px do pé; a coluna termina a 16px). Reserva 68 - 16 + 8 de folga.
   Sem a nota de edição nesta página, a regra .sim-wizard-footnote { padding-right } não se aplica. */
@media (min-width: 992px) {
  .crg .sim-wizard .sim-wizard-footer { margin-bottom: calc(48px + var(--space-5) - var(--space-4) + var(--space-2)); }
}

/* Bottom sheet e modal de itens: a marcação fica um pouco menor ao lado do nome */
.mobile-sheet-item-name .crg-mark-code,
.quote-items-modal-name .crg-mark-code { min-width: 26px; height: 20px; margin-right: 4px; font-size: 11px; vertical-align: 1px; }

/* ------------------------------------------------------------------------------
   E. ÍCONES DE TIPOLOGIA no traço da marca (modelos sem imagem); selecionado com
   borda Safira e fundo de vidro claro
   ------------------------------------------------------------------------------ */
.crg-defs-host { position: absolute; }   /* <svg> dos symbols: sem atributo style (CSP style-src 'self') */
.crg-tipo-ic { width: 44px; height: 36px; flex: none; color: var(--brand-aluminum); transition: color var(--dur-fast) ease; }
/* Folha de vidro do ícone: herda --crg-ic-vidro-op pelo <use> (traço + vidro) */
.crg-ic-vidro { fill: var(--crg-glass); fill-opacity: var(--crg-ic-vidro-op, 0); transition: fill-opacity var(--dur-fast) ease; }
.crg-tipo-ic { --crg-ic-vidro-op: .10; }
.typology-card:hover .crg-tipo-ic { color: var(--text-secondary); --crg-ic-vidro-op: .16; }
.typology-card.selected { background: var(--accent-tint); }
.typology-card.selected .crg-tipo-ic { color: var(--accent); --crg-ic-vidro-op: .24; }
/* Selo da prévia: ícone pequeno na cor do selo, vidro um pouco mais presente */
.preview-typology-icon .crg-tipo-ic { width: 18px; height: 15px; color: currentColor; --crg-ic-vidro-op: .24; }

/* ==============================================================================
   TEMA ESCURO (data-theme="dark" no <html>, aplicado no <head>; data-bs-theme
   acompanha para os componentes do Bootstrap). Redefine os tokens de tokens.css.
   ============================================================================== */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg-page: #000000;
  --bg-surface: #1C1C1E;
  --bg-grouped: #151517;
  --text: #F5F5F7;
  --text-secondary: #A1A1A6;
  --text-tertiary: #6E6E73;
  --separator: rgba(255, 255, 255, .12);
  --fill-control: rgba(118, 118, 128, .24);
  --fill-control-hover: rgba(118, 118, 128, .32);

  --accent: #3D8BFF;
  --accent-hover: #5C9DFF;
  --accent-tint: rgba(61, 139, 255, .16);
  --accent-text: #5C9DFF;
  --focus-ring: 0 0 0 4px rgba(61, 139, 255, .4);

  --dark-bg: #1C1C1E;

  /* WhatsApp continua o verde escuro: texto branco precisa de contraste */
  --danger: #FF6B60;
  --danger-tint: rgba(255, 69, 58, .18);
  --success: #30D158;
  --success-tint: rgba(48, 209, 88, .18);

  --status-novo: #5C9DFF;             --status-novo-bg: rgba(61, 139, 255, .18);
  --status-em-atendimento: #FFB340;   --status-em-atendimento-bg: rgba(255, 159, 10, .18);
  --status-medicao-agendada: #B79CFF; --status-medicao-agendada-bg: rgba(140, 100, 255, .2);
  --status-fechado: #30D158;          --status-fechado-bg: rgba(48, 209, 88, .18);
  --status-cancelado: #FF6B60;        --status-cancelado-bg: rgba(255, 69, 58, .18);
  --entrega-futuro: #A1A1A6;          --entrega-futuro-bg: rgba(118, 118, 128, .24);

  --material-bg: rgba(28, 28, 30, .72);
  --scrim: rgba(0, 0, 0, .6);

  --shadow-card: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .4);
  --shadow-sheet: 0 24px 64px rgba(0, 0, 0, .6);
  --shadow-segment: 0 1px 3px rgba(0, 0, 0, .5);
  --shadow-edge: 0 1px 0 rgba(255, 255, 255, .08);

  --canvas-bg: #151517;
  --canvas-grid: rgba(255, 255, 255, .06);
  --paper-edge: rgba(255, 255, 255, .14);
  --swatch-edge: rgba(255, 255, 255, .24);
  --skeleton-a: #2C2C2E;
  --skeleton-b: #3A3A3C;

  --brand-graphite: #E6E9EE;
  --brand-aluminum: #6B7380;
  --segment-active-bg: #636366;       /* segmento ativo elevado sobre o trilho escuro */
}

/* Prancheta da prévia: continua uma folha clara no escuro, porque a ilustração SVG
   (ilustracao.js) e o quadro em CSS usam cores fixas claras. Os tokens voltam aos
   valores claros só dentro do palco, então cotas e textos seguem legíveis sobre ela. */
:root[data-theme="dark"] .sim-preview-card .sim-preview-stage,
:root[data-theme="dark"] .sim-preview-card .preview-stage {
  --bg-grouped: #FBFBFD;
  --text: #1D1D1F;
  --text-secondary: #6E6E73;
  --accent: #0A64D6;
  --accent-text: #0A64D6;
  --canvas-grid: rgba(0, 0, 0, .05);
  --brand-aluminum: #8A929E;
  color: var(--text);
}

/* Cores fixas dos CSS do site que não vêm de token */
:root[data-theme="dark"] .site-nav { box-shadow: var(--shadow-edge), 0 6px 20px rgba(0, 0, 0, .4); }
:root[data-theme="dark"] .legal-disclaimer-box {
  background: rgba(255, 159, 10, .12);
  border-color: rgba(255, 159, 10, .25);
  border-left-color: #F59E0B;
  color: #FFD08A;
}
:root[data-theme="dark"] .sim-section .quote-tray-disclaimer { background: transparent; color: var(--text-secondary); }
:root[data-theme="dark"] .segmented .btn-check:checked + .segmented-item,
:root[data-theme="dark"] .segmented-item.active,
:root[data-theme="dark"] .segmented-item[aria-pressed="true"],
:root[data-theme="dark"] .segmented-item[aria-selected="true"],
:root[data-theme="dark"] .segmented-item[aria-checked="true"],
:root[data-theme="dark"] .preview-mode-btn.active { background: var(--segment-active-bg); color: var(--text); }
:root[data-theme="dark"] .preview-typology-icon { background: rgba(255, 255, 255, .12); }
:root[data-theme="dark"] .mobile-sheet-grip { background: rgba(235, 235, 245, .3); }
:root[data-theme="dark"] .mobile-sheet-item { box-shadow: 0 0 0 1px var(--separator); }
:root[data-theme="dark"] .mobile-sheet-item.is-editing { box-shadow: 0 0 0 2px var(--accent); }
/* Swatch preto sumiria no fundo escuro: só um fio claro em volta (a cor não muda) */
:root[data-theme="dark"] .swatch-circle { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
:root[data-theme="dark"] .typology-icon-box:has(img) { background: #FFFFFF; }   /* fotos/PNGs com fundo claro */
:root[data-theme="dark"] .form-switch .form-check-input::after { box-shadow: 0 2px 4px rgba(0, 0, 0, .5); }
:root[data-theme="dark"] .btn-whatsapp { background: var(--whatsapp); box-shadow: var(--shadow-card); }
:root[data-theme="dark"] .btn-whatsapp:hover { background: var(--whatsapp-hover); }
/* Bootstrap: textos utilitários e campos dos modais seguem os tokens */
:root[data-theme="dark"] .text-secondary { color: var(--text-secondary) !important; }
:root[data-theme="dark"] .modal-content { --bs-modal-bg: var(--bg-surface); --bs-modal-color: var(--text); }

/* Preferências do sistema no escuro: tokens.css força o material claro (#FBFBFD) e
   tons de contraste pensados para o claro; aqui ficam as versões escuras */
@media (prefers-reduced-transparency: reduce) {
  :root[data-theme="dark"] { --material-bg: #1C1C1E; }
  :root[data-theme="dark"] .material { background: #1C1C1E !important; }
}
@media (prefers-contrast: more) {
  :root[data-theme="dark"] {
    --text-secondary: #D1D1D6;
    --separator: rgba(255, 255, 255, .3);
    --fill-control: rgba(118, 118, 128, .4);
    --accent: #5C9DFF;
    --accent-text: #7DB1FF;
    --material-bg: #1C1C1E;
  }
  :root[data-theme="dark"] .material { background: #1C1C1E !important; }
}

/* ------------------------------------------------------------------------------
   ESCURO: estado atual/selecionado bem distinguível (azul sólido + texto branco,
   anel e borda; inativos ficam apagados). O tema claro não muda.
   ------------------------------------------------------------------------------ */
:root[data-theme="dark"] { --crg-sel: #2A6FE0; --crg-sel-ring: #FFFFFF; }   /* branco sobre #2A6FE0 = 4,9:1 */

/* Segmented (modo da prévia, wizard, etc.): ativo azul sólido; inativo texto secundário */
:root[data-theme="dark"] .segmented-item { color: var(--text-secondary); }
:root[data-theme="dark"] .segmented .btn-check:checked + .segmented-item,
:root[data-theme="dark"] .segmented-item.active,
:root[data-theme="dark"] .segmented-item[aria-pressed="true"],
:root[data-theme="dark"] .segmented-item[aria-selected="true"],
:root[data-theme="dark"] .segmented-item[aria-checked="true"],
:root[data-theme="dark"] .preview-mode-btn.active {
  background: var(--crg-sel);
  color: #FFFFFF;
  font-weight: 700;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55);
}
/* Etapas do wizard em segmented (mobile) */
@media (max-width: 767.98px) {
  :root[data-theme="dark"] .sim-steps .wizard-step .wizard-step-label { color: var(--text-secondary); }
  :root[data-theme="dark"] .sim-steps .wizard-step.active { background: var(--crg-sel); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55); }
  :root[data-theme="dark"] .sim-steps .wizard-step.active .wizard-step-label { color: #FFFFFF; font-weight: 700; }
  :root[data-theme="dark"] .sim-steps .wizard-step.is-done:not(.active) .wizard-step-label { color: var(--accent-text); }
}

/* Stepper: futura = pontilhada e apagada; concluída = contorno azul; atual = sólida com anel */
:root[data-theme="dark"] .step-item { color: var(--text-tertiary); }
:root[data-theme="dark"] .step-item .step-dot { background: transparent; color: var(--text-tertiary); box-shadow: inset 0 0 0 1.5px var(--text-tertiary); }
:root[data-theme="dark"] .step-item.is-done { color: var(--accent-text); }
:root[data-theme="dark"] .step-item.is-done .step-dot { background: var(--accent-tint); color: var(--accent-text); box-shadow: inset 0 0 0 1.5px var(--accent-text); }
:root[data-theme="dark"] .step-item.is-current,
:root[data-theme="dark"] .step-item[aria-current="step"] { color: #FFFFFF; font-weight: 700; }
:root[data-theme="dark"] .step-item.is-current .step-dot,
:root[data-theme="dark"] .step-item[aria-current="step"] .step-dot { background: var(--crg-sel); color: #FFFFFF; box-shadow: 0 0 0 2px var(--bg-surface), 0 0 0 4px var(--crg-sel-ring); }

/* Card de tipologia selecionado: fundo azul, borda 2px e anel claro */
:root[data-theme="dark"] .typology-card.selected {
  background: rgba(61, 139, 255, .30);
  box-shadow: 0 0 0 2px var(--accent), 0 0 0 4px rgba(255, 255, 255, .35);
}
:root[data-theme="dark"] .typology-card.selected:focus-visible { box-shadow: 0 0 0 2px var(--accent), var(--focus-ring); }
:root[data-theme="dark"] .typology-card.selected .crg-tipo-ic { color: #FFFFFF; }   /* Safira sobre o card azul perde contraste */

/* Swatches e opções de vidro selecionados: anel branco + azul */
:root[data-theme="dark"] .swatch-option input[type="radio"]:checked + .swatch-label .swatch-circle {
  box-shadow: 0 0 0 2px var(--bg-surface), 0 0 0 4px var(--crg-sel-ring), 0 0 0 6px var(--accent);
}
:root[data-theme="dark"] #group_vidro_tipo .swatch-option input:checked + .swatch-label {
  background: rgba(61, 139, 255, .26);
  box-shadow: 0 0 0 2px var(--accent);
}

/* ------------------------------------------------------------------------------
   Cabeçalho da prévia em telas pequenas: sem o rótulo visível (continua para o
   leitor de tela), badge à esquerda e switch compacto à direita, numa linha só
   ------------------------------------------------------------------------------ */
@media (max-width: 767.98px) {
  .sim-preview-card .sim-preview-head { flex-wrap: nowrap; gap: var(--space-2); }
  .sim-preview-card .sim-preview-title { flex: 1 1 auto; flex-wrap: nowrap; min-width: 0; }
  .sim-preview-card .sim-preview-title .t-section-label {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
  .sim-preview-card .sim-preview-badge { min-width: 0; max-width: 100%; }
  .sim-preview-card .sim-preview-badge #preview_typology_badge_text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sim-preview-card .preview-mode-switch.segmented { flex: 0 0 auto; margin: 0; padding: 2px; }
  .sim-preview-card .preview-mode-switch .segmented-item { min-height: 30px; padding: 0 var(--space-2); font-size: 12px; }
}

/* Menos movimento: a folha já nasce no lugar (tokens.css também zera animações) */
@media (prefers-reduced-motion: reduce) {
  .crg-tipo-ic,
  .crg-ic-vidro { transition: none; }
  .crg-slide-glass,
  .crg-hero-folha { animation: none; }
}