/* ============================================================
   MEUSGIGS — SISTEMA DE GESTÃO DE EVENTOS 2026 (v2 / Vercel + Supabase)
   ============================================================ */

/* ===================== 1. DESIGN TOKENS ===================== */
:root {
  /* As cores, a letra e as medidas vêm do tema (public/tema.js), que aplica no
     <html> as variáveis --c-*, --f-ui e --k-* do estilo escolhido em Aparência.
     Os nomes antigos abaixo continuam valendo e apontam para elas. */
  --bg-deep:    var(--c-bg);
  --bg-base:    var(--c-bg);
  --bg-panel:   var(--c-surface);
  --bg-panel-2: var(--c-hover);
  --bg-line:    var(--c-border);
  --bg-input:   var(--c-bg);
  --text-bright:var(--c-text);
  --text-base:  var(--c-text-2);
  /* Cinzas de texto: --text-mute e --text-dim passam de 4,5:1 de contraste em
     todos os fundos, em todos os estilos (tests/tema.test.js). --text-faint fica
     só para bordas e enfeites (não usar como cor de texto). */
  --text-mute:  var(--c-text-3);
  --text-dim:   var(--c-text-3);
  --text-faint: var(--c-border-2);
  --gold:       var(--c-accent-text);
  --gold-soft:  var(--c-accent-text);
  --cyan:       var(--c-info);
  --cyan-deep:  var(--c-info);
  --green:    var(--c-ok);    --green-bg: var(--c-ok-soft);
  --blue:     var(--c-info);  --blue-bg:  var(--c-info-soft);
  --red:      var(--c-bad);   --red-bg:   var(--c-bad-soft);
  --amber:    var(--c-warn);  --amber-bg: var(--c-warn-soft);
  --shadow-sm: 0 1px 3px rgba(0,0,0,calc(0.3 * var(--k-sombra)));
  --shadow-md: 0 8px 24px rgba(0,0,0,calc(0.35 * var(--k-sombra)));
  --shadow-lg: 0 20px 50px rgba(0,0,0,calc(0.5 * var(--k-sombra)));
  --shadow-xl: 0 30px 80px rgba(0,0,0,calc(0.6 * var(--k-sombra)));
  --radius:    calc(14px * var(--k-r));
  --radius-sm: calc(9px * var(--k-r));
  --radius-lg: calc(20px * var(--k-r));
  --topbar-h:  44px;  /* barra do topo: 44px no computador, como o app de estudos (o celular usa 48px, painel.css) */
  /* valores de reserva, caso o tema ainda não tenha rodado */
  --k-fs: 1; --k-r: 1; --k-esp: 1; --k-sombra: 1;
}

/* ===================== 2. RESET ===================== */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
/* overflow-x:clip trava o "pan" horizontal no iOS Safari (o body sozinho com
   overflow-x:hidden não impede o viewport de arrastar lateralmente). clip não
   cria contêiner de rolagem, então não quebra o position:sticky do topbar.
   scroll-padding-top: quem rola até um ponto da página (atalhos, scrollIntoView)
   para logo abaixo da barra do topo + abas, que ficam presas no alto. */
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip; scroll-padding-top:calc(var(--topbar-h) + var(--menu-topo-h, 0px) + 8px); }
body {
  font-family:var(--f-ui);
  background:var(--bg-base); color:var(--text-base);
  line-height:1.55; -webkit-font-smoothing:antialiased;
  /* clip (e não hidden): hidden transformava o body num contêiner de rolagem e
     desligava o position:sticky da página toda — a barra do topo não ficava
     presa. "hidden" fica antes só para navegador antigo que não entende clip. */
  overflow-x:hidden; overflow-x:clip;
  /* fundo liso, como no app de estudos (sem o brilho colorido no alto; 06/10) */
}
/* Barra de rolagem: a do sistema, como no app de estudos (08/10, pedido do Renato). A barra
   desenhada que ficava aqui (::-webkit-scrollbar para tudo) virava, no Mac, uma barra fixa de
   10px que ocupava espaço: ao trocar para uma tela que rola, a tela e os botões pulavam para o
   lado. A do sistema só aparece ao rolar e não empurra nada. Não desenhar de novo para a página. */
a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; border:none; background:none; }
input, select, textarea { font-family:inherit; }

/* ===================== 3. SITUAÇÃO DA CONEXÃO (no pé do menu lateral) ===================== */
.sync-pill {
  display:flex; align-items:center; gap:calc(8px * var(--k-esp));
  padding:calc(7px * var(--k-esp)) calc(13px * var(--k-esp)); border-radius:100px;
  background:var(--bg-panel); border:1px solid var(--bg-line);
  font-size:calc(11.5px * var(--k-fs)); font-weight:600; color:var(--text-mute); white-space:nowrap;
}
.sync-dot { width:7px; height:7px; border-radius:50%; background:var(--text-faint); flex-shrink:0; }
.sync-pill.ok    .sync-dot { background:var(--green); box-shadow:0 0 8px var(--green); }
.sync-pill.empty .sync-dot { background:var(--amber); }
.sync-pill.saving .sync-dot { background:var(--cyan); animation:blink 1s infinite; }
.sync-pill.error  .sync-dot { background:var(--red); }
@keyframes blink { 50% { opacity:0.3; } }

/* ===================== 5. LAYOUT ===================== */
.app { max-width:1500px; margin:0 auto; padding:calc(28px * var(--k-esp)) calc(24px * var(--k-esp)) calc(100px * var(--k-esp)); }
.view { display:none; animation:fadeIn 0.4s ease; }
.view.active { display:block; }
@keyframes fadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
.section { margin-bottom:36px; }
.section-head { display:flex; align-items:baseline; gap:calc(14px * var(--k-esp)); margin-bottom:18px; flex-wrap:wrap; }
.section-num { font-family:var(--f-ui); font-variant-numeric:tabular-nums; font-size:calc(11.5px * var(--k-fs)); color:var(--gold); font-weight:600; }
.section-title { font-family:var(--f-ui); font-size:calc(23px * var(--k-fs)); font-weight:600; color:var(--text-bright); letter-spacing:-0.01em; }
.section-desc { font-size:calc(13px * var(--k-fs)); color:var(--text-mute); margin-left:auto; }

/* ===================== 6. LOGIN ===================== */
.auth-overlay {
  position:fixed; inset:0; z-index:1000;
  background:var(--bg-deep);
  display:none; flex-direction:column; align-items:center; justify-content:center;
  padding:calc(20px * var(--k-esp));
}
.auth-overlay.show { display:flex; }
.auth-card {
  background:var(--bg-panel); border:1px solid var(--bg-line);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-xl);
  width:100%; max-width:420px; padding:calc(36px * var(--k-esp)) calc(32px * var(--k-esp));
}
.auth-logo {
  width:64px; height:64px; border-radius:calc(16px * var(--k-r)); margin:0 auto 18px;
  background:var(--c-prim);
  display:grid; place-items:center;
  font-family:var(--f-ui); font-weight:700; font-size:calc(32px * var(--k-fs));
  color:var(--c-prim-text); box-shadow:0 8px 22px color-mix(in srgb, var(--c-accent) 30%, transparent);
}
.auth-card h2 { text-align:center; font-family:var(--f-ui); font-size:calc(24px * var(--k-fs)); font-weight:600; color:var(--text-bright); margin-bottom:6px; }
.auth-card .sub { text-align:center; font-size:calc(13px * var(--k-fs)); color:var(--text-mute); margin-bottom:24px; }
.auth-form .form-field { margin-bottom:14px; }
.auth-form label { display:block; font-size:calc(11px * var(--k-fs)); font-weight:700; color:var(--text-mute); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:6px; }
.auth-form input {
  width:100%; background:var(--bg-input); color:var(--text-bright);
  border:1px solid var(--bg-line); border-radius:calc(8px * var(--k-r));
  padding:calc(11px * var(--k-esp)) calc(13px * var(--k-esp)); font-size:calc(14px * var(--k-fs));
}
.auth-form input:focus { outline:none; border-color:var(--cyan); box-shadow:0 0 0 3px color-mix(in srgb, var(--c-info) 10%, transparent); }
.auth-form button.primary {
  width:100%; padding:calc(12px * var(--k-esp)); border-radius:calc(9px * var(--k-r)); margin-top:6px;
  background:var(--c-prim); color:var(--c-prim-text);
  font-size:calc(14px * var(--k-fs)); font-weight:700;
}
.auth-form button.primary:hover { filter:brightness(1.08); }
.auth-form button.primary:disabled { opacity:0.6; cursor:not-allowed; }
.auth-switch { text-align:center; margin-top:14px; font-size:calc(12.5px * var(--k-fs)); color:var(--text-mute); }
.auth-switch a { color:var(--gold); cursor:pointer; font-weight:600; }
.auth-msg { font-size:calc(12.5px * var(--k-fs)); padding:calc(10px * var(--k-esp)) calc(12px * var(--k-esp)); border-radius:calc(8px * var(--k-r)); margin-bottom:14px; display:none; }
.auth-msg.show { display:block; }
.auth-msg.err { background:var(--red-bg); color:var(--red); border:1px solid color-mix(in srgb, var(--c-bad) 30%, transparent); }
.auth-msg.ok  { background:var(--green-bg); color:var(--green); border:1px solid color-mix(in srgb, var(--c-ok) 30%, transparent); }
.auth-msg.info{ background:var(--blue-bg); color:var(--blue); border:1px solid color-mix(in srgb, var(--c-info) 30%, transparent); }
/* 19/10 (MeusGigs, contas para outros DJs): as abas Entrar | Criar conta, o "Mostrar" da senha e os textos curtos do cartão */
.auth-card [hidden] { display:none !important; }
.auth-abas { display:flex; gap:4px; padding:4px; border-radius:999px; background:color-mix(in srgb, var(--c-text) 5%, transparent); border:1px solid var(--c-border); margin:0 0 18px; }
.auth-abas button { flex:1; border:0; background:transparent; padding:8px 0; border-radius:999px; font:inherit; font-size:calc(13px * var(--k-fs)); font-weight:600; color:var(--c-text-2); cursor:pointer; }
.auth-abas button[aria-selected="true"] { background:var(--c-prim); color:var(--c-prim-text); }
.auth-senha { position:relative; }
.auth-senha input { padding-right:78px; }
.auth-olho { position:absolute; right:6px; top:50%; transform:translateY(-50%); border:0; background:transparent; color:var(--c-accent); font:inherit; font-size:calc(12px * var(--k-fs)); font-weight:600; padding:6px 8px; cursor:pointer; border-radius:999px; }
.auth-mini { text-align:center; font-size:calc(12px * var(--k-fs)); color:var(--text-mute); margin:12px 0 0; line-height:1.45; }
.auth-texto { font-size:calc(13.5px * var(--k-fs)); color:var(--c-text-2); line-height:1.55; margin:0 0 18px; text-align:center; }
.auth-texto b { color:var(--c-text); }
.auth-switch a[role="button"] { text-decoration:none; }
.auth-foot { text-align:center; font-size:calc(11px * var(--k-fs)); color:var(--text-dim); margin-top:18px; }

/* ===================== 7. EMPTY STATE ===================== */
.empty-state {
  display:none; flex-direction:column; align-items:center;
  text-align:center; padding:calc(70px * var(--k-esp)) calc(24px * var(--k-esp));
  background:var(--bg-panel); border:1px solid var(--bg-line);
  border-radius:var(--radius-lg);
}
.empty-state.show { display:flex; }
.empty-icon {
  width:88px; height:88px; border-radius:calc(22px * var(--k-r));
  background:linear-gradient(135deg, var(--bg-panel-2), var(--bg-deep));
  border:1px solid var(--bg-line);
  display:grid; place-items:center; font-size:calc(40px * var(--k-fs)); margin-bottom:24px;
}
.empty-state h2 { font-family:var(--f-ui); font-size:calc(26px * var(--k-fs)); font-weight:600; color:var(--text-bright); margin-bottom:10px; }
.empty-state p { font-size:calc(14px * var(--k-fs)); color:var(--text-mute); max-width:520px; margin-bottom:28px; }
.empty-actions { display:flex; gap:calc(12px * var(--k-esp)); flex-wrap:wrap; justify-content:center; }
.btn-big {
  display:flex; align-items:center; gap:calc(9px * var(--k-esp));
  padding:calc(13px * var(--k-esp)) calc(24px * var(--k-esp)); border-radius:calc(11px * var(--k-r));
  font-size:calc(14px * var(--k-fs)); font-weight:700; transition:all 0.16s ease;
}
.btn-big.primary { background:var(--c-prim); color:var(--c-prim-text); }
.btn-big.primary:hover { filter:brightness(1.08); transform:translateY(-2px); }
.btn-big.ghost { background:var(--bg-panel-2); color:var(--text-base); border:1px solid var(--bg-line); }
.btn-big.ghost:hover { border-color:var(--text-faint); color:var(--text-bright); }
.empty-hint { margin-top:22px; font-size:calc(12px * var(--k-fs)); color:var(--text-dim); display:flex; align-items:center; gap:calc(7px * var(--k-esp)); }

/* ===================== 8. HERO ===================== */
.hero { display:grid; grid-template-columns:1.4fr 1fr; gap:calc(32px * var(--k-esp)); margin-bottom:36px; }
.hero-main {
  background:linear-gradient(150deg, var(--bg-panel), var(--bg-deep));
  border:1px solid var(--bg-line); border-radius:var(--radius-lg);
  padding:calc(32px * var(--k-esp)); display:flex; flex-direction:column; justify-content:center;
  position:relative; overflow:hidden;
}
.hero-main::before { content:''; position:absolute; top:-40px; right:-40px; width:200px; height:200px; background:radial-gradient(circle, color-mix(in srgb, var(--c-accent) 12%, transparent), transparent 70%); }
.hero-tag { display:inline-flex; align-items:center; gap:calc(7px * var(--k-esp)); align-self:flex-start; padding:calc(6px * var(--k-esp)) calc(13px * var(--k-esp)); border-radius:100px; background:var(--bg-panel-2); border:1px solid var(--bg-line); font-size:calc(10.5px * var(--k-fs)); font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--gold); margin-bottom:18px; }
.hero-title { font-family:var(--f-ui); font-size:calc(clamp(28px, 3.4vw, 40px) * var(--k-fs)); font-weight:600; color:var(--text-bright); letter-spacing:-0.02em; line-height:1.1; }
.hero-title .it { font-style:italic; color:var(--gold); }
.hero-sub { margin-top:14px; font-size:calc(14px * var(--k-fs)); color:var(--text-mute); max-width:480px; }
.hero-side { background:var(--bg-panel); border:1px solid var(--bg-line); border-radius:var(--radius-lg); padding:calc(26px * var(--k-esp)); display:flex; flex-direction:column; gap:calc(18px * var(--k-esp)); justify-content:center; }
.hero-side h3 { font-size:calc(10.5px * var(--k-fs)); text-transform:uppercase; letter-spacing:0.1em; color:var(--text-dim); font-weight:700; }
.hero-stat .big { font-family:var(--f-ui); font-variant-numeric:tabular-nums; font-size:calc(28px * var(--k-fs)); font-weight:600; color:var(--text-bright); letter-spacing:-0.02em; line-height:1.1; }
.hero-stat .big.gold { color:var(--gold); }
.hero-stat .desc { font-size:calc(11.5px * var(--k-fs)); color:var(--text-mute); margin-top:3px; }
.hero-sep { height:1px; background:var(--bg-line); }

/* ===================== 8b. PRÓXIMOS EVENTOS (LEMBRETES) ===================== */
.prox-eventos-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:calc(14px * var(--k-esp)); }
.prox-card { background:var(--bg-panel); border:1px solid var(--bg-line); border-radius:var(--radius-sm); padding:calc(14px * var(--k-esp)) calc(16px * var(--k-esp)); cursor:pointer; transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease; position:relative; overflow:hidden; }
.prox-card::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--text-faint); }
.prox-card:hover { transform:translateY(-2px); border-color:var(--text-faint); box-shadow:var(--shadow-md); }
.prox-card.today::before { background:var(--red); }
.prox-card.today { background:linear-gradient(135deg, color-mix(in srgb, var(--c-bad) 10%, transparent), var(--bg-panel)); }
.prox-card.tomorrow::before { background:var(--amber); }
.prox-card.soon::before { background:var(--gold); }
.prox-card.this-month::before { background:var(--blue); }
.prox-card.far::before { background:var(--text-faint); }
.prox-badge { position:absolute; top:12px; right:14px; font-size:calc(10px * var(--k-fs)); font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-mute); font-family:var(--f-ui); font-variant-numeric:tabular-nums; padding:calc(2px * var(--k-esp)) calc(7px * var(--k-esp)); border-radius:calc(5px * var(--k-r)); background:color-mix(in srgb, var(--c-text) 4%, transparent); }
.prox-card.today .prox-badge { color:var(--red); background:var(--red-bg); }
.prox-card.tomorrow .prox-badge { color:var(--amber); background:var(--amber-bg); }
.prox-card.soon .prox-badge { color:var(--gold); background:var(--amber-bg); }
.prox-card.this-month .prox-badge { color:var(--blue); background:var(--blue-bg); }
.prox-card h4 { font-family:var(--f-ui); font-size:calc(14px * var(--k-fs)); font-weight:600; color:var(--text-bright); margin:0 0 8px 0; padding-right:calc(74px * var(--k-esp)); line-height:1.25; }
.prox-data { font-size:calc(11.5px * var(--k-fs)); color:var(--text-base); margin:0 0 3px 0; font-family:var(--f-ui); font-variant-numeric:tabular-nums; font-weight:500; }
.prox-local { font-size:calc(11px * var(--k-fs)); color:var(--text-mute); margin:0 0 6px 0; line-height:1.35; }
.prox-status { margin:0; }
.prox-empty { grid-column:1 / -1; text-align:center; padding:calc(34px * var(--k-esp)) calc(20px * var(--k-esp)); color:var(--text-mute); font-size:calc(13px * var(--k-fs)); background:var(--bg-panel); border:1px dashed var(--bg-line); border-radius:var(--radius-sm); }
.prox-empty p { margin-bottom:14px; }

/* ===================== 9. KPI ===================== */
.kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:calc(16px * var(--k-esp)); }
.kpi-card { background:var(--bg-panel); border:1px solid var(--bg-line); border-radius:var(--radius); padding:calc(20px * var(--k-esp)); position:relative; overflow:hidden; transition:transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease; }
.kpi-card:hover { transform:translateY(-3px); border-color:var(--text-faint); box-shadow:var(--shadow-md); }
.kpi-card::after { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent, var(--gold)); }
.kpi-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.kpi-icon { width:36px; height:36px; border-radius:calc(9px * var(--k-r)); display:grid; place-items:center; font-size:calc(17px * var(--k-fs)); background:var(--accent-bg, var(--amber-bg)); }
.kpi-label { font-size:calc(10.5px * var(--k-fs)); text-transform:uppercase; letter-spacing:0.07em; color:var(--text-mute); font-weight:700; }
.kpi-value { font-family:var(--f-ui); font-variant-numeric:tabular-nums; font-size:calc(25px * var(--k-fs)); font-weight:600; color:var(--text-bright); letter-spacing:-0.02em; line-height:1.1; }
.kpi-sub { margin-top:7px; font-size:calc(11.5px * var(--k-fs)); color:var(--text-mute); display:flex; align-items:center; gap:calc(6px * var(--k-esp)); flex-wrap:wrap; }
.kpi-chip { font-family:var(--f-ui); font-variant-numeric:tabular-nums; font-size:calc(10.5px * var(--k-fs)); font-weight:700; padding:calc(2px * var(--k-esp)) calc(7px * var(--k-esp)); border-radius:calc(5px * var(--k-r)); }
.chip-green { background:var(--green-bg); color:var(--green); }
.chip-red   { background:var(--red-bg);   color:var(--red); }

/* ===================== 10. PAINEIS / GRÁFICOS ===================== */
.panel { background:var(--bg-panel); border:1px solid var(--bg-line); border-radius:var(--radius); padding:calc(22px * var(--k-esp)); }
.panel-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; gap:calc(14px * var(--k-esp)); flex-wrap:wrap; }
.panel-title { font-size:calc(14.5px * var(--k-fs)); font-weight:700; color:var(--text-bright); letter-spacing:-0.01em; }
.panel-title .hint { display:block; font-size:calc(11px * var(--k-fs)); font-weight:500; color:var(--text-mute); margin-top:2px; }
.grid-2  { display:grid; grid-template-columns:1.6fr 1fr; gap:calc(18px * var(--k-esp)); }
.grid-2b { display:grid; grid-template-columns:1fr 1fr; gap:calc(18px * var(--k-esp)); }
.grid-3  { display:grid; grid-template-columns:repeat(3,1fr); gap:calc(18px * var(--k-esp)); }
.chart-box { position:relative; width:100%; }
.chart-box.tall { height:320px; }
.chart-box.mid  { height:270px; }
.toggle-group { display:inline-flex; background:var(--bg-deep); border:1px solid var(--bg-line); border-radius:calc(8px * var(--k-r)); padding:calc(3px * var(--k-esp)); }
.toggle-btn { font-size:calc(11.5px * var(--k-fs)); font-weight:600; color:var(--text-mute); padding:calc(6px * var(--k-esp)) calc(12px * var(--k-esp)); border-radius:calc(5px * var(--k-r)); transition:all 0.16s ease; }
.toggle-btn:hover { color:var(--text-base); }
.toggle-btn.active { background:var(--bg-panel-2); color:var(--gold); box-shadow:var(--shadow-sm); }

/* ===================== 11. PERIODO BAR ===================== */
.periodo-bar { display:flex; align-items:center; gap:calc(14px * var(--k-esp)); background:var(--bg-panel); border:1px solid var(--bg-line); border-radius:var(--radius); padding:calc(12px * var(--k-esp)) calc(16px * var(--k-esp)); margin-bottom:22px; flex-wrap:wrap; }
.periodo-info { display:flex; align-items:center; gap:calc(7px * var(--k-esp)); color:var(--text-mute); font-size:calc(11.5px * var(--k-fs)); font-weight:700; text-transform:uppercase; letter-spacing:0.06em; }
.periodo-tabs { display:inline-flex; background:var(--bg-deep); border:1px solid var(--bg-line); border-radius:calc(8px * var(--k-r)); padding:calc(3px * var(--k-esp)); }
.periodo-tab { font-size:calc(12px * var(--k-fs)); font-weight:600; color:var(--text-mute); padding:calc(7px * var(--k-esp)) calc(14px * var(--k-esp)); border-radius:calc(5px * var(--k-r)); transition:all 0.16s ease; cursor:pointer; }
.periodo-tab:hover { color:var(--text-base); }
.periodo-tab.active { background:var(--bg-panel-2); color:var(--gold); box-shadow:var(--shadow-sm); }
.periodo-controls { display:flex; align-items:center; gap:calc(10px * var(--k-esp)); flex:1; flex-wrap:wrap; }
.periodo-custom { display:flex; align-items:center; gap:calc(8px * var(--k-esp)); }
.periodo-custom .field { padding:calc(7px * var(--k-esp)) calc(10px * var(--k-esp)); font-size:calc(12px * var(--k-fs)); min-width:auto; width:auto; }
.periodo-sep { font-size:calc(11.5px * var(--k-fs)); color:var(--text-mute); font-weight:600; }
.periodo-label { margin-left:auto; font-size:calc(12px * var(--k-fs)); color:var(--text-mute); font-weight:600; font-family:var(--f-ui); font-variant-numeric:tabular-nums; }
.periodo-label b { color:var(--gold); }

/* ===================== 12. FILTROS + TABELA ===================== */
.filter-bar { background:var(--bg-panel); border:1px solid var(--bg-line); border-radius:var(--radius); padding:calc(16px * var(--k-esp)) calc(20px * var(--k-esp)); display:flex; align-items:flex-end; gap:calc(18px * var(--k-esp)); flex-wrap:wrap; margin-bottom:22px; }
.filter-group { display:flex; flex-direction:column; gap:calc(5px * var(--k-esp)); }
.filter-group label { font-size:calc(10.5px * var(--k-fs)); text-transform:uppercase; letter-spacing:0.08em; color:var(--text-dim); font-weight:700; }
.field { background:var(--bg-input); color:var(--text-base); border:1px solid var(--bg-line); border-radius:calc(8px * var(--k-r)); padding:calc(9px * var(--k-esp)) calc(12px * var(--k-esp)); font-size:calc(13px * var(--k-fs)); font-weight:500; transition:border-color 0.16s ease; }
.field:hover { border-color:var(--text-faint); }
.field:focus { outline:none; border-color:var(--cyan); box-shadow:0 0 0 3px color-mix(in srgb, var(--c-info) 10%, transparent); }
select.field { cursor:pointer; min-width:165px; appearance:none; padding-right:calc(32px * var(--k-esp)); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237C8BA8' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 11px center; }
.filter-spacer { flex:1; }
.filter-status { font-size:calc(11.5px * var(--k-fs)); color:var(--text-mute); font-family:var(--f-ui); font-variant-numeric:tabular-nums; }
.filter-status b { color:var(--gold); }
.btn-clear { display:flex; align-items:center; gap:calc(6px * var(--k-esp)); background:transparent; color:var(--text-mute); border:1px solid var(--bg-line); border-radius:calc(8px * var(--k-r)); padding:calc(9px * var(--k-esp)) calc(14px * var(--k-esp)); font-size:calc(12px * var(--k-fs)); font-weight:600; transition:all 0.16s ease; }
.btn-clear:hover { border-color:var(--red); color:var(--red); }

.table-wrap { background:var(--bg-panel); border:1px solid var(--bg-line); border-radius:var(--radius); padding:calc(22px * var(--k-esp)); }
.table-toolbar { display:flex; align-items:center; gap:calc(12px * var(--k-esp)); margin-bottom:16px; flex-wrap:wrap; }
.search-box { position:relative; display:flex; align-items:center; }
.search-box svg { position:absolute; left:11px; pointer-events:none; }
.search-box input { background:var(--bg-input); color:var(--text-base); border:1px solid var(--bg-line); border-radius:calc(8px * var(--k-r)); padding:calc(9px * var(--k-esp)) calc(12px * var(--k-esp)) calc(9px * var(--k-esp)) calc(33px * var(--k-esp)); font-size:calc(13px * var(--k-fs)); width:240px; transition:border-color 0.16s ease; }
.search-box input:focus { outline:none; border-color:var(--cyan); }
.search-box input::placeholder { color:var(--text-dim); }
table.data { width:100%; border-collapse:collapse; font-size:calc(12.5px * var(--k-fs)); }
table.data thead th { background:var(--bg-deep); color:var(--text-mute); font-size:calc(10.5px * var(--k-fs)); font-weight:700; text-transform:uppercase; letter-spacing:0.05em; text-align:left; padding:calc(12px * var(--k-esp)) calc(13px * var(--k-esp)); white-space:nowrap; border-bottom:1px solid var(--bg-line); position:sticky; top:0; cursor:pointer; user-select:none; transition:color 0.15s ease; }
table.data thead th:hover { color:var(--gold); }
table.data thead th.num { text-align:right; }
table.data thead th.act { text-align:center; cursor:default; }
table.data thead th .arrow { opacity:0.35; font-size:calc(8px * var(--k-fs)); margin-left:3px; }
table.data thead th.sorted .arrow { opacity:1; color:var(--gold); }
table.data tbody td { padding:calc(11px * var(--k-esp)) calc(13px * var(--k-esp)); border-bottom:1px solid color-mix(in srgb, var(--c-border) 50%, transparent); color:var(--text-base); white-space:nowrap; }
table.data tbody tr { transition:background 0.12s ease; cursor:pointer; }
table.data tbody tr:hover { background:var(--bg-panel-2); }
table.data tbody tr:last-child td { border-bottom:none; }
table.data tbody tr.inactive { opacity:0.45; }
table.data tbody tr.inactive .evt-name { text-decoration:line-through; }
table.data td.num { text-align:right; font-family:var(--f-ui); font-variant-numeric:tabular-nums; font-weight:500; }
td.pos { color:var(--green); }
td.neg { color:var(--red); }
.evt-name { font-weight:600; color:var(--text-bright); }
.badge { display:inline-block; padding:calc(3px * var(--k-esp)) calc(8px * var(--k-esp)); border-radius:calc(6px * var(--k-r)); font-size:calc(10px * var(--k-fs)); font-weight:700; white-space:nowrap; }
.b-pago      { background:var(--green-bg); color:var(--green); }
.b-confirmar { background:color-mix(in srgb, var(--c-text-3) 15%, transparent); color:var(--c-text-3); }
.b-naopago   { background:var(--amber-bg); color:var(--amber); }
.b-cancelado { background:var(--red-bg); color:var(--red); }
.b-naorealiz { background:var(--blue-bg); color:var(--blue); }
.b-rascunho  { background:color-mix(in srgb, var(--c-text-3) 15%, transparent); color:var(--c-text-3); }
.b-enviado   { background:var(--blue-bg); color:var(--blue); }
.b-aprovado  { background:var(--green-bg); color:var(--green); }
.b-recusado  { background:var(--red-bg); color:var(--red); }
.b-assinado  { background:var(--green-bg); color:var(--green); }
.b-pendente  { background:var(--amber-bg); color:var(--amber); }
.b-substituido { background:color-mix(in srgb, var(--c-text-3) 15%, transparent); color:var(--c-text-3); }
.b-visualizado { background:color-mix(in srgb, var(--c-accent) 15%, transparent); color:var(--gold); }
.b-expirado    { background:color-mix(in srgb, var(--c-text-3) 15%, transparent); color:var(--c-text-3); }
/* Badges de status DERIVADO do contrato (só exibição — nunca gravados no banco) */
.b-aguardando  { background:var(--amber-bg); color:var(--amber); }
.b-vencido     { background:var(--red-bg); color:var(--red); }
.b-concluido   { background:color-mix(in srgb, var(--c-ok) 20%, transparent); color:var(--c-ok); border:1px solid color-mix(in srgb, var(--c-ok) 40%, transparent); }

/* ===== Cards de contrato — chips e ações extras ===== */
.ctr-card { cursor:pointer; }
.ctr-chips { display:flex; flex-wrap:wrap; gap:calc(6px * var(--k-esp)); margin-top:10px; }
.ctr-chip { display:inline-flex; align-items:center; gap:calc(4px * var(--k-esp)); font-size:calc(11px * var(--k-fs)); font-weight:600; padding:calc(3px * var(--k-esp)) calc(9px * var(--k-esp)); border-radius:100px; background:var(--bg-panel-2); border:1px solid var(--bg-line); color:var(--text-mute); }
.ctr-chip svg { opacity:.85; }
.ctr-chip.on   { color:var(--c-info); border-color:color-mix(in srgb, var(--c-info) 35%, transparent); background:color-mix(in srgb, var(--c-info) 10%, transparent); }
.ctr-chip.off  { color:var(--text-dim); }
.ctr-chip.sig-ok   { color:var(--green); border-color:color-mix(in srgb, var(--c-ok) 35%, transparent); background:var(--green-bg); }
.ctr-chip.sig-dj   { color:var(--amber); border-color:color-mix(in srgb, var(--c-warn) 35%, transparent); background:var(--amber-bg); }
.ctr-chip.sig-cli  { color:var(--cyan);  border-color:color-mix(in srgb, var(--c-info) 30%, transparent);  background:color-mix(in srgb, var(--c-info) 10%, transparent); }
.ctr-chip.sig-wait { color:var(--text-mute); }
.ctr-tag-pj { display:inline-block; font-size:calc(9.5px * var(--k-fs)); font-weight:700; letter-spacing:0.04em; background:var(--bg-panel-2); border:1px solid var(--bg-line); color:var(--text-mute); border-radius:calc(4px * var(--k-r)); padding:calc(1px * var(--k-esp)) calc(5px * var(--k-esp)); vertical-align:middle; }
.icon-btn.dup:hover      { color:var(--cyan); border-color:var(--cyan); }
.icon-btn.cancelar:hover { color:var(--amber); border-color:var(--amber); }

/* ===== Modal de detalhes do contrato ===== */
.ctr-d-resumo { display:grid; grid-template-columns:repeat(3,1fr); gap:calc(10px * var(--k-esp)); margin-bottom:6px; }
.ctr-d-res-item { background:var(--bg-panel-2); border:1px solid var(--bg-line); border-radius:calc(10px * var(--k-r)); padding:calc(12px * var(--k-esp)) calc(14px * var(--k-esp)); }
.ctr-d-res-item span { display:block; font-size:calc(10.5px * var(--k-fs)); text-transform:uppercase; letter-spacing:0.05em; color:var(--text-mute); margin-bottom:4px; }
.ctr-d-res-item b { color:var(--text-bright); font-size:calc(13.5px * var(--k-fs)); }
.ctr-d-sec-title { font-family:var(--f-ui); font-size:calc(12.5px * var(--k-fs)); font-weight:600; color:var(--gold); text-transform:uppercase; letter-spacing:0.05em; margin:20px 0 10px; }
.ctr-d-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 calc(24px * var(--k-esp)); }
.ctr-d-row { display:flex; justify-content:space-between; gap:calc(14px * var(--k-esp)); padding:calc(7px * var(--k-esp)) 0; border-bottom:1px solid var(--bg-line); font-size:calc(13px * var(--k-fs)); }
.ctr-d-row span { color:var(--text-mute); flex-shrink:0; }
.ctr-d-row b { color:var(--text-base); text-align:right; font-weight:600; }
.ctr-d-link { display:flex; align-items:center; gap:calc(10px * var(--k-esp)); background:var(--bg-input); border:1px solid var(--bg-line); border-radius:calc(9px * var(--k-r)); padding:calc(10px * var(--k-esp)) calc(12px * var(--k-esp)); }
.ctr-d-link-url { flex:1; font-family:var(--f-ui); font-variant-numeric:tabular-nums; font-size:calc(11.5px * var(--k-fs)); color:var(--cyan); word-break:break-all; }
.ctr-d-link.off { color:var(--text-mute); font-size:calc(12.5px * var(--k-fs)); }

/* Timeline do contrato */
.ctr-tl { position:relative; margin-top:4px; }
.ctr-tl-item { display:flex; gap:calc(12px * var(--k-esp)); position:relative; padding:0 0 calc(15px * var(--k-esp)) calc(20px * var(--k-esp)); }
.ctr-tl-item::before { content:''; position:absolute; left:5px; top:15px; bottom:-2px; width:2px; background:var(--bg-line); }
.ctr-tl-item:last-child::before { display:none; }
.ctr-tl-dot { position:absolute; left:0; top:3px; width:12px; height:12px; border-radius:50%; background:var(--bg-panel); border:2px solid var(--bg-line); }
.ctr-tl-item.done .ctr-tl-dot { background:var(--green); border-color:var(--green); box-shadow:0 0 8px color-mix(in srgb, var(--c-ok) 50%, transparent); }
.ctr-tl-lbl { font-size:calc(13px * var(--k-fs)); color:var(--text-mute); font-weight:600; }
.ctr-tl-item.done .ctr-tl-lbl { color:var(--text-bright); }
.ctr-tl-date { font-size:calc(11px * var(--k-fs)); color:var(--text-dim); margin-top:1px; }
.ctr-tl-item.done .ctr-tl-date { color:var(--text-mute); }

/* ===== Modal de detalhes PREMIUM (contrato/orçamento) ===== */
/* Cabeçalho e rodapé FIXOS, corpo rolável: a scrollbar pertence ao corpo,
   não ao container — não invade head/foot (item "scrollbar contida").
   .modal.cd-modal (0,2,0) vence .modal { overflow-y:auto } mesmo vindo antes. */
.cd-modal { max-width:720px; }
.modal.cd-modal { display:flex; flex-direction:column; overflow:hidden; }
.cd-modal .cd-head, .cd-modal .cd-foot { position:static; flex-shrink:0; }
.cd-head-l { display:flex; align-items:center; gap:calc(12px * var(--k-esp)); flex-wrap:wrap; }
.cd-num { font-family:var(--f-ui); font-size:calc(18px * var(--k-fs)); font-weight:600; color:var(--text-bright); }
.cd-body { flex:1 1 auto; min-height:0; overflow-y:auto; scrollbar-gutter:stable; padding:calc(20px * var(--k-esp)) calc(24px * var(--k-esp)); }
.cd-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:calc(10px * var(--k-esp)); margin-bottom:16px; align-items:stretch; }
.cd-card { background:linear-gradient(135deg,var(--bg-panel-2),var(--bg-panel)); border:1px solid var(--bg-line); border-radius:calc(12px * var(--k-r)); padding:calc(12px * var(--k-esp)) calc(14px * var(--k-esp)); min-height:64px; display:flex; flex-direction:column; justify-content:center; }
.cd-card span { display:block; font-size:calc(10.5px * var(--k-fs)); text-transform:uppercase; letter-spacing:0.05em; color:var(--text-mute); margin-bottom:5px; }
.cd-card b { font-size:calc(14px * var(--k-fs)); color:var(--text-bright); font-weight:700; line-height:1.25; overflow:hidden; text-overflow:ellipsis; }
.cd-card b.sig-ok { color:var(--green); } .cd-card b.sig-dj { color:var(--amber); } .cd-card b.sig-cli { color:var(--cyan); } .cd-card b.sig-wait { color:var(--text-mute); }
.cd-toolbar { display:flex; align-items:center; gap:calc(10px * var(--k-esp)); flex-wrap:wrap; margin-bottom:18px; padding-bottom:calc(16px * var(--k-esp)); border-bottom:1px solid var(--bg-line); }
.cd-tb-sp { flex:1; }
/* Controle de status premium: pílula (badge) + "Alterar status" (dropdown) */
.cd-status-ctl { display:flex; align-items:center; gap:calc(10px * var(--k-esp)); flex-wrap:wrap; }
.cd-status-cap { font-size:calc(11px * var(--k-fs)); color:var(--text-mute); text-transform:uppercase; letter-spacing:0.04em; }
.cd-status-dd { position:relative; }
.cd-status-menu { position:absolute; top:calc(100% + 6px); left:0; z-index:5; min-width:190px; background:var(--bg-panel); border:1px solid var(--bg-line); border-radius:calc(10px * var(--k-r)); box-shadow:var(--shadow-xl); padding:calc(6px * var(--k-esp)); display:flex; flex-direction:column; gap:calc(2px * var(--k-esp)); }
.cd-status-menu[hidden] { display:none; }
.cd-status-opt { display:flex; align-items:center; justify-content:space-between; gap:calc(10px * var(--k-esp)); width:100%; text-align:left; padding:calc(8px * var(--k-esp)) calc(11px * var(--k-esp)); border-radius:calc(7px * var(--k-r)); font-size:calc(13px * var(--k-fs)); color:var(--text-base); background:transparent; cursor:pointer; transition:background .12s ease; }
.cd-status-opt:hover { background:var(--bg-panel-2); }
.cd-status-opt.ativo { color:var(--text-bright); font-weight:700; }
.cd-status-check { color:var(--green); font-weight:800; }
/* Assinatura do DJ no wizard: duas opções (desenhar x aceite eletrônico) */
.sigdj-tabs { display:flex; gap:calc(8px * var(--k-esp)); margin-bottom:14px; }
.sigdj-tab { flex:1; padding:calc(9px * var(--k-esp)) calc(12px * var(--k-esp)); border:1px solid var(--bg-line); background:var(--bg-panel-2); color:var(--text-mute); border-radius:calc(8px * var(--k-r)); font-size:calc(12.5px * var(--k-fs)); font-weight:700; cursor:pointer; transition:all .15s ease; }
.sigdj-tab:hover { border-color:var(--text-faint); color:var(--text-base); }
.sigdj-tab.on { background:var(--c-prim); color:var(--c-prim-text); border-color:transparent; }
.sigdj-aceite-info { font-size:calc(12.5px * var(--k-fs)); color:var(--text-mute); line-height:1.55; background:var(--bg-panel-2); border:1px solid var(--bg-line); border-radius:calc(9px * var(--k-r)); padding:calc(12px * var(--k-esp)) calc(14px * var(--k-esp)); margin:0 0 12px; }
.sigdj-aceite-info b { color:var(--text-bright); }
.sigdj-termo-wrap { display:flex; gap:calc(8px * var(--k-esp)); align-items:flex-start; font-size:calc(13px * var(--k-fs)); color:var(--text-base); cursor:pointer; line-height:1.45; }
.sigdj-termo-wrap input { margin-top:2px; cursor:pointer; flex-shrink:0; }
/* Empurra gestão (Editar/Duplicar) + destrutiva (Cancelar contrato) p/ a direita */
.cd-foot-sp { flex:1 1 auto; min-width:8px; }
/* Rodapé do detalhes: conjunto uniforme — mesma altura, ícones alinhados,
   espaçamento consistente (nada de texto solto nem gaps gigantes). */
.cd-foot { gap:calc(8px * var(--k-esp)); justify-content:flex-start; }
.cd-foot .btn { height:38px; padding:0 calc(14px * var(--k-esp)); display:inline-flex; align-items:center; gap:calc(7px * var(--k-esp)); font-size:calc(13px * var(--k-fs)); white-space:nowrap; }
.cd-foot .btn svg { flex-shrink:0; }
@media (max-width:640px) {
  .cd-foot { gap:calc(6px * var(--k-esp)); }
  .cd-foot .btn { flex:1 1 auto; justify-content:center; padding:0 calc(10px * var(--k-esp)); }
  .cd-foot-sp { display:none; }
}
.cd-sec { font-family:var(--f-ui); font-size:calc(12.5px * var(--k-fs)); font-weight:600; color:var(--gold); text-transform:uppercase; letter-spacing:0.05em; margin:0 0 10px; }
.cd-block { background:var(--bg-panel-2); border:1px solid var(--bg-line); border-radius:calc(12px * var(--k-r)); padding:calc(14px * var(--k-esp)) calc(16px * var(--k-esp)); margin-bottom:12px; }
.cd-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:calc(12px * var(--k-esp)); margin-bottom:12px; }
.cd-grid2 .cd-block { margin-bottom:0; }
.cd-row { display:flex; justify-content:space-between; gap:calc(14px * var(--k-esp)); padding:calc(6px * var(--k-esp)) 0; border-bottom:1px solid var(--bg-line); font-size:calc(13px * var(--k-fs)); }
.cd-row:last-child { border-bottom:none; }
.cd-row span { color:var(--text-mute); flex-shrink:0; }
.cd-row b { color:var(--text-base); text-align:right; font-weight:600; }
/* Linha do tempo minimalista: bolinha verde preenchida = concluído,
   bolinha vazada discreta = pendente. Sem ícone dentro. */
.cd-tl { margin:0 0 4px; }
.cd-tl-item { display:flex; gap:calc(11px * var(--k-esp)); position:relative; padding:0 0 calc(11px * var(--k-esp)) 0; }
.cd-tl-item::before { content:''; position:absolute; left:5px; top:16px; bottom:0; width:1.5px; background:var(--bg-line); }
.cd-tl-item:last-child::before { display:none; }
.cd-tl-dot { flex-shrink:0; width:11px; height:11px; margin-top:3px; border-radius:50%; background:var(--bg-panel); border:1.5px solid var(--bg-line); }
/* Concluído = "luz verde" acesa, no mesmo estilo dos pontos da agenda (.status-luz). */
.cd-tl-item.done .cd-tl-dot { background:var(--green); border-color:var(--green); box-shadow:0 0 7px var(--green), 0 0 2px var(--green); }
.cd-tl-lbl { font-size:calc(12.5px * var(--k-fs)); font-weight:600; color:var(--text-mute); line-height:1.3; }
.cd-tl-item.done .cd-tl-lbl { color:var(--text-bright); }
.cd-tl-date { font-size:calc(10.5px * var(--k-fs)); color:var(--text-dim); margin-top:1px; }
.cd-tl-item.done .cd-tl-date { color:var(--text-mute); }
.cd-linkbox { display:flex; align-items:center; gap:calc(10px * var(--k-esp)); background:var(--bg-input); border:1px solid var(--bg-line); border-radius:calc(10px * var(--k-r)); padding:calc(10px * var(--k-esp)) calc(12px * var(--k-esp)); flex-wrap:wrap; }
.cd-linkurl { flex:1; min-width:170px; font-family:var(--f-ui); font-variant-numeric:tabular-nums; font-size:calc(11.5px * var(--k-fs)); color:var(--cyan); word-break:break-all; }
.cd-linkbtns { display:flex; gap:calc(6px * var(--k-esp)); }
.cd-linkbox.off { color:var(--text-mute); font-size:calc(12.5px * var(--k-fs)); }
.cd-drop { border:1.5px dashed var(--bg-line); border-radius:calc(12px * var(--k-r)); padding:calc(20px * var(--k-esp)) calc(18px * var(--k-esp)); display:flex; align-items:center; gap:calc(16px * var(--k-esp)); cursor:pointer; transition:all .15s ease; background:var(--bg-panel-2); }
.cd-drop:hover, .cd-drop.over { border-color:var(--gold); background:color-mix(in srgb, var(--c-accent) 6%, transparent); }
.cd-drop:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
.cd-drop-ic { flex-shrink:0; width:42px; height:42px; border-radius:50%; display:grid; place-items:center; color:var(--gold); background:color-mix(in srgb, var(--c-accent) 10%, transparent); border:1px solid color-mix(in srgb, var(--c-accent) 25%, transparent); }
.cd-drop-txt b { display:block; font-size:calc(13.5px * var(--k-fs)); color:var(--text-bright); margin-bottom:2px; }
.cd-drop-txt span { display:block; font-size:calc(12px * var(--k-fs)); color:var(--text-mute); }
.cd-drop-txt .cd-drop-sub { font-size:calc(10.5px * var(--k-fs)); color:var(--text-dim); margin-top:2px; }
.cd-anexo { display:flex; align-items:center; gap:calc(12px * var(--k-esp)); background:var(--bg-input); border:1px solid var(--bg-line); border-radius:calc(10px * var(--k-r)); padding:calc(12px * var(--k-esp)) calc(14px * var(--k-esp)); flex-wrap:wrap; }
.cd-anexo-ic { font-size:calc(22px * var(--k-fs)); }
.cd-anexo-info { flex:1; min-width:140px; }
.cd-anexo-info b { display:block; font-size:calc(13px * var(--k-fs)); color:var(--text-bright); word-break:break-all; }
.cd-anexo-info span { font-size:calc(11px * var(--k-fs)); color:var(--text-mute); }
@media (max-width:640px) {
  .cd-cards { grid-template-columns:repeat(2,1fr); }
  .cd-grid2 { grid-template-columns:1fr; }
}

/* Botões do rodapé do modal de detalhes */
.btn.whats-solid { background:#25D366; color:#053b1e; border-color:transparent; font-weight:700; }
.btn.whats-solid:hover { filter:brightness(1.06); }
.btn.whats-solid:disabled, .btn.whats-solid[disabled] { opacity:.4; cursor:not-allowed; }
.btn.danger-ghost { background:transparent; color:var(--red); border:1.5px solid color-mix(in srgb, var(--c-bad) 55%, transparent); font-weight:600; }
.btn.danger-ghost:hover { background:var(--red-bg); border-color:var(--red); }
.btn.danger-ghost:focus-visible { outline:2px solid color-mix(in srgb, var(--c-bad) 50%, transparent); outline-offset:2px; }

/* Barra de "Modelos de contrato": chips-pílula de MODELO (dourado quando
   ativo) + utilitários Restaurar/Limpar como ações de texto, separados à
   direita — visualmente distintos dos modelos. */
.ctr-modelos-bar { margin-bottom:14px; }
.ctr-modelos-lbl { display:block; font-size:calc(11px * var(--k-fs)); font-weight:700; letter-spacing:0.04em; text-transform:uppercase; color:var(--text-mute); margin-bottom:8px; }
.ctr-modelos-sub { font-weight:400; text-transform:none; letter-spacing:0; color:var(--text-dim); }
.ctr-modelos-chips { display:flex; flex-wrap:wrap; align-items:center; gap:calc(6px * var(--k-esp)); }
.ctr-modelo-chip { font-size:calc(11.5px * var(--k-fs)); font-weight:600; color:var(--text-base); background:var(--bg-panel-2); border:1px solid var(--bg-line); border-radius:100px; padding:calc(6px * var(--k-esp)) calc(13px * var(--k-esp)); cursor:pointer; transition:all .14s ease; }
.ctr-modelo-chip:hover { border-color:var(--gold); color:var(--text-bright); }
.ctr-modelo-chip.on { background:var(--c-prim); color:var(--c-prim-text); border-color:transparent; font-weight:700; }
.ctr-modelos-sp { flex:1 1 auto; min-width:12px; }
/* Utilitários (Restaurar/Limpar): empilhados no canto direito, um embaixo do
   outro, mesma largura. Botões retangulares (raio 8) distintos dos chips. */
.ctr-modelos-utils { display:flex; flex-direction:column; gap:calc(6px * var(--k-esp)); align-items:stretch; flex-shrink:0; }
.ctr-modelo-util { display:inline-flex; align-items:center; justify-content:center; gap:calc(5px * var(--k-esp)); font-size:calc(11.5px * var(--k-fs)); font-weight:600; color:var(--text-mute); background:var(--bg-panel-2); border:1px solid var(--bg-line); border-radius:calc(8px * var(--k-r)); padding:calc(7px * var(--k-esp)) calc(13px * var(--k-esp)); cursor:pointer; transition:all .14s ease; white-space:nowrap; }
.ctr-modelo-util:hover { color:var(--text-bright); border-color:var(--text-faint); }
.ctr-modelo-util.restore { color:var(--gold); border-color:color-mix(in srgb, var(--c-accent) 40%, transparent); background:color-mix(in srgb, var(--c-accent) 6%, transparent); }
.ctr-modelo-util.restore:hover { color:var(--c-prim-text); background:var(--c-prim); border-color:transparent; }
.ctr-modelo-util.danger { color:var(--red); border-color:color-mix(in srgb, var(--c-bad) 40%, transparent); background:color-mix(in srgb, var(--c-bad) 6%, transparent); }
.ctr-modelo-util.danger:hover { color:var(--c-bg); background:var(--red); border-color:var(--red); }
@media (max-width:640px) { .ctr-modelos-sp { flex-basis:100%; height:0; } .ctr-modelos-utils { flex-direction:row; width:100%; } .ctr-modelo-util { flex:1; } }
.ctr-campo-btns { display:flex; gap:calc(6px * var(--k-esp)); margin-top:6px; }
.ctr-campo-btns button { font-size:calc(11px * var(--k-fs)); font-weight:600; color:var(--text-mute); background:var(--bg-panel-2); border:1px solid var(--bg-line); border-radius:calc(7px * var(--k-r)); padding:calc(5px * var(--k-esp)) calc(10px * var(--k-esp)); cursor:pointer; transition:all .14s ease; }
.ctr-campo-btns button:hover { color:var(--gold); border-color:var(--gold); }

/* Banner "recomendado" da etapa Origem do wizard de contrato */

/* Toggle segmentado (PF/PJ) */
.seg-toggle { display:grid; grid-template-columns:1fr 1fr; gap:calc(8px * var(--k-esp)); }
.seg-toggle button { text-align:left; background:var(--bg-panel-2); border:1px solid var(--bg-line); border-radius:calc(10px * var(--k-r)); padding:calc(12px * var(--k-esp)) calc(14px * var(--k-esp)); cursor:pointer; transition:all .15s ease; }
.seg-toggle button b { display:block; font-size:calc(13px * var(--k-fs)); color:var(--text-base); }
.seg-toggle button span { display:block; font-size:calc(11px * var(--k-fs)); color:var(--text-mute); margin-top:2px; }
.seg-toggle button:hover { border-color:var(--text-faint); }
.seg-toggle button.on { border-color:var(--gold); background:color-mix(in srgb, var(--c-accent) 8%, transparent); }
.seg-toggle button.on b { color:var(--gold); }
@media (max-width:520px) { .seg-toggle { grid-template-columns:1fr; } }

.orc-pick-card { text-align:left; background:var(--bg-panel-2); border:1px solid var(--bg-line); border-radius:calc(11px * var(--k-r)); padding:calc(12px * var(--k-esp)); cursor:pointer; transition:all .15s ease; }
.orc-pick-card:hover { border-color:var(--text-faint); }
.orc-pick-card.on { border-color:var(--gold); box-shadow:0 0 0 1px var(--gold) inset; background:color-mix(in srgb, var(--c-accent) 6%, transparent); }
.orc-pick-card.avulso { display:flex; flex-direction:column; justify-content:center; min-height:70px; }
.opk-top { display:flex; align-items:center; justify-content:space-between; gap:calc(8px * var(--k-esp)); margin-bottom:6px; }
.opk-num { font-family:var(--f-ui); font-variant-numeric:tabular-nums; font-size:calc(12px * var(--k-fs)); font-weight:700; color:var(--gold); }
.opk-cli { font-size:calc(13px * var(--k-fs)); font-weight:600; color:var(--text-bright); }
.opk-ev { font-size:calc(11px * var(--k-fs)); color:var(--text-mute); margin-top:2px; }
.opk-foot { display:flex; align-items:center; gap:calc(8px * var(--k-esp)); flex-wrap:wrap; margin-top:8px; font-size:calc(10.5px * var(--k-fs)); color:var(--text-mute); }
.opk-foot b { font-family:var(--f-ui); font-variant-numeric:tabular-nums; color:var(--text-bright); font-size:calc(12.5px * var(--k-fs)); }
.opk-jc { color:var(--amber); font-weight:600; }
.opk-t { font-size:calc(13px * var(--k-fs)); font-weight:600; color:var(--text-base); }
.opk-s { font-size:calc(11px * var(--k-fs)); color:var(--text-mute); margin-top:2px; }

/* Chips de "opção rápida" (dados técnicos) */
.ctr-quick { display:flex; flex-wrap:wrap; gap:calc(6px * var(--k-esp)); margin-top:6px; }
.ctr-quick button { font-size:calc(11px * var(--k-fs)); font-weight:600; color:var(--text-mute); background:var(--bg-panel-2); border:1px solid var(--bg-line); border-radius:100px; padding:calc(5px * var(--k-esp)) calc(11px * var(--k-esp)); cursor:pointer; transition:all .14s ease; }
.ctr-quick button:hover { color:var(--text-bright); border-color:var(--text-faint); }
.ctr-quick button.on { background:var(--c-prim); color:var(--c-prim-text); border-color:transparent; }
/* ===== Origem compacta: UMA linha por seletor (orçamento/evento) ===== */
.src-pick { margin-top:2px; }
.src-row { display:flex; align-items:center; gap:calc(8px * var(--k-esp)); background:var(--bg-input); border:1px solid var(--bg-line); border-radius:calc(9px * var(--k-r)); padding:calc(7px * var(--k-esp)) calc(8px * var(--k-esp)) calc(7px * var(--k-esp)) calc(12px * var(--k-esp)); min-height:42px; }
.src-row.on { border-color:color-mix(in srgb, var(--c-accent) 45%, transparent); }
.src-txt { flex:1; min-width:0; font-size:calc(13px * var(--k-fs)); color:var(--text-bright); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.src-txt b { font-weight:700; }
.src-txt i { font-style:normal; color:var(--text-mute); font-size:calc(12px * var(--k-fs)); margin-left:7px; }
.src-txt.off { color:var(--text-mute); font-weight:500; }
.src-row .btn.small { flex-shrink:0; }
/* Estado vazio: só um botão-seletor de largura total (sem texto extra) */
.src-btn-full { width:100%; display:flex; align-items:center; justify-content:center; gap:calc(7px * var(--k-esp)); min-height:42px; padding:calc(9px * var(--k-esp)) calc(12px * var(--k-esp)); font-size:calc(13px * var(--k-fs)); font-weight:600; color:var(--text-base); background:var(--bg-input); border:1px dashed var(--bg-line); border-radius:calc(9px * var(--k-r)); cursor:pointer; transition:all .15s ease; }
.src-btn-full span { font-size:calc(16px * var(--k-fs)); line-height:1; color:var(--gold); font-weight:700; }
.src-btn-full:hover { border-color:var(--gold); color:var(--text-bright); background:color-mix(in srgb, var(--c-accent) 5%, transparent); }
.src-x { flex-shrink:0; width:26px; height:26px; border-radius:calc(7px * var(--k-r)); display:grid; place-items:center; font-size:calc(15px * var(--k-fs)); line-height:1; color:var(--text-mute); background:transparent; border:1px solid transparent; cursor:pointer; transition:all .14s ease; }
.src-x:hover { color:var(--red); background:var(--red-bg); }
.modal.sel-modal { max-width:560px; }
.sel-search { position:sticky; top:0; z-index:2; background:var(--bg-panel); padding-bottom:calc(12px * var(--k-esp)); margin-bottom:2px; }
.sel-search input { width:100%; background:var(--bg-input); color:var(--text-bright); border:1px solid var(--bg-line); border-radius:calc(9px * var(--k-r)); padding:calc(10px * var(--k-esp)) calc(12px * var(--k-esp)); font-size:calc(13.5px * var(--k-fs)); transition:border-color .16s ease; }
.sel-search input:focus { outline:none; border-color:var(--cyan); box-shadow:0 0 0 3px color-mix(in srgb, var(--c-info) 10%, transparent); }
.sel-topo { display:block; width:100%; text-align:left; background:var(--bg-panel-2); border:1px dashed var(--bg-line); border-radius:calc(10px * var(--k-r)); padding:calc(11px * var(--k-esp)) calc(13px * var(--k-esp)); margin-bottom:12px; cursor:pointer; transition:all .14s ease; }
.sel-topo:hover { border-color:var(--text-faint); }
.sel-topo b { display:block; font-size:calc(13px * var(--k-fs)); color:var(--text-bright); }
.sel-topo span { display:block; font-size:calc(11px * var(--k-fs)); color:var(--text-mute); margin-top:2px; }
.sel-list { display:flex; flex-direction:column; gap:calc(8px * var(--k-esp)); }
.sel-card { width:100%; }
.sel-empty { text-align:center; font-size:calc(12.5px * var(--k-fs)); color:var(--text-dim); padding:calc(22px * var(--k-esp)); }

/* Remove as setinhas (spinners) dos campos numéricos — visual mais limpo */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
input[type=number] { -moz-appearance:textfield; appearance:textfield; }

/* Campos calculados/readonly do contrato (duração, restante): cara de "automático" */
#fctr-ev-dur[readonly] { color:var(--text-base); font-weight:600; background:var(--bg-input); cursor:default; }
#fctr-restante[readonly] { color:var(--text-bright); font-weight:600; background:var(--bg-panel-2); cursor:default; }

@media (max-width:640px) {
  .ctr-d-resumo { grid-template-columns:1fr; }
  .ctr-d-grid { grid-template-columns:1fr; }
}
.kit-tag { font-size:calc(10.5px * var(--k-fs)); color:var(--text-mute); font-family:var(--f-ui); font-variant-numeric:tabular-nums; }
.row-actions { display:flex; gap:calc(5px * var(--k-esp)); justify-content:center; }
.icon-btn { width:28px; height:28px; flex-shrink:0; border-radius:calc(7px * var(--k-r)); display:grid; place-items:center; background:var(--bg-panel-2); border:1px solid var(--bg-line); color:var(--text-mute); transition:all 0.15s ease; cursor:pointer; }
.icon-btn svg { display:block; }
.icon-btn:hover { color:var(--text-bright); border-color:var(--text-faint); }
.icon-btn:focus-visible { outline:2px solid var(--cyan); outline-offset:1px; }
.icon-btn.edit:hover   { color:var(--cyan); border-color:var(--cyan); }
.icon-btn.del:hover    { color:var(--red); border-color:var(--red); }
.icon-btn.toggle:hover { color:var(--amber); border-color:var(--amber); }
.icon-btn.info:hover   { color:var(--cyan); border-color:var(--cyan); }
/* WhatsApp — verde oficial da marca (#25D366) sutil. Quando desabilitado fica opaco. */
.icon-btn.whats        { color:#25D366; border-color:rgba(37,211,102,0.35); background:rgba(37,211,102,0.08); }
.icon-btn.whats:hover  { color:#fff; border-color:#25D366; background:#25D366; }
.icon-btn.whats:disabled,
.icon-btn.whats[disabled] { opacity:0.35; cursor:not-allowed; background:var(--bg-panel-2); color:var(--text-faint); border-color:var(--bg-line); }
/* Botão WhatsApp grande (usado em modal de detalhes do evento) */
.btn.whats-btn { background:#25D366; color:#fff; border:1px solid #1FAD52; }
.btn.whats-btn:hover { background:#1FAD52; }
.table-foot { display:flex; align-items:center; justify-content:space-between; padding:calc(14px * var(--k-esp)) calc(4px * var(--k-esp)) 0; font-size:calc(11.5px * var(--k-fs)); color:var(--text-mute); flex-wrap:wrap; gap:calc(8px * var(--k-esp)); }
.table-empty { padding:calc(50px * var(--k-esp)); text-align:center; color:var(--text-dim); font-size:calc(13.5px * var(--k-fs)); }
.row-tag-obs { display:inline-block; margin-left:6px; color:var(--gold); font-size:calc(9px * var(--k-fs)); vertical-align:middle; }
.row-tag-part { display:inline-block; margin-left:4px; color:var(--cyan); font-size:calc(11px * var(--k-fs)); vertical-align:middle; font-weight:700; }

/* ===================== 13. RESUMO AGENDA ===================== */
.resumo-agenda { margin-top:22px; background:var(--bg-panel); border:1px solid var(--bg-line); border-radius:var(--radius); padding:calc(24px * var(--k-esp)); }
.resumo-agenda .resumo-empty { text-align:center; padding:calc(30px * var(--k-esp)); color:var(--text-dim); font-size:calc(13px * var(--k-fs)); }
.resumo-head { display:flex; justify-content:space-between; align-items:flex-start; gap:calc(14px * var(--k-esp)); padding-bottom:calc(18px * var(--k-esp)); border-bottom:1px solid var(--bg-line); margin-bottom:20px; flex-wrap:wrap; }
.resumo-head h3 { font-family:var(--f-ui); font-size:calc(19px * var(--k-fs)); font-weight:600; color:var(--text-bright); letter-spacing:-0.01em; }
.resumo-sub { font-size:calc(11.5px * var(--k-fs)); color:var(--text-mute); display:block; margin-top:2px; font-family:var(--f-ui); font-variant-numeric:tabular-nums; }
.resumo-totalbox { text-align:right; }
.resumo-totalbox-lbl { display:block; font-size:calc(10.5px * var(--k-fs)); text-transform:uppercase; color:var(--text-dim); font-weight:700; letter-spacing:0.06em; }
.resumo-totalbox-val { font-family:var(--f-ui); font-variant-numeric:tabular-nums; font-size:calc(24px * var(--k-fs)); font-weight:600; color:var(--green); }
.resumo-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:calc(12px * var(--k-esp)); margin-bottom:22px; }
.rs-card { background:var(--bg-deep); border:1px solid var(--bg-line); border-radius:calc(9px * var(--k-r)); padding:calc(13px * var(--k-esp)) calc(14px * var(--k-esp)); display:flex; flex-direction:column; gap:calc(4px * var(--k-esp)); }
.rs-lbl { font-size:calc(10.5px * var(--k-fs)); text-transform:uppercase; color:var(--text-dim); font-weight:700; letter-spacing:0.05em; }
.rs-val { font-family:var(--f-ui); font-variant-numeric:tabular-nums; font-size:calc(15px * var(--k-fs)); font-weight:600; color:var(--text-bright); }
.rs-val.gold { color:var(--gold); }
.rs-val.green { color:var(--green); }
.rs-val.blue { color:var(--blue); }
.rs-sep { color:var(--text-dim); }
.rs-mute { color:var(--text-dim); }
.resumo-status h4 { font-size:calc(13px * var(--k-fs)); font-weight:700; color:var(--text-bright); margin-bottom:12px; }
.rs-status-list { display:flex; flex-direction:column; gap:calc(8px * var(--k-esp)); }
.rs-status-row { display:grid; grid-template-columns:1fr auto auto; gap:calc(14px * var(--k-esp)); align-items:center; padding:calc(10px * var(--k-esp)) calc(14px * var(--k-esp)); background:var(--bg-deep); border:1px solid var(--bg-line); border-radius:calc(8px * var(--k-r)); }
.rs-st-n { font-size:calc(12px * var(--k-fs)); color:var(--text-mute); font-family:var(--f-ui); font-variant-numeric:tabular-nums; }
.rs-st-v { font-size:calc(13px * var(--k-fs)); font-weight:600; color:var(--text-bright); font-family:var(--f-ui); font-variant-numeric:tabular-nums; }

/* ===================== 14. DETALHES EVENTO ===================== */
.modal-detalhes-size { max-width:880px; }
.det-header { display:flex; justify-content:space-between; align-items:flex-start; gap:calc(18px * var(--k-esp)); padding-bottom:calc(22px * var(--k-esp)); border-bottom:1px solid var(--bg-line); margin-bottom:22px; flex-wrap:wrap; }
.det-title h2 { font-family:var(--f-ui); font-size:calc(24px * var(--k-fs)); font-weight:600; color:var(--text-bright); line-height:1.2; letter-spacing:-0.01em; margin-bottom:8px; }
.det-sub { display:flex; align-items:center; gap:calc(10px * var(--k-esp)); flex-wrap:wrap; }
.det-dot { color:var(--text-dim); }
.det-data { font-family:var(--f-ui); font-variant-numeric:tabular-nums; font-size:calc(13px * var(--k-fs)); color:var(--text-mute); font-weight:600; }
.det-totalbox { text-align:right; }
.det-totalbox-lbl { display:block; font-size:calc(10.5px * var(--k-fs)); text-transform:uppercase; color:var(--text-dim); font-weight:700; letter-spacing:0.06em; margin-bottom:2px; }
.det-totalbox-val { font-family:var(--f-ui); font-variant-numeric:tabular-nums; font-size:calc(26px * var(--k-fs)); font-weight:600; color:var(--green); }
.det-grid { display:grid; grid-template-columns:1fr 1fr; gap:calc(22px * var(--k-esp)); }
.det-section.full { grid-column:1 / -1; }
.det-section h3 { font-size:calc(11.5px * var(--k-fs)); text-transform:uppercase; letter-spacing:0.06em; color:var(--gold); font-weight:700; margin-bottom:12px; padding-bottom:calc(8px * var(--k-esp)); border-bottom:1px solid var(--bg-line); }
.det-row { display:flex; justify-content:space-between; gap:calc(14px * var(--k-esp)); padding:calc(7px * var(--k-esp)) 0; border-bottom:1px solid color-mix(in srgb, var(--c-border) 40%, transparent); }
.det-row:last-child { border-bottom:none; }
.det-lbl { font-size:calc(12px * var(--k-fs)); color:var(--text-mute); font-weight:500; }
.det-val { font-size:calc(13px * var(--k-fs)); color:var(--text-bright); font-weight:600; text-align:right; word-break:break-word; }
.det-obs { background:var(--bg-deep); border:1px solid var(--bg-line); border-radius:calc(9px * var(--k-r)); padding:calc(14px * var(--k-esp)) calc(16px * var(--k-esp)); font-size:calc(13px * var(--k-fs)); color:var(--text-base); line-height:1.6; white-space:pre-wrap; min-height:50px; }

.anexo-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.anexo-head h3 { margin:0; border:none; padding:0; }
.btn-anexar { cursor:pointer; padding:calc(7px * var(--k-esp)) calc(13px * var(--k-esp)); font-size:calc(12px * var(--k-fs)); }
.anexo-list { display:flex; flex-direction:column; gap:calc(8px * var(--k-esp)); }
.anexo-item { display:flex; align-items:center; gap:calc(11px * var(--k-esp)); padding:calc(10px * var(--k-esp)) calc(13px * var(--k-esp)); background:var(--bg-deep); border:1px solid var(--bg-line); border-radius:calc(8px * var(--k-r)); }
.anexo-item > svg { color:var(--cyan); flex-shrink:0; }
.anexo-info { flex:1; min-width:0; }
.anexo-nome { display:block; font-size:calc(12.5px * var(--k-fs)); color:var(--text-bright); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.anexo-meta { display:block; font-size:calc(10.5px * var(--k-fs)); color:var(--text-mute); margin-top:1px; }
.anexo-empty { padding:calc(16px * var(--k-esp)); text-align:center; font-size:calc(12px * var(--k-fs)); color:var(--text-dim); border:1px dashed var(--bg-line); border-radius:calc(9px * var(--k-r)); }
.anexo-hint { font-size:calc(11px * var(--k-fs)); color:var(--text-dim); margin-top:10px; }

/* ===================== 15. MODAL ===================== */
.modal-overlay { position:fixed; inset:0; z-index:500; background:var(--c-overlay); backdrop-filter:blur(4px); display:none; align-items:center; justify-content:center; padding:calc(20px * var(--k-esp)); overscroll-behavior:contain; }
.modal-overlay.show { display:flex; animation:fadeIn 0.2s ease; }
/* A página fica presa com janela aberta pelo Rolagem (app/interface.js, body.rolagem-presa),
   que também devolve a página ao mesmo ponto ao fechar — um jeito só (07/10). O overscroll
   contido impede o "scroll chaining" para a página de trás. */
.modal, .modal-body, .cd-body { overscroll-behavior:contain; }
/* Estrutura CONTIDA (todos os modais): o container é flex-column com overflow
   hidden — quem rola é SÓ o .modal-body. A scrollbar fica dentro da caixa,
   respeitando o border-radius, sem passar por cima do header/rodapé. */
.modal { background:var(--bg-panel); border:1px solid var(--bg-line); border-radius:var(--radius-lg); box-shadow:var(--shadow-xl); width:100%; max-width:620px; max-height:min(90vh, calc(100dvh - 32px)); display:flex; flex-direction:column; overflow:hidden; animation:modalIn 0.28s cubic-bezier(0.16,1,0.3,1); }
.modal-lg { max-width:820px; }
.modal-xl { max-width:980px; }
@keyframes modalIn { from { opacity:0; transform:translateY(20px) scale(0.97); } to { opacity:1; transform:translateY(0) scale(1); } }
.modal-head { display:flex; align-items:center; justify-content:space-between; padding:calc(22px * var(--k-esp)) calc(24px * var(--k-esp)); border-bottom:1px solid var(--bg-line); background:var(--bg-panel); flex-shrink:0; }
.modal-head h3 { font-family:var(--f-ui); font-size:calc(19px * var(--k-fs)); font-weight:600; color:var(--text-bright); }
.modal-close { width:32px; height:32px; border-radius:calc(8px * var(--k-r)); display:grid; place-items:center; color:var(--text-mute); background:var(--bg-panel-2); transition:all 0.15s ease; cursor:pointer; }
.modal-close:hover { color:var(--red); background:var(--red-bg); }
/* "← Voltar" dos modais filhos de um fluxo encadeado (some quando não há pai). */
.modal-back { display:inline-flex; align-items:center; gap:calc(5px * var(--k-esp)); height:32px; padding:0 calc(12px * var(--k-esp)); border-radius:calc(8px * var(--k-r)); font-size:calc(13px * var(--k-fs)); font-weight:600; white-space:nowrap; flex-shrink:0; color:var(--text-mute); background:var(--bg-panel-2); transition:all 0.15s ease; cursor:pointer; }
.modal-back:hover { color:var(--text-bright); background:var(--bg-line); }
.modal-body { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; padding:calc(24px * var(--k-esp)); }
.modal-foot { display:flex; gap:calc(10px * var(--k-esp)); justify-content:flex-end; padding:calc(18px * var(--k-esp)) calc(24px * var(--k-esp)); border-top:1px solid var(--bg-line); background:var(--bg-panel); flex-wrap:wrap; flex-shrink:0; }

.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:calc(16px * var(--k-esp)); }
.form-field { display:flex; flex-direction:column; gap:calc(6px * var(--k-esp)); }
.form-field.full { grid-column:1 / -1; }
.form-field label { font-size:calc(11px * var(--k-fs)); font-weight:700; color:var(--text-mute); text-transform:uppercase; letter-spacing:0.04em; display:flex; align-items:center; gap:calc(5px * var(--k-esp)); }
.form-field label .req { color:var(--red); }
.form-field input, .form-field select, .form-field textarea { background:var(--bg-input); color:var(--text-bright); border:1px solid var(--bg-line); border-radius:calc(8px * var(--k-r)); padding:calc(10px * var(--k-esp)) calc(12px * var(--k-esp)); font-size:calc(13.5px * var(--k-fs)); transition:border-color 0.16s ease; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline:none; border-color:var(--cyan); box-shadow:0 0 0 3px color-mix(in srgb, var(--c-info) 10%, transparent); }
.form-field input.error, .form-field select.error { border-color:var(--red); box-shadow:0 0 0 3px color-mix(in srgb, var(--c-bad) 12%, transparent); }
.form-field textarea { resize:vertical; min-height:84px; line-height:1.55; }
.form-field textarea.lg { min-height:160px; }
.form-field textarea.xl { min-height:220px; }
.field-error { font-size:calc(11px * var(--k-fs)); color:var(--red); font-weight:600; display:none; }
.field-error.show { display:block; }
.form-hint { font-size:calc(11px * var(--k-fs)); color:var(--text-dim); }

.form-section { grid-column:1 / -1; margin-top:8px; padding-top:calc(14px * var(--k-esp)); border-top:1px dashed var(--bg-line); }
.form-section-title { font-size:calc(11.5px * var(--k-fs)); text-transform:uppercase; letter-spacing:0.07em; color:var(--gold); font-weight:700; margin-bottom:10px; }
.form-check { display:flex; align-items:center; gap:calc(8px * var(--k-esp)); font-size:calc(12.5px * var(--k-fs)); color:var(--text-base); cursor:pointer; font-weight:500; }
.form-check input[type=checkbox] { accent-color:var(--gold); width:16px; height:16px; }

.btn { display:inline-flex; align-items:center; gap:calc(7px * var(--k-esp)); padding:calc(10px * var(--k-esp)) calc(18px * var(--k-esp)); border-radius:calc(9px * var(--k-r)); font-size:calc(13px * var(--k-fs)); font-weight:700; transition:all 0.16s ease; cursor:pointer; }
.btn.primary { background:var(--c-prim); color:var(--c-prim-text); }
.btn.primary:hover { filter:brightness(1.08); }
.btn.danger { background:var(--red); color:var(--c-bg); }
.btn.danger:hover { filter:brightness(1.08); }
.btn.ghost { background:var(--bg-panel-2); color:var(--text-base); border:1px solid var(--bg-line); }
.btn.ghost:hover { border-color:var(--text-faint); color:var(--text-bright); }
.btn.warn { background:var(--amber); color:var(--bg-deep); }
.btn.warn:hover { filter:brightness(1.08); }
.btn:disabled { opacity:0.55; cursor:not-allowed; filter:none !important; }

.modal.confirm { max-width:460px; }
.confirm-body { text-align:center; padding:calc(28px * var(--k-esp)) calc(24px * var(--k-esp)) calc(8px * var(--k-esp)); }
.confirm-body h3 { font-family:var(--f-ui); font-size:calc(20px * var(--k-fs)); color:var(--text-bright); margin-bottom:8px; }
.confirm-body p { font-size:calc(13.5px * var(--k-fs)); color:var(--text-mute); }
.confirm-body p b { color:var(--text-base); }
.confirm-icon { width:56px; height:56px; border-radius:calc(14px * var(--k-r)); margin:0 auto 16px; display:grid; place-items:center; font-size:calc(26px * var(--k-fs)); background:var(--red-bg); color:var(--red); }
.confirm-icon.warn { background:var(--amber-bg); color:var(--amber); }
.confirm-icon.info { background:var(--blue-bg); color:var(--blue); }

/* ===================== 16. SUB-TABS + ORÇ/CTR CARDS ===================== */
.subtabs { display:flex; gap:calc(4px * var(--k-esp)); background:var(--bg-deep); padding:calc(4px * var(--k-esp)); border-radius:calc(9px * var(--k-r)); border:1px solid var(--bg-line); margin-bottom:20px; width:fit-content; }
.subtab { display:inline-flex; align-items:center; gap:calc(7px * var(--k-esp)); padding:calc(9px * var(--k-esp)) calc(16px * var(--k-esp)); font-size:calc(12.5px * var(--k-fs)); font-weight:600; color:var(--text-mute); background:transparent; border-radius:calc(6px * var(--k-r)); cursor:pointer; transition:all 0.16s ease; }
.subtab:hover { color:var(--text-base); }
.subtab.active { background:var(--bg-panel-2); color:var(--gold); box-shadow:var(--shadow-sm); }
.subview { animation:fadeIn 0.2s ease; }

.lista-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; flex-wrap:wrap; gap:calc(12px * var(--k-esp)); }
.lista-head h3 { font-family:var(--f-ui); font-size:calc(18px * var(--k-fs)); font-weight:600; color:var(--text-bright); }
.lista-sub { font-size:calc(11.5px * var(--k-fs)); color:var(--text-mute); display:block; margin-top:2px; font-family:var(--f-ui); font-variant-numeric:tabular-nums; }

.orc-list { display:flex; flex-direction:column; gap:calc(12px * var(--k-esp)); }
.orc-card { background:var(--bg-panel); border:1px solid var(--bg-line); border-radius:calc(11px * var(--k-r)); padding:calc(16px * var(--k-esp)) calc(18px * var(--k-esp)); transition:all 0.16s ease; }
.orc-card:hover { border-color:color-mix(in srgb, var(--c-accent) 30%, transparent); transform:translateY(-1px); }
.orc-card-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; padding-bottom:calc(10px * var(--k-esp)); border-bottom:1px solid var(--bg-line); flex-wrap:wrap; gap:calc(10px * var(--k-esp)); }
.orc-card-head > div { display:flex; align-items:center; gap:calc(10px * var(--k-esp)); flex-wrap:wrap; }
.orc-num { font-family:var(--f-ui); font-variant-numeric:tabular-nums; font-size:calc(13px * var(--k-fs)); font-weight:700; color:var(--gold); letter-spacing:0.02em; }
.orc-data { font-size:calc(11px * var(--k-fs)); color:var(--text-dim); font-family:var(--f-ui); font-variant-numeric:tabular-nums; }
.orc-card-body { margin-bottom:14px; }
.orc-cliente { font-size:calc(15px * var(--k-fs)); font-weight:600; color:var(--text-bright); margin-bottom:4px; }
.orc-desc, .orc-evento { font-size:calc(12px * var(--k-fs)); color:var(--text-mute); margin-top:3px; }
.orc-card-foot { display:flex; justify-content:space-between; align-items:center; gap:calc(12px * var(--k-esp)); flex-wrap:wrap; }
.orc-total { display:flex; flex-direction:column; gap:calc(2px * var(--k-esp)); }
.orc-total span { font-size:calc(10.5px * var(--k-fs)); text-transform:uppercase; color:var(--text-dim); letter-spacing:0.05em; font-weight:700; }
.orc-total b { font-family:var(--f-ui); font-variant-numeric:tabular-nums; font-size:calc(17px * var(--k-fs)); color:var(--green); font-weight:600; }
.orc-acoes { display:flex; gap:calc(6px * var(--k-esp)); flex-wrap:wrap; align-items:center; }
/* Meta do card: evento / validade / envio / estado do link */
.orc-meta { display:flex; flex-wrap:wrap; gap:calc(6px * var(--k-esp)) calc(14px * var(--k-esp)); margin-top:10px; font-size:calc(11.5px * var(--k-fs)); color:var(--text-mute); }
.orc-meta-i b { color:var(--text-base); font-weight:600; }
.orc-meta-i.on  { color:var(--green); font-weight:700; }
.orc-meta-i.off { color:var(--amber); font-weight:700; }
.orc-meta-i.vis { color:var(--gold); font-weight:700; }
/* Aviso com link manual (fallback quando o navegador bloqueia a abertura) */
.orc-link-manual { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:100000;
  display:flex; align-items:center; gap:calc(12px * var(--k-esp)); flex-wrap:wrap; max-width:92%;
  background:var(--bg-panel); border:1px solid var(--gold); border-radius:calc(12px * var(--k-r)); padding:calc(12px * var(--k-esp)) calc(14px * var(--k-esp));
  box-shadow:0 14px 34px rgba(0,0,0,calc(0.4 * var(--k-sombra))); }
.orc-link-manual .olm-txt { font-size:calc(12.5px * var(--k-fs)); color:var(--text-base); }
.orc-link-manual .olm-link { font-size:calc(13px * var(--k-fs)); font-weight:700; color:var(--c-prim-text); background:var(--c-prim);
  padding:calc(8px * var(--k-esp)) calc(14px * var(--k-esp)); border-radius:calc(8px * var(--k-r)); text-decoration:none; }
.orc-link-manual .olm-link:hover { filter:brightness(1.06); }
.orc-link-manual .olm-x { background:transparent; border:none; color:var(--text-mute); font-size:calc(14px * var(--k-fs)); cursor:pointer; padding:calc(2px * var(--k-esp)) calc(6px * var(--k-esp)); }
.orc-link-manual .olm-x:hover { color:var(--text-bright); }

/* ===== Catálogo: cards de Equipamentos / Kits (listagem) ===== */
.cat-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:calc(12px * var(--k-esp)); }
.cat-card { display:flex; gap:calc(12px * var(--k-esp)); background:var(--bg-panel); border:1px solid var(--bg-line); border-radius:calc(13px * var(--k-r)); padding:calc(12px * var(--k-esp)); transition:border-color .14s ease, transform .12s ease; }
.cat-card:hover { border-color:var(--text-faint); }
.cat-card-click { cursor:pointer; }
.cat-card-click:hover { border-color:var(--gold); }
.cat-chip.inc { background:var(--green-bg); border-color:transparent; color:var(--green); }
.cat-chip.ok { background:var(--green-bg); border-color:transparent; color:var(--green); }
.cat-chip.off { background:color-mix(in srgb, var(--c-text-3) 15%, transparent); border-color:transparent; color:var(--text-mute); }

/* ===== Modal de detalhes (equipamento/kit) ===== */
.cat-det-top { display:flex; gap:calc(16px * var(--k-esp)); align-items:flex-start; margin-bottom:14px; }
.cat-det-thumb { flex-shrink:0; width:130px; height:100px; border-radius:calc(11px * var(--k-r)); overflow:hidden; background:var(--bg-panel-2); border:1px solid var(--bg-line); display:grid; place-items:center; font-size:calc(40px * var(--k-fs)); }
.cat-det-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.cat-det-info { flex:1; min-width:0; }
.cat-det-badges { display:flex; flex-wrap:wrap; gap:calc(6px * var(--k-esp)); margin-bottom:8px; }
.cat-det-valor { font-size:calc(14px * var(--k-fs)); color:var(--text-base); }
.cat-det-valor b { color:var(--gold); }
.cat-det-desc { font-size:calc(13px * var(--k-fs)); color:var(--text-base); line-height:1.55; background:var(--bg-panel-2); border:1px solid var(--bg-line); border-radius:calc(10px * var(--k-r)); padding:calc(12px * var(--k-esp)) calc(14px * var(--k-esp)); white-space:pre-wrap; }
.cat-det-desc.muted { color:var(--text-dim); }
.cat-det-foot { display:flex; flex-wrap:wrap; gap:calc(8px * var(--k-esp)); justify-content:flex-end; }
.cat-det-foot .btn.danger { color:var(--red); }
.cat-det-foot .btn.danger:hover { border-color:var(--red); background:var(--red-bg); }
/* Lista de componentes no detalhe do kit */
.mkd-comp { display:flex; align-items:center; gap:calc(10px * var(--k-esp)); padding:calc(8px * var(--k-esp)) 0; border-bottom:1px solid var(--bg-line); }
.mkd-comp:last-child { border-bottom:none; }
.mkd-comp-thumb { width:44px; height:44px; border-radius:calc(8px * var(--k-r)); overflow:hidden; background:var(--bg-panel-2); border:1px solid var(--bg-line); display:grid; place-items:center; font-size:calc(18px * var(--k-fs)); flex-shrink:0; }
.mkd-comp-thumb img { width:100%; height:100%; object-fit:cover; }
.mkd-comp-info { flex:1; min-width:0; }
.mkd-comp-nome { font-size:calc(13px * var(--k-fs)); font-weight:600; color:var(--text-bright); }
.mkd-comp-sub { font-size:calc(11px * var(--k-fs)); color:var(--text-mute); margin-top:2px; }
.mkd-comp-val { font-size:calc(12.5px * var(--k-fs)); font-weight:700; color:var(--gold); white-space:nowrap; }
.mkd-cover { width:100%; height:170px; border-radius:calc(12px * var(--k-r)); overflow:hidden; background:var(--bg-panel-2); border:1px solid var(--bg-line); margin-bottom:14px; display:grid; grid-template-columns:1fr 1fr; gap:calc(2px * var(--k-esp)); }
.mkd-cover.solo { grid-template-columns:1fr; }
.mkd-cover img { width:100%; height:100%; object-fit:cover; display:block; }
.mkd-cover .mkd-cover-ph { grid-column:1/-1; display:grid; place-items:center; font-size:calc(52px * var(--k-fs)); color:var(--text-faint); }
.cat-card.inativo { opacity:0.62; }
.cat-card-thumb { flex-shrink:0; width:64px; height:64px; border-radius:calc(10px * var(--k-r)); overflow:hidden; background:var(--bg-panel-2); border:1px solid var(--bg-line); display:grid; place-items:center; font-size:calc(26px * var(--k-fs)); }
.cat-card-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.cat-thumb-collage { display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:1fr; width:100%; height:100%; gap:calc(1px * var(--k-esp)); }
.cat-thumb-collage img { width:100%; height:100%; object-fit:cover; }
.mkd-comps { display:flex; flex-direction:column; }
/* Componente de kit no FORM do orçamento — recuo/leveza para hierarquia. */
.item-row.item-row-sub { margin-left:16px; border-left:2px solid var(--bg-line); padding-left:calc(8px * var(--k-esp)); }
.item-row.item-row-sub .item-descricao { color:var(--text-mute); }
.cat-card-body { flex:1; min-width:0; }
.cat-card-top { display:flex; align-items:center; gap:calc(8px * var(--k-esp)); flex-wrap:wrap; }
.cat-card-nome { font-size:calc(14px * var(--k-fs)); font-weight:700; color:var(--text-bright); }
.cat-card-meta { display:flex; align-items:center; gap:calc(8px * var(--k-esp)); flex-wrap:wrap; margin-top:4px; }
.cat-chip { font-size:calc(10px * var(--k-fs)); font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--text-mute); background:var(--bg-panel-2); border:1px solid var(--bg-line); padding:calc(2px * var(--k-esp)) calc(8px * var(--k-esp)); border-radius:100px; }
.cat-card-valor { font-size:calc(13px * var(--k-fs)); font-weight:800; color:var(--gold); }
.cat-card-valor.sem { color:var(--text-mute); font-weight:600; font-size:calc(12px * var(--k-fs)); }
.cat-card-desc { font-size:calc(11.5px * var(--k-fs)); color:var(--text-mute); margin-top:5px; line-height:1.4; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.cat-card-acoes { display:flex; flex-direction:column; gap:calc(4px * var(--k-esp)); flex-shrink:0; }
.cat-card-acoes .icon-btn { width:30px; height:28px; }
/* Prévia de foto nos cadastros */
.cat-foto-preview { position:relative; margin-top:8px; width:120px; height:80px; border-radius:calc(9px * var(--k-r)); overflow:hidden; border:1px solid var(--bg-line); background:var(--bg-panel-2); }
.cat-foto-preview img { width:100%; height:100%; object-fit:cover; display:block; }
.cat-foto-x { position:absolute; top:4px; right:4px; width:22px; height:22px; border-radius:calc(6px * var(--k-r)); border:none; background:rgba(4,8,20,0.7); color:#fff; cursor:pointer; font-size:calc(12px * var(--k-fs)); line-height:1; }
.cat-foto-x:hover { background:var(--red); }

/* ===== Upload de foto customizado (dropzone) ===== */
.upload-foto { margin-top:4px; }
/* O atributo [hidden] precisa vencer o display:flex das classes abaixo — senão
   a prévia (com <img> sem src) fica sempre visível mostrando o alt quebrado. */
.upload-foto .uf-empty[hidden], .upload-foto .uf-preview[hidden] { display:none !important; }
.upload-foto .uf-empty { width:100%; display:flex; align-items:center; gap:calc(12px * var(--k-esp)); text-align:left;
  background:var(--bg-panel-2); border:1.5px dashed var(--bg-line); border-radius:calc(11px * var(--k-r)); padding:calc(16px * var(--k-esp)) calc(16px * var(--k-esp));
  color:var(--text-mute); cursor:pointer; font-family:inherit; transition:border-color .14s ease, background .14s ease; }
.upload-foto .uf-empty:hover { border-color:var(--gold); color:var(--text-base); }
.upload-foto.drag .uf-empty { border-color:var(--gold); background:color-mix(in srgb, var(--c-accent) 8%, transparent); color:var(--text-bright); }
.upload-foto .uf-empty svg { flex-shrink:0; color:var(--gold); }
.uf-txt { font-size:calc(12.5px * var(--k-fs)); line-height:1.45; }
.uf-txt b { color:var(--text-bright); font-weight:700; }
.uf-txt small { color:var(--text-dim); font-size:calc(11px * var(--k-fs)); }
.uf-preview { display:flex; align-items:center; gap:calc(14px * var(--k-esp)); background:var(--bg-panel-2); border:1px solid var(--bg-line); border-radius:calc(11px * var(--k-r)); padding:calc(12px * var(--k-esp)); }
.uf-preview img { width:96px; height:72px; object-fit:cover; border-radius:calc(8px * var(--k-r)); border:1px solid var(--bg-line); flex-shrink:0; }
.uf-actions { display:flex; gap:calc(8px * var(--k-esp)); }
.uf-actions button { font-size:calc(12px * var(--k-fs)); font-weight:700; padding:calc(8px * var(--k-esp)) calc(14px * var(--k-esp)); border-radius:calc(8px * var(--k-r)); cursor:pointer; border:1px solid var(--bg-line); background:var(--bg-panel); color:var(--text-base); }
.uf-actions .uf-trocar:hover { border-color:var(--gold); color:var(--gold); }
.uf-actions .uf-remover:hover { border-color:var(--red); color:var(--red); }


/* ===== Catálogo: seletores de Equipamento / Kit ===== */
.cat-busca { width:100%; background:var(--bg-panel-2); border:1px solid var(--bg-line); border-radius:calc(9px * var(--k-r)); padding:calc(10px * var(--k-esp)) calc(13px * var(--k-esp)); color:var(--text-base); font-size:calc(13px * var(--k-fs)); font-family:inherit; margin-bottom:12px; }
.cat-busca:focus { outline:none; border-color:var(--gold); }
.cat-sel-tools { display:flex; gap:calc(8px * var(--k-esp)); margin-bottom:10px; }
.cat-sel-tool { font-size:calc(11.5px * var(--k-fs)); font-weight:700; padding:calc(6px * var(--k-esp)) calc(12px * var(--k-esp)); border-radius:100px; cursor:pointer;
  background:var(--bg-panel-2); border:1px solid var(--bg-line); color:var(--text-mute); transition:all .14s ease; }
.cat-sel-tool:hover { color:var(--gold); border-color:var(--gold); }
.cat-sel-lista { display:flex; flex-direction:column; gap:calc(8px * var(--k-esp)); max-height:52vh; overflow-y:auto; padding:calc(2px * var(--k-esp)) calc(4px * var(--k-esp)) calc(4px * var(--k-esp)) calc(2px * var(--k-esp)); }
.cat-sel-vazio { text-align:center; color:var(--text-mute); padding:calc(28px * var(--k-esp)) calc(12px * var(--k-esp)); font-size:calc(13px * var(--k-fs)); }
.cat-sel-card { display:flex; align-items:center; gap:calc(12px * var(--k-esp)); background:var(--bg-panel-2); border:1px solid var(--bg-line); border-radius:calc(11px * var(--k-r)); padding:calc(10px * var(--k-esp)) calc(12px * var(--k-esp)); cursor:pointer; transition:border-color .14s ease, background .14s ease; }
.cat-sel-card:hover { border-color:var(--text-faint); }
.cat-sel-card.sel { border-color:var(--gold); background:color-mix(in srgb, var(--c-accent) 8%, transparent); }
.cat-sel-ck { flex-shrink:0; display:flex; align-items:center; }
.cat-sel-ck input { width:17px; height:17px; accent-color:var(--gold); cursor:pointer; }
.cat-sel-thumb { flex-shrink:0; width:52px; height:52px; border-radius:calc(9px * var(--k-r)); overflow:hidden; background:var(--bg-panel); border:1px solid var(--bg-line); display:grid; place-items:center; font-size:calc(22px * var(--k-fs)); }
.cat-sel-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.cat-sel-info { flex:1; min-width:0; }
.cat-sel-nome { font-size:calc(13.5px * var(--k-fs)); font-weight:700; color:var(--text-bright); display:flex; align-items:center; gap:calc(8px * var(--k-esp)); flex-wrap:wrap; }
.cat-sel-cat { font-size:calc(10px * var(--k-fs)); font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--text-mute); background:var(--bg-panel); border:1px solid var(--bg-line); padding:calc(2px * var(--k-esp)) calc(7px * var(--k-esp)); border-radius:100px; }
.cat-sel-desc { font-size:calc(11.5px * var(--k-fs)); color:var(--text-mute); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cat-sel-meta { font-size:calc(12px * var(--k-fs)); color:var(--text-base); margin-top:4px; display:flex; align-items:center; gap:calc(6px * var(--k-esp)); }
.cat-sel-meta b { color:var(--gold); }
.cat-sel-tag { font-size:calc(9.5px * var(--k-fs)); font-weight:800; text-transform:uppercase; letter-spacing:0.04em; padding:calc(2px * var(--k-esp)) calc(7px * var(--k-esp)); border-radius:100px; background:color-mix(in srgb, var(--c-text-3) 15%, transparent); color:var(--text-mute); }
.cat-sel-tag.inc { background:var(--green-bg); color:var(--green); }
.cat-sel-add { flex-shrink:0; min-width:104px; }
.cat-sel-foot { display:flex; align-items:center; gap:calc(10px * var(--k-esp)); }
.cat-sel-count { font-size:calc(12px * var(--k-fs)); color:var(--text-mute); margin-right:auto; }
/* Prompt de item duplicado (3 opções) */

.viz-opt { display:flex; align-items:center; gap:calc(13px * var(--k-esp)); width:100%; text-align:left; background:var(--bg-panel-2); border:1px solid var(--bg-line); border-radius:calc(11px * var(--k-r)); padding:calc(14px * var(--k-esp)) calc(15px * var(--k-esp)); margin-top:10px; cursor:pointer; transition:all 0.15s ease; }
.viz-opt:hover { border-color:var(--gold); background:var(--bg-panel); }
.viz-opt.gold { border-color:color-mix(in srgb, var(--c-accent) 35%, transparent); }
.viz-opt-ic { font-size:calc(22px * var(--k-fs)); flex:0 0 auto; }
.viz-opt-txt { display:flex; flex-direction:column; gap:calc(2px * var(--k-esp)); min-width:0; }
.viz-opt-txt b { color:var(--text-bright); font-size:calc(14px * var(--k-fs)); font-weight:600; }
.viz-opt-txt span { color:var(--text-mute); font-size:calc(11.5px * var(--k-fs)); }
/* Mensagem do cliente ao aprovar/recusar, no card de Orçamento */
.orc-motivo { margin-top:9px; font-size:calc(12px * var(--k-fs)); line-height:1.45; color:var(--text-base); background:var(--bg-panel-2); border-left:3px solid var(--gold); border-radius:0 calc(8px * var(--k-r)) calc(8px * var(--k-r)) 0; padding:calc(8px * var(--k-esp)) calc(11px * var(--k-esp)); }
.orc-motivo b { color:var(--text-bright); font-weight:700; }
.orc-motivo.aprovado { border-left-color:var(--green); }
.orc-motivo.recusado { border-left-color:var(--red); }
.oem-corpo { width:100%; background:var(--bg-panel-2); border:1px solid var(--bg-line); border-radius:calc(8px * var(--k-r)); padding:calc(11px * var(--k-esp)); color:var(--text-base); font-size:calc(12.5px * var(--k-fs)); font-family:inherit; line-height:1.5; resize:vertical; margin-bottom:12px; }
.oem-assunto:focus, .oem-corpo:focus { border-color:var(--gold); outline:none; }
/* Número da nota fiscal, abaixo do arquivo anexado (detalhes do evento) */
.det-nota-num { display:flex; align-items:center; gap:calc(8px * var(--k-esp)); margin-top:10px; flex-wrap:wrap; }
.det-nota-num label { font-size:calc(11px * var(--k-fs)); font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-mute); margin:0; }
.det-nota-num input { flex:1; min-width:120px; max-width:220px; background:var(--bg-input); color:var(--text-bright); border:1px solid var(--bg-line); border-radius:calc(8px * var(--k-r)); padding:calc(8px * var(--k-esp)) calc(11px * var(--k-esp)); font-size:calc(13px * var(--k-fs)); }
.det-nota-num input:focus { border-color:var(--gold); outline:none; }
/* Linhas de horário do evento (vários blocos) */
.fe-hor-row { display:flex; gap:calc(8px * var(--k-esp)); align-items:center; margin-bottom:8px; }
.fe-hor-row input[type=time] { flex:1; min-width:0; background:var(--bg-input); color:var(--text-bright); border:1px solid var(--bg-line); border-radius:calc(8px * var(--k-r)); padding:calc(10px * var(--k-esp)) calc(12px * var(--k-esp)); font-size:calc(13.5px * var(--k-fs)); }
.fe-hor-as { color:var(--text-mute); font-size:calc(12px * var(--k-fs)); flex-shrink:0; }
.fe-hor-rem { flex-shrink:0; width:32px; height:32px; border-radius:calc(8px * var(--k-r)); border:1px solid var(--bg-line); background:var(--bg-panel-2); color:var(--text-mute); cursor:pointer; font-size:calc(14px * var(--k-fs)); line-height:1; }
.fe-hor-rem:hover { border-color:var(--red); color:var(--red); }
/* Campos do modal "Enviar detalhes do evento" (WhatsApp/e-mail do destinatário) */
.evt-env-campos { margin-bottom:6px; }
.evt-env-in { width:100%; background:var(--bg-panel-2); border:1px solid var(--bg-line); border-radius:calc(8px * var(--k-r)); padding:calc(10px * var(--k-esp)) calc(12px * var(--k-esp)); color:var(--text-base); font-size:calc(13px * var(--k-fs)); font-family:inherit; margin-bottom:12px; }
.evt-env-in:focus { border-color:var(--gold); outline:none; }
/* Menu "⋯" das ações secundárias (dropdown nativo via <details>) */
.orc-menu { position:relative; }
/* Enquanto o menu está aberto, eleva o card inteiro acima dos vizinhos — senão
   o :hover de outro card (que aplica transform) cobre o dropdown e ele "pisca". */
.orc-card.orc-menu-open { position:relative; z-index:60; }
.orc-menu > summary { list-style:none; cursor:pointer; padding:calc(7px * var(--k-esp)) calc(12px * var(--k-esp)); }
.orc-menu > summary::-webkit-details-marker { display:none; }
/* Quando o "⋯" é um icon-btn (cards de contrato): alinha exatamente aos demais (28x28) */
.orc-menu-sum.icon-btn { padding:0; width:28px; height:28px; min-width:28px; font-size:calc(17px * var(--k-fs)); line-height:1; letter-spacing:0; }
/* Pop absolute (rola junto com o card, não some no scroll). z-index alto p/
   ficar acima dos cards vizinhos. A classe .up abre pra cima (flip via JS
   _posicionarOrcMenu) quando não cabe embaixo até o fim da tela. */
.orc-menu-pop { position:absolute; right:0; top:calc(100% + 6px); z-index:1200; min-width:170px;
  background:var(--bg-panel); border:1px solid var(--bg-line); border-radius:calc(10px * var(--k-r)); padding:calc(6px * var(--k-esp));
  box-shadow:0 12px 30px rgba(0,0,0,calc(0.35 * var(--k-sombra))); display:flex; flex-direction:column; gap:calc(2px * var(--k-esp)); }
.orc-menu-pop.up { top:auto; bottom:calc(100% + 6px); }
.orc-menu-pop button { text-align:left; background:transparent; border:none; color:var(--text-base);
  font-size:calc(12.5px * var(--k-fs)); font-weight:600; padding:calc(9px * var(--k-esp)) calc(11px * var(--k-esp)); border-radius:calc(7px * var(--k-r)); cursor:pointer; transition:all 0.14s ease; }
.orc-menu-pop button:hover { background:var(--bg-panel-2); color:var(--text-bright); }
.orc-menu-pop button.danger { color:var(--red); }
.orc-menu-pop button.danger:hover { background:var(--red-bg); }
/* Aviso de proposta desatualizada no modal "Enviar proposta" */
.oe-aviso { display:flex; align-items:center; gap:calc(12px * var(--k-esp)); flex-wrap:wrap; margin-bottom:14px;
  background:var(--amber-bg); border:1px solid color-mix(in srgb, var(--c-warn) 40%, transparent); border-radius:calc(10px * var(--k-r)); padding:calc(11px * var(--k-esp)) calc(13px * var(--k-esp)); }
.oe-aviso-txt { flex:1; min-width:180px; font-size:calc(12.5px * var(--k-fs)); color:var(--amber); font-weight:600; line-height:1.4; }
/* Histórico local (fallback sem tabela) no modal "Enviar proposta" */
.oe-hist-wrap { margin-top:16px; padding-top:calc(12px * var(--k-esp)); border-top:1px solid var(--bg-line); }
.oe-hist-titulo { font-size:calc(10.5px * var(--k-fs)); text-transform:uppercase; letter-spacing:0.05em; color:var(--text-dim); font-weight:700; margin-bottom:8px; }
.oe-hist-i { display:flex; justify-content:space-between; gap:calc(10px * var(--k-esp)); font-size:calc(12px * var(--k-fs)); color:var(--text-base); padding:calc(4px * var(--k-esp)) 0; }
.oe-hist-i time { color:var(--text-dim); font-family:var(--f-ui); font-variant-numeric:tabular-nums; font-size:calc(11px * var(--k-fs)); }
.oe-hist-vazio { font-size:calc(12px * var(--k-fs)); color:var(--text-dim); }

/* Campo obrigatório sinalizado */
.field.erro, input.erro, select.erro, textarea.erro { border-color:var(--red) !important; box-shadow:0 0 0 3px var(--red-bg); }

.empty-block { background:var(--bg-panel); border:1px dashed var(--bg-line); border-radius:calc(12px * var(--k-r)); padding:calc(40px * var(--k-esp)) calc(24px * var(--k-esp)); text-align:center; }
.empty-block h3 { font-family:var(--f-ui); font-size:calc(18px * var(--k-fs)); color:var(--text-bright); margin-bottom:8px; font-weight:600; }
.empty-block p { font-size:calc(13px * var(--k-fs)); color:var(--text-mute); margin-bottom:18px; max-width:480px; margin:0 auto 18px; line-height:1.6; }

/* ===================== 17. ITENS DA PROPOSTA ===================== */
.itens-table {
  display:flex; flex-direction:column; gap:calc(8px * var(--k-esp));
  background:var(--bg-deep); border:1px solid var(--bg-line); border-radius:calc(10px * var(--k-r));
  padding:calc(10px * var(--k-esp));
}
.itens-table .itens-header {
  display:grid; grid-template-columns: 1fr 80px 140px 110px 32px;
  gap:calc(8px * var(--k-esp)); padding:0 calc(6px * var(--k-esp));
}
.itens-table .itens-header span {
  font-size:calc(10.5px * var(--k-fs)); font-weight:700; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--text-dim);
}
.item-row {
  display:grid; grid-template-columns: 1fr 80px 140px 110px 32px;
  gap:calc(8px * var(--k-esp)); align-items:center;
}
.item-row .field { padding:calc(9px * var(--k-esp)) calc(11px * var(--k-esp)); font-size:calc(12.5px * var(--k-fs)); }
.item-row .item-qtd { text-align:center; font-family:var(--f-ui); font-variant-numeric:tabular-nums; }
.item-row .item-preco { text-align:right; font-family:var(--f-ui); font-variant-numeric:tabular-nums; }
.item-row .item-preco.incluso { color:var(--gold); font-weight:700; }
.item-row .item-incluso { display:flex; align-items:center; justify-content:center; gap:calc(6px * var(--k-esp)); font-size:calc(11px * var(--k-fs)); font-weight:700; color:var(--text-mute); cursor:pointer; background:var(--bg-panel-2); border:1px solid var(--bg-line); border-radius:calc(7px * var(--k-r)); padding:calc(8px * var(--k-esp)) calc(6px * var(--k-esp)); user-select:none; transition:all 0.15s ease; }
.item-row .item-incluso.on { color:var(--gold); border-color:var(--gold); background:color-mix(in srgb, var(--c-accent) 8%, transparent); }
.item-row .item-incluso input { display:none; }
.item-row .item-remove { width:32px; height:34px; border-radius:calc(7px * var(--k-r)); background:var(--bg-panel-2); border:1px solid var(--bg-line); color:var(--text-mute); display:grid; place-items:center; cursor:pointer; }
.item-row .item-remove:hover { color:var(--red); border-color:var(--red); }
.item-row .item-foto { grid-column: 1 / -1; display:flex; gap:calc(8px * var(--k-esp)); align-items:center; padding:calc(6px * var(--k-esp)) calc(4px * var(--k-esp)) calc(2px * var(--k-esp)); }
.item-row .item-foto img { width:36px; height:36px; border-radius:calc(6px * var(--k-r)); object-fit:cover; border:1px solid var(--bg-line); }
.item-row .item-foto input.field { font-size:calc(11.5px * var(--k-fs)); padding:calc(7px * var(--k-esp)) calc(9px * var(--k-esp)); flex:1; }
.item-row .item-foto .btn-mini { padding:calc(6px * var(--k-esp)) calc(10px * var(--k-esp)); font-size:calc(11px * var(--k-fs)); font-weight:600; border-radius:calc(6px * var(--k-r)); background:var(--bg-panel-2); color:var(--text-mute); border:1px solid var(--bg-line); }
.item-row .item-foto .btn-mini:hover { color:var(--cyan); border-color:var(--cyan); }
.item-row .item-foto .btn-mini.del:hover { color:var(--red); border-color:var(--red); }

.orc-add-btns { display:flex; gap:calc(6px * var(--k-esp)); margin-top:10px; flex-wrap:wrap; }
.orc-total-display { padding:calc(14px * var(--k-esp)) calc(18px * var(--k-esp)); background:var(--bg-deep); border:1px solid var(--bg-line); border-radius:calc(10px * var(--k-r)); font-family:var(--f-ui); font-variant-numeric:tabular-nums; }
.orc-total-display .line { display:flex; justify-content:space-between; padding:calc(4px * var(--k-esp)) 0; font-size:calc(13px * var(--k-fs)); color:var(--text-mute); }
.orc-total-display .line.tot { padding-top:calc(10px * var(--k-esp)); margin-top:6px; border-top:1px solid var(--bg-line); font-size:calc(16px * var(--k-fs)); color:var(--green); font-weight:700; }
.orc-total-display .line b { color:var(--text-bright); }
.orc-total-display .line.tot b { color:var(--green); }

/* ===================== 18. UPLOAD ===================== */
.upload-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:calc(10px * var(--k-esp)); margin-top:8px; }
.upload-card { background:var(--bg-deep); border:1px solid var(--bg-line); border-radius:calc(9px * var(--k-r)); overflow:hidden; position:relative; }
.upload-card img { width:100%; height:100px; object-fit:cover; display:block; }
.upload-card .meta { padding:calc(8px * var(--k-esp)) calc(10px * var(--k-esp)); font-size:calc(11px * var(--k-fs)); color:var(--text-mute); }
.upload-card .del { position:absolute; top:6px; right:6px; width:24px; height:24px; border-radius:calc(6px * var(--k-r)); background:color-mix(in srgb, var(--c-bg) 85%, transparent); border:1px solid var(--bg-line); display:grid; place-items:center; color:var(--red); }
.upload-dropzone {
  border:1.5px dashed var(--bg-line); border-radius:calc(9px * var(--k-r));
  padding:calc(18px * var(--k-esp)); text-align:center; color:var(--text-mute); font-size:calc(12.5px * var(--k-fs));
  cursor:pointer; transition:all 0.16s ease;
}
.upload-dropzone:hover { border-color:var(--cyan); color:var(--cyan); }

/* ===================== 19. TOASTS / LOADING ===================== */
.toast-stack { position:fixed; bottom:22px; right:22px; z-index:100002; display:flex; flex-direction:column; gap:calc(10px * var(--k-esp)); max-width:340px; }
.toast { background:var(--bg-panel); border:1px solid var(--bg-line); border-left:3px solid var(--accent, var(--cyan)); border-radius:calc(10px * var(--k-r)); padding:calc(13px * var(--k-esp)) calc(16px * var(--k-esp)); box-shadow:var(--shadow-lg); display:flex; align-items:center; gap:calc(11px * var(--k-esp)); animation:toastIn 0.3s cubic-bezier(0.16,1,0.3,1); }
.toast.out { animation:toastOut 0.3s ease forwards; }
@keyframes toastIn  { from { opacity:0; transform:translateX(40px); } to { opacity:1; transform:translateX(0); } }
@keyframes toastOut { to { opacity:0; transform:translateX(40px); } }
.toast-icon { font-size:calc(16px * var(--k-fs)); flex-shrink:0; }
.toast-text { font-size:calc(12.5px * var(--k-fs)); }
.toast-text .tt { font-weight:700; color:var(--text-bright); }
.toast-text .td { color:var(--text-mute); margin-top:1px; }
.toast.ok   { --accent:var(--green); }
.toast.err  { --accent:var(--red); }
.toast.info { --accent:var(--cyan); }
.toast.warn { --accent:var(--amber); }

.loading-overlay { position:fixed; inset:0; z-index:100000; background:var(--c-overlay); backdrop-filter:blur(3px); display:none; flex-direction:column; align-items:center; justify-content:center; gap:calc(20px * var(--k-esp)); }
.loading-overlay.show { display:flex; }
.spinner { width:48px; height:48px; border-radius:50%; border:3px solid var(--bg-line); border-top-color:var(--gold); animation:spin 0.8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.loading-overlay p { font-size:calc(13px * var(--k-fs)); color:var(--text-mute); font-weight:600; }

/* ===================== 21. RANKINGS / INSIGHTS ===================== */
.insight-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:calc(16px * var(--k-esp)); }
.insight { background:var(--bg-panel); border:1px solid var(--bg-line); border-left:3px solid var(--accent, var(--gold)); border-radius:var(--radius-sm); padding:calc(18px * var(--k-esp)) calc(20px * var(--k-esp)); }
.insight-head { display:flex; align-items:center; gap:calc(9px * var(--k-esp)); margin-bottom:9px; }
.insight-icon { width:28px; height:28px; border-radius:calc(7px * var(--k-r)); display:grid; place-items:center; font-size:calc(13px * var(--k-fs)); background:var(--accent-bg, var(--amber-bg)); }
.insight-title { font-size:calc(13px * var(--k-fs)); font-weight:700; color:var(--text-bright); }
.insight-body { font-size:calc(12.5px * var(--k-fs)); color:var(--text-mute); line-height:1.6; }
.insight-body b { color:var(--text-base); font-weight:600; }
.hl-green { color:var(--green); font-weight:600; }
.hl-red   { color:var(--red);   font-weight:600; }
.hl-gold  { color:var(--gold);  font-weight:600; }
.hl-blue  { color:var(--blue);  font-weight:600; }
.rank-list { display:flex; flex-direction:column; gap:calc(12px * var(--k-esp)); }
.rank-line { display:flex; align-items:center; justify-content:space-between; margin-bottom:5px; font-size:calc(12px * var(--k-fs)); }
.rank-name { color:var(--text-base); font-weight:500; }
.rank-val { font-family:var(--f-ui); font-variant-numeric:tabular-nums; font-weight:600; color:var(--text-bright); }
.rank-track { height:7px; background:var(--bg-deep); border-radius:calc(4px * var(--k-r)); overflow:hidden; }
.rank-fill { height:100%; border-radius:calc(4px * var(--k-r)); background:linear-gradient(90deg, var(--cyan-deep), var(--cyan)); transition:width 0.9s cubic-bezier(0.16,1,0.3,1); }

/* ===================== 21b. DIAGNÓSTICO ===================== */
.diag-row {
  display:grid; grid-template-columns: 28px 1fr auto; gap:calc(12px * var(--k-esp)); align-items:center;
  padding:calc(10px * var(--k-esp)) calc(12px * var(--k-esp)); background:var(--bg-deep); border:1px solid var(--bg-line);
  border-radius:calc(8px * var(--k-r)); margin-bottom:8px;
}
.diag-ic { width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  font-weight:700; font-size:calc(13px * var(--k-fs)); background:var(--bg-panel-2); border:1px solid var(--bg-line); }
.diag-lbl { font-size:calc(12.5px * var(--k-fs)); color:var(--text-bright); font-weight:600; }
.diag-msg { font-size:calc(11.5px * var(--k-fs)); font-family:var(--f-ui); font-variant-numeric:tabular-nums; }
.diag-green { color:var(--green); border-color:var(--green); background:var(--green-bg); }
.diag-red   { color:var(--red);   border-color:var(--red);   background:var(--red-bg); }
.diag-amber { color:var(--amber); border-color:var(--amber); background:var(--amber-bg); }
.diag-mute  { color:var(--text-dim); }
#migracao-result .diag-row { margin-bottom:4px; padding:calc(8px * var(--k-esp)) calc(10px * var(--k-esp)); }
#migracao-input {
  width:100%; background:var(--bg-input); color:var(--text-base);
  border:1px solid var(--bg-line); border-radius:calc(8px * var(--k-r)); padding:calc(9px * var(--k-esp)) calc(12px * var(--k-esp)); font-size:calc(13px * var(--k-fs));
}

/* ===================== 22. RESPONSIVO ===================== */
@media (max-width:1100px) {
  .hero { grid-template-columns:1fr; }
  .kpi-grid { grid-template-columns:repeat(2,1fr); }
  .prox-eventos-grid { grid-template-columns:repeat(2,1fr); }
  .grid-2, .grid-2b, .grid-3 { grid-template-columns:1fr; }
  .insight-grid { grid-template-columns:1fr; }
  .section-desc { display:none; }
}
@media (max-width:720px) {
  .app { padding:calc(18px * var(--k-esp)) calc(14px * var(--k-esp)) calc(90px * var(--k-esp)); }
  .kpi-grid { grid-template-columns:1fr; }
  .prox-eventos-grid { grid-template-columns:1fr; }
  .kpi-value { font-size:calc(23px * var(--k-fs)); }
  .hero-main, .hero-side { padding:calc(22px * var(--k-esp)); }
  .section-title { font-size:calc(20px * var(--k-fs)); }
  .filter-bar { flex-direction:column; align-items:stretch; gap:calc(12px * var(--k-esp)); }
  .filter-group { width:100%; }
  select.field, .field { width:100%; min-width:0; }
  .filter-spacer { display:none; }
  .search-box, .search-box input { width:100%; }
  .table-toolbar { flex-direction:column; align-items:stretch; }
  .form-grid { grid-template-columns:1fr; }
  .modal { max-height:94vh; }
  .modal-foot { flex-direction:column-reverse; }
  .modal-foot .btn { width:100%; justify-content:center; }
  .toast-stack { left:14px; right:14px; bottom:14px; max-width:none; }
  .periodo-bar { flex-direction:column; align-items:stretch; }
  .periodo-tabs { width:100%; justify-content:space-between; }
  .periodo-tab { flex:1; text-align:center; }
  .periodo-label { margin-left:0; }
  .periodo-controls { flex-direction:column; align-items:stretch; }
  .periodo-custom { flex-direction:column; align-items:stretch; }
  .resumo-grid { grid-template-columns:repeat(2,1fr); }
  .resumo-head { flex-direction:column; align-items:flex-start; }
  .det-grid { grid-template-columns:1fr; }
  .det-header { flex-direction:column; align-items:flex-start; }
  .det-totalbox { text-align:left; }
  .itens-table .itens-header { display:none; }
  .item-row { grid-template-columns: 1fr 1fr; row-gap:calc(6px * var(--k-esp)); }
  .item-row .item-descricao { grid-column:1 / -1; }
  .item-row .item-remove { grid-column: 2; justify-self:end; }
}
@media (min-width:1101px) and (max-width:1340px) {
  .kpi-grid { grid-template-columns:repeat(4,1fr); }
  .resumo-grid { grid-template-columns:repeat(3,1fr); }
}

/* ===================== 23. CALENDÁRIO DE EVENTOS ===================== */
/* Toggle Lista / Calendário */
.evt-view-toggle { display:flex; gap:calc(4px * var(--k-esp)); background:var(--bg-panel); border:1px solid var(--bg-line); border-radius:calc(9px * var(--k-r)); padding:calc(4px * var(--k-esp)); margin-bottom:14px; width:fit-content; }
.evt-view-btn { display:flex; align-items:center; gap:calc(7px * var(--k-esp)); padding:calc(8px * var(--k-esp)) calc(14px * var(--k-esp)); background:transparent; border:none; color:var(--text-mute); font-size:calc(12.5px * var(--k-fs)); font-weight:600; cursor:pointer; border-radius:calc(6px * var(--k-r)); font-family:inherit; transition:all 0.15s ease; }
.evt-view-btn:hover { color:var(--text-bright); background:var(--bg-panel-2); }
.evt-view-btn.active { background:var(--c-prim); color:var(--c-prim-text); }

/* Panes (lista vs calendário) */
.evt-pane { display:none; }
.evt-pane.active { display:block; }

/* Wrapper do calendário */
.cal-wrap { background:var(--bg-panel); border:1px solid var(--bg-line); border-radius:var(--radius); padding:calc(18px * var(--k-esp)); }

/* Toolbar do calendário */
.cal-toolbar { display:flex; align-items:center; gap:calc(14px * var(--k-esp)); margin-bottom:18px; flex-wrap:wrap; }
.cal-nav { display:flex; align-items:center; gap:calc(8px * var(--k-esp)); }
.cal-nav-btn { width:32px; height:32px; border-radius:calc(7px * var(--k-r)); display:grid; place-items:center; background:var(--bg-panel-2); border:1px solid var(--bg-line); color:var(--text-mute); cursor:pointer; transition:all 0.15s ease; }
.cal-nav-btn:hover { color:var(--gold); border-color:var(--gold); }
.cal-title { font-family:var(--f-ui); font-size:calc(20px * var(--k-fs)); font-weight:600; color:var(--text-bright); margin:0; min-width:200px; text-align:center; text-transform:capitalize; }
.btn.small { padding:calc(7px * var(--k-esp)) calc(12px * var(--k-esp)); font-size:calc(12px * var(--k-fs)); }
.cal-legenda { display:flex; gap:calc(14px * var(--k-esp)); flex-wrap:wrap; font-size:calc(11.5px * var(--k-fs)); color:var(--text-mute); }
.cal-leg-item { display:flex; align-items:center; gap:calc(6px * var(--k-esp)); }
.cal-leg-item i { width:10px; height:10px; border-radius:calc(3px * var(--k-r)); display:inline-block; }

/* Cabeçalho dos dias da semana */
.cal-grid-head { display:grid; grid-template-columns:repeat(7,1fr); gap:calc(6px * var(--k-esp)); margin-bottom:6px; }
.cal-grid-head > div { text-align:center; font-size:calc(10.5px * var(--k-fs)); font-weight:700; color:var(--text-mute); text-transform:uppercase; letter-spacing:0.06em; padding:calc(6px * var(--k-esp)) 0; }

/* Grade do calendário */
.cal-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:calc(6px * var(--k-esp)); }
/* min-width:0 + overflow:hidden impedem que o texto do evento (nowrap) estique a célula
   e invada os dias vizinhos — bug clássico de CSS Grid (grid items têm min-width:auto). */
.cal-cell { background:var(--bg-panel-2); border:1px solid var(--bg-line); border-radius:calc(8px * var(--k-r)); min-height:100px; min-width:0; overflow:hidden; padding:calc(6px * var(--k-esp)) calc(8px * var(--k-esp)); display:flex; flex-direction:column; gap:calc(4px * var(--k-esp)); transition:border-color 0.15s ease; position:relative; cursor:default; }
.cal-cell:hover { border-color:var(--text-faint); }
.cal-cell.outside { background:transparent; border-color:transparent; opacity:0.35; }
.cal-cell.outside .cal-day-num { color:var(--text-faint); }
.cal-cell.today { border-color:var(--gold); background:color-mix(in srgb, var(--c-accent) 6%, transparent); box-shadow:0 0 0 1px var(--gold); }
.cal-cell.weekend { background:linear-gradient(180deg, var(--bg-panel-2), color-mix(in srgb, var(--c-accent) 3%, transparent)); }
.cal-cell.has-events { cursor:pointer; }
/* Células vazias do mês atual ficam clicáveis pra criar evento */
.cal-cell.cal-cell-empty-clickable { cursor:cell; }
.cal-cell.cal-cell-empty-clickable:hover { border-color:var(--gold); background:color-mix(in srgb, var(--c-accent) 4%, transparent); }
.cal-cell.cal-cell-empty-clickable:hover::after { content:'+ Novo'; position:absolute; bottom:5px; right:8px; font-size:calc(9.5px * var(--k-fs)); font-weight:700; color:var(--gold); opacity:0.9; }

.cal-day-num { font-size:calc(13px * var(--k-fs)); font-weight:700; color:var(--text-base); margin-bottom:2px; }
.cal-cell.today .cal-day-num { color:var(--gold); }

/* Evento dentro da célula — cores alinhadas com CFG.STATUS_COR (paleta oficial do sistema).
   Fluxo: A confirmar → Confirmado (não realizado) → Não pago → Pago. Cancelado fica de fora do fluxo. */
.cal-event { display:block; max-width:100%; box-sizing:border-box; padding:calc(3px * var(--k-esp)) calc(6px * var(--k-esp)); border-radius:calc(4px * var(--k-r)); font-size:calc(10.5px * var(--k-fs)); font-weight:600; color:var(--c-bg); line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; transition:transform 0.1s ease; border-left:3px solid rgba(0,0,0,calc(0.22 * var(--k-sombra))); }
.cal-event:hover { transform:translateY(-1px); filter:brightness(1.08); }
.cal-event.pago            { background:var(--c-ok); }  /* verde — tocou e foi pago */
.cal-event.nao-realizado   { background:var(--c-info); color:var(--c-bg); }  /* azul — confirmado, ainda não aconteceu */
.cal-event.a-confirmar     { background:var(--c-text-3); color:var(--c-bg); }  /* cinza — talvez vá tocar (ainda incerto) */
.cal-event.nao-pago        { background:var(--c-warn); }  /* amarelo — tocou, aguardando pagamento */
.cal-event.cancelado       { background:var(--c-bad); color:var(--c-bg); }  /* vermelho — cancelado */

.cal-event-more { display:block; padding:calc(2px * var(--k-esp)) calc(6px * var(--k-esp)); font-size:calc(10px * var(--k-fs)); font-weight:600; color:var(--gold); cursor:pointer; }
.cal-event-more:hover { text-decoration:underline; }

/* Rodapé do calendário */
.cal-footer { margin-top:14px; padding-top:calc(14px * var(--k-esp)); border-top:1px solid var(--bg-line); font-size:calc(12px * var(--k-fs)); color:var(--text-mute); display:flex; justify-content:space-between; gap:calc(12px * var(--k-esp)); flex-wrap:wrap; }
.cal-footer b { color:var(--text-bright); font-weight:700; }

/* Modal popup (quando clica num evento no calendário — abre o detalhe existente) */
/* Já reusa o modal-detalhes — não precisa novo CSS */

/* RESPONSIVO MOBILE */
@media (max-width: 800px) {
  .cal-cell { min-height:75px; padding:calc(4px * var(--k-esp)) calc(5px * var(--k-esp)); }
  .cal-day-num { font-size:calc(11.5px * var(--k-fs)); }
  .cal-event { font-size:calc(9.5px * var(--k-fs)); padding:calc(2px * var(--k-esp)) calc(4px * var(--k-esp)); }
  .cal-grid-head > div { font-size:calc(9.5px * var(--k-fs)); padding:calc(4px * var(--k-esp)) 0; }
  .cal-grid-head > div { /* Abreviado: Dom→D, Seg→S, etc. — feito via JS pra Mobile  */ }
  .cal-title { font-size:calc(16px * var(--k-fs)); min-width:140px; }
  .cal-toolbar { gap:calc(8px * var(--k-esp)); }
  .cal-legenda { gap:calc(6px * var(--k-esp)) calc(12px * var(--k-esp)); font-size:calc(11px * var(--k-fs)); } /* compacta no celular (antes sumia e as cores ficavam sem explicação) */
}

@media (max-width: 500px) {
  .cal-cell { min-height:62px; }
  .cal-event { font-size:calc(9px * var(--k-fs)); padding:calc(1px * var(--k-esp)) calc(3px * var(--k-esp)); border-radius:calc(3px * var(--k-r)); border-left-width:2px; }
  .cal-day-num { font-size:calc(10.5px * var(--k-fs)); }
}

/* Popover do calendário (+N mais) */
.cal-popover { position:absolute; z-index:9000; background:var(--bg-panel); border:1px solid var(--bg-line); border-radius:calc(10px * var(--k-r)); box-shadow:0 12px 40px rgba(0,0,0,calc(0.45 * var(--k-sombra))); width:320px; max-width:calc(100vw - 24px); animation:cal-pop-in 0.15s ease-out; }
@keyframes cal-pop-in { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
.cal-pop-head { display:flex; align-items:center; gap:calc(10px * var(--k-esp)); padding:calc(11px * var(--k-esp)) calc(14px * var(--k-esp)); border-bottom:1px solid var(--bg-line); }
.cal-pop-data { font-family:var(--f-ui); font-size:calc(15px * var(--k-fs)); font-weight:600; color:var(--text-bright); text-transform:capitalize; flex:1; }
.cal-pop-count { font-size:calc(11px * var(--k-fs)); color:var(--text-mute); font-weight:600; padding:calc(3px * var(--k-esp)) calc(8px * var(--k-esp)); background:var(--bg-panel-2); border-radius:calc(8px * var(--k-r)); }
.cal-pop-close { background:transparent; border:none; color:var(--text-mute); font-size:calc(20px * var(--k-fs)); line-height:1; cursor:pointer; padding:0 calc(6px * var(--k-esp)); transition:color 0.15s ease; }
.cal-pop-close:hover { color:var(--red); }
.cal-pop-body { max-height:340px; overflow-y:auto; padding:calc(6px * var(--k-esp)); }
.cal-pop-item { display:flex; align-items:stretch; gap:calc(10px * var(--k-esp)); padding:calc(8px * var(--k-esp)) calc(8px * var(--k-esp)); border-radius:calc(7px * var(--k-r)); cursor:pointer; transition:background 0.12s ease; }
.cal-pop-item:hover { background:var(--bg-panel-2); }
.cal-pop-item-bar { width:3px; border-radius:calc(2px * var(--k-r)); flex-shrink:0; }
.cal-pop-item.pago .cal-pop-item-bar          { background:var(--c-ok); }
.cal-pop-item.nao-realizado .cal-pop-item-bar { background:var(--c-info); }
.cal-pop-item.a-confirmar .cal-pop-item-bar   { background:var(--c-text-3); }
.cal-pop-item.nao-pago .cal-pop-item-bar      { background:var(--c-warn); }
.cal-pop-item.cancelado .cal-pop-item-bar     { background:var(--c-bad); }
.cal-pop-item-body { flex:1; min-width:0; }
.cal-pop-item-titulo { font-size:calc(12.5px * var(--k-fs)); font-weight:600; color:var(--text-bright); margin-bottom:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cal-pop-item-meta { display:flex; gap:calc(8px * var(--k-esp)); flex-wrap:wrap; font-size:calc(10.5px * var(--k-fs)); color:var(--text-mute); align-items:center; }
.cal-pop-hora { font-family:var(--f-ui); font-variant-numeric:tabular-nums; color:var(--gold); font-weight:600; }
.cal-pop-local { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:160px; }
.cal-pop-valor { font-weight:700; color:var(--c-ok); font-family:var(--f-ui); font-variant-numeric:tabular-nums; }
.cal-pop-foot { padding:calc(8px * var(--k-esp)) calc(12px * var(--k-esp)); border-top:1px solid var(--bg-line); }
.cal-pop-foot .btn { width:100%; justify-content:center; }

/* Atalhos de teclado — estilo das teclas <kbd> na ajuda */
kbd { display:inline-block; padding:calc(3px * var(--k-esp)) calc(8px * var(--k-esp)); font-family:var(--f-ui); font-variant-numeric:tabular-nums; font-size:calc(11px * var(--k-fs)); font-weight:700; background:var(--bg-panel-2); border:1px solid var(--bg-line); border-bottom-width:2px; border-radius:calc(5px * var(--k-r)); color:var(--gold); white-space:nowrap; }

/* Toggle "Mostrar inativos" do calendário */
.cal-toggle-inativos { display:inline-flex; align-items:center; gap:calc(6px * var(--k-esp)); font-size:calc(11.5px * var(--k-fs)); color:var(--text-mute); cursor:pointer; user-select:none; }
.cal-toggle-inativos input { accent-color:var(--gold); cursor:pointer; }
.cal-toggle-inativos:hover { color:var(--text-bright); }
/* Evento inativo ganha visual diferenciado pra deixar claro */
.cal-event.inativo, .cal-pop-item.inativo { opacity:0.4; text-decoration:line-through; }

/* Empty states ilustrados — first impression bonita */
.empty-block.empty-illust { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:calc(48px * var(--k-esp)) calc(24px * var(--k-esp)); gap:calc(14px * var(--k-esp)); text-align:center; background:linear-gradient(180deg, var(--bg-panel), var(--bg-panel-2)); border:1px dashed var(--bg-line); border-radius:var(--radius); }
.empty-block.empty-illust .empty-svg { color:var(--gold); opacity:0.45; margin-bottom:4px; transition:opacity 0.3s ease; }
.empty-block.empty-illust:hover .empty-svg { opacity:0.7; }
.empty-block.empty-illust h3 { font-family:var(--f-ui); font-size:calc(19px * var(--k-fs)); font-weight:600; color:var(--text-bright); margin:0; }
.empty-block.empty-illust p { font-size:calc(13px * var(--k-fs)); color:var(--text-mute); max-width:480px; margin:0; line-height:1.55; }
.empty-block.empty-illust .btn { margin-top:8px; }
.empty-block.empty-illust .btn svg { margin-right:6px; vertical-align:-2px; }

/* Quick action: marcar como PAGO */
.icon-btn.pago-quick { color:var(--c-ok); border-color:color-mix(in srgb, var(--c-ok) 40%, transparent); background:color-mix(in srgb, var(--c-ok) 8%, transparent); }
.icon-btn.pago-quick:hover { color:var(--c-bg); background:var(--c-ok); border-color:var(--c-ok); }

/* ===================== SKELETONS de loading =====================
   Aparecem antes dos dados carregarem do Supabase. Sensação de velocidade. */
@keyframes skeleton-pulse { 0% { background-position: -200px 0; } 100% { background-position: calc(200px + 100%) 0; } }
.skel { background:linear-gradient(90deg, var(--bg-panel-2) 0%, color-mix(in srgb, var(--c-text) 4%, transparent) 50%, var(--bg-panel-2) 100%); background-size:200px 100%; background-repeat:no-repeat; animation:skeleton-pulse 1.4s ease-in-out infinite; border-radius:calc(6px * var(--k-r)); display:inline-block; }
.skel-line { display:block; height:12px; border-radius:calc(4px * var(--k-r)); margin:8px 0; }
.skel-line.w-80 { width:80%; }
.skel-line.w-60 { width:60%; }
.skel-line.w-40 { width:40%; }
.skel-line.w-25 { width:25%; }
.skel-block { height:80px; border-radius:calc(8px * var(--k-r)); margin:8px 0; }
.skel-circle { width:36px; height:36px; border-radius:50%; }
/* Skeleton de KPI card */
.skel-kpi { background:var(--bg-panel); border:1px solid var(--bg-line); border-radius:var(--radius); padding:calc(20px * var(--k-esp)); }
/* Skeleton de row da tabela */
.skel-row td { padding:calc(14px * var(--k-esp)) calc(12px * var(--k-esp)); }
.skel-row .skel-line { margin:0; height:10px; }

/* ===================== 24. LEMBRETES / PENDÊNCIAS =====================
   Card no topo da visão geral + sino na topbar com badge contador. */

/* ----- Sino + badge da topbar ----- */
.lembretes-bell { position:relative; display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:calc(9px * var(--k-r)); background:var(--bg-panel); border:1px solid var(--bg-line); color:var(--text-mute); cursor:pointer; transition:all 0.2s ease; margin-right:6px; }
.lembretes-bell:hover { color:var(--gold); border-color:var(--gold); }
.lembretes-bell.urgente { color:var(--c-warn); border-color:color-mix(in srgb, var(--c-warn) 50%, transparent); background:color-mix(in srgb, var(--c-warn) 8%, transparent); animation:bell-shake 2.5s ease-in-out infinite; }
.lembretes-bell.urgente:hover { color:var(--c-bg); background:var(--c-warn); }
@keyframes bell-shake {
  0%, 88%, 100% { transform:rotate(0); }
  90% { transform:rotate(10deg); }
  92% { transform:rotate(-10deg); }
  94% { transform:rotate(6deg); }
  96% { transform:rotate(-6deg); }
  98% { transform:rotate(0); }
}
.lembretes-bell-badge { position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 calc(5px * var(--k-esp)); border-radius:calc(9px * var(--k-r)); background:var(--c-text-3); color:var(--c-bg); font-size:calc(10px * var(--k-fs)); font-weight:800; display:grid; place-items:center; border:2px solid var(--bg-base); }
.lembretes-bell.urgente .lembretes-bell-badge { background:var(--c-warn); }

/* ============================================================
   NOTIFICAÇÕES: o menu ⋯ das pendências e o esqueleto de carregando
   (a gaveta lateral saiu em 08/10: o sino virou uma janelinha, ver painel.css)
   ============================================================ */
/* menu "⋯" controlado — elemento único fixo no body (nunca cortado) */
.notif-menu-pop { position:fixed; z-index:10001; min-width:180px; max-width:250px;
  background:var(--bg-panel); border:1px solid var(--bg-line); border-radius:calc(10px * var(--k-r)); padding:calc(6px * var(--k-esp));
  box-shadow:0 16px 38px rgba(0,0,0,calc(0.5 * var(--k-sombra))); display:flex; flex-direction:column; gap:calc(2px * var(--k-esp)); }
.notif-menu-pop button { text-align:left; background:transparent; border:none; color:var(--text-base); font-size:calc(12.5px * var(--k-fs)); font-weight:600; padding:calc(9px * var(--k-esp)) calc(11px * var(--k-esp)); border-radius:calc(6px * var(--k-r)); cursor:pointer; white-space:nowrap; }
.notif-menu-pop button:hover { background:var(--bg-panel-2); color:var(--text-bright); }
.notif-menu-pop button.danger { color:var(--red); }
.notif-skel { height:70px; border-radius:calc(12px * var(--k-r)); background:linear-gradient(90deg, var(--bg-panel-2) 25%, var(--bg-line) 50%, var(--bg-panel-2) 75%); background-size:200% 100%; animation:skel 1.3s infinite; }
@keyframes skel { to { background-position:-200% 0; } }

/* RESPONSIVO MOBILE */

/* ===================== 25. SAÚDE FINANCEIRA ===================== */

/* Botões de período */
.saude-periodo { display:flex; align-items:center; gap:calc(6px * var(--k-esp)); background:var(--bg-panel); border:1px solid var(--bg-line); border-radius:calc(9px * var(--k-r)); padding:calc(4px * var(--k-esp)); margin-bottom:20px; }
.saude-per-btn { background:transparent; border:none; padding:calc(8px * var(--k-esp)) calc(16px * var(--k-esp)); color:var(--text-mute); font-size:calc(12.5px * var(--k-fs)); font-weight:600; cursor:pointer; border-radius:calc(6px * var(--k-r)); font-family:inherit; transition:all 0.15s ease; }
.saude-per-btn:hover { color:var(--text-bright); background:var(--bg-panel-2); }
.saude-per-btn.active { background:var(--c-prim); color:var(--c-prim-text); }
.saude-periodo-label { font-size:calc(12px * var(--k-fs)); color:var(--text-mute); text-transform:capitalize; margin-right:10px; }

/* KPI cards principais (4 em linha) */
.saude-kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:calc(16px * var(--k-esp)); margin-bottom:20px; }
.saude-kpi { background:var(--bg-panel); border:1px solid var(--bg-line); border-radius:var(--radius); padding:calc(22px * var(--k-esp)) calc(20px * var(--k-esp)); position:relative; overflow:hidden; transition:transform 0.2s ease, border-color 0.2s ease; }
.saude-kpi:hover { transform:translateY(-3px); border-color:var(--text-faint); box-shadow:0 8px 24px rgba(0,0,0,calc(0.25 * var(--k-sombra))); }
.saude-kpi::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--gold); }
.saude-kpi.kpi-confirmed::before { background:var(--c-accent); }
.saude-kpi.kpi-received::before  { background:var(--c-ok); }
.saude-kpi.kpi-pending::before   { background:var(--c-warn); }
.saude-kpi.kpi-future::before    { background:var(--c-info); }
.saude-kpi-icon { width:38px; height:38px; border-radius:calc(10px * var(--k-r)); display:grid; place-items:center; margin-bottom:10px; background:color-mix(in srgb, var(--c-accent) 12%, transparent); color:var(--c-accent); }
.saude-kpi.kpi-received .saude-kpi-icon  { background:color-mix(in srgb, var(--c-ok) 12%, transparent); color:var(--c-ok); }
.saude-kpi.kpi-pending .saude-kpi-icon   { background:color-mix(in srgb, var(--c-warn) 12%, transparent); color:var(--c-warn); }
.saude-kpi.kpi-future .saude-kpi-icon    { background:color-mix(in srgb, var(--c-info) 12%, transparent); color:var(--c-info); }
.saude-kpi-lbl { font-size:calc(11px * var(--k-fs)); font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-mute); }
.saude-kpi-val { font-family:var(--f-ui); font-size:calc(26px * var(--k-fs)); font-weight:600; color:var(--text-bright); margin:6px 0 4px; line-height:1.2; }
.saude-kpi-sub { font-size:calc(11.5px * var(--k-fs)); color:var(--text-dim); }

/* Insights inline (4 cards menores) */
.saude-insights-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:calc(14px * var(--k-esp)); }
.saude-insight-card { display:flex; gap:calc(12px * var(--k-esp)); align-items:flex-start; background:var(--bg-panel); border:1px solid var(--bg-line); border-radius:calc(10px * var(--k-r)); padding:calc(14px * var(--k-esp)) calc(16px * var(--k-esp)); }
.saude-insight-ico { width:36px; height:36px; border-radius:calc(9px * var(--k-r)); background:color-mix(in srgb, var(--c-accent) 10%, transparent); display:grid; place-items:center; font-size:calc(18px * var(--k-fs)); flex-shrink:0; }
.saude-insight-body { flex:1; min-width:0; }
.saude-insight-lbl { font-size:calc(10.5px * var(--k-fs)); font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-mute); margin-bottom:3px; }
.saude-insight-val { font-size:calc(16px * var(--k-fs)); font-weight:700; color:var(--text-bright); line-height:1.25; }
.saude-insight-val.yoy-pos { color:var(--c-ok); }
.saude-insight-val.yoy-neg { color:var(--c-bad); }
.saude-insight-sub { font-size:calc(10.5px * var(--k-fs)); color:var(--text-dim); margin-top:2px; line-height:1.4; }

/* Eventos em risco */
.saude-risco-resumo { font-size:calc(12px * var(--k-fs)); color:var(--text-mute); padding:calc(8px * var(--k-esp)) calc(12px * var(--k-esp)); background:color-mix(in srgb, var(--c-bad) 6%, transparent); border-radius:calc(6px * var(--k-r)); margin-bottom:10px; }
.saude-risco-item { display:flex; align-items:center; gap:calc(12px * var(--k-esp)); padding:calc(10px * var(--k-esp)) calc(6px * var(--k-esp)); border-bottom:1px solid var(--bg-line); }
.saude-risco-item:last-child { border-bottom:none; }
.saude-risco-info { flex:1; min-width:0; }
.saude-risco-nome { font-size:calc(13px * var(--k-fs)); font-weight:600; color:var(--text-bright); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.saude-risco-meta { font-size:calc(11px * var(--k-fs)); color:var(--text-mute); margin-top:2px; }
.saude-risco-val { font-family:var(--f-ui); font-variant-numeric:tabular-nums; font-size:calc(13px * var(--k-fs)); font-weight:700; color:var(--c-bad); }
.saude-risco-acoes { display:flex; gap:calc(4px * var(--k-esp)); }

/* Faturamento por tipo */
.saude-tipo-item { padding:calc(10px * var(--k-esp)) calc(4px * var(--k-esp)); border-bottom:1px solid var(--bg-line); }
.saude-tipo-item:last-child { border-bottom:none; }
.saude-tipo-head { display:flex; justify-content:space-between; align-items:baseline; gap:calc(10px * var(--k-esp)); margin-bottom:6px; }
.saude-tipo-nome { font-size:calc(13px * var(--k-fs)); font-weight:600; color:var(--text-bright); text-transform:capitalize; }
.saude-tipo-val { font-size:calc(11.5px * var(--k-fs)); font-family:var(--f-ui); font-variant-numeric:tabular-nums; color:var(--text-mute); }
.saude-tipo-val b { color:var(--gold); font-weight:700; }
.saude-tipo-bar { height:5px; background:var(--bg-panel-2); border-radius:calc(3px * var(--k-r)); overflow:hidden; }
.saude-tipo-bar-fill { height:100%; background:var(--c-prim); border-radius:calc(3px * var(--k-r)); transition:width 0.6s ease-out; }

/* Forecast 90 dias */
.saude-forecast-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:calc(14px * var(--k-esp)); padding:calc(6px * var(--k-esp)) calc(4px * var(--k-esp)); }
.saude-forecast-card { background:var(--bg-panel-2); border:1px solid var(--bg-line); border-radius:calc(10px * var(--k-r)); padding:calc(16px * var(--k-esp)); text-align:center; }
.saude-forecast-mes { font-size:calc(11px * var(--k-fs)); font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--gold); margin-bottom:8px; }
.saude-forecast-confirmado { font-family:var(--f-ui); font-size:calc(24px * var(--k-fs)); font-weight:600; color:var(--text-bright); line-height:1.1; }
.saude-forecast-sub { font-size:calc(11px * var(--k-fs)); color:var(--text-mute); margin-top:4px; }
.saude-forecast-possivel { font-size:calc(11px * var(--k-fs)); color:var(--c-text-3); margin-top:8px; padding-top:calc(8px * var(--k-esp)); border-top:1px dashed var(--bg-line); }

/* Responsivo */
@media (max-width: 1100px) {
  .saude-kpi-grid { grid-template-columns:repeat(2,1fr); }
  .saude-insights-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 700px) {
  .saude-kpi-grid { grid-template-columns:1fr; }
  .saude-insights-grid { grid-template-columns:1fr; }
  .saude-forecast-grid { grid-template-columns:1fr; }
  .saude-periodo { overflow-x:auto; flex-wrap:nowrap; }
  .saude-per-btn { flex-shrink:0; }
}

/* Botão "Copiar link público" — azul indigo */
.icon-btn.link-pub { color:var(--c-info); border-color:color-mix(in srgb, var(--c-info) 40%, transparent); background:color-mix(in srgb, var(--c-info) 8%, transparent); }
.icon-btn.link-pub:hover { color:var(--c-bg); background:var(--c-info); border-color:var(--c-info); }
.icon-btn.abrir-pub { color:var(--gold); border-color:color-mix(in srgb, var(--c-accent) 40%, transparent); background:color-mix(in srgb, var(--c-accent) 8%, transparent); }
.icon-btn.abrir-pub:hover { color:var(--c-prim-text); background:var(--c-prim); border-color:transparent; }
.icon-btn[disabled] { opacity:0.35; cursor:not-allowed; background:var(--bg-panel-2); color:var(--text-faint); border-color:var(--bg-line); }

/* Botão Refresh na topbar */
.tb-icon-btn { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:calc(9px * var(--k-r)); background:var(--bg-panel); border:1px solid var(--bg-line); color:var(--text-mute); cursor:pointer; transition:all 0.18s ease; margin-right:6px; }
.tb-icon-btn:hover { color:var(--gold); border-color:var(--gold); }
.tb-icon-btn:disabled { cursor:not-allowed; opacity:0.7; }
.tb-icon-btn.spinning svg { animation: spin-refresh 0.6s ease-in-out; }
@keyframes spin-refresh { from { transform:rotate(0); } to { transform:rotate(360deg); } }

/* Documentos vinculados ao evento (orçamento + contrato) */
.det-docs-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:calc(14px * var(--k-esp)); margin-top:6px; }
.det-docs-empty { padding:calc(18px * var(--k-esp)); background:var(--bg-panel); border:1px dashed var(--bg-line); border-radius:calc(8px * var(--k-r)); text-align:center; color:var(--text-mute); font-size:calc(13px * var(--k-fs)); }

.det-doc-card { background:var(--bg-panel); border:1px solid var(--bg-line); border-radius:calc(10px * var(--k-r)); padding:calc(14px * var(--k-esp)); transition:border-color 0.15s ease; }
.det-doc-card:hover { border-color:var(--text-faint); }
.det-doc-card.orc { border-left:3px solid var(--c-accent); }
.det-doc-card.ctr { border-left:3px solid var(--c-info); }

.det-doc-head { display:flex; align-items:center; gap:calc(10px * var(--k-esp)); margin-bottom:10px; }
.det-doc-icon { width:34px; height:34px; border-radius:calc(8px * var(--k-r)); display:grid; place-items:center; flex-shrink:0; }
.det-doc-icon.orc { background:color-mix(in srgb, var(--c-accent) 15%, transparent); color:var(--c-accent); }
.det-doc-icon.ctr { background:color-mix(in srgb, var(--c-info) 15%, transparent); color:var(--c-info); }
.det-doc-info { flex:1; min-width:0; }
.det-doc-tipo { font-size:calc(10.5px * var(--k-fs)); font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-mute); }
.det-doc-num { font-family:var(--f-ui); font-variant-numeric:tabular-nums; font-size:calc(13px * var(--k-fs)); color:var(--text-bright); font-weight:700; }

.det-doc-body { margin-bottom:10px; }
.det-doc-cliente { font-size:calc(13px * var(--k-fs)); color:var(--text-base); margin-bottom:3px; }
.det-doc-valor { font-family:var(--f-ui); font-variant-numeric:tabular-nums; font-size:calc(16px * var(--k-fs)); font-weight:700; color:var(--c-ok); }
.det-doc-assinado { font-size:calc(11px * var(--k-fs)); color:var(--c-ok); margin-top:4px; }

.det-doc-actions { display:flex; gap:calc(5px * var(--k-esp)); flex-wrap:wrap; }
.det-doc-actions .btn.small { padding:calc(6px * var(--k-esp)) calc(10px * var(--k-esp)); font-size:calc(11.5px * var(--k-fs)); }
.det-doc-actions .whats-btn-small { color:#25D366; border-color:rgba(37,211,102,0.35); }
.det-doc-actions .whats-btn-small:hover { background:#25D366; color:#fff; border-color:#25D366; }

/* ===== Dropdown de status inline na tabela de eventos ===== */
.status-sel { font-family:inherit; font-size:calc(11px * var(--k-fs)); font-weight:700; padding:calc(5px * var(--k-esp)) calc(26px * var(--k-esp)) calc(5px * var(--k-esp)) calc(10px * var(--k-esp)); border-radius:calc(6px * var(--k-r)); border:1px solid transparent; cursor:pointer; appearance:none; -webkit-appearance:none; background-repeat:no-repeat; background-position:right 7px center; background-size:11px; transition:filter .15s ease; max-width:165px; }
.status-sel:hover { filter:brightness(1.12); }
.status-sel:focus { outline:none; box-shadow:0 0 0 2px color-mix(in srgb, var(--c-accent) 35%, transparent); }
/* seta customizada (chevron) embutida via SVG data-uri */
.status-sel { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
/* Cores por status (reusa a paleta dos badges) */
.status-sel.b-pago      { background-color:color-mix(in srgb, var(--c-ok) 18%, transparent);  color:var(--c-ok); border-color:color-mix(in srgb, var(--c-ok) 40%, transparent); }
.status-sel.b-naorealiz { background-color:color-mix(in srgb, var(--c-info) 18%, transparent);  color:var(--c-info); border-color:color-mix(in srgb, var(--c-info) 40%, transparent); }
.status-sel.b-confirmar { background-color:color-mix(in srgb, var(--c-text-3) 18%, transparent); color:var(--c-text-3); border-color:color-mix(in srgb, var(--c-text-3) 40%, transparent); }
.status-sel.b-naopago   { background-color:color-mix(in srgb, var(--c-warn) 18%, transparent);  color:var(--c-warn); border-color:color-mix(in srgb, var(--c-warn) 40%, transparent); }
.status-sel.b-cancelado { background-color:color-mix(in srgb, var(--c-bad) 18%, transparent); color:var(--c-bad); border-color:color-mix(in srgb, var(--c-bad) 40%, transparent); }
/* options no dropdown aberto — fundo escuro legível */
.status-sel option { background:var(--c-surface); color:var(--c-text); font-weight:600; }

/* Faixa de mudança rápida de status no modal de detalhes */
.det-status-bar { display:flex; align-items:center; gap:calc(12px * var(--k-esp)); padding:calc(12px * var(--k-esp)) calc(16px * var(--k-esp)); margin:14px 0; background:var(--bg-panel-2); border:1px solid var(--bg-line); border-radius:calc(9px * var(--k-r)); }
.det-status-lbl { font-size:calc(12px * var(--k-fs)); font-weight:600; color:var(--text-mute); text-transform:uppercase; letter-spacing:0.04em; }
.det-status-bar .status-sel { font-size:calc(13px * var(--k-fs)); padding:calc(8px * var(--k-esp)) calc(30px * var(--k-esp)) calc(8px * var(--k-esp)) calc(12px * var(--k-esp)); }
/* Barra "Enviar detalhes do evento" (link/PDF/e-mail/WhatsApp) */
.det-share-bar { display:flex; align-items:center; gap:calc(12px * var(--k-esp)); flex-wrap:wrap; padding:calc(12px * var(--k-esp)) calc(16px * var(--k-esp)); margin:14px 0; background:var(--bg-panel-2); border:1px solid var(--bg-line); border-radius:calc(9px * var(--k-r)); }
.det-share-lbl { font-size:calc(12px * var(--k-fs)); font-weight:600; color:var(--text-mute); text-transform:uppercase; letter-spacing:0.04em; }
.det-share-acoes { display:flex; gap:calc(8px * var(--k-esp)); flex-wrap:wrap; margin-left:auto; }
@media (max-width: 700px) { .det-share-acoes { margin-left:0; width:100%; } }

/* ===== Chip do comissionado na agenda (mesmo visual para todos) ===== */
.prod-chip { display:inline-flex; align-items:center; gap:calc(3px * var(--k-esp)); margin-left:6px; padding:calc(2px * var(--k-esp)) calc(7px * var(--k-esp)); border-radius:100px; font-size:calc(10px * var(--k-fs)); font-weight:800; letter-spacing:0.03em; vertical-align:middle; white-space:nowrap; cursor:help;
  background:color-mix(in srgb, var(--c-accent) 16%, transparent); color:var(--c-accent-text); border:1px solid color-mix(in srgb, var(--c-accent) 40%, transparent); }

/* ===== Luz de status no início da linha da agenda (mobile-friendly) ===== */
.status-luz { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:7px; vertical-align:middle; flex-shrink:0; box-shadow:0 0 5px currentColor; }
.status-luz.b-pago      { background:var(--c-ok); color:var(--c-ok); }
.status-luz.b-naorealiz { background:var(--c-info); color:var(--c-info); }
.status-luz.b-confirmar { background:var(--c-text-3); color:var(--c-text-3); box-shadow:none; }
.status-luz.b-naopago   { background:var(--c-warn); color:var(--c-warn); }
.status-luz.b-cancelado { background:var(--c-bad); color:var(--c-bad); }

/* ============================================================
   COMISSÕES INTEGRADAS + PAGAMENTO PIX
   ============================================================ */

.cx-search {
  flex:1; min-width:180px; max-width:320px; background:var(--bg-input); color:var(--text-bright);
  border:1px solid var(--bg-line); border-radius:calc(8px * var(--k-r)); padding:calc(9px * var(--k-esp)) calc(12px * var(--k-esp)); font-size:calc(13px * var(--k-fs));
}
.cx-search::placeholder { color:var(--text-dim); }

.cx-pill { display:inline-block; padding:calc(3px * var(--k-esp)) calc(10px * var(--k-esp)); border-radius:100px; font-size:calc(11px * var(--k-fs)); font-weight:600; white-space:nowrap; }
.cx-pill.st-pend   { background:var(--amber-bg); color:var(--amber); }
.cx-pill.st-ini    { background:color-mix(in srgb, var(--c-info) 14%, transparent); color:var(--c-info); }
.cx-pill.st-aguard { background:color-mix(in srgb, var(--c-accent) 14%, transparent); color:var(--c-accent-text); }
.cx-pill.st-pago   { background:var(--green-bg); color:var(--green); }
.cx-pill.st-canc   { background:var(--red-bg); color:var(--red); }
.cx-pill.st-pronto   { background:var(--amber-bg); color:var(--amber); }
.cx-pill.st-areceber { background:color-mix(in srgb, var(--c-info) 14%, transparent); color:var(--c-info); }

.cx-empty { padding:calc(28px * var(--k-esp)); text-align:center; color:var(--text-mute); font-size:calc(13px * var(--k-fs)); }
.cx-erro { color:var(--red); }
.cx-hint { font-size:calc(12px * var(--k-fs)); color:var(--text-mute); }

/* --- Modal de pagamento --- */
.px-resumo { display:grid; grid-template-columns:1fr 1fr; gap:calc(12px * var(--k-esp)) calc(20px * var(--k-esp)); padding:calc(4px * var(--k-esp)) 0 calc(14px * var(--k-esp)); border-bottom:1px solid var(--bg-line); }
.px-resumo > div { display:flex; flex-direction:column; gap:calc(3px * var(--k-esp)); }
.px-lbl { font-size:calc(10.5px * var(--k-fs)); text-transform:uppercase; letter-spacing:.4px; color:var(--text-mute); font-weight:600; }
.px-val { font-size:calc(14px * var(--k-fs)); color:var(--text-bright); font-weight:600; }
.px-val.px-valor { color:var(--green); font-family:var(--f-ui); font-variant-numeric:tabular-nums; font-size:calc(16px * var(--k-fs)); }

.px-qr-wrap { background:#fff; padding:calc(10px * var(--k-esp)); border-radius:calc(12px * var(--k-r)); line-height:0; flex-shrink:0; }
.px-qr-wrap canvas { display:block; }

.px-mini { font-size:calc(12px * var(--k-fs)); color:var(--text-mute); padding:calc(4px * var(--k-esp)) 0; }

@media (max-width:640px) {
  .px-resumo { grid-template-columns:1fr; }
}

/* --- Comprovante: dropzone, prévia e itens --- */
.px-dropzone {
  border:1.5px dashed var(--bg-line); border-radius:calc(12px * var(--k-r)); padding:calc(16px * var(--k-esp)); text-align:center;
  transition:border-color .15s ease, background .15s ease;
}

/* --- Revisão do pagamento (dentro do modal de confirmação) --- */
#confirm-text .rev-l { color:var(--text-mute); font-size:calc(12px * var(--k-fs)); }
#confirm-text .rev-v { color:var(--text-bright); font-weight:600; }

/* ===================== 24. AGENDA NO CELULAR (cartões) =====================
   Até 720px a tabela de 12 colunas some e a agenda vira uma lista de cartões:
   toque no cartão abre os detalhes; o "⋯" (o mesmo menu de Orçamentos e
   Contratos) traz Editar, WhatsApp, Marcar como pago, Inativar e Excluir.
   Os filtros ficam recolhidos atrás do botão "Filtros". */
.agenda-cards { display:none; }
.filtros-toggle { display:none; }
@media (max-width:720px) {
  #agenda-tabela { display:none; }
  /* minmax(0,1fr): texto longo sem quebra (local, valores) não alarga o cartão além da tela */
  .agenda-cards { display:grid; grid-template-columns:minmax(0,1fr); gap:calc(10px * var(--k-esp)); }
  .filtros-toggle { display:flex; align-items:center; justify-content:space-between; gap:calc(10px * var(--k-esp)); width:100%; min-height:44px;
    padding:0 calc(14px * var(--k-esp)); margin-bottom:12px; background:var(--bg-panel); border:1px solid var(--bg-line); border-radius:calc(10px * var(--k-r));
    color:var(--text-base); font-family:inherit; font-size:calc(14px * var(--k-fs)); font-weight:600; cursor:pointer; }
  .filtros-toggle::after { content:"▾"; color:var(--text-mute); margin-left:auto; }
  .filtros-toggle[aria-expanded="true"]::after { content:"▴"; }
  .filtros-ativos { font-size:calc(12px * var(--k-fs)); font-weight:600; color:var(--gold); }
  #filter-bar-agenda:not(.aberta) { display:none; }
  /* 16px nos campos: o iPhone não dá zoom ao tocar */
  #filter-bar-agenda select.field, #table-search { font-size:calc(16px * var(--k-fs)); }
}
.agenda-card { position:relative; min-width:0; background:var(--bg-panel); border:1px solid var(--bg-line); border-radius:calc(12px * var(--k-r));
  padding:calc(10px * var(--k-esp)) calc(8px * var(--k-esp)) calc(12px * var(--k-esp)) calc(14px * var(--k-esp)); cursor:pointer; -webkit-tap-highlight-color:transparent; }
.agenda-card:active { background:var(--bg-panel-2); }
.agenda-card:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
.agenda-card.inactive { opacity:.55; }
.ac-top { display:flex; align-items:center; gap:calc(8px * var(--k-esp)); min-height:32px; }
.ac-top .status-luz { margin-right:0; }
.ac-data { font-family:var(--f-ui); font-variant-numeric:tabular-nums; font-size:calc(12.5px * var(--k-fs)); font-weight:600; color:var(--text-base); white-space:nowrap; }
.ac-hora { flex:1; min-width:0; font-size:calc(12px * var(--k-fs)); color:var(--text-mute); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ac-menu > summary.orc-menu-sum { width:44px; height:44px; padding:0; display:grid; place-items:center; font-size:calc(20px * var(--k-fs)); border-radius:calc(10px * var(--k-r)); margin:-6px 0; }
.ac-menu .orc-menu-pop { min-width:210px; }
.ac-menu .orc-menu-pop button { min-height:44px; font-size:calc(14px * var(--k-fs)); }
.ac-nome { font-size:calc(15px * var(--k-fs)); font-weight:700; line-height:1.3; color:var(--text-bright); margin:2px 36px 0 0; overflow-wrap:anywhere; }
.ac-local { font-size:calc(12.5px * var(--k-fs)); color:var(--text-mute); margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding-right:calc(6px * var(--k-esp)); }
.ac-rodape { display:flex; align-items:flex-end; justify-content:space-between; gap:calc(10px * var(--k-esp)); margin-top:10px; padding-right:calc(6px * var(--k-esp)); }
.ac-rodape .badge { font-size:calc(10.5px * var(--k-fs)); }
.ac-valores { text-align:right; font-family:var(--f-ui); font-variant-numeric:tabular-nums; font-size:calc(13.5px * var(--k-fs)); font-weight:700; color:var(--green); white-space:nowrap; }
.ac-valores small { display:block; font-size:calc(11px * var(--k-fs)); font-weight:500; color:var(--text-mute); }
.agenda-vazio { display:grid; justify-items:center; gap:calc(10px * var(--k-esp)); padding:calc(26px * var(--k-esp)) calc(14px * var(--k-esp)); text-align:center; color:var(--text-mute);
  border:1px dashed var(--bg-line); border-radius:calc(12px * var(--k-r)); font-size:calc(13px * var(--k-fs)); }
/* Agenda do celular separada por mês: um título por mês, com a quantidade de
   eventos e o líquido, que fica preso logo abaixo da barra do topo enquanto os
   cartões daquele mês passam. */
.ac-grupo { display:grid; grid-template-columns:minmax(0,1fr); gap:calc(10px * var(--k-esp)); }
.ac-grupo + .ac-grupo { margin-top:14px; }
.ac-mes { position:sticky; top:var(--topbar-h); z-index:5; display:flex; align-items:baseline; flex-wrap:wrap; gap:calc(4px * var(--k-esp)) calc(10px * var(--k-esp));
  margin:0 -4px; padding:calc(10px * var(--k-esp)) calc(6px * var(--k-esp)) calc(8px * var(--k-esp)); background:var(--bg-panel); border-bottom:1px solid var(--bg-line); }
.ac-mes-nome { font-family:var(--f-ui); font-size:calc(18px * var(--k-fs)); font-weight:600; color:var(--text-bright); }
.ac-mes-tag { font-size:calc(11px * var(--k-fs)); font-weight:800; letter-spacing:0.04em; text-transform:uppercase; color:var(--c-prim-text); background:var(--c-prim);
  padding:calc(2px * var(--k-esp)) calc(8px * var(--k-esp)); border-radius:100px; }
.ac-mes-info { margin-left:auto; font-size:calc(12.5px * var(--k-fs)); color:var(--text-mute); font-family:var(--f-ui); font-variant-numeric:tabular-nums; white-space:nowrap; }
.ac-grupo.atual .ac-mes-nome { color:var(--gold); }
.ac-ir-mes { width:100%; min-height:44px; padding:0 calc(14px * var(--k-esp)); border-radius:calc(10px * var(--k-r)); border:1px solid color-mix(in srgb, var(--c-accent) 45%, transparent);
  background:color-mix(in srgb, var(--c-accent) 10%, transparent); color:var(--gold); font-family:inherit; font-size:calc(14px * var(--k-fs)); font-weight:700; cursor:pointer; }
/* "Desfazer" dentro do aviso (toast) */
.toast-acao { margin-left:auto; flex-shrink:0; min-height:34px; padding:0 calc(12px * var(--k-esp)); border-radius:calc(8px * var(--k-r)); border:1px solid var(--bg-line);
  background:transparent; color:var(--gold); font-family:inherit; font-size:calc(12.5px * var(--k-fs)); font-weight:700; cursor:pointer; }
.toast-acao:hover { background:var(--bg-panel-2); }

/* ===================== 25. DETALHES DO EVENTO (padrão de Orçamentos/Contratos) =====================
   Cabeçalho com nome + status, 4 cartões, "Alterar status" em menu, blocos,
   "Links para enviar" (detalhes e cobrança) e rodapé enxuto com "⋯ Mais". */
.det-head-badges { display:inline-flex; gap:calc(6px * var(--k-esp)); flex-wrap:wrap; }
#modal-detalhes .cd-card b.det-liq, #modal-detalhes .cd-row b.det-liq { color:var(--green); }
.det-link + .det-link { margin-top:14px; }
.det-link-tit { font-size:calc(13px * var(--k-fs)); font-weight:700; color:var(--text-bright); margin-bottom:7px; }
.det-link-tit small { display:block; font-size:calc(11.5px * var(--k-fs)); font-weight:500; color:var(--text-mute); margin-top:2px; }
#modal-detalhes .anexo-head .cd-sec { margin:0; }
#modal-detalhes .det-docs-grid { margin-top:0; }
#modal-detalhes .det-mais > summary.btn { list-style:none; padding:0 calc(14px * var(--k-esp)); }
#modal-detalhes .det-mais .orc-menu-pop { min-width:200px; }
#modal-detalhes .det-mais .orc-menu-pop button { min-height:40px; }
.det-cob-curto { display:none; }
@media (max-width:720px) {
  /* Rodapé em 2 linhas: "Enviar detalhes" inteira; Cobrança · Editar · ⋯ embaixo */
  #modal-detalhes .cd-foot { flex-direction:row; flex-wrap:wrap; gap:calc(8px * var(--k-esp)); }
  #modal-detalhes .cd-foot > .btn, #modal-detalhes .cd-foot > details { width:auto; flex:1 1 0; min-width:0; }
  #modal-detalhes .cd-foot > #det-btn-enviar { flex:1 1 100%; }
  #modal-detalhes .cd-foot .btn { height:44px; justify-content:center; padding:0 calc(10px * var(--k-esp)); }
  #modal-detalhes .det-mais > summary.btn { width:100%; justify-content:center; }
  .det-cob-longo, .det-mais-lbl { display:none; }
  .det-cob-curto { display:inline; }
  #modal-detalhes .cd-linkbtns { width:100%; flex-wrap:wrap; }
  #modal-detalhes .cd-linkbtns .btn { flex:1 1 auto; min-height:40px; }
}

/* ===================== 26. NAVEGAÇÃO NO CELULAR (barra embaixo + "Mais") =====================
   Até 720px: as abas do topo somem e entra a barra embaixo (Início, Agenda,
   Orçamentos, Comissões, Mais). Configurações e Sair ficam no "Mais"; a barra
   do topo fica só com marca, sincronização, atualizar e o sino. */
.bnav, .bnav-gaveta { display:none; }
.lembretes-bell.vazio .lembretes-bell-badge { display:none; }
@media (max-width:720px) {
  .tabnav { display:none; }
  html { scroll-padding-top:var(--topbar-h); }
  .bnav { display:grid; grid-template-columns:repeat(5,1fr); position:fixed; left:0; right:0; bottom:0; z-index:900;
    background:var(--bg-panel); border-top:1px solid var(--bg-line);
    padding:4px 4px calc(4px + env(safe-area-inset-bottom, 0px)); box-shadow:0 -6px 20px rgba(0,0,0,calc(.25 * var(--k-sombra))); }
  .bnav button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:calc(3px * var(--k-esp)); min-height:52px;
    background:transparent; border:0; border-radius:calc(10px * var(--k-r)); color:var(--text-mute); font-family:inherit; font-size:calc(11px * var(--k-fs)); font-weight:600; cursor:pointer;
    -webkit-tap-highlight-color:transparent; }
  .bnav button[aria-current="page"], .bnav button.ativo { color:var(--gold); }
  .bnav button[aria-current="page"] svg, .bnav button.ativo svg { filter:drop-shadow(0 0 6px color-mix(in srgb, var(--c-accent) 35%, transparent)); }
  .bnav button:active { background:var(--bg-panel-2); }
  .bnav button:focus-visible { outline:2px solid var(--gold); outline-offset:-2px; }
  .bnav-gaveta:not([hidden]) { display:block; position:fixed; inset:0; z-index:950; }
  .bnav-veu { position:absolute; inset:0; background:var(--c-overlay); }
  .bnav-painel { position:absolute; left:0; right:0; bottom:0; background:var(--bg-panel); border-top:1px solid var(--bg-line);
    border-radius:calc(16px * var(--k-r)) calc(16px * var(--k-r)) 0 0; padding:8px 12px calc(14px + env(safe-area-inset-bottom, 0px)); display:grid; gap:calc(2px * var(--k-esp));
    box-shadow:0 -12px 40px rgba(0,0,0,calc(.4 * var(--k-sombra))); animation:gaveta-sobe .18s ease-out; }
  @keyframes gaveta-sobe { from { transform:translateY(16px); opacity:0; } to { transform:none; opacity:1; } }
  .bnav-alca { width:40px; height:4px; border-radius:calc(2px * var(--k-r)); background:var(--bg-line); margin:2px auto 8px; }
  .bnav-painel button { display:flex; align-items:center; gap:calc(14px * var(--k-esp)); min-height:48px; padding:0 calc(12px * var(--k-esp)); border-radius:calc(10px * var(--k-r)); border:0;
    background:transparent; color:var(--text-base); font-family:inherit; font-size:calc(15px * var(--k-fs)); font-weight:600; text-align:left; cursor:pointer; }
  .bnav-painel button:active, .bnav-painel button:hover { background:var(--bg-panel-2); }
  .bnav-painel button[aria-current="page"] { color:var(--gold); }
  .bnav-painel button.danger { color:var(--red); }
  .bnav-sep { height:1px; background:var(--bg-line); margin:6px 4px; }
  .bnav-conta { font-size:calc(11.5px * var(--k-fs)); color:var(--text-mute); padding:calc(8px * var(--k-esp)) calc(12px * var(--k-esp)) 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .bnav-conta b { color:var(--text-base); font-weight:600; }
  body.gaveta-aberta { overflow:hidden; }
  /* espaço para a barra de baixo não cobrir o fim da página nem os avisos */
  .app { padding-bottom:calc(84px + env(safe-area-inset-bottom, 0px)); }
  .toast-stack { bottom:calc(76px + env(safe-area-inset-bottom, 0px)); }
  .orc-link-manual { bottom:calc(76px + env(safe-area-inset-bottom, 0px)); }
}

/* ===================== ETAPA 11 — LEITURA E FORMULÁRIOS ===================== */
/* Texto de exemplo dos campos legível (antes ficava no cinza padrão do navegador). */
.form-field input::placeholder, .form-field textarea::placeholder { color:var(--text-dim); opacity:1; }

/* 16px em todo campo de digitar no celular: com menos que isso o iPhone dá zoom
   ao tocar no campo. (pointer:coarse) cobre o celular deitado (mais de 720px).
   !important porque vários campos têm font-size no próprio HTML. */
@media (max-width:720px), (pointer:coarse) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=hidden]):not([readonly]),
  select, textarea:not([readonly]) { font-size:calc(16px * var(--k-fs)) !important; }
}

/* Botão esperando a internet ("Carregando…", ver _comCarregando no app.js) */
.btn.carregando { cursor:progress; opacity:0.85; }
.btn-spin { display:inline-block; width:12px; height:12px; margin-right:7px; vertical-align:-2px; border-radius:50%;
  border:2px solid currentColor; border-right-color:transparent; animation:btn-girar 0.7s linear infinite; }
@keyframes btn-girar { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .btn-spin { animation-duration:2s; } }