/* ==========================================================================
   SCALAFLOW 3D - MODERN SAAS STYLES & INTERFACE SYSTEM (V2 REFINED)
   ========================================================================== */

:root {
  --bg-main: #0a0e17;
  --bg-surface: #131a29;
  --bg-surface-elevated: #1b2438;
  --bg-card: #161e2e;
  --border-color: #243047;
  --border-subtle: #1e283d;

  --accent-gold: #d4af37;
  --accent-gold-hover: #b89728;
  --accent-cyan: #38bdf8;
  --accent-emerald: #10b981;
  --accent-rose: #f43f5e;
  --accent-amber: #f59e0b;

  --text-primary: #ffffff;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Safe Area Insets universais (iOS PWA / Dynamic Island / Home Indicator / Android) */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--bg-main);
  color: var(--text-primary);
  font-family: var(--font-sans);
  overflow: hidden;
  height: 100vh;
  width: 100vw;
}

/* Custom Scrollbar Fina e Escura */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--bg-main);
}
::-webkit-scrollbar-thumb {
  background: #2b3954;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent-gold);
}

/* --- TELA DE LOGIN (VIEW AUTH) ---

   `overflow-y: auto` + `margin: auto` no card, e nao `align-items: center`:
   a view e' `position: fixed; inset: 0` sobre um body que RECORTA
   (overflow: hidden). Centralizando com align-items, um card mais alto que a
   tela estoura para os DOIS lados e o topo fica inalcancavel — sem barra
   nenhuma. Com margin: auto o card centraliza quando cabe e encosta no topo
   (com a view rolando) quando nao cabe. */
#viewAuth,
#viewSessionError {
  display: flex;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  width: 100vw;
  background: radial-gradient(circle at center, #1b2438 0%, #0a0e17 100%);
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 24px 16px;
  box-sizing: border-box;
}

/* Texto de apoio da tela de falha de rede (ver #viewSessionError no index.html). */
.session-error-hint {
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
  margin: 14px 0 0;
}

.session-error-actions {
  margin-top: 18px;
}

.session-error-actions .btn-primary-auth,
.session-error-actions .btn-demo-outline {
  flex: 1;
  margin-top: 0;
}

.auth-card {
  width: 100%;
  max-width: 440px;
  margin: auto;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 36px 32px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}

.auth-brand {
  text-align: center;
  margin-bottom: 24px;
}

.auth-logo-badge {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--accent-gold) 0%, #996515 100%);
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  margin-bottom: 12px;
  box-shadow: 0 8px 20px rgba(212, 175, 55, 0.3);
}

.auth-logo-img {
  width: 76px;
  height: 76px;
  object-fit: contain;
  border-radius: 16px;
  display: inline-block;
  margin-bottom: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  background: rgba(255, 255, 255, 0.04);
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.auth-logo-img:hover {
  transform: scale(1.03);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
}

.auth-brand h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--text-primary);
}

.auth-brand p {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--text-secondary);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.auth-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.auth-group label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

.auth-group input,
.auth-group select,
.auth-group textarea {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 12px 14px;
  color: var(--text-primary);
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}

.auth-group input:focus,
.auth-group select:focus,
.auth-group textarea:focus {
  border-color: var(--accent-gold);
}

.btn-primary-auth {
  background: var(--accent-gold);
  color: #0f141c;
  font-weight: 700;
  border: none;
  border-radius: 8px;
  padding: 14px;
  font-size: 15px;
  cursor: pointer;
  margin-top: 8px;
  transition: background 0.2s, transform 0.1s;
}

.btn-primary-auth:hover {
  background: var(--accent-gold-hover);
}

.auth-error-banner {
  background: rgba(244, 63, 94, 0.15);
  border: 1px solid var(--accent-rose);
  color: var(--accent-rose);
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  display: none;
}

.auth-request-access {
  margin-top: 16px;
  text-align: center;
}

.auth-request-access .btn-demo-outline {
  width: 100%;
  padding: 10px 12px;
  font-size: 12px;
}

.auth-demo-shortcuts {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border-subtle);
  text-align: center;
}

.auth-demo-shortcuts p {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.demo-btn-row {
  display: flex;
  gap: 10px;
}

.btn-demo-outline {
  flex: 1;
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-demo-outline:hover {
  border-color: var(--accent-gold);
  color: var(--accent-gold);
}

/* --- PAINEL SUPERADMIN (VIEW SUPERADMIN) ---

   O `height` e' o que FAZ a rolagem existir. O body tem `overflow: hidden` e
   altura de viewport: quem cresce alem disso e' recortado, sem barra nenhuma.
   Com `min-height` (o que estava aqui) o painel crescia junto com o conteudo e
   o `overflow-y: auto` nunca tinha o que rolar — medido num viewport de 700px:
   painel de 1058px, `scrollHeight == clientHeight`, e os ultimos 358px
   inalcancaveis. 100dvh (com 100vh de fallback) usa a altura dinamica do
   celular, onde a barra do navegador aparece e some. */
#viewSuperadmin {
  display: none;
  background: var(--bg-main);
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.admin-header {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-color);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Fica colado no topo enquanto o painel rola: sem isso o titulo e o botao
     de sair desapareciam junto com o primeiro scroll. */
  position: sticky;
  top: 0;
  z-index: 5;
}

/*
 * Marca no console. A logo so' existia na tela de login; o superadmin e' a
 * primeira tela que a equipe abre todo dia.
 */
.admin-header-logo {
  width: 38px;
  height: 38px;
  object-fit: contain;
  border-radius: 10px;
  padding: 3px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.admin-header-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.admin-badge {
  background: rgba(244, 63, 94, 0.15);
  border: 1px solid var(--accent-rose);
  color: var(--accent-rose);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
}

.admin-container {
  max-width: 1200px;
  margin: 32px auto;
  padding: 0 20px 40px;
}

.admin-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}

.admin-stat-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.admin-stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: var(--bg-surface-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.admin-stat-value {
  font-size: 24px;
  font-weight: 800;
  color: var(--text-primary);
}

.admin-stat-label {
  font-size: 12px;
  color: var(--text-secondary);
}

.admin-section {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  margin-bottom: 24px;
  overflow: hidden;
}

.admin-section-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

/*
 * Aviso de trabalho da secao de solicitacoes.
 *
 * Antes era um <p> solto entre o cabecalho da secao e a tabela, sem hierarquia
 * nenhuma: parecia sobra de texto. Agora e' um cartao com icone, titulo e fundo
 * em gradiente com borda dourada — o olho acha a acao ("Crea Azienda") sem
 * precisar ler o paragrafo inteiro.
 */
.admin-callout {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 16px 20px 18px;
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px solid rgba(212, 175, 55, 0.32);
  background:
    linear-gradient(135deg, rgba(212, 175, 55, 0.12) 0%, rgba(212, 175, 55, 0.03) 55%, transparent 100%),
    var(--bg-surface-elevated);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.admin-callout-icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: linear-gradient(135deg, var(--accent-gold) 0%, #996515 100%);
  box-shadow: 0 6px 16px rgba(212, 175, 55, 0.28);
}

.admin-callout-body {
  min-width: 0;
}

.admin-callout-title {
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--accent-gold);
}

.admin-callout-text {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.admin-callout-text strong {
  color: var(--text-primary);
}

/*
 * Campo numerico do "Periodo di Prova" (superadmin).
 *
 * Duas herancas do `styles.css` legado — carregado ANTES deste — atrapalhavam
 * aqui: `* { box-sizing: border-box }` e `input, select { width: 100%;
 * min-height: 38px; margin-top: 5px; padding: 8px 10px }`, mais o
 * `input[type="number"] { padding-right: 48px }` (feito para os sufixos EUR/ml do
 * painel esquerdo). Somados, 48px + 10px de padding num input de 55px deixavam a
 * caixa de conteudo com 55 - 58 = -3px: os digitos nao apareciam, e o
 * `min-height`/`margin-top` jogavam o campo para fora do centro da pilula.
 *
 * Por isso os seletores do campo tem DUAS classes: (0,2,0) vence o (0,1,1) do
 * `input[type="number"]` legado sem precisar de `!important`.
 */
.admin-trial-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-trial-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  /* Altura casada com `.btn-primary` (min-height: 42px, em 70-dashboard-crm.css):
     com 34px a pilula ficava 8px mais baixa que o botao "Salva Giorni" ao lado.
     O par pílula+botao e' a unidade de linha deste painel — os dois medem 42px. */
  height: 42px;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: #0f172a;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.admin-trial-pill:focus-within {
  border-color: rgba(56, 189, 248, 0.55);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15);
}

.admin-trial-pill .admin-trial-days {
  flex: 0 0 auto;
  width: 62px;
  min-width: 62px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-sizing: border-box;
  color: #38bdf8;
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
  appearance: textfield;
  -moz-appearance: textfield;
}

/* As setinhas do Chromium nao aceitam style inline: exigem pseudo-elemento. */
.admin-trial-pill .admin-trial-days::-webkit-outer-spin-button,
.admin-trial-pill .admin-trial-days::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.admin-trial-unit {
  font-size: 12.5px;
  font-weight: 600;
  color: #94a3b8;
}

/*
 * Estado vazio da tabela de solicitacoes: era uma linha de texto perdida no
 * meio de uma tabela de seis colunas.
 */
.admin-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 30px 20px !important;
  text-align: center;
}

.admin-empty-state-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  background: var(--bg-surface-elevated);
  border: 1px dashed var(--border-color);
}

.admin-empty-state-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-secondary);
}

.admin-empty-state-hint {
  font-size: 12px;
  color: var(--text-muted);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
}

.admin-table th {
  text-align: left;
  padding: 12px 20px;
  font-size: 11px;
  color: var(--text-secondary);
  background: var(--bg-surface-elevated);
  border-bottom: 1px solid var(--border-color);
  text-transform: uppercase;
}

.admin-table td {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 13px;
}

/* Badges */
.badge {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
}
.badge-gold { background: rgba(212, 175, 55, 0.15); color: var(--accent-gold); border: 1px solid var(--accent-gold); }
.badge-cyan { background: rgba(56, 189, 248, 0.15); color: var(--accent-cyan); border: 1px solid var(--accent-cyan); }
.badge-rose { background: rgba(244, 63, 94, 0.15); color: var(--accent-rose); border: 1px solid var(--accent-rose); }
.badge-slate { background: var(--bg-surface-elevated); color: var(--text-secondary); }

/* Switch Toggle */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 22px;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; cursor: pointer; inset: 0;
  background-color: #334155;
  transition: .3s;
  border-radius: 22px;
}
.toggle-slider:before {
  position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px;
  background-color: white;
  transition: .3s;
  border-radius: 50%;
}
input:checked + .toggle-slider { background-color: var(--accent-emerald); }
input:checked + .toggle-slider:before { transform: translateX(16px); }

/* Admin Action Buttons */
.btn-admin-action {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #f1f5f9;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.btn-admin-action:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.28);
  transform: translateY(-1px);
}
.btn-admin-action.btn-admin-edit:hover {
  border-color: #38bdf8;
  color: #38bdf8;
}
.btn-admin-action.btn-admin-pw:hover {
  border-color: #fbbf24;
  color: #fbbf24;
}
.btn-admin-action.btn-admin-danger:hover {
  background: rgba(244, 63, 94, 0.15);
  border-color: #f43f5e;
  color: #f43f5e;
}
.admin-actions-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* --- HEADER SUPERIOR DO WORKSPACE (TOPBAR) --- */
/* Tokens do novo tema da topbar. Ficam ESCOPADOS aqui de propósito, e não no
   :root global (linha 5): --text-primary e --text-muted já existem lá com
   outros valores (#fff / #64748b), e redefini-los em :root mudaria o app
   inteiro — todo o styles_modern.css consome essas duas variáveis — e não
   apenas a barra superior. Os demais nomes (--radius, --surface, --accent,
   --transition) são novos e não colidem com nada. */
.app-topbar {
  --topbar-bg: rgba(20, 24, 33, 0.92);
  --topbar-border: rgba(255, 255, 255, 0.08);
  --accent: #6366f1;
  --accent-strong: #4f46e5;
  --accent-soft: rgba(99, 102, 241, 0.15);
  --text-primary: #f1f5f9;
  --text-muted: #94a3b8;
  --surface: rgba(255, 255, 255, 0.06);
  --surface-hover: rgba(255, 255, 255, 0.12);
  --radius: 10px;
  --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 12px;
  height: calc(60px + var(--safe-t, 0px));
  padding-top: var(--safe-t, 0px);
  padding-bottom: 0;
  padding-left: calc(16px + var(--safe-l, 0px));
  padding-right: calc(16px + var(--safe-r, 0px));
  box-sizing: border-box;
  background: var(--topbar-bg);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid var(--topbar-border);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
  box-sizing: border-box;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  min-width: 0;
}

.topbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: 8px;
  flex-shrink: 0;
}

/* 36px (+5% em relação ao padrão 34px) para proporção ideal. */
.topbar-logo {
  height: 36px;
  width: 36px;
  object-fit: cover;
  border-radius: 8px;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.topbar-logo:hover {
  transform: scale(1.05);
}

.topbar-title-box h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: var(--text-primary);
  line-height: 1.1;
}

.topbar-tenant-tag {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}


.topbar-center-actions {
  display: flex;
  align-items: center;
  /* "safe" evita o clássico estouro do flex centralizado: quando o conteúdo
     não cabe, center joga a sobra para os DOIS lados e a metade esquerda fica
     inalcançável (não há scrollLeft negativo). Medido a 1600px antes do fix:
     conteúdo 903px em 803px de espaço, primeiro filho 99px à esquerda da
     borda do container — o badge "Quota Guida" aparecia cortado. Com "safe",
     o alinhamento cai para o início e a sobra fica só à direita, rolável.
     A linha sem "safe" fica como fallback para navegador antigo. */
  justify-content: center;
  justify-content: safe center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.topbar-center-actions::-webkit-scrollbar {
  display: none;
}

.topbar-center-actions .mode-segmented-switch {
  flex-shrink: 0 !important;
  white-space: nowrap;
}

.topbar-center-actions .king-measure-badge {
  flex-shrink: 0 !important;
  white-space: nowrap;
}

.topbar-center-actions .autosave-status-tag {
  flex-shrink: 0 !important;
}

.topbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition);
  flex-shrink: 0;
}

.topbar-btn:hover {
  background: var(--surface-hover);
  transform: translateY(-1px);
}

.topbar-btn:active {
  transform: translateY(0);
}

/* A .btn-primary genérica (styles_modern.css:6312) vem DEPOIS no arquivo e,
   com a mesma especificidade de .topbar-btn, vencia o padding/min-height/
   font-size/border-color dela — os dois botões primários do topo ficavam com
   42px de altura contra 38px dos demais, e com a borda ciano daquela regra.
   Como este seletor é mais específico (0,2,0), redeclarar aqui resolve. */
.topbar-btn.btn-primary {
  height: 38px;
  min-height: 0;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 500;
  border-color: transparent;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  box-shadow: 0 2px 12px rgba(99, 102, 241, 0.35);
}

.topbar-btn.btn-primary:hover {
  box-shadow: 0 4px 20px rgba(99, 102, 241, 0.5);
  filter: brightness(1.1);
}

/* A antiga .topbar-btn.btn-highlight (âmbar) saiu: .btn-highlight só é usada
   em botões de painel/modal, nunca na topbar — era código morto. */

.topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  min-width: 0;
}

/* Proteção contra vazamento da navbar no Desktop em telas médias.
   Era 1550px; com os botões/ badges maiores do modelo novo (38px de altura,
   padding 0 14px, pílula de autosave com ponto e pílula de perfil com avatar)
   o conteúdo do centro passou a precisar de ~1002px e só cabe acima de ~1763px
   — medido: em 1600px sobravam -163px e o "Catalogo"/"Salva" ficavam fora da
   tela. O breakpoint sobe para o ponto onde o conteúdo volta a caber. */
@media (max-width: 1800px) {
  .user-profile-badge {
    display: none !important;
  }
  .topbar-btn-compactable .btn-label-text {
    display: none;
  }
  .topbar-btn-compactable {
    padding: 0 10px;
  }
}

@media (max-width: 1360px) {
  #btnToggleSidebar .btn-label-text,
  #btnToggleResults .btn-label-text {
    display: none;
  }
  #btnToggleSidebar,
  #btnToggleResults {
    padding: 0 10px;
  }
  .topbar-center-actions {
    gap: 6px;
  }
  /* Abaixo de ~1330px o conteúdo do centro (816px) já não cabe no espaço que
     sobra entre os grupos — medido: -26px em 1300, -125px em 1201. Encolher os
     badges (mesma ideia que o modelo usa em 768px, só que antecipada para onde
     ela é necessária) e dispensar a pílula de autosave devolve ~174px.
     A partir de 1200 o centro inteiro é ocultado de qualquer forma. */
  .badge-label,
  .badge-lock {
    display: none;
  }
  .topbar-center-actions .autosave-status-tag {
    display: none;
  }
}

/* Do responsivo do modelo novo só entrou o que faltava de fato. Os dois media
   queries de 1200px dele eram redundantes: o @media (max-width:1200px) que
   esconde .topbar-center-actions inteiro já é mais amplo, e .top-mode-switch
   já nasce display:none na base. O tratamento "só avatar" do
   .user-profile-badge abaixo de 768px também é inalcançável, porque o
   @media (max-width:1800px) acima esconde o badge inteiro com !important —
   por isso ele continua como está (foi o ajuste que resolveu o vazamento da
   navbar em telas médias).
   Obs.: da dupla abaixo, só o gap tem efeito — o padding do modelo é vencido
   pelo `padding: 6px 10px !important` do bloco "TOPBAR FLUIDA" (≤1024px), e
   ali ele é proposital: com 52px de altura, o padding vertical centra os
   botões de 38px. Fica registrado para não parecer que o padding é aplicado. */
@media (max-width: 768px) {
  .app-topbar {
    padding: 0 10px;
    gap: 8px;
  }
}

.user-profile-badge {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-left: 6px;
  padding: 5px 12px 5px 5px;
  background: var(--surface);
  border: 1px solid var(--topbar-border);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
}

.user-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  border-radius: 50%;
  flex-shrink: 0;
}

/* Chip compacto com o nome do usuario logado. Nasce escondido: quem o mostra e'
   o @media (max-width: 1024px) de `60-cad-mobile-gestos.css`, onde a
   .user-profile-badge acima esta' oculta. No desktop o nome ja' vem na pilula
   de perfil, entao o chip ficaria duplicando a informacao. */
.topbar-user-chip {
  display: none;
}

/* ATENÇÃO: .btn-icon-topbar NÃO é exclusiva da topbar — o admin-header
   (logout do admin) e o dash-topbar (logout do dashboard) usam a mesma
   classe, e ambos ficam FORA de .app-topbar, onde os tokens do tema novo
   não existem. Por isso o visual anterior fica na regra-base e o modelo
   novo entra escopado em .app-topbar. */
.btn-icon-topbar {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
}

.btn-icon-topbar:hover {
  color: var(--accent-rose);
  border-color: var(--accent-rose);
}

.app-topbar .btn-icon-topbar {
  display: inline-flex;
  width: 38px;
  height: 38px;
  padding: 0;
  border: none;
  border-radius: var(--radius);
  color: var(--text-muted);
}

.app-topbar .btn-icon-topbar:hover {
  color: #f87171;
  background: rgba(248, 113, 113, 0.12);
}

/* Os <svg> da topbar não têm width/height no markup e não existia NENHUMA
   regra de tamanho para eles: colapsavam para 0x0 e os ícones simplesmente
   não apareciam — os botões mostravam só o texto. Medido em navegador
   headless antes desta regra: .btn-icon-svg = 0x0 em todos os botões.
   Obs.: o CSS vence os atributos width/height, então os dois ícones que
   tinham 18px/20px inline também passam a 16px, como no modelo. */
.btn-icon-svg,
.view-icon-svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* --- WORKSPACE GERAL (SEM PADDING EXTERNO QUE EMPURRA ELEMENTOS) --- */
/* 60px = altura de .app-topbar. O flex:1 abaixo já faz o shell ocupar
   exatamente o que sobra, mas os dois calc ficavam em 54px (número velho,
   de quando a topbar tinha 56px) e mentiam sobre a conta. */
.shell {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0% !important;
  height: calc(100vh - 60px) !important;
  max-height: calc(100vh - 60px) !important;
  width: 100vw !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.workspace {
  display: flex !important;
  flex: 1 1 0% !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  position: relative !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}



/* ==========================================================================
   SELETOR DE IDIOMAS (i18n) - DESIGN LUXO INTEGRADO
   ========================================================================== */
.lang-selector-custom {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-family: inherit;
  user-select: none;
  margin: 0 4px;
}

.lang-selector-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(22, 30, 46, 0.85);
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 8px;
  padding: 5px 11px;
  color: #f1f5f9;
  cursor: pointer;
  outline: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(8px);
}

.lang-selector-btn:hover {
  background: rgba(30, 41, 59, 0.95);
  border-color: #d4af37;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
  transform: translateY(-1px);
}

.lang-selector-btn:focus-visible {
  border-color: #d4af37;
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.4);
}

.lang-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 15px;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  flex-shrink: 0;
  vertical-align: middle;
}

.lang-flag svg {
  width: 100%;
  height: 100%;
  display: block;
}

.lang-code {
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #e2e8f0;
}

.lang-chevron {
  width: 14px;
  height: 14px;
  color: #94a3b8;
  transition: transform 0.2s ease;
  pointer-events: none;
}

.lang-selector-btn[aria-expanded="true"] .lang-chevron {
  transform: rotate(180deg);
  color: #d4af37;
}

.lang-selector-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 10000;
  background: #0f172a;
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 10px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.6), 0 0 15px rgba(212, 175, 55, 0.15);
  padding: 6px;
  min-width: 195px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  backdrop-filter: blur(12px);
  animation: langMenuFadeIn 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.lang-selector-menu[hidden] {
  display: none !important;
}

@keyframes langMenuFadeIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.lang-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: #cbd5e1;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.lang-menu-item:hover {
  background: rgba(212, 175, 55, 0.15);
  color: #ffffff;
}

.lang-menu-item.is-active {
  background: rgba(212, 175, 55, 0.22);
  color: #facc15;
  font-weight: 600;
}

.lang-menu-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 16px;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  flex-shrink: 0;
}

.lang-menu-flag svg {
  width: 100%;
  height: 100%;
  display: block;
}

.lang-menu-name {
  flex: 1;
}

.lang-menu-short {
  font-size: 11px;
  font-weight: 700;
  opacity: 0.6;
  text-transform: uppercase;
}

.lang-menu-check {
  color: #facc15;
  font-size: 13px;
  font-weight: bold;
}

.lang-selector-auth-wrapper {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 14px;
}
/* ==========================================================================
   1. PAINEL LATERAL ESQUERDO: PARAMETRI TECNICI (LARGURA AMPLA E SEM COMPRESSÃO)
   ========================================================================== */
.panel.controls {
  width: 560px !important;
  min-width: 560px !important;
  background: #0a0e17 !important;
  border-right: 1px solid var(--border-color) !important;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), width 0.25s, min-width 0.25s;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  overscroll-behavior-y: contain !important;
  height: 100% !important;
  box-sizing: border-box;
  /* O `220px` de fundo era a reserva da barra de toque, que NAO existe no
     desktop (`.bottom-touch-bar` e' display:none acima de 1025px): medido em
     2026-09-23, sobravam 238,8 px de faixa morta depois do ultimo campo. */
  padding: 14px 16px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  scrollbar-gutter: stable;
}

.panel.controls.is-collapsed {
  transform: translateX(-100%);
  width: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  opacity: 0;
  pointer-events: none;
}

/* Barra de Abas de Categorias */
.sidebar-category-tabs {
  display: flex;
  gap: 4px;
  background: var(--bg-surface-elevated);
  padding: 6px;
  margin: 0 0 14px 0;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  flex-shrink: 0 !important;
  /* A barra de etapas acompanha a rolagem. O `top` negativo cancela o
     `padding-top` de `.panel.controls` — sem o negativo, o conteudo
     apareceria numa faixa por cima da barra. Os dois valores andam juntos. */
  position: sticky;
  top: -14px;
  z-index: 6;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y !important;
  scrollbar-width: none;
}

.sidebar-category-tabs::-webkit-scrollbar {
  display: none;
}

.sidebar-category-tabs .tab-btn {
  flex: 1;
  min-width: fit-content;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 11.5px;
  font-weight: 700;
  padding: 8px 8px;
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s;
  white-space: nowrap;
}

.sidebar-category-tabs .tab-btn:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.04);
}

.sidebar-category-tabs .tab-btn.is-active {
  background: var(--accent-gold);
  color: #0f141c;
}

/* --------------------------------------------------------------------------
   AS 5 ETAPAS CABEM NA LARGURA DO PAINEL

   Medido em 2026-09-23: os 5 botoes somavam 473 px (rotulo "1." + icone) numa
   barra de 338,6 px no celular e de 346,6 px no desktop (o painel e' um item
   de flex e ENCOLHE abaixo dos 560 px declarados: medido 390 px a 1600 px de
   tela), entao a etapa 5 aparecia cortada nos dois casos. Numero + nome, sem
   o ponto e sem o icone (o icone continua no cabecalho da secao, logo abaixo),
   somam 326 px e cabem nas duas larguras. A barra mantem `overflow-x: auto`
   como rede de seguranca em telas muito estreitas.
   -------------------------------------------------------------------------- */
.sidebar-category-tabs .tab-btn {
  font-size: 11px;
  padding: 6px 5px;
  gap: 3px;
}

.sidebar-category-tabs .tab-btn > svg {
  display: none !important;
}

/* Telefone estreito (360 px): a barra ainda estourava 10 px (medido: 325 px de
   conteudo em 315 px). Um degrau mais apertado resolve sem esconder nenhuma
   etapa; abaixo disso o `overflow-x: auto` da barra e' a rede. */
@media (max-width: 420px) {
  .sidebar-category-tabs .tab-btn {
    font-size: 10px;
    padding: 6px 4px;
    gap: 2px;
  }
}

/* 320 px (iPhone SE 1a geracao e Android antigo): os 5 rotulos ainda pediam
   293 px em 276 px e a barra voltava a rolar. Este degrau fecha a conta. */
@media (max-width: 340px) {
  .sidebar-category-tabs {
    padding: 3px;
  }

  .sidebar-category-tabs .tab-btn {
    font-size: 9.5px;
    padding: 6px 3px;
    gap: 2px;
  }
}

/* ==========================================================================
   ETAPAS DO PAINEL: uma etapa visível por vez

   As abas (`data-panel-tab`) só trocam a classe `is-active`; QUEM MANDA na
   visibilidade é esta regra, sem JavaScript. O painel 1 já nasce `is-active`
   no HTML, então o app continua legível mesmo se o listener não rodar.

   O `.control-group` de dentro de cada painel continua sendo o mesmo
   `details` de antes (com o `data-cat`): não há dois sistemas de dobra
   competindo, só uma etapa mostrada por vez.
   ========================================================================== */
.tab-content-panel {
  display: none;
}

.tab-content-panel.is-active {
  display: block;
}

/* Toolbar de Ações do Menu Lateral */
.controls-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 2px 6px;
  margin-bottom: 2px;
  min-height: 32px;
}

.controls-toolbar-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--text-muted);
}

.controls-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-group-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 4px 8px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.15s ease;
}

.btn-group-toggle:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.16);
}

.btn-group-toggle.btn-reset-toggle {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

.btn-group-toggle.btn-reset-toggle:hover {
  background: rgba(239, 68, 68, 0.18);
  border-color: rgba(239, 68, 68, 0.4);
  color: #fca5a5;
}

/* Ícones Lucide SVG */
.lucide {
  width: 14px;
  height: 14px;
  stroke-width: 1.75px;
  display: inline-block;
  vertical-align: middle;
}
.group-icon .lucide {
  width: 18px;
  height: 18px;
  stroke-width: 2px;
  color: var(--accent-gold);
}
.tab-btn .lucide {
  width: 13px;
  height: 13px;
}
.btn-calc-wall .lucide {
  width: 15px;
  height: 15px;
  margin-right: 4px;
  vertical-align: -2px;
}
.btn-group-toggle .lucide {
  width: 12px;
  height: 12px;
}

/* Indicadores de fluxo de subida (Passo a Passo em Rampe & Distribuzione) */
.ramp-step-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 8px 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}
.ramp-step-divider::before,
.ramp-step-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}
.ramp-step-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  /* SEM QUEBRA. Medido em 2026-09-27 a 430/390/360/320 px: com
     `white-space: normal` a badge "Rampa 1"/"Rampa 2" (duas palavras) caia em
     DUAS linhas (51x30) enquanto a "Curva" (uma palavra) ficava em 47x18 — a
     coluna do meio subia 12 px e os campos "Dritti prima"/"Ventagli"/"Dritti
     dopo" ficavam em y 293/281/293, com o resto da coluna do meio sempre 12 px
     fora do par. */
  white-space: nowrap;
  background: rgba(2, 132, 199, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 6px;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.03em;
}

/* Card Destaque: Soma Pedata + Toro = Profondità Finita a Vista */
.tread-total-card {
  position: relative;
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.14) 0%, rgba(15, 23, 42, 0.95) 55%, rgba(2, 132, 199, 0.18) 100%);
  border: 1px solid rgba(56, 189, 248, 0.38);
  border-radius: 10px;
  padding: 10px 12px;
  margin-top: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.tread-total-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, #38bdf8 0%, #0284c7 100%);
}

.tread-total-card:hover {
  border-color: rgba(56, 189, 248, 0.65);
  box-shadow: 0 6px 20px rgba(2, 132, 199, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.tread-total-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.tread-total-title-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tread-total-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.3);
}

.tread-total-icon .lucide {
  width: 13px;
  height: 13px;
}

.tread-total-title {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #e0f2fe;
}

.tread-total-tag {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #7dd3fc;
  background: rgba(2, 132, 199, 0.18);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 4px;
  padding: 1.5px 6px;
  white-space: nowrap;
}

/* Linha de Chips de Operação Matemática */
.tread-chips-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.tread-chip {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 7px;
  padding: 5px 6px;
  min-width: 0;
  transition: all 0.2s ease;
}

.tread-chip .chip-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #94a3b8;
  margin-bottom: 2px;
}

.tread-chip .chip-val {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  color: #f1f5f9;
}

.tread-chip .chip-val strong {
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #ffffff;
}

.tread-chip .chip-val small {
  font-size: 9.5px;
  font-weight: 600;
  color: #94a3b8;
}

/* Operadores (+ e =) */
.chip-op {
  font-size: 14px;
  font-weight: 900;
  color: #0284c7;
  flex-shrink: 0;
  user-select: none;
  text-shadow: 0 0 8px rgba(2, 132, 199, 0.5);
}

/* Chip de Resultado em Destaque */
.tread-chip.chip-result {
  flex: 1.25;
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.35) 0%, rgba(14, 165, 233, 0.2) 100%);
  border: 1px solid rgba(56, 189, 248, 0.6);
  box-shadow: 0 2px 10px rgba(2, 132, 199, 0.3);
}

.tread-chip.chip-result .chip-label {
  color: #bae6fd;
}

.tread-chip.chip-result .chip-val strong {
  font-size: 14.5px;
  color: #38bdf8;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.4);
}

.tread-chip.chip-result .chip-val small {
  color: #7dd3fc;
}

/* Micro-animação de Atualização */
@keyframes chipGlowPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 2px 10px rgba(2, 132, 199, 0.3);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 16px rgba(56, 189, 248, 0.75);
    border-color: #38bdf8;
  }
  100% {
    transform: scale(1);
    box-shadow: 0 2px 10px rgba(2, 132, 199, 0.3);
  }
}

.chip-pulse {
  animation: chipGlowPulse 0.35s ease-out;
}


/* Chips com 4 operandos (ex: Pedata + Toro + Incastro = Taglio) */
.tread-chips-row.four-chips .tread-chip {
  padding: 4px 4px;
}

.tread-chips-row.four-chips .tread-chip .chip-label {
  font-size: 8.5px;
}

.tread-chips-row.four-chips .tread-chip .chip-val strong {
  font-size: 12px;
}

.tread-chips-row.four-chips .chip-op {
  font-size: 12px;
}

.tread-chips-row.four-chips .tread-chip.chip-result .chip-val strong {
  font-size: 13.5px;
}

/* ==========================================================================
   2. BLOCOS EM PAR (.pair): RAMPA 1 | CURVA | RAMPA 2, PARTENZA | ARRIVO,
      PEDATA | ALZATA

   O painel passou a agrupar por PERGUNTA (o que o usuario esta' tentando
   responder naquele momento) e nao pela ordem em que o campo foi implementado.
   Os pares que sao OPOSTOS conceituais ficam lado a lado: as duas rampas com a
   curva no meio (ordem fisica da subida), a partida e a chegada, a pedata e a
   alzata. Antes, campos desse mesmo par ficavam a ~15 campos de distancia.

   `.pair` e' a GRADE DE BLOCOS (cada filho pode ter mais de um campo);
   `.grid-two` continua sendo o par de dois campos da MESMA medida. O contrato
   da celula (tres trilhas: rotulo | 44px do controle | dica) e' repetido aqui
   de proposito: e' ele que impede o `label span` legado do styles.css de sair
   do fluxo e desenhar o texto do rotulo/unidade por cima do campo — o defeito
   medido em 2026-09-23 no `#labelWall1`.
   ========================================================================== */
.panel.controls .pair {
  display: grid !important;
  align-items: start !important;
  column-gap: 8px !important;
  row-gap: 10px !important;
  min-width: 0;
}

.panel.controls .pair.cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

/* A grade do percurso: Rampa 1 | Curva | Rampa 2. O gutter e' menor porque
   sao tres colunas dentro do painel (a ~390 px de tela cada coluna fica com
   ~120 px) — e as colunas ficam encostadas, como um diagrama da subida. */
.panel.controls .pair.cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  column-gap: 4px !important;
}

/* A COLUNA de um par: pilha com UMA distancia entre blocos.
   O `display` NAO leva `!important`: o `params.js` escreve
   `style.display = "none"`/`""` em `#groupStraightRun2` (a coluna da Rampa 2,
   visivel so' quando ha' curva) e o inline tem de vencer. */
.panel.controls .pair-col,
.panel.controls .ramp-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

/* Cabecalho da coluna (Rampa 1, Curva, Pedata...): faixa com filete e SEM
   caixa — a caixa do painel continua sendo uma so', o `.config-subcard`. */
.panel.controls .pair-col-head,
.panel.controls .ramp-col-head {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 22px;
  padding: 2px 6px 4px 8px;
  border-left: 3px solid rgba(56, 189, 248, 0.5);
  border-radius: 0 6px 6px 0;
}

.panel.controls .pair-col-sub,
.panel.controls .ramp-col-sub {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* `.pair-wide`: campo que ocupa a LINHA INTEIRA dentro do par.

   Um `<select>` nao se aperta como um campo de numero: a opcao selecionada e'
   texto de catalogo/norma que ninguem pode encurtar ("Italia - privata interna
   (D.M. 236/89)" mede 234 px, "Distribuito sulle pareti (Sventagliatura)" 228 px)
   e a celula de um par oferecia 89 a 147 px no modo gaveta — o texto ficava
   escondido pela elipse (medido: 186 px fora em `#winderMethod` a 360 px).

   Os campos NUMERICOS continuam lado a lado: a decisao de 2026-09-23 ("lado a
   lado todos eles") e' sobre a mesma medida, e um numero de 3 algarismos cabe
   em 100 px. Aqui so' entra o que foi MEDIDO como cortado. */
.panel.controls .pair > label.pair-wide,
.panel.controls .pair-col > label.pair-wide,
.panel.controls .ramp-col > label.pair-wide,
.panel.controls .pair-stack > label.pair-wide,
.panel.controls .grid-two > label.pair-wide {
  grid-column: 1 / -1 !important;
}

/* O botao "Pietre per fascia…" (I12) e' IRMAO do campo, nao filho do `<label>`
   (um label so' pode conter o proprio controle). Como filho direto do `.pair`
   ele cairia na celula ao lado do campo: esta regra o poe na linha inteira,
   encostado a' esquerda, logo abaixo do campo que ele abre. */
.panel.controls .pair > .pietre-fascia-open-btn {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 0;
}

/* ===================================================================
   A TIPOLOGIA TRAVADA (I13) — o lugar do `<select>` no painel
   -------------------------------------------------------------------
   As regras de campo do painel sao todas `.pair > label...`: o chip do
   `#stairTypeLocked` NAO esta' dentro de um `.pair` (mora solto no
   `.config-subcard` da tipologia, como o `#stairDirectionContainer` logo
   abaixo), entao cada medida e' escrita AQUI. As tres colunas de texto
   repetem o que a `.pair > label` ja' faz — 12px/600/`--text-secondary`
   no rotulo — para o chip ficar identico ao resto do painel.

   A altura de 44px NAO e' decoracao: e' a mesma altura que a regra por id
   da' a todo `<select>` do painel (medido: `#stairType` media 488x44
   antes de sair da tela). O chip substitui o controle, entao ocupa o
   mesmo volume — senao a linha do formulario pula ao trocar de tema.

   A borda TRACEJADA e' o unico sinal de "isto nao se edita" que sobra
   quando o `title` nao aparece (celular): sem ela o chip escuro passaria
   por um select fechado e o usuario tentaria clicar. */
.panel.controls .stair-type-locked {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  margin: 0 0 10px;
}

.panel.controls .stair-type-locked-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  line-height: 1.3;
}

.panel.controls .stair-type-locked-value {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px;
  box-sizing: border-box;
  border: 1px dashed rgba(148, 163, 184, 0.45);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.55);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
  cursor: default;
  user-select: none;
}

.panel.controls .stair-type-locked-value::before {
  content: "🔒";
  font-size: 13px;
  line-height: 1;
  opacity: 0.8;
}

.panel.controls .stair-type-locked-note {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.3;
}

/* As duas notas do percurso ("equivale a N gradini dritti...") ficam FORA das
   tres colunas: dentro de uma coluna de 95 a 134 px o mesmo texto ocupava 5 a 7
   linhas (medido a 360 e a 820 px). Em linha inteira usa 1 ou 2. */
.panel.controls .ramp-notes {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}

/* A GRADE DO PERCURSO: DUAS COLUNAS, UMA POR RAMPA.

   A ordem de DOM da as linhas (Rampa 1 e Rampa 2, depois Curva 1 e Curva 2) e
   cada celula declara a propria coluna (`flow-col-*`) e a propria linha
   (`flow-row-*`). As linhas EXPLICITAS sao o que mantem a Curva 1 sob a Rampa 1
   e a Curva 2 sob a Rampa 2 mesmo com uma celula escondida: a Rampa 2 nao existe
   na dritta e Curva 2, Intermedio e Giunzione so' existem na U com ventagli.
   Intermedio e Giunzione sao de LINHA INTEIRA pelo contrato do `.pair-wide`. */
.panel.controls .ramp-flow > .flow-col-1 {
  grid-column: 1;
}

.panel.controls .ramp-flow > .flow-col-2 {
  grid-column: 2;
}

.panel.controls .ramp-flow > .flow-row-1 {
  grid-row: 1;
}

.panel.controls .ramp-flow > .flow-row-2 {
  grid-row: 2;
}

/* As TRES celulas da segunda curva (Curva 2, Intermedio, Giunzione) existem so'
   na U com ventagli: quem alterna e' o `params.js`, pela classe `is-hidden`.
   Vai por CLASSE, nao por `style.display`, porque o contrato do `.pair` escreve
   `display: grid !important` (medido no navegador: inline `none` com
   `getComputedStyle` = `grid`). */
.panel.controls .ramp-flow > [data-u-curva2].is-hidden {
  display: none !important;
}

/* Pilha de campos de UMA coluna dentro de um par (as duas medidas dos
   fieldset Partenza/Arrivo, que lado a lado dentro de uma coluna de ~120 px
   ficariam com ~55 px cada). */
.panel.controls .pair-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

/* --------------------------------------------------------------------------
   CONTRATO DA CELULA DENTRO DE UM PAR

   Mesma receita da secao "CONTRATO DO CAMPO EM DUAS COLUNAS" (parte 20), so'
   que para os seletores novos. A ORDEM importa: o texto do rotulo vem ANTES
   da unidade, porque num rotulo de texto simples o UNICO `<span>` e' a
   unidade e casa com as duas regras (`:first-child` conta apenas ELEMENTOS:
   o no' de texto do rotulo nao entra na conta) — quem vence e' a ultima.
   -------------------------------------------------------------------------- */
.panel.controls .pair > label:not(.check-row),
.panel.controls .pair-col > label:not(.check-row),
.panel.controls .ramp-col > label:not(.check-row),
.panel.controls .pair-stack > label:not(.check-row),
.panel.controls .pair .fieldset-partenza label:not(.check-row),
.panel.controls .pair .fieldset-arrivo label:not(.check-row) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(16px, auto) 44px auto !important;
  justify-content: start !important;
  align-content: start !important;
  gap: 6px !important;
  min-width: 0;
  margin: 0 !important;
}

.panel.controls .pair > label:not(.check-row) > span:first-child,
.panel.controls .pair-col > label:not(.check-row) > span:first-child,
.panel.controls .ramp-col > label:not(.check-row) > span:first-child,
.panel.controls .pair-stack > label:not(.check-row) > span:first-child,
.panel.controls .pair .fieldset-partenza label:not(.check-row) > span:first-child,
.panel.controls .pair .fieldset-arrivo label:not(.check-row) > span:first-child {
  grid-row: 1;
  grid-column: 1;
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--text-secondary) !important;
  line-height: 1.3 !important;
}

.panel.controls .pair > label:not(.check-row) > input,
.panel.controls .pair > label:not(.check-row) > select,
.panel.controls .pair-col > label:not(.check-row) > input,
.panel.controls .pair-col > label:not(.check-row) > select,
.panel.controls .ramp-col > label:not(.check-row) > input,
.panel.controls .ramp-col > label:not(.check-row) > select,
.panel.controls .pair-stack > label:not(.check-row) > input,
.panel.controls .pair-stack > label:not(.check-row) > select,
.panel.controls .pair .fieldset-partenza label:not(.check-row) > input,
.panel.controls .pair .fieldset-partenza label:not(.check-row) > select,
.panel.controls .pair .fieldset-arrivo label:not(.check-row) > input,
.panel.controls .pair .fieldset-arrivo label:not(.check-row) > select {
  grid-row: 2;
  grid-column: 1;
  width: 100%;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.panel.controls .pair > label:not(.check-row) > span:not(.field-label-text):not(.field-subnote):not(:first-child),
.panel.controls .pair-col > label:not(.check-row) > span:not(.field-label-text):not(.field-subnote):not(:first-child),
.panel.controls .ramp-col > label:not(.check-row) > span:not(.field-label-text):not(.field-subnote):not(:first-child),
.panel.controls .pair-stack > label:not(.check-row) > span:not(.field-label-text):not(.field-subnote):not(:first-child),
.panel.controls .pair .fieldset-partenza label:not(.check-row) > span:not(.field-label-text):not(.field-subnote):not(:first-child),
.panel.controls .pair .fieldset-arrivo label:not(.check-row) > span:not(.field-label-text):not(.field-subnote):not(:first-child) {
  grid-row: 2;
  grid-column: 1;
  justify-self: end;
  align-self: center;
  position: relative !important;
  right: auto !important;
  bottom: auto !important;
  top: auto !important;
  transform: none !important;
  margin-right: 10px;
  pointer-events: none !important;
  z-index: 1;
  font-size: 11.5px !important;
  color: #8a887f !important;
  line-height: 1 !important;
}

/* A DICA do campo e' um rotulo de texto simples: no painel apertado ela nao
   pode empurrar o controle do vizinho — vai para a terceira trilha. */
.panel.controls .pair > label:not(.check-row) > small,
.panel.controls .pair-col > label:not(.check-row) > small,
.panel.controls .ramp-col > label:not(.check-row) > small,
.panel.controls .pair-stack > label:not(.check-row) > small,
.panel.controls .pair .fieldset-partenza label:not(.check-row) > small,
.panel.controls .pair .fieldset-arrivo label:not(.check-row) > small {
  grid-row: 3;
  grid-column: 1;
}

/* O SWITCH NA LINHA DO ROTULO (Sporgenza / toro).

   O checkbox vai AO LADO do texto, na faixa do rotulo — e NAO centrado na trilha
   de 44 px do campo. Medido em 2026-09-27 (390 px): com a caixinha na trilha do
   campo ela ficava 12 px abaixo do topo do input vizinho ("ele sozinho ja' e'
   estranho", nas palavras do usuario) e o valor do toro, que era um SEGUNDO
   bloco da coluna, nascia 101 px abaixo do "Pedata utile".

   A CAIXINHA NAO PODE CONTAR NA ALTURA DA LINHA: ela sai do fluxo
   (`position: absolute`) e a faixa e' reservada por `padding-right`. No fluxo, os
   16 px da caixinha esticavam o rotulo de 15,6 para 24 px e o campo de baixo
   nascia 8 px mais baixo que o vizinho da mesma linha — medido em 2026-09-27
   (1024 px): `#targetGoingMm` top 282 x `#nosingMm` top 290. */
.panel.controls .pair > label > span.field-label-switch,
.panel.controls .grid-two > label > span.field-label-switch {
  position: relative !important;
  padding-right: 26px;
  min-height: 0;
}

.panel.controls .pair > label > span.field-label-switch > input[type="checkbox"],
.panel.controls .grid-two > label > span.field-label-switch > input[type="checkbox"] {
  position: absolute;
  top: 0;
  right: 0;
  width: 16px;
  height: 16px;
  min-height: 16px;
  padding: 0;
  margin: 0;
  accent-color: var(--accent-gold);
  cursor: pointer;
}

/* Opcao DESLIGADA: o campo do toro continua no lugar (so' apagado), e por isso o
   par mantem a altura e o que esta' abaixo dele nao salta 80 px ao ligar. */
.panel.controls .pair > label.is-off > input,
.panel.controls .pair > label.is-off > span:not(.field-label-switch) {
  opacity: 0.4;
}

/* Nas tres colunas do percurso o rotulo desce meio ponto: e' a unica largura
   do painel onde um rotulo de 11 caracteres disputa espaco com a unidade. */
.panel.controls .pair.cols-3 label:not(.check-row) > span:first-child {
  font-size: 11px !important;
}

/* As duas colunas de material (Pedata | Alzata) tem alturas independentes:
   cada uma e' uma lista completa (select, variante, textura). */
.panel.controls .pair-materials .pair-col {
  gap: 10px;
  padding: 8px 8px 10px 10px;
  border-left: 3px solid rgba(168, 85, 247, 0.35);
  border-radius: 0 8px 8px 0;
}

/* A linha "Materiale base" + botao Catalogo: nas duas colunas do par nao cabe
   (no modo gaveta o rotulo ficava com 57 px e quebrava em 3 linhas) — empilha
   com o rotulo primeiro. Substitui o `style` inline da linha, que vencia a folha. */
.panel.controls .materials-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  margin-bottom: 4px;
}

.panel.controls .materials-row > label {
  margin: 0;
  font-weight: 600;
  min-width: 0;
}

/* No MODO GAVETA (<=1200 px o painel e' uma gaveta de ~440 px, nao uma coluna do
   workspace) DOIS pares deixam de caber lado a lado, porque a celula fica com
   ~121-136 px e o texto dentro dela e' longo por natureza:

     * `.pair-materials` (Pedata | Alzata): `#materialName` precisa 159 px de
       texto e recebia 69 (90 px escondidos a 360);
     * `.pair-extremita` (Partenza | Arrivo): cada celula e' um fieldset inteiro
       e dentro de 136 px o rotulo de `#arrivoRiser` ocupava 7 linhas e a dica 5
       (medido com o instrumento em 2026-09-27), com os selects de forma/tipo de
       giunzione cortados.

   Empilhar AQUI nao contraria a decisao de 2026-09-23 ("lado a lado todos
   eles"): aquela regra e' sobre as duas medidas da MESMA peca (Parede 1/2,
   Z/W, Pedata/Toro), que continuam em par. A especificidade importa: a regra do
   `.pair.cols-2` tem TRES classes, entao esta precisa de `.pair.pair-*` — com
   `.pair-materials` (duas) o `!important` de ambas era decidido pela
   especificidade e a gaveta continuava em duas colunas. */
@media (max-width: 1200px) {
  .panel.controls .pair.pair-materials,
  .panel.controls .pair.pair-extremita {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* O TOGGLE (checkbox) DENTRO DE UMA CELULA DE PAR.
   Ele ocupa a MESMA trilha do controle (a segunda), com 20x20 — nao estica como
   os campos de 44 px e nao herda nem o `min-height: 38px`/`width: 100%` do
   `styles.css` legado nem o `padding-right: 55px` que o `label:has(span) input`
   reserva para a unidade: com `box-sizing: border-box`, um checkbox de 20 px com
   esse padding ficaria SEM area util nenhuma (o mesmo defeito que o `.check-row`
   documenta na parte 20). O `align-self: center` alinha a caixinha com o campo
   de 44 px do lado; o rotulo inteiro continua clicavel, porque o checkbox esta'
   dentro do `<label>`.
   Vem DEPOIS da receita da celula de proposito: mesma especificidade, quem vence
   e' a ultima. */
.panel.controls .pair label > input[type="checkbox"] {
  grid-row: 2;
  grid-column: 1;
  width: 20px;
  height: 20px;
  min-height: 20px;
  padding: 0;
  margin: 0;
  align-self: center;
  justify-self: start;
  accent-color: var(--accent-gold);
  cursor: pointer;
}

/* ==========================================================================
   3. GAVETA REATIVA DO METODO DO VENTAGLIO

   UM lugar para as opcoes do metodo (sventagliatura OU bilanciamento), que
   troca de conteudo conforme `#winderMethod`. Antes eram dois blocos
   empilhados: um sempre escondido, os dois competindo por espaco. Quando o
   metodo e' o `singlePoint`, nenhum dos dois abre e a linha de aviso diz que
   aquele metodo nao tem parametro extra (era o silencio que confundia).
   Faixa com filete, SEM caixa: o cartao do painel continua sendo um so'.
   ========================================================================== */
.winder-drawer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 0 8px 10px;
  border-left: 3px solid rgba(139, 92, 246, 0.45);
  border-radius: 0 8px 8px 0;
  min-width: 0;
}

.winder-drawer-head {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #c4b5fd;
}

.winder-drawer .wall-box {
  margin-top: 0 !important;
}

/* ==========================================================================
   4. SUBCARD RECOLHIDO POR PADRAO (.subcard-avancado)

   O "Tracciamento Tecnico Avancato" e' configuracao de excecao (collo
   interno, linha de percurso, Corda/Arco) e nasce FECHADO: quem precisa
   abre. O titulo e o badge continuam sendo os mesmos do cabecalho anterior,
   agora dentro do `<summary>`.
   ========================================================================== */
.panel.controls .config-subcard.subcard-avancado {
  display: block !important;
  padding: 0 !important;
  gap: 0 !important;
}

.subcard-avancado-summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
  margin: 0 !important;
  padding: 12px 12px 10px !important;
}

.subcard-avancado-summary::-webkit-details-marker {
  display: none;
}

.subcard-avancado-summary::after {
  content: "▾";
  font-size: 11px;
  color: var(--accent-gold);
  margin-left: 6px;
  transition: transform 0.2s ease;
}

.subcard-avancado[open] > .subcard-avancado-summary::after {
  transform: rotate(180deg);
}

.subcard-avancado-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 12px 12px !important;
}

/* ==========================================================================
   5. CLUSTERS DO BATTISCOPA (Tipo & Misure | Finitura & Texture | Editor 3D)

   A lista de 12 controles do rodape virou tres blocos com titulo. Cada um e'
   uma faixa com filete (nada de caixa: a caixa e' o `.config-subcard`).
   ========================================================================== */
.panel.controls .battiscopa-cluster {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 0 8px 10px;
  border-left: 3px solid rgba(56, 189, 248, 0.35);
  border-radius: 0 8px 8px 0;
  min-width: 0;
}

.panel.controls .battiscopa-cluster + .battiscopa-cluster {
  margin-top: 10px;
}

.panel.controls .battiscopa-cluster-title {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

/* As tres familias de cluster tem uma cor de filete propria para o olho
   separar "construir" de "acabar" de "desenhar". */
.panel.controls #skirtingClusterType {
  border-left-color: rgba(56, 189, 248, 0.5);
}

.panel.controls #skirtingClusterFinish {
  border-left-color: rgba(212, 175, 55, 0.5);
}

.panel.controls #skirtingClusterEditors {
  border-left-color: rgba(139, 92, 246, 0.45);
}

/* ==========================================================================
   6. REDES DE SEGURANCA DO `display` INLINE

   Os blocos novos que o `params.js` liga e desliga por `style.display` NAO
   podem ganhar `display: <valor> !important` de folha, senao o inline perde e
   o grupo aparece quando deveria estar escondido (o caso classico e' o
   `#wallLengthFondoGroup`, na parte 20). As colunas do par usam `display`
   sem `!important` justamente por isso; esta rede cobre o caso de alguem
   acrescentar `!important` depois. */
.panel.controls .pair-col[style*="display: none"],
.panel.controls .pair-col[style*="display:none"],
.panel.controls .pair-col[hidden],
.panel.controls .pair-stack[style*="display: none"],
.panel.controls .pair-stack[style*="display:none"],
.panel.controls .pair-stack[hidden],
.panel.controls .battiscopa-cluster[style*="display: none"],
.panel.controls .battiscopa-cluster[style*="display:none"],
.panel.controls .battiscopa-cluster[hidden] {
  display: none !important;
}

/* ==========================================================================
   A PECA DO DEGRAU — o cartao de leitura do subcard "Sezione & Spessori della
   Pietra" (etapa Gradino, primeiro subcard).

   TRES medidas do motor em DUAS linhas: o RESULTADO ("Taglio Lastra") ocupa a
   linha inteira — e' o numero que o usuario ve primeiro — e as duas medidas que
   o geram, Gradino e Alzata, ficam lado a lado embaixo. Com as tres na mesma
   linha o rotulo + a badge do modo de corte nao cabiam na gaveta de 360 px
   (medido em 2026-10-13: o rotulo "TAGLIO LASTRA" + "STANDARD BLONDEL" + o
   numero pedem ~270 px, e a celula teria ~110).

   NADA NATIVO NA TELA (pedido do usuario): a espessura se escolhe num
   SEGMENTADO desenhado aqui (`.stone-seg`). O `<select>` de verdade
   (`#treadThicknessMm` / `#riserThicknessMm`) continua no DOM, `hidden`, porque
   e' dele que o app inteiro le' a espessura — o chip so' escreve nele e dispara
   o `change`, e todo o comportamento existente (semear o campo manual, o
   `syncThicknessCustomVisibility`, o `render`) roda sem saber que ha' um chip.

   A classe `chip-pulse` do resultado NAO e' redefinida aqui: ela e' a mesma do
   antigo card (`chipGlowPulse`, acima), e o `updateTreadCutCard` continua
   aplicando-a no MESMO id (`#treadCutResultChip`).
   ========================================================================== */
.stone-measures {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.stone-measure {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 6px;
  min-width: 0;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 7px;
  padding: 5px 8px;
}

.stone-measure-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stone-measure-value {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  color: #f1f5f9;
  white-space: nowrap;
}

.stone-measure-value strong {
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #ffffff;
}

.stone-measure-value small {
  font-size: 9.5px;
  font-weight: 600;
  color: #94a3b8;
}

/* O resultado: linha inteira, com o azul do antigo card e a badge do modo de
   corte entre o rotulo e o numero. */
.stone-measure-result {
  grid-column: 1 / -1;
  grid-template-columns: auto auto 1fr;
  gap: 8px;
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.35) 0%, rgba(14, 165, 233, 0.2) 100%);
  border: 1px solid rgba(56, 189, 248, 0.6);
  box-shadow: 0 2px 10px rgba(2, 132, 199, 0.3);
  padding: 6px 10px;
}

.stone-measure-result .stone-measure-label {
  color: #bae6fd;
}

.stone-measure-result .tread-total-tag {
  justify-self: start;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stone-measure-result .stone-measure-value {
  justify-self: end;
}

.stone-measure-result .stone-measure-value strong {
  font-size: 15px;
  color: #38bdf8;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.4);
}

.stone-measure-result .stone-measure-value small {
  color: #7dd3fc;
}

/* As duas espessuras: rotulo a esquerda, segmentado a direita, e a linha que
   separa as MEDIDAS (acima) das ESCOLHAS (abaixo). */
.stone-thick {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 2px;
  padding-top: 9px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.stone-thick-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.stone-thick-label {
  flex: 1 1 92px;
  min-width: 92px;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #94a3b8;
}

.stone-seg {
  display: inline-flex;
  flex: 0 0 auto;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  overflow: hidden;
}

/* O segmentado e' um `<button>` de verdade: TODA a aparencia nativa e' desligada
   aqui. O app nao tem regra global de `button` (so' o `button, input, select {
   font: inherit }` do styles.css), entao sem esta lista o controle apareceria
   com a cara do sistema — exatamente o que o usuario pediu para nao ter. */
.stone-seg-btn {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 6px 10px;
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  background: transparent;
  color: #cbd5e1;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}

.stone-seg-btn:first-child {
  border-left: 0;
}

.stone-seg-btn:hover {
  background: rgba(56, 189, 248, 0.14);
  color: #e0f2fe;
}

.stone-seg-btn:focus-visible {
  outline: 2px solid #38bdf8;
  outline-offset: -2px;
}

.stone-seg-btn.is-active {
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.85) 0%, rgba(14, 165, 233, 0.6) 100%);
  color: #ffffff;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.5);
}

/* ==========================================================================
   CARD DE SINCRONIA E EQUALIZAÇÃO DE RAMPAS (.ramp-sync-card)
   ========================================================================== */
.ramp-sync-card {
  margin-top: 10px;
  margin-bottom: 10px;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.5) 0%, rgba(15, 23, 42, 0.7) 100%);
  border: 1px solid rgba(56, 189, 248, 0.2);
}

.btn-equalize-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border: none;
  border-radius: 6px;
  padding: 4px 10px;
  color: #0f172a;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.25);
}

.btn-equalize-action:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(245, 158, 11, 0.4);
}

.btn-equalize-action svg {
  width: 13px;
  height: 13px;
}

.btn-equalize-action.is-equalized {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #34d399;
  box-shadow: none;
  cursor: default;
  pointer-events: none;
}

.ramp-sync-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
}

.ramp-sync-col {
  flex: 1;
  background: rgba(15, 23, 42, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: center;
}

.ramp-sync-col-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.ramp-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}

.dot-r1 { background: #38bdf8; box-shadow: 0 0 6px #38bdf8; }
.dot-r2 { background: #a855f7; box-shadow: 0 0 6px #a855f7; }

.ramp-sync-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-muted, #94a3b8);
  font-weight: 600;
}

.ramp-sync-val {
  font-size: 13px;
  color: #ffffff;
  font-weight: 500;
}

.ramp-sync-val strong {
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
}

.ramp-sync-val small {
  font-size: 10px;
  color: #94a3b8;
  margin-left: 1px;
}

.ramp-sync-sub {
  font-size: 10.5px;
  color: #94a3b8;
}

.ramp-sync-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 2px;
}

.ramp-sync-vs {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
}

.ramp-sync-footer {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ramp-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  width: fit-content;
}

.ramp-status-pill svg {
  width: 13px;
  height: 13px;
}

.ramp-status-pill.status-equal {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #34d399;
}

.ramp-status-pill.status-warn {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #fbbf24;
}

.ramp-status-pill.status-alert {
  background: rgba(239, 68, 68, 0.14);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #f87171;
}

.ramp-sync-tip {
  font-size: 11px;
  color: #94a3b8;
  line-height: 1.35;
}

/* Sub-cartões Estruturados dentro dos Grupos Retráteis (.config-subcard) */
.config-subcard {
  background: rgba(255, 255, 255, 0.025);
  border: 2px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 12px;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
  touch-action: pan-y;
}

/* --------------------------------------------------------------------------
   RITMO VERTICAL DO PAINEL

   As partes trazem `style="margin-top: 4/6/8/10/14px"` em ~46 sitios do
   painel e o espacamento entre blocos ficava irregular (o mesmo par de blocos
   com 6 px numa etapa e 10 px na outra). Aqui o cartao vira uma coluna com UMA
   distancia entre filhos e as margens inline perdem efeito — sem tocar no
   HTML, que continua legivel para quem edita a parte.
   -------------------------------------------------------------------------- */
.panel.controls .config-subcard {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.panel.controls .config-subcard > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.panel.controls .control-group-body > * {
  margin-bottom: 0 !important;
}

.config-subcard:hover {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.035);
}

.config-subcard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.config-subcard-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--accent-gold);
  line-height: 1.25;
}

.config-subcard-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
}

.field-hint-compact {
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--text-muted, #94a3b8);
  background: rgba(2, 132, 199, 0.08);
  padding: 6px 8px;
  border-radius: 6px;
  border-left: 3px solid #0284c7;
  margin-top: 4px;
  margin-bottom: 8px;
}

/* ========================================================================== */
/* TEMAS CROMÁTICOS SUAVES PARA SUBCARDS E FIELDSETS (DIFERENCIAÇÃO VISUAL)  */
/* ========================================================================== */

/* 1. Vano & Tipologia (Azul Celeste Tecnológico) */
.subcard-tipologia {
  background: rgba(56, 189, 248, 0.05) !important;
  border: 2px solid rgba(56, 189, 248, 0.38) !important;
  box-shadow: 0 2px 8px rgba(56, 189, 248, 0.06);
}
.subcard-tipologia .config-subcard-title {
  color: #38bdf8 !important;
}

/* 2. Vano Murario / Pareti (Ciano / Azul Água) */
.subcard-vano {
  background: rgba(14, 165, 233, 0.055) !important;
  border: 2px solid rgba(14, 165, 233, 0.38) !important;
  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.06);
}
.subcard-vano .config-subcard-title {
  color: #38bdf8 !important;
}

/* 3. Dimensioni & Normativa (Índigo Profissional) */
.subcard-dimensoes {
  background: rgba(99, 102, 241, 0.055) !important;
  border: 2px solid rgba(99, 102, 241, 0.38) !important;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.06);
}
.subcard-dimensoes .config-subcard-title {
  color: #a5b4fc !important;
}

/* 4. Distribuzione Gradini / Lances (Azul Cobalto) */
.subcard-lances {
  background: rgba(59, 130, 246, 0.055) !important;
  border: 2px solid rgba(59, 130, 246, 0.38) !important;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.06);
}
.subcard-lances .config-subcard-title {
  color: #93c5fd !important;
}

/* 5. Tracciamento Tecnico Avanzato (Violeta Suave) */
.subcard-avancado {
  background: rgba(139, 92, 246, 0.055) !important;
  border: 2px solid rgba(139, 92, 246, 0.38) !important;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.06);
}
.subcard-avancado .config-subcard-title {
  color: #c4b5fd !important;
}

/* 6. Anatomia & Logica di Taglio (Âmbar / Dourado Quente) */
.subcard-anatomia {
  background: rgba(245, 158, 11, 0.06) !important;
  border: 2px solid rgba(245, 158, 11, 0.42) !important;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.06);
}
.subcard-anatomia .config-subcard-title {
  color: #fcd34d !important;
}

/* 7. Materiali & Pietra (Púrpura / Mineral Nobre) */
.subcard-materiais {
  background: rgba(168, 85, 247, 0.055) !important;
  border: 2px solid rgba(168, 85, 247, 0.38) !important;
  box-shadow: 0 2px 8px rgba(168, 85, 247, 0.06);
}
.subcard-materiais .config-subcard-title {
  color: #d8b4fe !important;
}

/* 8. Extremidades / Wrapper Partenza & Arrivo */
.subcard-partenza-arrivo {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 2px solid rgba(255, 255, 255, 0.1) !important;
}

/* 🚪 Placca di Partenza (Terracota / Laranja Acolhedor) — faixa + filete,
   sem caixa: a caixa do painel e' o .config-subcard que envolve os dois. */
.fieldset-partenza {
  background: rgba(249, 115, 22, 0.06) !important;
  border: none !important;
  border-left: 3px solid rgba(249, 115, 22, 0.5) !important;
  border-radius: 0 8px 8px 0 !important;
  padding: 10px 10px 8px !important;
  margin-bottom: 10px !important;
  transition: none;
  box-shadow: none !important;
}
.fieldset-partenza legend {
  color: #fdba74 !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  padding: 2px 10px !important;
  letter-spacing: 0.035em;
  background: #182232;
  border: 1.5px solid rgba(249, 115, 22, 0.35);
  border-radius: 5px;
}

/* 🏁 Arrivo / Sbarco (Verde Esmeralda / Chegada Segura) — faixa + filete. */
.fieldset-arrivo {
  background: rgba(16, 185, 129, 0.06) !important;
  border: none !important;
  border-left: 3px solid rgba(16, 185, 129, 0.5) !important;
  border-radius: 0 8px 8px 0 !important;
  padding: 10px 10px 8px !important;
  transition: none;
  box-shadow: none !important;
}
.fieldset-arrivo legend {
  color: #6ee7b7 !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  padding: 2px 10px !important;
  letter-spacing: 0.035em;
  background: #182232;
  border: 1.5px solid rgba(16, 185, 129, 0.35);
  border-radius: 5px;
}

/* 9. Battiscopa / Zoccolino (Magenta / Rosa Queimado Sofisticado) */
.subcard-battiscopa {
  background: rgba(217, 70, 239, 0.055) !important;
  border: 2px solid rgba(217, 70, 239, 0.38) !important;
  box-shadow: 0 2px 8px rgba(217, 70, 239, 0.06);
}
.subcard-battiscopa .config-subcard-title {
  color: #f0abfc !important;
}

/* 10. Listino Materia Prima & Sfrido (Ouro Nobre) */
.subcard-prezzi-base {
  background: rgba(234, 179, 8, 0.06) !important;
  border: 2px solid rgba(234, 179, 8, 0.42) !important;
  box-shadow: 0 2px 8px rgba(234, 179, 8, 0.06);
}
.subcard-prezzi-base .config-subcard-title {
  color: #fde047 !important;
}

/* 11. Prezzi Lavorazioni Bordi (Coral / Rosa Vibrante) */
.subcard-lavorazioni {
  background: rgba(244, 63, 94, 0.055) !important;
  border: 2px solid rgba(244, 63, 94, 0.38) !important;
  box-shadow: 0 2px 8px rgba(244, 63, 94, 0.06);
}
.subcard-lavorazioni .config-subcard-title {
  color: #fda4af !important;
}

/* 12. Dati Commerciali (Azul Corporativo Executivo) */
.subcard-dati-commerciali {
  background: rgba(59, 130, 246, 0.055) !important;
  border: 2px solid rgba(59, 130, 246, 0.38) !important;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.06);
}
.subcard-dati-commerciali .config-subcard-title {
  color: #93c5fd !important;
}

/* Banner de Ponte entre Preventivo da Obra e Catálogo da Marmoraria */
.pricing-bridge-banner {
  background: rgba(234, 179, 8, 0.05);
  border: 1.5px dashed rgba(234, 179, 8, 0.35);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pricing-bridge-title {
  font-size: 12px;
  font-weight: 800;
  color: #fde047;
  display: flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.pricing-bridge-desc {
  font-size: 11.5px;
  color: #94a3b8;
  line-height: 1.35;
  margin-top: 2px;
}

.pricing-bridge-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.btn-bridge-sync,
.btn-bridge-manage {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  min-height: 34px;
}

.btn-bridge-sync {
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.35);
}

.btn-bridge-sync:hover {
  background: rgba(56, 189, 248, 0.22);
  border-color: #38bdf8;
  color: #ffffff;
}

.btn-bridge-manage {
  background: rgba(255, 255, 255, 0.06);
  color: #e2e8f0;
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.btn-bridge-manage:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.28);
  color: #ffffff;
}

.btn-catalog-shortcut {
  background: rgba(168, 85, 247, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.35);
  color: #d8b4fe;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-catalog-shortcut:hover {
  background: rgba(168, 85, 247, 0.22);
  color: #ffffff;
  border-color: #c084fc;
}

.btn-subcard-action {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #cbd5e1;
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-subcard-action:hover {
  background: rgba(56, 189, 248, 0.15);
  border-color: #38bdf8;
  color: #ffffff;
}

.field-subnote {
  font-size: 0.72em;
  font-weight: 500;
  color: #94a3b8;
  margin-left: 2px;
}

.pricing-material-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(234, 179, 8, 0.12);
  border: 1px solid rgba(234, 179, 8, 0.35);
  color: #fde047;
  font-size: 10.5px;
  font-weight: 750;
  padding: 2px 8px;
  border-radius: 5px;
  white-space: nowrap;
  letter-spacing: 0.02em;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.2s ease;
}

.pricing-material-badge.badge-no-material {
  background: rgba(239, 68, 68, 0.15) !important;
  border: 1.5px solid rgba(239, 68, 68, 0.5) !important;
  color: #fca5a5 !important;
  font-weight: 800 !important;
  max-width: 340px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase;
}

.pricing-bridge-mat-indicator {
  font-size: 11px;
  font-weight: 600;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.25);
  padding: 2px 8px;
  border-radius: 4px;
  margin-left: auto;
  text-transform: none;
  letter-spacing: normal;
}

.pricing-rates-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  padding: 8px;
  margin-top: 4px;
}

@media (max-width: 480px) {
  .pricing-rates-summary-grid {
    grid-template-columns: 1fr;
  }
}

.pricing-rate-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  padding: 4px 7px;
  font-size: 0.74rem;
  color: var(--text-heading, #e2e8f0);
}

.pricing-rate-pill .rate-pill-icon {
  font-size: 0.85em;
  opacity: 0.85;
}

.pricing-rate-pill .rate-pill-label {
  color: var(--muted, #94a3b8);
  font-size: 0.72rem;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pricing-rate-pill .rate-pill-val {
  color: #38bdf8;
  font-weight: 700;
  font-size: 0.75rem;
  white-space: nowrap;
}

/* ========================================================================== */
/* SECOES DO PAINEL (<details.control-group>)                                 */
/*                                                                            */
/* O `details` CONTINUA no DOM: o `uiManager.js` abre o grupo da etapa e o    */
/* `params.js` le `data-cat` por ele. O que sai e' a CAIXA: depois das etapas  */
/* cada grupo virou o cabecalho da propria secao, e a caixa dele somava com o  */
/* `.config-subcard` que ja' mora dentro. Medido em 2026-09-23 (390x844):      */
/* 4 caixas aninhadas por campo, 48 px por cabecalho repetindo o nome da aba   */
/* e 153,9 px de faixas antes do primeiro campo (21% da tela).                 */
/* ========================================================================== */
.control-group {
  margin: 0 0 10px 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  overflow: visible;
  min-height: 0 !important;
  flex-shrink: 0 !important;
  box-shadow: none !important;
  transition: none;
}

/* Grupo Aberto / Ativo: o destaque agora e' o TITULO dourado + filete. */
.control-group[open] {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin-bottom: 14px !important;
}

.control-group-summary {
  background: transparent !important;
  padding: 0 2px !important;
  height: 36px !important;
  min-height: 36px !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  cursor: pointer;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  box-sizing: border-box !important;
  touch-action: pan-y;
}

.control-group[open] > .control-group-summary {
  background: transparent !important;
  border-bottom: 1px solid rgba(212, 175, 55, 0.35) !important;
  color: var(--accent-gold) !important;
}

.control-group-summary .group-icon {
  font-size: 16px;
}

.control-group-summary .group-title {
  color: inherit !important;
  flex: 1;
}

.control-group-body {
  background: transparent !important;
  padding: 12px 0 0 !important;
  display: flex;
  flex-direction: column;
  gap: 12px !important;
}

/* SUB-BLOCOS INTERNOS (.wall-box): faixa tingida com filete, SEM borda — o
   cartao do painel e' um so' (o .config-subcard que envolve estes blocos). */
.wall-box,
div.wall-box,
#wallDistributedOptions {
  background: rgba(56, 189, 248, 0.045) !important;
  border: none !important;
  border-left: 3px solid rgba(56, 189, 248, 0.5) !important;
  border-radius: 0 8px 8px 0 !important;
  padding: 10px 12px !important;
  margin-top: 10px !important;
  box-shadow: none !important;
  color: #f1f5f9 !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

#wallDistributedOptions * {
  box-sizing: border-box !important;
}

.wall-box-header {
  margin-bottom: 10px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding-bottom: 6px !important;
}

.wall-box-title {
  font-size: 12px !important;
  font-weight: 800 !important;
  color: var(--accent-gold) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
}

.wall-box label {
  color: #cbd5e1 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

.wall-box input[type="number"],
.wall-box input[type="text"],
.wall-box select {
  background: #0a0f18 !important;
  border: 1px solid #334155 !important;
  color: #ffffff !important;
}

.field-hint-calc {
  background: rgba(56, 189, 248, 0.1) !important;
  border: 1px solid rgba(56, 189, 248, 0.25) !important;
  color: #7dd3fc !important;
  padding: 8px 12px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  margin: 6px 0 !important;
}

.btn-calc-wall {
  width: 100% !important;
  margin-top: 10px !important;
  padding: 10px 14px !important;
  background: linear-gradient(135deg, var(--accent-gold) 0%, #b8860b 100%) !important;
  color: #000000 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  border: none !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: transform 0.15s, box-shadow 0.15s !important;
}

.btn-calc-wall:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.35);
}

/* Grid de 2 colunas com respiro para números curtos */
.grid-two {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
}

/* --------------------------------------------------------------------------
   CONTRATO DO CAMPO EM DUAS COLUNAS (.panel.controls .grid-two)

   Defeitos medidos em 2026-09-23 (390x844), que estas regras fecham:

     * o par `targetRiserMm` / `riserCalcMode` tinha os CONTROLES desalinhados
       em 36 px dentro da mesma linha, porque um dos campos tem um `<small>`
       de dica abaixo do input: com `justify-content: flex-end` o campo com
       texto extra subia e o vizinho ficava onde estava;
     * a unidade "mm" era `position: absolute; bottom: 14px` do <label>, ou
       seja presa ao RODAPE do rotulo: com um <small> abaixo do input ela
       subia por cima do texto (medido: unidade em 641,6 contra o <small> em
       641,1, sobrepostos).

   Contrato novo: a celula e' uma grade de 3 trilhas (rotulo | 44px do
   controle | dica) e a unidade deixa de ser absoluta: passa a ocupar a MESMA
   trilha do controle, alinhada a direita, entao nunca mais depende da altura
   do rotulo. O par fica alinhado porque o ROTULO cabe em UMA linha: o que nao
   couber vai para a DICA do campo (terceira trilha), nunca para o rotulo — ver
   o bloco "TELA ESTREITA", abaixo, que registra a tentativa de empilhar e a
   reprovacao do usuario.
   -------------------------------------------------------------------------- */
.panel.controls .grid-two {
  align-items: start !important;
  /* O par le' como UM bloco: os dois campos ficam encostados (4 px), nao
     separados pelo gutter de 12 px do `.grid-two` generico. Pedido do usuario
     com print: "ainda temos o espaco entre todos eles, a ideia e' mais ou menos
     como a linha verde". O `row-gap` nao muda (a linha do par e' uma so'). */
  column-gap: 4px !important;
}

.panel.controls .grid-two > label,
.panel.controls .grid-two > .winder-field-wrap > label {
  display: grid;
  /* A trilha UNICA tem de PREENCHER a celula. Sem estas duas linhas a coluna
     ficava dimensionada pelo conteudo (118,8 px numa celula de 159,8 px) e o
     `justify-content: flex-end` herdado de `.control-group-body label`
     empurrava a trilha para a direita: o campo nao enchia a celula e sobravam
     ~41 px vazios em cada lado — o "espaco entre todos eles" do print do
     usuario. Medido antes: input 118,8 px em coluna de 159,8 px. */
  grid-template-columns: minmax(0, 1fr) !important;
  justify-content: start !important;
  /* A trilha do rotulo tem MINIMO: o texto do rotulo precisa de ~15 px e a
     trilha `auto` pode fechar em 0 px (medido: `0px 43.99px 0px`), deixando o
     texto transbordar por cima do proprio campo. */
  grid-template-rows: minmax(16px, auto) 44px auto !important;
  align-content: start !important;
  gap: 6px !important;
  min-width: 0;
  margin: 0 !important;
}

/* O controle ocupa a trilha do MEIO: e' ela que define onde o campo comeca.
   O `margin-top: 5px` que o styles.css legado da' aos selects ficava DENTRO
   da trilha e empurrava o select 5 px abaixo do input vizinho (medido em
   2026-09-23: `targetRiserMm` em 535,97 contra `riserCalcMode` em 540,97); na
   grade o espaco entre rotulo e controle e' o `gap`. */
.panel.controls .grid-two > label > input,
.panel.controls .grid-two > label > select,
.panel.controls .grid-two > .winder-field-wrap > label > input,
.panel.controls .grid-two > .winder-field-wrap > label > select {
  grid-row: 2;
  grid-column: 1;
  width: 100%;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* O TEXTO do rotulo vive na PRIMEIRA trilha. Os campos com texto em elemento
   (`<span id="labelWall1">Parete 1 (Rampa Inf.)</span>`) precisam desta regra
   explicita: sem ela o seletor da unidade — que aceita qualquer span sem as
   classes `field-label-text`/`field-subnote` — colocava o TEXTO do rotulo na
   trilha do controle. Pior: o `styles.css` LEGADO tem `label span {
   position: absolute; top: 36px; font-size: 11.5px }` para a unidade "mm",
   entao um span de texto sem a classe `field-label-text` saia do fluxo e era
   desenhado EM CIMA do campo. Medido em 2026-09-23 (1600x900): `#labelWall1`
   com `position: absolute`, `top: 34,99px`, h 23 — o valor "2690" ficava
   escrito por cima do rotulo. Aqui o texto volta ao fluxo com a tipografia de
   rotulo; `.field-label-text` (que ja' se protegia sozinho) segue como esta'. */
.panel.controls .grid-two > label > span:first-child,
.panel.controls .grid-two > .winder-field-wrap > label > span:first-child {
  grid-row: 1;
  grid-column: 1;
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--text-secondary) !important;
  line-height: 1.3 !important;
}

/* A unidade mora DENTRO da trilha do controle (overlay a direita). O
   `padding-right` que reserva a faixa continua vindo do styles.css
   (`label:has(span) input`), nao mexer nele. */
.panel.controls .grid-two > label > span:not(.field-label-text):not(.field-subnote):not(:first-child),
.panel.controls .grid-two > .winder-field-wrap > label > span:not(.field-label-text):not(.field-subnote):not(:first-child) {
  grid-row: 2;
  grid-column: 1;
  justify-self: end;
  align-self: center;
  position: relative !important;
  right: auto !important;
  bottom: auto !important;
  top: auto !important;
  transform: none !important;
  margin-right: 12px;
  pointer-events: none !important;
  z-index: 1;
  font-size: 11.5px !important;
  color: #8a887f !important;
  line-height: 1 !important;
}

/* A dica opcional ocupa a TERCEIRA trilha: ela cresce para baixo e nunca
   empurra o controle do vizinho. */
.panel.controls .grid-two > label > small {
  grid-row: 3;
  grid-column: 1;
}

/* SUBGRID: TESTADO E DESCARTADO (nao voltar sem medir). Com
   `grid-template-rows: subgrid` neste Chrome o TEXTO do rotulo e o CAMPO
   trocam de trilha: medido com sondas de trilha (`grid-row` como filho direto
   da grade, topo 1 = 628,97 / 2 = 656,97), o input ficou em 653,97 e o rotulo
   em 675,97 — o valor aparecia escrito por cima do rotulo. A grade por celula
   (tres trilhas dentro de cada campo) ja' resolve o caso comum; a largura
   estreita e' resolvida empilhando os campos, mais abaixo. */

/* TELA ESTREITA: OS DOIS LADOS CONTINUAM LADO A LADO.

   Cheguei a empilhar os campos abaixo de 380 px e o usuario REPROVOU com print
   ("temos que alinhar de lado a lado todos eles, pois assim ficou muito
   desorganizado"). O caminho e' outro, e nao precisa de excecao de largura: o
   par so' desalinha quando UM rotulo ocupa duas linhas e o vizinho uma. Com as
   duas colunas, o UNICO rotulo que quebrava em alguma largura era "Collo
   interno (0 = spigolo)" (27 caracteres numa coluna de ~135 px), medido a 375,
   340 e 320 px. A explicacao saiu do ROTULO e virou a DICA do campo (`<small>`,
   terceira trilha, que nao empurra nada); o rotulo curto cabe em uma linha em
   qualquer largura e o par fica alinhado por construcao, sem escada de fonte.
   Regra para rotulo novo: se nao couber numa linha da coluna mais estreita
   (~124 px), a explicacao vai para a dica — nao para o rotulo. */

/* Mesmo contrato nas 3 colunas do Vano Bloccato (N alzate | Pedata | Alzata) */
.panel.controls .locked-void-block .grid-three {
  align-items: start !important;
  column-gap: 4px !important;
}

.panel.controls .locked-void-block .grid-three label {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  justify-content: start !important;
  grid-template-rows: auto 44px auto !important;
  align-content: start !important;
  gap: 4px !important;
}

.panel.controls .locked-void-block .grid-three label > input {
  grid-row: 2;
  grid-column: 1;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.panel.controls .locked-void-block .grid-three label > span:not(.field-label-text) {
  grid-row: 2;
  grid-column: 1;
  justify-self: end;
  align-self: center;
  position: relative !important;
  right: auto !important;
  bottom: auto !important;
  top: auto !important;
  transform: none !important;
  margin-right: 8px;
  pointer-events: none !important;
  z-index: 1;
  font-size: 11px !important;
  color: #8a887f !important;
  line-height: 1 !important;
}

/* Selects de texto longo NUNCA devem ser cortados */
.control-group-body select,
#winderMethod,
#winderCornerType,
#stairType,
#normProfile,
#winderWallPattern,
#riserJointType,
#treadDefinition,
#riserCalcMode {
  width: 100% !important;
  height: 44px !important;
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-color) !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-size: 13.5px !important;
  outline: none;
  box-sizing: border-box;
}

.control-group-body label {
  display: flex;
  flex-direction: column;
  /* `flex-end` (alinhamento por rodape da versao antiga) empurra o conteudo
     do rotulo para o FIM do eixo principal. Medido em 2026-09-24 no
     `#groupPartenzaArrivoWrap`, painel de 560 px: o checkbox da linha de
     opcao parava em x=155,4 com 143,4 px VAZIOS a' esquerda, e cada linha
     num x diferente (155,4 / 100,1 / 110,1) — o vazio que o usuario marcou
     com as linhas verdes no print. Rótulo e controle comecam sempre no
     inicio da celula (o empilhamento segue reprovado: ver "TELA ESTREITA"). */
  justify-content: flex-start;
  gap: 6px;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--text-secondary) !important;
  width: 100%;
  position: relative;
  margin-bottom: 0 !important;
}

/* Protege os títulos de label contra o posicionamento absoluto legado do styles.css */
.field-label-text {
  position: static !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
  pointer-events: auto !important;
  display: block !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--text-secondary) !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Alinhamento uniforme nos grupos de duas colunas.
   A receita da celula (3 trilhas + unidade na trilha do controle) esta' no
   bloco "CONTRATO DO CAMPO EM DUAS COLUNAS", acima, e vale SO' para o painel
   lateral: `.grid-two` tambem aparece em modal e no print. */

/* `#groupStraightRun1` e `#groupWall2` eram alinhados AQUI por flex-end.
   Sendo celulas do contrato do campo, cada um tem agora as mesmas trilhas do
   vizinho — e esta regra (seletor de ID vence classes) era o que fazia o
   `#groupWall2` ficar com `display: flex` e desalinhar o par em 3 px (medido
   em 2026-09-23: 640,2 contra 643,2).

   O `display` do contrato NAO leva `!important` justamente para o
   `style.display = "none"` que o `params.js` escreve continuar vencendo; a
   rede de seguranca abaixo repete o padrao do `#wallLengthFondoGroup`. */
.panel.controls .grid-two > label[style*="display: none"],
.panel.controls .grid-two > label[style*="display:none"],
.panel.controls .grid-two > label[hidden],
#wallLengthFondoGroup[style*="display: none"],
#wallLengthFondoGroup[style*="display:none"] {
  display: none !important;
}

.control-group-body input[type="number"],
.control-group-body input[type="text"] {
  height: 44px !important;
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-color) !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
  box-sizing: border-box;
  outline: none;
  width: 100%;
  margin: 0 !important;
}

.control-group-body input:focus,
.control-group-body select:focus {
  border-color: var(--accent-gold) !important;
}

/* A unidade dos inputs de 44px: receita ABSOLUTA, presa ao rodape do rotulo.
   Vale para modal e print. No painel lateral quem vence e' a regra do bloco
   "CONTRATO DO CAMPO EM DUAS COLUNAS" (mesmas propriedades, especificidade
   maior: `.panel.controls .grid-two > label > span` contra `.grid-two >
   label > span`), entao a unidade la' deixa de depender da altura do rotulo. */
.grid-two > label > span:not(.field-label-text):not(.field-subnote) {
  position: absolute !important;
  right: 12px !important;
  bottom: 14px !important;
  top: auto !important;
  transform: none !important;
  font-size: 11.5px !important;
  color: #8a887f !important;
  pointer-events: none !important;
  line-height: 1 !important;
}

/* --------------------------------------------------------------------------
   LINHA DE OPÇÃO COM CHECKBOX (.check-row)

   Um checkbox nativo dentro de <label> no painel saía completamente
   desconfigurado, por três regras legadas que se somavam:

     1. `.control-group-body label` força `flex-direction: column` — o
        checkbox e o texto empilhavam em vez de ficarem lado a lado;
     2. `label span` (styles.css) joga TODO <span> do rótulo para
        `position:absolute; top:36px` — o texto da opção saía do fluxo e
        subia por cima do controle;
     3. `label:has(span) input { padding-right:55px }` reserva a faixa da
        unidade "mm" à direita do campo, e com `box-sizing:border-box` um
        checkbox de 20px ficava sem área útil nenhuma.

   Por isso o componente reseta as tres coisas explicitamente. Alvo de toque
   de 44px no minimo (o uso principal e' no celular) e SEM borda: a ultima
   caixa que sobrava dentro do subcard era esta, e o checkbox + o texto em
   negrito ja' delimitam a opcao.
   -------------------------------------------------------------------------- */
.control-group-body .check-row {
  display: flex;
  flex-direction: row;
  /* Repete a intencao da base de proposito: quem le' este bloco nao deve
     ter de cacar o `justify-content` de `.control-group-body label`. Sem
     isto o checkbox e o texto ficavam empacotados a' DIREITA (medido: 155,4
     px do topo esquerdo da linha, com 143,4 px vazios). */
  justify-content: flex-start;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
  padding: 10px 12px;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
}

.control-group-body .check-row input[type="checkbox"] {
  flex: none;
  width: 20px;
  height: 20px;
  /* O padding-right herdado do `label:has(span) input` esmagaria o quadrado. */
  padding: 0;
  margin: 1px 0 0;
  accent-color: var(--accent-gold);
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   O QUADRADO DO CHECK (I12)

   O checkbox nativo, mesmo com `accent-color` (que so' pinta o estado MARCADO),
   desenha a caixa VAZIA com o fundo do `input, select { background: #fbfaf6 }`
   do styles.css: medido em 2026-10-13, rgb(251,250,246) com borda rgb(32,32,29)
   — um quadrado CREME no meio do painel escuro. O usuario apontou exatamente
   isso ("cor branca checkbox nativo") na escada em C, mas o defeito e' de TODA
   `.check-row` e tambem do `#hasNosing` (a caixinha do rotulo "Sporgenza"), por
   isso a receita e' declarada UMA vez para as duas casas.

   A tecnica e' a mesma do switch do wizard (`80-medida-rei-verso.css`): apaga a
   aparencia nativa e desenha a caixa e o sinal. A COR nao muda de identidade —
   continua o dourado do `accent-color` que ja' estava aqui.

   NAO virou `.toggle-switch`: um switch diz "ligado/desligado" de um recurso, e
   as `.check-row` sao ESCOLHAS estruturais com explicacao ("Unisci la mezzaluna
   interna", "Ultimo gradino a quota finita Z"); alem disso o pill exigiria
   markup novo nas ~10 linhas do app. O quadrado dourado mantem a leitura.
   -------------------------------------------------------------------------- */
.control-group-body .check-row input[type="checkbox"],
.panel.controls .field-label-switch > input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  /* O sinal e' posicionado em relacao a' CAIXA. No `#hasNosing` quem manda
     continua sendo o `position: absolute` do rotulo (parte 10, mais especifico):
     um elemento posicionado tambem e' containing block dos proprios filhos. */
  position: relative;
  box-sizing: border-box;
  border: 1.5px solid rgba(148, 163, 184, 0.55);
  border-radius: 5px;
  background: rgba(15, 23, 42, 0.9);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45);
  transition: background 0.16s ease, border-color 0.16s ease;
}

.control-group-body .check-row input[type="checkbox"]:hover,
.panel.controls .field-label-switch > input[type="checkbox"]:hover {
  border-color: rgba(56, 189, 248, 0.65);
}

/* O sinal e' um "L" girado a 45 graus, CENTRADO por `inset: 0; margin: auto`:
   em % ele crescia junto com a caixa (medido: 19,8 px de altura numa caixa de
   20 — o traco saia do quadrado). Tamanho fixo serve os 20 px da `.check-row` e
   os 16 px do `#hasNosing` sem nenhum ajuste. */
.control-group-body .check-row input[type="checkbox"]::after,
.panel.controls .field-label-switch > input[type="checkbox"]::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 5px;
  height: 10px;
  border: solid #1a1a12;
  border-width: 0 2px 2px 0;
  transform: translateY(-1px) rotate(45deg);
  opacity: 0;
  transition: opacity 0.12s ease;
}

.control-group-body .check-row input[type="checkbox"]:checked,
.panel.controls .field-label-switch > input[type="checkbox"]:checked {
  background: var(--accent-gold);
  border-color: var(--accent-gold);
  box-shadow: none;
}

.control-group-body .check-row input[type="checkbox"]:checked::after,
.panel.controls .field-label-switch > input[type="checkbox"]:checked::after {
  opacity: 1;
}

.control-group-body .check-row input[type="checkbox"]:focus-visible,
.panel.controls .field-label-switch > input[type="checkbox"]:focus-visible {
  outline: 2px solid #38bdf8;
  outline-offset: 2px;
}

.control-group-body .check-row input[type="checkbox"]:disabled,
.panel.controls .field-label-switch > input[type="checkbox"]:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.control-group-body .check-row .check-row-text {
  /* Contrapõe o `label span` de posicionamento absoluto do styles.css. */
  position: static;
  right: auto;
  top: auto;
  transform: none;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.control-group-body .check-row .check-row-text strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-heading);
  line-height: 1.25;
}

.control-group-body .check-row .check-row-text small {
  font-size: 11.5px;
  font-weight: 400;
  color: var(--muted);
  line-height: 1.35;
}

/* Opção que depende de outra (o 1º degrau à vista precisa de paredes): fica
   apagada mas legível, porque a dica ao lado é que explica a dependência. */
.control-group-body .check-row:has(input:disabled) {
  opacity: 0.55;
  cursor: not-allowed;
}

.control-group-body .check-row input:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 2px;
}

/* Blocos que o app liga e desliga com `hidden`. O `[hidden]` da folha do
   navegador não basta: qualquer `display` declarado aqui com `!important`
   (como o `.grid-two` logo abaixo) venceria, e o bloco apareceria sempre —
   era o caso dos campos de "Sporgenza laterale". */
.control-group-body [hidden] {
  display: none !important;
}

/* O MESMO problema, agora com as duas classes que declaram `display` a TRÊS
   classes de especificidade: `.panel.controls .pair` (grade) e `.panel.controls
   .config-subcard` (flex). Entre dois `!important` ganha o de especificidade
   maior, e a guarda genérica acima não as alcança — por isso o nome próprio.
   Medido no aceite de 2026-10-05 com `getComputedStyle` + `getClientRects`: a
   Geometria della Tipologia, o metodo do ventaglio, o cartão
   do Vano Murario e a grade do percurso ficavam com `hidden = true` e `display`
   visível (e caixa de 410x268) — a PROPRIEDADE estava certa, a tela é que não
   obedecia. */
.panel.controls .pair[hidden],
.panel.controls .config-subcard[hidden] {
  display: none !important;
}

/* ==========================================================================
   STEPPERS TÁTEIS DO PAINEL LATERAL (SIDEBAR CONTROLS)
   Botões + e - táteis integrados aos inputs de quantidade e medidas.
   ========================================================================== */
.sidebar-stepper-wrap {
  display: flex !important;
  align-items: stretch !important;
  height: 44px !important;
  background: var(--bg-surface, #1e1e24) !important;
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12)) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  position: relative !important;
  width: 100% !important;
  margin: 0 !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.panel.controls .grid-two > label > .sidebar-stepper-wrap,
.panel.controls .grid-two > .winder-field-wrap > label > .sidebar-stepper-wrap {
  grid-row: 2 !important;
  grid-column: 1 !important;
  width: 100% !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.sidebar-stepper-wrap:focus-within {
  border-color: var(--accent-gold, #38bdf8) !important;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.25) !important;
}

.sidebar-stepper-wrap .btn-stepper-action {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  min-width: 34px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: #cbd5e1 !important;
  border: none !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  touch-action: manipulation !important;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
  padding: 0 !important;
  margin: 0 !important;
  z-index: 2;
}

.sidebar-stepper-wrap .btn-stepper-action:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}

.sidebar-stepper-wrap .btn-stepper-action:active {
  background: rgba(56, 189, 248, 0.35) !important;
  color: #38bdf8 !important;
  transform: scale(0.95);
}

.sidebar-stepper-wrap .btn-stepper-minus {
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.sidebar-stepper-wrap .btn-stepper-plus {
  border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.sidebar-stepper-wrap input[type="number"] {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  text-align: center !important;
  padding: 0 4px !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  margin: 0 !important;
  -moz-appearance: textfield !important;
  appearance: textfield !important;
}

.sidebar-stepper-wrap input[type="number"]:focus {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.sidebar-stepper-wrap input[type="number"]::-webkit-outer-spin-button,
.sidebar-stepper-wrap input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

.sidebar-stepper-wrap .stepper-unit {
  display: flex !important;
  align-items: center !important;
  font-size: 11px !important;
  color: #8a887f !important;
  padding-right: 6px !important;
  pointer-events: none !important;
  user-select: none !important;
  white-space: nowrap !important;
  position: static !important;
  margin: 0 !important;
  line-height: 1 !important;
  z-index: 1;
}

/* ==========================================================================
   2. ÁREA CENTRAL: VIEWPORT 2D / 3D & ELIMINAÇÃO TOTAL DE BARRAS CORTADAS
   ========================================================================== */
.stage {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  background: #090d15 !important;
  overflow: hidden !important;
  height: 100% !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
}

.stage-top {
  background: var(--bg-surface) !important;
  border-bottom: 1px solid var(--border-color) !important;
  padding: 12px 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  color: #ffffff !important;
  flex-shrink: 0 !important;
}

.stage-top .eyebrow {
  color: var(--accent-gold) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  margin: 0 0 2px 0 !important;
}

.stage-top #projectTitle {
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  margin: 0 !important;
}

.stage-top .summary {
  display: flex !important;
  gap: 8px !important;
}

.stage-top .summary span,
#riserSummary,
#quoteSummary {
  background: var(--bg-surface-elevated) !important;
  color: var(--accent-cyan) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 6px !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

.viewport-area {
  flex: 1 1 0% !important;
  position: relative !important;
  height: auto !important;
  min-height: 0 !important;
  width: 100% !important;
  background: #06090e !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* ELIMINAÇÃO DEFINITIVA DO STATUS STRIP CORTADO NO RODAPÉ DO CANVAS */
#statusStrip,
.status-strip {
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

/* --- BOTÃO FLUTUANTE & POPOVER DE FERRAMENTAS 2D (FAB) --- */
.plan-floating-container {
  position: absolute !important;
  bottom: 20px !important;
  left: 20px !important;
  z-index: 120 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

.plan-floating-container[hidden] {
  display: none !important;
}

.plan-fab-bar {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.btn-plan-fab {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(13, 20, 32, 0.94) !important;
  border: 1px solid rgba(56, 189, 248, 0.4) !important;
  border-radius: 999px !important;
  padding: 8px 16px !important;
  color: #f8fafc !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 14px rgba(2, 132, 199, 0.25) !important;
  backdrop-filter: blur(16px) !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  user-select: none !important;
}

.btn-plan-fab:hover {
  background: #0284c7 !important;
  border-color: #38bdf8 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 28px rgba(2, 132, 199, 0.4) !important;
}

.btn-plan-fab:active {
  transform: scale(0.96) !important;
}

.btn-quick-fs {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  background: rgba(13, 20, 32, 0.94) !important;
  border: 1px solid rgba(56, 189, 248, 0.4) !important;
  border-radius: 50% !important;
  color: #38bdf8 !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(16px) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

/* I25: o botao da configuracao de paredes & portas 3D so' existe nas
   tipologias onde esse sistema age (curva C e corte a 45 graus), e quem o
   esconde e' o `hidden` aplicado pelo `readParams` — como em todo gate do
   painel. O `display: inline-flex !important` logo acima venceria o `[hidden]`
   da folha do navegador, entao a regra por ID devolve a forca ao atributo
   (mesma armadilha documentada em `.plan-floating-container[hidden]`). */
#btn3DWallDoor[hidden] {
  display: none !important;
}

.btn-quick-fs:hover {
  background: #0284c7 !important;
  border-color: #38bdf8 !important;
  color: #ffffff !important;
  transform: scale(1.08) !important;
}

.btn-quick-fs.is-active {
  background: #eab308 !important;
  border-color: #fde047 !important;
  color: #0b1120 !important;
}

/* POPOVER MODERNO DE FERRAMENTAS 2D */
.plan-tools-popover {
  position: absolute !important;
  bottom: calc(100% + 12px) !important;
  left: 0 !important;
  width: 310px !important;
  max-width: calc(100vw - 32px) !important;
  background: rgba(11, 18, 30, 0.97) !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
  border-radius: 16px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85), 0 0 24px rgba(2, 132, 199, 0.25) !important;
  backdrop-filter: blur(20px) !important;
  padding: 16px !important;
  display: flex;
  flex-direction: column !important;
  gap: 14px !important;
  box-sizing: border-box !important;
  animation: popoverFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  /* O painel cresce para CIMA (bottom: 100% + 12px). Sem teto de altura e
     rolagem própria, os últimos grupos saem pelo topo da janela e parecem
     "fora do popover". O piso de 240px evita um popover espremido em telas
     baixas; overscroll-behavior impede que a rolagem vaze para a página. */
  max-height: max(240px, calc(100vh - 190px)) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(148, 163, 184, 0.45) transparent !important;
}

/* Filhos diretos do popover não encolhem: sem isto o flex-column comprime os
   grupos para caberem no teto de altura em vez de deixar a rolagem acontecer,
   e os rótulos/campos saem esmagados. */
.plan-tools-popover > * {
  flex: 0 0 auto !important;
}

.plan-tools-popover::-webkit-scrollbar {
  width: 8px !important;
}

.plan-tools-popover::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.4) !important;
  border-radius: 999px !important;
}

@keyframes popoverFadeIn {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.popover-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.popover-title {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  color: #f8fafc !important;
}

.btn-close-popover {
  background: transparent !important;
  border: none !important;
  color: #94a3b8 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  padding: 4px !important;
  line-height: 1 !important;
  border-radius: 4px !important;
}

.btn-close-popover:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

.popover-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.popover-group-label {
  font-size: 10px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  color: #64748b !important;
}

.popover-grid-two {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}

.popover-zoom-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.popover-zoom-row button,
.popover-grid-two button {
  flex: 1 !important;
  background: #162235 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #f1f5f9 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  padding: 7px 10px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  text-align: center !important;
}

.popover-zoom-row button:hover,
.popover-grid-two button:hover {
  border-color: #38bdf8 !important;
  background: #1e3048 !important;
  color: #ffffff !important;
}

.popover-zoom-row button.is-active,
.popover-grid-two button.is-active {
  background: #0284c7 !important;
  color: #ffffff !important;
  border-color: #38bdf8 !important;
}

.popover-export-col {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.popover-export-col button {
  background: #141f30 !important;
  border: 1px solid rgba(56, 189, 248, 0.25) !important;
  color: #cbd5e1 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  text-align: left !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.popover-export-col button:hover {
  background: rgba(2, 132, 199, 0.2) !important;
  border-color: #38bdf8 !important;
  color: #ffffff !important;
}

.popover-export-col button.btn-highlight {
  border-color: rgba(212, 175, 55, 0.5) !important;
  color: #fde047 !important;
}

.popover-export-col button.btn-highlight:hover {
  background: rgba(212, 175, 55, 0.2) !important;
}

.popover-footer {
  padding-top: 8px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.btn-popover-fs {
  width: 100% !important;
  background: #1e293b !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  padding: 9px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  transition: all 0.15s ease !important;
}

.btn-popover-fs:hover {
  background: #0284c7 !important;
  border-color: #38bdf8 !important;
}

.popover-3d-btn {
  background: #162235 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #f1f5f9 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  padding: 8px 10px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  text-align: center !important;
}

.popover-3d-btn:hover {
  border-color: #38bdf8 !important;
  background: #1e3048 !important;
  color: #ffffff !important;
}

.popover-3d-btn.is-active {
  background: #0284c7 !important;
  color: #ffffff !important;
  border-color: #38bdf8 !important;
}

.popover-grid-three {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: 8px !important;
}

.popover-grid-three .popover-3d-btn {
  padding: 8px 6px !important;
}

.quote-mode-hint {
  font-size: 10px !important;
  color: #94a3b8 !important;
  letter-spacing: 0.2px !important;
}

/* ===========================================================================
   Gruppo 3: Struttura Ambiente 3D (pavimento, solaio, pareti, partenza/arrivo)
   Controlli aggiunti al popover 3D. Ver src/envControls.js e index.html.
   ---------------------------------------------------------------------------
   UM SÓ COMPONENTE DE LIGA/DESLIGA

   O mesmo interruptor aparece em três lugares: no popover, no cabeçalho de
   cada seção do painel e nas opções filhas dentro do corpo da seção. Antes
   havia um checkbox nativo no corpo e um trilho no cabeçalho — dois desenhos
   para o mesmo estado. Agora é um só: trilho + botão.

   O <input> real continua no DOM (é ele que o envControls.js lê e escuta, e é
   ele que recebe o foco do teclado), mas fica invisível. O estado marcado é
   desenhado por "input:checked + .env-switch-track", por isso o trilho tem de
   vir IMEDIATAMENTE depois do input no HTML.
   =========================================================================== */

.env-switch-track {
  display: block;
  box-sizing: border-box;
  flex: 0 0 auto;
  width: 42px;
  height: 24px;
  padding: 2px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: #2b3853;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.env-switch-thumb {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: transform 0.18s ease, background 0.18s ease;
}

/* O input real some da vista, mas continua focável e clicável pelo rótulo. */
.env-switch input,
.env-option-row input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.env-option-row,
.env-switch {
  position: relative;
}

.env-switch input:checked + .env-switch-track,
.env-option-row input:checked + .env-switch-track {
  background: rgba(212, 175, 55, 0.28);
  border-color: var(--accent-gold);
}

.env-switch input:checked + .env-switch-track .env-switch-thumb,
.env-option-row input:checked + .env-switch-track .env-switch-thumb {
  transform: translateX(18px);
  background: var(--accent-gold);
}

.env-switch input:focus-visible + .env-switch-track,
.env-option-row input:focus-visible + .env-switch-track {
  outline: 2px solid var(--accent-cyan);
  outline-offset: 2px;
}

.env-switch input:disabled + .env-switch-track,
.env-option-row input:disabled + .env-switch-track {
  opacity: 0.45;
}

/* ---------------------------------------------------------------------------
   POPOVER — cartão único com os seis interruptores e o botão do painel
   --------------------------------------------------------------------------- */

.popover-env-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  padding: 4px !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 10px !important;
  background: rgba(0, 0, 0, 0.18) !important;
}

/* --- Escudo contra o styles.css --------------------------------------------
   O styles.css carrega ANTES deste arquivo e traz duas regras de elemento
   pensadas para os campos antigos, onde cada campo era um <label> com margem
   própria e um <span> solto ao lado do input mostrava a unidade:

     label      { display:block; position:relative; margin-bottom:12px;
                  color:var(--muted); font-size:12px }
     label span { position:absolute; right:10px; top:36px;
                  transform:translateY(-50%); color:#8a887f;
                  font-size:11px; pointer-events:none }

   Todo controle de ambiente é um <label> feito de <span> — trilho e polegar do
   interruptor, ícone, rótulo, texto da opção. Aquelas regras tiravam os <span>
   do fluxo e os empilhavam em right:10px / top:36px do rótulo, e somavam 12px
   sob cada linha do popover. Era por isso que o app não batia com a prévia:
   a prévia carrega só este arquivo.

   Aqui os <span> do ambiente voltam ao fluxo normal e os rótulos perdem a
   margem herdada. Sem !important de propósito: um seletor de classe já vence
   "label span" (0,0,2), e sem !important os estados interativos que usam
   transform — o polegar marcado, o :hover do swatch — continuam vencendo. */
.popover-env-card span,
.env-sec-head span,
.env-sec-body span {
  position: static;
  right: auto;
  top: auto;
  transform: none;
  pointer-events: auto;
}

/* A margem de 12px do "label" do styles.css é que separava as linhas do
   popover — por acidente. A separação agora é o gap do cartão, acima. */
.popover-env-card label,
.env-sec-head label,
.env-sec-body label {
  margin-bottom: 0;
}

/* Cada interruptor é uma linha do cartão: mesma altura, mesmo alinhamento,
   realce no hover. Sem isto os cinco parecem controles soltos. */
.env-toggle-item {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  min-height: 38px !important;
  padding: 4px 8px !important;
  border-radius: 7px !important;
  cursor: pointer !important;
  font-size: 12.5px !important;
  color: #cbd5e1 !important;
  user-select: none !important;
  transition: background 0.12s ease, color 0.12s ease !important;
}

.env-toggle-item:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

.env-toggle-item input[type="checkbox"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Versão reduzida do mesmo trilho — o popover tem 310px de largura. */
.env-toggle-item .env-switch-track {
  box-sizing: border-box !important;
  width: 36px !important;
  height: 20px !important;
  padding: 2px !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  transition: background 0.18s ease, border-color 0.18s ease !important;
}

.env-toggle-item .env-switch-thumb {
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  background: #94a3b8 !important;
  transition: transform 0.18s ease, background 0.18s ease !important;
}

.env-toggle-item input:checked + .env-switch-track {
  background: rgba(212, 175, 55, 0.32) !important;
  border-color: #d4af37 !important;
}

.env-toggle-item input:checked + .env-switch-track .env-switch-thumb {
  transform: translateX(16px) !important;
  background: #d4af37 !important;
}

.env-toggle-item input:focus-visible + .env-switch-track {
  outline: 2px solid #38bdf8 !important;
  outline-offset: 2px !important;
}

/* Partenza/Arrivo dependem do pavimento/laje (ver syncFloorGroups em
   envControls.js): com o pai desligado a linha inteira fica inerte. */
.env-toggle-item:has(input[type="checkbox"]:disabled) {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
}

.env-toggle-item:has(input[type="checkbox"]:disabled):hover {
  background: transparent !important;
}

.env-toggle-item:has(input[type="checkbox"]:disabled) .env-switch-track {
  background: rgba(255, 255, 255, 0.06) !important;
}

.env-toggle-icon {
  flex: 0 0 auto !important;
  width: 18px !important;
  font-size: 14px !important;
  line-height: 1 !important;
  text-align: center !important;
  /* Emoji normalmente ignora color, mas quando a fonte de emoji falha o
     glifo cai para texto e sairia cinza do styles.css. */
  color: inherit;
}

.env-toggle-label {
  flex: 1 !important;
  min-width: 0 !important;
  /* Sem isto o "label span { font-size:11px; color:#8a887f }" do styles.css
     vence a herança e o rótulo sai menor e acinzentado dentro do cartão. */
  color: inherit;
  font-size: inherit;
}

/* Botão que abre o painel: fecha o cartão, separado por uma linha. */
.env-open-settings {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  width: 100% !important;
  margin-top: 4px !important;
  padding: 10px 8px 8px !important;
  min-height: 40px !important;          /* alvo de toque confortável no mobile */
  border: none !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 0 0 7px 7px !important;
  background: transparent !important;
  color: #e2e8f0 !important;
  font-family: inherit !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: color 0.15s ease !important;
}

.env-open-settings:hover {
  color: var(--accent-gold) !important;
}

.env-open-settings-icon {
  font-size: 15px !important;
  line-height: 1 !important;
}

.env-open-settings-text {
  flex: 1 !important;
}

/* Contador de elementos ativos — dá o estado do ambiente sem abrir o painel */
.env-open-settings-badge {
  flex: 0 0 auto !important;
  padding: 2px 7px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #94a3b8 !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important;
}

.env-open-settings-badge.is-on {
  background: rgba(212, 175, 55, 0.18) !important;
  color: var(--accent-gold) !important;
}

/* Os campos numéricos e os seletores existem SÓ no painel — não há mais uma
   versão de popover. A regra antiga daqui usava !important e por isso vencia,
   em silêncio, o tema claro do painel: os inputs saíam escuros e com fonte de
   11,5px dentro do modal. Quem define esses campos agora é .env-sec-body. */

/* Atalho de lado das paredes no popover: três botões que escrevem no #wallSides
   do painel. Ficam logo abaixo do interruptor "Pareti Laterali" e somem com
   ele desligado — escondidos, não desabilitados, para não deixar na tela um
   controle apagado sem caminho de volta. */
.env-side-quick {
  display: flex !important;
  gap: 6px !important;
  margin: 2px 0 8px 0 !important;
}

.env-side-btn {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  padding: 5px 4px !important;
  border-radius: 7px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: #cbd5e1 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  cursor: pointer !important;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.env-side-btn:hover {
  background: rgba(255, 255, 255, 0.09) !important;
}

.env-side-btn.is-active {
  background: rgba(212, 175, 55, 0.18) !important;
  border-color: rgba(212, 175, 55, 0.45) !important;
  color: var(--accent-gold) !important;
}

/* Swatches de cor da parede (base; o painel aumenta para o dedo) */
.wall-color-swatches {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.wall-swatch {
  box-sizing: border-box;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.25);
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.wall-swatch:hover {
  transform: scale(1.08);
}

.wall-swatch.is-active {
  border-color: var(--accent-gold);
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.35);
}

/* ---------------------------------------------------------------------------
   PAINEL "Configurazioni Ambiente 3D"
   Mobile primeiro: uma coluna, alvos de 40px, folha cheia em tela estreita.
   A partir de 561px o corpo passa a duas colunas — os campos largos ocupam as
   duas, então nenhuma célula fica órfã em meia largura.
   --------------------------------------------------------------------------- */

/* Dupla classe de propósito: empata em especificidade com `.modal-dialog`
   e vence por vir depois, então o max-width maior vale no desktop e a folha
   cheia do mobile continua ganhando pelo !important. */
.modal-dialog.modal-dialog-env {
  max-width: 720px;
}

.env-sec {
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-surface);
  overflow: hidden;
}

.env-sec + .env-sec {
  margin-top: 14px;
}

/* Cabeçalho da seção: ícone • título/subtítulo • interruptor */
.env-sec-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 15px;
  background: var(--bg-surface-elevated);
  border-bottom: 1px solid var(--border-subtle);
}

.env-sec-icon {
  flex: 0 0 auto;
  font-size: 19px;
  line-height: 1;
}

.env-sec-titles {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.env-sec-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-primary);
}

.env-sec-sub {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.3;
}

.env-switch {
  flex: 0 0 auto;
  display: inline-flex;
  cursor: pointer;
  border-radius: 999px;
}

/* Corpo da seção: os campos somem quando o elemento está desligado */
.env-sec-body {
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Realce discreto quando a seção está desativada, para o cabeçalho continuar
   legível enquanto o corpo se recolhe. */
.env-sec.is-off .env-sec-icon,
.env-sec.is-off .env-sec-title {
  opacity: 0.6;
}

/* Grade única por seção. O gap horizontal é maior que o vertical porque as
   linhas de rótulo + campo já se separam sozinhas. */
.env-field-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

/* Campo com dica ou com leitura: ocupa a seção inteira em qualquer largura. */
.env-field-wide {
  grid-column: 1 / -1;
}

.env-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

/* Sem isto o `hidden` do HTML perderia para o display:flex acima — a regra
   [hidden] do browser não é !important. */
.env-field[hidden],
#slabVoidInfoGroup[hidden] {
  display: none !important;
}

.env-field-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* O controle preenche a célula; a unidade encosta na direita, de modo que
   campo numérico e seletor terminem na MESMA coluna. */
.env-field-control {
  display: flex;
  align-items: center;
  gap: 8px;
}

.env-unit {
  flex: 0 0 auto;
  font-size: 11.5px;
  color: var(--text-muted);
}

.env-field-hint {
  margin: 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-muted);
}

/* No painel os campos são maiores que no popover: dedo, não ponteiro */
.env-sec-body .env-number-input,
.env-sec-body .env-select {
  flex: 1;
  min-width: 0;
  /* O "input, select { margin-top:5px }" do styles.css não é anulado por
     nenhuma regra daqui, então o campo descia 5px dentro do .env-field-control
     e o número deixava de alinhar com a unidade ao lado. */
  margin: 0;
  box-sizing: border-box;
  background: var(--bg-main);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 13px;
  padding: 9px 10px;
  min-height: 40px;
}

.env-sec-body .env-number-input {
  font-variant-numeric: tabular-nums;
}

.env-sec-body .env-select {
  cursor: pointer;
}

.env-sec-body .env-number-input:focus,
.env-sec-body .env-select:focus {
  outline: none;
  border-color: var(--accent-gold);
}

.env-sec-body .wall-swatch {
  width: 38px;
  height: 38px;
}

/* Seletor de cor livre, dentro da mesma fila dos swatches.
   Precisa desfazer o styles.css legado, que dá a TODO input `width:100%`,
   `min-height:38px`, `padding:8px 10px` e fundo #fbfaf6 — sem isso o seletor
   vira uma barra clara de largura inteira no lugar de um swatch. As duas
   pseudo-classes de swatch são o que arredonda o miolo: sem elas o quadrado de
   cor fica reto dentro da borda redonda. A borda tracejada distingue os dois
   caminhos: cheio = paleta, tracejado = cor livre. */
.wall-color-custom {
  box-sizing: border-box;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  min-height: 0;
  margin-top: 0;
  padding: 0;
  border: 2px dashed rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.wall-color-custom:hover {
  transform: scale(1.08);
}

.wall-color-custom.is-active {
  border-color: var(--accent-gold);
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.35);
}

.wall-color-custom::-webkit-color-swatch-wrapper {
  padding: 0;
}

.wall-color-custom::-webkit-color-swatch {
  border: none;
  border-radius: 50%;
}

.wall-color-custom::-moz-color-swatch {
  border: none;
  border-radius: 50%;
}

.env-sec-body .wall-color-custom {
  width: 38px;
  height: 38px;
}

/* Textura da parede: botão de escolha, nome do arquivo e botão de remover. */
.wall-texture-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* É um <label>, então herda do styles.css legado `display:block`,
   `margin-bottom:12px` e a cor de texto apagada. Nada de <span> aqui dentro: a
   regra `label:has(span) input` reservaria 55px de padding à direita. */
.wall-texture-pick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin-bottom: 0;
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.12s ease, color 0.12s ease;
}

.wall-texture-pick:hover {
  border-color: var(--accent-gold);
  color: var(--accent-gold);
}

.wall-texture-name {
  flex: 1 1 120px;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wall-texture-remove {
  flex: 0 0 auto;
  padding: 8px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
  transition: border-color 0.12s ease, color 0.12s ease;
}

.wall-texture-remove:hover {
  border-color: var(--accent-rose);
  color: var(--accent-rose);
}

/* Opção filha do elemento pai (partenza/arrivo incassati). Mesma anatomia do
   cabeçalho da seção — ícone, títulos, interruptor — só que dentro do corpo. */
.env-option-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  background: var(--bg-card);
  cursor: pointer;
}

.env-option-row:hover {
  border-color: var(--border-color);
}

.env-option-row:has(input:disabled) {
  opacity: 0.5;
  cursor: not-allowed;
}

.env-option-icon {
  flex: 0 0 auto;
  font-size: 16px;
  line-height: 1;
  color: inherit;
}

.env-option-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* Ver o escudo no topo do bloco: sem isto o styles.css impõe 11px/#8a887f
     a todo <span> dentro do rótulo, e a herança não chega até aqui. */
  color: inherit;
  font-size: inherit;
}

.env-option-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
}

.env-option-sub {
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--text-muted);
}

/* Leitura calculada do vão (vem de computeStairwellVoid, em geometry.js) */
.env-readout {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 11px 13px;
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--accent-cyan);
  border-radius: 8px;
  background: var(--bg-main);
}

.env-readout[hidden] {
  display: none !important;
}

.env-readout-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 0;
}

.env-readout-label {
  font-size: 11.5px;
  color: var(--text-secondary);
}

.env-readout-value {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.env-readout-warn {
  margin: 6px 0 0;
  padding-top: 7px;
  border-top: 1px dashed rgba(245, 158, 11, 0.4);
  font-size: 11px;
  line-height: 1.45;
  color: var(--accent-amber);
}

/* Duas colunas assim que houver largura — o painel é o mesmo no PC e no
   mobile, só muda a densidade. Os largos já ocupam 1 / -1. */
@media (min-width: 561px) {
  .env-field-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.popover-hint-box {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hint-item {
  font-size: 10.5px;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.3;
}

.hint-device {
  color: #38bdf8;
  font-weight: 700;
  white-space: nowrap;
}

/* Toolbar suspensa perfeitamente sem cortes com quebra automática elegante */
.viewport-toolbar {
  position: absolute !important;
  bottom: 16px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: fit-content !important;
  max-width: calc(100% - 24px) !important;
  height: auto !important;
  min-height: 42px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  row-gap: 6px !important;
  column-gap: 6px !important;
  background: rgba(13, 20, 32, 0.96) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.75) !important;
  border-radius: 12px !important;
  padding: 6px 10px !important;
  box-sizing: border-box !important;
  z-index: 100 !important;
  transition: all 0.2s ease !important;
}

.viewport-toolbar .toolbar-divider {
  width: 1px !important;
  height: 22px !important;
  background: rgba(56, 189, 248, 0.25) !important;
  margin: 0 2px !important;
  flex-shrink: 0 !important;
}

.viewport-toolbar .hint-nav {
  display: none !important;
}

.btn-toolbar-toggle-expand {
  display: none !important;
}

.btn-toolbar-toggle-expand:hover {
  background: rgba(56, 189, 248, 0.25) !important;
  color: #ffffff !important;
  border-color: #38bdf8 !important;
}

/* Seletor Segmentado de Perspectivas 2D (Pianta vs Sezione) */
.perspective-toggle-group {
  display: inline-flex !important;
  background: rgba(15, 23, 42, 0.8) !important;
  border-radius: 8px !important;
  padding: 2px !important;
  border: 1px solid rgba(56, 189, 248, 0.3) !important;
  gap: 2px !important;
}

.perspective-btn {
  background: transparent !important;
  color: #94a3b8 !important;
  border: none !important;
  padding: 0 10px !important;
  height: 32px !important;
  min-height: 32px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.perspective-btn:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

.perspective-btn.is-active {
  background: #38bdf8 !important;
  color: #0b1120 !important;
  box-shadow: 0 2px 8px rgba(56, 189, 248, 0.4) !important;
}

.viewport-toolbar button {
  background: var(--bg-surface-elevated) !important;
  color: #e2e8f0 !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  height: 36px !important;
  min-height: 36px !important;
  line-height: 34px !important;
  padding: 0 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

.viewport-toolbar button:hover {
  color: #ffffff !important;
  border-color: var(--accent-gold) !important;
  background: rgba(212, 175, 55, 0.15) !important;
}

.viewport-toolbar button.is-active {
  background: var(--accent-gold) !important;
  color: #000000 !important;
  font-weight: 800 !important;
}

/* ===========================================================================
   Gruppo 5: Foto & Condivisione (FAB do 3D + acoes no popover)
   ---------------------------------------------------------------------------
   A imagem sai do canvas WebGL: nada aqui entra na foto, porque tudo isto e'
   HTML por cima do canvas. Ver src/app-modules/photo-share.js.
   =========================================================================== */

.photo-action-col {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.photo-action-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 38px !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(56, 189, 248, 0.25) !important;
  background: #141f30 !important;
  color: #cbd5e1 !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.photo-action-btn:hover {
  background: rgba(2, 132, 199, 0.2) !important;
  border-color: #38bdf8 !important;
  color: #ffffff !important;
}

.photo-action-btn:disabled {
  opacity: 0.55 !important;
  cursor: progress !important;
}

/* Verde do WhatsApp: e' a unica acao do app com uma cor que o usuario ja'
   reconhece fora do tema — e ajuda a distinguir as duas saidas da foto. */
.photo-action-wa {
  border-color: rgba(37, 211, 102, 0.45) !important;
  color: #d7f5e3 !important;
}

.photo-action-wa:hover {
  background: rgba(37, 211, 102, 0.18) !important;
  border-color: #25d366 !important;
}

.photo-opts-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
}

/* O `styles.css` LEGADO tem `label span { position: absolute; top: 36px }`
   (feito para a unidade "mm" do painel) e vale na tela inteira: sem esta guarda
   o rotulo da qualidade aparece POR CIMA do campo. */
.photo-opts-row .photo-opt-label {
  position: static !important;
  top: auto !important;
  right: auto !important;
  transform: none !important;
  font-size: 11px !important;
  color: #94a3b8 !important;
  letter-spacing: 0.2px !important;
}

.photo-opt-select {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
  flex: 1 1 120px !important;
}

/* `input, select { width: 100%; min-height: 38px; margin-top: 5px }` tambem vem
   do legado: aqui o select divide a linha com dois checkboxes, entao ele
   declara a propria caixa. */
.photo-opt-select select {
  width: 100% !important;
  min-height: 32px !important;
  margin: 0 !important;
  padding: 4px 8px !important;
  background: #162235 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 7px !important;
  color: #e2e8f0 !important;
  font-size: 12px !important;
}

.photo-opt-check {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  min-height: 32px !important;
  padding: 0 4px !important;
  cursor: pointer !important;
}

/* Checkbox 18x18 como no resto do app: a regra generica de `input` deixaria a
   caixa com a largura inteira da linha. */
.photo-opt-check input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
  accent-color: #38bdf8 !important;
  cursor: pointer !important;
}

.photo-res-hint {
  font-size: 10px !important;
  color: #94a3b8 !important;
  letter-spacing: 0.2px !important;
}

/* Alvos de toque: medidos 34,3 px de altura no FAB de texto e 40x40 no botao
   redondo em viewport de 375 — abaixo dos 44 px que o resto do app usa. E a
   barra passa a QUEBRAR LINHA em vez de sair da tela quando entra o 3o item
   (a foto entra na barra do 3D, junto do FAB de vistas e do fullscreen). */
@media (max-width: 1024px) {
  .plan-fab-bar {
    flex-wrap: wrap !important;
    max-width: calc(100vw - 40px) !important;
  }

  .plan-fab-bar .btn-plan-fab {
    min-height: 44px !important;
  }

  .plan-fab-bar .btn-quick-fs {
    width: 44px !important;
    height: 44px !important;
    /* `width` sozinho NAO basta: medido 39,99 px no celular com `width: 44px`
       declarado, porque a barra (absoluta e shrink-to-fit) negocia o espaco com
       o FAB de texto e o botao encolhe — ou seja, o alvo de toque sumia
       justamente no aparelho onde ele importa. O `flex` fixo tira o botao da
       negociacao; a barra entao passa a 305 px (cabe em 375). */
    flex: 0 0 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }

  .photo-action-btn {
    min-height: 44px !important;
  }

  .photo-opt-select select {
    min-height: 40px !important;
  }

  .photo-opt-check {
    min-height: 40px !important;
  }
}

/* ===========================================================================
   MODAL: CONFIGURAZIONE PARETI & PORTE 3D (.modal-dialog-walldoor)
   Design System Escada3D / LastraSoft: Cards, Chips, Readouts, Segmented
   =========================================================================== */

.modal-dialog-walldoor {
  max-width: 640px !important;
  width: 95% !important;
  background: #0f172a !important;
  border: 1px solid rgba(56, 189, 248, 0.28) !important;
  border-radius: 16px !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.85), 0 0 35px rgba(56, 189, 248, 0.15) !important;
  color: #f1f5f9 !important;
}

/* CARD DE RESUMO E CÁLCULO DE ALTURA A PARTIR DO ZERO */
.walldoor-readout-card {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.85) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
  border-radius: 12px !important;
  padding: 14px 18px !important;
  margin-bottom: 20px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.walldoor-readout-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 12px !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.walldoor-readout-badge {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.8px !important;
  color: #38bdf8 !important;
  background: rgba(56, 189, 248, 0.12) !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(56, 189, 248, 0.25) !important;
}

.walldoor-delta-tag {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #34d399 !important;
}

.walldoor-readout-metrics {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

.walldoor-metric-col {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  flex: 1 1 0 !important;
}

.walldoor-metric-label {
  font-size: 11px !important;
  color: #94a3b8 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.walldoor-metric-value {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #f8fafc !important;
}

.walldoor-metric-highlight {
  color: #38bdf8 !important;
}

.walldoor-metric-plus,
.walldoor-metric-equal {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #64748b !important;
}

.walldoor-metric-total .walldoor-metric-value {
  font-size: 18px !important;
  color: #38bdf8 !important;
}

/* SEÇÕES */
.walldoor-sec {
  background: rgba(15, 23, 42, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  padding: 16px !important;
  margin-bottom: 16px !important;
}

.walldoor-sec-head {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 14px !important;
}

.walldoor-sec-icon {
  font-size: 20px !important;
  flex-shrink: 0 !important;
}

.walldoor-sec-titles {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.walldoor-sec-title {
  margin: 0 !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: #f1f5f9 !important;
}

.walldoor-sec-desc {
  margin: 2px 0 0 0 !important;
  font-size: 11.5px !important;
  color: #94a3b8 !important;
}

/* --- Escudo contra o label span legado do styles.css --- */
.modal-dialog-walldoor span,
.walldoor-sec-head span,
.walldoor-sec-content span,
.walldoor-switch span {
  position: static;
  right: auto;
  top: auto;
  transform: none;
  pointer-events: auto;
}

.modal-dialog-walldoor label,
.walldoor-sec-head label,
.walldoor-sec-content label,
.walldoor-switch {
  margin-bottom: 0 !important;
}

/* SWITCH CUSTOMIZADO DE PAREDES & PORTAS (IMUNE AO ESTILO LEGADO) */
.walldoor-switch {
  position: relative !important;
  display: inline-block !important;
  width: 44px !important;
  height: 24px !important;
  min-width: 44px !important;
  min-height: 24px !important;
  max-width: 44px !important;
  max-height: 24px !important;
  margin: 0 0 0 auto !important;
  padding: 0 !important;
  flex: 0 0 44px !important;
  cursor: pointer !important;
  user-select: none !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
}

.walldoor-switch input[type="checkbox"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 44px !important;
  height: 24px !important;
  top: 0 !important;
  left: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
  z-index: 5 !important;
  pointer-events: auto !important;
}

.walldoor-switch .walldoor-switch-track {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  width: 44px !important;
  height: 24px !important;
  box-sizing: border-box !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  background: #1e293b !important;
  transition: background 0.2s ease, border-color 0.2s ease !important;
  pointer-events: none !important;
  transform: none !important;
}

.walldoor-switch .walldoor-switch-thumb {
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  right: auto !important;
  bottom: auto !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: #94a3b8 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
  transform: translate3d(0, 0, 0) !important;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease, box-shadow 0.2s ease !important;
  pointer-events: none !important;
}

.walldoor-switch input:checked + .walldoor-switch-track {
  background: rgba(2, 132, 199, 0.45) !important;
  border-color: #38bdf8 !important;
}

.walldoor-switch input:checked + .walldoor-switch-track .walldoor-switch-thumb {
  transform: translate3d(20px, 0, 0) !important;
  background: #38bdf8 !important;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.7) !important;
}

.walldoor-sec-content.is-disabled {
  opacity: 0.55 !important;
  filter: grayscale(0.2) !important;
}

/* CAMPOS E GRUPOS */
.walldoor-field-group {
  margin-bottom: 14px !important;
}

.walldoor-field-group:last-child {
  margin-bottom: 0 !important;
}

.walldoor-field-label-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  margin-bottom: 6px !important;
}

.walldoor-label {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #cbd5e1 !important;
}

.walldoor-hint {
  font-size: 11px !important;
  color: #64748b !important;
}

.walldoor-input-with-unit {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  max-width: 220px !important;
  margin-bottom: 8px !important;
}

.walldoor-num-input {
  width: 100% !important;
  background: #1e293b !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 8px !important;
  padding: 8px 36px 8px 12px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #f8fafc !important;
  outline: none !important;
  transition: border-color 0.15s ease !important;
}

.walldoor-num-input:focus {
  border-color: #38bdf8 !important;
}

.walldoor-unit {
  position: absolute !important;
  right: 12px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #64748b !important;
  pointer-events: none !important;
}

/* CHIPS / BOTOES PRESETS (ROBUSTOS & ALINHADOS) */
.walldoor-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  width: 100% !important;
  align-items: center !important;
}

.walldoor-chip-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 34px !important;
  background: rgba(30, 41, 59, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 8px !important;
  padding: 6px 14px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #cbd5e1 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  user-select: none !important;
  box-sizing: border-box !important;
}

.walldoor-chip-btn:hover:not(.is-active) {
  background: rgba(56, 189, 248, 0.15) !important;
  border-color: #38bdf8 !important;
  color: #f8fafc !important;
}

.walldoor-chip-btn.is-active {
  background: rgba(2, 132, 199, 0.25) !important;
  border-color: #38bdf8 !important;
  color: #38bdf8 !important;
  font-weight: 700 !important;
  box-shadow: 0 0 0 1px #38bdf8, 0 2px 6px rgba(2, 132, 199, 0.2) !important;
}

/* SEGMENTED CONTROL (DESIGN SYSTEM LASTRASOFT) */
.walldoor-segmented-bar {
  display: flex !important;
  flex-direction: row !important;
  gap: 6px !important;
  background: #090e17 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  padding: 4px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  position: relative !important;
}

.walldoor-seg-btn {
  flex: 1 1 0 !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  padding: 8px 10px !important;
  min-height: 38px !important;
  color: #94a3b8 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  user-select: none !important;
  box-sizing: border-box !important;
}

.walldoor-seg-btn:hover:not(.is-active) {
  color: #f1f5f9 !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

.walldoor-seg-btn.is-active {
  background: linear-gradient(135deg, #0284c7, #0369a1) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.35) !important;
}

@media (max-width: 640px) {
  .walldoor-readout-metrics {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
  }
  .walldoor-metric-plus,
  .walldoor-metric-equal {
    display: none !important;
  }
}


/* ==========================================================================
   3. PAINEL DIREITO: REPORT, NORMAS E PEÇAS (PRODUCT DESIGN NÍVEL APPLE)
   ========================================================================== */
.panel.results {
  width: 560px !important;
  min-width: 560px !important;
  background: #0b111e !important;
  border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), width 0.28s, min-width 0.28s;
  overflow-y: auto !important;
  height: 100% !important;
  box-sizing: border-box;
  padding: 20px 22px 20px !important;
  color: #f8fafc !important;
}

.panel.results::-webkit-scrollbar {
  width: 6px;
}
.panel.results::-webkit-scrollbar-track {
  background: transparent;
}
.panel.results::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 9999px;
}
.panel.results::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

.panel.results.is-collapsed {
  transform: translateX(100%);
  width: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  opacity: 0;
  pointer-events: none;
}

/* Títulos de Seção com Tipografia Elegante */
.panel.results h1,
.panel.results h2,
.panel.results h3,
.panel.results h4,
.panel.results .results-title,
.section-title-wrap h3,
.section-title-wrap {
  color: #ffffff !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
}

.section-title-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: 24px !important;
  margin-bottom: 12px !important;
}

.section-title-wrap h3 {
  font-size: 13.5px !important;
  margin: 0 !important;
}

/* Header do Painel de Resultados */
.results-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  padding-bottom: 14px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.results-title {
  color: #f8fafc !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.02em;
}

.results-title::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-cyan);
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.6);
}

.badge-profile {
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 4px 10px !important;
  border-radius: 9999px !important;
  background: rgba(56, 189, 248, 0.1) !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(56, 189, 248, 0.25) !important;
  letter-spacing: 0.02em;
}

/* Cards de Resumo Financeiro & Técnico (Apple Cards) */
.summary-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 18px;
}

.summary-card {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  color: var(--text-primary) !important;
  transition: background-color 0.2s, border-color 0.2s, transform 0.2s;
}

.summary-card:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  transform: translateY(-1px);
}

.summary-card .card-label {
  color: #94a3b8 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.summary-card .card-value {
  color: #ffffff !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  margin: 4px 0 !important;
  display: block;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.summary-card .card-sub {
  color: #64748b !important;
  font-size: 11px !important;
  display: block;
}

/* ==========================================================================
   CAIXA DE EXPORTAÇÃO EXECUTIVA (ACTION BAR NÍVEL APPLE)
   ========================================================================== */
.export-box-modern {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 12px !important;
  padding: 14px !important;
  margin-bottom: 22px !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Banner Interativo de Acesso ao Dashboard Executivo Fullscreen */
.btn-exec-banner {
  width: 100%;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.85) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  cursor: pointer !important;
  text-align: left !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

.btn-exec-banner:hover {
  border-color: rgba(245, 158, 11, 0.6) !important;
  background: linear-gradient(135deg, rgba(40, 53, 75, 0.9) 0%, rgba(20, 30, 50, 0.98) 100%) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.15) !important;
}

.btn-exec-banner-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-exec-banner-icon {
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 8px;
  flex-shrink: 0;
}

.btn-exec-banner-text {
  display: flex;
  flex-direction: column;
}

.btn-exec-banner-title {
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.btn-exec-banner-sub {
  color: #94a3b8;
  font-size: 11px;
  margin-top: 1px;
}

.btn-exec-banner-arrow {
  color: #f59e0b;
  font-size: 16px;
  font-weight: 700;
  transition: transform 0.2s;
}

.btn-exec-banner:hover .btn-exec-banner-arrow {
  transform: translate(2px, -2px);
}

/* Banner de Acesso ao Nesting CAM (Fábrica / CAM) */
.btn-exec-banner-factory {
  border-color: rgba(45, 212, 191, 0.35) !important;
  background: linear-gradient(135deg, rgba(15, 118, 110, 0.22) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
}

.btn-exec-banner-factory:hover {
  border-color: rgba(45, 212, 191, 0.65) !important;
  background: linear-gradient(135deg, rgba(15, 118, 110, 0.38) 0%, rgba(20, 30, 50, 0.98) 100%) !important;
  box-shadow: 0 6px 18px rgba(45, 212, 191, 0.2) !important;
}

.btn-exec-icon-factory {
  background: rgba(45, 212, 191, 0.15) !important;
  border-color: rgba(45, 212, 191, 0.35) !important;
}

.btn-exec-banner-factory .btn-exec-banner-arrow {
  color: #2dd4bf !important;
}

/* Ações Primárias (Ordine di Taglio e Preventivo) */
.export-primary-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.btn-report-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 10px 12px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  text-align: center !important;
  box-sizing: border-box;
  min-height: 40px;
}

.btn-report-action-teal {
  background: linear-gradient(135deg, #0f766e, #0d9488) !important;
  border: 1px solid #2dd4bf !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(13, 148, 136, 0.25) !important;
}

.btn-report-action-teal:hover {
  background: linear-gradient(135deg, #115e59, #0f766e) !important;
  border-color: #5eead4 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(13, 148, 136, 0.35) !important;
}

.btn-report-action-slate {
  background: #1e293b !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #f8fafc !important;
}

.btn-report-action-slate:hover {
  background: #283548 !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

/* Grid de Chips de Arquivos CAD / DXF / ZIP */
.cad-export-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  gap: 6px;
}

.btn-cad-chip {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #cbd5e1 !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  padding: 8px 6px !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  white-space: nowrap !important;
}

.btn-cad-chip:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

.btn-cad-chip-highlight {
  border-color: rgba(56, 189, 248, 0.25) !important;
  color: #38bdf8 !important;
}

.btn-cad-chip-highlight:hover {
  background: rgba(56, 189, 248, 0.12) !important;
  border-color: #38bdf8 !important;
  color: #ffffff !important;
}

.btn-cad-chip-zip {
  border-color: rgba(212, 175, 55, 0.25) !important;
  color: var(--accent-gold) !important;
}

.btn-cad-chip-zip:hover {
  background: rgba(212, 175, 55, 0.12) !important;
  border-color: var(--accent-gold) !important;
  color: #ffffff !important;
}

.export-hint {
  color: #64748b !important;
  font-size: 11px !important;
  margin: 2px 0 0 0 !important;
  line-height: 1.4 !important;
}

/* --- O PERFIL NORMATIVO MORA AQUI (I5/I17) ---

   O `#normProfile` saiu da etapa 2 do painel esquerdo e veio para o card
   "Conformità Normativa": e' escolha de projeto, feita uma vez, e este e' o
   card onde a norma e' lida. O rotulo continua `label.pair-wide` porque o
   `test/painel_layout_contract.test.js` amarra esse markup por `assert.match`
   no `index.html` inteiro (o teste nao olha ONDE o campo esta').

   O contrato do `.pair` (grade de duas colunas, celula rotulo|controle|dica)
   e' do painel esquerdo (`.panel.controls`) e NAO vale aqui: sem estas duas
   regras o rotulo herdaria o `label { color: var(--muted) }` do styles.css —
   `#6f7168`, um cinza de tema claro sobre o painel escuro — e o campo
   ficaria com o respiro de 12 px do layout antigo. O `<select>` NAO precisa
   de regra: o `#normProfile` ja' esta' na lista dos "selects de texto longo"
   que o `20-sincronia-temas-subcards.css` estiliza POR ID (fundo, 44 px,
   borda) — estilo que nao depende do lugar. */
.norm-profile-row {
  margin: 10px 0 0;
}

.norm-profile-row > label {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin-bottom: 0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--text-secondary) !important;
}

/* --- CONFORMITÀ NORMATIVA: CARDS SÓLIDOS COM BORDA INDICADORA --- */
.norm-compliance-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-top: 10px !important;
}

.compliance-item {
  border-radius: 10px !important;
  padding: 12px 14px !important;
  background: #131b26 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
}

/* Conforme (Verde) */
.compliance-item.is-valid {
  border-left: 4px solid #10b981 !important;
}

.compliance-item.is-valid .compliance-badge {
  background: rgba(16, 185, 129, 0.2) !important;
  color: #10b981 !important;
  border: 1px solid rgba(16, 185, 129, 0.4) !important;
}

/* Atenção / Aviso (Âmbar) */
.compliance-item.is-warning {
  border-left: 4px solid #f59e0b !important;
}

.compliance-item.is-warning .compliance-badge {
  background: rgba(245, 158, 11, 0.2) !important;
  color: #f59e0b !important;
  border: 1px solid rgba(245, 158, 11, 0.4) !important;
}

.compliance-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.compliance-label {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
}

.compliance-badge {
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
}

.compliance-values {
  display: flex !important;
  gap: 14px !important;
  font-size: 12.5px !important;
  color: #e2e8f0 !important;
  margin-top: 2px !important;
}

.compliance-values .val-current strong {
  color: var(--accent-cyan) !important;
}

.compliance-values .val-norm {
  color: #94a3b8 !important;
}

.compliance-tip {
  font-size: 11px !important;
  color: #94a3b8 !important;
  line-height: 1.35 !important;
}

.btn-quick-fix {
  align-self: flex-start;
  background: var(--accent-gold) !important;
  color: #000 !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  border: none !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  margin-top: 4px !important;
}

/* --- DASHBOARD EXECUTIVO DE PRODUÇÃO & VÃO (NOVO CONCEITO MODERNO) --- */
.prod-dashboard-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin-top: 10px !important;
  margin-bottom: 24px !important;
}

.prod-metric-card {
  background: #131b26 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25) !important;
}

.prod-card-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding-bottom: 8px !important;
  margin-bottom: 10px !important;
}

.prod-card-title {
  font-size: 12.5px !important;
  font-weight: 800 !important;
  color: var(--accent-gold) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.prod-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 5px 0 !important;
  font-size: 12.5px !important;
}

.prod-row:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
}

.prod-label {
  color: #94a3b8 !important;
  font-weight: 500 !important;
}

.prod-val {
  color: #ffffff !important;
  font-weight: 700 !important;
  text-align: right !important;
}

.prod-val.highlight {
  color: var(--accent-cyan) !important;
}

.prod-val.gold {
  color: var(--accent-gold) !important;
  font-size: 14px !important;
}

.prod-val small {
  color: #94a3b8 !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  margin-left: 4px;
}

/* --- PEZZI IN MARMO: TABELA MODERNA COM VISIBILIDADE TOTAL --- */
.parts-actions-bar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 10px !important;
}

.btn-open-fullscreen-table {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.2) 0%, rgba(212, 175, 55, 0.08) 100%) !important;
  border: 1px solid var(--accent-gold) !important;
  color: var(--accent-gold) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 8px 12px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all 0.2s !important;
}

.btn-open-fullscreen-table:hover {
  background: var(--accent-gold) !important;
  color: #000000 !important;
}

.table-wrap {
  border: 1px solid rgba(148, 163, 184, 0.15) !important;
  border-radius: 12px !important;
  overflow: auto !important;
  width: 100% !important;
  background: rgba(15, 23, 42, 0.5) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3) !important;
}

.table-wrap::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.table-wrap::-webkit-scrollbar-thumb {
  background: rgba(45, 212, 191, 0.35);
  border-radius: 8px;
}
.table-wrap::-webkit-scrollbar-thumb:hover {
  background: rgba(45, 212, 191, 0.6);
}
.table-wrap::-webkit-scrollbar-track {
  background: transparent;
}

.table-wrap table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.table-wrap th {
  background: var(--bg-surface-elevated);
  padding: 10px 10px;
  font-size: 11px;
  font-weight: 700;
  color: #cbd5e1;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
}

.table-wrap td {
  padding: 10px 8px;
  font-size: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  color: #ffffff;
  vertical-align: middle;
}

/* Agrupamento de Botões de Ação na Tabela */
.step-actions-cell {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-wrap: wrap !important;
  min-width: 150px !important;
}

:not(.uv-card).btn-dxf-step,
:not(.uv-card).btn-lavorazioni-step,
:not(.uv-card).btn-lavorazioni-riser {
  display: inline-flex !important;
  align-items: center !important;
  padding: 5px 8px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  border: 1px solid var(--border-color) !important;
  background: var(--bg-surface-elevated) !important;
  color: #ffffff !important;
  transition: all 0.15s !important;
}

:not(.uv-card).btn-dxf-step:hover {
  border-color: var(--accent-gold) !important;
  color: var(--accent-gold) !important;
}

:not(.uv-card).btn-lavorazioni-step {
  border-color: rgba(56, 189, 248, 0.4) !important;
  background: rgba(56, 189, 248, 0.15) !important;
  color: var(--accent-cyan) !important;
}

:not(.uv-card).btn-lavorazioni-step:hover {
  background: rgba(56, 189, 248, 0.3) !important;
  border-color: var(--accent-cyan) !important;
}

:not(.uv-card).btn-lavorazioni-riser {
  border-color: rgba(212, 175, 55, 0.4) !important;
  background: rgba(212, 175, 55, 0.15) !important;
  color: var(--accent-gold) !important;
}

:not(.uv-card).btn-lavorazioni-riser:hover {
  background: rgba(212, 175, 55, 0.3) !important;
  border-color: var(--accent-gold) !important;
}

/* --- BARRA TOUCH INFERIOR: ESTRITAMENTE PARA SMARTPHONES (<= 768px) --- */
.bottom-touch-bar {
  display: none !important;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: var(--bg-surface);
  border-top: 1px solid var(--border-color);
  z-index: 200;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.5);
  justify-content: space-around;
  align-items: center;
  padding: 0 10px;
}

@media (min-width: 1025px) {
  .bottom-touch-bar {
    display: none !important;
  }
}

.touch-bar-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  height: 100%;
  gap: 3px;
}

.touch-bar-btn .touch-icon {
  font-size: 18px;
}

.touch-bar-btn:active,
.touch-bar-btn.is-active {
  color: var(--accent-gold);
}

/* --- BOTÃO CENTRAL PROGETTI ARREDONDADO (FAB) --- */
.touch-btn-progetti {
  position: relative;
  overflow: visible !important;
}

.progetti-fab-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-gold) 0%, #d97706 100%);
  color: #0b0f19;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.45);
  border: 2.5px solid #0f172a;
  margin-top: -16px;
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.touch-icon-fab-svg {
  stroke: #090e17;
}

.touch-btn-progetti:hover .progetti-fab-circle,
.touch-btn-progetti:active .progetti-fab-circle {
  transform: scale(1.1) translateY(-2px);
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.65);
}

.touch-label-fab {
  font-weight: 800 !important;
  color: var(--accent-gold) !important;
}

/* --- DRAWER / MENU HAMBÚRGUER MÓVEL --- */
.mobile-menu-sheet {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0.25s ease;
}

.mobile-menu-sheet.is-open {
  visibility: visible;
  pointer-events: auto;
}

.mobile-menu-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.mobile-menu-sheet.is-open .mobile-menu-backdrop {
  opacity: 1;
}

.mobile-menu-container {
  position: relative;
  background: #0d1522;
  border-top: 1.5px solid rgba(245, 158, 11, 0.35);
  border-radius: 20px 20px 0 0;
  padding: 10px 18px calc(20px + var(--safe-b, 0px)) 18px;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.75);
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  max-height: 85vh;
  overflow-y: auto;
  box-sizing: border-box;
}

.mobile-menu-sheet.is-open .mobile-menu-container {
  transform: translateY(0);
}

.mobile-menu-handle-bar {
  width: 42px;
  height: 4px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 4px;
  margin: 4px auto 14px auto;
}

.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 16px;
}

.mobile-menu-title-box {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mobile-menu-logo {
  height: 38px;
  width: 38px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.mobile-menu-title-box h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.5px;
  line-height: 1.1;
}

.mobile-menu-title-box p {
  margin: 2px 0 0 0;
  font-size: 11px;
  color: var(--accent-gold);
  font-weight: 600;
}

.mobile-menu-close {
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: #94a3b8;
  font-size: 24px;
  line-height: 1;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.mobile-menu-close:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

.mobile-menu-section {
  margin-bottom: 18px;
}

.mobile-menu-section-title {
  display: block;
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #64748b;
  margin-bottom: 8px;
}

.mobile-mode-switcher {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.mobile-mode-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #141f30;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #94a3b8;
  border-radius: 10px;
  padding: 12px 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

.mobile-mode-btn.is-active {
  background: linear-gradient(135deg, var(--accent-gold) 0%, #d97706 100%) !important;
  color: #0b0f19 !important;
  border-color: var(--accent-gold) !important;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4) !important;
  font-weight: 800 !important;
}

.mobile-mode-btn.is-active .view-icon-svg {
  stroke: #0b0f19 !important;
}

.mobile-menu-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mobile-action-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #141f30;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 12px 14px;
  color: #ffffff;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s;
  width: 100%;
}

.mobile-action-card:hover,
.mobile-action-card:active {
  background: #1a283e;
  border-color: rgba(245, 158, 11, 0.4);
}

.mobile-action-card-highlight {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.12) 0%, rgba(217, 119, 6, 0.06) 100%);
  border-color: rgba(245, 158, 11, 0.35);
}

.mobile-action-card-highlight:hover,
.mobile-action-card-highlight:active {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.22) 0%, rgba(217, 119, 6, 0.12) 100%);
  border-color: var(--accent-gold);
}

.mobile-action-card-highlight .mobile-action-text strong {
  color: var(--accent-gold);
}

.mobile-action-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.mobile-action-text {
  flex: 1;
  min-width: 0;
}

.mobile-action-text strong {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: #ffffff;
}

.mobile-action-text small {
  display: block;
  font-size: 11.5px;
  color: #94a3b8;
  margin-top: 2px;
}

.mobile-action-arrow {
  font-size: 20px;
  color: #64748b;
  font-weight: 700;
}

.mobile-menu-footer {
  padding-top: 6px;
}

.mobile-logout-btn {
  width: 100%;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #f87171;
  border-radius: 10px;
  padding: 12px;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.mobile-logout-btn:hover,
.mobile-logout-btn:active {
  background: rgba(239, 68, 68, 0.22);
  border-color: #ef4444;
  color: #ffffff;
}

/* --- ADAPTAÇÃO PARA TABLET / IPAD & MOBILE (RESPONSIVIDADE COMPLETA) --- */
@media (max-width: 1200px) {
  .panel.controls,
  .panel.results {
    position: fixed !important;
    top: calc(60px + var(--safe-t, 0px)) !important; /* altura de .app-topbar com safe area */
    bottom: calc(60px + var(--safe-b, 0px)) !important;
    z-index: 150;
    width: 480px !important;
    min-width: 0 !important;
    max-width: 90vw !important;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.9);
    transform: translateX(-100%);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: block !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    overscroll-behavior-y: contain !important;
  }

  .panel.controls.drawer-open {
    transform: translateX(0) !important;
  }

  .panel.results {
    right: 0;
    left: auto;
    border-left: 1px solid var(--border-color) !important;
    transform: translateX(100%);
  }

  .panel.results.drawer-open {
    transform: translateX(0) !important;
  }

  .stage {
    width: 100vw !important;
    /* 120 = 60 (topbar, era 54) + 60 (barra inferior). O 114 antigo já vinha
       2px curto com a topbar de 56px; com 60px seriam 6px. */
    height: calc(100vh - 120px) !important;
  }

  .topbar-center-actions {
    display: none;
  }

  #btnToggleSidebar {
    display: none;
  }
}

@media (max-width: 600px) {
  .panel.controls,
  .panel.results {
    width: 100vw !important;
    max-width: 100vw !important;
  }

  .topbar-title-box h2 {
    font-size: 13px;
  }

  .topbar-tenant-tag {
    display: none;
  }
}

/* Modais */
.app-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
  align-items: center;
  justify-content: center;
}

.app-modal.is-visible,
.app-modal.is-open {
  display: flex !important;
  visibility: visible !important;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(5px);
}

.modal-dialog {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  width: 92%;
  max-width: 620px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.7);
  z-index: 10;
  overflow: hidden;
}

.modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--accent-gold);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Logo no titulo do modal (o .modal-title ja' e' flex com gap de 8). */
.modal-title-logo {
  width: 26px;
  height: 26px;
  object-fit: contain;
  border-radius: 7px;
  padding: 2px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-color);
}

.modal-body {
  padding: 20px;
  overflow-y: auto;
}

/*
 * RODAPE CANONICO DE MODAL
 *
 * Estrutura (o padrao para todo modal; ver a secao "Rodape canonico" em
 * docs/padrao-alinhamento-ui-hud-botoes.md):
 *
 *   <div class="modal-footer">
 *     <p class="modal-footer-brand">LASTRASOFT • ...</p>   <!-- opcional -->
 *     <div class="modal-footer-actions"> ...botoes... </div>
 *   </div>
 *
 * POR QUE existem os dois filhos, e nao tudo solto como antes:
 *  1. o grupo `.modal-footer-actions` e' o que permite a regra de botao do
 *     mobile (parte 60) atingir SO' os botoes de acao. Com `.modal-footer
 *     button` ela tambem esticava o botao que ficava ao lado da assinatura de
 *     marca e espremia o texto dela;
 *  2. o `margin-left: auto` do grupo alinha as acoes a' direita com ou sem
 *     assinatura, entao o rodape sem marca fica identico ao de antes.
 *
 * Antes disto havia 10 receitas diferentes espalhadas pelo HTML (padding de
 * 12px 18px contra os 14px 20px daqui, gap de 8 contra 10, `space-between`...),
 * quase todas em `style=` inline — que, por vencer a folha de estilo, ignorava
 * o ajuste de padding do mobile e deixava os modais desalinhados entre si.
 */
.modal-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  background: var(--bg-surface);
}

/* Assinatura de produto: fica a' esquerda e empurra as acoes para a direita. */
.modal-footer-brand {
  margin: 0;
  font-size: 12px;
  line-height: 1.35;
  color: var(--text-secondary);
}

/* Grupo das acoes (ver o comentario acima). */
.modal-footer-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-left: auto;
}

/* Dois grupos no mesmo rodape: exportar a' esquerda, fechar/modificar a' direita. */
.modal-footer-actions.is-start {
  margin-left: 0;
  margin-right: auto;
}

/* Acao unica que ocupa a linha inteira (ex.: forcar troca de senha). */
.modal-footer-actions.is-block {
  flex: 1 1 100%;
}

/*
 * O <form> filho direto do .modal-dialog (Novo Utente Marmista, Modifica
 * Azienda/Utente, Reset Pw, Richiedi accesso...) NAO era coluna flex: o
 * .modal-body DENTRO dele ficava com a altura do conteudo, o `overflow-y: auto`
 * nao tinha o que rolar e o modal (overflow: hidden) CORTava o resto. Medido num
 * viewport de 700px: rodape em y = 1102, com o botao de enviar inalcancavel.
 *
 * Esta correcao existia apenas dentro de `@media (max-width: 1024px)` no
 * arquivo de mobile — ou seja, no DESKTOP todos esses modais ficavam sem
 * rolagem. Aqui ela vale em qualquer largura, e a duplicata do media query foi
 * removida (uma fonte de verdade so').
 */
.app-modal .modal-dialog > form {
  display: flex;
  flex-direction: column;
  flex: 1 1 0%;
  min-height: 0;
}

.app-modal .modal-dialog > form .modal-body {
  flex: 1 1 0%;
  min-height: 0;
  overscroll-behavior: contain;
}

.app-modal .modal-dialog > form .modal-footer {
  flex: 0 0 auto;
}

.btn-close-modal {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
}

.btn-close-modal:hover {
  color: var(--text-primary);
}

.template-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  margin-bottom: 10px;
  background: var(--bg-surface);
}

.template-info strong {
  display: block;
  font-size: 13px;
  color: var(--text-primary);
}

.template-info small {
  color: var(--text-secondary);
  font-size: 11px;
}

.btn-apply-template {
  background: var(--accent-gold);
  border: none;
  color: black;
  font-weight: 700;
  font-size: 11px;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
}

/* Modal Amplo de Tela Cheia para Distinta de Peças */
.modal-dialog.modal-dialog-wide {
  max-width: 1100px !important;
  width: 95vw !important;
  max-height: 90vh !important;
}

/* ===== Tabela Executiva de Produção (Product Design Nível Apple) ===== */
.fullscreen-parts-table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  font-size: 12.5px !important;
  font-feature-settings: "tnum" 1;
}

/* Cabeçalho Fixo e Minimalista */
.fullscreen-parts-table thead th,
.table-wrap .fullscreen-parts-table th {
  position: sticky !important;
  top: 0 !important;
  z-index: 3 !important;
  background: #0e1624 !important;
  color: #94a3b8 !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  font-size: 11px !important;
  padding: 12px 12px !important;
  text-align: center !important;
  vertical-align: middle !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-top: none !important;
  white-space: nowrap !important;
}

/* Células do Corpo */
.fullscreen-parts-table tbody td,
.table-wrap .fullscreen-parts-table td {
  padding: 11px 12px !important;
  text-align: center !important;
  vertical-align: middle !important;
  color: #e2e8f0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
  border-top: none !important;
  transition: background-color 0.15s ease !important;
  font-variant-numeric: tabular-nums;
}

/* Zebra Striping Ultra Suave */
.fullscreen-parts-table tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.015) !important;
}

/* Hover na Linha Inteira */
.fullscreen-parts-table tbody tr:hover td {
  background: rgba(56, 189, 248, 0.06) !important;
}

/* Remove Borda da Última Linha */
.fullscreen-parts-table tbody tr:last-child td {
  border-bottom: none !important;
}

/* Primeira Coluna (Nome da Peça) em Destaque */
.fullscreen-parts-table tbody td:first-child {
  font-weight: 600 !important;
  color: #ffffff !important;
  letter-spacing: -0.01em;
}

/* Botões UV-Card dentro de Células da Tabela */
.fullscreen-parts-table td .uiverse-row,
.fullscreen-parts-table td .step-actions-cell {
  display: inline-flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 6px !important;
  width: auto !important;
}

/* Botões UV-Card dentro de Células da Tabela (variante compacta do skin
   definido na parte 50: mesmo raio, altura menor). O min-height e' obrigatorio
   aqui porque a base da parte 50 pede 40px e vence por ordem de cascata. */
.fullscreen-parts-table td button.uv-card {
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 10px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  flex: none !important;
  display: inline-flex !important;
  min-width: 90px;
  border-radius: 10px !important;
}

.fullscreen-parts-table td button.uv-card svg {
  width: 15px !important;
  height: 15px !important;
}

/* Medidas na Distinta: Total de Corte (Teal) vs Pedata Livre (Slate) */
.fullscreen-parts-table .measure-total {
  font-weight: 700;
  color: #2dd4bf;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.fullscreen-parts-table .measure-free {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 500;
  color: #94a3b8;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ===== Legenda de medidas ===== */
.measure-legend {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  margin-top: 10px !important;
  padding: 8px 4px !important;
  font-size: 12px !important;
  color: #94a3b8 !important;
}
.measure-legend .lg-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.measure-legend .lg-dot {
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  display: inline-block !important;
  margin-right: 0 !important;
}
.measure-legend .lg-dot-total {
  background: #2dd4bf !important;
  box-shadow: 0 0 6px rgba(45, 212, 191, 0.6) !important;
}
.measure-legend .lg-dot-free {
  background: #94a3b8 !important;
}

/* ===== Lapis de renomear peca (nomi personalizzati della distinta) =====
   Fica ao lado do nome na 1a coluna. Na tabela ele aparece discreto e so' se
   acende na linha sob o ponteiro: a distinta passa de 30 linhas e 30 lapis
   piscando viram ruido. No mural de cartoes e no toque (@media hover: none) ele
   fica SEMPRE visivel — nao existe ponteiro para revelar. */
.btn-rename-part {
  margin-left: 6px;
  padding: 0;
  width: 22px;
  height: 22px;
  line-height: 1;
  font-size: 11px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  opacity: 0;
  vertical-align: middle;
  transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
tr:hover .btn-rename-part,
.btn-rename-part:focus-visible,
.piece-title-wrap .btn-rename-part {
  opacity: 1;
}
.btn-rename-part:hover {
  background: rgba(148, 163, 184, 0.18);
  color: #e2e8f0;
  border-color: rgba(148, 163, 184, 0.35);
}
.btn-rename-part:focus-visible {
  outline: 2px solid var(--accent-gold, #d4af37);
  outline-offset: 1px;
}
@media (hover: none) {
  .btn-rename-part {
    opacity: 1;
  }
}

/* PROJETO EM SOLO LETTURA: o lapis some da TELA INTEIRA. A classe vai no <body>
   porque as superficies com nome de peca moram em tres lugares diferentes
   (painel direito, mural de cartoes e os dois modais) e so' o painel ESQUERDO
   recebe `controls-locked-mode` — sem esta regra o lapis continuaria visivel e
   clicavel num projeto em producao. Quem publica a classe e'
   `projectManager.applyReadOnlyState` (mesmo `isLocked` do banner). */
body.is-readonly-project .btn-rename-part {
  display: none !important;
}

/* Modal de renomear: o campo ocupa a largura e as duas linhas de texto sao
   explicativas (nome automatico atual + onde o nome aparece). */
#renamePartInput {
  width: 100%;
  box-sizing: border-box;
}
.rename-part-hint {
  margin: 0 0 10px;
  font-size: 12px;
  color: #94a3b8;
}
.rename-part-hint strong {
  color: #e2e8f0;
}
.rename-part-note {
  margin: 12px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: #94a3b8;
}

/* ==========================================================================
   MODAL "PEDATA PER GRADINO" — campo e rodape no padrao do app (2026-09-28)

   Medido no desktop (1080 px) ANTES deste ajuste: o campo da tabela herdava o
   visual CLARO do `styles.css` legado (`background: rgb(251,250,246)` com texto
   `rgb(32,32,29)` dentro de um app escuro) e os botoes do rodape vinham com
   corpos diferentes — o secundario com `padding: 1px 6px` ("Ripristina tutto"
   quebrava em DUAS linhas) contra `10px 18px` do primario.

   Aqui o modal volta ao padrao da interface: campo escuro com anel de foco, e os
   botoes com o MESMO corpo (altura, padding, raio, tipografia) — a hierarquia
   fica so' pela cor, com o `Salva` como unico primario.
   ========================================================================== */
#modalStepGoing .table-wrap thead th {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted) !important;
}

#modalStepGoing .table-wrap tbody td {
  color: var(--text-secondary);
  vertical-align: middle;
}

#modalStepGoing .table-wrap tbody td:first-child {
  color: var(--text-primary);
  font-weight: 600;
}

#modalStepGoing .table-wrap input[type="number"] {
  background: var(--bg-surface-elevated) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  padding: 8px 10px !important;
  font-variant-numeric: tabular-nums;
}

#modalStepGoing .table-wrap input[type="number"]:focus {
  border-color: var(--accent-cyan) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.18) !important;
}

#modalStepGoing .modal-footer button {
  min-height: 38px;
  padding: 9px 16px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  white-space: nowrap;
}

/* A frase da peca (o desenho saiu): um respiro antes dela, sem margem dupla. */
#modalStepGoing #stepGoingPiece {
  margin-top: 12px;
}

#modalStepGoing #stepGoingPiece .rename-part-hint {
  margin: 0;
}


/* ==========================================================================
   NOVO SELETOR SEGMENTADO 2D / 3D (PREMIUM SEGMENTED CONTROL)
   ========================================================================== */
.mode-segmented-switch {
  display: inline-flex;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--topbar-border);
  border-radius: 12px;
  padding: 3px;
  gap: 2px;
}

.mode-segmented-switch .segmented-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  background: transparent;
  color: var(--text-muted);
  border: none;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition);
}

.mode-segmented-switch .segmented-btn:hover {
  color: var(--text-primary);
}

/* O !important que existia aqui (e o gradiente dourado) saiu: era ele que
   impedia o indigo de aparecer, vencendo por especificidade a regra do novo
   tema. Sem a regra concorrente ele não é mais necessário. */
.mode-segmented-switch .segmented-btn.is-active {
  color: #ffffff;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4);
}

.mode-segmented-switch .segmented-btn .btn-icon {
  font-size: 14px;
}

/* ==========================================================================
   MURAL DE PEÇAS DE PRODUÇÃO (FILTROS SEGMENTADOS ESTILO APPLE)
   ========================================================================== */
.parts-filter-bar {
  display: flex;
  gap: 4px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  padding: 3px;
  margin-bottom: 14px;
  overflow-x: auto;
  scrollbar-width: none;
}

.parts-filter-btn {
  flex: 1;
  text-align: center;
  background: transparent;
  border: none;
  color: #94a3b8;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.parts-filter-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.04);
}

.parts-filter-btn.is-active {
  background: #1e293b !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35) !important;
}

.prod-pieces-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 480px;
  overflow-y: auto;
  padding-right: 4px;
}

.prod-piece-card {
  background: #121c29;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.prod-piece-card:hover {
  border-color: rgba(56, 189, 248, 0.35);
  background: #152233;
}

.prod-piece-card.is-winder {
  border-left: 4px solid var(--accent-gold);
}

.prod-piece-card.is-straight {
  border-left: 4px solid var(--accent-cyan);
}

/* Pezzi speciali: le due placche incassate e la pedata di sbarco. */
.prod-piece-card.is-special {
  border-left: 4px solid #10b981;
}

.piece-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.piece-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.piece-title-wrap strong {
  font-size: 13px;
  color: #ffffff;
}

.piece-tag {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 7px;
  border-radius: 4px;
}

.piece-tag.tag-straight {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.3);
}

.piece-tag.tag-winder {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.piece-tag.tag-special {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.piece-card-body {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  background: #0d1520;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.piece-dims-big {
  font-size: 14px;
  font-weight: 800;
  color: #f8fafc;
}

.piece-dims-big .unit {
  font-size: 11px;
  color: #94a3b8;
  font-weight: normal;
}

.piece-area-badge {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-gold);
}

.piece-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.chip-lavorazione {
  font-size: 10.5px;
  padding: 2px 6px;
  border-radius: 4px;
  background: #1a2738;
  color: #cbd5e1;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.piece-actions-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 8px !important;
  padding: 12px !important;
  background: rgba(0, 0, 0, 0.25) !important;
  border-radius: 16px !important;
  border: 1px dashed rgba(255, 255, 255, 0.1) !important;
}

.uiverse-row {
  display: flex !important;
  flex-direction: row !important;
  gap: 10px !important;
  width: 100% !important;
  justify-content: center !important;
}

/* ==========================================================================
   BOTOES DE ACAO DA PECA (.uv-card) - "GHOST + ACCENT"
   --------------------------------------------------------------------------
   Substitui o skin antigo (uiverse.io: fundo branco, 5 sombras duras cinza,
   canto de 28px e scale(1.06) no hover), que destoava do tema escuro.
   A VERDADE agora:
     - FORMA: uma so' - `.uv-card` (nome historico, e' o gancho que o HTML ja'
       tem) com altura de 40px, raio de 12px, borda de 1px e SEM sombra dura.
     - COR: vem da FUNCAO do botao, nunca da posicao na grade -
       `.btn-dxf-*` = saida de arquivo (CIANO, nivel ghost);
       `.btn-lavorazioni-*` = acabamento (AMBAR, nivel tingido);
       `.btn-lavorazioni-skirting*` = rodape (ESMERALDA, nivel tingido).
     - As classes de POSICAO (`card1-tl` ... `card-right-pill`) ficaram SEM
       efeito visual: podem sair do HTML numa limpeza futura sem mexer aqui.
   ESCOPO: os botoes da MESMA familia que NAO sao `.uv-card` (distinta e tabela,
   gerados por render-parts.js/print-quote.js) seguem governados por
   `:not(.uv-card)` na parte 40 - por isso o `uv-card` aqui e' obrigatorio.
   ========================================================================== */

/* --- FORMA (um alvo unico para todo botao de acao da peca) --------------- */
.uv-card,
button.uv-card,
.piece-actions-row button.uv-card {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
  min-height: 40px !important;
  height: auto !important;
  box-sizing: border-box !important;
  padding: 6px 12px !important;
  border-radius: 12px !important;
  border: 1px solid transparent !important;
  outline: none !important;
  cursor: pointer !important;
  font: inherit !important;
  text-align: center !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
  /* Sem sombras duras: a profundidade vem da borda + do realce no hover. */
  box-shadow: none !important;
  /* Default de cor (uv-card sem funcao conhecida): ciano, nivel ghost. */
  --btn-accent: #38bdf8;
  --btn-accent-soft: rgba(56, 189, 248, 0.12);
  --btn-accent-strong: rgba(56, 189, 248, 0.45);
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  color: #cbd5e1 !important;
  transition: background-color 0.16s ease, border-color 0.16s ease,
              color 0.16s ease, box-shadow 0.16s ease,
              transform 0.16s ease !important;
}

.uv-card svg,
button.uv-card svg,
.piece-actions-row button.uv-card svg {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
  fill: var(--btn-accent) !important;
  transition: fill 0.16s ease !important;
}

.uv-card .btn-label,
button.uv-card .btn-label,
.piece-actions-row button.uv-card .btn-label {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1.15 !important;
  color: #e2e8f0 !important;
  transition: color 0.16s ease !important;
}

/* --- ESTADOS (hover / active / foco de teclado) -------------------------- */
.uv-card:hover,
button.uv-card:hover,
.piece-actions-row button.uv-card:hover {
  background: var(--btn-accent-soft) !important;
  border-color: var(--btn-accent-strong) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
}

.uv-card:hover svg,
button.uv-card:hover svg,
.piece-actions-row button.uv-card:hover svg {
  fill: #ffffff !important;
}

.uv-card:hover .btn-label,
button.uv-card:hover .btn-label,
.piece-actions-row button.uv-card:hover .btn-label {
  color: #ffffff !important;
}

.uv-card:active,
button.uv-card:active,
.piece-actions-row button.uv-card:active {
  transform: translateY(0) !important;
  box-shadow: none !important;
}

.uv-card:focus-visible,
button.uv-card:focus-visible,
.piece-actions-row button.uv-card:focus-visible {
  outline: 2px solid var(--btn-accent) !important;
  outline-offset: 2px !important;
}

/* --- FAMILIA 1: DXF (saida de arquivo) - CIANO, nivel ghost --------------- */
.uv-card.btn-dxf-step,
.uv-card.btn-dxf-riser,
.uv-card.btn-dxf-placa,
.piece-actions-row button.btn-dxf-step,
.piece-actions-row button.btn-dxf-riser,
.piece-actions-row button.btn-dxf-placa {
  --btn-accent: #38bdf8;
  --btn-accent-soft: rgba(56, 189, 248, 0.12);
  --btn-accent-strong: rgba(56, 189, 248, 0.45);
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
}

/* --- FAMILIA 2: LAVORAZIONI (acabamento) - AMBAR, nivel tingido ---------- */
.uv-card.btn-lavorazioni-step,
.uv-card.btn-lavorazioni-riser,
.uv-card.btn-lavorazioni-placa,
.piece-actions-row button.btn-lavorazioni-step,
.piece-actions-row button.btn-lavorazioni-riser,
.piece-actions-row button.btn-lavorazioni-placa {
  --btn-accent: #fbbf24;
  --btn-accent-soft: rgba(245, 158, 11, 0.22);
  --btn-accent-strong: rgba(245, 158, 11, 0.55);
  background: rgba(245, 158, 11, 0.10) !important;
  border-color: rgba(245, 158, 11, 0.30) !important;
}

/* --- FAMILIA 3: SKIRTING (rodape) - ESMERALDA, nivel tingido ------------- */
.uv-card.btn-lavorazioni-skirting,
.uv-card.btn-lavorazioni-skirting-horizontal,
.uv-card.btn-lavorazioni-skirting-vertical,
.piece-actions-row button.btn-lavorazioni-skirting,
.piece-actions-row button.btn-lavorazioni-skirting-horizontal,
.piece-actions-row button.btn-lavorazioni-skirting-vertical {
  --btn-accent: #34d399;
  --btn-accent-soft: rgba(16, 185, 129, 0.22);
  --btn-accent-strong: rgba(16, 185, 129, 0.55);
  background: rgba(16, 185, 129, 0.10) !important;
  border-color: rgba(16, 185, 129, 0.30) !important;
}

/* --- FAMILIAS DE POSICAO: REMOVIDAS -------------------------------------
   `card1-tl`, `card2-tr`, `card3-bl`, `card4-br`, `card-left-pill` e
   `card-right-pill` descreviam o CANTO da grade (28px de raio + uma cor propria
   por canto), entao a MESMA funcao mudava de cor conforme caia no canto 1 ou no
   3 (o DXF da pedata e o da placca nasciam com cores diferentes). Agora a cor e'
   da funcao (familias 1-3 acima) e o raio e' unico (12px). As seis classes
   continuam no HTML (render-parts.js/render-summary.js) SEM efeito visual -
   podem sair numa limpeza futura, sem tocar neste arquivo. ------------------ */

/* ==========================================================================
   DASHBOARD EXECUTIVO DE RELATÓRIOS EM ABAS (TELA CHEIA)
   ========================================================================== */
.modal-dialog.modal-dialog-fullscreen {
  width: 95vw !important;
  max-width: 1400px !important;
  height: auto !important;
  max-height: 90vh !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: 16px !important;
  background: #0b111e !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
  overflow: hidden !important;
  padding: 0 !important;
}

.modal-dialog-fullscreen .modal-header.exec-modal-header {
  padding: 14px 24px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
  background: #0f172a !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.exec-modal-header-title {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.exec-modal-icon-badge {
  width: 38px;
  height: 38px;
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.exec-modal-header-title .modal-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
}

.exec-modal-subtitle {
  font-size: 11.5px;
  color: #94a3b8;
  display: block;
  margin-top: 1px;
}

.exec-modal-header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Botões do Header Executivo (Padrão Apple Topbar) */
.btn-header-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 7px 14px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  white-space: nowrap !important;
  min-height: 36px !important;
}

.btn-header-teal {
  background: linear-gradient(135deg, #0f766e, #0d9488) !important;
  border: 1px solid #2dd4bf !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(13, 148, 136, 0.25) !important;
}

.btn-header-teal:hover {
  background: linear-gradient(135deg, #115e59, #0f766e) !important;
  border-color: #5eead4 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(13, 148, 136, 0.35) !important;
}

.btn-header-slate {
  background: #1e293b !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #f8fafc !important;
}

.btn-header-slate:hover {
  background: #283548 !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

.exec-modal-header .btn-close-modal {
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #cbd5e1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  margin-left: 4px;
}

.exec-modal-header .btn-close-modal:hover {
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
  color: #ef4444 !important;
}

/* Barra de Abas (Segmented Control Estilo Apple) */
.modal-executive-tabs {
  display: flex;
  gap: 6px;
  padding: 8px 24px;
  background: #090d16;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
  overflow-x: auto;
}

.exec-tab-btn {
  background: rgba(255, 255, 255, 0.03);
  color: #94a3b8;
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.exec-tab-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}

.exec-tab-btn.is-active {
  background: #1e293b !important;
  border-color: rgba(56, 189, 248, 0.5) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

.exec-tab-btn.is-active .exec-tab-icon {
  transform: scale(1.1);
}

.exec-tab-icon {
  font-size: 14px;
  transition: transform 0.2s;
}

.modal-executive-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px !important;
}

.exec-pane-top-bar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 16px !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.exec-pane-description {
  margin: 0 !important;
  font-size: 13px !important;
  color: #94a3b8 !important;
}

.exec-pane-actions {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.exec-tab-pane {
  display: none;
}

.exec-tab-pane.is-active {
  display: block;
  animation: fadeInExec 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeInExec {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}

.exec-grid-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.exec-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.exec-card-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 14px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -0.01em;
}

/* Regras de inputs file e botões de zoccolino */
.material-subgroup {
  background: #141f2d !important;
  border: 1px solid rgba(56, 189, 248, 0.3) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  margin-top: 10px !important;
  margin-bottom: 12px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.subgroup-title {
  color: var(--accent-gold) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  margin-bottom: 10px !important;
}

input[type="file"] {
  background: #0d1522 !important;
  border: 1px solid #334155 !important;
  border-radius: 6px !important;
  color: #cbd5e1 !important;
  padding: 6px 10px !important;
  font-size: 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

input[type="file"]::file-selector-button {
  background: #1e293b !important;
  color: #f1f5f9 !important;
  border: 1px solid rgba(56, 189, 248, 0.4) !important;
  border-radius: 4px !important;
  padding: 4px 10px !important;
  margin-right: 8px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
}

input[type="file"]::file-selector-button:hover {
  background: var(--accent-gold) !important;
  color: #000000 !important;
}

.btn-secondary,
#btnOpenSkirtingHorizontalEditor,
#btnOpenSkirtingVerticalEditor {
  background: #162436 !important;
  color: #ffffff !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}

.btn-secondary:hover,
#btnOpenSkirtingHorizontalEditor:hover,
#btnOpenSkirtingVerticalEditor:hover {
  background: #1e324a !important;
  border-color: var(--accent-gold) !important;
  color: #ffffff !important;
}

.fullscreen-parts-table tr:hover {
  background: rgba(255, 255, 255, 0.03);
}

.fullscreen-parts-table .fullscreen-riser-row {
  background: rgba(13, 148, 136, 0.06);
}

.fullscreen-parts-table .fullscreen-riser-row:hover {
  background: rgba(13, 148, 136, 0.12);
}

/* Blindagem de contraste para o Editor de Lavorazioni */
#edgeEditorTitle,
.edge-editor-modal #edgeEditorTitle {
  color: #f59e0b !important;
  font-weight: 700 !important;
  font-size: 1.15rem !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;
}

.btn-texture-toggle {
  background: rgba(30, 41, 59, 0.9);
  border: 1px solid rgba(245, 158, 11, 0.6);
  color: #fbbf24;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.btn-texture-toggle:hover {
  background: rgba(245, 158, 11, 0.2);
  border-color: #f59e0b;
}

.btn-texture-toggle.active {
  background: #f59e0b;
  color: #0f172a;
  font-weight: 700;
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.4);
}

/* =========================================================================
   CONTROLES CAD / DXF 2D E VISUALIZAÇÃO TÉCNICA NO EDITOR DE BORDAS
   ========================================================================= */
.edge-modal-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.edge-header-controls-row {
  display: contents;
}

.edge-view-segmented-tabs {
  display: inline-flex;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 3px;
  gap: 3px;
}

.edge-view-segmented-tabs .btn-segmented {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-weight: 600;
  font-size: 12.5px;
  padding: 5px 12px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s ease;
}

.edge-view-segmented-tabs .btn-segmented:hover {
  color: #f8fafc;
}

.edge-view-segmented-tabs .btn-segmented.active {
  background: #0284c7;
  color: #ffffff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.btn-download-dxf-single {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.45);
  color: #34d399;
  border-radius: 8px;
  padding: 6px 13px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.btn-download-dxf-single:hover {
  background: #10b981;
  color: #064e3b;
  border-color: #10b981;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
}

.cad-viewer-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, #131d2e 0%, #090e17 100%);
  z-index: 10;
}

.cad-floating-toolbar {
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: auto;
  max-width: calc(100% - 20px);
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 20;
  background: rgba(15, 23, 42, 0.92);
  backdrop-filter: blur(8px);
  padding: 5px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}


.btn-cad-tool {
  background: rgba(30, 41, 59, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #cbd5e1;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
}

.btn-cad-tool:hover {
  background: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
  border-color: #38bdf8;
}

.btn-cad-tool.active {
  background: rgba(16, 185, 129, 0.25);
  color: #34d399;
  border-color: #10b981;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.35);
}

.cad-toolbar-divider {
  width: 1px;
  background: rgba(255, 255, 255, 0.18);
  margin: 0 2px;
  align-self: stretch;
}

.cad-neighbor-gap-ctrl {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(30, 41, 59, 0.95);
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.cad-gap-label {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 600;
}

.input-cad-gap {
  width: 44px;
  background: #0f172a;
  border: 1px solid #334155;
  color: #f8fafc;
  border-radius: 4px;
  padding: 2px 4px;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

.input-cad-gap:focus {
  outline: none;
  border-color: #38bdf8;
}

.cad-gap-unit {
  font-size: 10px;
  color: #64748b;
  margin-right: 2px;
}

.btn-cad-gap-quick {
  background: rgba(51, 65, 85, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
  border-radius: 4px;
  padding: 2px 5px;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.12s ease;
}

.btn-cad-gap-quick:hover {
  background: rgba(56, 189, 248, 0.25);
  color: #38bdf8;
  border-color: #38bdf8;
}

.edge-mobile-cad-hint {
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: #bae6fd;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  margin-bottom: 10px;
  line-height: 1.4;
}

@media print {
  html, body {
    height: auto !important;
    min-height: 100% !important;
    width: 100% !important;
    overflow: visible !important;
    background: #ffffff !important;
  }

  body.is-printing-quote > *:not(#printQuoteDocument) {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  body.is-printing-prod-order > *:not(#printProductionOrderDocument) {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  body.is-printing-cutting-list > *:not(#cuttingListPrintMount) {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  body.is-printing-group-quote > *:not(#groupQuotePrintMount) {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  body:not(.is-printing-quote):not(.is-printing-prod-order):not(.is-printing-cutting-list):not(.is-printing-group-quote) > *:not(#printQuoteDocument) {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  .app-modal,
  .modal-overlay,
  .modal-backdrop,
  .shell {
    display: none !important;
    visibility: hidden !important;
  }

  #printQuoteDocument,
  .print-quote-document {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.is-printing-quote #printQuoteDocument {
    display: block !important;
    visibility: visible !important;
  }

  body.is-printing-prod-order #printQuoteDocument {
    display: none !important;
    visibility: hidden !important;
  }

  #printProductionOrderDocument,
  .print-production-document {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.is-printing-prod-order #printProductionOrderDocument {
    display: block !important;
    visibility: visible !important;
  }

  body:not(.is-printing-prod-order) #printProductionOrderDocument {
    display: none !important;
    visibility: hidden !important;
  }

  body.is-printing-cutting-list #cuttingListPrintMount {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
  }

  body:not(.is-printing-cutting-list) #cuttingListPrintMount {
    display: none !important;
    visibility: hidden !important;
  }

  body.is-printing-group-quote #groupQuotePrintMount {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
  }

  body:not(.is-printing-group-quote) #groupQuotePrintMount {
    display: none !important;
    visibility: hidden !important;
  }

  body.is-printing-prod-order .prod-order-page {
    width: 190mm !important;
    max-width: 190mm !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  body.is-printing-prod-order .prod-order-table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
  }

  body.is-printing-prod-order .prod-winder-card,
  body.is-printing-prod-order .prod-scheda-block,
  body.is-printing-prod-order .prod-order-table tr {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  body.is-printing-prod-order img,
  body.is-printing-prod-order svg {
    max-width: 100% !important;
  }

  .quote-production-sheet {
    page-break-before: always !important;
    break-before: page !important;
    clear: both !important;
  }
}

/* ==========================================================================
   MOBILE SHELL DEDICADO  (BLOCO RESPONSIVO - desktop >=1200px NÃO muda)
   Adicionado ao FIM do arquivo para vencer regras anteriores. O bloco
   @media print acima permanece intocado: nada aqui afeta a impressão.
   ========================================================================== */

/* Header do modal executivo — base equivalente aos dois divs inline antigos
   (layout desktop preservado). No mobile é empilhado em media query abaixo. */
.exec-modal-header-title,
.exec-modal-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.exec-modal-header-title {
  flex-wrap: wrap;
}

/* Seletor 2D/3D compacto do topo: oculto no desktop (lá existe o seletor
   central em .topbar-center-actions); aparece no mobile ≤1200px ao lado do
   botão Report ↗️. */
.top-mode-switch {
  display: none;
}

/* ============ 1. SHELL EM COLUNA + BARRA INFERIOR DENTRO DO FLUXO (TABLETS & SMARTPHONES <= 1024px) ============ */
@media (max-width: 1024px) {
  /* A view do workspace vira uma coluna flex que preenche exatamente a janela
     (dvh = altura dinâmica real no mobile; evita o bug da barra do navegador).
     display é controlado inline pelo uiManager (none/flex) — não forçar aqui. */
  #viewWorkspace {
    flex-direction: column !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /* O <main> ocupa o espaço entre topbar e bottom bar (flex), nunca atrás da barra. */
  .shell {
    height: auto !important;
    max-height: none !important;
    flex: 1 1 0% !important;
    min-height: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  /* Bottom bar FIXA no rodapé da janela (mesmo mecanismo original, que sempre
     apareceu em todos os navegadores/dispositivos). Para não sobrepor nada, o
     espaço que ela ocupa é reservado no .workspace (padding-bottom) e nos
     drawers (bottom). */
  .bottom-touch-bar {
    position: fixed !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: auto !important;
    min-height: calc(60px + var(--safe-b, 0px)) !important;
    display: flex !important;
    width: auto !important;
    padding: 4px calc(6px + var(--safe-r, 0px)) calc(var(--safe-b, 0px) + 4px) calc(6px + var(--safe-l, 0px)) !important;
    box-sizing: border-box !important;
    z-index: 200;
  }
  .touch-bar-btn {
    height: auto;
    min-height: 50px;
  }

  /* O painel de resultados abre pelo botão "Report" da bottom bar: o botão
     "Nascondi Report" da topbar sai do caminho em qualquer largura ≤1200px. */
  .topbar-right #btnToggleResults {
    display: none !important;
  }

  /* O workspace mede-se por flex: o stage (canvas) preenche a área livre e
     termina acima da bottom bar (padding reservado). */
  .workspace {
    height: 100% !important;
    max-height: 100% !important;
    padding-bottom: calc(60px + var(--safe-b, 0px)) !important;
    box-sizing: border-box !important;
  }
  .stage {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    flex: 1 1 0% !important;
    min-height: 0 !important;
  }

  /* Drawers: ancorados ao header real e terminando exatamente no topo da
     bottom bar (não sobrepõem nem a topbar nem a barra inferior).
     height:auto é obrigatório aqui: .panel.results tem height:100%!important
     na base e, sem anular, o painel cresce 100vh a partir de top:60px e o fim
     do conteúdo some atrás da bottom bar. */
  .panel.controls,
  .panel.results {
    /* 52px + safe-area-inset-top para casar perfeitamente com a topbar fluida no iOS/Android */
    top: calc(52px + var(--safe-t, 0px)) !important;
    bottom: calc(60px + var(--safe-b, 0px)) !important;
    height: auto !important;
    max-height: none !important;
    display: block !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    overscroll-behavior-y: contain !important;
  }

  /* O respiro de fundo e' o espaco de ROLAGEM final, nao a reserva da barra:
     a barra de toque (60px + safe-b) ja' fica fora do painel pelo `bottom`
     acima. Medido em 2026-09-23 (390x844): com os 180px que valiam para os
     dois paineis, o ultimo campo da etapa 1 terminava 199,1 px antes do fim
     da area visivel. O painel de RESULTADOS mantem os 180px (o ultimo cartao
     tem os botoes de peca e pede o respiro proprio). */
  .panel.controls {
    padding-bottom: calc(24px + var(--safe-b, 0px)) !important;
  }

  .panel.results {
    padding-bottom: calc(180px + var(--safe-b, 0px)) !important;
  }
}

/* ============ 2. SELETOR SEGMENTADO 2D / 3D AUTOEXPLICATIVO (TABLET & MOBILE) ============ */
@media (max-width: 1200px) {
  .topbar-center-actions {
    display: none !important;
  }
  .top-mode-switch {
    display: inline-flex !important;
    align-items: center;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 22px !important;
    padding: 2px 3px !important;
    gap: 3px !important;
    box-shadow: none !important;
    flex-shrink: 0 !important;
  }
  .top-mode-switch .segmented-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 5px 12px !important;
    min-height: 32px !important;
    border-radius: 18px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    background: transparent !important;
    color: #94a3b8 !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    white-space: nowrap !important;
  }
  .top-mode-switch .segmented-btn .btn-icon {
    font-size: 13px !important;
    line-height: 1;
  }
  .top-mode-switch .segmented-btn .mode-label {
    display: inline-block !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    line-height: 1;
    letter-spacing: 0.4px;
  }
  .top-mode-switch .segmented-btn:hover {
    color: #ffffff !important;
  }
  .top-mode-switch .segmented-btn.is-active {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(99, 102, 241, 0.45) !important;
    transform: scale(1.02);
  }
}

/* ============ 3. TOPBAR FLUIDA E ELEGANTE NO TABLET & CELULAR (≤ 1024px) ============ */
@media (max-width: 1024px) {
  .app-topbar {
    padding-top: calc(6px + var(--safe-t, 0px)) !important;
    padding-bottom: 6px !important;
    padding-left: calc(10px + var(--safe-l, 0px)) !important;
    padding-right: calc(10px + var(--safe-r, 0px)) !important;
    height: calc(52px + var(--safe-t, 0px)) !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    box-sizing: border-box !important;
  }
  .topbar-left {
    gap: 8px !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
  }
  .topbar-brand {
    gap: 0 !important;
    flex-shrink: 0 !important;
  }
  /* 34px acompanha o logo reduzido do modelo novo (era 42px, de quando o
     desktop tinha 46px) — sem isso o logo CRESCIA ao entrar no mobile. */
  .topbar-logo {
    height: 34px !important;
    width: 34px !important;
    border-radius: 8px !important;
  }
  .app-topbar #btnBackToDashboard,
  .app-topbar .btn-logout-action {
    display: none !important;
  }
  .topbar-left #btnToggleSidebar {
    display: none !important;
  }
  .topbar-right {
    gap: 6px !important;
    flex: 1 1 auto !important;
    justify-content: flex-end !important;
    min-width: 0 !important;
  }
  .topbar-right #btnToggleResults,
  .user-profile-badge {
    display: none !important;
  }
  /* Par esconder/mostrar da identidade: a .user-profile-badge sai (acima) e o
     chip compacto entra no lugar dela, truncando o nome em vez de estourar a
     topbar (que aqui tem altura fixa de 52px e flex-wrap: nowrap). */
  .topbar-user-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
    max-width: min(26vw, 132px) !important;
    padding: 4px 10px 4px 4px !important;
    border-radius: 999px !important;
    background: rgba(99, 102, 241, 0.16) !important;
    border: 1px solid rgba(129, 140, 248, 0.35) !important;
  }
  .topbar-user-chip .topbar-user-initials {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    flex-shrink: 0 !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #8b5cf6, #6366f1) !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0.2px !important;
  }
  .topbar-user-chip .topbar-user-name {
    min-width: 0 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #e2e8f0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .topbar-right #btnOpenExecutiveReport {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .top-mode-switch .segmented-btn {
    padding: 5px 9px !important;
    min-height: 32px !important;
    font-size: 11.5px !important;
    gap: 4px !important;
  }
  .top-mode-switch .segmented-btn .mode-label {
    font-size: 11.5px !important;
  }
  .topbar-right .topbar-btn {
    padding: 6px 9px !important;
    font-size: 11px !important;
    gap: 4px !important;
  }
  .topbar-right #btnOpenExecutiveReport .btn-label-text,
  .btn-icon-topbar .btn-label-text {
    display: none !important;
  }
  .btn-icon-topbar {
    padding: 6px 8px !important;
    font-size: 11px !important;
  }
  @media (max-width: 420px) {
    .topbar-title-box {
      display: none;
    }
    /* Em telas estreitas o balao de iniciais custa a largura que o NOME precisa. */
    .topbar-user-chip .topbar-user-initials {
      display: none !important;
    }
    .topbar-user-chip {
      padding: 4px 10px !important;
      max-width: min(34vw, 118px) !important;
    }
  }

  /* Toolbar de desenho: uma linha rolável, flutuando sobre o canvas sem quebrar
     N linhas por cima do desenho. Com .is-multiline-expanded volta a quebrar. */
  .viewport-toolbar {
    left: 10px !important;
    right: 10px !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    bottom: 10px !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-radius: 10px !important;
  }
  .viewport-toolbar::-webkit-scrollbar {
    display: none;
  }
  .viewport-toolbar.is-multiline-expanded {
    flex-wrap: wrap !important;
    overflow-x: hidden !important;
  }
  .viewport-toolbar .toolbar-group,
  .viewport-toolbar .toolbar-divider,
  .viewport-toolbar button {
    flex-shrink: 0 !important;
  }
  .viewport-toolbar button {
    white-space: nowrap;
  }
  .viewport-toolbar .btn-toolbar-toggle-expand {
    display: inline-flex !important;
  }
  /* No plano 2D os exports DXF/CNC/ZIP já existem no painel de resultados:
     escondê-los aqui reduz a barra a uma faixa limpa e rolável. */
  .plan-toolbar #btnExportDxfPlan,
  .plan-toolbar #btnExportDxfWinders,
  .plan-toolbar #btnExportProductionZip,
  .plan-toolbar #btnPlanFullscreen,
  .three-toolbar #btn3DFullscreen {
    display: none !important;
  }

  /* ------- Modais viram folha cheia ------- */
  .app-modal {
    align-items: stretch;
    justify-content: flex-start;
  }
  .app-modal .modal-dialog {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }
  .modal-dialog.modal-dialog-wide,
  .modal-dialog.modal-dialog-fullscreen {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }
  .modal-header {
    padding: 12px 14px;
    gap: 10px;
    flex-wrap: wrap;
  }
  .modal-body {
    padding: 14px !important;
  }
  .modal-footer {
    padding: 12px 14px;
    gap: 8px;
    flex-wrap: wrap;
  }
  .modal-executive-body {
    padding: 14px !important;
  }
  .modal-executive-tabs {
    padding: 8px 12px;
    gap: 6px;
    scroll-snap-type: x mandatory;
  }
  .exec-tab-btn {
    scroll-snap-align: start;
    padding: 8px 12px;
    font-size: 12px;
    min-height: 40px;
  }

  /* Header executivo empilhado: título+badge numa linha, ações noutra. */
  .exec-modal-header {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }
  .exec-modal-header-title,
  .exec-modal-header-actions {
    justify-content: space-between;
  }
  .exec-modal-header-actions {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 10px;
  }

  /* Grade dupla do executivo vira coluna. */
  .exec-grid-two {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Linha de contexto da aba Distinta (descrição + botão ZIP) empilha. */
  #execPaneParts > div[style*="space-between"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  /* ============ TABELAS LARGAS -> CARDS POR PEÇA ============ */
  /* Admin continua tabela (rola horizontal). Peças/lista viram cards. */
  .has-card-labels:not(.admin-table) thead {
    display: none !important;
  }
  .has-card-labels:not(.admin-table) {
    display: block !important;
    width: 100% !important;
  }
  .has-card-labels:not(.admin-table) tbody {
    display: block !important;
    width: 100% !important;
  }
  .has-card-labels:not(.admin-table) tbody tr {
    display: block !important;
    width: 100% !important;
    background: #121c29 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    padding: 0 !important;
    margin: 0 0 12px 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  .has-card-labels:not(.admin-table) tbody td {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 8px 12px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    font-size: 12.5px !important;
    text-align: right;
    flex-wrap: wrap;
  }
  .has-card-labels:not(.admin-table) tbody td::before {
    content: attr(data-th);
    flex-shrink: 0;
    color: #94a3b8;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding-right: 10px;
    text-align: left;
  }
  .has-card-labels:not(.admin-table) tbody tr > td:last-child {
    border-bottom: none !important;
  }
  /* Primeira coluna = título do card. */
  .has-card-labels:not(.admin-table) td.cell-main {
    display: flex !important;
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.12) 0%, rgba(212, 175, 55, 0.02) 100%) !important;
    padding: 11px 12px !important;
    border-bottom: 1px solid rgba(212, 175, 55, 0.25) !important;
    align-items: center;
  }
  .has-card-labels:not(.admin-table) td.cell-main strong {
    font-size: 14px;
    color: #fff;
  }
  .has-card-labels:not(.admin-table) td.cell-main::before {
    display: none !important;
  }
  /* Células sem conteúdo real saem do card. */
  .has-card-labels:not(.admin-table) td.cell-empty {
    display: none !important;
  }
  /* Células de ação viram rodapé com rótulo e botões confortáveis. */
  .has-card-labels:not(.admin-table) td.cell-actions {
    display: flex !important;
    flex-direction: column;
    align-items: stretch !important;
    justify-content: flex-start;
    text-align: left;
    background: rgba(0, 0, 0, 0.25) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding: 10px 12px !important;
    gap: 6px;
  }
  .has-card-labels:not(.admin-table) td.cell-actions::before {
    margin-bottom: 6px;
  }
  .has-card-labels:not(.admin-table) td.cell-actions > * {
    text-align: left;
  }
  .has-card-labels:not(.admin-table) td.cell-actions .uiverse-row {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .has-card-labels:not(.admin-table) td.cell-actions button.uv-card {
    flex: 1 1 auto !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 12px !important;
    margin: 2px 0 !important;
    box-sizing: border-box !important;
  }
  .has-card-labels:not(.admin-table) td.cell-actions .uiverse-row button.uv-card {
    margin: 0 !important;
  }
  .has-card-labels:not(.admin-table) td.cell-actions button:not(.uv-card) {
    flex: 1 1 auto;
    width: 100%;
    min-height: 42px;
    justify-content: center;
    margin: 3px 0;
  }
  .has-card-labels:not(.admin-table) td.cell-actions small {
    text-align: left;
  }

  /* Dentro dos modais em folha cheia, o wrapper da tabela não precisa mais de
     rolagem própria (o .modal-body rola) nem de caixa dupla ao redor dos cards. */
  .modal-dialog .table-wrap:has(.has-card-labels) {
    max-height: none !important;
    overflow: visible !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  #partsTableWrap {
    overflow: visible !important;
  }

  /* Rodapés de modais: botões grandes e lado a lado com flex igual. */
  .modal-footer {
    flex-direction: row;
    align-items: center;
  }
  /* O alvo são os BOTÕES DE AÇÃO (dentro do grupo), não qualquer botão do
     rodapé: a regra antiga (`.modal-footer button`) esticava também o botão que
     fica ao lado da assinatura de marca e espremia o texto dela. Rodapés
     legados que ainda não têm o grupo (system-alert-footer, edge-modal-actions)
     mantêm o comportamento antigo de propósito. */
  .modal-footer-actions > button,
  .modal-footer:not(:has(.modal-footer-actions)) > button {
    flex: 1 1 0;
    min-width: 0;
    min-height: 46px;
    white-space: normal;
  }
  /* Com assinatura: a marca ocupa a linha dela e as ações vêm abaixo, esticadas. */
  .modal-footer-brand,
  .modal-footer:has(.modal-footer-brand) .modal-footer-actions {
    flex: 1 1 100%;
  }

  /* --- Listino/settings: campos empilham --- */
  .settings-fields-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Resumos em 1 coluna quando o espaço é pouco. */
  .summary-cards-grid {
    grid-template-columns: 1fr !important;
  }
  #execQuoteSummaryCards {
    grid-template-columns: 1fr !important;
  }
  .prod-pieces-container {
    max-height: none;
  }

  /* --- Editor de Costas / Lavorazioni 3D & CAD: Otimização Mobile First --- */
  #edgeEditorModal {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    padding: 0 !important;
    margin: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    overflow: hidden !important;
    z-index: 1050 !important;
  }
  #edgeEditorModal[style*="display: none"] {
    display: none !important;
  }
  .edge-editor-modal {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border: none !important;
    margin: 0 !important;
  }
  .edge-editor-modal .modal-header {
    position: relative !important;
    flex: 0 0 auto !important;
    padding: 10px 12px 8px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    background: #1e293b !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  }
  .edge-modal-header-left {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .edge-editor-modal #edgeEditorTitle {
    font-size: 0.92rem !important;
    font-weight: 800 !important;
    color: #f59e0b !important;
    margin: 0 !important;
    width: 100% !important;
    padding-right: 44px !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.25 !important;
  }
  .edge-header-controls-row {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    padding-right: 44px !important;
    box-sizing: border-box !important;
  }
  .edge-view-segmented-tabs {
    flex: 0 0 auto !important;
  }
  .edge-view-segmented-tabs .btn-segmented {
    min-height: 34px !important;
    padding: 4px 9px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
  }
  .btn-texture-toggle {
    min-height: 34px !important;
    padding: 4px 9px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
  }
  .btn-download-dxf-single {
    align-self: flex-start !important;
    min-height: 28px !important;
    padding: 3px 10px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    margin: 0 !important;
  }
  #btnEdgeEditorClose {
    position: absolute !important;
    top: 32px !important;
    right: 10px !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 8px !important;
    color: #f1f5f9 !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    z-index: 20 !important;
    transition: background 0.15s ease, color 0.15s ease;
  }
  #btnEdgeEditorClose:hover,
  #btnEdgeEditorClose:active {
    background: rgba(239, 68, 68, 0.25) !important;
    color: #ef4444 !important;
    border-color: #ef4444 !important;
  }
  #btnEdgeEditorClose .btn-close-text {
    display: none !important;
  }
  .edge-editor-layout {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 6px 8px !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    background: #0b1120 !important;
  }
  .edge-canvas-container {
    flex: 0 0 auto !important;
    height: 38dvh !important;
    min-height: 190px !important;
    max-height: 42dvh !important;
    position: relative !important;
    border-radius: 8px !important;
    overflow: hidden !important;
  }
  .edge-sidebar-panel {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 8px 10px !important;
    border-radius: 8px !important;
    overflow: visible !important;
    gap: 8px !important;
  }
  .edge-sidebar-panel h4 {
    font-size: 0.9rem !important;
    padding-bottom: 4px !important;
  }
  .legend-instruction {
    font-size: 0.75rem !important;
    padding: 4px 8px !important;
    line-height: 1.35 !important;
  }
  .legend-grid {
    gap: 6px !important;
  }
  .legend-btn, .btn-legend {
    min-height: 34px !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
    gap: 8px !important;
  }
  .edge-modal-actions {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 8px)) 10px !important;
    background: #0f172a !important;
    border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.5) !important;
    z-index: 30 !important;
    box-sizing: border-box !important;
  }
  .edge-modal-actions button {
    width: 100% !important;
    min-height: 36px !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* --- Login: permite rolar quando o teclado abre --- */
  #viewAuth,
  #viewSessionError {
    align-items: flex-start !important;
    justify-content: center;
    overflow-y: auto !important;
    padding: calc(env(safe-area-inset-top, 0px) + 24px) 16px
      calc(env(safe-area-inset-bottom, 0px) + 24px) !important;
    box-sizing: border-box !important;
  }
  .auth-card {
    padding: 26px 20px;
  }

  /* --- Superadmin --- */
  .admin-header {
    padding: 10px 12px;
    gap: 8px;
    flex-wrap: wrap;
  }
  .admin-header-title {
    gap: 8px;
    flex-wrap: wrap;
  }
  .admin-header-title h2 {
    font-size: 13px !important;
  }
  .admin-container {
    margin: 16px auto;
    padding: 0 12px 28px;
  }
  .admin-stats-row {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 18px;
  }
  .admin-section {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .admin-table {
    min-width: 620px;
  }
  .admin-section-header {
    padding: 12px 14px;
  }
  .admin-table th,
  .admin-table td {
    padding: 12px 14px;
    white-space: nowrap;
  }
}

/* ----------------------------------------------------------------------------
 * TABLET LARGO: RODAPE DE UMA LINHA SO'
 *
 * A regra de cima (marca em 100% + acoes em 100%) existe para o CELULAR, onde o
 * botao de largura total e' o alvo certo. Num tablet de 601 px para cima a mesma
 * pilha vira faixa vazia: medido no `#modalTemplates` a 820x1180, o rodape
 * empilhado tem 94,9 px contra 64,7 px do rodape de uma linha (desktop).
 *
 * Aqui a assinatura e' a unica parte que cede espaco (`flex: 1 1 auto`) e o
 * botao volta ao tamanho do conteudo — com o alvo de toque de 46 px preservado.
 * Escopo: so' o modal de modelos/favoritos; os outros rodapes com assinatura
 * seguem a regra geral.
 * -------------------------------------------------------------------------- */
@media (min-width: 601px) and (max-width: 1024px) {
  #modalTemplates .modal-footer {
    flex-wrap: nowrap;
  }
  #modalTemplates .modal-footer-brand {
    flex: 1 1 auto;
  }
  #modalTemplates .modal-footer:has(.modal-footer-brand) .modal-footer-actions {
    flex: 0 0 auto;
  }
  #modalTemplates .modal-footer-actions > button {
    flex: 0 0 auto;
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* Ajustes finos bem estreitos */
@media (max-width: 480px) {
  .bottom-touch-bar {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
  /* "Report Dettagliato" vira apenas o glifo ↗️ para caber na topbar do celular. */
  .topbar-right #btnOpenExecutiveReport {
    font-size: 0 !important;
    gap: 0;
  }
  .topbar-right #btnOpenExecutiveReport > span {
    font-size: 15px;
    line-height: 1;
  }
  .auth-demo-shortcuts .demo-btn-row {
    flex-direction: column;
    gap: 8px;
  }
  .demo-btn-row .btn-demo-outline {
    width: 100%;
    min-height: 44px;
  }
}

/* ==========================================================================
   GESTOS NO DESENHO 2D/3D + TOPBAR NO CELULAR REAL
   Tocar no desenho deve MEXER NO DESENHO (mover/zoom), NUNCA dar zoom/scroll
   na página inteira. touch-action:none concentra o gesto no canvas; o meta
   viewport (user-scalable=no) bloqueia o pinch de página; o 2D recebeu pan +
   pinch-to-zoom em app.js; o 3D já usa OrbitControls (que também lê o
   touch-action). Bloco ao FINAL do arquivo: não afeta desktop nem @media print.
   ========================================================================== */
#stairCanvas,
#threeContainer,
#threeContainer canvas,
#edgeCanvas,
.viewport-area {
  touch-action: none !important;
  -ms-touch-action: none !important;
}
html,
body {
  overscroll-behavior: none !important;
}

@media (max-width: 1024px) {
  /* Topbar sem espremer: o seletor 2D/3D do topo nunca pode ser cortado. */
  .app-topbar {
    flex-wrap: nowrap !important;
    gap: 6px;
    padding-top: calc(6px + var(--safe-t, 0px)) !important;
    padding-bottom: 6px !important;
    padding-left: calc(8px + var(--safe-l, 0px)) !important;
    padding-right: calc(8px + var(--safe-r, 0px)) !important;
    height: calc(52px + var(--safe-t, 0px)) !important;
    box-sizing: border-box !important;
  }
  .topbar-left {
    flex: 0 0 auto;
    min-width: 0;
  }
  .topbar-right {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-end;
    flex-wrap: nowrap !important;
  }
  .top-mode-switch {
    flex: 0 0 auto !important;
  }
  .topbar-right .topbar-btn,
  .btn-icon-topbar,
  .topbar-right #btnOpenExecutiveReport {
    flex: 0 0 auto;
  }
}

@media (max-width: 520px) {
  /* Celular estreito: preserva logo nítida e botões ergonômicos */
  .topbar-title-box {
    display: none !important;
  }
  .topbar-logo {
    height: 38px !important;
    width: 38px !important;
    border-radius: 8px !important;
  }
}

/* ============================================================
   Safe-area da barra nativa do Android + modais com <form> direto
   no .modal-dialog.

   Contexto: a PWA instalada roda edge-to-edge — o app ocupa o fundo
   físico, que fica SOB a barra de navegação nativa do Android.
   Elementos ancorados embaixo (rodapés de modal, bottom bar, drawers)
   precisam reservar env(safe-area-inset-bottom).
   --safe-b  = env(safe-area-inset-bottom) por padrão; se o aparelho
   instalado não reportar o inset, o app.js aplica um mínimo de 20px.
   ============================================================ */
:root {
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

@media (max-width: 1024px) {
  /* O <form> filho direto do .modal-dialog (Listino/Parametri Marmista, Novo
     Utente, Richiedi accesso...) virou coluna flex na BASE do modal, em
     src/styles-modern-parts/40-painel-direito-report.css: o defeito NAO era so'
     de tela pequena — no desktop o .modal-body nao rolava e o rodape ficava
     fora da tela. Aqui fica apenas o que e' mesmo de tela pequena. */

  /* Rodape dos modais folha cheia: reserva o espaco da barra nativa para
     os botoes (Salva no Cloud, Chiudi, PDF…) nunca ficarem sob ela. */
  .app-modal .modal-footer {
    padding-bottom: calc(12px + var(--safe-b, 0px)) !important;
  }

  /* O editor de Costas usa .modal-overlay (estrutura legada), não
     .app-modal: garante que o overlay e o modal cubram o viewport
     dinâmico inteiro e que o rodapé reserve o inset. */
  .modal-overlay {
    height: 100dvh !important;
    align-items: stretch !important;
  }
}


/* ==========================================================================
   MODAL "PEDATA PER GRADINO" — alvos de toque no compacto

   O modal reusa os chips de filtro do painel (`parts-filter-btn`, 27 px de
   altura) e a tabela padrao do app (`input` de 38 px herdados do styles.css).
   Medido em 375 px: 27 px de chip e 38 px de campo ficam abaixo do minimo de
   toque — aqui os dois sobem para 44 px SO' dentro deste modal, sem mexer no
   tamanho dos chips do painel nem nos campos do resto do app.
   ========================================================================== */
@media (max-width: 1024px) {
  #modalStepGoing .parts-filter-btn {
    min-height: 44px;
  }

  #modalStepGoing #stepGoingRows input {
    min-height: 44px;
    font-size: 16px;
  }

  /* O corpo rola: com os alvos de 44 px a lista de 6-8 gradini passa da folha
     cheia do celular — a ultima linha tem de ser alcancavel. */
  #modalStepGoing .modal-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* A porta de entrada no painel e' um chip de 21 px (`btn-subcard-action`,
     medido em 375 px): nesta funcao ele e' o comando principal, entao ganha
     alvo de toque. */
  #btnStepGoing {
    min-height: 44px;
  }
}

/* ==========================================================================
   COTA INTERATIVA (2026-10-11) — clicar/tocar a cota do 2D abre um cartao
   curto com o campo que manda naquele numero.
   Desktop: cartao flutuante no canto inferior direito (nao tapa o desenho).
   Telefone/tablet: sheet ancorado no pe' com alvos de 44 px (mobile first).
   ========================================================================== */
.cota-card {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 12000;
  width: min(320px, calc(100vw - 24px));
  background: #0d1522;
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(2, 6, 23, 0.65);
  padding: 12px 14px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.cota-card.is-open {
  opacity: 1;
  transform: translateY(0);
}
/* No desktop o cartao nasce no ponto do toque (ver `ancorarNoToque`). As
   coordenadas entram por custom property para a media query do rodape continuar
   ganhando no telefone/tablet. */
.cota-card.is-ancorado {
  right: auto;
  bottom: auto;
  left: var(--cota-x, 18px);
  top: var(--cota-y, 18px);
}
.cota-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.cota-card-label {
  font-size: 13px;
  font-weight: 700;
  color: #e2e8f0;
  line-height: 1.3;
}
.cota-card-close {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: transparent;
  color: #cbd5e1;
  cursor: pointer;
  font-size: 14px;
}
.cota-card-body {
  margin-top: 10px;
}
.cota-card-campo {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 10px;
  padding: 4px 10px;
}
.cota-card-campo input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  color: #f8fafc;
  font-size: 17px;
  font-weight: 700;
  text-align: right;
}
.cota-card-campo span {
  color: #94a3b8;
  font-size: 12px;
  font-weight: 700;
}
.cota-card-nota {
  margin: 0;
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.4;
}
.cota-card-erro {
  margin: 8px 0 0 0;
  font-size: 12px;
  font-weight: 600;
  color: #fca5a5;
}
.cota-card-acoes {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.cota-btn-primario,
.cota-btn-secundario {
  flex: 1 1 auto;
  min-height: 44px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}
.cota-btn-primario {
  border: 1px solid #38bdf8;
  background: linear-gradient(135deg, #0284c7, #0369a1);
  color: #ffffff;
}
.cota-btn-secundario {
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: rgba(148, 163, 184, 0.12);
  color: #e2e8f0;
}

@media (max-width: 1023px) {
  .cota-card {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    border-radius: 14px 14px 0 0;
    padding: 14px 16px calc(16px + env(safe-area-inset-bottom)) 16px;
    transform: translateY(100%);
  }
  /* O dedo nao mira: no telefone/tablet o cartao ignora o ponto do toque. */
  .cota-card.is-ancorado {
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
  }
  .cota-card.is-open {
    transform: translateY(0);
  }
}
/* ==========================================================================
   DASHBOARD & GESTÃO DE PROJETOS / CRM
   ========================================================================== */
#viewDashboard {
  box-sizing: border-box !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
  padding-bottom: var(--safe-b, 0px) !important;
}

/* A barra touch inferior (Parametri, Report, Preferiti, Listino) SÓ deve aparecer quando #viewWorkspace estiver ativo */
#viewWorkspace[style*="display: none"] .bottom-touch-bar,
#viewDashboard:not([style*="display: none"]) ~ * .bottom-touch-bar,
#viewDashboard:not([style*="display: none"]) .bottom-touch-bar,
body:has(#viewDashboard:not([style*="display: none"])) .bottom-touch-bar {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.dash-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(12px + var(--safe-t, 0px)) calc(24px + var(--safe-r, 0px)) 12px calc(24px + var(--safe-l, 0px));
  background: #090e17;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-sizing: border-box;
}

.dash-user-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.dash-content-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px 24px;
  padding-bottom: calc(32px + var(--safe-b, 0px)) !important;
  width: 100%;
}

.dash-hero-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
  flex-wrap: wrap;
  /* Ancora o chip de saudacao no canto direito do hero (o lado direito esta
     vazio: .dash-hero-intro e' o unico filho). */
  position: relative;
}

.dash-page-title {
  font-size: 28px;
  font-weight: 800;
  color: #f8fafc;
  margin: 0 0 6px 0;
}

.dash-page-subtitle {
  font-size: 15px;
  color: #94a3b8;
  margin: 0;
}

/* Saudacao do usuario logado ("Ciao, NOME"). No desktop fica FORA DO FLUXO, no
   canto direito do hero: nao desloca o titulo, o subtitulo nem a grade. No
   mobile (<=1024px) o hero e' coluna centralizada e ela volta ao fluxo.
   O nome e' escrito pelo uiManager junto com o resto da identidade. */
.dash-hero-greeting {
  position: absolute;
  top: 2px;
  right: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  max-width: 46%;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(99, 102, 241, 0.14);
  border: 1px solid rgba(129, 140, 248, 0.35);
  color: #c7d2fe;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
}

.dash-hero-greeting-name {
  color: #f8fafc;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-hero-buttons {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* --- GRID DE BOTÕES QUADRADOS NA DASHBOARD (RESPONSIVO COM FÁBRICA/NESTING) --- */
.dash-action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
  width: 100%;
}

/* --- DESKTOP (>= 1025px): GRADE FIXA DE 4 COLUNAS (4 + 4) --- */
/* Com `auto-fit` o numero de colunas dependia da largura da janela: 7 colunas nos
   1232px de conteudo, 6 perto de 1200px, 5 perto de 1025px. Ao entrar a 8a carta
   (aba Opere), a ultima sobrava sozinha na segunda linha e as duas linhas nao se
   alinhavam. Com 4 colunas fixas: gestor (8 cartas) fica 4 + 4; nao-gestor (7) fica
   4 + 3 e as 3 seguem alinhadas com as colunas de cima, porque as cartas NAO esticam
   para preencher a linha incompleta (esticar e' o que desalinha as colunas).
   Mobile/tablet (<= 1024px) segue com `repeat(2, 1fr) !important` em
   80-medida-rei-wizard-verso.css: esta regra nao alcanca aquela faixa. */
@media (min-width: 1025px) {
  .dash-action-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .dash-square-card {
    min-height: 128px;
  }
}

.dash-square-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 18px 12px;
  min-height: 114px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(17, 26, 40, 0.85);
  color: #f8fafc;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  position: relative;
  box-sizing: border-box;
  backdrop-filter: blur(12px);
  -webkit-tap-highlight-color: transparent;
}

.dash-square-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

.dash-square-card:active {
  transform: scale(0.97);
}

.dash-card-icon-badge {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  background: rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.dash-square-card:hover .dash-card-icon-badge {
  transform: scale(1.08);
}

.dash-card-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.dash-card-info strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.25;
}

.dash-card-info small {
  display: block;
  font-size: 11.5px;
  color: #94a3b8;
  margin-top: 3px;
  line-height: 1.2;
}

/* 1. Botão Novo Progetto */
.dash-card-new {
  background: linear-gradient(140deg, #0284c7 0%, #0369a1 100%);
  border: 1px solid rgba(56, 189, 248, 0.5);
  box-shadow: 0 8px 20px rgba(2, 132, 199, 0.3);
}

.dash-card-new:hover {
  background: linear-gradient(140deg, #0369a1 0%, #0284c7 100%);
  box-shadow: 0 12px 26px rgba(2, 132, 199, 0.45);
}

.dash-card-new .dash-card-icon-badge {
  background: rgba(255, 255, 255, 0.22);
}

.dash-card-new .dash-card-info small {
  color: rgba(255, 255, 255, 0.85);
}

/* 2. Botão Preventivo Rapido */
.dash-card-quick {
  background: linear-gradient(140deg, #d97706 0%, #b45309 100%);
  border: 1px solid rgba(251, 191, 36, 0.5);
  box-shadow: 0 8px 20px rgba(217, 119, 6, 0.3);
}

.dash-card-quick:hover {
  background: linear-gradient(140deg, #b45309 0%, #d97706 100%);
  box-shadow: 0 12px 26px rgba(217, 119, 6, 0.45);
}

.dash-card-quick .dash-card-icon-badge {
  background: rgba(255, 255, 255, 0.22);
}

.dash-card-quick .dash-card-info small {
  color: rgba(255, 255, 255, 0.85);
}

/* 2.1 Botão Centro Taglio & Nesting CAM */
.dash-card-factory {
  background: linear-gradient(140deg, #0f766e 0%, #042f2e 100%);
  border: 1px solid rgba(45, 212, 191, 0.5);
  box-shadow: 0 8px 20px rgba(15, 118, 110, 0.35);
}

.dash-card-factory:hover {
  background: linear-gradient(140deg, #115e59 0%, #0f766e 100%);
  box-shadow: 0 12px 26px rgba(45, 212, 191, 0.45);
}

.dash-card-factory .dash-card-icon-badge {
  background: rgba(255, 255, 255, 0.2);
}

.dash-card-factory .dash-card-info small {
  color: rgba(255, 255, 255, 0.85);
}

/* 2.2 Botão Fotocamera Lastre PWA */
.dash-card-camera {
  background: linear-gradient(140deg, #0369a1 0%, #082f49 100%);
  border: 1px solid rgba(56, 189, 248, 0.5);
  box-shadow: 0 8px 20px rgba(3, 105, 161, 0.35);
}

.dash-card-camera:hover {
  background: linear-gradient(140deg, #075985 0%, #0369a1 100%);
  box-shadow: 0 12px 26px rgba(56, 189, 248, 0.45);
}

.dash-card-camera .dash-card-icon-badge {
  background: rgba(255, 255, 255, 0.2);
}

.dash-card-camera .dash-card-info small {
  color: rgba(255, 255, 255, 0.85);
}

/* 3 & 4. Botões de Seleção de Aba (I Tuoi Progetti & Rubrica) */
.dash-square-card.dash-tab-btn {
  background: rgba(19, 29, 46, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.dash-square-card.dash-tab-btn:hover {
  background: rgba(26, 38, 59, 0.95);
  border-color: rgba(255, 255, 255, 0.2);
}

.dash-square-card.dash-tab-btn.is-active {
  background: linear-gradient(145deg, rgba(2, 132, 199, 0.22) 0%, rgba(30, 58, 138, 0.42) 100%);
  border: 2px solid #38bdf8;
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.dash-square-card.dash-tab-btn.is-active .dash-card-icon-badge {
  background: rgba(56, 189, 248, 0.28);
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.35);
}

.dash-square-card.dash-tab-btn.is-active strong {
  color: #38bdf8;
}

.dash-square-card.dash-tab-btn.is-active small {
  color: #bae6fd;
}

.dash-btn-hero-primary,
.dash-btn-hero-quick {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  text-align: left;
}

.dash-btn-hero-primary {
  background: linear-gradient(135deg, #0284c7, #0369a1);
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(2, 132, 199, 0.35);
}

.dash-btn-hero-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(2, 132, 199, 0.45);
}

.dash-btn-hero-quick {
  background: linear-gradient(135deg, #d97706, #b45309);
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(217, 119, 6, 0.35);
}

.dash-btn-hero-quick:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(217, 119, 6, 0.45);
}

.btn-label-group strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
}

.btn-label-group small {
  display: block;
  font-size: 12px;
  opacity: 0.85;
}

/* --- SELETOR DE ABAS LEGADAS NA DASHBOARD --- */
.dash-view-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  background: #0d1522;
  padding: 4px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  width: fit-content;
  max-width: 100%;
}

.dash-view-tabs .dash-tab-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: #94a3b8;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.dash-view-tabs .dash-tab-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.05);
}

.dash-view-tabs .dash-tab-btn.is-active {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.35);
}

.dash-tab-pane {
  width: 100%;
}

/* --- GESTÃO DE CLIENTES NA DASHBOARD --- */
.dash-clients-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.dash-clients-search-box {
  position: relative;
  flex: 1;
  min-width: 260px;
  max-width: 500px;
}

.dash-clients-search-box .search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #64748b;
  font-size: 14px;
  pointer-events: none;
}

.dash-search-input {
  width: 100%;
  background: #131d2e;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 11px 16px 11px 38px;
  color: #ffffff;
  font-size: 14px;
  transition: all 0.2s;
  box-sizing: border-box;
}

.dash-search-input:focus {
  border-color: #38bdf8;
  outline: none;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.25);
}

/* --- BOTÃO PRIMÁRIO & BOTÃO NOVO CLIENTE --- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  color: #ffffff !important;
  border: 1px solid rgba(56, 189, 248, 0.4);
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 18px;
  min-height: 42px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.25);
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #0369a1 0%, #0284c7 100%);
  border-color: rgba(56, 189, 248, 0.7);
  box-shadow: 0 6px 20px rgba(2, 132, 199, 0.45);
  transform: translateY(-2px);
}

.btn-primary:active {
  transform: translateY(0) scale(0.98);
}

/* BOTÃO PREMIUM: NUOVO CLIENTE */
.btn-add-client,
#btnDashboardNewClient {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 100%);
  color: #ffffff !important;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.015em;
  padding: 10px 22px;
  min-height: 44px;
  border-radius: 10px;
  border: 1px solid rgba(56, 189, 248, 0.5);
  box-shadow: 0 4px 16px rgba(2, 132, 199, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.btn-add-client::before,
#btnDashboardNewClient::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transform: skewX(-25deg);
  transition: left 0.75s ease;
  pointer-events: none;
}

.btn-add-client:hover::before,
#btnDashboardNewClient:hover::before {
  left: 140%;
}

.btn-add-client:hover,
#btnDashboardNewClient:hover {
  background: linear-gradient(135deg, #0369a1 0%, #0284c7 100%);
  border-color: rgba(56, 189, 248, 0.85);
  box-shadow: 0 8px 24px rgba(2, 132, 199, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
}

.btn-add-client:active,
#btnDashboardNewClient:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.3);
}

.btn-add-client .btn-client-icon-badge,
#btnDashboardNewClient .btn-client-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: transform 0.25s ease, background 0.25s ease;
  flex-shrink: 0;
}

.btn-add-client:hover .btn-client-icon-badge,
#btnDashboardNewClient:hover .btn-client-icon-badge {
  transform: scale(1.12) rotate(3deg);
  background: rgba(255, 255, 255, 0.32);
}

.btn-add-client svg,
#btnDashboardNewClient svg {
  width: 16px;
  height: 16px;
  stroke: #ffffff;
  stroke-width: 2.2;
}

.dash-clients-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}

.dash-client-card {
  background: #111a28;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.dash-client-card:hover {
  transform: translateY(-2px);
  border-color: rgba(56, 189, 248, 0.35);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.dash-client-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.dash-client-name {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: #f8fafc;
  line-height: 1.25;
}

.dash-client-badge-count {
  background: rgba(245, 158, 11, 0.15);
  color: var(--accent-gold);
  border: 1px solid rgba(245, 158, 11, 0.3);
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
}

.dash-client-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  color: #94a3b8;
}

.dash-client-contact-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.btn-client-call,
.btn-client-wa {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.15s;
}

.btn-client-call {
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.25);
}

.btn-client-call:hover {
  background: rgba(56, 189, 248, 0.24);
}

.btn-client-wa {
  background: rgba(34, 197, 94, 0.12);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.25);
}

.btn-client-wa:hover {
  background: rgba(34, 197, 94, 0.24);
}

.dash-client-cantiere {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #cbd5e1;
  font-size: 12.5px;
}

.dash-client-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.dash-client-actions .btn-new-proj-client {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--accent-gold) 0%, #d97706 100%);
  color: #0b0f19 !important;
  border: 1px solid rgba(251, 191, 36, 0.5);
  border-radius: 9px;
  padding: 8px 14px;
  min-height: 40px;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(245, 158, 11, 0.25);
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.dash-client-actions .btn-new-proj-client:hover {
  background: linear-gradient(135deg, #d97706 0%, var(--accent-gold) 100%);
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.45);
  transform: translateY(-2px);
}

.dash-client-actions .btn-new-proj-client:active {
  transform: translateY(0) scale(0.98);
}

.dash-client-actions .btn-new-proj-client svg {
  width: 15px;
  height: 15px;
  stroke: #0b0f19;
  stroke-width: 2.2;
  transition: transform 0.2s ease;
}

.dash-client-actions .btn-new-proj-client:hover svg {
  transform: scale(1.15);
}

.dash-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  margin-bottom: 36px;
}

.dash-stat-card {
  background: #131d2e;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.dash-stat-icon {
  font-size: 28px;
  width: 52px;
  height: 52px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dash-stat-number {
  font-size: 26px;
  font-weight: 800;
  color: #f8fafc;
  line-height: 1.1;
  display: block;
}

.dash-stat-label {
  font-size: 13px;
  color: #94a3b8;
}

.dash-projects-section {
  background: #111a28;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 24px;
}

.dash-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 14px;
}

.dash-section-header h2 {
  font-size: 18px;
  font-weight: 700;
  color: #f1f5f9;
  margin: 0;
}

.dash-projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}

/* --- PIPELINE STATS & HORIZONTAL FILTER CHIPS (MOBILE FIRST) --- */
.dash-pipeline-stats {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

.dash-filter-chips-container {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 0 16px 0;
  margin-bottom: 24px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.dash-filter-chips-container::-webkit-scrollbar {
  display: none;
}

.dash-filter-chip {
  flex-shrink: 0;
  scroll-snap-align: start;
  min-height: 42px;
  padding: 8px 16px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #131d2e;
  color: #cbd5e1;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.dash-filter-chip:hover {
  background: #1e293b;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.2);
}

.dash-filter-chip.is-active {
  background: #0284c7;
  color: #ffffff;
  border-color: #38bdf8;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.4);
}

.dash-filter-chip .chip-count {
  background: rgba(0, 0, 0, 0.35);
  padding: 2px 7px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
}

.dash-project-card {
  background: #162235;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 4px solid #94a3b8;
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.2s ease;
}

.dash-project-card.card-border-draft {
  border-left: 4px solid #eab308 !important;
}

.dash-project-card.card-border-review {
  border-left: 4px solid #06b6d4 !important;
}

.dash-project-card.card-border-approved {
  border-left: 4px solid #10b981 !important;
}

.dash-project-card.card-border-factory {
  border-left: 4px solid #8b5cf6 !important;
}

/* Conclusao: grafite de arquivo — antes reusava o verde de `card-border-approved`,
   o que dava a mesma cara a "aprovado" e "concluido". */
.dash-project-card.card-border-completed {
  border-left: 4px solid #64748b !important;
}

.dash-project-card:hover {
  border-color: rgba(56, 189, 248, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
}

.dash-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.dash-stair-type-tag {
  font-size: 12px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
}

.dash-status-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  text-transform: uppercase;
}

.dash-status-badge.status-draft {
  background: rgba(234, 179, 8, 0.15);
  color: #eab308;
  border: 1px solid rgba(234, 179, 8, 0.3);
}

.dash-status-badge.status-review {
  background: rgba(6, 182, 212, 0.15);
  color: #06b6d4;
  border: 1px solid rgba(6, 182, 212, 0.3);
}

.dash-status-badge.status-approved {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.dash-status-badge.status-completed {
  background: rgba(148, 163, 184, 0.15);
  color: #cbd5e1;
  border: 1px solid rgba(148, 163, 184, 0.35);
}

.dash-status-badge.status-factory {
  background: rgba(139, 92, 246, 0.15);
  color: #c084fc;
  border: 1px solid rgba(139, 92, 246, 0.3);
}

/* WORKFLOW ACTION BUTTONS ON CARDS */
/* A linha de acoes pode ter 2 ou 3 chips (aprovar/rejeitar/concluir) mais o selo
   de fabrica — o flex com wrap substitui o `display:flex` inline que existia no
   markup gerado. */
.dash-workflow-action-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.btn-workflow-chip {
  min-height: 36px;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  user-select: none;
}

.btn-wf-submit {
  background: rgba(234, 179, 8, 0.15);
  color: #facc15;
  border: 1px solid rgba(234, 179, 8, 0.35);
}

.btn-wf-submit:hover {
  background: #eab308;
  color: #0f172a;
}

.btn-wf-approve {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.35);
}

.btn-wf-approve:hover {
  background: #10b981;
  color: #ffffff;
}

.btn-wf-reject {
  background: rgba(244, 63, 94, 0.15);
  color: #fb7185;
  border: 1px solid rgba(244, 63, 94, 0.35);
}

.btn-wf-reject:hover {
  background: #f43f5e;
  color: #ffffff;
}

.btn-wf-factory {
  background: rgba(139, 92, 246, 0.2);
  color: #c084fc;
  border: 1px solid rgba(139, 92, 246, 0.4);
}

.btn-wf-factory:hover {
  background: #8b5cf6;
  color: #ffffff;
}

.btn-wf-complete {
  background: rgba(148, 163, 184, 0.15);
  color: #cbd5e1;
  border: 1px solid rgba(148, 163, 184, 0.35);
}

.btn-wf-complete:hover {
  background: #94a3b8;
  color: #0f172a;
}

.btn-wf-reopen {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.35);
}

.btn-wf-reopen:hover {
  background: #f59e0b;
  color: #0f172a;
}

.dash-factory-tag {
  background: rgba(139, 92, 246, 0.12);
  color: #c084fc;
  border: 1px dashed rgba(139, 92, 246, 0.4);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dash-card-notes-badge {
  font-size: 12px;
  color: #facc15;
  background: rgba(250, 204, 21, 0.08);
  border-left: 3px solid #facc15;
  padding: 6px 10px;
  border-radius: 4px;
  margin-bottom: 8px;
  line-height: 1.4;
}

.dash-card-content-area {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dash-card-title {
  font-size: 16px;
  font-weight: 700;
  color: #f8fafc;
  margin: 0;
  line-height: 1.35;
}

.dash-card-client-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: #cbd5e1;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 8px 12px;
}

.client-line {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.client-line .info-icon {
  font-size: 13.5px;
  flex-shrink: 0;
}

.client-line strong {
  color: #ffffff;
  overflow: hidden;
  text-overflow: ellipsis;
}

.client-line.site-line {
  color: #94a3b8;
  font-size: 12px;
}

.dash-card-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 4px 0;
  border-top: none;
  border-bottom: none;
  margin: 2px 0;
}

.metric-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  color: #cbd5e1;
}

.metric-item.dislivello {
  color: #facc15;
  background: rgba(250, 204, 21, 0.08);
  border-color: rgba(250, 204, 21, 0.22);
}

.metric-item.quote {
  color: #34d399;
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.22);
}

.metric-item.date {
  color: #94a3b8;
}

/* RODAPÉ DO CARD HARMONIZADO & ALINHADO */
.dash-card-footer-wrapper {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dash-card-audit-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 11.5px;
  color: #94a3b8;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 7px;
  padding: 6px 10px;
  line-height: 1.4;
}

.dash-card-audit-footer strong {
  color: #f1f5f9;
}

.audit-author-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.audit-approver-tag {
  color: #10b981;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* BOTOES DE ACAO DO CARD: FLEX, NAO GRADE.
   A grade era `1fr 1fr 42px`, e `1fr` e' `minmax(auto, 1fr)`: o minimo automatico de
   um item de grade e' o MIN-CONTENT, entao com o rotulo em `nowrap` as colunas nao
   encolhiam, a grade ficava mais larga que o card (que nao recorta) e a ultima
   coluna — a lixeira de 42px — vazava para fora. So' acontecia onde o rotulo e'
   comprido (romeno "Deschide Proiectul" contra o italiano "Apri Progetto").
   Trocar so' o minimo por `minmax(0, 1fr)` tambem nao serve: as colunas ficam IGUAIS
   e a coluna passa a ser mais estreita que o texto do idioma comprido — o italiano
   "Taglio & Nesting" precisa de ~142px com a borda e a coluna igual da' 141,2px, ou
   seja, o rotulo curto tambem quebrava.
   Flex resolve as duas pontas: cada botao de rotulo pede o espaco do proprio texto
   (`flex: 1 1 auto`, base `auto`) e reparte a sobra; quando FALTA espaco, ele encolhe
   e o rotulo quebra em duas linhas dentro dele. `align-items: stretch` mantem todos
   os botoes da MESMA linha com a mesma altura — sem isso a lixeira, de largura fixa,
   ficava menor que o vizinho que quebrou em duas linhas. */
.dash-card-actions {
  display: flex;
  gap: 8px;
  align-items: stretch;
  width: 100%;
}

.dash-card-actions-with-nesting {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: 100% !important;
}

.dash-actions-row-top,
.dash-actions-row-bottom {
  display: flex;
  gap: 8px;
  align-items: stretch;
  width: 100%;
}

/* Quem reparte a sobra e' o botao de rotulo; a lixeira nao cresce nem encolhe. */
.dash-card-actions .btn-card-action:not(.btn-delete-project) {
  flex: 1 1 auto;
}

.metric-item.nesting-ready {
  color: #34d399 !important;
  background: rgba(16, 185, 129, 0.12) !important;
  border-color: rgba(52, 211, 153, 0.35) !important;
  font-weight: 700 !important;
}

.btn-card-action {
  min-height: 42px;
  height: auto;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  box-sizing: border-box;
  font-family: inherit;
  line-height: 1.2;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: normal;
}

/* Quem cede e' o texto, que quebra em duas linhas; o icone nao encolhe junto. O
   `overflow-wrap: anywhere` (e nao `break-word`) importa aqui: so' ele reduz o
   MIN-CONTENT, e e' o min-content do rotulo que vira o piso do botao — sem ele uma
   palavra unica mais larga que a coluna (alemao) voltaria a estourar o card. */
.btn-card-action svg {
  flex-shrink: 0;
}

.btn-card-action > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.btn-card-action.btn-open-project {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  color: #ffffff !important;
  border: 1px solid rgba(56, 189, 248, 0.45);
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.25);
  padding: 8px 10px;
}

.btn-card-action.btn-open-project:hover {
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
  border-color: #38bdf8;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.45);
  transform: translateY(-1px);
}

.btn-card-action.btn-open-project:active {
  transform: translateY(0) scale(0.98);
}

.btn-card-action.btn-nesting-project {
  background: linear-gradient(140deg, rgba(139, 92, 246, 0.16) 0%, rgba(109, 40, 217, 0.22) 100%);
  color: #c084fc !important;
  border: 1px solid rgba(168, 85, 247, 0.38);
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.15);
  padding: 8px 10px;
}

.btn-card-action.btn-nesting-project:hover {
  background: linear-gradient(140deg, rgba(147, 51, 234, 0.3) 0%, rgba(126, 34, 206, 0.4) 100%);
  color: #ffffff !important;
  border-color: #c084fc;
  box-shadow: 0 4px 14px rgba(168, 85, 247, 0.35);
  transform: translateY(-1px);
}

.btn-card-action.btn-nesting-project:active {
  transform: translateY(0) scale(0.98);
}

.btn-card-action.btn-view-nesting {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.18) 0%, rgba(5, 150, 105, 0.26) 100%);
  color: #34d399 !important;
  border: 1.5px solid rgba(52, 211, 153, 0.45);
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.2);
  padding: 8px 12px;
}

.btn-card-action.btn-view-nesting:hover {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff !important;
  border-color: #34d399;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.45);
  transform: translateY(-1px);
}

.btn-card-action.btn-view-nesting:active {
  transform: translateY(0) scale(0.98);
}

/* `flex: 0 0 42px` (nao cresce, nao encolhe) + `height: auto` + `align-self: stretch`:
   a lixeira fica nos 42px da ponta e acompanha a ALTURA da linha, para nao ficar
   menor que o vizinho que quebrou o rotulo em duas linhas. O `height: auto` tambem
   e' o que impede o `height: 40px` do grupo `.btn-danger-outline, .btn-delete-project,
   .btn-delete-client` de voltar a valer. */
.btn-card-action.btn-delete-project {
  flex: 0 0 42px;
  width: 42px;
  min-width: 42px;
  height: auto;
  align-self: stretch;
  padding: 0;
  background: rgba(244, 63, 94, 0.08) !important;
  color: #fb7185 !important;
  border: 1px solid rgba(244, 63, 94, 0.25) !important;
}

.btn-card-action.btn-delete-project:hover {
  background: rgba(244, 63, 94, 0.22) !important;
  border-color: rgba(244, 63, 94, 0.65) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(244, 63, 94, 0.3);
}

.btn-card-action.btn-delete-project:active {
  transform: translateY(0) scale(0.96);
}

/* CARDS DE PREVIEW DA MODAL DE NESTING */
.nesting-slab-preview-card {
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.nesting-slab-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nesting-canvas-frame {
  width: 100%;
  height: 220px;
  background: #090e17;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

/* BOTÃO DELETAR (LIXEIRA PREMIUM) */
.btn-danger-outline,
.btn-delete-project,
.btn-delete-client {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 9px;
  background: rgba(239, 68, 68, 0.08) !important;
  border: 1px solid rgba(239, 68, 68, 0.25) !important;
  color: #f87171 !important;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
}

.btn-danger-outline:hover,
.btn-delete-project:hover,
.btn-delete-client:hover {
  background: rgba(239, 68, 68, 0.22) !important;
  border-color: rgba(239, 68, 68, 0.65) !important;
  color: #fca5a5 !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35);
}

.btn-danger-outline:active,
.btn-delete-project:active,
.btn-delete-client:active {
  transform: translateY(0) scale(0.96);
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.2);
}

.btn-danger-outline svg,
.btn-delete-project svg,
.btn-delete-client svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2;
  transition: transform 0.2s ease;
}

.btn-danger-outline:hover svg,
.btn-delete-project:hover svg,
.btn-delete-client:hover svg {
  transform: scale(1.15);
}

/* BOTÃO EDITAR CLIENTE */
.btn-edit-client {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 9px;
  background: rgba(56, 189, 248, 0.08) !important;
  border: 1px solid rgba(56, 189, 248, 0.25) !important;
  color: #38bdf8 !important;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
  padding: 0;
}

.btn-edit-client:hover {
  background: rgba(56, 189, 248, 0.22) !important;
  border-color: rgba(56, 189, 248, 0.65) !important;
  color: #bae6fd !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(56, 189, 248, 0.35);
}

.btn-edit-client:active {
  transform: translateY(0) scale(0.96);
  box-shadow: 0 2px 6px rgba(56, 189, 248, 0.2);
}

.btn-edit-client svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2;
  transition: transform 0.2s ease;
}

.btn-edit-client:hover svg {
  transform: scale(1.15);
}

.dash-empty {
  text-align: center;
  padding: 48px 20px;
  color: #94a3b8;
  grid-column: 1 / -1;
}

.dash-empty-icon {
  font-size: 48px;
  margin-bottom: 14px;
}

.dash-empty h3 {
  font-size: 18px;
  color: #f1f5f9;
  margin: 0 0 6px 0;
}

/* ==========================================================================
   ABA OBRAS — ESCADAS AGRUPADAS POR CANTIERE
   --------------------------------------------------------------------------
   O vendedor faz um projeto por escada; a obra e' o grupo. Este bloco veste o
   rollup (totais do cantiere) e as escalas dentro dele. A estetica segue os
   cartoes de cliente (.dash-client-card) para os dois lados do dashboard
   parecerem a mesma tela: fundo #111a28, borda 8% branco, raio 14.
   ========================================================================== */

.dash-obras-resumo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.dash-obras-resumo-item {
  background: #111a28;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dash-obras-resumo-item.is-total {
  border-color: rgba(212, 175, 55, 0.35);
  background: linear-gradient(140deg, rgba(212, 175, 55, 0.12), rgba(17, 26, 40, 0.9));
}

.dash-obras-resumo-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #94a3b8;
}

.dash-obras-resumo-valor {
  font-size: 20px;
  font-weight: 800;
  color: #f8fafc;
}

.dash-obras-resumo-item.is-total .dash-obras-resumo-valor {
  color: var(--accent-gold);
}

.dash-obras-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 20px;
}

.dash-obra-card {
  background: #111a28;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.dash-obra-card:hover {
  transform: translateY(-2px);
  border-color: rgba(245, 158, 11, 0.35);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.dash-obra-card.is-sem-obra {
  border-style: dashed;
  border-color: rgba(148, 163, 184, 0.35);
}

.dash-obra-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.dash-obra-name {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: #f8fafc;
  line-height: 1.25;
}

.dash-obra-cliente {
  margin: 4px 0 0 0;
  font-size: 12.5px;
  color: #94a3b8;
}

.dash-obra-badge-escalas {
  background: rgba(245, 158, 11, 0.15);
  color: var(--accent-gold);
  border: 1px solid rgba(245, 158, 11, 0.3);
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
}

.dash-obra-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 12px;
  padding: 12px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.dash-obra-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dash-obra-stat-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #64748b;
}

.dash-obra-stat-valor {
  font-size: 13.5px;
  font-weight: 700;
  color: #e2e8f0;
}

.dash-obra-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(212, 175, 55, 0.4);
}

.dash-obra-total-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-gold);
}

.dash-obra-total-valor {
  font-size: 18px;
  font-weight: 800;
  color: var(--accent-gold);
}

.dash-obra-alerta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: 8px;
  padding: 6px 10px;
}

.dash-obra-stairs {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dash-obra-stair {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 12.5px;
  color: #cbd5e1;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.dash-obra-stair:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(56, 189, 248, 0.25);
}

.dash-obra-stair-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}

.dash-obra-stair-nome {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #f1f5f9;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.15s ease;
}

.dash-obra-stair-nome:hover {
  color: #38bdf8;
  text-decoration: underline;
}

.dash-obra-stair-tags {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.dash-obra-stair-type {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 500;
}

.dash-obra-stair-status {
  font-size: 9.5px !important;
  padding: 1px 6px !important;
  border-radius: 4px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.dash-obra-stair-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.dash-obra-stair-valor {
  font-weight: 750;
  color: #f8fafc;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dash-obra-stair-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.btn-obra-stair-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 24px;
  padding: 0 7px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  border: 1px solid transparent;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
}

.btn-obra-stair-action svg {
  flex-shrink: 0;
}

.btn-obra-open-ws {
  background: rgba(2, 132, 199, 0.16);
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.3);
}

.btn-obra-open-ws:hover {
  background: #0284c7;
  color: #ffffff;
  border-color: #38bdf8;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.4);
}

.btn-obra-open-nesting {
  background: rgba(13, 148, 136, 0.16);
  color: #2dd4bf;
  border-color: rgba(45, 212, 191, 0.3);
}

.btn-obra-open-nesting:hover {
  background: #0d9488;
  color: #ffffff;
  border-color: #2dd4bf;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(13, 148, 136, 0.4);
}

.btn-obra-stair-action:active {
  transform: scale(0.96);
}

.dash-obra-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.btn-obra-action {
  flex: 1;
  min-width: 130px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 36px;
  padding: 0 12px;
  border-radius: 9px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
}

.btn-obra-action svg {
  flex-shrink: 0;
}

.btn-obra-pdf {
  background: rgba(255, 255, 255, 0.05);
  color: #e2e8f0;
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.btn-obra-pdf:hover {
  background: rgba(245, 158, 11, 0.14);
  color: #fbbf24;
  border-color: rgba(245, 158, 11, 0.45);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);
}

.btn-obra-nesting-group {
  background: linear-gradient(135deg, rgba(13, 148, 136, 0.25) 0%, rgba(5, 150, 105, 0.35) 100%);
  color: #5eead4;
  border: 1px solid rgba(45, 212, 191, 0.38);
}

.btn-obra-nesting-group:hover {
  background: linear-gradient(135deg, #0d9488 0%, #059669 100%);
  color: #ffffff;
  border-color: #2dd4bf;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(13, 148, 136, 0.4);
}

.btn-obra-action:active {
  transform: scale(0.97);
}

.dash-projects-toolbar,
.dash-obras-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.dash-projects-toolbar .dash-search-box,
.dash-obras-toolbar .dash-search-box {
  position: relative;
  flex: 1;
  min-width: 260px;
  max-width: 540px;
}

.dash-search-box .search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #64748b;
  font-size: 14px;
  pointer-events: none;
}

.dash-search-box .btn-clear-search {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s ease;
}

/* POPOVER DI NOTIFICHE */
.popover-notifications {
  background: #1e293b;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 12px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5);
  width: 340px;
  max-width: 90vw;
  color: #f8fafc;
}

.popover-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.15);
}

.badge-status-warning {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.4);
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
}

.badge-status-inactive {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.4);
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
}

/* BADGE DE COTA DE POSTAÇÕES NA EQUIPE */
.dash-team-header-panel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 20px;
}

.dash-team-quota-box {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(30, 41, 59, 0.7);
  border: 1px solid rgba(56, 189, 248, 0.25);
  padding: 8px 16px;
  border-radius: 10px;
  backdrop-filter: blur(8px);
}

.dash-team-quota-info {
  display: flex;
  flex-direction: column;
}

.dash-team-quota-label {
  font-size: 10.5px;
  text-transform: uppercase;
  color: #94a3b8;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.dash-team-quota-val {
  font-size: 13.5px;
  font-weight: 700;
  color: #38bdf8;
}

.btn-team-upgrade {
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.08);
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-team-upgrade:hover {
  background: #38bdf8;
  color: #0f172a;
  border-color: #38bdf8;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.4);
}

.btn-icon-topbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #e2e8f0;
  border-radius: 8px;
  padding: 7px 10px;
  cursor: pointer;
  transition: all 0.18s ease;
}

.btn-icon-topbar:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

.btn-icon-topbar .btn-icon-svg {
  display: block;
}

/* --- BANNER DE ALERTA DE FATURAMENTO / PAST_DUE --- */
#btnDashBannerResolveBilling {
  transition: transform 0.15s ease, background 0.15s ease;
}

#btnDashBannerResolveBilling:hover {
  background: #fef3c7 !important;
  color: #78350f !important;
  transform: translateY(-1px);
}

#btnDashBannerResolveBilling:active {
  transform: translateY(0);
}

/* ==========================================================================
   MEDIDA REI & AUTO-SAVE INDICATOR
   ========================================================================== */
/* Base compartilhada dos dois badges do topo. A variante vermelha do
   .locked-void-badge é declarada mais abaixo, no bloco dela — a ordem do
   arquivo já garante que ela vence sobre esta base. */
.king-measure-badge,
.locked-void-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 14px;
  font-size: 12.5px;
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: var(--radius);
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition);
}

.king-measure-badge:hover {
  background: rgba(251, 191, 36, 0.2);
  border-color: rgba(251, 191, 36, 0.5);
}

.king-measure-badge .badge-value {
  color: #fde68a;
}

/* badge-label/value/lock existem apenas no markup estático do index.html:
   projectManager.js (updateKingMeasure) e app.js (atualizarBadgeVanoTravado)
   reescrevem o conteúdo dos badges com innerHTML — texto solto + <strong> —
   então a partir do primeiro update estes spans deixam de existir. */
.badge-label {
  font-weight: 500;
}

.badge-value {
  font-size: 13px;
}

.badge-lock {
  font-size: 11px;
  opacity: 0.8;
}

.autosave-status-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: #34d399;
  background: rgba(52, 211, 153, 0.1);
  padding: 6px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

.autosave-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 8px #34d399;
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}

/* ATENÇÃO: nada aplica a classe .saving hoje — updateSaveIndicator()
   (projectManager.js:2136) só faz textContent = text. A regra fica pronta
   para quando o JS passar a marcar o estado. */
.autosave-status-tag.saving {
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.1);
}

.autosave-status-tag.saving .autosave-dot {
  background: #fbbf24;
  box-shadow: 0 0 8px #fbbf24;
}

/* ==========================================================================
   SETUP WIZARD (3 PASSOS)
   ========================================================================== */
#modalSetupWizard {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  background: rgba(8, 14, 26, 0.88) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  z-index: 100000 !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  box-sizing: border-box !important;
}

#modalSetupWizard.is-open {
  display: flex !important;
}

.wizard-container {
  max-width: 780px !important;
  width: 95vw !important;
  max-height: 92vh !important;
  max-height: 92dvh !important;
  background: #0f172a !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  z-index: 100001 !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85), 0 0 30px rgba(2, 132, 199, 0.3) !important;
}

.wizard-header {
  padding: 20px 24px !important;
  background: #090e17 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.wizard-header-title {
  display: flex;
  align-items: center;
  gap: 14px;
}

.wizard-brand-icon {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, #0284c7, #0369a1);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.wizard-header-title h3 {
  font-size: 18px;
  font-weight: 800;
  color: #f8fafc;
  margin: 0;
}

.wizard-header-title p {
  font-size: 13px;
  color: #94a3b8;
  margin: 2px 0 0 0;
}

.wizard-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 24px;
  background: #0d1522;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-sizing: border-box;
}

.wizard-step-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #64748b;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  flex-shrink: 0;
}

.wizard-step-indicator .step-num {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #94a3b8;
  flex-shrink: 0;
  transition: all 0.2s;
}

.wizard-step-indicator.is-active {
  color: #38bdf8;
  font-weight: 700;
}

.wizard-step-indicator.is-active .step-num {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  color: #ffffff;
  box-shadow: 0 0 10px rgba(2, 132, 199, 0.45);
}

.wizard-step-indicator.is-completed {
  color: #22c55e;
}

.wizard-step-indicator.is-completed .step-num {
  background: #16a34a;
  color: #ffffff;
}

.wizard-step-divider {
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 0 10px;
  max-width: 80px;
}

.wizard-body {
  padding: 22px 24px !important;
  overflow-y: auto !important;
  flex: 1 !important;
}

.wizard-quick-banner {
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.09) 0%, rgba(217, 119, 6, 0.03) 100%);
  border: 1px solid rgba(245, 158, 11, 0.28);
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
  margin-bottom: 22px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.quick-banner-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
}

.quick-banner-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 14px;
  font-size: 11px;
  font-weight: 750;
  background: rgba(245, 158, 11, 0.16);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 2px;
}

.quick-banner-title {
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  color: #fef3c7;
  line-height: 1.3;
}

.quick-banner-desc {
  margin: 0;
  font-size: 12px;
  color: #94a3b8;
  max-width: 440px;
  line-height: 1.45;
}

.btn-quick-wizard {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #0b0f19;
  border: none;
  border-radius: 8px;
  padding: 10px 22px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  box-shadow: 0 2px 10px rgba(245, 158, 11, 0.35);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}

.btn-quick-wizard:hover {
  background: linear-gradient(135deg, #fbbf24 0%, #ea580c 100%);
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.5);
  transform: translateY(-1px);
}

.btn-quick-wizard:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.3);
}

.wizard-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
  align-items: start;
}

.wizard-divider-text {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #94a3b8;
  margin: 20px 0 12px 0;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.form-group-wizard {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px !important;
  margin: 0 !important;
  width: 100%;
}

.form-group-wizard label {
  margin: 0 !important;
  margin-bottom: 5px !important;
  padding: 0 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #cbd5e1 !important;
  line-height: 1.35 !important;
  display: block !important;
  text-align: left !important;
}

.form-group-wizard .form-control-wizard,
.form-group-wizard input:not([type="checkbox"]):not([type="radio"]),
.form-group-wizard select {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  width: 100% !important;
  background: #162235;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 10px 14px;
  color: #f8fafc;
  font-size: 14px;
  outline: none;
  min-height: 44px;
  box-sizing: border-box;
}

.form-group-wizard .form-control-wizard:focus,
.form-group-wizard input:not([type="checkbox"]):not([type="radio"]):focus,
.form-group-wizard select:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2);
}

.wizard-section-header-center {
  text-align: center;
  margin-bottom: 20px;
}

.wizard-section-eyebrow {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.25);
  padding: 3px 12px;
  border-radius: 999px;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.wizard-section-heading {
  font-size: 18px;
  font-weight: 800;
  color: #f8fafc;
  margin: 0;
  letter-spacing: -0.2px;
}

.wizard-section-label {
  font-size: 14px;
  font-weight: 700;
  color: #f1f5f9;
  display: block;
  margin-bottom: 12px;
}

/* SELETTORE TIPOLOGIA ACCORDION (COLAPSÁVEL) */
.wizard-typology-accordion {
  margin-bottom: 20px;
}

.typology-compact-card {
  background: #121c2d;
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 12px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.typology-compact-card:hover {
  border-color: rgba(56, 189, 248, 0.5);
  background: #16243a;
}

.typology-compact-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.typology-icon-badge {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #080f1a;
  border: 1px solid rgba(56, 189, 248, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 2px;
  box-sizing: border-box;
  flex-shrink: 0;
  font-size: 20px;
}

.typology-compact-meta {
  display: flex;
  flex-direction: column;
}

.typology-badge-tag {
  font-size: 9.5px;
  font-weight: 800;
  color: #38bdf8;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.typology-compact-title {
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  color: #f8fafc;
  line-height: 1.2;
}

.typology-compact-desc {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 1px;
}

.btn-toggle-typology {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.btn-toggle-typology:hover {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.3);
}

.btn-toggle-arrow {
  display: inline-block;
  font-size: 10px;
  transition: transform 0.25s ease;
}

/* Transição do Grid colapsável */
.wizard-typology-accordion.is-collapsed .wizard-type-grid {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  margin: 0 !important;
  transform: translateY(-6px);
  transition: max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease, transform 0.2s ease;
}

.wizard-typology-accordion.is-collapsed .btn-toggle-arrow {
  transform: rotate(0deg);
}

.wizard-typology-accordion:not(.is-collapsed) .wizard-type-grid {
  max-height: 500px;
  opacity: 1;
  pointer-events: auto;
  margin-top: 12px !important;
  margin-bottom: 20px !important;
  transform: translateY(0);
  transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, transform 0.25s ease;
}

.wizard-typology-accordion:not(.is-collapsed) .btn-toggle-arrow {
  transform: rotate(180deg);
}

.wizard-type-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}

.wizard-type-card {
  background: #141f30;
  border: 2px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px 10px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.wizard-type-card:hover {
  border-color: rgba(56, 189, 248, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.wizard-type-card.is-selected {
  border-color: #0284c7;
  background: rgba(2, 132, 199, 0.15);
  box-shadow: 0 0 20px rgba(2, 132, 199, 0.35);
}

.wizard-type-card .type-icon {
  width: 100%;
  height: 100px;
  margin-bottom: 8px;
  border-radius: 8px;
  overflow: hidden;
  background: #080f1a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  box-sizing: border-box;
}

.wizard-type-card .type-icon .type-icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  object-position: center;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: block;
}

.wizard-type-card:hover .type-icon .type-icon-img {
  transform: scale(1.06);
}

.wizard-type-card .type-name {
  font-size: 14px;
  font-weight: 700;
  color: #f8fafc;
}

.wizard-type-card .type-desc {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 4px;
  line-height: 1.3;
}

.typology-icon-badge .type-chip-img,
.wizard-type-chip-icon .type-chip-img {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  object-position: center;
  border-radius: 6px;
  display: block;
}

.wizard-type-chip-icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 4px;
}

/* ---------------------------------------------------------------------------
   MODULO CURVA & VENTAGLI (wizard)

   Quantos degraus giram na curva, por qual metodo, e a PLANTA REAL de cada
   metodo — o SVG sai da geometria (`src/wizardPreview.js`), sobre o vao que o
   usuario acabou de digitar. Os tres cards sao a MESMA escada, o mesmo vao e a
   mesma contagem: o que muda e' so' o metodo, e e' essa comparacao lado a lado
   que o vendedor precisa mostrar. Por isso o desenho mora DENTRO do card, e nao
   numa legenda ao lado.
--------------------------------------------------------------------------- */
.wizard-winder-module {
  background: linear-gradient(180deg, rgba(2, 132, 199, 0.1) 0%, rgba(11, 20, 36, 0) 40%);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 14px;
  padding: 18px 16px;
  margin-top: 22px;
}

.wizard-winder-header {
  text-align: center;
  margin-bottom: 14px;
}

.wizard-winder-eyebrow {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: #38bdf8;
  text-transform: uppercase;
}

.wizard-winder-title {
  font-size: 16px;
  font-weight: 700;
  color: #f8fafc;
  margin: 4px 0 0;
}

.wizard-winder-desc {
  font-size: 12px;
  color: #94a3b8;
  margin: 6px 0 0;
  line-height: 1.45;
}

.wizard-winder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.wizard-method-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.wizard-method-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #0f1a29;
  border: 2px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px 10px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.wizard-method-card:hover {
  border-color: rgba(56, 189, 248, 0.4);
  transform: translateY(-2px);
}

.wizard-method-card:focus-visible {
  outline: 2px solid #38bdf8;
  outline-offset: 2px;
}

.wizard-method-card.is-selected {
  border-color: #0284c7;
  background: rgba(2, 132, 199, 0.15);
  box-shadow: 0 0 18px rgba(2, 132, 199, 0.3);
}

.wizard-method-head {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.wizard-method-name {
  font-size: 12.5px;
  font-weight: 700;
  color: #f8fafc;
  line-height: 1.2;
}

.wizard-method-tag {
  align-self: flex-start;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: #7dd3fc;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.28);
  border-radius: 999px;
  padding: 2px 7px;
}

.wizard-method-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 78px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  overflow: hidden;
}

.wizard-method-preview svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 96px;
}

/* Método sem solução neste vão: o card diz o motivo em vez de ficar vazio. */
.wz-vazio {
  font-size: 10px;
  color: #fbbf24;
  text-align: center;
  padding: 8px;
  line-height: 1.35;
}

.wizard-method-desc {
  font-size: 10.5px;
  color: #94a3b8;
  line-height: 1.4;
  margin: 0;
}

/* As tres partes do degrau tem de se distinguir de longe: a comparacao e' entre
   METODOS, e o olho precisa achar a curva em cada card sem legenda. */
.wz-reto {
  fill: rgba(56, 189, 248, 0.18);
  stroke: rgba(125, 211, 252, 0.55);
  stroke-width: 0.8;
}

.wz-leque {
  fill: rgba(251, 146, 60, 0.45);
  stroke: #fb923c;
  stroke-width: 0.9;
}

.wz-partenza {
  fill: rgba(34, 197, 94, 0.35);
  stroke: #22c55e;
  stroke-width: 0.9;
}

/* COTAS DA MINIATURA (curva a raggio e chiocciola).

   A planta do wizard e' um desenho TECNICO: as linhas de cota sao tinta, e nao
   pedra, entao nao seguem o tema do estudo 3D. O rotulo leva um halo branco
   (`paint-order: stroke`) porque ele cai em cima do desenho — sem o halo, o
   numero some sobre a hachura do degrau. */
.wz-cota-linha {
  stroke: #b45309;
  stroke-width: 1;
  stroke-dasharray: 3 2;
}

.wz-cota {
  fill: #7c2d12;
  font: 600 9px Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-anchor: middle;
  dominant-baseline: middle;
  paint-order: stroke;
  stroke: rgba(255, 255, 255, 0.92);
  stroke-width: 3px;
  stroke-linejoin: round;
}

.wizard-curve-preview {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.wizard-winder-hint {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 10px;
  line-height: 1.45;
}

.wizard-winder-hint .ok {
  color: #4ade80;
  font-weight: 600;
}

.wizard-winder-hint .warn {
  color: #fbbf24;
  font-weight: 600;
}

.wizard-winder-hint .err {
  color: #f87171;
  font-weight: 600;
}

.wizard-field-note {
  display: block;
  font-size: 10.5px;
  color: #7dd3fc;
  margin-top: 4px;
}

/* ---------------------------------------------------------------------------
   MODULO DISTRIBUZIONE DEI GRADINI (wizard, Step 2)

   Quantos gradini retti cada rampa recebe. Cartao com acento ambar (e' uma
   ESCOLHA de distribuicao, nao uma medida de obra) e duas linhas de leitura: a
   soma das contagens e o que o fecho fez com os milimetros que sobraram.

   O `[hidden]` precisa de `!important`: os filhos diretos sao `.wizard-form-grid`
   (`display: grid`) e o atributo `hidden` perde para um `display` explicito.
--------------------------------------------------------------------------- */
.wizard-treads-module {
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.08) 0%, rgba(11, 20, 36, 0) 40%);
  border: 1px solid rgba(251, 191, 36, 0.22);
  border-radius: 14px;
  padding: 18px 16px;
  margin-top: 22px;
}

.wizard-treads-module .wizard-comfort-eyebrow {
  color: #fbbf24;
}

.wizard-treads-module [hidden] {
  display: none !important;
}

.wizard-treads-module .wizard-form-grid {
  margin-bottom: 10px;
  gap: 12px;
}

.wizard-treads-readout {
  font-size: 12px;
  color: #cbd5e1;
  line-height: 1.5;
}

.wizard-treads-fecho {
  font-size: 12px;
  color: #e2e8f0;
  line-height: 1.5;
  margin-top: 4px;
}

.wizard-treads-fecho strong {
  color: #f8fafc;
}

.wizard-treads-fecho .ok {
  color: #4ade80;
  font-weight: 600;
}

.wizard-treads-fecho .warn {
  color: #fbbf24;
  font-weight: 600;
}

.wizard-treads-fecho .err {
  color: #f87171;
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
   MODULO DISTRIBUZIONE & COMFORT (wizard, Step 2)

   Distribuicao dos degraus dentro das medidas de canteiro TRAVADAS. Os cards de
   leitura usam as classes do painel (`tread-total-card` & cia., ver
   docs/padrao-card-readout-matematico.md), que sao globais — aqui so' se ajusta
   o empilhamento deles dentro do modal.
--------------------------------------------------------------------------- */
.wizard-comfort-module {
  background: linear-gradient(180deg, rgba(34, 197, 94, 0.08) 0%, rgba(11, 20, 36, 0) 40%);
  border: 1px solid rgba(74, 222, 128, 0.22);
  border-radius: 14px;
  padding: 18px 16px;
  margin-top: 22px;
}

.wizard-comfort-header {
  text-align: center;
  margin-bottom: 14px;
}

.wizard-comfort-eyebrow {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: #4ade80;
  text-transform: uppercase;
}

.wizard-comfort-title {
  font-size: 16px;
  font-weight: 700;
  color: #f8fafc;
  margin: 4px 0 0;
}

.wizard-comfort-desc {
  font-size: 12px;
  color: #94a3b8;
  margin: 6px 0 0;
  line-height: 1.45;
}

/* ---------------------------------------------------------------------------
   MODULO GRADINO & SPESSORI (wizard, Step 2)

   Espessura da pedata e da alzata: as duas medidas de LAVORACAO do degrau
   (a alzata e' o incastro do corte da pedata e a pedata define a altura da peca
   de alzata). Mesmo cartao do modulo de conforto, com acento azul para nao
   parecer que e' a mesma coisa.

   O `[hidden]` precisa de `!important`: o `.wizard-form-grid` logo abaixo tem
   `display: grid`, e um `display` explicito vence o atributo `hidden` do HTML.
   Sem esta linha o campo personalizado apareceria sempre — vazio ao lado de
   espessuras de catalogo, convidando a digitar algo que nao manda.
--------------------------------------------------------------------------- */
.wizard-thickness-module,
.wizard-measures-module {
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.08) 0%, rgba(11, 20, 36, 0) 40%);
  border: 1px solid rgba(96, 165, 250, 0.22);
  border-radius: 14px;
  padding: 18px 16px;
  margin-top: 22px;
}

.wizard-thickness-module .wizard-comfort-eyebrow,
.wizard-measures-module .wizard-comfort-eyebrow {
  color: #60a5fa;
}

.wizard-thickness-module [hidden],
.wizard-measures-module [hidden] {
  display: none !important;
}

/* Os cinco pares de campos do cartello: espaco entre pares menor que o padrao do
   wizard (2026-09-28) — medido, o modulo custava 711 px com o `margin-bottom` de
   16 px em cinco grades. Os campos continuam com 44 px de altura (alvo de toque). */
.wizard-measures-module .wizard-form-grid {
  margin-bottom: 10px;
  gap: 12px;
}

.wizard-measures-module .wizard-field-note {
  font-size: 10px;
  margin-top: 2px;
}

/* ---------------------------------------------------------------------------
   SPORGENZA (toro): um ESTADO, nao um numero — por isso e' um switch.
   O bloco antigo estava escopado a `.wizard-measures-module` (Passo 3) e o
   switch vive no Passo 4: nenhuma regra casava e o usuario via a caixinha crua
   do navegador (medido no aceite de tablet, 2026-10-10). Agora e' GLOBAL.

   O `span` interno e' o TEXTO DE ESTADO: o `label span { position:absolute;
   right:10px; top:36px }` do styles.css LEGADO (nascido para a unidade EUR/ml
   dos campos de preco) vale para qualquer span de label — dai' o reset explicito.
--------------------------------------------------------------------------- */
.wizard-switch-line {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  margin: 0 !important;
  padding: 4px 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.wizard-switch-line > span {
  position: static !important;
  top: auto !important;
  right: auto !important;
  transform: none !important;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px !important;
  font-weight: 600;
  color: #cbd5e1 !important;
  pointer-events: auto;
}

/* Trilha + botao: aparencia propria (o checkbox nativo, mesmo marcado, ficava
   um quadrado branco cru no tema escuro). Estados off/on, foco visivel e
   desabilitado — o campo em mm so' aceita digito quando o switch esta' ligado. */
.wizard-switch-line input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  box-sizing: border-box;
  order: -1;
  width: 52px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: 0 0 auto;
  border: 1px solid rgba(148, 163, 184, 0.45);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.9);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45);
  transition: background 0.18s ease, border-color 0.18s ease;
  cursor: pointer;
}

.wizard-switch-line input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #94a3b8;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), background 0.18s ease;
}

.wizard-switch-line:hover input[type="checkbox"]:not(:disabled) {
  border-color: rgba(56, 189, 248, 0.65);
}

.wizard-switch-line input[type="checkbox"]:checked {
  border-color: #38bdf8;
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.95), rgba(3, 105, 161, 0.95));
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.25), inset 0 1px 2px rgba(0, 0, 0, 0.25);
}

.wizard-switch-line input[type="checkbox"]:checked::after {
  transform: translateX(22px);
  background: #ffffff;
}

.wizard-switch-line input[type="checkbox"]:focus-visible {
  outline: 2px solid #38bdf8;
  outline-offset: 2px;
}

.wizard-switch-line input[type="checkbox"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.wizard-switch-line input[type="checkbox"]:disabled + span {
  opacity: 0.6;
}

.wizard-comfort-more > summary {
  list-style: none;
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-size: 12.5px;
  font-weight: 700;
  color: #bbf7d0;
}

.wizard-comfort-more > summary::-webkit-details-marker {
  display: none;
}

.wizard-comfort-more > summary::before {
  content: "▸";
  color: #4ade80;
  font-size: 12px;
  transition: transform 0.15s ease;
}

.wizard-comfort-more[open] > summary::before {
  transform: rotate(90deg);
}

.wizard-comfort-more[open] > summary {
  border-bottom: 1px solid rgba(74, 222, 128, 0.18);
}

.wizard-comfort-more > .wizard-comfort-grid,
.wizard-comfort-more > .wizard-comfort-table-wrap {
  margin: 12px 14px;
}

.wizard-comfort-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.wizard-comfort-table-wrap {
  overflow-x: auto;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  margin-bottom: 14px;
}

.wizard-comfort-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
}

.wizard-comfort-table th {
  text-align: left;
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #94a3b8;
  padding: 7px 10px;
  background: rgba(255, 255, 255, 0.03);
  white-space: nowrap;
}

.wizard-comfort-table td {
  padding: 6px 10px;
  color: #e2e8f0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.wizard-comfort-table tbody tr {
  cursor: pointer;
  transition: background 0.15s ease;
}

.wizard-comfort-table tbody tr:hover {
  background: rgba(56, 189, 248, 0.08);
}

.wizard-comfort-table tbody tr.is-escolhido {
  background: rgba(2, 132, 199, 0.18);
}

.wizard-comfort-table tbody tr.is-escolhido td {
  color: #f8fafc;
  font-weight: 600;
}

/* Linha inviavel: o N pedido nao cabe no vao. Diz o motivo no lugar dos numeros. */
.wizard-comfort-table tbody tr.is-inviavel td {
  color: #f87171;
  cursor: not-allowed;
}

.wizard-comfort-table .cc-melhor {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #4ade80;
  background: rgba(34, 197, 94, 0.14);
  border: 1px solid rgba(74, 222, 128, 0.3);
  border-radius: 999px;
  padding: 1px 6px;
}

.wizard-comfort-table .cc-aviso {
  color: #fbbf24;
  font-weight: 700;
}

.wizard-comfort-table .cc-ok {
  color: #4ade80;
  font-weight: 700;
}

/* A seção 2D do degrau: um "papel" claro dentro do modal, como o corte técnico
   do Workspace. O SVG vem de `wizardSezione.js` (viewBox em mm, sem width/height
   fixos), então o desenho acompanha a largura disponível. */
.wizard-sezione {
  margin: 12px auto 0;
  max-width: 560px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.35);
}

.wizard-sezione:empty {
  display: none;
}

/* O SVG tem viewBox proprio (em mm) e `width:100%`: o desenho acompanha a largura
   disponivel SEM `max-height`, porque limitar a altura com
   `preserveAspectRatio` centra o desenho e abre duas faixas vazias nas laterais
   (medido no navegador: ~220 px de cada lado). */
.wizard-sezione-svg {
  display: block;
  width: 100%;
  height: auto;
}

.wizard-comfort-hint {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 10px;
  line-height: 1.45;
}

.wizard-comfort-hint .ok {
  color: #4ade80;
  font-weight: 600;
}

.wizard-comfort-hint .warn {
  color: #fbbf24;
  font-weight: 600;
}

.wizard-comfort-hint .err {
  color: #f87171;
  font-weight: 600;
}

@media (max-width: 720px) {
  .wizard-method-grid {
    grid-template-columns: 1fr;
  }

  .wizard-comfort-grid {
    grid-template-columns: 1fr;
  }
}

/* MODULO QUOTA GUIDA TECNICO DIGITALE */
.wizard-quota-module {
  background: radial-gradient(ellipse at 50% 0%, rgba(14, 165, 233, 0.12) 0%, #0b1424 70%);
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 14px;
  padding: 14px 16px 12px;
  text-align: center;
  box-shadow: 0 10px 30px -5px rgba(2, 132, 199, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  position: relative;
  overflow: hidden;
}

/* O eyebrow virou texto solto no cabecalho (o badge/pill saiu com a
   compactacao de 2026-09-28: com ele eram 284 px de altura para um campo). */
.quota-badge-text {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: #7dd3fc;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.quota-header {
  margin-bottom: 8px;
}

.quota-title {
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 800;
  color: #f8fafc;
  letter-spacing: -0.2px;
}

.quota-desc {
  margin: 0 auto;
  max-width: 640px;
  font-size: 11.5px;
  color: #94a3b8;
  line-height: 1.4;
}

.quota-laser-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 8px 0 4px;
}

/* A unica informacao da antiga regua grafica que valia a pena ficar. */
.quota-arrival-note {
  font-size: 11px;
  color: #94a3b8;
}

.quota-arrival-note strong {
  color: #f1f5f9;
  font-family: monospace;
}

.quota-lock-line {
  margin: 2px 0 0;
  font-size: 10.5px;
  color: #94a3b8;
}

.quota-stepper-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 6px 10px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
}

.quota-step-btn {
  background: #1e293b;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  font-family: monospace;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.15s ease;
  min-width: 44px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}

.quota-step-btn:hover {
  background: #0284c7;
  color: #ffffff;
  border-color: #38bdf8;
  transform: translateY(-1px);
}

.quota-step-btn:active {
  transform: scale(0.95);
}

.quota-input-frame {
  display: inline-flex;
  align-items: center;
  background: #050a14;
  border: 2px solid #0284c7;
  border-radius: 10px;
  padding: 2px 14px;
  gap: 8px;
  box-shadow: 0 0 18px rgba(2, 132, 199, 0.3);
}

.quota-laser-icon {
  font-size: 14px;
  color: #38bdf8;
}

.quota-laser-input {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
  font-size: 28px !important;
  font-weight: 800 !important;
  color: #38bdf8 !important;
  width: 110px !important;
  text-align: center !important;
  padding: 4px 0 !important;
  min-height: 42px !important;
  margin: 0 !important;
}

.quota-laser-input::-webkit-inner-spin-button,
.quota-laser-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.quota-unit-tag {
  font-size: 14px;
  font-weight: 800;
  color: #fde047;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* RÉGUA TÉCNICA AREJADA (QUOTA RULER DISPLAY) */
.quota-ruler-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 16px auto 14px auto;
  max-width: 480px;
  width: 100%;
}

.ruler-station {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 0 0 88px;
}

.station-mark {
  font-size: 9px;
  color: #0284c7;
  margin-bottom: 2px;
}

.station-tag {
  font-size: 9px;
  font-weight: 800;
  color: #64748b;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.station-val {
  font-size: 13px;
  font-weight: 800;
  color: #f1f5f9;
  font-family: monospace;
  margin-top: 1px;
}

.ruler-span {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 4px;
}

.ruler-line {
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, #0284c7 0%, rgba(56, 189, 248, 0.4) 100%);
  border-radius: 2px;
}

.ruler-span .ruler-line:last-child {
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.4) 0%, #0284c7 100%);
}

.ruler-center-badge {
  background: #030712;
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #38bdf8;
  font-family: monospace;
  font-size: 11.5px;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
  box-shadow: 0 0 10px rgba(2, 132, 199, 0.25);
}

.quota-lock-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11px;
  color: #94a3b8;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  padding: 5px 14px;
  margin-top: 4px;
}

.quota-lock-pill svg {
  color: #fde047;
}

.wizard-result-card {
  background: #141f30;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 20px;
  margin-top: 20px;
}

.wizard-result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.wizard-result-header h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #f1f5f9;
}

.wizard-norm-badge {
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
}

.wizard-norm-badge.norm-ok {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  border: 1px solid #22c55e;
}

.wizard-norm-badge.norm-warn {
  background: rgba(234, 179, 8, 0.15);
  color: #eab308;
  border: 1px solid #eab308;
}

.wizard-metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 16px;
}

.wizard-metric-item {
  background: #0d1522;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 12px;
  text-align: center;
}

.wizard-metric-item .m-label {
  display: block;
  font-size: 12px;
  color: #94a3b8;
  margin-bottom: 4px;
}

.wizard-metric-item .m-val {
  display: block;
  font-size: 18px;
  font-weight: 800;
  color: #38bdf8;
}

.wizard-blondel-box {
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  color: #bae6fd;
  text-align: center;
}

.wizard-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 26px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.btn-primary-wizard,
.btn-finish-wizard {
  background: linear-gradient(135deg, #0284c7, #0369a1);
  color: #ffffff;
  border: none;
  border-radius: 10px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  min-height: 48px;
}

.btn-finish-wizard {
  background: linear-gradient(135deg, #16a34a, #15803d);
  box-shadow: 0 4px 14px rgba(22, 163, 74, 0.4);
}

.btn-finish-wizard:hover {
  filter: brightness(1.08);
}

.btn-finish-wizard.is-loading {
  position: relative;
  cursor: wait !important;
  opacity: 0.88;
  pointer-events: none;
  background: linear-gradient(135deg, #15803d, #14532d) !important;
  box-shadow: 0 2px 8px rgba(22, 163, 74, 0.3) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-finish-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: btnFinishSpin 0.75s linear infinite;
  flex-shrink: 0;
}

@keyframes btnFinishSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.btn-secondary-wizard {
  background: rgba(255, 255, 255, 0.08);
  color: #f1f5f9;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  min-height: 48px;
}

/* RESPONSIVIDADE TABLET / MOBILE (≤ 1024px) — DESIGN PREMIUM ARTESANAL */
@media (max-width: 1024px) {
  /* Topbar no Mobile */
  .dash-topbar {
    padding: 10px 16px;
  }
  .dash-topbar .topbar-logo {
    width: 42px !important;
    height: 42px !important;
    border-radius: 9px !important;
  }
  .dash-topbar .topbar-title-box h2 {
    font-size: 16px;
  }
  .dash-topbar .topbar-tenant-tag {
    font-size: 10px;
    padding: 2px 6px;
  }
  #dashUserName {
    display: none !important; /* Espaço limpo e sem poluição */
  }

  /* Conteúdo Principal do Dashboard */
  .dash-content-container {
    padding: 16px 14px !important;
    padding-bottom: calc(24px + var(--safe-b, 0px)) !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* Hero Header Centralizado e Elegante */
  .dash-hero-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    margin-bottom: 18px;
  }

  .dash-page-title {
    font-size: 22px;
    font-weight: 800;
    text-align: center;
    color: #ffffff;
    margin: 0 0 6px 0;
    letter-spacing: -0.4px;
  }

  .dash-page-subtitle {
    font-size: 13px;
    text-align: center;
    max-width: 320px;
    margin: 0 auto;
    color: #94a3b8;
    line-height: 1.45;
  }

  /* No mobile o hero e' coluna centralizada: a saudacao sai do canto absoluto
     e entra no fluxo, centrada logo abaixo do subtitulo. */
  .dash-hero-greeting {
    position: static;
    max-width: 100%;
    margin: 0 auto;
  }

  /* 4 BOTÕES QUADRADOS EM GRID 2x2 NO MOBILE */
  .dash-action-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 2px 0 20px 0 !important;
    box-sizing: border-box !important;
  }

  .dash-square-card {
    min-height: 100px !important;
    padding: 14px 8px !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  .dash-card-icon-badge {
    width: 36px !important;
    height: 36px !important;
    font-size: 18px !important;
    border-radius: 10px !important;
    margin-bottom: 6px !important;
  }

  .dash-card-info strong {
    font-size: 12.5px !important;
    line-height: 1.2 !important;
  }

  .dash-card-info small {
    font-size: 10px !important;
    line-height: 1.15 !important;
  }

  /* Botões Hero Perfeitamente Alinhados e Centralizados (compatibilidade) */
  .dash-hero-buttons {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 380px;
    margin: 4px auto 0 auto;
    gap: 10px;
  }

  .dash-btn-hero-primary,
  .dash-btn-hero-quick {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: left;
    gap: 14px;
    padding: 14px 18px;
    border-radius: 14px;
    min-height: 58px;
  }

  .dash-btn-hero-primary .btn-icon,
  .dash-btn-hero-quick .btn-icon {
    font-size: 22px;
    width: 42px;
    height: 42px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .btn-label-group {
    flex: 1;
  }

  .btn-label-group strong {
    font-size: 15px;
    line-height: 1.2;
  }

  .btn-label-group small {
    font-size: 11px;
    opacity: 0.9;
  }

  /* Estatísticas em 3 Colunas Compactas e Centralizadas */
  .dash-stats-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    margin-bottom: 22px !important;
  }

  .dash-stat-card {
    flex-direction: column !important;
    text-align: center !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 12px 6px !important;
    border-radius: 12px !important;
    background: rgba(19, 29, 46, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    gap: 6px !important;
  }

  .dash-stat-icon {
    width: 32px !important;
    height: 32px !important;
    font-size: 15px !important;
    border-radius: 8px !important;
    margin: 0 auto !important;
  }

  .dash-stat-number {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #f8fafc !important;
    line-height: 1 !important;
  }

  .dash-stat-label {
    font-size: 9.5px !important;
    font-weight: 600 !important;
    color: #94a3b8 !important;
    text-align: center !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
  }

  /* Seção de Projetos */
  .dash-projects-section {
    border-radius: 16px !important;
    padding: 18px 14px !important;
    background: #111a28 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  .dash-section-header {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 8px !important;
    padding-bottom: 14px !important;
    margin-bottom: 16px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  .dash-section-header-titles {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }

  .dash-section-header h2 {
    font-size: 17px !important;
    font-weight: 700 !important;
    text-align: center !important;
    color: #f8fafc !important;
    margin: 0 !important;
  }

  .dash-cloud-badge {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #38bdf8 !important;
    background: rgba(56, 189, 248, 0.12) !important;
    border: 1px solid rgba(56, 189, 248, 0.25) !important;
    border-radius: 20px !important;
    padding: 4px 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
  }

  /* Grid de Cards de Projetos */
  .dash-projects-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .dash-project-card {
    border-radius: 14px !important;
    padding: 16px !important;
    background: #162235 !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .dash-card-title {
    font-size: 15.5px !important;
    font-weight: 700 !important;
    color: #f8fafc !important;
    margin: 2px 0 8px 0 !important;
    text-align: left !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    line-height: 1.35 !important;
  }

  .dash-card-client-info {
    background: rgba(0, 0, 0, 0.22) !important;
    border: 1px solid rgba(255, 255, 255, 0.04) !important;
    border-radius: 8px !important;
    padding: 8px 10px !important;
    font-size: 12.5px !important;
    margin-bottom: 10px !important;
    text-align: left !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .dash-card-metrics {
    background: rgba(0, 0, 0, 0.18) !important;
    border-radius: 8px !important;
    padding: 8px 10px !important;
    margin-bottom: 12px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    font-size: 11px !important;
    border-top: none !important;
    border-bottom: none !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
  }

  .dash-card-metrics .metric-item {
    font-size: 11px !important;
    padding: 4px 7px !important;
    white-space: nowrap !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .dash-card-audit-footer {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: 11px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  .dash-card-audit-footer .audit-author-tag,
  .dash-card-audit-footer .audit-approver-tag {
    word-break: break-word !important;
  }

  /* Botões de Ação padrão (sem nesting) no mobile */
  .dash-card-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr 44px !important;
    grid-template-areas: none !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    align-items: center !important;
  }

  /* Botões de Ação com Nesting no mobile: Sempre 2 linhas empilhadas */
  .dash-card-actions.dash-card-actions-with-nesting,
  .dash-card-actions-with-nesting {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .dash-actions-row-top {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .dash-actions-row-bottom {
    display: grid !important;
    grid-template-columns: 1fr 44px !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .dash-card-actions .btn-card-action {
    height: 42px !important;
    min-height: 42px !important;
    border-radius: 9px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 8px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .dash-card-actions .btn-card-action span {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .dash-card-actions .btn-card-action.btn-delete-project {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
  }

  @media (max-width: 400px) {
    .dash-card-actions {
      grid-template-columns: 1fr 1fr 40px !important;
      gap: 6px !important;
    }
    .dash-actions-row-top {
      gap: 6px !important;
    }
    .dash-actions-row-bottom {
      grid-template-columns: 1fr 40px !important;
      gap: 6px !important;
    }
    .dash-card-actions .btn-card-action {
      font-size: 11px !important;
      padding: 4px 6px !important;
      gap: 4px !important;
    }
    .dash-card-actions .btn-card-action.btn-delete-project {
      width: 40px !important;
      min-width: 40px !important;
      max-width: 40px !important;
    }
  }

  /* Ações nos cards de clientes no mobile */
  .dash-client-actions {
    display: grid !important;
    grid-template-columns: 1fr 44px 44px !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .dash-client-actions .btn-new-proj-client {
    height: 46px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
  }

  .dash-client-actions .btn-edit-client,
  .dash-client-actions .btn-delete-client {
    height: 46px !important;
    width: 44px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Estado Vazio no Mobile */
  .dash-empty {
    text-align: center !important;
    padding: 36px 14px !important;
  }
  .dash-empty h3 {
    font-size: 17px !important;
    font-weight: 700 !important;
    text-align: center !important;
    color: #ffffff !important;
  }
  .dash-empty p {
    font-size: 13px !important;
    color: #94a3b8 !important;
    text-align: center !important;
    max-width: 280px !important;
    margin: 0 auto 16px auto !important;
    line-height: 1.45 !important;
  }

  /* Toolbar de Clientes & Botão Novo Cliente no Mobile */
  .dash-clients-toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  .dash-clients-search-box {
    max-width: 100% !important;
    min-width: 100% !important;
    width: 100% !important;
  }

  .btn-add-client,
  #btnDashboardNewClient {
    width: 100% !important;
    min-height: 48px !important;
    font-size: 15px !important;
    justify-content: center !important;
  }

  /* Wizard no Mobile */
  .wizard-container {
    max-width: 100vw !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }

  .wizard-header {
    padding: 14px 16px !important;
  }

  .wizard-stepper {
    padding: 8px 12px !important;
    justify-content: space-between !important;
    gap: 4px !important;
  }
  .wizard-step-indicator {
    gap: 5px !important;
    font-size: 11px !important;
  }
  .wizard-step-indicator .step-num {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    font-size: 11px !important;
  }
  .wizard-step-divider {
    max-width: 20px !important;
    margin: 0 2px !important;
  }
  .wizard-quick-banner {
    padding: 14px 14px !important;
    gap: 10px !important;
  }
  .quick-banner-title {
    font-size: 13.5px !important;
  }
  .quick-banner-desc {
    font-size: 11.5px !important;
  }
  .btn-quick-wizard {
    width: 100% !important;
    padding: 10px 14px !important;
    font-size: 12.5px !important;
  }

  .wizard-section-heading {
    font-size: 16px !important;
  }

  .wizard-form-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .wizard-type-grid,
  #wizardStep1 .wizard-type-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  .wizard-type-card {
    padding: 10px 8px !important;
  }

  .wizard-type-card .type-icon {
    height: 92px !important;
    padding: 3px !important;
    margin-bottom: 6px !important;
  }

  .wizard-type-card .type-name {
    font-size: 13px !important;
  }

  .wizard-type-card .type-desc {
    font-size: 10.5px !important;
    line-height: 1.25 !important;
  }

  .wizard-quota-module {
    padding: 16px 12px !important;
  }

  .quota-header {
    margin-bottom: 12px !important;
  }

  .quota-title {
    font-size: 15px !important;
  }

  .quota-desc {
    font-size: 11.5px !important;
    line-height: 1.35 !important;
  }

  .quota-stepper-wrap {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 5px !important;
    width: 100% !important;
    padding: 4px 6px !important;
    box-sizing: border-box !important;
  }

  .quota-step-btn {
    flex: 0 0 38px !important;
    min-width: 38px !important;
    height: 42px !important;
    padding: 0 !important;
    font-size: 11.5px !important;
    border-radius: 8px !important;
  }

  .quota-input-frame {
    flex: 1 1 auto !important;
    max-width: 140px !important;
    height: 42px !important;
    padding: 0 8px !important;
    justify-content: center !important;
    border-radius: 8px !important;
  }

  .quota-laser-input {
    font-size: 22px !important;
    width: 75px !important;
    height: 38px !important;
    line-height: 38px !important;
    text-align: center !important;
  }

  .quota-unit-tag {
    font-size: 12px !important;
  }

  /* RÉGUA TÉCNICA AREJADA NO MOBILE */
  .quota-ruler-display {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 4px !important;
    margin: 14px 0 12px 0 !important;
    width: 100% !important;
  }

  .ruler-station {
    flex: 0 0 74px !important;
  }

  .station-tag {
    font-size: 8px !important;
  }

  .station-val {
    font-size: 11.5px !important;
  }

  .ruler-span {
    padding: 0 2px !important;
    gap: 4px !important;
  }

  .ruler-center-badge {
    font-size: 10.5px !important;
    padding: 3px 6px !important;
  }

  .quota-lock-pill {
    font-size: 10px !important;
    padding: 5px 8px !important;
    line-height: 1.3 !important;
  }

  .wizard-metrics-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .wizard-actions {
    margin-top: 18px !important;
    padding-top: 14px !important;
    gap: 10px !important;
  }

  /* Posicionamento do FAB 2D no Mobile acima da Bottom Bar */
  .plan-floating-container {
    bottom: calc(72px + var(--safe-b, 0px)) !important;
    left: 12px !important;
  }

  .viewport-area:fullscreen .plan-floating-container,
  .viewport-area.is-fullscreen-fallback .plan-floating-container {
    bottom: 20px !important;
    left: 16px !important;
  }

  .plan-tools-popover {
    bottom: calc(100% + 8px) !important;
    left: 0 !important;
    width: 290px !important;
    max-width: calc(100vw - 24px) !important;
  }

  /* MOBILE ADAPTATION: CONTROLES DE DIREÇÃO (DESTRO/SINISTRO) */
  .wizard-direction-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .direction-segmented-control {
    flex-direction: row !important;
  }

  .direction-seg-btn {
    min-height: 42px !important;
    font-size: 12px !important;
    padding: 6px 8px !important;
  }
}

/* ==========================================================================
   VERSO DI SVOLTA (LADO DESTRO / SINISTRO) - SIDEBAR & WIZARD
   ========================================================================== */

/* 1. PAINEL LATERAL (SIDEBAR) */
.form-group-direction {
  margin: 12px 0 16px 0 !important;
  display: flex;
  flex-direction: column !important;
  gap: 8px !important;
  background: rgba(15, 23, 42, 0.65) !important;
  border: 1px solid rgba(56, 189, 248, 0.25) !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  position: relative !important;
}

.direction-field-label {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  margin: 0 0 2px 0 !important;
  padding: 0 !important;
  position: static !important;
  transform: none !important;
  cursor: default;
}

.direction-field-label span,
.direction-label-text,
.direction-current-badge {
  position: static !important;
  transform: none !important;
  pointer-events: auto !important;
}

.direction-label-text {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: #cbd5e1 !important;
  letter-spacing: 0.2px;
}

.direction-current-badge {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px;
  color: #38bdf8 !important;
  background: rgba(56, 189, 248, 0.12) !important;
  border: 1px solid rgba(56, 189, 248, 0.3) !important;
  padding: 2px 7px !important;
  border-radius: 5px !important;
  text-transform: uppercase;
}

.direction-segmented-control {
  display: flex !important;
  flex-direction: row !important;
  gap: 6px !important;
  background: #090e17 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  padding: 4px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  position: relative !important;
}

.direction-seg-btn {
  flex: 1 1 50% !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  padding: 8px 10px !important;
  min-height: 40px !important;
  color: #94a3b8 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  user-select: none !important;
  box-sizing: border-box !important;
  position: relative !important;
}

.direction-seg-btn span {
  position: static !important;
  transform: none !important;
  pointer-events: none !important;
}

.direction-seg-btn:hover:not(.is-active) {
  color: #f1f5f9 !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

.direction-seg-btn.is-active {
  background: linear-gradient(135deg, #0284c7, #0369a1) !important;
  border-color: rgba(56, 189, 248, 0.5) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 10px rgba(2, 132, 199, 0.45) !important;
}

.direction-seg-btn .dir-icon {
  font-size: 16px !important;
  line-height: 1 !important;
}

.direction-seg-btn .dir-text {
  font-size: 12.5px !important;
  white-space: nowrap !important;
}

/* 2. SETUP WIZARD DIRECTION MODULE */
.wizard-direction-module {
  margin-bottom: 22px;
  background: rgba(14, 23, 40, 0.65);
  border: 1px solid rgba(56, 189, 248, 0.22);
  border-radius: 14px;
  padding: 16px 18px;
  transition: all 0.25s ease;
}

.wizard-direction-header {
  text-align: center;
  margin-bottom: 14px;
}

.wizard-direction-eyebrow {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.1px;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.25);
  padding: 2px 10px;
  border-radius: 999px;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.wizard-direction-title {
  font-size: 15px;
  font-weight: 700;
  color: #f8fafc;
  margin: 0;
  line-height: 1.3;
}

.wizard-direction-desc {
  font-size: 11.5px;
  color: #94a3b8;
  margin: 4px 0 0 0;
}

.wizard-direction-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.wizard-direction-card {
  position: relative;
  background: #141f30;
  border: 2px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 14px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.wizard-direction-card:hover {
  border-color: rgba(56, 189, 248, 0.4);
  transform: translateY(-2px);
  background: #18263c;
}

.wizard-direction-card.is-selected {
  border-color: #0284c7;
  background: rgba(2, 132, 199, 0.16);
  box-shadow: 0 0 16px rgba(2, 132, 199, 0.3);
}

.direction-card-badge {
  position: absolute;
  top: -8px;
  left: 12px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.6px;
  color: #38bdf8;
  background: #0c1829;
  border: 1px solid rgba(56, 189, 248, 0.4);
  padding: 1px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}

.direction-card-badge.speculare {
  color: #a78bfa;
  border-color: rgba(167, 139, 250, 0.4);
}

.direction-card-icon-wrap {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(2, 132, 199, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wizard-direction-card.is-selected .direction-card-icon-wrap {
  background: #0284c7;
  border-color: #38bdf8;
  box-shadow: 0 2px 10px rgba(2, 132, 199, 0.5);
}

.direction-card-icon {
  font-size: 22px;
  line-height: 1;
  color: #f8fafc;
}

.direction-card-content {
  flex: 1;
  min-width: 0;
}

.direction-card-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #f8fafc;
  line-height: 1.25;
}

.direction-card-sub {
  font-size: 10.5px;
  color: #94a3b8;
  margin-top: 2px;
  line-height: 1.3;
}

.direction-card-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: transparent;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.wizard-direction-card.is-selected .direction-card-check {
  background: #0284c7;
  border-color: #38bdf8;
  color: #ffffff;
}


/* ==========================================================================
   WIZARD MULTI-STEP (2026-10-10) — jornada em 7 passos, palco e chips
   A estrutura vem do plano docs/plano-wizard-multi-step-ux.md: formulario na
   coluna da esquerda, palco tecnico sticky na direita, faixa de chips e barra
   de acoes no pe do modal (o corpo rola, a barra nao).
   ========================================================================== */

/* O modal alarga para caber as duas colunas (o antigo era 780 px). */
.wizard-container {
  max-width: 1180px !important;
}

/* Passos: quem manda no visivel e' o JS; nada de display inline. */
.wizard-step-content {
  display: block;
}
.wizard-step-content[hidden] {
  display: none !important;
}
.wizard-step-desc {
  margin: 6px 0 0 0 !important;
  font-size: 12.5px !important;
  color: #94a3b8;
  text-align: center;
}

/* Duas colunas: formulario (flexivel) + palco tecnico (sticky). */
.wizard-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 430px;
  gap: 22px;
  align-items: start;
}
.wizard-col-form {
  min-width: 0;
}
.wizard-col-preview {
  position: sticky;
  top: 0;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: rgba(2, 6, 23, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 12px;
  padding: 12px;
}
.wizard-stage-head {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.wizard-stage-title {
  font-size: 13px;
  font-weight: 800;
  color: #e2e8f0;
}
.wizard-stage-sub {
  font-size: 11.5px;
  color: #94a3b8;
}
.wizard-stage-toggle {
  display: none;
  min-height: 28px;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid rgba(56, 189, 248, 0.35);
  background: rgba(2, 132, 199, 0.12);
  color: #7dd3fc;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
}
.wizard-stage-tabs {
  display: flex;
  gap: 6px;
}
.wizard-stage-tab {
  flex: 1;
  min-height: 30px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: rgba(15, 23, 42, 0.6);
  color: #cbd5e1;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.wizard-stage-tab:hover {
  border-color: rgba(56, 189, 248, 0.45);
}
.wizard-stage-tab.is-active {
  background: linear-gradient(135deg, #0284c7, #0369a1);
  border-color: #38bdf8;
  color: #ffffff;
}
.wizard-stage-canvas {
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 10px;
  overflow: hidden;
  padding: 6px;
}
.wizard-stage-canvas svg {
  max-width: 100%;
  height: auto;
}
.wizard-stage-avisos {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.wizard-stage-aviso {
  font-size: 11.5px;
  color: #fecaca;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: 8px;
  padding: 6px 8px;
}
.wizard-stage-legend {
  font-size: 11px;
  color: #94a3b8;
  text-align: center;
}
.wz-vazio {
  font-size: 12px;
  color: #94a3b8;
  text-align: center;
  padding: 12px;
}

/* A barra compacta de tipologia nao aparece no Passo 1 (o grid ja' esta' aberto). */
#wizardStep1 .typology-compact-card {
  display: none;
}
#wizardStep1 .wizard-type-grid {
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
}
.wizard-variant-block[hidden] {
  display: none !important;
}

/* Stepper clicavel (botoes): reset do botao + estados. */
.wizard-step-indicator {
  border: 0;
  background: transparent;
  padding: 2px 4px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
}
.wizard-step-indicator:hover {
  background: rgba(148, 163, 184, 0.12);
}
.wizard-step-indicator[hidden] {
  display: none !important;
}
.wizard-step-divider[hidden] {
  display: none !important;
}

/* Chip de tipologia no cabecalho (volta ao Passo 1). */
.wizard-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.wizard-type-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(56, 189, 248, 0.35);
  background: rgba(2, 132, 199, 0.12);
  color: #e2e8f0;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.wizard-type-chip:hover {
  border-color: #38bdf8;
}
.wizard-type-chip-action {
  font-weight: 600;
  color: #7dd3fc;
  font-size: 11px;
}

/* Faixa de chips: um numero por grandeza, clicavel para o passo dono. */
.wizard-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 24px 0 24px;
  background: #0d1522;
}
.wizard-chips[hidden] {
  display: none !important;
}
.wizard-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: rgba(15, 23, 42, 0.7);
  color: #e2e8f0;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: border-color 0.2s, background-color 0.2s, transform 0.1s;
}
.wizard-chip:hover {
  border-color: rgba(56, 189, 248, 0.5);
  background: rgba(15, 23, 42, 0.85);
}
.wizard-chip:active {
  transform: scale(0.97);
}
.wizard-chip-label {
  color: #94a3b8;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.wizard-chip-value {
  font-weight: 700;
  white-space: nowrap;
}
.wizard-chip.is-ok {
  border-color: rgba(34, 197, 94, 0.45);
}
.wizard-chip.is-ok .wizard-chip-value {
  color: #86efac;
}
.wizard-chip.is-warn {
  border-color: rgba(245, 158, 11, 0.5);
}
.wizard-chip.is-warn .wizard-chip-value {
  color: #fcd34d;
}

/* Barra de acoes no pe do modal (o corpo rola, a barra nao). */
.wizard-actions {
  margin-top: 0 !important;
  padding: 12px 24px 14px 24px !important;
  background: #0d1522;
}
.wizard-actions-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.wizard-step-counter {
  font-size: 12px;
  color: #94a3b8;
  font-weight: 700;
  min-width: 44px;
  text-align: center;
}
.btn-primary-wizard:disabled,
.btn-secondary-wizard:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.btn-primary-wizard[hidden],
.btn-finish-wizard[hidden] {
  display: none !important;
}
.btn-secondary-wizard {
  background: rgba(148, 163, 184, 0.12);
  color: #e2e8f0;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 10px;
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 700;
  min-height: 48px;
  cursor: pointer;
}
.btn-secondary-wizard:hover:not(:disabled) {
  border-color: #38bdf8;
}

/* ==========================================================================
   PRESET DE ESPESSURA INDUSTRIAL & GAVETA DE PERSONALIZAÇÃO (Passo 4)
   ========================================================================== */
.wizard-stone-preset-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.08), rgba(2, 6, 23, 0.4));
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 12px;
}
.stone-preset-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.stone-preset-icon {
  font-size: 24px;
  line-height: 1;
}
.stone-preset-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.stone-preset-tag {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #38bdf8;
}
.stone-preset-title {
  font-size: 14.5px;
  font-weight: 700;
  color: #f8fafc;
}
.stone-preset-sub {
  font-size: 12px;
  color: #94a3b8;
}
.stone-preset-badge {
  font-size: 11.5px;
  font-weight: 700;
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}

.wizard-stone-details-box {
  background: rgba(15, 23, 42, 0.45);
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 10px;
  margin-bottom: 16px;
  overflow: hidden;
  transition: all 0.2s ease;
}
.wizard-stone-details-box[open] {
  border-color: rgba(56, 189, 248, 0.35);
  background: rgba(15, 23, 42, 0.7);
}
.wizard-stone-details-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: #cbd5e1;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.wizard-stone-details-summary::-webkit-details-marker {
  display: none;
}
.wizard-stone-details-summary:hover {
  color: #38bdf8;
}
.wizard-stone-details-arrow {
  font-size: 14px;
  transition: transform 0.2s ease;
}
.wizard-stone-details-box[open] .wizard-stone-details-arrow {
  transform: rotate(180deg);
}
.wizard-stone-details-content {
  padding: 12px 14px 14px 14px;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
}

/* Coluna estreita (apenas celulares < 768px): uma coluna e o palco vira dock compacto.
   Em Tablets (>= 768px) o layout permanece em DUAS COLUNAS para visualização em tempo real. */
@media (max-width: 767px) {
  .wizard-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }
  .wizard-col-preview {
    position: static !important;
    /* MOBILE: o palco fica ABAIXO dos campos. Quem preenche medida quer o
       formulario no polegar; a miniatura e' conferencia, nao ponto de partida. */
    order: 2 !important;
    padding: 10px;
  }
  .wizard-stage-toggle {
    display: inline-flex;
    align-items: center;
  }
  .wizard-col-preview.is-collapsed .wizard-stage-tabs,
  .wizard-col-preview.is-collapsed .wizard-stage-canvas,
  .wizard-col-preview.is-collapsed .wizard-stage-legend {
    display: none;
  }
  .wizard-stage-canvas {
    min-height: 0;
    max-height: 240px;
  }
  .wizard-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 8px 16px 8px 16px;
    gap: 8px;
    align-items: center;
  }
  .wizard-chips::-webkit-scrollbar {
    display: none;
  }
  .wizard-actions {
    padding: 10px 16px 12px 16px !important;
  }
  .wizard-type-chip-action {
    display: none;
  }
}

/* ==========================================================================
   WIZARD MULTI-STEP — MICROINTERACOES (fase 3)
   Foco visivel nos cards, transicao curta de passo, estados de erro/aviso e o
   "pulso" discreto do palco a cada recalculo. Tudo desligado em
   prefers-reduced-motion.
   ========================================================================== */

.wizard-type-card:focus-visible,
.wizard-direction-card:focus-visible {
  outline: 2px solid #38bdf8;
  outline-offset: 2px;
}
.wizard-type-card:active,
.wizard-direction-card:active {
  transform: scale(0.98);
}
.wizard-type-card,
.wizard-direction-card {
  transition: border-color 0.16s ease, transform 0.16s ease, background 0.16s ease;
}

/* O passo entra com um deslocamento curto (direcao do movimento). */
.wizard-step-content:focus {
  outline: none;
}
.wizard-step-content.is-entering {
  animation: wizardPassoEntra 180ms ease-out;
}
@keyframes wizardPassoEntra {
  from {
    opacity: 0;
    transform: translateX(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* O palco pulsa 1 px quando o plano e' recalculado (sem spinner). */
.wizard-col-preview.is-updating {
  animation: wizardPalcoPulsa 400ms ease-out;
}
@keyframes wizardPalcoPulsa {
  0% {
    border-color: rgba(56, 189, 248, 0.9);
    box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.35);
  }
  100% {
    border-color: rgba(148, 163, 184, 0.18);
    box-shadow: none;
  }
}

/* Validacao viva: erro duro (vermelho) e aviso de norma (ambar). */
.form-control-wizard.is-invalid {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.35) !important;
}
.form-control-wizard.is-warn {
  border-color: #f59e0b !important;
}
.wizard-field-error {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  font-weight: 700;
  color: #fca5a5;
}

@media (prefers-reduced-motion: reduce) {
  .wizard-step-content.is-entering,
  .wizard-col-preview.is-updating {
    animation: none;
  }
  .wizard-type-card:active,
  .wizard-direction-card:active {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wizard-step-content.is-entering,
  .wizard-col-preview.is-updating {
    animation: none;
  }
  .wizard-type-card:active,
  .wizard-direction-card:active {
    transform: none;
  }
}

/* ==========================================================================
   WIZARD MULTI-STEP — MOBILE FIRST / TABLET (2026-10-10)
   O alvo principal e' TABLET e telefone: uma coluna, folha de tela cheia,
   palco tecnico recolhido com resumo no cabecalho (a informacao nao se perde),
   alvo de toque >= 44 px e campos com 16 px — abaixo disso o iOS da zoom no
   foco. O desktop (>= 1024 px) continua com as duas colunas da fase 2.
   ========================================================================== */

/* Resumo do palco: e' a leitura dos chips no cabecalho da miniatura recolhida. */
.wizard-stage-summary {
  display: none;
}

/* ==========================================================================
   PASSO 4 (GRADINO) — ALINHAMENTO DA GRADE (2026-10-10)
   O aceite mostrou o campo-base estreito na metade da linha, o par
   switch/campo fora da trilha do vizinho e a coluna do palco espremendo o
   formulario. Aqui a grade vira 2 colunas DECLARADAS, o campo-base (a pedata,
   que governa o resto) ocupa a linha inteira e a linha do switch para de
   esticar: status curto nao e' campo.
   ========================================================================== */
.wizard-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
  align-items: start;
}

.wizard-form-grid[hidden],
.wizard-form-grid[style*="display: none"],
.wizard-form-grid.u-hidden,
.form-group-wizard[hidden],
.form-group-wizard[style*="display: none"],
.form-group-wizard.u-hidden {
  display: none !important;
}

@media (max-width: 580px) {
  .wizard-form-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   STEPPER TÁTIL PROFISSIONAL (+ / -) COM ACCELERATION NO LONG-PRESS
   Permite toques rápidos ou pressão contínua suave sem setinhas nativas.
   ========================================================================== */
.wizard-stepper-wrap {
  display: flex !important;
  align-items: stretch !important;
  width: 100% !important;
  background: #162235;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  overflow: hidden;
  min-height: 44px;
  box-sizing: border-box;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.wizard-stepper-wrap:focus-within {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.25) !important;
}

.btn-stepper-action {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  min-width: 44px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: #cbd5e1 !important;
  border: none !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  touch-action: manipulation !important;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
  padding: 0 !important;
  margin: 0 !important;
}

.btn-stepper-action:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}

.btn-stepper-action:active {
  background: rgba(14, 165, 233, 0.35) !important;
  color: #38bdf8 !important;
  transform: scale(0.94);
}

.btn-stepper-minus {
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.btn-stepper-plus {
  border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.wizard-stepper-wrap .wizard-stepper-input {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: center !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #f8fafc !important;
  padding: 8px 10px !important;
  min-height: 42px !important;
}

.wizard-stepper-wrap .wizard-stepper-input:focus {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Desativa setas nativas spin-button */
.wizard-stepper-input::-webkit-outer-spin-button,
.wizard-stepper-input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

.wizard-stepper-input[type="number"] {
  -moz-appearance: textfield !important;
}

/* ==========================================================================
   PAR DEGRAU & SPORGENZA (PERFEITO ALINHAMENTO LADO A LADO)
   Garante simetria absoluta: Pisada Útil (esq) e Sporgenza Toro (dir)
   possuem as mesmas alturas de label, mesma altura de input e mesmas notas.
   ========================================================================== */
.wizard-tread-nosing-row {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: start !important;
  margin-bottom: 16px !important;
}

@media (max-width: 580px) {
  .wizard-tread-nosing-row {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }
}

.wizard-label-flex {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  min-height: 26px !important;
  margin-bottom: 6px !important;
  gap: 8px !important;
}

.wizard-label-flex label {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #cbd5e1 !important;
  line-height: 1.2 !important;
}

.wizard-micro-tag {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #38bdf8 !important;
  background: rgba(56, 189, 248, 0.12) !important;
  border: 1px solid rgba(56, 189, 248, 0.25) !important;
  border-radius: 4px !important;
  padding: 2px 7px !important;
  white-space: nowrap !important;
  letter-spacing: 0.2px !important;
}

/* Switch compacto integrado ao label */
.wizard-label-flex .wizard-switch-line {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  width: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
}

.wizard-label-flex .wizard-switch-line input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 36px !important;
  height: 20px !important;
  min-height: 20px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(148, 163, 184, 0.45) !important;
  background: rgba(15, 23, 42, 0.9) !important;
  position: relative !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.wizard-label-flex .wizard-switch-line input[type="checkbox"]::after {
  content: "" !important;
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  background: #94a3b8 !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease !important;
}

.wizard-label-flex .wizard-switch-line input[type="checkbox"]:checked {
  background: #0284c7 !important;
  border-color: #38bdf8 !important;
}

.wizard-label-flex .wizard-switch-line input[type="checkbox"]:checked::after {
  transform: translateX(16px) !important;
  background: #ffffff !important;
}

.wizard-label-flex .wizard-switch-line > span {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #94a3b8 !important;
  white-space: nowrap !important;
}

/* Input com unidade fixa à direita */
.wizard-input-unit-wrap {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  transition: opacity 0.2s ease, filter 0.2s ease !important;
}

.wizard-input-unit-wrap input {
  width: 100% !important;
  height: 46px !important;
  min-height: 46px !important;
  padding: 10px 42px 10px 14px !important;
  background: #162235 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  color: #f8fafc !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  box-sizing: border-box !important;
  outline: none !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
}

.wizard-input-unit-wrap input:focus {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.25) !important;
}

.wizard-input-unit {
  position: absolute !important;
  right: 14px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #64748b !important;
  pointer-events: none !important;
  user-select: none !important;
}

/* Quando desativado: não quebra a grade deixando buraco vazio; mantém o campo com aparência inativa */
.wizard-input-unit-wrap.is-disabled {
  opacity: 0.42 !important;
  pointer-events: none !important;
  filter: grayscale(0.8) !important;
}

/* Nota de campo com altura minima: os rotulos vizinhos alinham na mesma linha
   mesmo quando so' um dos dois campos tem nota. */
.wizard-step-content .wizard-field-note {
  display: block;
  min-height: 16px;
  font-size: 11.5px;
  color: #94a3b8;
  margin-top: 5px;
  line-height: 1.35;
}

/* No tablet (>= 768px) e desktop: formulário à esquerda + palco técnico à direita lado a lado (Split-View em tempo real) */
@media (min-width: 768px) {
  .wizard-layout {
    grid-template-columns: minmax(0, 1.15fr) clamp(280px, 36vw, 420px) !important;
    gap: 18px !important;
  }
  .wizard-col-preview {
    position: sticky !important;
    top: 0 !important;
    order: 2 !important;
    align-self: start !important;
  }
}

/* Quota Guida: os botoes de passo e o campo do dislivello tem 44 px em
   QUALQUER largura — e' o controle mais usado do wizard, no dedo e no mouse. */
.quota-step-btn {
  min-height: 44px !important;
}
.quota-laser-input {
  min-height: 44px !important;
}

@media (max-width: 1023px) {
  /* Folha de tela cheia: o corpo rola, o cabecalho e a barra de acoes nao. */
  #modalSetupWizard.modal-overlay {
    align-items: stretch !important;
    padding: 0 !important;
  }
  .wizard-container {
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }
  .wizard-header {
    padding: 10px 14px !important;
  }
  .wizard-body {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 6px 0 12px 0 !important;
  }
  .wizard-step-content {
    padding: 0 14px !important;
  }

  /* Palco recolhido: cabecalho em duas linhas com a leitura das grandezas. */
  .wizard-col-preview {
    padding: 10px 12px;
  }
  .wizard-col-preview.is-collapsed .wizard-stage-head {
    flex-wrap: wrap;
    align-items: center;
  }
  .wizard-stage-summary {
    display: block;
    flex: 1 1 100%;
    order: 3;
    font-size: 12.5px;
    font-weight: 700;
    color: #cbd5e1;
    font-variant-numeric: tabular-nums;
  }
  .wizard-col-preview.is-collapsed .wizard-stage-sub {
    display: none;
  }

  /* Alvo de toque e fonte: ver o bloco ERGONOMIA DE TOQUE abaixo (vale tambem
     para `pointer: coarse`, que e' o caso de um tablet de 1024 px). */

  /* Stepper: rola na horizontal em vez de espremer sete passos. */
  .wizard-stepper {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding: 8px 14px !important;
  }
  .wizard-stepper::-webkit-scrollbar {
    display: none;
  }
  .wizard-step-indicator {
    scroll-snap-align: center;
    min-width: 44px;
    padding: 4px 8px;
  }
  .wizard-step-divider {
    flex: 0 0 10px;
    min-width: 10px;
  }

  /* Barra de acoes: respeita a area segura do tablet/telefone. */
  .wizard-actions {
    padding: 10px 14px calc(12px + env(safe-area-inset-bottom)) 14px !important;
  }
  .wizard-actions .btn-secondary-wizard,
  .wizard-actions .btn-primary-wizard,
  .wizard-actions .btn-finish-wizard {
    padding: 12px 16px;
    font-size: 14.5px;
  }
}

/* --------------------------------------------------------------------------
   ERGONOMIA DE TOQUE: vale para tela estreita E para qualquer apontador
   grosso (`pointer: coarse`) — um iPad de 1024 px em paisagem nao e' desktop.
   -------------------------------------------------------------------------- */
@media (max-width: 1023px), (pointer: coarse) {
  /* Alvo de toque: 44 px e' o minimo de dedo (Apple/Google), sem excecao. */
  .quota-step-btn,
  .wizard-stage-tab,
  .wizard-stage-toggle,
  .wizard-type-chip,
  .direction-seg-btn,
  .wizard-step-indicator,
  .wizard-actions button,
  .wizard-step-content input,
  .wizard-step-content select {
    min-height: 44px !important;
  }
  /* Chips no touch/mobile: proporcao visual elegante (34px) com hitbox de 44px para o dedo */
  .wizard-chip {
    position: relative;
    min-height: 34px !important;
    padding: 5px 12px;
    font-size: 12.5px;
    align-items: center;
    flex-shrink: 0;
    white-space: nowrap;
  }
  .wizard-chip::before {
    content: "";
    position: absolute;
    top: -5px;
    bottom: -5px;
    left: 0;
    right: 0;
  }
  .wizard-stage-tab {
    font-size: 13px;
  }
  .quota-step-btn {
    min-width: 44px;
  }

  /* Switch do toro: a linha do rotulo inteira carrega o alvo de 44 px (o
     desenho do switch esta' no bloco global, fora daqui). */
  .wizard-switch-line {
    min-height: 44px;
    align-items: center;
  }

  /* 16 px evita o zoom automatico do iOS ao focar um campo. */
  .wizard-step-content input,
  .wizard-step-content select,
  .wizard-step-content textarea {
    font-size: 16px !important;
  }
}

/* Telefone: o stepper fica so' com o numero (o rotulo do passo atual sobrevive)
   e o botao de avancar ocupa a largura que sobra. */
@media (max-width: 620px) {
  /* Cabecalho: o titulo quebrava em tres linhas com o chip de tipologia ao lado.
     Aqui ele encolhe e o chip fica compacto, mantendo a mesma linha. */
  .wizard-header .wizard-header-title h3 {
    font-size: 15px !important;
    line-height: 1.25;
  }
  .wizard-header .wizard-header-title p {
    font-size: 11.5px !important;
    line-height: 1.3;
  }
  .wizard-type-chip {
    font-size: 11.5px !important;
    padding: 4px 8px;
  }
  .wizard-type-chip-action {
    display: none;
  }
  .wizard-chips::after {
    content: "";
    flex: 0 0 8px;
    height: 1px;
  }
  .wizard-step-indicator .step-label {
    display: none;
  }
  .wizard-step-indicator.is-active .step-label {
    display: inline;
    margin-left: 6px;
  }
  .wizard-actions-right {
    flex: 1 1 auto;
    justify-content: flex-end;
    gap: 8px;
  }
  .wizard-actions #btnWizardNext,
  .wizard-actions #btnWizardFinish {
    flex: 1 1 auto;
    justify-content: center;
  }
  .wizard-step-counter {
    min-width: 38px;
    font-size: 11.5px;
  }
  .wizard-actions .btn-secondary-wizard {
    padding: 12px 12px;
  }
}

/* Tablet em paisagem com teclado virtual aberto: pouca altura exige o palco
   fora do caminho (a miniatura vem por cima, nao empurra o formulario). */
@media (max-width: 1023px) and (max-height: 620px) {
  .wizard-col-preview:not(.is-collapsed) .wizard-stage-canvas {
    max-height: 180px;
  }
}
/* ==========================================================================
   HIERARQUIA DE Z-INDEX: EDITOR DE COSTE/LAVORAZIONI ACIMA DO DASHBOARD EXECUTIVO
   ========================================================================== */
.modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 150000 !important;
}

#edgeEditorModal {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 200000 !important;
  background: rgba(0, 0, 0, 0.78) !important;
  backdrop-filter: blur(8px) !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ==========================================================================
   CATÁLOGO DE MATERIAIS, LAVORAZIONI & MAGAZZINO (materialCatalog.js)
   Mobile-first, 100% responsivo.
   ========================================================================== */
.mc-modal .mc-dialog {
  max-width: 1100px !important;
  width: 95vw !important;
  max-height: 92vh !important;
  height: 92vh !important;
  display: flex !important;
  flex-direction: column !important;
}

.mc-modal .mc-dialog .modal-header {
  flex-shrink: 0;
}

.mc-tabs {
  display: flex;
  gap: 6px;
  padding: 10px 16px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.mc-tab {
  background: var(--bg-surface-elevated);
  color: var(--text-muted);
  border: 1px solid var(--border-color);
  padding: 9px 16px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}

.mc-tab.is-active {
  background: var(--accent-gold);
  color: #14100a;
  border-color: var(--accent-gold);
}

.mc-body {
  padding: 16px;
  overflow-y: auto;
  flex: 1;
}

.mc-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-right: auto;
  align-self: center;
}

.mc-toast {
  position: sticky;
  top: -8px;
  z-index: 50;
  display: block;
  margin: -4px 0 12px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  background: rgba(16, 185, 129, 0.14);
  border: 1px solid var(--accent-emerald);
  color: var(--accent-emerald);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.mc-toast.show {
  opacity: 1;
}

.mc-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.mc-toolbar-foot {
  margin-top: 14px;
  justify-content: flex-end;
}

.mc-count {
  font-size: 13px;
  color: var(--text-muted);
}

.mc-new-btn {
  margin: 0;
  padding: 9px 16px;
  font-size: 13px;
}

.mc-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mc-empty {
  text-align: center;
  padding: 48px 20px;
  color: var(--text-muted);
}

.mc-empty-icon {
  font-size: 44px;
  display: block;
  margin-bottom: 12px;
}

.mc-empty p {
  margin: 0 0 16px;
  font-size: 14px;
}

.mc-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 14px;
}

.mc-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.mc-card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.mc-card-title strong {
  color: #fff;
  font-size: 15px;
  display: block;
}

.mc-card-title small {
  color: var(--text-muted);
  font-size: 12px;
  display: block;
}

.mc-color-chip {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
}

.mc-card-actions,
.mc-row-actions,
.mc-variant-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}

.mc-btn-icon,
.mc-btn-photo {
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  border-radius: 8px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 15px;
  transition: all 0.15s;
}

.mc-btn-icon:hover,
.mc-btn-photo:hover {
  border-color: var(--accent-gold);
  color: var(--accent-gold);
}

.mc-card-meta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-muted);
}

.mc-desc {
  margin: 8px 0 0;
  font-size: 13px;
  color: #b6c2d4;
  line-height: 1.45;
}

.mc-variant-list {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mc-variant {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
}

.mc-variant-info {
  flex: 1;
  min-width: 140px;
}

.mc-variant-info strong {
  color: #fff;
  font-size: 13px;
  display: block;
}

.mc-variant-info small {
  color: var(--text-muted);
  font-size: 12px;
  display: block;
  margin-top: 2px;
}

.mc-variant-empty {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
  padding: 4px 2px;
}

.mc-photos {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 4px;
}

.mc-photo {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  background: var(--bg-surface-elevated);
}

.mc-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mc-photo-del {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 11px;
  cursor: pointer;
  line-height: 1;
}

.mc-thumb-empty {
  font-size: 12px;
  color: var(--text-muted);
}

.mc-photo-texture {
  position: absolute;
  bottom: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 12px;
  cursor: pointer;
  line-height: 1;
}

.mc-photo-texture.active {
  background: var(--accent-gold, #c9a227);
  border-color: var(--accent-gold, #c9a227);
}

.mc-photo.is-texture {
  border: 2px solid var(--accent-gold, #c9a227);
}

.mc-photos-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  margin-top: 6px;
}

.mc-material-photos {
  margin-top: 10px;
  border-top: 1px dashed var(--border-color);
  padding-top: 10px;
}

.mc-subhead {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.mc-card-foot {
  margin-top: 12px;
}

.mc-btn-add {
  background: transparent;
  border: 1px dashed var(--border-color);
  color: var(--accent-gold);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  transition: all 0.15s;
}

.mc-btn-add:hover {
  border-color: var(--accent-gold);
  background: rgba(212, 175, 55, 0.06);
}

.mc-row {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.mc-row-info strong {
  color: #fff;
  font-size: 14px;
  display: block;
}

.mc-row-info small {
  color: var(--text-muted);
  font-size: 12px;
  display: block;
  margin-top: 2px;
}

.mc-form {
  max-width: 720px;
  margin: 0 auto;
}

.mc-form-title {
  color: var(--accent-gold);
  font-size: 15px;
  margin: 0 0 16px;
}

.mc-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.mc-span-2 {
  grid-column: span 2;
}

.mc-form .auth-group {
  margin-bottom: 0;
}

.mc-form .req {
  color: #f87171;
  margin-left: 2px;
}

.mc-fieldset {
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 14px 0 0;
}

.mc-fieldset legend {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  padding: 0 6px;
}

.mc-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border-color);
}

.mc-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
  flex-wrap: wrap;
}

.mc-filter select {
  background: var(--bg-surface-elevated);
  color: #fff;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  min-width: 180px;
}

.mc-matrix-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border-color);
  border-radius: 10px;
}

.mc-matrix {
  width: 100%;
  border-collapse: collapse;
  min-width: 520px;
}

.mc-matrix th {
  background: var(--bg-surface-elevated);
  padding: 10px 12px;
  color: var(--accent-gold);
  font-size: 12px;
  font-weight: 800;
  text-align: left;
  border-bottom: 2px solid var(--border-color);
  white-space: nowrap;
}

.mc-matrix td {
  padding: 6px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.mc-matrix input[type="number"] {
  width: 100%;
  min-width: 70px;
  background: var(--bg-card);
  color: #fff;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 7px 8px;
  font-size: 13px;
}

.mc-matrix input[type="number"]:focus {
  border-color: var(--accent-gold);
  outline: none;
}

.mc-lav-col {
  min-width: 160px;
}

.mc-lav-label {
  color: #dbe4f0;
  font-size: 13px;
  white-space: nowrap;
}

.mc-lav-label small {
  display: block;
  color: var(--text-muted);
  font-size: 11px;
}

/* ==========================================================================
   CARDS DE LAVORAZIONI & PRECIFICAÇÃO (MOBILE-FIRST)
   ========================================================================== */
.mc-matrix-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.mc-btn-save-top {
  margin: 0;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 700;
}

.mc-lav-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 960px) {
  .mc-lav-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

.mc-lav-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.mc-lav-card:hover {
  border-color: rgba(201, 162, 39, 0.4);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.mc-lav-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.mc-lav-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.mc-lav-icon-badge {
  font-size: 20px;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mc-lav-title-text {
  min-width: 0;
}

.mc-lav-name {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  display: block;
  line-height: 1.3;
}

.mc-lav-unit {
  color: var(--text-muted);
  font-size: 12px;
  display: block;
  margin-top: 2px;
}

.mc-lav-modules-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 4px;
}

.mc-lav-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.mc-lav-field-label {
  display: flex !important;
  position: static !important;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  color: #c9d1d9;
  min-width: 0;
  margin-bottom: 0 !important;
  transform: none !important;
}

.mc-lav-field-label span {
  position: static !important;
  top: auto !important;
  right: auto !important;
  transform: none !important;
  pointer-events: auto !important;
}

.mc-lav-mod-icon {
  font-size: 12px;
  flex-shrink: 0;
}

.mc-lav-mod-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
}

.mc-lav-unit-badge {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--accent-gold);
  background: rgba(201, 162, 39, 0.12);
  border: 1px solid rgba(201, 162, 39, 0.28);
  padding: 1px 4px;
  border-radius: 4px;
  margin-left: auto;
  flex-shrink: 0;
  letter-spacing: 0.01em;
}

.mc-lav-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.mc-currency-prefix {
  position: absolute;
  left: 9px;
  color: var(--accent-gold);
  font-size: 13px;
  font-weight: 700;
  pointer-events: none;
  z-index: 1;
}

.mc-lav-input-wrap input[type="number"] {
  width: 100%;
  background: var(--bg-card);
  color: #fff;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 9px 8px 9px 24px;
  font-size: 13px;
  font-weight: 600;
  min-height: 40px;
  transition: all 0.15s ease;
}

.mc-lav-input-wrap input[type="number"]:focus {
  border-color: var(--accent-gold);
  box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.2);
  outline: none;
}

.mc-matrix-sticky-footer {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.mc-btn-save-bottom {
  margin: 0;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 700;
}

@media (max-width: 600px) {
  .mc-body {
    padding: 12px;
  }

  .mc-form-grid {
    grid-template-columns: 1fr;
  }

  .mc-span-2 {
    grid-column: span 1;
  }

  .mc-modal .mc-dialog {
    width: 100vw !important;
    max-height: 100dvh !important;
    height: 100dvh !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }

  .mc-tabs {
    padding: 8px 10px;
  }

  .mc-tab {
    padding: 8px 12px;
    font-size: 12px;
    flex-shrink: 0;
  }

  .mc-lav-modules-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .mc-lav-field-label {
    font-size: 12px;
  }

  .mc-lav-unit-badge {
    font-size: 10.5px;
    padding: 2px 6px;
  }

  .mc-matrix-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .mc-matrix-toolbar .mc-filter {
    width: 100%;
  }

  .mc-matrix-toolbar .mc-filter select {
    width: 100%;
  }

  .mc-btn-save-top {
    width: 100%;
  }

  .mc-matrix-sticky-footer {
    position: sticky;
    bottom: -12px;
    z-index: 10;
    margin: 12px -12px -12px -12px;
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.65);
    background: var(--bg-surface-elevated);
    flex-direction: column;
    align-items: stretch;
  }

  .mc-matrix-sticky-footer .mc-hint {
    text-align: center;
    font-size: 11px;
    margin: 0;
  }

  .mc-btn-save-bottom {
    width: 100%;
    padding: 12px;
    font-size: 14px;
  }

  /* Otimização Mobile para Títulos e Contornos do Menu Lateral */
  .config-subcard {
    padding: 10px !important;
    border-width: 2px !important;
  }

  .config-subcard-title {
    font-size: 13px !important;
    letter-spacing: 0.02em !important;
  }

  .fieldset-partenza,
  .fieldset-arrivo {
    padding: 10px 8px 8px !important;
    border-width: 2.5px !important;
  }

  .fieldset-partenza legend,
  .fieldset-arrivo legend {
    font-size: 12.5px !important;
    padding: 2px 8px !important;
  }
}

/* ==========================================================================
   SPINNER TEMÁTICO INDUSTRIAL: SERRA CNC SOFI & CORTE EM MÁRMORE CARRARA
   ========================================================================== */

/* Overlay Global e Modal de Bloqueio com Glassmorphism */
.sf-global-loading-overlay,
.mc-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 15, 26, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.mc-loading-overlay {
  position: absolute;
  z-index: 1000;
  border-radius: inherit;
}

.sf-global-loading-overlay.is-active,
.mc-loading-overlay.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* Card central do Loader de Mármore */
.sf-marble-loader,
.mc-stair-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 44px 20px 22px;
  background: linear-gradient(145deg, rgba(24, 30, 44, 0.98), rgba(13, 17, 26, 0.99));
  border: 1.5px solid rgba(245, 158, 11, 0.4);
  border-radius: 20px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85), 0 0 35px rgba(245, 158, 11, 0.18);
  max-width: 480px;
  width: 94%;
  animation: sfCardFloat 3s ease-in-out infinite alternate;
  overflow: hidden;
}

@keyframes sfCardFloat {
  0% { transform: translateY(0); }
  100% { transform: translateY(-4px); }
}

/* Stage do corte industrial */
.sf-slab-stage {
  width: 100%;
  max-width: 460px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 6px 0 10px;
  position: relative;
  overflow: visible;
}

.sf-slab-stage .stone-container {
  transform: scale(0.88);
  transform-origin: center center;
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .sf-marble-loader,
  .mc-stair-loader {
    padding-top: 36px;
  }
  .sf-slab-stage {
    height: 175px;
  }
  .sf-slab-stage .stone-container {
    transform: scale(0.72);
  }
}

@media (max-width: 380px) {
  .sf-marble-loader,
  .mc-stair-loader {
    padding-top: 32px;
  }
  .sf-slab-stage {
    height: 155px;
  }
  .sf-slab-stage .stone-container {
    transform: scale(0.62);
  }
}

/* Versão Inline para o Dashboard e listas */
.sf-spinner-inline {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  gap: 10px;
  width: 100%;
}

.sf-spinner-inline .sf-slab-stage {
  width: 260px;
  height: 130px;
  margin: 0;
  overflow: visible;
}

.sf-spinner-inline .sf-slab-stage .stone-container {
  transform: scale(0.55);
  transform-origin: center center;
}

/* Contêiner Geral da Lastra de Mármore Carrara */
.stone-container {
  width: 460px;
  height: 180px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Textura de Mármore Carrara Fiel em Alta Resolução */
.marble-texture {
  background-color: #f3f5f7;
  background-image: 
    linear-gradient(135deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.06) 100%),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 1200 600' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cfilter id='blurVein'%3E%3CfeGaussianBlur stdDeviation='3'/%3E%3C/filter%3E%3Cfilter id='softGrain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.02' numOctaves='3' result='noise'/%3E%3CfeColorMatrix type='matrix' values='1 0 0 0 0.94 0 1 0 0 0.95 0 0 1 0 0.96 0 0 0 0.15 0'/%3E%3C/filter%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='%23f4f6f8'/%3E%3Crect width='100%25' height='100%25' filter='url(%23softGrain)'/%3E%3Cg stroke='%238a929a' stroke-linecap='round' fill='none' opacity='0.55' filter='url(%23blurVein)'%3E%3Cpath d='M-50,600 C200,450 350,380 520,260 C680,150 850,90 1250,-50' stroke-width='38'/%3E%3Cpath d='M100,650 C320,500 480,410 650,290 C800,180 980,100 1300,10' stroke-width='22'/%3E%3Cpath d='M-100,350 C150,220 300,180 480,100 C620,30 800,0 1100,-80' stroke-width='18'/%3E%3C/g%3E%3Cg stroke='%23626971' stroke-linecap='round' fill='none' opacity='0.42'%3E%3Cpath d='M-50,600 C200,450 350,380 520,260 C680,150 850,90 1250,-50' stroke-width='8'/%3E%3Cpath d='M300,420 Q420,320 480,310 T600,220 T800,140' stroke-width='4'/%3E%3Cpath d='M100,650 C320,500 480,410 650,290 C800,180 980,100 1300,10' stroke-width='5'/%3E%3Cpath d='M620,310 Q700,240 760,250 T900,160' stroke-width='3.5'/%3E%3Cpath d='M-100,350 C150,220 300,180 480,100' stroke-width='4'/%3E%3C/g%3E%3Cg stroke='%23484e55' stroke-linecap='round' fill='none' opacity='0.3'%3E%3Cpath d='M420,340 C510,280 560,260 620,210' stroke-width='1.8'/%3E%3Cpath d='M700,230 C780,170 840,150 920,90' stroke-width='1.5'/%3E%3Cpath d='M150,560 C260,470 340,420 420,360' stroke-width='1.5'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
}

/* 1. Parte Traseira da Laje (Atrás do Sulco de Corte) */
.slab-rear {
  width: 100%;
  height: 32px;
  border-radius: 6px 6px 0 0;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-bottom: none;
  position: relative;
  z-index: 1;
}

/* 2. Canal do Sulco de Corte Onde o Disco Entra */
.cut-groove-channel {
  width: 100%;
  height: 7px;
  background: #0b0d0f;
  position: relative;
  z-index: 2;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.95);
  border-left: 1px solid rgba(255, 255, 255, 0.4);
  border-right: 1px solid rgba(255, 255, 255, 0.4);
}

.cut-groove-progress {
  height: 100%;
  width: 0%;
  background: linear-gradient(to right, #000000 0%, #1a1c20 85%, #ff9d00 100%);
  box-shadow: 0 0 8px rgba(255, 150, 0, 0.6);
  animation: advance-groove 3.2s linear infinite;
}

/* 3. Conjunto Móvel da Serra */
.saw-assembly {
  position: absolute;
  top: -67px;
  left: 20px;
  width: 160px;
  height: 160px;
  z-index: 3;
  animation: move-saw-horizontal 3.2s linear infinite;
  pointer-events: none;
}

/* Disco Vetorial Sofi Completo Girando em Alta Velocidade por GPU */
.saw-blade-svg {
  width: 160px;
  height: 160px;
  transform-origin: center center;
  animation: spin-blade 0.85s linear infinite;
  filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.45));
  will-change: transform;
}

/* Compatibilidade para grupo rotor interno */
.saw-blade-rotor {
  transform-origin: 150px 150px;
  transform-box: view-box;
}

/* Faíscas e Incandescência no Ponto de Contato com o Sulco */
.cutting-sparks {
  position: absolute;
  top: 94px;
  left: 50%;
  transform: translateX(-50%);
  width: 55px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 240, 150, 1) 0%, rgba(255, 110, 0, 0.9) 45%, transparent 80%);
  animation: spark-flash 0.05s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 5;
}

/* Névoa de Refrigeração e Pó de Mármore Branco */
.dust-cloud {
  position: absolute;
  top: 86px;
  left: 50%;
  width: 75px;
  height: 28px;
  background: radial-gradient(ellipse, rgba(255, 255, 255, 0.95) 0%, rgba(235, 240, 248, 0.6) 50%, transparent 75%);
  transform: translateX(-50%);
  filter: blur(3px);
  animation: dust-puff 0.12s ease-out infinite alternate;
  pointer-events: none;
  z-index: 5;
}

/* 4. Parte Frontal da Laje (Cobre os 40% Inferiores do Disco Sofi) */
.slab-fore {
  width: 100%;
  height: 75px;
  border-left: 1px solid rgba(255, 255, 255, 0.5);
  border-right: 1px solid rgba(255, 255, 255, 0.5);
  position: relative;
  z-index: 4;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* 5. Borda Frontal (Espessura Tridimensional da Laje) */
.slab-front-edge {
  width: 100%;
  height: 35px;
  background-color: #dce0e5;
  background-image: 
    linear-gradient(to bottom, rgba(255, 255, 255, 0.4) 0%, rgba(0, 0, 0, 0.25) 100%),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 600 150' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M-20,160 Q120,110 240,70 T480,20' stroke='%23889098' stroke-width='14' fill='none' opacity='0.35' filter='blur(2px)'/%3E%3Cpath d='M-20,160 Q120,110 240,70 T480,20' stroke='%23555d65' stroke-width='4' fill='none' opacity='0.4'/%3E%3C/svg%3E");
  background-size: cover;
  border-radius: 0 0 6px 6px;
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-top: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.85);
  position: relative;
  z-index: 4;
}

/* Animações Keyframes */
@keyframes spin-blade {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes move-saw-horizontal {
  0% {
    transform: translateX(-20px);
    opacity: 0;
  }
  6% {
    opacity: 1;
  }
  88% {
    transform: translateX(320px);
    opacity: 1;
  }
  95%, 100% {
    transform: translateX(340px);
    opacity: 0;
  }
}

@keyframes advance-groove {
  0% { width: 0%; opacity: 0; }
  6% { opacity: 1; }
  88% { width: 95%; opacity: 1; }
  95%, 100% { width: 100%; opacity: 0; }
}

@keyframes spark-flash {
  0% { transform: translateX(-50%) scale(0.85); opacity: 0.8; }
  100% { transform: translateX(-50%) scale(1.3); opacity: 1; }
}

@keyframes dust-puff {
  0% { opacity: 0.55; transform: translateX(-50%) scale(0.9); }
  100% { opacity: 0.95; transform: translateX(-50%) scale(1.35); }
}

/* Tipografia e Barra de Progresso do Spinner */
.sf-marble-text,
.mc-stair-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.sf-marble-title,
.mc-stair-title {
  font-size: 16px;
  font-weight: 700;
  color: #f8fafc;
  letter-spacing: 0.02em;
}

.sf-marble-subtitle,
.mc-stair-subtitle {
  font-size: 12.5px;
  color: #94a3b8;
  line-height: 1.4;
}

.sf-marble-progress-bar,
.mc-stair-progress-bar {
  width: 100%;
  max-width: 240px;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 6px;
  position: relative;
}

.sf-marble-progress-fill,
.mc-stair-progress-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  background: linear-gradient(90deg, #f59e0b, #38bdf8);
  border-radius: 2px;
  animation: sfProgressLoop 1.6s ease-in-out infinite;
}

@keyframes sfProgressLoop {
  0% { left: -50%; width: 30%; }
  50% { width: 50%; }
  100% { left: 100%; width: 30%; }
}

/* Efeito nos botões durante o loading */
.sf-btn-pulse-icon,
.mc-btn-stair-pulse {
  display: inline-block;
  font-size: 15px;
  vertical-align: -1px;
  margin-right: 6px;
  animation: sfBtnPulse 0.75s ease-in-out infinite alternate;
}

@keyframes sfBtnPulse {
  0% { transform: scale(1) translateY(0); filter: brightness(1); }
  100% { transform: scale(1.2) translateY(-2px); filter: drop-shadow(0 0 6px #f59e0b) brightness(1.3); }
}

.btn-primary-auth.is-loading {
  position: relative;
  cursor: wait !important;
  opacity: 0.85;
  pointer-events: none;
  background: linear-gradient(135deg, #4338ca, #3b82f6) !important;
}

/* ==========================================================================
   PRODUCTION ORDER — A4 MASTER LAYOUT (SCHEDA TECNICA DI PRODUZIONE & CNC)
   ========================================================================== */

@page {
  size: A4 portrait;
  margin: 10mm 10mm 10mm 10mm;
}

#printProductionOrderDocument,
.print-production-document {
  display: none;
  width: 100%;
  max-width: 190mm;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
  /* O app é tema escuro: body.color é claro. Só .prod-order-page definia cor
     própria, então as seções de placas/alzatas/ventagli (irmãs dela, não
     filhas) herdavam texto claro e sumiam no branco. */
  color: #1e293b;
}

.prod-order-page {
  width: 190mm;
  max-width: 190mm;
  min-height: 277mm;
  margin: 0 auto;
  box-sizing: border-box;
  overflow: hidden;
  font-family: Arial, Helvetica, sans-serif;
  color: #1e293b;
  background: #ffffff;
}

.prod-order-page *,
.prod-order-page *::before,
.prod-order-page *::after {
  box-sizing: border-box;
}

/* As schede de desenho (placche, alzate, ventagli) e o rodape de firmas sao
   IRMAS da `.prod-order-page`, nao filhas — nao herdam o border-box dela. Sem
   isto uma caixa de 190 mm com 3 mm de padding sai 196 mm e passa da folha
   (medido no aceite: `.prod-winder-drawing` 196 mm num mount de 190 mm). */
.prod-scheda-block,
.prod-scheda-block *,
.prod-scheda-block *::before,
.prod-scheda-block *::after,
.prod-footer-controls,
.prod-footer-controls * {
  box-sizing: border-box;
}

/* ===== FASE 2: Novo cabeçalho ===== */
.prod-order-header {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48mm;
  gap: 5mm;
  padding: 5mm 5mm 4mm;
  border: 0.35mm solid #cbd5e1;
  border-radius: 3mm;
  background: #ffffff;
  align-items: center;
  margin-bottom: 4mm;
  break-inside: avoid;
  page-break-inside: avoid;
}

.prod-header-brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4mm;
}

.prod-brand-logo {
  width: 22mm;
  height: 22mm;
  object-fit: contain;
  flex: 0 0 auto;
}

.prod-title {
  margin: 0;
  font-size: 14pt;
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: -0.25px;
  color: #0f172a;
}

.prod-subtitle {
  margin: 1.5mm 0 0;
  font-size: 7.5pt;
  line-height: 1.3;
  color: #64748b;
}

.prod-header-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.5mm;
  text-align: right;
}

.prod-code-badge {
  display: block;
  padding: 2.2mm 3mm;
  border-radius: 2mm;
  background: #0f172a;
  color: #ffffff;
  font-size: 10.5pt;
  font-weight: 900;
  letter-spacing: 0.5px;
  text-align: center;
}

.prod-meta-line {
  font-size: 7.5pt;
  line-height: 1.3;
  color: #475569;
}

/* ===== FASE 3: Painel Anagráfica Técnica Uniforme ===== */
.prod-info-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border: 0.35mm solid #cbd5e1;
  border-radius: 2.5mm;
  overflow: hidden;
  margin-bottom: 4mm;
  background: #ffffff;
  break-inside: avoid;
  page-break-inside: avoid;
}

.prod-info-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.prod-info-col + .prod-info-col {
  border-left: 0.35mm solid #cbd5e1;
}

.prod-info-item {
  min-width: 0;
  min-height: 11mm;
  padding: 2mm 3mm;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-bottom: 0.25mm solid #e2e8f0;
  overflow: hidden;
}

.prod-info-col .prod-info-item:last-child {
  border-bottom: 0;
}

.prod-info-item strong {
  display: block;
  margin-bottom: 0.8mm;
  font-size: 6.5pt;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.35px;
  color: #64748b;
}

.prod-info-item span {
  display: block;
  min-width: 0;
  font-size: 8.2pt;
  line-height: 1.25;
  font-weight: 700;
  color: #0f172a;
  overflow-wrap: anywhere;
}

.prod-info-item .text-accent {
  color: #0284c7;
}

/* ===== FASES 4, 5 e 6: Tabela Técnica Resumo Agrupada ===== */
.prod-table-section {
  width: 100%;
  max-width: 100%;
  margin-bottom: 4mm;
  break-inside: avoid;
  page-break-inside: avoid;
}

.prod-section-header {
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 4mm;
  margin-bottom: 2mm;
}

.prod-section-header h3 {
  min-width: 0;
  margin: 0;
  font-size: 9pt;
  line-height: 1.15;
  font-weight: 900;
  color: #0f172a;
}

.prod-section-hint {
  max-width: 65mm;
  font-size: 6.5pt;
  line-height: 1.2;
  text-align: right;
  color: #64748b;
}

.prod-order-table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
  font-size: 7pt;
  overflow: hidden;
}

.prod-order-table col:nth-child(1),
.prod-order-table .col-num {
  width: 6%;
}

.prod-order-table col:nth-child(2),
.prod-order-table .col-description {
  width: 27%;
}

.prod-order-table col:nth-child(3),
.prod-order-table .col-dimensions {
  width: 18%;
}

.prod-order-table col:nth-child(4),
.prod-order-table .col-thickness {
  width: 10%;
}

.prod-order-table col:nth-child(5),
.prod-order-table .col-quantity {
  width: 10%;
}

.prod-order-table col:nth-child(6),
.prod-order-table .col-finishes {
  width: 29%;
}

.prod-order-table th,
.prod-order-table td {
  min-width: 0;
  padding: 2mm 1.8mm;
  border: 0.25mm solid #cbd5e1;
  vertical-align: middle;
  overflow-wrap: anywhere;
  word-break: normal;
  box-sizing: border-box;
}

.prod-order-table th {
  height: 11mm;
  background: #0f172a;
  color: #ffffff;
  font-size: 6.8pt;
  line-height: 1.15;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.15px;
  text-align: left;
}

.prod-order-table td {
  min-height: 14mm;
  background: #ffffff;
  color: #1e293b;
  font-size: 7pt;
  line-height: 1.25;
}

.prod-order-table td.text-center,
.prod-order-table th.text-center {
  text-align: center;
}

.prod-order-table tr {
  break-inside: avoid;
  page-break-inside: avoid;
}

.prod-order-table tr:nth-child(even) td {
  background: #f8fafc;
}

.prod-cell-sub {
  font-size: 6.4pt;
  color: #64748b;
  margin-top: 1mm;
  line-height: 1.2;
}

/* ===== FASE 26: Empilhamento das etiquetas de lavorazione =====
   Uma peça acumula várias lavorazioni (fronte, lato SX, lato DX, toro). Lado a
   lado elas estouravam a coluna e o texto saía cortado na borda da folha.
   Empilhadas, cada etiqueta ocupa a largura da coluna e quebra o texto dentro. */
.prod-badge-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.8mm;
  min-width: 0;
}

.prod-badge-stack .badge-taglio {
  width: 100%;
  margin: 0;
  justify-content: center;
}

/* ===== FASE 7: Badges e Etiquetas Técnicas ===== */
.badge-taglio {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  margin: 0 1mm 1mm 0;
  padding: 1mm 1.6mm;
  border: 0.25mm solid #cbd5e1;
  border-radius: 1mm;
  background: #f8fafc;
  color: #334155;
  font-size: 6.2pt;
  line-height: 1.15;
  font-weight: 800;
  white-space: normal;
  text-align: center;
  overflow-wrap: anywhere;
}

.tag-straight,
.tag-winder,
.tag-riser,
.tag-plate,
.tag-skirting {
  font-weight: 900;
}

.tag-straight {
  background: rgba(217, 119, 6, 0.1);
  color: #b45309;
  border-color: rgba(217, 119, 6, 0.3);
}

.tag-winder {
  background: rgba(234, 88, 12, 0.1);
  color: #c2410c;
  border-color: rgba(234, 88, 12, 0.3);
}

.tag-plate {
  background: rgba(14, 165, 233, 0.1);
  color: #0369a1;
  border-color: rgba(14, 165, 233, 0.3);
}

.tag-riser {
  background: rgba(13, 148, 136, 0.1);
  color: #0f766e;
  border-color: rgba(13, 148, 136, 0.3);
}

.tag-skirting {
  background: rgba(147, 51, 234, 0.1);
  color: #7e22ce;
  border-color: rgba(147, 51, 234, 0.3);
}

.tag-highlight {
  background: #fef08a;
  color: #854d0e;
  font-weight: 900;
  border-color: #facc15;
}

.tag-dim {
  background: #f1f5f9;
  color: #475569;
}

/* ===== FASE 8: Legenda Profissional de Lavorazioni ===== */
.prod-lavorazione-key {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5mm 3mm;
  margin-top: 2mm;
  padding: 2mm 3mm;
  border: 0.25mm solid #cbd5e1;
  border-radius: 1.5mm;
  background: #f8fafc;
  font-size: 6.5pt;
  color: #334155;
  break-inside: avoid;
  page-break-inside: avoid;
}

.prod-lavorazione-key-item {
  display: flex;
  align-items: center;
  gap: 1.5mm;
  min-width: 0;
}

.prod-lavorazione-key-line {
  width: 10mm;
  height: 0;
  border-top: 1mm solid currentColor;
  flex: 0 0 auto;
}

.prod-lavorazione-key-line.grezzo {
  border-top-style: dashed;
  border-top-width: 0.5mm;
}

/* ===== FASES 16, 17, 18, 19, 20: Schede, Blocos e Cards de Desenhos ===== */
.prod-scheda-block {
  width: 100%;
  max-width: 100%;
  margin-top: 4mm;
  margin-bottom: 4mm;
  break-inside: avoid;
  page-break-inside: avoid;
}

.prod-scheda-title {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3mm;
  padding: 2.5mm 3mm;
  background: #0f172a;
  color: #ffffff;
  border-radius: 2mm 2mm 0 0;
}

.prod-scheda-title > span:first-child {
  min-width: 0;
  font-size: 8pt;
  line-height: 1.15;
  font-weight: 900;
}

.prod-scheda-desc {
  margin: 0;
  padding: 2.5mm 3mm;
  border-left: 0.35mm solid #cbd5e1;
  border-right: 0.35mm solid #cbd5e1;
  border-bottom: 0.25mm solid #cbd5e1;
  background: #f8fafc;
  font-size: 6.8pt;
  line-height: 1.35;
  color: #475569;
}

/* ===== Tabela de medidas do bloco =====
   O dado tabular (medida, quantidade, destino) entra ALINHADO antes dos
   desenhos; o cartao desenhado passa a ser anexo do item, ligado pelo codigo. */
.prod-measure-table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  border-left: 0.35mm solid #cbd5e1;
  border-right: 0.35mm solid #cbd5e1;
  border-bottom: 0.25mm solid #cbd5e1;
  background: #ffffff;
  break-inside: avoid;
  page-break-inside: avoid;
}

.prod-measure-table th,
.prod-measure-table td {
  padding: 1.4mm 2mm;
  border-bottom: 0.2mm solid #e2e8f0;
  font-size: 6.6pt;
  line-height: 1.2;
  text-align: left;
  color: #334155;
  vertical-align: middle;
  word-break: break-word;
}

.prod-measure-table thead th {
  background: #eef2f7;
  color: #475569;
  font-size: 5.8pt;
  font-weight: 900;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.prod-measure-table tbody tr:nth-child(even) td {
  background: #f8fafc;
}

.prod-measure-table tbody tr:last-child td {
  border-bottom: none;
}

.prod-measure-table th.text-center,
.prod-measure-table td.text-center {
  text-align: center;
}

.prod-measure-table .prod-measure-code {
  width: 11mm;
  text-align: center;
  font-weight: 900;
  color: #0f172a;
}

.prod-measure-table .prod-measure-misure {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: #0f172a;
  white-space: nowrap;
}

/* Codigo do desenho (A..G / V1..Vn): o MESMO da tabela, no cabecalho do cartao. */
.prod-piece-code {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 7mm;
  height: 7mm;
  margin-right: 2mm;
  border-radius: 1mm;
  background: #0f172a;
  color: #ffffff;
  font-size: 7pt;
  font-weight: 900;
  letter-spacing: 0.4px;
  vertical-align: middle;
}

/* Titulo/descricao nao podem ficar orfaos no fim da pagina: o bloco desce junto. */
.prod-scheda-title,
.prod-scheda-desc {
  break-after: avoid;
  page-break-after: avoid;
}

.prod-winder-header {
  break-after: avoid;
  page-break-after: avoid;
}

.prod-step-canvas-wrap {
  width: 100%;
  max-width: 100%;
  padding: 3mm;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-left: 0.35mm solid #cbd5e1;
  border-right: 0.35mm solid #cbd5e1;
  border-bottom: 0.25mm solid #cbd5e1;
  background: #ffffff;
}

.prod-step-canvas-wrap svg {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  overflow: visible;
}

/* Teto de altura dos desenhos. A medida e' em MM porque o documento sai em A4:
   em px o desenho mudava de tamanho conforme o zoom da tela do operador. */
.order-step-svg {
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 58mm;
  display: block;
}

/* Alzata e placca sao retangulos: no grid de 3 colunas quem manda e' a largura,
   e o teto menor e' o que faz 7 medidas caberem em poucas linhas. */
.order-riser-svg,
.order-plate-svg {
  max-height: 42mm;
}

.prod-step-notes {
  margin-top: 2mm;
  padding: 2.5mm 3mm;
  border: 0.25mm solid #cbd5e1;
  border-radius: 1.5mm;
  background: #f8fafc;
  font-size: 6.8pt;
  line-height: 1.4;
  color: #475569;
}

.prod-step-notes strong {
  color: #0f172a;
  font-weight: 900;
}

/* ===== FASE 17: Grid dos desenhos =====
   1 por linha e' o padrao (ventaglio e placca: desenho grande, largura total).
   `.prod-grid-3` e' para peca simples (alzata): 3 colunas em A4 (~60 mm cada),
   que e' o que faz varias medidas diferentes caberem em poucas linhas. */
.prod-winders-grid {
  width: 100%;
  max-width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 4mm;
}

.prod-winders-grid.prod-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3mm;
}

/* O gap do grid ja' separa os cartoes: o margin do card viraria espaco dobrado. */
.prod-winders-grid > .prod-winder-card {
  margin-bottom: 0;
}

/* Cartao estreito (3 colunas): cabecalho e rodape empilhados, senao o titulo
   espreme contra o badge e volta o texto cortado. */
.prod-grid-3 .prod-winder-header {
  flex-direction: column;
  align-items: flex-start;
  gap: 1mm;
}

.prod-grid-3 .prod-winder-footer {
  grid-template-columns: 1fr;
}

.prod-winder-card {
  width: 100%;
  min-width: 0;
  border: 0.35mm solid #cbd5e1;
  border-radius: 2mm;
  background: #ffffff;
  overflow: hidden;
  break-inside: avoid;
  page-break-inside: avoid;
  margin-bottom: 4mm;
}

.prod-winder-header {
  min-width: 0;
  min-height: 10mm;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3mm;
  padding: 2.5mm 3mm;
  background: #f8fafc;
  border-bottom: 0.25mm solid #cbd5e1;
}

.prod-winder-header h4 {
  min-width: 0;
  margin: 0;
  font-size: 8pt;
  line-height: 1.15;
  font-weight: 900;
  color: #0f172a;
}

.prod-winder-box-tag {
  flex: 0 0 auto;
  padding: 1.5mm 2mm;
  border: 0.25mm solid #cbd5e1;
  border-radius: 1mm;
  background: #f1f5f9;
  color: #334155;
  font-size: 6.5pt;
  font-weight: 800;
  white-space: nowrap;
}

.prod-winder-drawing {
  width: 100%;
  min-width: 0;
  padding: 3mm;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background: #ffffff;
}

.prod-winder-drawing svg {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  overflow: visible;
}

/* O ventaglio e' o desenho que a oficina usa para conferir a sagoma: fica grande
   de proposito (1 por linha, largura total). 118 mm ~ meia folha util. */
.order-winder-svg {
  max-height: 118mm;
}

/* ===== FASE 25: Ficha de Fabricação dos Ventagli ===== */
.prod-winder-lavorazioni {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5mm;
  padding: 2.5mm 3mm;
  border-top: 0.25mm solid #cbd5e1;
  background: #ffffff;
}

.lavorazione-item {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 1.5mm 2mm;
  border: 0.25mm solid #e2e8f0;
  border-radius: 1mm;
  background: #f8fafc;
}

.lavorazione-label {
  font-size: 5.8pt;
  font-weight: 900;
  color: #64748b;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.lavorazione-item strong {
  margin-top: 0.5mm;
  font-size: 6.8pt;
  line-height: 1.2;
  color: #0f172a;
}

.prod-winder-footer {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5mm 3mm;
  padding: 2.5mm 3mm;
  border-top: 0.25mm solid #cbd5e1;
  background: #f8fafc;
  font-size: 6.5pt;
  line-height: 1.25;
  color: #475569;
}

/* Rodapé com Assinaturas */
.prod-footer-controls {
  display: flex;
  justify-content: space-between;
  gap: 8mm;
  margin-top: 4mm;
  padding-top: 3mm;
  border-top: 0.35mm solid #cbd5e1;
  break-inside: avoid;
  page-break-inside: avoid;
}

.prod-sig-col {
  flex: 1;
  text-align: center;
}

.prod-sig-line {
  border-bottom: 0.25mm solid #94a3b8;
  height: 10mm;
  margin-bottom: 1mm;
}

.prod-sig-col p {
  margin: 0;
  font-size: 7pt;
  font-weight: 600;
  color: #475569;
}

/* Prevenção de quebra de página de elementos essenciais */
.prod-order-header,
.prod-info-grid,
.prod-table-section,
.prod-scheda-block,
.prod-winder-card {
  break-inside: avoid;
  page-break-inside: avoid;
}

/* Ajustes Mobile First para os Botões de Ação */
.btn-prod-order-export {
  min-height: 46px;
  padding: 10px 18px;
  font-size: 13.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  touch-action: manipulation;
}

/* ATENÇÃO: precisa ser "screen and". A largura de uma folha A4 na impressão é
   ~794px, então @media (max-width: 1024px) também casava ao imprimir e
   derrubava a scheda anagrafica para 1 coluna, deixando a página 1 com os
   9 dados empilhados à esquerda e muito espaço vazio. */
@media screen and (max-width: 1024px) {
  .prod-info-grid {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .prod-winders-grid,
  .prod-winders-grid.prod-grid-3 {
    grid-template-columns: 1fr;
  }
  .prod-grid-3 .prod-winder-header {
    flex-direction: row;
    align-items: center;
  }
  .prod-footer-controls {
    flex-direction: column;
    gap: 12px;
  }
}

/* ==========================================================================
   Convite para instalar o PWA — injetado por src/pwaInstall.js
   z-index 90000 fica DE PROPÓSITO abaixo dos modais (100001): um modal aberto
   deve cobrir o convite, não o contrário.
   ========================================================================== */
.pwa-install-banner {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  transform: translateX(-50%);
  z-index: 90000;
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(560px, calc(100vw - 24px));
  padding: 12px 14px;
  background: #0f172a;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  color: #e2e8f0;
  font-family: Inter, system-ui, -apple-system, sans-serif;
  animation: pwa-install-in 220ms ease-out;
}

.pwa-install-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.pwa-install-text strong {
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
}

.pwa-install-text span {
  font-size: 11.5px;
  line-height: 1.35;
  color: #94a3b8;
}

.pwa-install-share {
  font-size: 12px;
}

.pwa-install-action {
  flex: none;
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  background: #38bdf8;
  color: #06121f;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
}

.pwa-install-action:hover {
  background: #5ecbfa;
}

.pwa-install-close {
  flex: none;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #94a3b8;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.pwa-install-close:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

@keyframes pwa-install-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@media (max-width: 480px) {
  .pwa-install-banner {
    flex-wrap: wrap;
    gap: 8px;
  }

  .pwa-install-action {
    flex: 1 0 100%;
    order: 3;
    padding: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pwa-install-banner {
    animation: none;
  }
}

/* ==========================================================================
   TEAM & COLLABORATORS MANAGEMENT (GESTOR DA MARMORARIA)
   ========================================================================== */
.dash-team-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.dash-team-header-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  padding-bottom: 16px;
}

.dash-team-header-titles h2 {
  font-size: 20px;
  font-weight: 700;
  color: #f8fafc;
  margin: 0 0 6px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.dash-team-header-titles p {
  font-size: 13.5px;
  color: #94a3b8;
  margin: 0;
  line-height: 1.4;
}

/* --- TOOLBAR MODERNA DA ABA DE EQUIPE & BUSCA --- */
.dash-team-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.dash-team-search-box {
  position: relative;
  flex: 1;
  min-width: 260px;
  max-width: 520px;
  display: flex;
  align-items: center;
}

.dash-team-search-box .team-search-icon {
  position: absolute;
  left: 14px;
  color: #64748b;
  pointer-events: none;
  transition: color 0.2s ease, transform 0.2s ease;
}

.dash-team-search-input {
  width: 100%;
  background: #0d1525;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 12px 40px 12px 42px;
  color: #ffffff;
  font-size: 14px;
  font-family: inherit;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25);
  transition: all 0.22s ease;
  box-sizing: border-box;
}

.dash-team-search-input::placeholder {
  color: #64748b;
  font-size: 13.5px;
}

.dash-team-search-input:focus {
  border-color: #38bdf8;
  outline: none;
  background: #111d33;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2), inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

.dash-team-search-box:focus-within .team-search-icon {
  color: #38bdf8;
  transform: scale(1.08);
}

.btn-clear-team-search {
  position: absolute;
  right: 12px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #94a3b8;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-clear-team-search:hover {
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
}

.btn-add-team-member {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  color: #ffffff !important;
  border: 1px solid rgba(56, 189, 248, 0.45);
  border-radius: 12px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  padding: 11px 20px;
  min-height: 44px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35);
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  white-space: nowrap;
}

.btn-add-team-member:hover {
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
  border-color: #38bdf8;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(2, 132, 199, 0.5);
}

.btn-team-icon-badge {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- GRID DE MEMBROS / CARDS ABAIXO --- */
.dash-team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px;
  margin-top: 6px;
  width: 100%;
}

.dash-team-card {
  background: #111a28;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.dash-team-card:hover {
  transform: translateY(-2px);
  border-color: rgba(56, 189, 248, 0.35);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.45);
}

.dash-team-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
}

.dash-team-avatar {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: linear-gradient(135deg, #0284c7, #0369a1);
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(2, 132, 199, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.dash-team-info {
  flex: 1;
  min-width: 0;
}

.dash-team-name {
  font-size: 15.5px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 4px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-team-email {
  font-size: 12.5px;
  color: #94a3b8;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-team-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.badge-role {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.badge-role-designer {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.3);
}

.badge-role-approver {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.badge-role-factory {
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.3);
}

.badge-role-admin {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.badge-status-temp {
  background: rgba(234, 179, 8, 0.15);
  color: #fde047;
  border: 1px solid rgba(234, 179, 8, 0.3);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.badge-status-active {
  background: rgba(16, 185, 129, 0.12);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.25);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 6px;
}

.badge-status-inactive {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 6px;
}

.dash-team-actions {
  display: flex;
  gap: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding-top: 14px;
}

.btn-team-action {
  flex: 1;
  min-height: 38px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #e2e8f0;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-team-action:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.2);
}

.btn-team-reset {
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.3);
}

.btn-team-reset:hover {
  background: rgba(56, 189, 248, 0.15);
  border-color: #38bdf8;
}

.btn-team-toggle-off {
  color: #f87171;
}

.btn-team-toggle-off:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: #ef4444;
}

.btn-team-toggle-on {
  color: #34d399;
}

.btn-team-toggle-on:hover {
  background: rgba(16, 185, 129, 0.15);
  border-color: #10b981;
}

.btn-team-edit {
  color: #c4b5fd;
  border-color: rgba(167, 139, 250, 0.35);
}

.btn-team-edit:hover {
  background: rgba(167, 139, 250, 0.15);
  border-color: #a78bfa;
}

/* Tres botoes no cartao (Modifica / Reset / Disattiva): sem wrap o rotulo
   espremia em tela estreita; com wrap os botoes mantem 38px de altura. */
.dash-team-actions {
  flex-wrap: wrap;
}

/* ==========================================================================
   SUB-ABAS DO TIME (COLLABORATORI | ACCESSI & PERMESSI) + MATRIZ DE PERMISSOES
   --------------------------------------------------------------------------
   Mobile first: a barra de sub-abas ocupa a largura, os cartoes de grupo sao
   uma coluna e cada linha da matriz empilha o toggle a' direita. Nada de
   posicionamento absoluto — a tela tem de funcionar a 320px.
   ========================================================================== */

.team-subtabs {
  display: flex;
  gap: 6px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  width: 100%;
  max-width: 520px;
  margin-bottom: 18px;
}

.team-subtab {
  flex: 1;
  min-height: 42px;
  border: none;
  background: transparent;
  color: #94a3b8;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.team-subtab:hover {
  color: #e2e8f0;
}

.team-subtab.is-active {
  background: rgba(56, 189, 248, 0.16);
  color: #e0f2fe;
}

.team-permissions-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.team-role-chip {
  min-height: 42px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.team-role-chip:hover {
  color: #f8fafc;
  border-color: rgba(255, 255, 255, 0.2);
}

.team-role-chip.is-active {
  background: rgba(56, 189, 248, 0.16);
  border-color: rgba(56, 189, 248, 0.5);
  color: #e0f2fe;
}

.team-role-chip small {
  display: block;
  font-size: 10.5px;
  font-weight: 500;
  color: #7c8ba1;
  margin-top: 2px;
}

.team-permissions-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.perm-card {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  overflow: hidden;
}

.perm-card-header {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.perm-card-header h3 {
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
  color: #f1f5f9;
}

.perm-card-header p {
  margin: 2px 0 0;
  font-size: 11.5px;
  color: #94a3b8;
}

.perm-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.perm-row:first-child {
  border-top: none;
}

.perm-row.is-locked {
  opacity: 0.8;
}

.perm-row-texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.perm-row-rotulo {
  font-size: 13px;
  font-weight: 600;
  color: #e2e8f0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.perm-row-desc {
  font-size: 11.5px;
  color: #8494ab;
}

.perm-badge-lock {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.35);
  background: rgba(251, 191, 36, 0.1);
  border-radius: 999px;
  padding: 2px 8px;
}

.team-permissions-feedback {
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 12.5px;
}

.team-permissions-aviso {
  margin: 0;
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.5;
}

@media (max-width: 640px) {
  .team-subtabs {
    max-width: 100%;
  }

  .team-role-chip {
    flex: 1 1 calc(50% - 8px);
  }
}

@media (max-width: 1024px) {
  .dash-team-header-panel {
    flex-direction: column;
    align-items: flex-start;
  }

  .dash-team-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .dash-team-search-box {
    max-width: 100%;
    min-width: 100%;
  }

  .btn-add-team-member {
    width: 100%;
  }
}





/* ---------------------------------------------------------------------------
   VANO BLOCCATO — as 4 medidas de obra como dado travado (obra esistente)

   O visual segue o badge do 👑 Quota Guida: âmbar + cadeado, para ler como
   "isto é medição de campo, não é sugestão do app". Um campo travado que
   parecesse um campo comum convidaria a digitar nele — e digitar ali é
   exatamente o que este modo existe para impedir.
--------------------------------------------------------------------------- */

.locked-void-block {
  border: 1px solid rgba(234, 179, 8, 0.35);
  background: rgba(234, 179, 8, 0.06);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 10px;
}

.locked-void-block label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  margin-bottom: 6px;
}

.locked-void-block .grid-three {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 6px;
}

.locked-void-block .grid-three label {
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
}

.locked-void-block .grid-three input {
  width: 100%;
}

/* Só o que diverge da base compartilhada (lá em cima, no bloco MEDIDA REI):
   layout, altura e padding vêm de lá. O vermelho é o estado normal do Vano;
   .is-violating (abaixo) é o agravamento — preservada como estava. */
.locked-void-badge {
  color: #f87171;
  background: rgba(248, 113, 113, 0.1);
  border-color: rgba(248, 113, 113, 0.3);
}

.locked-void-badge:hover {
  background: rgba(248, 113, 113, 0.2);
  border-color: rgba(248, 113, 113, 0.5);
}

.locked-void-badge .badge-value {
  color: #fca5a5;
}

.locked-void-badge.is-violating {
  border-color: #ef4444;
  color: #fecaca;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.25), rgba(185, 28, 28, 0.35));
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.3);
}

/* O campo travado: fundo âmbar, cursor de "não é seu" e o cadeado à direita. */
input.is-locked-measure {
  background: rgba(234, 179, 8, 0.12) !important;
  border-color: rgba(234, 179, 8, 0.55) !important;
  color: #fde047 !important;
  cursor: not-allowed;
}

label.is-locked-label > span::after {
  content: " 🔒";
  font-size: 11px;
}

/* ============================================================================
   FAVORITES & TEMPLATES MANAGER (favoritesManager.js)
   ============================================================================ */

#modalTemplates .modal-dialog {
  max-width: 680px;
  width: 95vw;
}

/* ----------------------------------------------------------------------------
   A LISTA OCUPA A ALTURA DO MODAL (medido em 2026-09-24)

   No tablet/celular o modal vira FOLHA CHEIA: `.app-modal .modal-dialog` recebe
   `height: 100dvh` (parte 60). Mas os filhos NAO cresciam — o corpo era
   `padding` + `overflow-y: auto` e a lista tinha `max-height: 58vh` —, entao a
   sobra da folha ficava no FIM do dialogo, DEPOIS do rodape:

     | viewport        | sobra abaixo do rodape | lista visivel |
     | 820x1180        | 245,3 px               | 684,5 px      |
     | 1024 de altura  | 180,4 px               | 594 px        |
     | 390x844         | 47 px                  | 639 px        |

   Quanto mais ALTA a tela, maior a sobra: `58vh` cresce com a tela e o resto do
   conteudo (cabecalho + toolbar + rodape) e' fixo. Era o "espaco vazio acima do
   Chiudi" do print do usuario, mais evidente no tablet.

   Contrato: o corpo cresce (`flex: 1 1 auto` + `min-height: 0`), o wrap entrega a
   altura e a LISTA e' a unica scroller. Efeito colateral bom: o corpo deixa de
   ter scroll proprio (a 1024x768 ele rolava 26 px e escondia 5,4 px da ultima
   linha por baixo do rodape).

   O `:has(.fav-cards-list)` e' de proposito: os modos "Nuovo Modello 3D" e
   edicao sao FORMULARIO no mesmo corpo e mantem o comportamento de sempre.

   O `#templatesListContainer` entra na cadeia: ele fica ENTRE o corpo e o
   `.fav-manager-wrap` e sem ele a lista para de crescer 77 px antes do fim (a 1a
   versao desta regra esqueceu disso e a sobra foi parar no meio do corpo:
   151,8 px entre a lista e o rodape, medidos a 820x1180).
   ---------------------------------------------------------------------------- */

/* O CORPO CRESCE NOS TRES MODOS (lista, novo, edicao): e' ele que empurra o
   rodape para o fundo da folha. Sem esta parte, o modo EDICAO (formulario)
   repetia exatamente o defeito do print — medido a 821x1180: 489 px de vazio
   ABAIXO do rodape, com o formulario parado no meio da tela. */
#modalTemplates .modal-body {
  flex: 1 1 auto;
  min-height: 0;
}

/* So' no modo LISTA o corpo vira coluna flex: e' o que entrega a altura a'
   cadeia `#templatesListContainer` -> `.fav-manager-wrap` -> `.fav-cards-list`.
   Nos modos de formulario o corpo continua bloco (e rola, se precisa). */
#modalTemplates .modal-body:has(.fav-cards-list) {
  display: flex;
  flex-direction: column;
}

#modalTemplates .modal-body:has(.fav-cards-list) > #templatesListContainer {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#modalTemplates .fav-manager-wrap {
  flex: 1 1 auto;
  min-height: 0;
}

/* As duas faixas acima/abaixo da lista nao cedem nem crescem: quem cede espaco
   (e rola) e' a lista. */
#modalTemplates .fav-toolbar,
#modalTemplates .fav-status-bar {
  flex: 0 0 auto;
}

#modalTemplates .fav-cards-list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}

.fav-manager-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fav-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.fav-search-wrap {
  position: relative;
  flex: 1 1 240px;
  display: flex;
  align-items: center;
}

.fav-search-icon {
  position: absolute;
  left: 10px;
  color: var(--text-muted, #94a3b8);
  pointer-events: none;
}

.fav-search-input {
  width: 100%;
  background: var(--bg-surface-2, #1e293b);
  border: 1px solid var(--border-color, #334155);
  border-radius: 8px;
  padding: 8px 30px 8px 32px;
  color: var(--text-primary, #f8fafc);
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.fav-search-input:focus {
  border-color: var(--accent-gold, #f59e0b);
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
}

.fav-search-clear {
  position: absolute;
  right: 8px;
  background: transparent;
  border: none;
  color: var(--text-muted, #94a3b8);
  cursor: pointer;
  padding: 2px 6px;
  font-size: 11px;
}

.fav-toolbar-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.fav-btn-filter {
  background: var(--bg-surface-2, #1e293b);
  border: 1px solid var(--border-color, #334155);
  color: var(--text-secondary, #cbd5e1);
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}

.fav-btn-filter:hover,
.fav-btn-filter.is-active {
  border-color: var(--accent-gold, #f59e0b);
  color: var(--accent-gold, #f59e0b);
  background: rgba(245, 158, 11, 0.08);
}

.fav-btn-create {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border: none;
  color: #0f172a;
  font-weight: 700;
  font-size: 12px;
  padding: 7px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: filter 0.15s, transform 0.15s;
}

.fav-btn-create:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.fav-status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: var(--text-muted, #94a3b8);
  padding: 0 2px;
}

.fav-filter-hint {
  color: var(--accent-gold, #f59e0b);
  font-weight: 600;
}

.fav-cards-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 58vh;
  overflow-y: auto;
  padding-right: 4px;
}

.fav-card {
  background: var(--bg-surface, #1e293b);
  border: 1px solid var(--border-color, #334155);
  border-radius: 10px;
  padding: 12px 14px;
  transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fav-card:hover {
  border-color: rgba(245, 158, 11, 0.4);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.fav-card.is-favorite {
  border-color: rgba(245, 158, 11, 0.35);
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.04) 0%, var(--bg-surface, #1e293b) 100%);
}

.fav-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.fav-card-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}

.fav-star-btn {
  background: transparent;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: #475569;
  line-height: 1;
  padding: 2px;
  transition: transform 0.15s, color 0.15s;
}

.fav-star-btn:hover {
  transform: scale(1.25);
  color: #fbbf24;
}

.fav-star-btn.is-starred {
  color: #f59e0b;
  text-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
}

.fav-card-heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.fav-card-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary, #f8fafc);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fav-badge-type {
  font-size: 10px;
  color: var(--accent-gold, #f59e0b);
  background: rgba(245, 158, 11, 0.1);
  padding: 1px 6px;
  border-radius: 4px;
  align-self: flex-start;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.fav-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.fav-btn-apply {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--accent-gold, #f59e0b);
  border: none;
  color: #0f172a;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: filter 0.15s, transform 0.1s;
}

.fav-btn-apply:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.fav-btn-icon {
  background: var(--bg-surface-2, #334155);
  border: 1px solid var(--border-color, #475569);
  color: var(--text-secondary, #cbd5e1);
  border-radius: 6px;
  padding: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
}

.fav-btn-icon:hover {
  border-color: var(--accent-gold, #f59e0b);
  color: var(--text-primary, #ffffff);
}

.fav-btn-danger:hover {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

.fav-card-desc {
  margin: 0;
  font-size: 12px;
  color: var(--text-secondary, #94a3b8);
  line-height: 1.4;
}

.fav-specs-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.fav-spec-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(15, 23, 42, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 11px;
}

.fav-spec-label {
  color: var(--text-muted, #94a3b8);
}

.fav-spec-val {
  color: var(--text-primary, #f1f5f9);
  font-weight: 600;
}

.fav-spec-pill.pill-pezzo {
  background: rgba(245, 158, 11, 0.14);
  border-color: rgba(245, 158, 11, 0.45);
}

.fav-spec-pill.pill-pezzo .fav-spec-label {
  color: #fbbf24;
  font-weight: 700;
}

.fav-spec-pill.pill-pezzo .fav-spec-val {
  color: #ffffff;
  font-weight: 800;
}

.fav-measure-item.fav-measure-pezzo {
  background: rgba(245, 158, 11, 0.12) !important;
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
}

.fav-measure-item.fav-measure-pezzo .label {
  color: #fbbf24 !important;
  font-weight: 700;
}

.fav-delete-confirm-box {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: 6px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  animation: favFadeIn 0.2s ease;
}

.fav-delete-confirm-text {
  font-size: 12px;
  color: #fca5a5;
}

.fav-delete-confirm-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.fav-btn-cancel-delete {
  background: transparent;
  border: 1px solid #475569;
  color: #cbd5e1;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
}

.fav-btn-confirm-delete {
  background: #ef4444;
  border: none;
  color: white;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.fav-empty-state {
  text-align: center;
  padding: 30px 16px;
  background: rgba(15, 23, 42, 0.25);
  border: 1px dashed var(--border-color, #334155);
  border-radius: 10px;
}

.fav-empty-icon {
  font-size: 32px;
  margin-bottom: 8px;
}

.fav-empty-state h4 {
  margin: 0 0 6px 0;
  font-size: 14px;
  color: var(--text-primary, #f8fafc);
}

.fav-empty-state p {
  margin: 0 0 14px 0;
  font-size: 12px;
  color: var(--text-muted, #94a3b8);
}

/* Painel de Formulário (Criação e Edição) */
.fav-form-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: favFadeIn 0.2s ease;
}

.fav-form-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fav-form-back-btn {
  background: transparent;
  border: 1px solid var(--border-color, #334155);
  color: var(--text-secondary, #cbd5e1);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s;
}

.fav-form-back-btn:hover {
  color: var(--text-primary, #ffffff);
  border-color: var(--accent-gold, #f59e0b);
}

.fav-form-title {
  margin: 0;
  font-size: 14px;
  color: var(--text-primary, #f8fafc);
}

.fav-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fav-form-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fav-form-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.fav-form-input,
.fav-form-textarea,
.fav-form-select {
  background: var(--bg-surface-2, #0f172a);
  border: 1px solid var(--border-color, #334155);
  border-radius: 6px;
  padding: 8px 10px;
  color: var(--text-primary, #f8fafc);
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s;
}

.fav-form-input:focus,
.fav-form-textarea:focus,
.fav-form-select:focus {
  border-color: var(--accent-gold, #f59e0b);
}

.fav-form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.fav-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-primary, #f8fafc);
}

.fav-measures-box {
  background: rgba(15, 23, 42, 0.4);
  border: 1px solid var(--border-color, #334155);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fav-measures-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.fav-measures-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-gold, #f59e0b);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.fav-btn-sync {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: var(--accent-gold, #f59e0b);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}

.fav-btn-sync:hover {
  background: rgba(245, 158, 11, 0.25);
  border-color: var(--accent-gold, #f59e0b);
}

.fav-btn-sync.is-synced {
  background: rgba(16, 185, 129, 0.15);
  border-color: #10b981;
  color: #34d399;
}

.fav-measures-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
}

.fav-measure-item {
  background: rgba(30, 41, 59, 0.5);
  border-radius: 5px;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fav-measure-item .label {
  font-size: 10px;
  color: var(--text-muted, #94a3b8);
}

.fav-measure-item .val {
  font-size: 12px;
  color: var(--text-primary, #ffffff);
}

.fav-measures-tip {
  font-size: 11px;
  color: var(--text-muted, #94a3b8);
  font-style: italic;
}

.fav-form-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--border-color, #334155);
}

@keyframes favFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================================
   ASSISTENTE DI EQUALIZZAZIONE RAMPE (MODAL #modalEqualizeRamps)
   ============================================================================ */

.modal-dialog-equalize {
  max-width: 780px;
  width: 95vw;
  max-height: 90vh;
}

.modal-dialog-equalize .modal-body {
  padding: 16px 20px 24px;
  overflow-y: auto;
  max-height: calc(90vh - 130px);
}

/* Banner de Status e Comparativo */
.equalize-current-banner {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.85) 0%, rgba(30, 41, 59, 0.7) 100%);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 16px;
  padding: 14px 20px;
  margin-bottom: 18px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.equalize-banner-col {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.equalize-banner-col:last-child {
  text-align: right;
  align-items: flex-end;
}

.equalize-banner-lbl {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted, #94a3b8);
}

.equalize-banner-val {
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.2px;
}

.equalize-banner-sub {
  font-size: 11.5px;
  color: var(--text-secondary, #94a3b8);
}

.equalize-banner-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 8px;
}

/* Chips/Pills 100% Arredondados (Pill Shape) */
.equalize-diff-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: 9999px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.equalize-diff-pill.status-equal {
  background: rgba(16, 185, 129, 0.18);
  border: 1px solid rgba(52, 211, 153, 0.45);
  color: #34d399;
}

.equalize-diff-pill.status-warn {
  background: rgba(245, 158, 11, 0.18);
  border: 1px solid rgba(251, 191, 36, 0.45);
  color: #fbbf24;
}

.equalize-diff-pill.status-alert {
  background: rgba(239, 68, 68, 0.18);
  border: 1px solid rgba(248, 113, 113, 0.45);
  color: #f87171;
}

/* Lista de Opções - SEM scroll interno, rola com o modal-body */
.equalize-options-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Card de Opção */
.equalize-option-card {
  background: linear-gradient(145deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.9) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 16px 18px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.equalize-option-card:hover {
  border-color: rgba(245, 158, 11, 0.45);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  transform: translateY(-2px);
}

.equalize-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Badges e Chips das Opções 100% Arredondados */
.equalize-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  flex-shrink: 0;
}

.equalize-card-badge i,
.equalize-card-badge svg {
  width: 13px;
  height: 13px;
}

.tag-muro { background: rgba(56, 189, 248, 0.15); color: #38bdf8; border: 1px solid rgba(56, 189, 248, 0.35); }
.tag-curva { background: rgba(168, 85, 247, 0.15); color: #c084fc; border: 1px solid rgba(168, 85, 247, 0.35); }
.tag-luce { background: rgba(16, 185, 129, 0.15); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.35); }
.tag-alzat { background: rgba(245, 158, 11, 0.15); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.35); }

.equalize-card-title {
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-primary, #f8fafc);
  letter-spacing: -0.1px;
}

.equalize-card-desc {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary, #cbd5e1);
  line-height: 1.5;
}

.equalize-card-desc strong {
  color: #ffffff;
  font-weight: 600;
}

/* Linha de Estatísticas e Especificações com Pills Redondos */
.equalize-stats-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 10px 14px;
}

.equalize-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  background: rgba(30, 41, 59, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9999px;
  padding: 4px 12px;
}

.equalize-stat-lbl {
  font-size: 10.5px;
  color: var(--text-muted, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.equalize-stat-val {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-gold, #f59e0b);
}

/* Ações do Card - Botão 100% Visível e Arredondado */
.equalize-card-action {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 2px;
}

.btn-apply-equalize-opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  border: none;
  border-radius: 9999px;
  padding: 9px 20px;
  color: #0f172a;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 10px rgba(245, 158, 11, 0.3);
  min-height: 40px;
}

.btn-apply-equalize-opt:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.45);
}

.btn-apply-equalize-opt:active {
  transform: translateY(0);
  filter: brightness(0.95);
}

.btn-apply-equalize-opt i,
.btn-apply-equalize-opt svg {
  width: 15px;
  height: 15px;
}

@media (max-width: 640px) {
  .equalize-current-banner {
    grid-template-columns: 1fr;
    gap: 12px;
    text-align: center;
  }
  .equalize-banner-col:last-child {
    text-align: center;
    align-items: center;
  }
  .equalize-banner-col {
    align-items: center;
  }
  .equalize-card-action {
    width: 100%;
  }
  .btn-apply-equalize-opt {
    width: 100%;
    min-height: 44px;
    font-size: 13.5px;
  }
}
/* ==========================================================================
   PRINT / PDF LISTA DE CORTE ANALÍTICA DE PRODUÇÃO (MARMORARIA / CNC)
   ========================================================================== */
.btn-modal-action-pdf {
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  pointer-events: auto !important;
}

.btn-modal-action-pdf:hover {
  background: linear-gradient(135deg, #115e59, #0f766e) !important;
  border-color: #5eead4 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(13, 148, 136, 0.4) !important;
}

.cutting-list-print-mount {
  display: none;
}

/* Estilos de Impressão @media print para Lista de Corte */
@media print {
  body.is-printing-cutting-list > *:not(.cutting-list-print-mount) {
    display: none !important;
  }

  body.is-printing-cutting-list,
  body.is-printing-cutting-list .cutting-list-print-mount {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    color: #0f172a !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  @page {
    size: A4 portrait;
    margin: 10mm 10mm 12mm 10mm;
  }

  .cutting-list-print-container {
    width: 100% !important;
    max-width: 100% !important;
    background: #ffffff !important;
    color: #0f172a !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  .cutting-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    border-bottom: 2px solid #0f172a !important;
    padding-bottom: 10px !important;
    margin-bottom: 12px !important;
    page-break-inside: avoid !important;
  }

  .cutting-brand-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 3px !important;
  }

  .cutting-header-logo {
    width: 44px !important;
    height: 44px !important;
    object-fit: contain !important;
    border-radius: 6px !important;
    background: #0f172a !important;
    padding: 3px !important;
    border: 1px solid #334155 !important;
    flex-shrink: 0 !important;
  }

  .cutting-brand-text {
    display: flex !important;
    flex-direction: column !important;
  }

  .cutting-company-badge {
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    color: #0284c7 !important;
    text-transform: uppercase !important;
    margin-bottom: 2px !important;
  }

  .cutting-company-name {
    font-size: 18px !important;
    font-weight: 900 !important;
    color: #0f172a !important;
    margin: 0 !important;
    letter-spacing: -0.02em !important;
  }

  .cutting-company-sub {
    font-size: 10px !important;
    color: #64748b !important;
    margin: 2px 0 0 0 !important;
  }

  .cutting-header-right {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 6px !important;
  }

  .cutting-approval-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    font-weight: 800 !important;
    font-size: 11px !important;
    letter-spacing: 0.3px !important;
  }

  .cutting-approval-chip.approved {
    background: #ecfdf5 !important;
    border: 1.5px solid #059669 !important;
    color: #047857 !important;
  }

  .cutting-approval-chip.pending-approval {
    background: #fef2f2 !important;
    border: 1.5px solid #dc2626 !important;
    color: #b91c1c !important;
    box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.2) !important;
  }

  .cutting-approval-warning-sub {
    font-size: 9px !important;
    font-weight: 700 !important;
    color: #dc2626 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    margin-top: -2px !important;
  }

  .chip-check {
    font-size: 13px !important;
  }

  .cutting-order-code {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    font-size: 10px !important;
    color: #475569 !important;
    line-height: 1.3 !important;
  }

  .cutting-project-card {
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    padding: 10px 12px !important;
    margin-bottom: 14px !important;
    page-break-inside: avoid !important;
  }

  .project-info-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px 16px !important;
  }

  .info-cell {
    display: flex !important;
    flex-direction: column !important;
  }

  .info-label {
    font-size: 9px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
  }

  .info-value {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
  }

  .info-value.highlight {
    color: #0284c7 !important;
  }

  .info-value.gold {
    color: #b45309 !important;
  }

  .cutting-section-wrap {
    margin-bottom: 14px !important;
    page-break-inside: avoid !important;
  }

  .cutting-section-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: #e2e8f0 !important;
    padding: 6px 10px !important;
    border: 1px solid #cbd5e1 !important;
    border-bottom: none !important;
    border-radius: 4px 4px 0 0 !important;
  }

  .cutting-section-title {
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: 0.01em !important;
  }

  .cutting-section-badge {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #475569 !important;
  }

  .cutting-table {
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
    font-size: 9.5px !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
  }

  .cutting-table th {
    background: #f1f5f9 !important;
    color: #334155 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 8.5px !important;
    letter-spacing: 0.01em !important;
    padding: 5px 6px !important;
    border: 1px solid #cbd5e1 !important;
    text-align: left !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
  }

  .cutting-table td {
    padding: 5px 6px !important;
    border: 1px solid #cbd5e1 !important;
    color: #1e293b !important;
    vertical-align: middle !important;
    font-variant-numeric: tabular-nums !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
  }

  .cutting-table tbody tr:nth-child(even) td {
    background: #f8fafc !important;
  }

  .col-num {
    text-align: center !important;
    font-weight: 700 !important;
    color: #64748b !important;
  }

  .col-desc strong {
    color: #0f172a !important;
    font-size: 10px !important;
    display: block !important;
  }

  .col-desc .sub-desc {
    font-size: 8.5px !important;
    color: #64748b !important;
    display: block !important;
  }

  .col-qty {
    text-align: center !important;
    font-size: 10.5px !important;
  }

  .col-qty strong {
    color: #0f172a !important;
  }

  .col-dim {
    text-align: center !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    font-family: monospace, monospace !important;
    font-size: 9.5px !important;
  }

  .col-thick {
    text-align: center !important;
    font-weight: 700 !important;
  }

  .col-front {
    font-weight: 600 !important;
    color: #b45309 !important;
  }

  .col-sides {
    color: #475569 !important;
    font-size: 9px !important;
  }

  .col-area {
    text-align: right !important;
    font-family: monospace, monospace !important;
    font-size: 9.5px !important;
    color: #334155 !important;
  }
}

/* ==========================================================================
   BANNER DE PROJETO BLOQUEADO / PRODUÇÃO (READ-ONLY)
   ========================================================================== */
.workspace-readonly-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: linear-gradient(90deg, rgba(139, 92, 246, 0.18) 0%, rgba(245, 158, 11, 0.15) 100%);
  border-bottom: 2px solid rgba(139, 92, 246, 0.45);
  padding: 10px 20px;
  position: relative;
  z-index: 40;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.workspace-readonly-banner .banner-content {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
}

.workspace-readonly-banner .banner-icon-badge {
  font-size: 22px;
  background: rgba(139, 92, 246, 0.25);
  border: 1px solid rgba(167, 139, 250, 0.4);
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.workspace-readonly-banner .banner-text-box {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.workspace-readonly-banner .banner-title {
  font-size: 13.5px;
  font-weight: 800;
  color: #f3e8ff;
  letter-spacing: 0.3px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.workspace-readonly-banner .banner-desc {
  font-size: 12px;
  color: #cbd5e1;
  line-height: 1.4;
}

.workspace-readonly-banner .banner-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.btn-banner-action {
  font-family: inherit;
  font-weight: 700;
  font-size: 12.5px;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-banner-duplicate {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff;
  border: 1px solid #34d399;
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.35);
}

.btn-banner-duplicate:hover {
  background: linear-gradient(135deg, #34d399 0%, #059669 100%);
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.5);
  transform: translateY(-1px);
}

.btn-banner-admin-toggle {
  background: rgba(139, 92, 246, 0.2);
  color: #c4b5fd;
  border: 1px solid rgba(167, 139, 250, 0.4);
}

.btn-banner-admin-toggle:hover {
  background: rgba(139, 92, 246, 0.35);
  color: #ffffff;
  border-color: #a78bfa;
}

.btn-banner-admin-toggle.is-active {
  background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
  color: #ffffff;
  border-color: #c4b5fd;
  box-shadow: 0 2px 10px rgba(139, 92, 246, 0.4);
}

/* Modo Bloqueado nos Controles da Sidebar */
.panel.controls.controls-locked-mode {
  position: relative;
}

.panel.controls.controls-locked-mode::before {
  content: "🔒 SCHEDA PARAMETRI BLOCCATA PER PRODUZIONE";
  display: block;
  background: rgba(139, 92, 246, 0.15);
  border: 1px dashed rgba(167, 139, 250, 0.45);
  color: #c4b5fd;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
  padding: 6px 10px;
  border-radius: 6px;
  margin: 8px 12px 0 12px;
  letter-spacing: 0.3px;
}

.panel.controls.controls-locked-mode input:not([type="checkbox"]):not([type="radio"]),
.panel.controls.controls-locked-mode select,
.panel.controls.controls-locked-mode textarea {
  opacity: 0.65 !important;
  cursor: not-allowed !important;
  background-color: rgba(15, 23, 42, 0.45) !important;
  border-color: rgba(148, 163, 184, 0.2) !important;
  color: #94a3b8 !important;
}

.panel.controls.controls-locked-mode input[type="checkbox"],
.panel.controls.controls-locked-mode input[type="radio"] {
  opacity: 0.65 !important;
  cursor: not-allowed !important;
}

.panel.controls.controls-locked-mode .btn-group-toggle {
  opacity: 0.5 !important;
  pointer-events: none !important;
}

@media (max-width: 768px) {
  .workspace-readonly-banner {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 10px 14px;
  }
  .workspace-readonly-banner .banner-actions {
    justify-content: flex-end;
  }
}

/* ==========================================================================
   MODAIS DE SEGURANÇA E CONFIRMAÇÃO ELEGANTE (ADMIN OVERRIDE & CÓPIA)
   ========================================================================== */
.modal-dialog-security {
  max-width: 520px;
  width: 92%;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #0f172a;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.security-header-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.security-logo {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  padding: 4px;
}

.security-subtitle {
  font-size: 11.5px;
  color: #94a3b8;
  display: block;
}

.security-alert-box {
  display: flex;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 10px;
  margin-bottom: 14px;
}

.security-alert-box.warning-amber {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #fef3c7;
}

.security-alert-box.info-emerald {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #ecfdf5;
}

.security-alert-box .alert-icon {
  font-size: 24px;
  line-height: 1;
}

.security-alert-box .alert-text {
  font-size: 13px;
  line-height: 1.45;
}

.security-alert-box .alert-text strong {
  display: block;
  font-size: 13.5px;
  margin-bottom: 4px;
}

.status-pill-highlight {
  display: inline-block;
  margin-top: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(139, 92, 246, 0.25);
  color: #d8b4fe;
  border: 1px solid rgba(139, 92, 246, 0.45);
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: 0.4px;
}

.security-details-box {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 13px;
  color: #cbd5e1;
  line-height: 1.5;
}

/* Variante de segurança: só a cor da borda difere da base. O resto
   (flex / justify / gap / padding) vem do `.modal-footer` da parte 40 — antes
   esta regra repetia tudo e, por estar DEPOIS da parte 60 na ordem das partes,
   vencia também dentro do media query do mobile: o rodapé ficava com 20px de
   padding lateral enquanto os outros iam a 14px. */
.security-modal-footer {
  border-top-color: rgba(255, 255, 255, 0.08);
}

.btn-confirm-override-danger {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  color: #ffffff !important;
  font-weight: 700;
  border: 1px solid #fbbf24 !important;
  box-shadow: 0 2px 12px rgba(245, 158, 11, 0.35);
}

.btn-confirm-override-danger:hover {
  background: linear-gradient(135deg, #fbbf24 0%, #b45309 100%) !important;
  box-shadow: 0 4px 18px rgba(245, 158, 11, 0.5);
  transform: translateY(-1px);
}

.btn-create-copy-success {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  font-weight: 700;
  border: 1px solid #34d399 !important;
  box-shadow: 0 2px 12px rgba(16, 185, 129, 0.35);
}

.btn-create-copy-success:hover {
  background: linear-gradient(135deg, #34d399 0%, #047857 100%) !important;
  box-shadow: 0 4px 18px rgba(16, 185, 129, 0.5);
  transform: translateY(-1px);
}

/* ==========================================================================
   MODAIS UNIVERSAIS DE DIÁLOGO (ALERT & CONFIRM CUSTOMIZADOS)
   ========================================================================== */
#modalSystemAlert,
#modalSystemConfirm,
#modalFeatureLocked {
  z-index: 105000 !important;
}

.modal-dialog-system-alert {
  max-width: 480px;
  width: 90%;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #0b1329;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.08);
  overflow: hidden;
  text-align: center;
}

.system-alert-header {
  padding: 16px 20px 10px 20px;
  border-bottom: none;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.system-brand-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.system-modal-logo {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  padding: 4px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.system-alert-header .modal-title {
  font-size: 16px;
  font-weight: 800;
  color: #f8fafc;
  letter-spacing: 0.2px;
}

.system-alert-header .btn-close-modal {
  position: absolute;
  top: 14px;
  right: 16px;
}

.system-alert-body {
  padding: 10px 24px 20px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.system-alert-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
}

.system-alert-icon-wrap.warning {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.35);
}

.system-alert-icon-wrap.danger {
  background: rgba(244, 63, 94, 0.15);
  border-color: rgba(244, 63, 94, 0.4);
}

.system-alert-icon-wrap.success {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.4);
}

.system-alert-message {
  font-size: 13.5px;
  color: #cbd5e1;
  line-height: 1.5;
  white-space: pre-line;
  word-break: break-word;
}

/* Rodape do visualizador rapido do nesting: o modal fica sobre o plano, entao o
   fundo e' proprio - e as acoes se dividem em DOIS grupos (exportar a' esquerda,
   fechar/modificar a' direita). Antes isso era tudo `style=` inline no HTML, e o
   `padding` inline vencia o ajuste do mobile. */
.modal-footer.nesting-shell-footer {
  background: rgba(15, 23, 42, 0.95);
  border-top-color: rgba(255, 255, 255, 0.08);
}

.system-alert-footer {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 14px 24px 20px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(15, 23, 42, 0.4);
}

.btn-system-alert-ok {
  min-width: 130px;
  min-height: 42px;
  font-size: 13.5px;
  font-weight: 700;
  border-radius: 10px;
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  border: 1px solid #38bdf8;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35);
}

.btn-system-confirm-proceed {
  min-width: 140px;
  min-height: 42px;
  font-size: 13.5px;
  font-weight: 700;
  border-radius: 10px;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  border: 1px solid #fbbf24;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35);
}

/* --------------------------------------------------------------------------
   MODAL DO PLANO DE ASSINATURA (SUPERADMIN) - GRADE DE MODULOS INCLUIDOS
   (.plan-mod-grid / .plan-mod-option / .plan-mod-check)

   O bloco "Moduli & Limiti Tecnici Inclusi" do modal #modalAdminEditPlan era
   7 <label> com style= inline dentro de um grid 1fr 1fr. Três regras legadas do
   styles.css - que são regras de AUTOR, sem escopo, então valem dentro do
   modal - destruíam a grade. Medido em 2026-09-24 com o modal aberto (viewport
   1440x900, diálogo de 650 px):

     1. `input, select { width:100%; min-height:38px; ... }` esticava o checkbox
        para 189,2 x 38 px no desktop (78,7 x 38 no celular) contra os 12,99 px
        naturais: ele comia 66% da célula e empurrava o texto para a borda
        direita, espremido em 67-101 px. As 7 opções quebravam em 2 linhas (duas
        delas em 3 linhas no celular);
     2. `label { margin-bottom:12px }` - o `display:flex` inline não alcança o
        margin, então o `gap:8px` declarado virava passo de 66 px para uma linha
        de 46 px (12 px de vão morto por linha, com o gutter de 8 px invisível);
     3. `label { font-size:12px }` - o `font-size:13px` do wrapper nunca chegava
        aos rótulos (regra direta vence herança).

   A classe reseta as três coisas de propósito, no mesmo espírito do `.check-row`
   da parte 20: componente que nasce dentro de <label> declara o que a base faz
   em vez de confiar nela.

   O texto fica como NÓ DE TEXTO, não <span>, de propósito: `label span` do
   styles.css é `position:absolute; top:36px; right:10px`, e um span aqui sairia
   do fluxo em vez de ficar ao lado do checkbox.

   Números que fixam o breakpoint: a célula precisa de 16 (checkbox) + 10 (gap) +
   187,7 (o rótulo de uma coluna mais longo, "Esportazione DXF 2D/3D (CAM)" a
   12,5 px) + 16 (padding) = 229,7 px. Duas colunas só cabem a partir de ~590 px
   de viewport, porque o diálogo é 92% e o .modal-body tem 20 px de padding.
   -------------------------------------------------------------------------- */
.plan-mod-grid {
  display: grid;
  /* minmax(0, ...) e não `1fr` puro: o piso do `1fr` é o min-content e um rótulo
     longo estufaria a coluna em vez de quebrar a linha. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 12px;
}

.plan-mod-option {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-width: 0;
  min-height: 34px;
  margin: 0;
  padding: 7px 8px;
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.35;
  color: #cbd5e1;
  cursor: pointer;
}

.plan-mod-option:hover {
  background: rgba(255, 255, 255, 0.04);
}

.plan-mod-option input[type="checkbox"] {
  flex: none;
  width: 16px;
  height: 16px;
  /* O `min-height:38px` legado vence o `height` do próprio elemento: sem zerar
     o min-height o quadrado sai 16 x 38. */
  min-height: 0;
  margin: 0;
  padding: 0;
  accent-color: var(--accent-gold);
  cursor: pointer;
}

/* A 7ª opção ("Flusso Approvazione Tecnica con Blocco di Produzione") ocupa a
   linha inteira: é a mais longa (314,6 px a 12 px) e não cabe em meia grade. */
.plan-mod-option.plan-mod-option-wide {
  grid-column: 1 / -1;
}

/* Opção solta "Visibile pubblicamente nella Landing Page": era um `.auth-group`
   com style= inline trocando só display/align-items/gap, mas o
   `flex-direction:column` do `.auth-group` continuava valendo - o checkbox
   ficava numa linha e o rótulo na linha de baixo. Medido: checkbox 18 x 38 (o
   `min-height:38px` legado vencia o `height:18px` inline). */
.auth-group.plan-mod-check {
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.auth-group.plan-mod-check input[type="checkbox"] {
  flex: none;
  width: 18px;
  height: 18px;
  min-height: 0;
  margin: 0;
  padding: 0;
  accent-color: var(--accent-gold);
  cursor: pointer;
}

.auth-group.plan-mod-check label {
  margin: 0;
  font-weight: 600;
  color: #f8fafc;
  cursor: pointer;
}

@media (max-width: 590px) {
  /* Em 2 colunas a 390 px a célula tem 160 px e o rótulo de 187,7 px quebraria
     sempre; em 1 coluna ele cabe em até 2 linhas. */
  .plan-mod-grid {
    grid-template-columns: 1fr;
  }

  .plan-mod-option {
    min-height: 44px;
  }
}

/* ========================================================================== */
/* INSPETOR CAD DE VENTAGLI EM TEMPO REAL (HUD & BADGES NOS INPUTS)           */
/* ========================================================================== */

/* Container para cada campo de leque no grid de 2 colunas */
/* Container para cada campo de leque no grid de 2 colunas */
.winder-field-wrap {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  position: relative !important;
  box-sizing: border-box !important;
}

.winder-field-wrap > label {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  margin: 0 !important;
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.winder-field-wrap > label > span:not(.field-label-text):not(.field-subnote) {
  position: absolute !important;
  right: 12px !important;
  bottom: 14px !important;
  top: auto !important;
  transform: none !important;
  font-size: 11.5px !important;
  color: #8a887f !important;
  pointer-events: none !important;
  line-height: 1 !important;
}

/* 1. Badges em Tempo Real nos Inputs de Sventagliatura */
.field-realtime-cut {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: 6px !important;
  padding: 5px 8px !important;
  background: rgba(15, 23, 42, 0.85) !important;
  border: 1px solid rgba(56, 189, 248, 0.3) !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace !important;
  color: #94a3b8 !important;
  line-height: 1.2 !important;
  user-select: none;
  cursor: pointer;
  transition: all 0.2s ease;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  position: relative !important;
}

.field-realtime-cut:hover {
  background: rgba(15, 23, 42, 0.98) !important;
  border-color: rgba(56, 189, 248, 0.7) !important;
  transform: translateY(-1px);
}

.field-realtime-cut span {
  position: static !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  pointer-events: auto !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
}

/* Em colunas estreitas de duas posições (Grid-Two), empilha em 2 linhas para nunca vazar */
.grid-two .field-realtime-cut {
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 2px !important;
  padding: 4px 6px !important;
}

.grid-two .field-realtime-cut .cut-badge-arrow {
  display: none !important;
}

.grid-two .field-realtime-cut span {
  font-size: 10px !important;
  line-height: 1.25 !important;
}

.cut-badge-floor {
  color: #94a3b8 !important;
}

.cut-badge-floor strong {
  color: #f1f5f9 !important;
  margin-left: 2px !important;
  margin-right: 2px !important;
}

.cut-badge-arrow {
  color: #38bdf8 !important;
  font-weight: bold !important;
}

.cut-badge-stone {
  color: #38bdf8 !important;
  font-weight: 600 !important;
}

.cut-badge-stone strong {
  color: #38bdf8 !important;
  font-weight: 800 !important;
  margin-left: 2px !important;
  margin-right: 2px !important;
}

/* Botão rápido para abrir inspetor CAD nos inputs (sem transbordar) */
.btn-winder-cad-quick {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 8px 12px !important;
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.2) 0%, rgba(3, 105, 161, 0.3) 100%) !important;
  border: 1px solid rgba(56, 189, 248, 0.4) !important;
  border-radius: 8px !important;
  color: #38bdf8 !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  text-align: center !important;
  white-space: normal !important;
  line-height: 1.3 !important;
}

.btn-winder-cad-quick:hover {
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.4) 0%, rgba(3, 105, 161, 0.5) 100%) !important;
  border-color: #38bdf8 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.25) !important;
}

/* I21 — Botão flutuante do Ispettore Ventaglio.
   Nasce oculto e aparece AO LADO do campo focado (o JS posiciona em `fixed` a
   partir do retângulo do campo). Fica um degrau abaixo do HUD (`z-index` 9998
   contra 9999) e nunca abre sozinho: o HUD só entra quando o cliente clica. */
.btn-float-winder-hud {
  position: fixed;
  z-index: 9998;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: linear-gradient(135deg, #0284c7, #0369a1);
  border: 1px solid rgba(56, 189, 248, 0.65);
  border-radius: 999px;
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(2, 132, 199, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-float-winder-hud:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(2, 132, 199, 0.5);
}

/* No celular a tela é estreita: fica só o ícone, com o rótulo no `aria-label`. */
@media (max-width: 767px) {
  .btn-float-winder-hud span {
    display: none;
  }

  .btn-float-winder-hud {
    padding: 10px 12px;
    font-size: 15px;
  }
}

/* 2. HUD Flutuante / Bottom Sheet (Mobile First & Desktop) */
.winder-inspector-hud {
  position: fixed;
  z-index: 9999;
  background: #0b1120;
  border: 1px solid rgba(56, 189, 248, 0.3);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}

/* Mobile: Bottom Sheet Deslizante */
/* Mobile: Top-Docked HUD (Ancorado no Topo da tela, logo abaixo da Topbar) */
@media (max-width: 767px) {
  .winder-inspector-hud {
    top: calc(56px + env(safe-area-inset-top, 0px));
    bottom: auto;
    left: 0;
    right: 0;
    width: 100%;
    height: 250px;
    max-height: 40vh;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid rgba(56, 189, 248, 0.35);
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 2px 8px rgba(56, 189, 248, 0.2);
  }

  /* No mobile, oculta o texto longo "Ispettore Ventaglio" para que os 4 botões de ação caibam folgados sem colisão */
  .winder-hud-brand-title {
    display: none;
  }
}

/* Desktop & Tablet Landscape: Card Picture-in-Picture no canto inferior direito */
@media (min-width: 768px) {
  .winder-inspector-hud {
    top: auto;
    bottom: 24px;
    right: 24px;
    width: 480px;
    height: 385px;
    border-radius: 14px;
  }
}

/* Header do HUD (Linha 1: Identidade e Ações Globais) */
.winder-hud-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 12px;
  background: #0f172a;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  min-height: 44px;
  box-sizing: border-box;
}

.winder-hud-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}

.winder-hud-badge {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.3);
  white-space: nowrap;
  flex-shrink: 0;
}

.winder-hud-brand-title {
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
  color: #f1f5f9;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* Barra Dedicada do Degrau (Linha 2: Navegação e Nome Completo Sem Cortes) */
.winder-hud-step-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 10px;
  background: #0b1120;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  min-height: 34px;
  box-sizing: border-box;
}

.winder-hud-step-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
}

.winder-hud-title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: #38bdf8;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.winder-hud-indicator {
  font-size: 10.5px;
  font-weight: 700;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1px 6px;
  border-radius: 10px;
  font-family: 'JetBrains Mono', monospace;
  user-select: none;
  white-space: nowrap;
}

.btn-hud-nav {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  font-size: 11px;
  cursor: pointer;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  line-height: 1;
  transition: all 0.15s ease;
  padding: 0;
  flex-shrink: 0;
}

.btn-hud-nav:hover {
  background: rgba(56, 189, 248, 0.2);
  border-color: rgba(56, 189, 248, 0.5);
  color: #ffffff;
}

/* Ações do HUD (Padronização de Altura e Estilo) */
.winder-hud-actions {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.btn-hud-action {
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 9px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  color: #cbd5e1;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  box-sizing: border-box;
  white-space: nowrap;
}

.btn-hud-action:hover {
  background: rgba(56, 189, 248, 0.15);
  border-color: rgba(56, 189, 248, 0.4);
  color: #ffffff;
}

.btn-hud-action-close {
  width: 30px !important;
  min-width: 30px !important;
  padding: 0 !important;
  font-size: 14px !important;
}

.btn-hud-action-close:hover {
  background: rgba(239, 68, 68, 0.2) !important;
  border-color: rgba(239, 68, 68, 0.5) !important;
  color: #ef4444 !important;
}

/* Corpo e Container CAD do HUD */
.winder-hud-body {
  flex: 1 1 0%;
  min-height: 180px;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0a0f1d;
}

.winder-hud-cad-container {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* Toolbar interna do CAD escondida no HUD compacto para maximizar o desenho */
.winder-hud-cad-container .cad-floating-toolbar {
  display: none !important;
}

/* Footer com Legenda e Métricas em Linhas Dedicadas */
.winder-hud-footer {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 6px 12px;
  background: #0f172a;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  box-sizing: border-box;
}

.winder-hud-metrics-bar {
  font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
  font-size: 11px;
  font-weight: 600;
  color: #38bdf8;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(56, 189, 248, 0.2);
  border-radius: 5px;
  padding: 3px 8px;
  white-space: nowrap;
  overflow-x: auto;
  line-height: 1.3;
}

.winder-hud-metrics-bar:empty {
  display: none;
}

.winder-hud-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}

.hud-legend-chip {
  font-size: 10px;
  font-weight: 600;
  height: 20px;
  padding: 0 7px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  white-space: nowrap;
  user-select: none;
  box-sizing: border-box;
}

.legend-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.hud-legend-chip.chip-floor {
  background: rgba(148, 163, 184, 0.12);
  border: 1px solid rgba(148, 163, 184, 0.25);
  color: #cbd5e1;
}

.legend-dot.dot-floor {
  background: #94a3b8;
}

.hud-legend-chip.chip-stone {
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: #38bdf8;
}

.legend-dot.dot-stone {
  background: #38bdf8;
}

.hud-legend-chip.chip-dim {
  background: rgba(250, 204, 21, 0.12);
  border: 1px solid rgba(250, 204, 21, 0.3);
  color: #facc15;
}

.legend-dot.dot-dim {
  background: #facc15;
}

/* ==========================================================================
   GUARDA: TABELAS DE IMPRESSAO CONTINUAM TABELAS
   --------------------------------------------------------------------------
   A area imprimivel de uma A4 tem ~718 px. Isso significa que TODA regra de
   `@media (max-width: N)` com N > 718 tambem alcanca o papel — e uma receita de
   "tabela responsiva" (`table { display: block; white-space: nowrap }`) faz o
   navegador IGNORAR `<colgroup>`/`table-layout: fixed`: as colunas passam a ser
   dimensionadas pelo conteudo e o excedente sai cortado pelo `overflow: hidden`
   do documento. Foi exatamente o defeito medido (980 px de colunas dentro de
   uma caixa de 698 px) no "Composizione Preventivo Marmista".

   A causa foi fechada na origem (`styles.css`: o bloco virou `@media screen`).
   Esta guarda e' a segunda linha de defesa: qualquer regra futura de largura
   estreita que volte a alcancar o papel bate aqui.
   ========================================================================== */
@media print {
  #printQuoteDocument table,
  #cuttingListPrintMount table,
  #groupQuotePrintMount table {
    display: table !important;
    white-space: normal !important;
  }

  #printQuoteDocument thead,
  #cuttingListPrintMount thead,
  #groupQuotePrintMount thead {
    display: table-header-group !important;
  }

  #printQuoteDocument tbody,
  #cuttingListPrintMount tbody,
  #groupQuotePrintMount tbody {
    display: table-row-group !important;
  }

  #printQuoteDocument tfoot,
  #cuttingListPrintMount tfoot,
  #groupQuotePrintMount tfoot {
    display: table-footer-group !important;
  }

  #printQuoteDocument tr,
  #cuttingListPrintMount tr,
  #groupQuotePrintMount tr {
    display: table-row !important;
  }

  /* `:not(.shell)` de proposito: as colunas de acao do documento usam
     `class="shell"` e o `styles.css` (bloco de impressao) esconde `.shell` no
     papel. Sem esta exclusao a guarda RESSUSCITAVA a coluna "Azioni" (com o
     botao "✨ Lavorazioni") e ela vazava 4,5 mm — medido. */
  #printQuoteDocument th:not(.shell),
  #printQuoteDocument td:not(.shell),
  #cuttingListPrintMount th:not(.shell),
  #cuttingListPrintMount td:not(.shell),
  #groupQuotePrintMount th:not(.shell),
  #groupQuotePrintMount td:not(.shell) {
    display: table-cell !important;
  }
}

/* ==========================================================================
   PRINT / PDF PREVENTIVO DI OPERA (ESCALAS AGRUPADAS POR CANTIERE)
   --------------------------------------------------------------------------
   Mesmo mecanismo do corte e da ordem de producao: o modulo `groupQuotePdf.js`
   monta o documento em #groupQuotePrintMount, liga `is-printing-group-quote` e
   chama window.print(). O `50-pecas-uv-abas.css` ja' esconde o resto do app;
   aqui mora o desenho do documento em papel.
   ========================================================================== */

.group-quote-print-mount {
  display: none;
}

@media print {
  @page {
    size: A4 portrait;
    margin: 12mm 10mm 14mm 10mm;
  }

  .group-quote-print-container {
    width: 100% !important;
    max-width: 100% !important;
    background: #ffffff !important;
    color: #0f172a !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  .gq-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    border-bottom: 2px solid #0f172a !important;
    padding-bottom: 10px !important;
    margin-bottom: 12px !important;
    page-break-inside: avoid !important;
  }

  .gq-brand {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }

  .gq-logo {
    width: 46px !important;
    height: 46px !important;
    object-fit: contain !important;
  }

  .gq-company-badge {
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    color: #0f766e !important;
  }

  .gq-company {
    margin: 2px 0 0 0 !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
  }

  .gq-sub {
    margin: 6px 0 0 0 !important;
    font-size: 10px !important;
    color: #475569 !important;
  }

  .gq-code {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 2px !important;
    font-size: 9.5px !important;
    color: #334155 !important;
  }

  .gq-card {
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    padding: 10px !important;
    margin-bottom: 12px !important;
    page-break-inside: avoid !important;
  }

  .gq-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px 14px !important;
  }

  /* Item de grid nasce com min-width: auto — o conteudo vira piso de largura e
     empurra o grid para fora da folha. Zero aqui e a rede de seguranca. */
  .gq-grid > *,
  .gq-grid-3 > *,
  .gq-schede > *,
  .gq-scheda-grid > * {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
  }

  .gq-grid-3 {
    grid-template-columns: 1fr 1fr 1fr !important;
  }

  .gq-cell {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
  }

  .gq-label {
    font-size: 8.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    color: #64748b !important;
  }

  .gq-value {
    font-size: 10.5px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
  }

  .gq-value.highlight {
    color: #0f766e !important;
    font-weight: 800 !important;
  }

  .gq-value-money {
    color: #0f766e !important;
    font-weight: 800 !important;
  }

  .gq-section-title {
    font-size: 10.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em !important;
    color: #0f172a !important;
    background: #f1f5f9 !important;
    border-left: 3px solid #0f766e !important;
    padding: 5px 8px !important;
    margin: 12px 0 6px 0 !important;
    page-break-after: avoid !important;
  }

  /* `table-layout: fixed` + larguras declaradas no <colgroup> do modulo: a
     largura deixa de depender do conteudo. Sem isso, 9 colunas de cabecalho em
     maiuscula pedem mais que a area imprimivel (medido: 202,8 mm de colunas
     numa folha de 188,6 mm) e as ultimas saem cortadas no papel. */
  .gq-table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
    margin-bottom: 10px !important;
  }

  .gq-table th {
    background: #0f172a !important;
    color: #ffffff !important;
    font-size: 8.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 5px 6px !important;
    text-align: center !important;
    overflow-wrap: anywhere !important;
    hyphens: auto !important;
  }

  .gq-table td {
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 5px 6px !important;
    font-size: 10px !important;
    color: #0f172a !important;
    vertical-align: top !important;
    text-align: center !important;
    overflow-wrap: anywhere !important;
  }

  .gq-cell-sub {
    display: block !important;
    font-size: 8px !important;
    color: #64748b !important;
    margin-top: 1px !important;
  }

  .gq-col-num {
    text-align: center !important;
    white-space: nowrap !important;
    font-variant-numeric: tabular-nums !important;
  }

  .gq-th-num {
    text-align: center !important;
    white-space: normal !important;
  }

  .gq-col-money {
    font-weight: 800 !important;
  }

  .gq-totais td {
    background: #f8fafc !important;
    border-top: 2px solid #0f172a !important;
    border-bottom: 2px solid #0f172a !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
  }

  .gq-alert {
    border: 1px solid #f59e0b !important;
    background: #fffbeb !important;
    color: #92400e !important;
    border-radius: 6px !important;
    padding: 7px 10px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    margin-bottom: 10px !important;
  }

  .gq-schede {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .gq-scheda {
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    padding: 8px !important;
    page-break-inside: avoid !important;
  }

  .gq-scheda-head {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 8px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding-bottom: 4px !important;
    margin-bottom: 6px !important;
  }

  .gq-scheda-letra {
    font-size: 9.5px !important;
    font-weight: 800 !important;
    color: #0f766e !important;
    text-transform: uppercase !important;
  }

  .gq-scheda-nome {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
  }

  .gq-scheda-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 4px 10px !important;
    font-size: 9.5px !important;
  }

  .gq-note {
    border: 1px dashed #94a3b8 !important;
    border-radius: 6px !important;
    padding: 7px 10px !important;
    font-size: 9.5px !important;
    color: #334155 !important;
    margin: 12px 0 !important;
    page-break-inside: avoid !important;
  }

  .gq-sign {
    display: flex !important;
    justify-content: space-between !important;
    gap: 24px !important;
    margin-top: 18px !important;
    page-break-inside: avoid !important;
  }

  .gq-sign-box {
    flex: 1 !important;
    border-top: 1px solid #0f172a !important;
    padding-top: 4px !important;
    font-size: 8.5px !important;
    font-weight: 700 !important;
    color: #334155 !important;
    text-align: center !important;
  }
}

/* ==========================================================================
   VITRINE DE PLANOS & PROVA GRATUITA (MODAL RICHIESTA DI ACCESSO)
   ========================================================================== */
.modal-dialog-access-plans {
  background: #090f1d !important;
  border: 1px solid rgba(56, 189, 248, 0.25) !important;
  border-radius: 20px !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}

.plan-cycle-toggle-wrapper {
  display: inline-flex;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 30px;
  padding: 4px;
  gap: 4px;
}

.btn-cycle-option {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 18px;
  border-radius: 24px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.btn-cycle-option.is-active {
  background: #0284c7;
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(2, 132, 199, 0.4);
}

.badge-cycle-discount {
  background: #10b981;
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 10px;
  text-transform: uppercase;
}

.access-plan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 8px;
}

@media (max-width: 820px) {
  .access-plan-grid {
    grid-template-columns: 1fr;
  }
}

.access-plan-card {
  position: relative;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.22s ease-in-out;
}

.access-plan-card:hover {
  border-color: rgba(56, 189, 248, 0.4);
  transform: translateY(-2px);
  background: rgba(15, 23, 42, 0.85);
}

.access-plan-card.is-popular {
  border-color: rgba(56, 189, 248, 0.45);
  background: rgba(12, 28, 54, 0.7);
}

.access-plan-card.is-selected {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 24px rgba(56, 189, 248, 0.28), inset 0 0 0 1px #38bdf8 !important;
  background: rgba(14, 34, 66, 0.9) !important;
}

.popular-ribbon {
  position: absolute;
  top: -11px;
  right: 16px;
  background: linear-gradient(135deg, #0284c7, #38bdf8);
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.4px;
  padding: 3px 10px;
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.4);
}

.access-plan-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 6px;
  margin-bottom: 10px;
}

.badge-starter {
  background: rgba(148, 163, 184, 0.15);
  color: #cbd5e1;
  border: 1px solid rgba(148, 163, 184, 0.3);
}

.badge-pro {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.35);
}

.badge-enterprise {
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.35);
}

.access-plan-title {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 800;
  color: #ffffff;
}

.access-plan-price-wrap {
  display: flex;
  align-items: baseline;
  gap: 3px;
  margin-bottom: 4px;
}

.access-plan-currency {
  font-size: 18px;
  font-weight: 700;
  color: #38bdf8;
}

.access-plan-amount {
  font-size: 32px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -0.5px;
}

.access-plan-period {
  font-size: 13px;
  color: #94a3b8;
  font-weight: 500;
}

.access-plan-subtext {
  font-size: 11.5px;
  color: #64748b;
  margin-bottom: 14px;
  min-height: 28px;
}

.access-plan-features {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  font-size: 12.5px;
  color: #cbd5e1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.access-plan-features li {
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.3;
}

.feat-check {
  color: #34d399;
  font-weight: 800;
  font-size: 13px;
}

.feat-highlight {
  color: #38bdf8 !important;
}

.feat-cross {
  color: #64748b;
  font-weight: 700;
  font-size: 11px;
}

.feat-disabled {
  color: #64748b !important;
  opacity: 0.7;
}

.btn-select-plan {
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: #e2e8f0;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.access-plan-card.is-selected .btn-select-plan {
  background: #0284c7;
  border-color: #38bdf8;
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(2, 132, 199, 0.4);
}

.auth-grid-two-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 640px) {
  .auth-grid-two-cols {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   VITRINE DE PLANOS: A VIDA DO MODAL — animação, garantias e SUCESSO

   O que esta seção resolve (relato do dono do produto, 2026-10-04): "quando é
   enviado a solicitação tem um card no alto que diz que foi enviado, mas não se
   vê porque estamos com scroll baixo, às vezes não fecha".

   São dois defeitos reais, e cada bloco abaixo responde a um:

   1. A confirmação nascia no TOPO do `.modal-body` — exatamente o elemento que
      rola. Com o formulário preenchido o visitante está no fim do scroll (o
      botão de envio mora no rodapé), então a faixa nascia fora da área visível,
      e um `setTimeout` de 3s fechava um modal que ninguém sabia ter confirmado.
      Resposta: `.access-success` cobre o DIÁLOGO INTEIRO (não há scroll
      possível) e quem manda fechar é o usuário.

   2. O modal parecia uma tela morta até o banco responder. Resposta: entradas
      curtas (cards, tela de sucesso, passos) e o pulso do campo inválido
      apontando o que falta preencher.

   Todas as animações respeitam `prefers-reduced-motion` (bloco no fim).
   ========================================================================== */
.access-plan-note {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  margin: 12px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: #7dd3fc;
}

/* Selos de tranquilidade do rodapé: cada um responde a uma objeção de quem está
   prestes a entregar os dados da empresa. */
.access-trial-guarantees {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  font-size: 12px;
  color: #94a3b8;
}

.access-trial-guarantees strong {
  color: #e2e8f0;
  font-weight: 700;
}

/* Entrada dos cards. Quem liga é o `UIManager`, que põe `is-revealing` no modal
   ao abrir e tira depois. Sem essa classe a grade não anima — e isso é de
   propósito: a vitrine é remontada por `innerHTML` quando o banco responde
   (~300ms depois), e sem a trava a animação reiniciaria na cara do usuário. */
#modalAccessRequest.is-revealing .access-plan-card {
  animation: accessCardIn 0.42s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}

#modalAccessRequest.is-revealing .access-plan-card:nth-child(2) { animation-delay: 0.07s; }
#modalAccessRequest.is-revealing .access-plan-card:nth-child(3) { animation-delay: 0.14s; }

@keyframes accessCardIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

/* Brilho que atravessa o CTA principal — o único movimento perpétuo da tela. */
.btn-submit-trial {
  position: relative;
  overflow: hidden;
}

.btn-submit-trial::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 42%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.38), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  animation: accessShine 4.2s ease-in-out 1.4s infinite;
}

@keyframes accessShine {
  0% { left: -60%; }
  45% { left: 130%; }
  100% { left: 130%; }
}

/* A faixa de erro/aviso nasce no topo do corpo rolável: o JS a traz para a vista
   (é lá que o usuário está) e este pulso confirma que a mensagem mudou. */
#accessRequestFeedback.is-flashing {
  animation: accessFeedbackFlash 0.42s ease-out;
}

@keyframes accessFeedbackFlash {
  0% { transform: scale(0.985); }
  55% { transform: scale(1.012); }
  100% { transform: none; }
}

/* Campo que a validação apontou. O anel permanece enquanto a classe estiver nele
   (o JS a tira no primeiro toque do usuário e ao reabrir o modal). */
.access-field-invalid {
  border-color: #f43f5e !important;
  box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.18) !important;
  animation: accessFieldPulse 0.7s ease-out;
}

@keyframes accessFieldPulse {
  0% { box-shadow: 0 0 0 0 rgba(244, 63, 94, 0.45); }
  100% { box-shadow: 0 0 0 10px rgba(244, 63, 94, 0); }
}

/* --------------------------------------------------------------------------
   TELA DE SUCESSO DA RICHIESTA (cobre o diálogo inteiro)

   Nasce `hidden` e é irmã do `<form>`: `.modal-dialog` já é `position: relative`
   e `overflow: hidden`, então `inset: 0` a recorta no arredondamento do cartão.
   Como ela cobre também o cabeçalho, o ✕ fica fora de alcance de propósito — a
   saída é o botão grande e o backdrop (ou Esc, no desktop).
   -------------------------------------------------------------------------- */
.access-success {
  position: absolute;
  inset: 0;
  z-index: 30;
  overflow-y: auto;
  padding: 26px 22px;
  background:
    radial-gradient(circle at 50% 0%, rgba(16, 185, 129, 0.16), transparent 62%),
    linear-gradient(180deg, #0b1526 0%, #070c17 100%);
  animation: accessSuccessIn 0.32s ease-out both;
}

/* `[hidden]` precisa vencer o `display` do painel (a classe tem a mesma
   especificidade do atributo, e a folha do autor vem depois da do navegador). */
.access-success[hidden] {
  display: none;
}

.access-success-inner {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.access-success-glow {
  position: absolute;
  top: -150px;
  left: 50%;
  width: 420px;
  height: 420px;
  margin-left: -210px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.3), rgba(16, 185, 129, 0) 68%);
  pointer-events: none;
  animation: accessGlowPulse 3.4s ease-in-out infinite;
}

.access-success-check svg {
  width: 84px;
  height: 84px;
  display: block;
  animation: accessCheckPop 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.3) both;
}

.access-success-check-ring {
  fill: none;
  stroke: rgba(52, 211, 153, 0.4);
  stroke-width: 2;
  stroke-dasharray: 145;
  stroke-dashoffset: 145;
  animation: accessRingDraw 0.7s ease-out 0.06s forwards;
}

.access-success-check-mark {
  fill: none;
  stroke: #34d399;
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 36;
  stroke-dashoffset: 36;
  animation: accessCheckDraw 0.42s ease-out 0.4s forwards;
}

.access-success-title {
  margin: 16px 0 0;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.4px;
  color: #ffffff;
}

.access-success-text {
  margin: 8px 0 0;
  max-width: 470px;
  font-size: 14px;
  line-height: 1.55;
  color: #cbd5e1;
}

.access-success-text strong {
  color: #7dd3fc;
}

.access-success-steps {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  width: 100%;
  max-width: 470px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}

.access-success-steps li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.72);
  animation: accessStepIn 0.4s ease-out both;
}

.access-success-steps li:nth-child(1) { animation-delay: 0.32s; }
.access-success-steps li:nth-child(2) { animation-delay: 0.42s; }
.access-success-steps li:nth-child(3) { animation-delay: 0.52s; }

.access-success-step-num {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(16, 185, 129, 0.16);
  border: 1px solid rgba(16, 185, 129, 0.45);
  color: #34d399;
  font-size: 12.5px;
  font-weight: 800;
}

.access-success-steps strong {
  display: block;
  font-size: 13.5px;
  color: #f1f5f9;
}

.access-success-steps div > span {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.45;
  color: #94a3b8;
}

.access-success-actions {
  margin-top: 24px;
}

.access-success-actions .btn-primary {
  min-height: 46px;
  padding: 10px 26px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 0 24px rgba(56, 189, 248, 0.35);
}

.access-success-note {
  margin: 14px 0 0;
  max-width: 430px;
  font-size: 12px;
  line-height: 1.5;
  color: #64748b;
}

@keyframes accessSuccessIn {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

@keyframes accessGlowPulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}

@keyframes accessCheckPop {
  from { opacity: 0; transform: scale(0.6); }
  60% { transform: scale(1.06); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes accessRingDraw {
  to { stroke-dashoffset: 0; }
}

@keyframes accessCheckDraw {
  to { stroke-dashoffset: 0; }
}

@keyframes accessStepIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 640px) {
  .access-success {
    padding: 20px 16px;
  }

  .access-success-title {
    font-size: 19px;
  }

  .access-success-steps li {
    padding: 10px 12px;
  }
}

/* Quem pediu menos movimento não perde nenhuma informação: as animações somem e
   as linhas desenhadas do check aparecem prontas. */
@media (prefers-reduced-motion: reduce) {
  .access-plan-card,
  .access-success,
  .access-success-glow,
  .access-success-check svg,
  .access-success-steps li,
  .btn-submit-trial::after,
  #accessRequestFeedback.is-flashing,
  .access-field-invalid {
    animation: none !important;
  }

  .access-success-check-ring,
  .access-success-check-mark {
    stroke-dashoffset: 0 !important;
  }
}

/* ==========================================================================
   MODAL DE ESCOLHA DE IDIOMA (#modalLanguageChoice)
   --------------------------------------------------------------------------
   A grade e' montada por JS (uma fonte unica: LANGUAGES em src/i18n.js), entao
   aqui so' mora a apresentacao. Duas colunas no desktop, uma no celular — em
   520px dois nomes longos ("Portugues (Brasil)") quebrariam em duas linhas.
   ========================================================================== */
.lang-choice-hint {
  margin: 0 0 14px;
  font-size: 13.5px;
  color: #cbd5e1;
}

.lang-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.lang-choice-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: #f1f5f9;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.lang-choice-card:hover {
  border-color: var(--accent-gold);
  background: rgba(30, 41, 59, 0.9);
  transform: translateY(-1px);
}

.lang-choice-card:focus-visible {
  outline: none;
  border-color: var(--accent-gold);
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.4);
}

/* Idioma ativo hoje: o mesmo destaque do seletor da topbar, para o visitante
   reconhecer de onde a escolha parte. */
.lang-choice-card.is-current {
  border-color: var(--accent-gold);
  box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.35);
}

.lang-choice-flag {
  width: 32px;
  height: 22px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.lang-choice-flag svg {
  width: 100%;
  height: 100%;
  display: block;
}

.lang-choice-name {
  flex: 1;
}

.lang-choice-note {
  margin: 14px 0 0;
  font-size: 11.5px;
  color: #94a3b8;
}

@media (max-width: 520px) {
  .lang-choice-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lang-choice-card {
    transition: none;
  }
}







/* ==========================================================================
   MODAL PIETRE PER FASCIA (curva C)
   --------------------------------------------------------------------------
   A divisao de cada faixa da curva C pelo usuario: uma linha por faixa, com o
   numero de pecas e a medida de cada peca. Nada de `prompt`/`confirm` do
   navegador — o desenho e' o do app (mesmas cores, mesmos botoes).
   ========================================================================== */

.pietre-fascia-overlay {
  position: fixed;
  inset: 0;
  z-index: 160000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.58);
  backdrop-filter: blur(2px);
}

.pietre-fascia-modal {
  width: 100%;
  max-width: 760px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 22px 18px;
  border-radius: 16px;
  background: var(--surface, #ffffff);
  color: var(--text, #1e293b);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35);
  border: 1px solid rgba(148, 163, 184, 0.35);
  overflow: hidden;
}

.pietre-fascia-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pietre-fascia-header h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.pietre-fascia-close {
  border: none;
  background: transparent;
  color: inherit;
  font-size: 1.05rem;
  line-height: 1;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
}

.pietre-fascia-close:hover {
  background: rgba(148, 163, 184, 0.2);
}

.pietre-fascia-intro {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text-muted, #64748b);
}

.pietre-fascia-table {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 12px;
  overflow: hidden;
  min-height: 0;
}

.pietre-fascia-rows {
  overflow: auto;
  max-height: 46vh;
}

.pietre-fascia-row {
  display: grid;
  grid-template-columns: 92px 108px 168px 1fr;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-top: 1px solid rgba(148, 163, 184, 0.22);
  font-size: 0.82rem;
}

.pietre-fascia-head {
  border-top: none;
  background: rgba(148, 163, 184, 0.14);
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted, #64748b);
}

.pietre-fascia-row.is-custom {
  background: rgba(56, 189, 248, 0.08);
}

.pietre-fascia-row.is-changed {
  background: rgba(250, 204, 21, 0.16);
}

.pietre-fascia-row input {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid rgba(148, 163, 184, 0.5);
  border-radius: 8px;
  font: inherit;
  font-size: 0.82rem;
  background: var(--surface, #fff);
  color: inherit;
}

.pietre-fascia-row input:focus {
  outline: 2px solid rgba(56, 189, 248, 0.6);
  outline-offset: 1px;
}

.pietre-fascia-nivel {
  font-weight: 700;
}

.pietre-fascia-resultado {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.78rem;
  color: var(--text, #1e293b);
  overflow-wrap: anywhere;
}

.pietre-fascia-resultado.is-alerta {
  color: #b45309;
}

.pietre-fascia-applyall {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.8rem;
}

.pietre-fascia-applyall-label {
  font-weight: 700;
}

.pietre-fascia-mini {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pietre-fascia-mini input {
  width: 84px;
  padding: 6px 8px;
  border: 1px solid rgba(148, 163, 184, 0.5);
  border-radius: 8px;
  font: inherit;
  font-size: 0.8rem;
  background: var(--surface, #fff);
  color: inherit;
}

.pietre-fascia-foot {
  min-height: 18px;
  font-size: 0.78rem;
  color: var(--text-muted, #64748b);
}

.pietre-fascia-foot .is-alerta {
  color: #b45309;
  font-weight: 600;
}

.pietre-fascia-footer {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pietre-fascia-spacer {
  flex: 1;
}

.pietre-fascia-btn {
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.5);
  background: var(--surface, #fff);
  color: inherit;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.pietre-fascia-btn:hover {
  background: rgba(148, 163, 184, 0.18);
}

.pietre-fascia-btn-primary {
  background: #0f766e;
  border-color: #0f766e;
  color: #ffffff;
}

.pietre-fascia-btn-primary:hover {
  background: #115e59;
}

/* O campo da sidebar (Pietre per fascia) deixa de ser digitado e passa a ABRIR o
   modal: a divisao de verdade agora e' por faixa, e um numero solto nao conta
   essa historia. O valor continua mostrando o estado (n pecas ou misto). */
#curvaCParts[readonly] {
  cursor: pointer;
  background: rgba(148, 163, 184, 0.12);
}

/* O botao que abre este modal mora no painel esquerdo (campo "Pietre per fascia").
   Ele saia BRANCO no tema escuro: `var(--surface, #fff)` caia no fallback porque
   `--surface` so' existe em `.app-topbar` — medido em 2026-10-13, fundo
   rgb(255,255,255) contra rgb(19,26,41) do campo ao lado. Agora usa os MESMOS
   tokens dos outros controles do painel. */
.pietre-fascia-open-btn {
  margin-top: 4px;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid var(--border-color, rgba(36, 48, 71, 1));
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary, #94a3b8);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
}

.pietre-fascia-open-btn:hover {
  background: rgba(56, 189, 248, 0.14);
  border-color: rgba(56, 189, 248, 0.5);
  color: #e0f2fe;
}

@media (max-width: 640px) {
  .pietre-fascia-row {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "nivel resultado"
      "partes medida";
  }

  .pietre-fascia-row > .pietre-fascia-nivel { grid-area: nivel; }
  .pietre-fascia-row > .pietre-fascia-resultado { grid-area: resultado; }
}

/* ==========================================================================
   FAIXA «PEZZO k/M» DO EDITOR DE LAVORAZIONI
   --------------------------------------------------------------------------
   O nivel do corte a 45 graus e a faixa da curva C tem mais de uma pedra de
   serra: a faixa diz qual delas esta' aberta e troca sem fechar o modal.
   ========================================================================== */

.edge-piece-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 16px;
  background: #e2e8f0;
  border-bottom: 1px solid #cbd5e1;
}

.edge-piece-btn {
  padding: 6px 14px;
  font-weight: 600;
  font-size: 0.82rem;
  border-radius: 999px;
  border: 1px solid #94a3b8;
  background: #f8fafc;
  color: #334155;
  cursor: pointer;
}

.edge-piece-btn:hover {
  background: #e2e8f0;
}

.edge-piece-btn.active {
  background: #0f766e;
  border-color: #0f766e;
  color: #ffffff;
}/* ==========================================================================
   LASTRACHAT — botao flutuante e painel de conversa
   --------------------------------------------------------------------------
   Segue o padrao de contencao de HUD do projeto
   (docs/padrao-alinhamento-ui-hud-botoes.md): card flutuante no canto inferior
   direito no desktop, aba presa na base no celular. Usa os tokens de
   `00-tokens-e-base.css`, nao cores soltas.

   z-index: 110000 — acima do HUD do inspetor CAD (105000), abaixo do modal
   «Pietre per fascia» (160000) e dos spinners (150000/200000): o chat e' uma
   ajuda, nunca pode cobrir um aviso do sistema.

   O brilho de "piscar o campo" (`.lastrachat-piscar`) e' a unica animacao, e
   ela respeita `prefers-reduced-motion`: quem pediu menos movimento recebe um
   contorno parado, que ainda mostra ONDE e'.
   ========================================================================== */

.lastrachat-fab {
  position: fixed;
  right: calc(18px + var(--safe-r, 0px));
  bottom: calc(18px + var(--safe-b, 0px));
  z-index: 110000;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 15px 0 12px;
  border: 1px solid rgba(56, 189, 248, 0.45);
  border-radius: 22px;
  background: linear-gradient(135deg, #0f172a 0%, #16233c 100%);
  color: var(--text-primary, #fff);
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.55);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.lastrachat-fab:hover,
.lastrachat-fab:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(56, 189, 248, 0.9);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.6);
}

.lastrachat-fab:active {
  transform: translateY(0);
}

.lastrachat-fab-icone {
  font-size: 16px;
  line-height: 1;
}

/* Com o painel aberto o botao sai da frente: no celular a aba cobre a base
   inteira, e no desktop os dois ficariam um sobre o outro. */
.lastrachat-fab[hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   PAINEL
   -------------------------------------------------------------------------- */
.lastrachat-painel {
  position: fixed;
  z-index: 110000;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background: var(--bg-surface, #131a29);
  border: 1px solid var(--border-color, #243047);
  color: var(--text-primary, #fff);
  font-family: var(--font-sans);
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.62);
  overflow: hidden;
}

.lastrachat-painel[hidden] {
  display: none;
}

@media (min-width: 768px) {
  .lastrachat-painel {
    right: 18px;
    bottom: 18px;
    width: 400px;
    height: 520px;
    max-height: calc(100vh - 36px);
    border-radius: 14px;
  }
}

@media (max-width: 767px) {
  .lastrachat-painel {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 480px;
    max-height: 78vh;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    border-bottom: none;
    padding-bottom: var(--safe-b, 0px);
  }
}

/* --------------------------------------------------------------------------
   CABECALHO
   -------------------------------------------------------------------------- */
.lastrachat-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  padding: 7px 10px 7px 12px;
  box-sizing: border-box;
  background: var(--bg-surface-elevated, #1b2438);
  border-bottom: 1px solid var(--border-subtle, #1e283d);
  flex: 0 0 auto;
}

.lastrachat-marca {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}

.lastrachat-badge {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(56, 189, 248, 0.15);
  color: var(--accent-cyan, #38bdf8);
  border: 1px solid rgba(56, 189, 248, 0.3);
  white-space: nowrap;
  flex-shrink: 0;
}

.lastrachat-titulo {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary, #fff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lastrachat-acoes {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

/* Botao quadrado de icone unico: largura = altura (padrao §1.4 do guia). */
.lastrachat-icone-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--border-color, #243047);
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary, #94a3b8);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.lastrachat-icone-btn:hover,
.lastrachat-icone-btn:focus-visible {
  background: rgba(255, 255, 255, 0.07);
  color: var(--text-primary, #fff);
}

/* --------------------------------------------------------------------------
   CONVERSA
   -------------------------------------------------------------------------- */
.lastrachat-log {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lastrachat-msg {
  max-width: 88%;
  padding: 9px 11px;
  border-radius: 12px;
  font-size: 12.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  box-sizing: border-box;
}

.lastrachat-msg-cliente {
  align-self: flex-end;
  background: rgba(56, 189, 248, 0.16);
  border: 1px solid rgba(56, 189, 248, 0.32);
  color: var(--text-primary, #fff);
  border-bottom-right-radius: 4px;
}

.lastrachat-msg-assistente {
  align-self: flex-start;
  background: var(--bg-card, #161e2e);
  border: 1px solid var(--border-subtle, #1e283d);
  color: var(--text-primary, #fff);
  border-bottom-left-radius: 4px;
}

.lastrachat-msg-erro {
  align-self: flex-start;
  background: rgba(244, 63, 94, 0.12);
  border: 1px solid rgba(244, 63, 94, 0.35);
  color: #fecdd3;
}

/* Onde o cliente esta' agora, quando a resposta depende da tipologia. */
.lastrachat-msg-nota {
  display: block;
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--text-muted, #64748b);
}

/* Botoes "vao ate' o campo": e' o pedido do cliente — "clique aqui e abre
   piscando o que ele precisa". */
.lastrachat-ir {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  margin: 2px 0 0;
  padding: 6px 10px;
  border: 1px solid rgba(56, 189, 248, 0.4);
  border-radius: 16px;
  background: rgba(56, 189, 248, 0.1);
  color: var(--accent-cyan, #38bdf8);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.lastrachat-ir:hover,
.lastrachat-ir:focus-visible {
  background: rgba(56, 189, 248, 0.2);
  border-color: var(--accent-cyan, #38bdf8);
}

.lastrachat-ir-texto {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lastrachat-acoes-resposta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

/* --------------------------------------------------------------------------
   SUGESTOES E ENTRADA
   -------------------------------------------------------------------------- */
.lastrachat-sugestoes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 12px 8px;
  flex: 0 0 auto;
}

.lastrachat-sugestoes[hidden] {
  display: none;
}

.lastrachat-chip {
  height: 24px;
  padding: 0 9px;
  border: 1px solid var(--border-color, #243047);
  border-radius: 12px;
  background: transparent;
  color: var(--text-secondary, #94a3b8);
  font-family: var(--font-sans);
  font-size: 11px;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.lastrachat-chip:hover,
.lastrachat-chip:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary, #fff);
}

.lastrachat-form {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 9px 12px;
  border-top: 1px solid var(--border-subtle, #1e283d);
  background: var(--bg-surface-elevated, #1b2438);
  flex: 0 0 auto;
}

.lastrachat-entrada {
  flex: 1 1 auto;
  min-width: 0;
  max-height: 96px;
  padding: 8px 10px;
  border: 1px solid var(--border-color, #243047);
  border-radius: 10px;
  background: var(--bg-main, #0a0e17);
  color: var(--text-primary, #fff);
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.4;
  resize: none;
  box-sizing: border-box;
}

.lastrachat-entrada:focus {
  outline: none;
  border-color: var(--accent-cyan, #38bdf8);
}

.lastrachat-enviar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  flex: 0 0 auto;
  border: 1px solid rgba(56, 189, 248, 0.45);
  border-radius: 10px;
  background: rgba(56, 189, 248, 0.15);
  color: var(--accent-cyan, #38bdf8);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease;
}

.lastrachat-enviar:hover:not(:disabled),
.lastrachat-enviar:focus-visible:not(:disabled) {
  background: rgba(56, 189, 248, 0.28);
}

.lastrachat-enviar:disabled {
  opacity: 0.45;
  cursor: default;
}

.lastrachat-aviso {
  margin: 0;
  padding: 0 12px 9px;
  background: var(--bg-surface-elevated, #1b2438);
  color: var(--text-muted, #64748b);
  font-family: var(--font-sans);
  font-size: 10.5px;
  line-height: 1.4;
  flex: 0 0 auto;
}

/* Tres pontinhos enquanto a resposta nao chega. */
.lastrachat-pensando {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

.lastrachat-pensando i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text-muted, #64748b);
  animation: lastrachat-pulso 1.1s ease-in-out infinite;
}

.lastrachat-pensando i:nth-child(2) { animation-delay: 0.16s; }
.lastrachat-pensando i:nth-child(3) { animation-delay: 0.32s; }

@keyframes lastrachat-pulso {
  0%, 80%, 100% { opacity: 0.28; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-2px); }
}

/* --------------------------------------------------------------------------
   O CAMPO PISCA
   --------------------------------------------------------------------------
   O contorno e' desenhado com `outline`, e nao com `border`, para nao empurrar
   o layout do painel de parametros quando o destaque entra e sai.
   -------------------------------------------------------------------------- */
.lastrachat-piscar {
  animation: lastrachat-piscar 0.7s ease-in-out 4;
  outline: 3px solid var(--accent-cyan, #38bdf8);
  outline-offset: 3px;
  border-radius: 8px;
  position: relative;
  z-index: 5;
}

@keyframes lastrachat-piscar {
  0%, 100% { outline-color: rgba(56, 189, 248, 0.15); }
  50% { outline-color: rgba(56, 189, 248, 1); }
}

@media (prefers-reduced-motion: reduce) {
  .lastrachat-piscar {
    animation: none;
    outline-color: var(--accent-cyan, #38bdf8);
  }
  .lastrachat-pensando i {
    animation: none;
    opacity: 0.7;
  }
  .lastrachat-fab,
  .lastrachat-fab:hover {
    transition: none;
    transform: none;
  }
}

/* A folha de impressao (orcamento, distinta, ordem) nao leva o chat. */
@media print {
  .lastrachat-fab,
  .lastrachat-painel {
    display: none !important;
  }
}