/* =========================================================================
 * spec/fiscalizacao-watermark.css
 * Watermark visual obrigatório sob perfil FISCALIZACAO_HORIGENS
 * Autoridade: ADR 0011 §4.3; spec/fiscalizacao-views-v1.md §8
 * Vigência: 2026-04-16 → 2026-06-11 (auto-rescisão da ADR 0011)
 *
 * Princípio: screenshot sob FISCALIZACAO_HORIGENS é, por construção,
 * indistinguível de documento vazado sob responsabilidade nomeada da
 * Contratante. CSS não-interativo, sobreposto, não-removível por DevTools
 * rápido (qualquer remoção exige edição consciente do DOM — e fica logada
 * no audit/fiscalizacao-access.log via MutationObserver do view guard).
 * ========================================================================= */

/* Camada de overlay — posicionada sobre toda área útil da plataforma */
.isp-watermark-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;      /* Camada jamais intercepta clique */
  z-index: 9999;              /* Acima de qualquer UI funcional */
  overflow: hidden;
  background-color: transparent;
  /* Tile gerado via SVG em background-image para impedir remoção trivial
     por overflow, display:none em elemento filho — o background vive no pai */
  background-repeat: repeat;
  background-size: 480px 340px;
  /* O background-image é injetado dinamicamente pelo view guard com
     usuario_email e timestamp interpolados (vide fiscalizacao-views.js §watermark) */
}

/* Modo de exibição alternativo: tile via múltiplos <span> filhos.
   Usado quando o ambiente não permite data-URL em background-image
   (algumas versões endurecidas de CSP). */
.isp-watermark-tile {
  position: absolute;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-weight: 600;
  font-size: 48px;
  color: rgba(15, 23, 42, 0.12);     /* cinza-ardósia a 12% */
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: rotate(-30deg);
  transform-origin: center center;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}

/* Variação para fundo escuro (detectada via prefers-color-scheme
   ou classe body.ui-dark aplicada pelo shell H35.6) */
@media (prefers-color-scheme: dark) {
  .isp-watermark-tile {
    color: rgba(226, 232, 240, 0.14);
  }
}
body.ui-dark .isp-watermark-tile {
  color: rgba(226, 232, 240, 0.14);
}

/* Banner superior fixo — reforço identificador fora do tile */
.isp-watermark-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 28px;
  background: repeating-linear-gradient(
    -45deg,
    rgba(180, 15, 25, 0.08) 0 12px,
    rgba(180, 15, 25, 0.16) 12px 24px
  );
  color: rgba(120, 12, 20, 0.92);
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 10000;
}

.isp-watermark-banner::before {
  content: "HORIGENS — leitura auditada — perfil FISCALIZACAO_HORIGENS — ";
}
.isp-watermark-banner::after {
  content: attr(data-context);   /* "email • timestamp • view atual" */
}

/* Rodapé espelho do banner (garante que screenshot parcial ainda carregue
   identificação legível mesmo que recorte exclua topo ou base) */
.isp-watermark-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 20px;
  background: rgba(180, 15, 25, 0.08);
  color: rgba(120, 12, 20, 0.88);
  font-family: "Inter", "Segoe UI", system-ui, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 4px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
  z-index: 10000;
}

.isp-watermark-footer .isp-wm-left::before {
  content: "CT-CS-HOR-2026-001 §9.3 §2 — DUAL_SCOPE emergencial (ADR 0011)";
}
.isp-watermark-footer .isp-wm-right::before {
  content: attr(data-hash);       /* hash curto do registro de acesso */
}

/* Impressão: mantém watermark em PDF/print */
@media print {
  .isp-watermark-layer,
  .isp-watermark-banner,
  .isp-watermark-footer {
    display: block !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .isp-watermark-tile {
    color: rgba(15, 23, 42, 0.18) !important;
  }
}

/* Guarda defensiva: se um ator malicioso tentar ocultar a camada via
   inline style, o CSS abaixo — carregado com !important — restaura.
   Remoção definitiva exige edição do DOM que é detectada via
   MutationObserver no fiscalizacao-views.js §watermark.observe(). */
html body .isp-watermark-layer[style*="display: none"],
html body .isp-watermark-layer[style*="visibility: hidden"],
html body .isp-watermark-banner[style*="display: none"],
html body .isp-watermark-footer[style*="display: none"] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Acessibilidade: o watermark não deve ser lido por screen readers
   (evita ruído auditivo irrelevante à leitura de dado pela Fiscalização) */
.isp-watermark-layer,
.isp-watermark-banner,
.isp-watermark-footer {
  aria-hidden: true;
}

/* ─── SPRINT #215 · Onboarding Tour (overlay + card stepwise) ──────────── */
.onb-overlay{
  position:fixed;inset:0;z-index:99000;
  background:radial-gradient(circle at 50% 50%,rgba(13,17,23,.82),rgba(5,8,12,.96));
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;padding:24px;
  opacity:0;animation:onbFadeIn .35s ease forwards;
}
@keyframes onbFadeIn{to{opacity:1}}
.onb-card{
  background:linear-gradient(135deg,rgba(35,30,55,.98),rgba(20,15,35,.99));
  border:1px solid rgba(196,163,90,.28);border-radius:14px;
  max-width:560px;width:100%;padding:36px 40px;
  box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 0 1px rgba(196,163,90,.08);
  position:relative;
  transform:translateY(20px) scale(.97);opacity:0;
  animation:onbCardIn .45s cubic-bezier(.19,1,.22,1) .1s forwards;
}
@keyframes onbCardIn{to{transform:none;opacity:1}}
.onb-card::before{
  content:'';position:absolute;top:-1px;left:-1px;right:-1px;height:2px;
  background:linear-gradient(to right,transparent,var(--gold,#C4A35A),transparent);
  border-radius:14px 14px 0 0;
}
.onb-eyebrow{
  font-family:var(--sn);font-size:.6rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold,#C4A35A);font-weight:600;
  margin-bottom:6px;
}
.onb-title{
  font-family:var(--sf);font-size:1.6rem;font-weight:400;
  color:var(--cream,#F5F0E8);letter-spacing:.01em;line-height:1.2;
  margin-bottom:10px;
}
.onb-tagline{
  font-family:var(--sf);font-size:1rem;font-style:italic;font-weight:300;
  color:rgba(245,240,232,.55);margin-bottom:20px;line-height:1.4;
}
.onb-body{
  font-size:.78rem;line-height:1.7;color:rgba(245,240,232,.78);
  margin-bottom:24px;font-family:var(--sn);
}
.onb-body p{margin-bottom:10px}
.onb-body strong{color:var(--gold,#C4A35A);font-weight:500}
.onb-body ul{list-style:none;padding:0;margin:8px 0}
.onb-body li{padding:6px 0 6px 22px;position:relative;font-size:.74rem}
.onb-body li::before{
  content:'◆';position:absolute;left:0;top:6px;
  color:var(--gold,#C4A35A);font-size:.55rem;
}
.onb-progress{display:flex;gap:6px;margin-bottom:20px;justify-content:center}
.onb-dot{
  width:24px;height:3px;border-radius:2px;
  background:rgba(196,163,90,.15);transition:all .3s ease;
}
.onb-dot.on{background:var(--gold,#C4A35A);width:32px}
.onb-dot.done{background:rgba(196,163,90,.45)}
.onb-actions{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-top:18px;
}
.onb-skip{
  background:none;border:none;cursor:pointer;
  font-family:var(--sn);font-size:.62rem;letter-spacing:.12em;
  color:rgba(245,240,232,.35);text-transform:uppercase;
  padding:6px 0;transition:color .2s;
}
.onb-skip:hover{color:rgba(245,240,232,.65)}
.onb-nav{display:flex;gap:8px}
.onb-btn{
  padding:10px 22px;border-radius:6px;border:1px solid rgba(196,163,90,.25);
  background:transparent;color:var(--gold,#C4A35A);
  font-family:var(--sn);font-size:.65rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;cursor:pointer;
  transition:all .25s cubic-bezier(.19,1,.22,1);
}
.onb-btn:hover{background:rgba(196,163,90,.06);border-color:var(--gold,#C4A35A)}
.onb-btn-primary{
  background:linear-gradient(135deg,var(--gold,#C4A35A),var(--gm,#B89D5E));
  color:#0A0F1A;border:none;box-shadow:0 4px 16px rgba(196,163,90,.18);
}
.onb-btn-primary:hover{
  box-shadow:0 6px 20px rgba(196,163,90,.32);transform:translateY(-1px);
}
.onb-btn:disabled{opacity:.3;cursor:not-allowed}
.onb-help-pill{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:50%;
  background:rgba(196,163,90,.08);border:1px solid rgba(196,163,90,.22);
  color:var(--gold,#C4A35A);cursor:pointer;font-size:.85rem;
  transition:all .2s ease;margin-right:8px;
}
.onb-help-pill:hover{
  background:var(--gold,#C4A35A);color:#0A0F1A;
  transform:scale(1.08);border-color:var(--gold,#C4A35A);
}
@media(max-width:768px){
  .onb-card{padding:28px 24px;max-width:90vw}
  .onb-title{font-size:1.3rem}
  .onb-tagline{font-size:.85rem}
}

/* ═══════════════════════════════════════════════════════════════════════════
 * SPRINT #229 · DESIGN SYSTEM v1 · Tokens canonicos (UI Tier-1, score 300)
 * ═══════════════════════════════════════════════════════════════════════════
 * Padrao Aman/JHSF aplicado a InnovaSphere. Tokens organizados em 7 grupos.
 * Coexiste com :root legados (linhas 1191, 2613, etc.) sem sobrescrever —
 * sprints futuros migram componentes para usar `var(--ds-*)` progressivamente.
 *
 * Hierarquia de prefixos:
 *   --ds-color-*    Paleta canonica (gold, navy, ink, semantic)
 *   --ds-radius-*   Border-radius (sm/md/lg/full)
 *   --ds-shadow-*   Box-shadow (xs/sm/md/lg/glow)
 *   --ds-duration-* Transition durations (instant/fast/normal/slow)
 *   --ds-ease-*     Cubic-bezier curves (out/in-out/spring)
 *   --ds-z-*        Z-index layers (base/sticky/dropdown/modal/notification)
 *   --ds-text-*     Color tokens contextuais (on-navy, on-gold, on-light)
 * ═══════════════════════════════════════════════════════════════════════════ */
:root{
  /* ─── PALETA · navy ─── */
  --ds-color-navy:#0D1B2A;
  --ds-color-navy-elev:#142A3F;
  --ds-color-navy-card:#1A2F47;
  --ds-color-navy-soft:#1B3A5C;
  --ds-color-navy-mid:#2A5580;

  /* ─── PALETA · gold (premium accents) ─── */
  --ds-color-gold:#C4A35A;
  --ds-color-gold-bright:#DCC96E;
  --ds-color-gold-deep:#A89048;
  --ds-color-gold-soft:#E5DEC9;

  /* ─── PALETA · ink (textos sobre fundo claro) ─── */
  --ds-color-ink:#1A1A1A;
  --ds-color-ink-soft:#3D3D3D;
  --ds-color-ink-muted:#6B7785;
  --ds-color-ink-dim:#9A9A9A;

  /* ─── PALETA · cream (textos sobre fundo navy) ─── */
  --ds-color-cream:#F5F0E8;
  --ds-color-cream-soft:#E8EAEC;
  --ds-color-cream-muted:#B0B8BD;
  --ds-color-cream-dim:rgba(245,240,232,.42);

  /* ─── SEMANTIC · status ─── */
  --ds-color-ok:#2E7D32;
  --ds-color-ok-soft:#7DB88A;
  --ds-color-warn:#E65100;
  --ds-color-warn-soft:#FFB454;
  --ds-color-danger:#C62828;
  --ds-color-danger-soft:#E07A6E;
  --ds-color-info:#1565C0;
  --ds-color-info-soft:#5BA0D6;

  /* ─── BORDERS ─── */
  --ds-border-soft:rgba(196,163,90,.08);
  --ds-border-mid:rgba(196,163,90,.20);
  --ds-border-strong:rgba(196,163,90,.40);

  /* ─── BACKGROUNDS ─── */
  --ds-bg-overlay:rgba(13,17,23,.82);
  --ds-bg-glass:rgba(35,30,55,.94);
  --ds-bg-glass-light:rgba(255,255,255,.04);

  /* ─── RADIUS ─── */
  --ds-radius-xs:2px;
  --ds-radius-sm:4px;
  --ds-radius-md:8px;
  --ds-radius-lg:14px;
  --ds-radius-xl:20px;
  --ds-radius-pill:999px;
  --ds-radius-full:50%;

  /* ─── SHADOWS ─── */
  --ds-shadow-xs:0 1px 2px rgba(0,0,0,.08);
  --ds-shadow-sm:0 2px 8px rgba(0,0,0,.12);
  --ds-shadow-md:0 8px 24px -8px rgba(0,0,0,.25);
  --ds-shadow-lg:0 18px 50px rgba(0,0,0,.40);
  --ds-shadow-xl:0 24px 60px rgba(0,0,0,.55);
  --ds-shadow-glow-gold:0 4px 16px -4px rgba(196,163,90,.40);
  --ds-shadow-inset-top:0 1px 0 rgba(255,255,255,.04) inset;

  /* ─── DURATION ─── */
  --ds-duration-instant:80ms;
  --ds-duration-fast:150ms;
  --ds-duration-normal:250ms;
  --ds-duration-slow:450ms;
  --ds-duration-slower:600ms;

  /* ─── EASING ─── */
  --ds-ease-out:cubic-bezier(.19,1,.22,1);
  --ds-ease-in-out:cubic-bezier(.4,0,.6,1);
  --ds-ease-spring:cubic-bezier(.34,1.56,.64,1);

  /* ─── Z-INDEX layers ─── */
  --ds-z-base:1;
  --ds-z-sticky:50;
  --ds-z-fixed:100;
  --ds-z-dropdown:1000;
  --ds-z-overlay:9000;
  --ds-z-modal:9500;
  --ds-z-notification:9800;
  --ds-z-tour:99000;
  --ds-z-debug:99900;

  /* ─── TEXT contextual ─── */
  --ds-text-on-navy:var(--ds-color-cream);
  --ds-text-on-navy-muted:var(--ds-color-cream-muted);
  --ds-text-on-light:var(--ds-color-ink);
  --ds-text-on-gold:#0A0F1A;
  --ds-text-on-danger:#FFFFFF;

  /* ─── ESPACAMENTO ─── */
  --ds-space-1:4px;
  --ds-space-2:8px;
  --ds-space-3:12px;
  --ds-space-4:16px;
  --ds-space-5:20px;
  --ds-space-6:24px;
  --ds-space-8:32px;
  --ds-space-10:40px;
  --ds-space-12:48px;
  --ds-space-16:64px;

  /* ─── TIPOGRAFIA escala ─── */
  --ds-font-serif:'Cormorant Garamond',Georgia,serif;
  --ds-font-sans:'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --ds-font-mono:'JetBrains Mono',SFMono-Regular,Consolas,monospace;
  --ds-text-xs:.62rem;
  --ds-text-sm:.72rem;
  --ds-text-base:.85rem;
  --ds-text-md:1rem;
  --ds-text-lg:1.2rem;
  --ds-text-xl:1.5rem;
  --ds-text-2xl:1.85rem;
  --ds-text-3xl:2.4rem;
  --ds-letter-tight:-0.01em;
  --ds-letter-normal:0;
  --ds-letter-wide:.05em;
  --ds-letter-eyebrow:.18em;

  /* ─── LAYOUT ─── */
  --ds-sidebar-width:220px;
  --ds-topbar-height:50px;
  --ds-content-max:1600px;
  --ds-card-min:300px;
}

/* ─── SPRINT #234 · Tela de Login refinada padrão JHSF (UI Tier-3) ────── */
/* Refinos sobre .auth-* existente: emblem SVG + tipografia mais elevada +
   border-top gold gradient sutil + footer institucional discreto. Mantém JS
   100% e estrutura HTML preservada. */
.auth-emblem{
  width:54px;height:54px;
  margin-bottom:var(--ds-space-4);
  opacity:0;
  animation:authEmblemIn 1.1s cubic-bezier(.19,1,.22,1) .1s forwards;
  filter:drop-shadow(0 4px 16px rgba(196,163,90,.18));
}
@keyframes authEmblemIn{to{opacity:1;transform:rotate(0)}}
.auth-card{
  background:linear-gradient(135deg,rgba(16,32,54,.38),rgba(8,15,28,.54))!important;
  border:1px solid rgba(196,163,90,.16)!important;
  border-radius:var(--ds-radius-lg)!important;
  backdrop-filter:blur(24px) saturate(1.3);
  -webkit-backdrop-filter:blur(24px) saturate(1.3);
  position:relative;
  box-shadow:0 48px 120px -26px rgba(0,0,0,.6), 0 18px 50px -14px rgba(0,0,0,.42), 0 0 0 1px rgba(196,163,90,.07), inset 0 1px 0 rgba(255,255,255,.05), 0 0 64px -22px rgba(196,163,90,.14)!important;
  padding:40px 38px 32px!important;
  animation:authCardFloat 9s ease-in-out infinite;
  will-change:transform;
}
@keyframes authCardFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.auth-card:hover,.auth-card:focus-within{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.auth-card{animation:none}}
.auth-card::before{
  content:'';position:absolute;top:-1px;left:-1px;right:-1px;height:2px;
  background:linear-gradient(to right,transparent,var(--ds-color-gold-bright,#DCC96E),transparent);
  border-radius:var(--ds-radius-lg) var(--ds-radius-lg) 0 0;
  pointer-events:none;
}
.auth-logo{
  font-family:var(--ds-font-serif,'Cormorant Garamond',serif)!important;
  font-size:1.7rem!important;
  font-weight:300!important;
  letter-spacing:.42em!important;
  color:var(--ds-color-gold,#C4A35A)!important;
  margin-bottom:6px!important;
}
.auth-sub{
  font-family:var(--ds-font-sans,'Outfit',sans-serif)!important;
  font-size:.55rem!important;
  letter-spacing:.45em!important;
  color:rgba(196,163,90,.28)!important;
  margin-bottom:18px!important;
}
.auth-hl{
  font-family:var(--ds-font-serif,'Cormorant Garamond',serif)!important;
  font-size:1.85rem!important;
  font-weight:300!important;
  line-height:1.18!important;
  color:var(--ds-color-cream,#F5F0E8)!important;
  margin-bottom:8px!important;
  letter-spacing:-.005em;
}
.auth-hl em{
  font-style:italic;
  color:var(--ds-color-gold-bright,#DCC96E);
  font-weight:400;
}
.auth-concept{
  font-family:var(--ds-font-sans,'Outfit',sans-serif)!important;
  font-size:.66rem!important;
  color:rgba(245,240,232,.42)!important;
  line-height:1.85!important;
  margin-bottom:26px!important;
  max-width:340px;
}
.auth-concept strong{
  color:rgba(196,163,90,.75);
  font-weight:500;
  letter-spacing:.01em;
}
/* Footer institucional discreto */
.auth-card::after{
  content:'INNCORPORATE LTDA. · INNOVASPHERE GESTORA CENTRAL';
  position:absolute;
  bottom:14px;left:0;right:0;
  text-align:center;
  font-family:var(--ds-font-sans,'Outfit',sans-serif);
  font-size:.5rem;
  letter-spacing:.22em;
  color:rgba(196,163,90,.10);
  pointer-events:none;
}

@media(max-width:480px){
  .auth-emblem{width:42px;height:42px;margin-bottom:12px}
  .auth-logo{font-size:1.3rem!important;letter-spacing:.32em!important}
  .auth-hl{font-size:1.4rem!important}
  .auth-card{padding:36px 24px 32px!important}
  .auth-card::after{font-size:.45rem;bottom:10px}
}
@media(max-height:700px){
  .auth-emblem{width:38px;height:38px;margin-bottom:8px}
  .auth-card{padding:24px 28px 28px!important}
}

/* ─── SPRINT #233 · Toast/Modal/Drawer padrão Aman (UI Tier-2 bundle) ──── */
/* Componentes novos coexistem com legados (toast inline, openMo). Helpers
   _dsToast/_dsModal/_dsDrawer disponíveis. Monkey-patch de toast() torna
   1841 callsites visualmente Aman automaticamente. Tokens --ds-* throughout. */

/* ─── TOAST stack ─── */
.ds-toast-stack{
  position:fixed;
  top:auto;bottom:24px;right:24px;
  z-index:var(--ds-z-notification);
  display:flex;flex-direction:column-reverse;
  gap:var(--ds-space-2);
  max-width:380px;
  pointer-events:none;
}
.ds-toast{
  background:var(--ds-bg-glass);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  color:var(--ds-text-on-navy);
  border:1px solid var(--ds-border-mid);
  border-left:3px solid var(--ds-color-gold);
  border-radius:var(--ds-radius-md);
  padding:var(--ds-space-3) var(--ds-space-4);
  font-family:var(--ds-font-sans);
  font-size:var(--ds-text-sm);
  line-height:1.45;
  box-shadow:var(--ds-shadow-lg);
  transform:translateX(20px);opacity:0;
  transition:all var(--ds-duration-normal) var(--ds-ease-out);
  pointer-events:auto;
  display:flex;align-items:flex-start;gap:var(--ds-space-2);
  cursor:pointer;
  min-width:240px;max-width:380px;
}
.ds-toast.ds-toast-in{transform:translateX(0);opacity:1}
.ds-toast.ds-toast-out{transform:translateX(20px);opacity:0}
.ds-toast-icon{font-size:.95rem;flex-shrink:0;line-height:1;margin-top:1px}
.ds-toast-msg{flex:1;color:var(--ds-text-on-navy)}
.ds-toast-x{
  opacity:.4;font-size:.9rem;line-height:1;cursor:pointer;
  margin-left:var(--ds-space-2);transition:opacity .15s;flex-shrink:0;
}
.ds-toast-x:hover{opacity:.85}
.ds-toast.ds-toast-success{border-left-color:var(--ds-color-ok)}
.ds-toast.ds-toast-warning{border-left-color:var(--ds-color-warn)}
.ds-toast.ds-toast-error{border-left-color:var(--ds-color-danger)}
.ds-toast.ds-toast-info{border-left-color:var(--ds-color-info)}

/* ─── MODAL overlay + card ─── */
.ds-modal-overlay{
  position:fixed;inset:0;
  background:radial-gradient(circle at 50% 50%,var(--ds-bg-overlay),rgba(5,8,12,.96));
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  z-index:var(--ds-z-modal);
  display:flex;align-items:center;justify-content:center;
  padding:var(--ds-space-6);
  opacity:0;
  animation:dsModalFade var(--ds-duration-normal) ease forwards;
}
@keyframes dsModalFade{to{opacity:1}}
.ds-modal-overlay.ds-modal-out{
  animation:dsModalFadeOut var(--ds-duration-fast) ease forwards;
}
@keyframes dsModalFadeOut{to{opacity:0}}
/* X de fechar do ds-modal: estava SEM regra (herdava o contexto e podia esticar).
   Fixo no canto, área de toque 32px — nunca maior que isso. */
.ds-modal-close{position:absolute;top:10px;right:12px;flex:0 0 auto;width:32px;height:32px;max-width:32px;background:none;border:none;color:var(--ds-text-dim,#8a8276);font-size:1.15rem;line-height:1;cursor:pointer;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0;z-index:2}
.ds-modal-close:hover{background:rgba(196,163,90,.1);color:var(--ds-text,#e8e4dc)}
.ds-modal-card{
  background:var(--ds-bg-glass);
  border:1px solid var(--ds-border-mid);
  border-radius:var(--ds-radius-lg);
  max-width:560px;width:100%;
  padding:var(--ds-space-8) var(--ds-space-10);
  box-shadow:var(--ds-shadow-xl),0 0 0 1px var(--ds-border-soft);
  position:relative;
  transform:translateY(20px) scale(.97);opacity:0;
  animation:dsModalIn var(--ds-duration-slow) var(--ds-ease-out) var(--ds-duration-fast) forwards;
  max-height:calc(100vh - 60px);overflow-y:auto;
}
@keyframes dsModalIn{to{transform:none;opacity:1}}
.ds-modal-card::before{
  content:'';position:absolute;top:-1px;left:-1px;right:-1px;height:2px;
  background:linear-gradient(to right,transparent,var(--ds-color-gold),transparent);
  border-radius:var(--ds-radius-lg) var(--ds-radius-lg) 0 0;
}
.ds-modal-eyebrow{
  font-family:var(--ds-font-sans);
  font-size:var(--ds-text-xs);letter-spacing:var(--ds-letter-eyebrow);
  text-transform:uppercase;
  color:var(--ds-color-gold);font-weight:600;
  margin-bottom:var(--ds-space-2);
}
.ds-modal-title{
  font-family:var(--ds-font-serif);
  font-size:var(--ds-text-xl);font-weight:400;
  letter-spacing:var(--ds-letter-tight);
  color:var(--ds-color-cream);
  line-height:1.2;margin-bottom:var(--ds-space-3);
}
.ds-modal-body{
  font-family:var(--ds-font-sans);
  font-size:var(--ds-text-base);
  line-height:1.7;
  color:var(--ds-color-cream-muted);
  margin-bottom:var(--ds-space-6);
}
.ds-modal-actions{
  display:flex;align-items:center;justify-content:flex-end;
  gap:var(--ds-space-2);margin-top:var(--ds-space-4);
}
.ds-modal-actions.ds-modal-actions-between{justify-content:space-between}
.ds-modal-close{
  position:absolute;top:var(--ds-space-3);right:var(--ds-space-3);
  width:30px;height:30px;border-radius:var(--ds-radius-full);
  background:transparent;border:1px solid var(--ds-border-soft);
  color:var(--ds-color-cream-muted);
  cursor:pointer;font-size:1rem;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:all var(--ds-duration-fast) ease;
}
.ds-modal-close:hover{
  background:var(--ds-bg-glass-light);border-color:var(--ds-color-gold);color:var(--ds-color-gold);
}

/* ─── DRAWER (side panel) ─── */
.ds-drawer-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,.52);
  backdrop-filter:blur(2px);
  z-index:var(--ds-z-modal);
  opacity:0;animation:dsModalFade var(--ds-duration-normal) ease forwards;
}
.ds-drawer{
  position:fixed;top:0;bottom:0;
  width:min(420px,90vw);
  background:var(--ds-bg-glass);
  border-left:1px solid var(--ds-border-mid);
  z-index:calc(var(--ds-z-modal) + 1);
  box-shadow:var(--ds-shadow-xl);
  transform:translateX(100%);
  transition:transform var(--ds-duration-slow) var(--ds-ease-out);
  display:flex;flex-direction:column;
}
.ds-drawer.ds-drawer-left{
  left:0;right:auto;
  border-left:none;border-right:1px solid var(--ds-border-mid);
  transform:translateX(-100%);
}
.ds-drawer.ds-drawer-right{right:0;left:auto;transform:translateX(100%)}
.ds-drawer.ds-drawer-open{transform:translateX(0)}
.ds-drawer-header{
  padding:var(--ds-space-5) var(--ds-space-6);
  border-bottom:1px solid var(--ds-border-soft);
  display:flex;align-items:center;justify-content:space-between;gap:var(--ds-space-3);
}
.ds-drawer-title{
  font-family:var(--ds-font-serif);
  font-size:var(--ds-text-lg);font-weight:400;letter-spacing:var(--ds-letter-tight);
  color:var(--ds-color-cream);line-height:1.2;flex:1;
}
.ds-drawer-body{
  flex:1;overflow-y:auto;
  padding:var(--ds-space-5) var(--ds-space-6);
  font-family:var(--ds-font-sans);
  font-size:var(--ds-text-base);
  color:var(--ds-color-cream-muted);
  line-height:1.6;
}
.ds-drawer-footer{
  padding:var(--ds-space-4) var(--ds-space-6);
  border-top:1px solid var(--ds-border-soft);
  background:rgba(13,17,23,.4);
  display:flex;gap:var(--ds-space-2);justify-content:flex-end;
}

/* ─── BOTÕES padronizados (reutilizáveis em modal/drawer) ─── */
.ds-btn{
  padding:var(--ds-space-3) var(--ds-space-5);
  border-radius:var(--ds-radius-sm);
  border:1px solid var(--ds-border-mid);
  background:transparent;color:var(--ds-color-gold);
  font-family:var(--ds-font-sans);
  font-size:var(--ds-text-xs);font-weight:500;
  letter-spacing:var(--ds-letter-wide);text-transform:uppercase;
  cursor:pointer;
  transition:all var(--ds-duration-normal) var(--ds-ease-out);
}
.ds-btn:hover{background:var(--ds-bg-glass-light);border-color:var(--ds-color-gold);transform:translateY(-1px)}
.ds-btn:active{transform:translateY(0) scale(.97)}
.ds-btn-primary{
  background:linear-gradient(135deg,var(--ds-color-gold),var(--ds-color-gold-deep));
  color:var(--ds-text-on-gold);border:none;
  box-shadow:var(--ds-shadow-glow-gold);
}
.ds-btn-primary:hover{box-shadow:0 6px 20px rgba(196,163,90,.32);transform:translateY(-1px)}
.ds-btn-danger{
  background:transparent;color:var(--ds-color-danger-soft);
  border-color:rgba(224,122,110,.30);
}
.ds-btn-danger:hover{background:rgba(224,122,110,.08);border-color:var(--ds-color-danger-soft)}
.ds-btn-ghost{border-color:transparent;background:transparent}
.ds-btn-ghost:hover{background:var(--ds-bg-glass-light);border-color:var(--ds-border-mid)}

/* Light mode coerência */
body.light-mode .ds-toast{
  background:rgba(255,255,255,.96);
  color:var(--ds-color-ink);
  border-color:rgba(27,58,92,.10);
}
body.light-mode .ds-toast-msg{color:var(--ds-color-ink)}
body.light-mode .ds-modal-card{
  background:#FFFFFF;
  border-color:rgba(27,58,92,.10);
}
body.light-mode .ds-modal-title{color:var(--ds-color-ink)}
body.light-mode .ds-modal-body{color:var(--ds-color-ink-soft)}
body.light-mode .ds-drawer{background:#FFFFFF;border-color:rgba(27,58,92,.10)}
body.light-mode .ds-drawer-title{color:var(--ds-color-ink)}
body.light-mode .ds-drawer-body{color:var(--ds-color-ink-soft)}

@media(max-width:768px){
  .ds-toast-stack{bottom:16px;right:12px;left:12px;max-width:none}
  .ds-toast{min-width:auto;max-width:none}
  .ds-modal-card{padding:var(--ds-space-6) var(--ds-space-5);max-width:92vw}
  .ds-drawer{width:88vw}
}

/* ─── SPRINT #232 · Loading + Empty states Aman (UX Tier-2 bundle) ─────── */
/* Helpers _renderSkeleton(target, type) e _renderEmpty(target, opts) usam
   estes estilos. Tokens --ds-* (Design System v1, SPRINT #229) por toda parte. */
.ds-skel{
  background:linear-gradient(90deg,
    var(--ds-bg-glass-light) 0%,
    var(--ds-border-soft) 50%,
    var(--ds-bg-glass-light) 100%);
  background-size:1200px 100%;
  animation:dsSkelShimmer 1.6s infinite ease-in-out;
  border-radius:var(--ds-radius-sm);
  display:block;
}
@keyframes dsSkelShimmer{
  0%{background-position:-600px 0}
  100%{background-position:600px 0}
}
.ds-skel-row{display:flex;gap:var(--ds-space-3);margin-bottom:var(--ds-space-3)}
.ds-skel-col{display:flex;flex-direction:column;gap:var(--ds-space-2);flex:1}
.ds-skel-line{height:14px;border-radius:var(--ds-radius-sm)}
.ds-skel-title{height:24px;width:45%;border-radius:var(--ds-radius-sm);margin-bottom:var(--ds-space-4)}
.ds-skel-eyebrow{height:10px;width:120px;border-radius:var(--ds-radius-xs);margin-bottom:var(--ds-space-2)}
.ds-skel-kpi{height:90px;border-radius:var(--ds-radius-md);flex:1}
.ds-skel-card{height:140px;border-radius:var(--ds-radius-lg);margin-bottom:var(--ds-space-3)}
.ds-skel-chart{height:280px;border-radius:var(--ds-radius-lg);margin-bottom:var(--ds-space-4)}
.ds-skel-circle{width:48px;height:48px;border-radius:var(--ds-radius-full)}
.ds-skel-table{height:48px;margin-bottom:var(--ds-space-2);border-radius:var(--ds-radius-sm)}
.ds-skel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--ds-space-3);margin-bottom:var(--ds-space-4)}
.ds-skel-wrap{padding:var(--ds-space-6) var(--ds-space-4)}

/* ─── EMPTY STATES (padrão Aman: silêncio + sugestão) ─── */
.ds-empty{
  padding:var(--ds-space-12) var(--ds-space-6);
  text-align:center;
  color:var(--ds-color-cream-muted);
  font-family:var(--ds-font-sans);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--ds-space-3);
  opacity:0;
  animation:dsEmptyIn .5s var(--ds-ease-out) forwards;
}
@keyframes dsEmptyIn{to{opacity:1;transform:translateY(0)}}
.ds-empty-icon{
  font-size:2.4rem;
  opacity:.45;
  filter:grayscale(.3);
  margin-bottom:var(--ds-space-2);
}
.ds-empty-title{
  font-family:var(--ds-font-serif);
  font-size:var(--ds-text-lg);
  font-weight:400;
  font-style:italic;
  color:var(--ds-color-cream);
  letter-spacing:var(--ds-letter-tight);
  line-height:1.3;
  max-width:480px;
}
.ds-empty-msg{
  font-size:var(--ds-text-sm);
  color:var(--ds-color-cream-muted);
  line-height:1.7;
  max-width:440px;
  font-weight:300;
}
.ds-empty-cta{
  margin-top:var(--ds-space-4);
  padding:var(--ds-space-3) var(--ds-space-6);
  background:linear-gradient(135deg,var(--ds-color-gold),var(--ds-color-gold-deep));
  color:var(--ds-text-on-gold);
  border:none;
  border-radius:var(--ds-radius-sm);
  font-family:var(--ds-font-sans);
  font-size:var(--ds-text-xs);
  font-weight:600;
  letter-spacing:var(--ds-letter-wide);
  text-transform:uppercase;
  cursor:pointer;
  transition:all var(--ds-duration-normal) var(--ds-ease-out);
  box-shadow:var(--ds-shadow-glow-gold);
}
.ds-empty-cta:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(196,163,90,.32)}
.ds-empty-cta:active{transform:translateY(0) scale(.97)}
.ds-empty-cta-secondary{
  background:transparent;
  color:var(--ds-color-gold);
  border:1px solid var(--ds-border-mid);
  box-shadow:none;
}
.ds-empty-cta-secondary:hover{background:var(--ds-bg-glass-light);border-color:var(--ds-color-gold)}

/* Variantes contextuais */
.ds-empty.ds-empty-error{color:var(--ds-color-danger-soft)}
.ds-empty.ds-empty-error .ds-empty-icon{filter:none;opacity:.7}
.ds-empty.ds-empty-error .ds-empty-title{color:var(--ds-color-danger-soft);font-style:normal}
.ds-empty.ds-empty-success .ds-empty-icon{opacity:.8}
.ds-empty.ds-empty-success .ds-empty-title{color:var(--ds-color-ok-soft)}

/* Light mode coerência */
body.light-mode .ds-skel{
  background:linear-gradient(90deg,
    rgba(27,58,92,.04) 0%,
    rgba(27,58,92,.10) 50%,
    rgba(27,58,92,.04) 100%);
  background-size:1200px 100%;
}
body.light-mode .ds-empty{color:var(--ds-color-ink-muted)}
body.light-mode .ds-empty-title{color:var(--ds-color-ink)}
body.light-mode .ds-empty-msg{color:var(--ds-color-ink-soft)}

@media(max-width:768px){
  .ds-empty{padding:var(--ds-space-8) var(--ds-space-3)}
  .ds-empty-icon{font-size:1.8rem}
  .ds-empty-title{font-size:var(--ds-text-md)}
  .ds-empty-msg{font-size:var(--ds-text-xs)}
  .ds-skel-grid{grid-template-columns:repeat(2,1fr)}
}

/* ─── SPRINT #227 · Mobile sidebar + hamburger funcional (Tier-1 UX) ──── */
/* O CSS mobile original aplicava em .sidebar mas o elemento real é .sb (linha 3658).
   Aplicação correta + animação suave + overlay funcional. */
@media(max-width:768px){
  nav.sb{
    position:fixed!important;
    top:0!important;
    left:0!important;
    bottom:0!important;
    width:260px!important;
    transform:translateX(-100%);
    transition:transform .3s cubic-bezier(.19,1,.22,1);
    z-index:9100;
    box-shadow:none;
  }
  nav.sb.sb-open{
    transform:translateX(0);
    box-shadow:0 12px 48px rgba(0,0,0,.55);
  }
  .topbar{
    left:0!important;
    padding-left:60px!important;  /* espaço pro hamburger */
  }
  .mn{
    margin-left:0!important;
    padding:18px 16px 80px!important;
  }
  .mob-hamburger{
    display:flex!important;
    top:9px!important;
    background:rgba(15,36,64,.92)!important;
    color:var(--gold,#C4A35A)!important;
    border:1px solid rgba(196,163,90,.25)!important;
    backdrop-filter:blur(12px);
  }
  .mob-overlay.active{
    display:block;
    z-index:9050;
    background:rgba(0,0,0,.62);
    backdrop-filter:blur(2px);
  }
  /* Topbar elementos secundários colapsam em mobile (manter Hub + Sair + ❓) */
  .tb-r > div.i18n-sel,
  .tb-r > div.ww,
  .tb-r > div#themeToggle,
  .tb-r > div#tbGDrive,
  .tb-r > div#tbTestBtn,
  .tb-r > button[onclick*="_enterCanteiroMode"],
  .tb-r > button[onclick*="isfHardRefresh"],
  .tb-r > div.sentry-pill{
    display:none!important;
  }
  /* Buscar vira só ícone */
  .tb-r > div[onclick*="openCmdPalette"]{
    padding:4px 8px!important;
    font-size:0!important;
  }
  .tb-r > div[onclick*="openCmdPalette"] kbd{display:none!important}
  .tb-r > div[onclick*="openCmdPalette"]::before{
    content:'🔍';font-size:.85rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SPRINT #308 · CANTEIRO MODE PROTECTION · esconde TODA decoração não-essencial
   Eng. residente em campo precisa de zero distração · apenas botões grandes
   ═══════════════════════════════════════════════════════════════════════════ */
body.canteiro-mode .mob-tabs,
body.canteiro-mode #module-fab,
body.canteiro-mode #mobile-field-fab,
body.canteiro-mode #voice-fab,
body.canteiro-mode #print-fab,
body.canteiro-mode #scroll-to-top,
body.canteiro-mode .ptr-indicator,
body.canteiro-mode #ai-suggestion-toast,
body.canteiro-mode .wellness-toast,
body.canteiro-mode #presence-indicator,
body.canteiro-mode #streak-pill,
body.canteiro-mode .gm-ticker,
body.canteiro-mode #ispSentryLiveWidget,
body.canteiro-mode .dash-switcher-bar,
body.canteiro-mode .cross-module-nav,
body.canteiro-mode .hub-unico-card,
body.canteiro-mode .essencial-dia,
body.canteiro-mode [data-rich-visuals="1"],
body.canteiro-mode [data-audit-block="1"]{display:none !important}

/* ═══════════════════════════════════════════════════════════════════════════
   SPRINT #284-#288 · WCAG OVERHAUL + TOKEN HARDENING + ENGAJAMENTO PREMIUM
   Resolve 1380 contraste + 552 touch violations + 25 sobreposições UX.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── TOKEN OVERRIDE GLOBAL · garante contraste WCAG AA mínimo ─── */
body{
  --t3-light: #5F6B78;          /* era #718096/#7A7A7A · sobe ratio 4.30 → 6.7 */
  --t3-dark:  #8F8474;          /* era #5A5248 · sobe ratio dark bg pra 5.0 */
  --kpi-on-light: #1B3A5C;      /* KPI .st-v sobre branco força navy */
  --pill-active-bg: linear-gradient(135deg,#C4A35A,#B89D5E);
  --pill-active-text: #0A0F1A;
  --pill-inactive-text: rgba(245,240,232,.85);
}
body.light-mode,body[data-theme="light"]{ --t3: var(--t3-light) !important; }
[data-theme="dark"],body:not(.light-mode):not([data-theme="light"]){ --t3: var(--t3-dark) !important; }

/* ─── SPRINT #285 · .btn-g defensivo · garante contraste forte ─── */
.btn.btn-g,button.btn-g{
  /* Sobre gold gradient: navy text (ratio ~9 WCAG AAA) */
  background:linear-gradient(135deg,#C4A35A,#A89048) !important;
  color:#0A0F1A !important;
  font-weight:700 !important;
  letter-spacing:.04em !important;
  text-shadow:0 1px 0 rgba(255,255,255,.15);
  border:none !important;
  min-height:38px;
  padding:9px 18px !important;
  border-radius:8px !important;
  transition:transform .18s ease,box-shadow .22s ease;
  box-shadow:0 4px 14px -4px rgba(196,163,90,.45),0 1px 2px rgba(0,0,0,.18);
}
.btn.btn-g:hover,button.btn-g:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 22px -6px rgba(196,163,90,.55),0 2px 4px rgba(0,0,0,.22);
}
.btn.btn-g:active,button.btn-g:active{ transform:translateY(0); }

.btn.btn-o,button.btn-o{
  background:transparent !important;
  color:var(--gold,#C4A35A) !important;
  border:1px solid rgba(196,163,90,.32) !important;
  font-weight:600 !important;
  min-height:38px;
  padding:9px 16px !important;
  border-radius:8px !important;
  transition:all .18s ease;
}
.btn.btn-o:hover,button.btn-o:hover{
  background:rgba(196,163,90,.08) !important;
  border-color:var(--gold,#C4A35A) !important;
  transform:translateY(-1px);
}

.btn.btn-r,button.btn-r,.btn-danger{
  background:linear-gradient(135deg,#C62828,#9A1F1F) !important;
  color:#FFFFFF !important;
  font-weight:700 !important;
  border:none !important;
  min-height:38px;
}

/* ─── SPRINT #286 · KPI .st-v contraste · força navy quando bg claro ─── */
.cd[style*="background:#FF"] .st-v,
.cd[style*="background:#fff"] .st-v,
.cd[style*="background: white"] .st-v,
.cd[style*="background:white"] .st-v,
.cd[style*="background: rgba(255"] .st-v,
.cd[style*="background:rgba(255"] .st-v,
[style*="background:#FFFFFF"] .st-v,
[style*="background:#fff"] .st-v{
  color:var(--kpi-on-light) !important;
}

/* ─── SPRINT #287 · touch targets · pílulas e .kc ≥40px ─── */
._hpill{min-height:40px !important;padding:10px 18px !important;font-size:.66rem !important;letter-spacing:.02em}
.crmtb,.wa-tab,.crm-tabs button{min-height:38px !important;padding:9px 14px !important;letter-spacing:.02em}
.kc{min-height:44px !important;padding:11px 14px !important;font-size:.66rem !important}

/* ─── SPRINT #288 · força contraste em badges/chips dourados ─── */
.bdg.bgo,.bgo,.chip-gold,[class*="bgo"]{
  color:#0A0F1A !important;
  font-weight:700 !important;
  letter-spacing:.05em;
}

/* ═══════════════════════════════════════════════════════════════════
   SPRINT #289 · NOVIDADES PREMIUM · 6 ideias dentro doutrina Aman/JHSF
   ═══════════════════════════════════════════════════════════════════ */

/* IDEIA 1 · AMBIENT MODE · view executiva zen (zero clutter, charts gigantes) */
.ambient-mode .topbar,.ambient-mode .sb,.ambient-mode .mob-tabs,
.ambient-mode .gm-ticker,.ambient-mode #ispSentryLiveWidget,
.ambient-mode .mob-hamburger,.ambient-mode .module-fab,
.ambient-mode .scroll-to-top{display:none !important}
.ambient-mode .mn{padding:32px 48px !important;margin-left:0 !important}
.ambient-mode .pn .stats{grid-template-columns:repeat(auto-fit,minmax(220px,1fr)) !important;gap:18px}
.ambient-mode .st{padding:24px 28px !important;border-radius:14px}
.ambient-mode .st-v{font-size:2.6rem !important;letter-spacing:-.02em}
.ambient-mode .st-l{font-size:.65rem !important;letter-spacing:.16em}
.ambient-mode .cd{margin-bottom:24px}
.ambient-mode .cd-h h3{font-size:1.1rem !important;letter-spacing:.02em}
.ambient-mode .chb,.ambient-mode canvas{height:340px !important;max-height:340px !important}
.ambient-exit-fab{position:fixed;top:20px;right:20px;width:42px;height:42px;border-radius:50%;background:rgba(10,22,40,.92);border:1px solid rgba(196,163,90,.4);color:var(--gold);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.1rem;z-index:9999;backdrop-filter:blur(12px);box-shadow:0 4px 14px rgba(0,0,0,.4)}

/* IDEIA 2 · WELLNESS PROMPT · toast amigável a cada 90min */
.wellness-toast{
  position:fixed;top:90px;right:20px;
  max-width:320px;padding:14px 18px;
  background:linear-gradient(135deg,rgba(13,27,42,.96),rgba(20,40,65,.96));
  border:1px solid rgba(196,163,90,.25);border-left:3px solid var(--gold);
  border-radius:12px;backdrop-filter:blur(16px);
  box-shadow:0 12px 32px rgba(0,0,0,.45);
  z-index:9990;
  animation:wellnessIn .5s cubic-bezier(.22,1,.36,1) both;
  font-family:var(--sn);
}
@keyframes wellnessIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}
.wellness-toast-title{font-family:var(--sf);font-size:.85rem;color:var(--gold);font-weight:400;margin-bottom:4px;letter-spacing:.02em}
.wellness-toast-body{font-size:.65rem;color:rgba(245,240,232,.78);line-height:1.55;margin-bottom:10px}
.wellness-toast-actions{display:flex;gap:6px}
.wellness-toast-actions button{flex:1;padding:7px 10px;font-size:.58rem;border-radius:6px;cursor:pointer;border:1px solid rgba(196,163,90,.2);background:transparent;color:rgba(245,240,232,.8);letter-spacing:.04em;transition:all .15s}
.wellness-toast-actions button.primary{background:linear-gradient(135deg,#C4A35A,#B89D5E);color:#0A0F1A;border:0;font-weight:700}
.wellness-toast-actions button:hover{background:rgba(196,163,90,.1)}
.wellness-toast-actions button.primary:hover{box-shadow:0 4px 12px rgba(196,163,90,.4)}

/* IDEIA 3 · STREAK BADGE · indicador discreto no topbar */
.streak-badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:4px 10px;border-radius:12px;
  background:linear-gradient(135deg,rgba(196,163,90,.18),rgba(196,163,90,.06));
  border:1px solid rgba(196,163,90,.22);
  font-size:.6rem;font-weight:700;color:var(--gold);
  letter-spacing:.04em;
}
.streak-badge .streak-flame{font-size:.85rem;line-height:1}
.streak-badge .streak-count{font-family:var(--sf);font-size:.7rem;font-weight:400}

/* IDEIA 4 · ESSENCIAL DO DIA · card destacado no topo do hub/dashboard */
.essencial-dia{
  background:linear-gradient(135deg,rgba(196,163,90,.04),rgba(27,58,92,.06));
  border:1px solid rgba(196,163,90,.16);border-left:3px solid var(--gold);
  border-radius:14px;padding:18px 22px;margin-bottom:16px;
  animation:essencialIn .55s cubic-bezier(.22,1,.36,1) both;animation-delay:.15s;
}
@keyframes essencialIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.essencial-dia-h{font-size:.55rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:6px;display:flex;justify-content:space-between;align-items:center}
.essencial-dia-title{font-family:var(--sf);font-size:1.1rem;font-weight:400;color:var(--t1,var(--txt));line-height:1.3;margin-bottom:14px;letter-spacing:.01em}
.essencial-dia-actions{display:flex;flex-direction:column;gap:8px}
.essencial-acao{
  display:flex;align-items:center;gap:12px;
  padding:11px 14px;border-radius:10px;
  background:rgba(196,163,90,.04);border:1px solid rgba(196,163,90,.08);
  cursor:pointer;transition:all .2s cubic-bezier(.22,1,.36,1);
  text-align:left;width:100%;
}
.essencial-acao:hover{background:rgba(196,163,90,.1);border-color:rgba(196,163,90,.22);transform:translateX(4px)}
.essencial-acao-ic{font-size:1.15rem;width:28px;flex-shrink:0;text-align:center}
.essencial-acao-content{flex:1;min-width:0}
.essencial-acao-title{font-size:.7rem;font-weight:500;color:var(--t1,var(--txt));line-height:1.4;letter-spacing:.01em}
.essencial-acao-sub{font-size:.55rem;color:var(--t3);margin-top:2px;letter-spacing:.02em}
.essencial-acao-eta{font-size:.5rem;color:var(--gold);font-weight:700;letter-spacing:.12em;text-transform:uppercase;flex-shrink:0;padding-left:10px;border-left:1px solid rgba(196,163,90,.12)}
.essencial-acao-arrow{font-size:.85rem;color:rgba(196,163,90,.5);flex-shrink:0;transition:transform .2s ease}
.essencial-acao:hover .essencial-acao-arrow{transform:translateX(4px);color:var(--gold)}

/* IDEIA 5 · STATUS MACRO PROJETO · semáforo rápido */
.status-macro{
  display:flex;align-items:center;gap:14px;
  padding:14px 18px;border-radius:12px;
  background:rgba(10,25,41,.04);
  border:1px solid rgba(196,163,90,.08);
  margin-bottom:14px;
}
.status-macro-ring{position:relative;width:56px;height:56px;flex-shrink:0}
.status-macro-text{flex:1;min-width:0}
.status-macro-label{font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;color:var(--t3);margin-bottom:3px}
.status-macro-value{font-family:var(--sf);font-size:.95rem;font-weight:400;color:var(--t1,var(--txt));letter-spacing:.01em}
.status-macro-trend{font-size:.6rem;color:var(--ok);font-weight:600;margin-left:8px}
.status-macro-trend.down{color:var(--red)}

/* IDEIA 6 · QUICK-PIN sidebar · favoritar módulos */
.sb-pin{
  position:absolute;top:50%;right:6px;transform:translateY(-50%);
  width:22px;height:22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.65rem;color:rgba(196,163,90,.32);
  cursor:pointer;opacity:0;transition:opacity .15s,color .15s;
}
.si:hover .sb-pin{opacity:1}
.sb-pin:hover{color:var(--gold)}
.sb-pin.pinned{opacity:1;color:var(--gold)}

/* ═══════════════════════════════════════════════════════════════════
   SPRINT #279 · LIGHT MODE MOBILE REFINEMENT · contraste + readability
   ═══════════════════════════════════════════════════════════════════ */
@media(max-width:767px){
  body.light-mode{
    /* Sufficient contrast on mobile · slight tint warmth */
    background:#F5F3EE!important;
  }
  body.light-mode .topbar{background:rgba(255,255,255,.95)!important;border-bottom:1px solid rgba(27,58,92,.06)}
  body.light-mode .mob-hamburger{background:rgba(255,255,255,.95)!important;border-color:rgba(27,58,92,.12)!important;color:#1B3A5C!important;box-shadow:0 4px 14px rgba(27,58,92,.15)!important}
  body.light-mode .mob-tabs{background:rgba(255,255,255,.97)!important;border-top-color:rgba(27,58,92,.08)!important;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
  body.light-mode .mt{color:rgba(74,85,104,.5)!important}
  body.light-mode .mt.on{color:#1B3A5C!important}
  body.light-mode .mt.on::before{background:linear-gradient(90deg,transparent,#1B3A5C,transparent)!important}
  body.light-mode .pn{background:transparent!important}
  body.light-mode .st{background:#FFFFFF!important;border-color:rgba(27,58,92,.05)!important;box-shadow:0 1px 6px rgba(27,58,92,.04)!important}
  body.light-mode .st-v{color:#1B3A5C!important}
  body.light-mode .st-l{color:rgba(74,85,104,.6)!important}
  body.light-mode .cd{background:#FFFFFF!important;border-color:rgba(27,58,92,.05)!important;box-shadow:0 2px 10px rgba(27,58,92,.04)!important}
  body.light-mode .cd-h{background:linear-gradient(135deg,rgba(196,163,90,.04),transparent)!important;border-bottom-color:rgba(27,58,92,.05)!important}
  body.light-mode .cd-h h3{color:#1B3A5C!important}
  body.light-mode .pg-hero{background:linear-gradient(135deg,#FFFFFF,#FAF8F3)!important;border:1px solid rgba(196,163,90,.1)!important}
  body.light-mode [data-rich-visuals="1"] .cd{background:#FFFFFF!important}
  body.light-mode .modal{background:#FFFFFF!important;border-color:rgba(27,58,92,.1)!important}
  body.light-mode .modal-h{border-bottom-color:rgba(27,58,92,.06)!important}
  body.light-mode .modal-h h3{color:#1B3A5C!important}
  body.light-mode .module-fab{box-shadow:0 8px 22px rgba(196,163,90,.5),0 2px 6px rgba(27,58,92,.2)!important}
  body.light-mode .scroll-to-top{background:rgba(255,255,255,.95)!important;border-color:rgba(196,163,90,.4)!important;color:#9A7B2E!important;box-shadow:0 4px 14px rgba(27,58,92,.18)!important}
  body.light-mode .audit-fade-in,body.light-mode .audit-rich-in{filter:none}
  body.light-mode .audit-heatmap-cell{fill:rgba(154,123,46,var(--intensity,.5))!important}
  body.light-mode .isp-skeleton{background:linear-gradient(90deg,rgba(27,58,92,.04) 0%,rgba(27,58,92,.10) 50%,rgba(27,58,92,.04) 100%)!important;background-size:200% 100%!important}
}

/* ═══════════════════════════════════════════════════════════════════
   SPRINT #277 · MOBILE NATIVE EXPERIENCE · bottom-sheet modais + native nav
   ═══════════════════════════════════════════════════════════════════ */

/* Universal modal → bottom-sheet em mobile com handle bar + slide-up */
@media(max-width:767px){
  /* Overlay backdrop alinhado bottom */
  .mo{
    align-items:flex-end!important;
    padding:0!important;
    -webkit-backdrop-filter:blur(8px) saturate(1.2)!important;
    backdrop-filter:blur(8px) saturate(1.2)!important;
  }
  .mo.show .modal{
    animation:modalSheetUp .42s cubic-bezier(.22,1,.36,1) both!important;
  }
  /* Modal como bottom-sheet · cantos arredondados topo · drag handle visual */
  .modal{
    width:100%!important;max-width:100%!important;
    margin:0!important;
    border-radius:18px 18px 0 0!important;
    border-top:3px solid var(--gold,#C4A35A)!important;
    border-bottom:none!important;border-left:none!important;border-right:none!important;
    max-height:92vh!important;
    overflow:hidden!important;
    display:flex;flex-direction:column;
    box-shadow:0 -16px 56px rgba(0,0,0,.55)!important;
  }
  .modal::after{
    content:'';position:absolute;top:8px;left:50%;transform:translateX(-50%);
    width:40px;height:4px;border-radius:2px;
    background:rgba(196,163,90,.3);z-index:2;pointer-events:none;
  }
  .modal-h{
    padding-top:18px!important;flex-shrink:0;
    border-bottom:1px solid rgba(196,163,90,.08)!important;
  }
  .modal-b{
    flex:1!important;overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    max-height:none!important;
    padding-bottom:max(20px,env(safe-area-inset-bottom,20px))!important;
  }
  .modal-w{max-width:100%!important}
}
@keyframes modalSheetUp{from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}

/* Native bottom nav · 5 tabs primárias com ícones grandes + label */
@media(max-width:860px){
  .mob-tabs{
    display:flex!important;
    position:fixed!important;bottom:0!important;left:0!important;right:0!important;
    background:rgba(10,22,40,.97)!important;
    -webkit-backdrop-filter:blur(20px) saturate(1.5)!important;
    backdrop-filter:blur(20px) saturate(1.5)!important;
    border-top:1px solid rgba(196,163,90,.12)!important;
    z-index:100!important;
    justify-content:space-around!important;
    padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px))!important;
    overflow:visible!important;
    box-shadow:0 -4px 24px rgba(0,0,0,.4);
  }
  .mt{
    display:flex!important;flex-direction:column!important;
    align-items:center!important;justify-content:center!important;
    padding:6px 8px!important;
    min-width:0!important;flex:1!important;
    font-size:.5rem!important;font-weight:600!important;letter-spacing:.06em!important;
    text-transform:uppercase!important;color:rgba(232,228,220,.45)!important;
    cursor:pointer!important;gap:3px!important;
    transition:all .2s cubic-bezier(.19,1,.22,1)!important;
    -webkit-tap-highlight-color:transparent!important;
    border-radius:10px;
    position:relative;
  }
  .mt .ic{
    font-size:1.25rem!important;line-height:1!important;
    transition:transform .2s ease;
    filter:grayscale(.3) opacity(.7);
  }
  .mt.on{
    color:var(--gold,#C4A35A)!important;
  }
  .mt.on .ic{
    filter:none;
    transform:translateY(-2px);
  }
  .mt.on::before{
    content:'';position:absolute;top:0;left:25%;right:25%;height:2px;
    background:linear-gradient(90deg,transparent,var(--gold,#C4A35A),transparent);
    border-radius:0 0 2px 2px;
  }
  .mt:active{transform:scale(.92)}
  /* Hide os items > 5 (mantém 5 native nav) */
  .mob-tabs .mt:nth-child(n+6){display:none!important}
}

/* Skeleton shimmer reusable */
.isp-skeleton{
  display:block;background:linear-gradient(90deg,rgba(196,163,90,.04) 0%,rgba(196,163,90,.12) 50%,rgba(196,163,90,.04) 100%);
  background-size:200% 100%;
  animation:ispShimmer 1.4s ease-in-out infinite;
  border-radius:6px;
}
@keyframes ispShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.isp-skel-line{height:12px;margin-bottom:8px}
.isp-skel-line.lg{height:24px}
.isp-skel-line.sm{height:8px}
.isp-skel-card{height:100px;margin-bottom:10px;border-radius:10px}
.isp-skel-kpi{height:74px;margin-bottom:6px;border-radius:10px}

/* Animated KPI counter ticks up */
.st-v[data-target]{
  transition:color .3s ease;
}
@keyframes kpiCountIn{
  from{opacity:0;transform:translateY(6px) scale(.96)}
  to{opacity:1;transform:none}
}
.st.kpi-animated .st-v{animation:kpiCountIn .55s cubic-bezier(.19,1,.22,1) both;animation-delay:var(--kpi-delay,0s)}

/* Glass morphism card variant */
.glass-card{
  background:rgba(15,36,64,.55)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.4)!important;
  backdrop-filter:blur(18px) saturate(1.4)!important;
  border:1px solid rgba(196,163,90,.18)!important;
  box-shadow:0 8px 32px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.04)!important;
}

/* Sticky panel header (collapse on scroll) */
.pn .sticky-header{
  position:sticky;top:0;z-index:50;
  background:linear-gradient(180deg,var(--bg,#0A0F1A) 80%,transparent);
  padding-top:8px;padding-bottom:8px;
  transition:padding .2s ease,box-shadow .2s ease;
}
.pn .sticky-header.shrunk{
  padding-top:4px;padding-bottom:4px;
  box-shadow:0 2px 12px rgba(0,0,0,.3);
}

/* FAB contextual por módulo · canto inferior direito */
.module-fab{
  position:fixed;bottom:max(82px,calc(env(safe-area-inset-bottom,0px) + 72px));
  right:18px;
  width:54px;height:54px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold,#C4A35A),var(--gm,#B89D5E));
  color:#0A0F1A;font-size:1.4rem;font-weight:700;
  border:none;cursor:pointer;
  display:none;align-items:center;justify-content:center;
  box-shadow:0 8px 24px rgba(196,163,90,.4),0 2px 6px rgba(0,0,0,.3);
  z-index:90;
  transition:transform .22s cubic-bezier(.19,1,.22,1),box-shadow .22s ease;
  -webkit-tap-highlight-color:transparent;
}
.module-fab.visible{display:flex;animation:fabIn .4s cubic-bezier(.19,1,.22,1) both}
.module-fab:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 12px 28px rgba(196,163,90,.55)}
.module-fab:active{transform:scale(.92)}
@keyframes fabIn{from{transform:translateY(20px) scale(.7);opacity:0}to{transform:none;opacity:1}}
.module-fab .fab-label{
  position:absolute;right:64px;top:50%;transform:translateY(-50%);
  background:rgba(10,22,40,.95);color:var(--gold,#C4A35A);
  padding:6px 12px;border-radius:8px;
  font-size:.6rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  white-space:nowrap;
  opacity:0;pointer-events:none;
  transition:opacity .15s ease,transform .15s ease;
  box-shadow:0 4px 12px rgba(0,0,0,.3);
}
.module-fab:hover .fab-label,.module-fab:focus-visible .fab-label{opacity:1;transform:translateY(-50%) translateX(-4px)}
@media(min-width:860px){.module-fab{display:none!important}}

/* Pull-to-refresh indicator */
.ptr-indicator{
  position:fixed;top:-60px;left:50%;transform:translateX(-50%);
  width:40px;height:40px;border-radius:50%;
  background:rgba(13,27,42,.95);border:1px solid rgba(196,163,90,.3);
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;color:var(--gold,#C4A35A);
  z-index:200;pointer-events:none;
  transition:top .2s ease,transform .2s ease;
}
.ptr-indicator.pulling{top:18px}
.ptr-indicator.refreshing{top:18px}
.ptr-indicator.refreshing svg{animation:ptrSpin 1s linear infinite}
@keyframes ptrSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* ═══════════════════════════════════════════════════════════════════
   SPRINT #276 · MOBILE POLISH PREMIUM · onboarding bottom-sheet + safe-area + smooth
   ═══════════════════════════════════════════════════════════════════ */

/* Safe-area-inset · respeita notch iPhone X+ em todos os elementos fixos */
@supports(padding:max(0px)){
  .topbar{padding-top:max(8px,env(safe-area-inset-top,8px))!important}
  .mob-tabs{padding-bottom:max(6px,env(safe-area-inset-bottom,6px))!important}
  .gm-ticker{padding-bottom:env(safe-area-inset-bottom,0px)!important}
  .mob-hamburger{top:max(8px,calc(env(safe-area-inset-top,0px) + 4px))!important}
  .mob-overlay{padding-top:env(safe-area-inset-top,0px)}
}

/* Smooth scroll global · momentum + behavior */
html{scroll-behavior:smooth;-webkit-overflow-scrolling:touch}
body{-webkit-overflow-scrolling:touch;-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* Touch action: improve click responsiveness */
button,a,.btn,.kc,.st,[role="button"]{touch-action:manipulation;-webkit-tap-highlight-color:rgba(196,163,90,.1)}

/* Phone <=767px: onboarding como bottom-sheet (não modal centralizado) */
@media(max-width:767px){
  .onb-overlay{
    align-items:flex-end!important;
    padding:0!important;
    backdrop-filter:blur(6px)!important;-webkit-backdrop-filter:blur(6px)!important;
  }
  .onb-card{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:20px 18px max(20px,env(safe-area-inset-bottom,20px))!important;
    border-radius:18px 18px 0 0!important;
    border-bottom:none!important;
    box-shadow:0 -12px 48px rgba(0,0,0,.55)!important;
    max-height:85vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
    animation:onbSheetUp .4s cubic-bezier(.22,1,.36,1) both!important;
  }
  .onb-card::after{
    content:'';position:absolute;top:8px;left:50%;transform:translateX(-50%);
    width:36px;height:4px;border-radius:2px;background:rgba(196,163,90,.25);
  }
  .onb-eyebrow{margin-top:8px!important;font-size:.5rem!important}
  .onb-title{font-size:1.1rem!important;line-height:1.25!important}
  .onb-tagline{font-size:.75rem!important;margin-bottom:14px!important}
  .onb-body{font-size:.7rem!important;line-height:1.6!important;margin-bottom:16px!important}
  .onb-body li{font-size:.66rem!important;padding-left:18px!important}
  .onb-actions{flex-direction:column-reverse!important;gap:8px!important}
  .onb-nav{width:100%;justify-content:space-between!important}
  .onb-btn{flex:1;padding:11px 16px!important;font-size:.62rem!important}
  .onb-skip{width:100%;text-align:center;padding:8px 0!important}
}
@keyframes onbSheetUp{from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}

/* KPI Anomaly toasts: contidos + sutilis em mobile */
@media(max-width:767px){
  .isp-toast,.toast-anomaly,[class*="toast-critical"]{
    max-width:calc(100% - 32px)!important;
    left:16px!important;right:16px!important;
    font-size:.62rem!important;padding:10px 12px!important;
    border-radius:10px!important;
    bottom:max(70px,calc(env(safe-area-inset-bottom,0px) + 60px))!important;
  }
}

/* Cookies banner: bottom-sheet compacto em mobile */
@media(max-width:767px){
  #cookieConsent,.cookie-consent,[class*="cookie-banner"]{
    bottom:0!important;left:0!important;right:0!important;
    padding:12px 16px max(12px,env(safe-area-inset-bottom,12px))!important;
    font-size:.62rem!important;line-height:1.4!important;
    border-radius:12px 12px 0 0!important;
    box-shadow:0 -8px 24px rgba(0,0,0,.4)!important;
  }
  #cookieConsent button,.cookie-consent button{
    font-size:.6rem!important;padding:8px 14px!important;min-height:38px;
  }
}

/* Scroll-to-top FAB · aparece em paginas longas */
.scroll-to-top{
  position:fixed;bottom:max(90px,calc(env(safe-area-inset-bottom,0px) + 80px));right:14px;
  width:42px;height:42px;border-radius:50%;
  background:rgba(13,27,42,.92);border:1px solid rgba(196,163,90,.25);
  color:var(--gold,#C4A35A);font-size:1.1rem;cursor:pointer;
  display:none;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.45);z-index:80;
  transition:transform .18s ease,opacity .18s ease,box-shadow .2s ease;
  opacity:0;
}
.scroll-to-top.visible{display:flex;opacity:1}
.scroll-to-top:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(196,163,90,.35)}
.scroll-to-top:active{transform:scale(.95)}
@media(min-width:768px){.scroll-to-top{display:none!important}}

/* ═══════════════════════════════════════════════════════════════════
   SPRINT #274 · MOBILE OVERHAUL HOLÍSTICO
   Resolve: ISPSentry visível · hero gigante · KPIs quebrados · overflow
   Cobertura: 320-767px (phones) e 768-1023px (tablets pequenos)
   ═══════════════════════════════════════════════════════════════════ */

/* Phone first: <=767px */
@media(max-width:767px){
  /* ─── Topbar enxuta ─── */
  .topbar{padding:6px 8px!important;height:auto!important;min-height:48px;gap:6px!important}
  .topbar .tb-l{flex:1;min-width:0;overflow:hidden}
  .topbar .tb-n{font-size:.7rem!important;font-weight:600;letter-spacing:.02em;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .topbar .tb-r{gap:4px!important;flex-wrap:nowrap;align-items:center}

  /* Hide ISPSentry pill em mobile (dev tool) */
  .topbar .sentry-pill,#sentryPill{display:none!important}

  /* Hide ISPSentry Live Widget em mobile (dev/debug · canto inferior esquerdo) */
  #ispSentryLiveWidget,[data-isp-widget="live-sentry"]{display:none!important}

  /* Hide elementos secundários em mobile (já parcial em SPRINT #227, reforço aqui) */
  .topbar .tb-r > .i18n-sel,
  .topbar .tb-r > .ww,
  .topbar .tb-r > #themeToggle,
  .topbar .tb-r > #tbGDrive,
  .topbar .tb-r > #tbTestBtn,
  .topbar .tb-r > button[onclick*="_enterCanteiroMode"],
  .topbar .tb-r > button[onclick*="isfHardRefresh"],
  .topbar .tb-r > #tbUser,
  .topbar .tb-r > #saveInd,
  .topbar .tb-r > #install-banner{display:none!important}
  /* CVO 04/06: colapsa os labels dos botoes sociais p/ icone-only no mobile (evita overflow da topbar) + alvo de toque do sino */
  .topbar .tb-r .tbi-l{display:none!important}
  .topbar .tb-r > .notif-bell{min-width:40px;min-height:40px;display:flex;align-items:center;justify-content:center;padding:8px!important}
  /* Cmd palette pill: só ícone */
  .topbar .tb-r > div[onclick*="openCmdPalette"]{padding:6px 10px!important;font-size:0!important;border:1px solid rgba(196,163,90,.15)!important;border-radius:8px}
  .topbar .tb-r > div[onclick*="openCmdPalette"] kbd{display:none!important}
  .topbar .tb-r > div[onclick*="openCmdPalette"]::before{content:'🔍';font-size:.95rem;line-height:1}

  /* ─── Hide gm-ticker em mobile (eats bottom space) ─── */
  .gm-ticker{display:none!important}

  /* ─── pageHero compacto ─── */
  .pg-hero{padding:14px 14px 12px!important;margin-bottom:10px!important;border-radius:10px}
  .pg-hero > div:first-child{flex-direction:column!important;gap:10px!important;align-items:stretch!important}
  .pg-hero > div:first-child > div:first-child{width:100%}
  .pg-hero div[style*="font-size:.48rem"][style*="letter-spacing:.2em"]{font-size:.45rem!important}
  .pg-hero div[style*="font-size:1.25rem"]{font-size:.95rem!important;line-height:1.25!important;margin-bottom:6px!important}
  .pg-hero div[style*="font-size:.65rem"][style*="line-height:1.75"]{font-size:.62rem!important;line-height:1.55!important;max-width:none!important}
  /* Action buttons: wrap with full width */
  .pg-hero > div:first-child > div:last-child{justify-content:flex-start!important;flex-wrap:wrap!important;gap:6px!important;width:100%}
  .pg-hero .btn{font-size:.6rem!important;padding:7px 12px!important;flex:1 1 auto;min-width:0;white-space:nowrap}
  /* Stats row mobile */
  .pg-hero > div:nth-child(2){margin-top:10px!important;padding-top:10px!important;gap:12px!important;flex-wrap:wrap}
  .pg-hero div[style*="font-size:1.3rem"]{font-size:.95rem!important}

  /* ─── Module nudge / module help acomoda mobile ─── */
  .module-nudge,.module-help,.wb-banner{padding:10px 14px!important;font-size:.62rem!important;line-height:1.5!important;margin-bottom:8px!important;border-radius:10px}

  /* ─── Stats grid: 2 cols (não 1, manter densidade) ─── */
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important}
  .st{padding:10px 12px!important}
  .st-v{font-size:1.15rem!important;letter-spacing:-.02em}
  .st-l{font-size:.45rem!important;letter-spacing:.12em!important;margin-top:4px}

  /* ─── Card bodies: tighter padding ─── */
  .cd-h{padding:10px 14px!important}
  .cd-h h3{font-size:.72rem!important}
  .cd-b{padding:10px 12px!important}

  /* ─── Insight feed: cards menores e centralizados ─── */
  .insight-feed{gap:6px!important;padding:4px 0!important}
  .insight-card{min-width:78vw!important;max-width:84vw!important;padding:12px!important;font-size:.65rem!important}

  /* ─── KPI rows com numeração grande: reduz ─── */
  .kpi-row,.kpis,.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important}
  .kpi-row .kpi-value,.kpi-grid .kpi-value{font-size:1.2rem!important;line-height:1!important}
  .kpi-row .kpi-label,.kpi-grid .kpi-label{font-size:.5rem!important;line-height:1.3}

  /* ─── Premium dashboard grid em mobile ─── */
  .dash-premium-grid{display:flex!important;flex-direction:column!important;gap:10px!important;margin:14px 0 10px!important}
  .dash-premium-grid > .cd{width:100%!important;max-width:100%!important;padding:14px!important}
  .dash-premium-grid div[style*="font-size:2.4rem"]{font-size:1.7rem!important;line-height:1!important}
  #dash_radar_6d{height:200px!important;max-width:100%!important}

  /* ─── Rich visuals: stack ─── */
  [data-rich-visuals="1"]{display:flex!important;flex-direction:column!important;gap:10px!important;max-width:100%!important}
  [data-rich-visuals="1"] > .cd{width:100%!important;max-width:100%!important;padding:14px!important}
  [data-rich-visuals="1"] svg{max-width:100%!important;height:auto!important;display:block;margin:0 auto}
  .audit-progress-ring svg{max-width:88px!important;height:88px!important}

  /* ─── Welcome banner ─── */
  .welcome-banner,.isp-welcome{flex-direction:column!important;align-items:flex-start!important;padding:14px!important;gap:10px!important}
  .isp-welcome-greet{min-width:0!important;width:100%}
  .isp-welcome-chips{flex-wrap:wrap!important;gap:6px!important;width:100%}
  .isp-welcome-chip{flex:1 1 auto;min-width:0;padding:6px 10px!important;font-size:.55rem!important}

  /* ─── Tables: scroll horizontal mais elegante ─── */
  .tbl,table.tbl{font-size:.58rem!important;display:block!important;overflow-x:auto!important;max-width:100%!important;white-space:nowrap}
  .tbl th,.tbl td{padding:6px 8px!important;white-space:nowrap}

  /* ─── Modals tela cheia ─── */
  .modal{width:96vw!important;max-width:96vw!important;max-height:90vh!important;margin:8px auto!important;border-radius:12px}
  .modal-h{padding:12px 14px!important}
  .modal-h h3{font-size:.85rem!important}
  .modal-b{padding:12px 14px!important;max-height:calc(90vh - 60px)!important;overflow-y:auto}

  /* ─── Forms ─── */
  .fr{grid-template-columns:1fr!important;gap:0!important}
  .fld{margin-bottom:10px!important}
  .fld label{font-size:.5rem!important;margin-bottom:4px}
  .fld input,.fld select,.fld textarea{padding:10px 12px!important;font-size:.72rem!important;border-radius:8px!important}
  /* CVO 04/06: 16px em campos editaveis no mobile evita o zoom-on-focus do iOS Safari (inputs <16px disparam zoom) */
  input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{font-size:16px!important}

  /* ─── wa-tab-row (tabs internas) scrollable ─── */
  .wa-tab-row{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important;flex-wrap:nowrap!important;padding-bottom:4px;scrollbar-width:none}
  .wa-tab-row::-webkit-scrollbar{display:none}
  .wa-tab{white-space:nowrap;flex-shrink:0;font-size:.58rem!important;padding:6px 12px!important}

  /* ─── kc (kanban cards) e kpi: density ─── */
  .kc{padding:9px 12px!important;font-size:.65rem!important;min-height:42px}

  /* ─── Kanban grids: 1-col em mobile (era multi-col cramped) ─── */
  .kb,.kanban,.kanban-grid,.crm-kanban,[class*="kanban-cols"]{grid-template-columns:1fr!important;gap:8px!important}
  .kb-col,.kanban-col,.crm-kanban-col{padding:10px!important;min-height:auto!important;min-width:0!important;width:100%!important}
  /* Override inline min-width style nas kb-col (CRM e outros) */
  .kb-col[style*="min-width"]{min-width:0!important}
  .kb-ch,.kanban-header{font-size:.62rem!important;margin-bottom:8px}
  /* CRM cards mostram texto completo */
  .crm-card,.kanban-card,.lead-card{padding:10px 12px!important;font-size:.65rem!important;line-height:1.4!important;white-space:normal!important;text-overflow:initial!important;overflow:visible!important}
  .crm-card div,.kanban-card div,.lead-card div{white-space:normal!important;overflow-wrap:break-word!important}

  /* ─── CRM tabs internas ─── */
  .crm-tabs{flex-wrap:nowrap!important;overflow-x:auto!important;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .crm-tabs::-webkit-scrollbar{display:none}
  .crmtb{font-size:.55rem!important;padding:6px 10px!important;flex-shrink:0;white-space:nowrap}

  /* ─── Charts em cards: contenção ─── */
  .cd-b canvas,.cd-b svg{max-width:100%!important;height:auto!important}
  .cd-b > div[style*="height:"]{max-height:240px!important}

  /* ─── Charts: containers responsive ─── */
  .chb{height:160px!important}
  canvas{max-width:100%!important}

  /* ─── Toggle Essencial pill: full width row ─── */
  .vt-pill{margin-left:6px!important;font-size:.55rem!important;padding:3px 8px!important}

  /* ─── Hub do Projeto cards ─── */
  .hub-projeto .row,.hub-projeto-grid,.hub-cards{display:flex!important;flex-direction:column!important;gap:10px!important}
  .hub-projeto .card,.hub-projeto-card{width:100%!important;min-width:0!important}

  /* ─── Audit block compact ─── */
  [data-audit-block="1"]{padding-top:8px!important}
  [data-audit-block="1"] .audit-cta-btn{width:100%;justify-content:center}
  [data-audit-block="1"] table.tbl{max-width:100%;font-size:.55rem!important}

  /* ─── Body padding-bottom: respeita mob-tabs ─── */
  body{padding-bottom:0!important}
  .mn{padding-bottom:75px!important}

  /* ─── Mob tabs (bottom nav) refined ─── */
  .mob-tabs{bottom:0!important;padding:2px 0 calc(2px + env(safe-area-inset-bottom,0px))!important;background:rgba(10,22,40,.96)!important;-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4)}
  .mt{padding:8px 4px!important;font-size:.5rem!important;gap:3px!important}
  .mt .ic{font-size:1rem!important}
  .mt.on{color:var(--gold)!important}

  /* ─── Hamburger: ainda mais clicável + posicionamento safe-area ─── */
  .mob-hamburger{display:flex!important;width:44px!important;height:44px!important;top:calc(env(safe-area-inset-top,0px) + 4px)!important;left:8px!important;font-size:1.25rem!important;z-index:9500!important;background:rgba(15,36,64,.95)!important;border:1px solid rgba(196,163,90,.3)!important;backdrop-filter:blur(12px);box-shadow:0 4px 14px rgba(0,0,0,.45)!important}

  /* ─── Topbar precisa de espaço pro hamburger ─── */
  .topbar{padding-left:60px!important}

  /* ─── Project Selector (Portfolio) mobile ─── */
  .pg{grid-template-columns:1fr!important;gap:10px!important}
  .pc{padding:14px!important;min-width:0!important}

  /* ─── Removendo hover sticky em touch ─── */
  .pn *{-webkit-tap-highlight-color:transparent}
}

/* Phone pequeno: <=480px (afinamento adicional) */
@media(max-width:480px){
  .pg-hero{padding:12px 12px 10px!important}
  .pg-hero div[style*="font-size:1.25rem"]{font-size:.88rem!important}
  .pg-hero .btn{font-size:.55rem!important;padding:6px 10px!important}
  .pg-hero > div:first-child > div:last-child{justify-content:stretch}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .st-v{font-size:1rem!important}
  .pn{padding:8px 6px!important}
  .modal{width:98vw!important;max-width:98vw!important;margin:4px auto!important}
  .insight-card{min-width:88vw!important;max-width:90vw!important}
}

/* iPhone SE/min: <=375px */
@media(max-width:375px){
  .pg-hero div[style*="font-size:1.25rem"]{font-size:.82rem!important}
  .st-v{font-size:.95rem!important}
  .stats{grid-template-columns:1fr 1fr!important;gap:5px!important}
  .topbar{padding-left:54px!important}
  .mob-hamburger{width:40px!important;height:40px!important}
}

/* ─── SPRINT #273 · Premium widgets mobile/tablet refinements ─── */
@media(max-width:860px){
  .dash-premium-grid{grid-template-columns:1fr!important;gap:10px!important;margin:14px 0 10px!important}
  [data-rich-visuals="1"]{grid-template-columns:1fr!important;gap:10px!important;max-width:100%!important}
  [data-rich-visuals="1"] .cd{padding:14px!important;border-radius:10px!important}
  [data-rich-visuals="1"] svg{max-width:100%!important;height:auto!important}
  [data-audit-block="1"]{max-width:100%!important;overflow-x:auto;-webkit-overflow-scrolling:touch}
  [data-audit-block="1"] table.tbl{font-size:.58rem!important}
  [data-audit-block="1"] table.tbl th,[data-audit-block="1"] table.tbl td{padding:6px 8px!important}
  /* Radar dashboard: reduz altura em mobile */
  #dash_radar_6d{height:200px!important}
  .dash-premium-grid .cd{padding:14px!important}
  .dash-premium-grid .cd > div:first-child{font-size:.55rem!important}
}
@media(max-width:480px){
  [data-rich-visuals="1"]{margin:8px 0!important}
  .audit-heatmap-cell{transform-origin:center}
  /* No mobile, ring + heatmap + funnel ficam menores */
  .audit-progress-ring svg{width:78px!important;height:78px!important}
  .audit-progress-ring text{font-size:14px!important}
  /* Activity Ticker recolhe whitespace */
  .dash-premium-grid .cd[role="button"]{padding:14px!important}
  .dash-premium-grid div[style*="font-size:2.4rem"]{font-size:1.8rem!important}
}
@media(hover:none){
  /* Touch devices: hover-lift desativado, active state assume */
  [data-audit-block="1"] .stats .st:hover,[data-rich-visuals="1"] .cd:hover{transform:none!important;box-shadow:none!important}
  [data-audit-block="1"] .stats .st:active,[data-rich-visuals="1"] .cd:active{transform:scale(.98)!important;transition:transform .12s ease}
  .audit-heatmap-cell:hover{transform:none!important;filter:none!important}
  .audit-heatmap-cell:active{opacity:1!important;transform:scale(1.3)!important;transition:transform .12s ease}
}

/* ─── SPRINT #264 · Mobile fluidity (panels, forms, tables span full width) ─── */
@media(max-width:768px){
  /* Hamburger garantidamente clicável e visível acima de tudo */
  .mob-hamburger{
    display:flex!important;
    width:44px!important;height:44px!important;
    top:8px!important;left:8px!important;
    z-index:9500!important;
    font-size:1.3rem!important;
    box-shadow:0 4px 12px rgba(0,0,0,.45)!important;
    pointer-events:auto!important;
  }
  .mob-overlay{z-index:9400!important}
  /* Body padding-top respeita topbar fixa */
  body{padding-top:0!important}
  /* Panels e cards usam largura total */
  .pn,.kp,.cd,.card,.box,.section,.dash-box,.dash-card{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box;
    margin-left:0!important;margin-right:0!important;
  }
  /* Grids/stats colapsam em 2 colunas, depois 1 em 480 */
  .stats,.kpi-row,.kpis,.kpi-grid,.pc-g{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  /* Tabelas com scroll horizontal preservando largura útil */
  .pn table,.tbl,table.tbl,.scrollable-table,.dataTable{
    width:100%!important;
    max-width:100%!important;
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    white-space:nowrap;
  }
  /* Forms empilham label sobre input — não cortam o lado direito */
  .fld,.frm-row,.form-row,.row-frm{
    flex-direction:column!important;
    align-items:stretch!important;
    width:100%!important;
  }
  .fld label,.frm-row label,.form-row label{
    width:auto!important;text-align:left!important;
    margin-bottom:4px!important;font-size:.62rem!important;
  }
  .fld input,.fld select,.fld textarea,.frm-row input,.frm-row select{
    width:100%!important;max-width:100%!important;box-sizing:border-box;
  }
  /* Flex rows envolvem em vez de transbordar à direita */
  .row,.fr,.hbox,.toolbar,.tb-grp,.actbar,.btn-row{
    flex-wrap:wrap!important;gap:8px!important;
  }
  /* Botões em colunas estreitas crescem para ocupar */
  .actbar .btn,.btn-row .btn{flex:1 1 auto;min-width:120px}
  /* Inputs nunca estouram */
  input,select,textarea,.inp,.input{max-width:100%!important;box-sizing:border-box}
  /* Modal aproveita 96vw */
  .modal{width:96vw!important;max-width:96vw!important;max-height:92vh!important}
  .modal-b{max-height:calc(92vh - 70px)!important;overflow-y:auto}
  /* Sidebar items maiores para toque */
  .sb a,.sb .si,nav.sb li,nav.sb .nav-item{padding:11px 14px!important;font-size:.72rem!important}
  /* Tap targets em geral */
  .btn,button,.kc,.chip{min-height:38px}
  /* Topbar não corta nome */
  .topbar{flex-wrap:wrap!important}
  .tb-l{min-width:0;flex:1 1 auto}
  .tb-r{flex-wrap:wrap;gap:6px;justify-content:flex-end}
  /* Concierge / Welcome banner / Hub respiram */
  .welcome-banner,.concierge-fab,.hub-projeto,.toggle-essencial{
    max-width:100%!important;box-sizing:border-box;
  }
}
@media(max-width:480px){
  .stats,.kpi-row,.kpis,.kpi-grid,.pc-g{grid-template-columns:1fr!important}
  .pn{padding:12px!important;border-radius:10px!important}
  .st-v{font-size:1.1rem!important}
  .st-l{font-size:.55rem!important;line-height:1.25!important}
  .modal-h h3{font-size:.85rem!important}
  .topbar .tb-back,.topbar .tb-hub{padding:4px 8px!important}
  /* Hub Projeto cards em coluna única */
  .hub-projeto .row,.hub-cards{grid-template-columns:1fr!important;flex-direction:column!important}
}

@media(max-width:480px){
  nav.sb{width:84vw!important}
  .topbar .tb-n{font-size:.7rem!important;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #tbUser{display:none!important}
  .tb-hub .tbh-l{display:none!important}
}

/* ─── SPRINT #214 · Dashboard Executivo do Espaço (acima da lista) ────── */
.esp-dash{
  grid-column:1/-1;
  padding:28px 32px;border-radius:14px;
  background:linear-gradient(135deg,rgba(35,30,55,.94),rgba(20,15,35,.97));
  border:1px solid rgba(196,163,90,.18);
  box-shadow:0 8px 32px -16px rgba(0,0,0,.5);
  position:relative;overflow:hidden;
  opacity:0;animation:hubPortaoIn .55s cubic-bezier(.19,1,.22,1) both;
  animation-delay:.05s;
}
.esp-dash.esp-obras{
  background:linear-gradient(135deg,rgba(30,40,55,.94),rgba(15,25,40,.97));
  border-color:rgba(143,190,142,.22);
}
.esp-dash::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 90% 10%,rgba(196,163,90,.08),transparent 55%);
  pointer-events:none;
}
.esp-dash.esp-obras::before{
  background:radial-gradient(circle at 90% 10%,rgba(143,190,142,.08),transparent 55%);
}
.esp-dash-header{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:16px;margin-bottom:22px;flex-wrap:wrap;
}
.esp-dash-title-block{display:flex;align-items:center;gap:14px}
.esp-dash-icon{font-size:1.8rem;line-height:1}
.esp-dash-eyebrow{
  font-family:var(--sn);font-size:.6rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);font-weight:600;
  margin-bottom:2px;
}
.esp-dash.esp-obras .esp-dash-eyebrow{color:#8FBE8E}
.esp-dash-title{
  font-family:var(--sf);font-size:1.5rem;font-weight:400;
  color:var(--cream);letter-spacing:.01em;line-height:1.15;
}
.esp-dash-tagline{
  font-family:var(--sf);font-size:.85rem;font-style:italic;font-weight:300;
  color:rgba(245,240,232,.55);margin-top:3px;
}
.esp-dash-meta{
  font-size:.6rem;color:rgba(196,163,90,.55);letter-spacing:.08em;
  text-align:right;font-family:var(--sn);
}
.esp-dash-meta strong{color:var(--cream);font-weight:500;letter-spacing:.04em}
.esp-dash-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:12px;
}
.esp-kpi{
  padding:14px 16px;background:rgba(255,255,255,.025);
  border:1px solid rgba(196,163,90,.08);border-left:3px solid var(--gold);
  border-radius:6px;transition:all .25s ease;
}
.esp-dash.esp-obras .esp-kpi{border-left-color:#8FBE8E}
.esp-kpi:hover{
  background:rgba(255,255,255,.04);transform:translateY(-1px);
  border-color:rgba(196,163,90,.18);
}
.esp-kpi-l{
  font-size:.55rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(245,240,232,.42);margin-bottom:6px;font-weight:500;
}
.esp-kpi-v{
  font-family:var(--sf);font-size:1.3rem;font-weight:500;
  color:var(--cream);line-height:1.1;
}
.esp-kpi-sub{
  font-size:.58rem;color:rgba(245,240,232,.35);
  margin-top:4px;letter-spacing:.04em;
}
.esp-kpi-v.warn{color:var(--amber)}
.esp-kpi-v.crit{color:var(--red)}
.esp-kpi-v.ok{color:#8FBE8E}
.esp-dash-list-title{
  font-family:var(--sn);font-size:.62rem;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(196,163,90,.55);
  margin:24px 0 10px;font-weight:600;
}
@media(max-width:768px){
  .esp-dash{padding:20px 18px}
  .esp-dash-title{font-size:1.2rem}
  .esp-dash-tagline{font-size:.75rem}
  .esp-dash-meta{display:none}
  .esp-dash-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .esp-kpi-v{font-size:1.1rem}
}

/* ─── SPRINT #211 · Topbar consolidado · botão Hub + harmonização ──────── */
.tb-hub{
  display:none;align-items:center;gap:6px;
  padding:5px 12px;margin-right:8px;
  background:linear-gradient(135deg,rgba(196,163,90,.12),rgba(196,163,90,.06));
  border:1px solid rgba(196,163,90,.28);border-radius:18px;
  color:var(--gold);font-family:var(--sn);
  font-size:.62rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  cursor:pointer;transition:all .25s cubic-bezier(.19,1,.22,1);
}
.tb-hub:hover{
  background:linear-gradient(135deg,var(--gold),var(--gm));color:#0A0F1A;
  border-color:var(--gold);transform:translateY(-1px);
  box-shadow:0 4px 16px rgba(196,163,90,.25);
}
.tb-hub:active{transform:translateY(0) scale(.97)}
.tb-hub .tbh-l{font-size:.58rem;letter-spacing:.12em}
@media(max-width:768px){
  .tb-hub .tbh-l{display:none}
  .tb-hub{padding:5px 8px}
}
/* Chip espaço (criado por _renderEspacoIndicatorTopbar) ganha animação suave */
#isp_espaco_chip{transition:all .25s cubic-bezier(.19,1,.22,1)!important}
#isp_espaco_chip:hover{transform:translateY(-1px)}

/* ─── Welcome Banner contextual (dashboard · saúda + 3 chips · dismissível) ─── */
.isp-welcome{
  display:flex;align-items:center;gap:14px;
  margin:0 0 16px 0;padding:14px 18px;
  background:linear-gradient(135deg,rgba(196,163,90,.06),rgba(196,163,90,.02));
  border:1px solid rgba(196,163,90,.16);border-left:3px solid var(--gold,#C4A35A);
  border-radius:10px;font-family:var(--sn);
  animation:ispWelcomeIn .5s cubic-bezier(.19,1,.22,1) both;
}
@keyframes ispWelcomeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.isp-welcome-greet{flex:0 0 auto;display:flex;flex-direction:column;gap:2px;min-width:160px}
.isp-welcome-greet .iw-hi{font-family:var(--sf);font-weight:300;font-size:1.1rem;color:var(--txt);letter-spacing:.01em;line-height:1.2}
.isp-welcome-greet .iw-sub{font-size:.62rem;color:var(--t3);letter-spacing:.06em;text-transform:uppercase;font-weight:500}
.isp-welcome-chips{flex:1 1 auto;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.iw-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;background:rgba(196,163,90,.04);border:1px solid rgba(196,163,90,.14);border-radius:14px;font-size:.62rem;color:var(--txt);cursor:pointer;transition:all .22s cubic-bezier(.19,1,.22,1);user-select:none}
.iw-chip:hover{background:rgba(196,163,90,.10);border-color:rgba(196,163,90,.28);transform:translateY(-1px)}
.iw-chip .iw-c-num{font-family:var(--sf);font-weight:500;font-size:.95rem;color:var(--gold,#C4A35A);line-height:1}
.iw-chip .iw-c-lbl{font-size:.55rem;color:var(--t3);letter-spacing:.06em;text-transform:uppercase;font-weight:500}
.isp-welcome-x{flex:0 0 auto;background:transparent;border:none;color:rgba(196,163,90,.4);font-size:1rem;cursor:pointer;padding:4px 8px;border-radius:50%;transition:all .2s ease;line-height:1;font-family:inherit}
.isp-welcome-x:hover{background:rgba(196,163,90,.08);color:var(--gold,#C4A35A)}
@media (max-width:768px){.isp-welcome{flex-direction:column;align-items:flex-start;gap:10px}.isp-welcome-greet{min-width:0}}

/* ─── Toggle Essencial · Tudo (CVO em dia agitado · reduz 102→9 módulos) ─── */
.vt-pill{
  display:inline-flex;gap:2px;align-items:center;padding:2px;height:26px;
  margin-left:10px;background:rgba(196,163,90,.05);
  border:1px solid rgba(196,163,90,.14);border-radius:18px;
  cursor:pointer;user-select:none;font-family:var(--sn);
  transition:all .22s cubic-bezier(.19,1,.22,1);
}
.vt-pill:hover{background:rgba(196,163,90,.10);border-color:rgba(196,163,90,.28);transform:translateY(-1px)}
.vt-pill span{
  display:inline-flex;align-items:center;gap:3px;
  padding:3px 11px;font-size:.55rem;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(196,163,90,.55);border-radius:14px;
  transition:all .22s cubic-bezier(.19,1,.22,1);font-weight:500;line-height:1;
}
.vt-pill span.active{
  background:linear-gradient(135deg,var(--gold,#C4A35A),var(--gm,#B89D5E));
  color:#0A0F1A;font-weight:700;
  box-shadow:0 1px 6px rgba(196,163,90,.35),inset 0 1px 0 rgba(255,255,255,.15);
}
@media (max-width:900px){.vt-pill span:not(.active){display:none}}
@media (max-width:600px){.vt-pill{margin-left:6px}.vt-pill span{padding:3px 8px}}

/* Pulse + tooltip educativo na primeira vez que o usuário vê o pill */
.vt-pill.first-time{animation:vtPulse 1.4s ease-in-out 3;position:relative;overflow:visible}
@keyframes vtPulse{0%,100%{box-shadow:0 0 0 0 rgba(196,163,90,.0)}50%{box-shadow:0 0 0 8px rgba(196,163,90,.18)}}
.vt-pill.first-time::after{
  content:'9 módulos essenciais · clique ⊞ Tudo para ver os 102';
  position:absolute;top:calc(100% + 10px);right:0;white-space:nowrap;
  padding:8px 14px;background:linear-gradient(135deg,#0A1929,#1B3A5C);
  color:var(--cream,#F5F0E8);font-size:.58rem;letter-spacing:.04em;line-height:1.4;
  border-radius:8px;border:1px solid rgba(196,163,90,.3);
  box-shadow:0 6px 24px rgba(0,0,0,.18),0 0 0 1px rgba(196,163,90,.1);
  pointer-events:none;z-index:9999;font-weight:500;
  animation:vtTipIn .4s ease-out both;
}
.vt-pill.first-time::before{
  content:'';position:absolute;top:calc(100% + 4px);right:18px;
  width:10px;height:10px;background:#0A1929;
  border-top:1px solid rgba(196,163,90,.3);border-left:1px solid rgba(196,163,90,.3);
  transform:rotate(45deg);pointer-events:none;z-index:9999;
  animation:vtTipIn .4s ease-out both;
}
@keyframes vtTipIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
@media (max-width:768px){.vt-pill.first-time::after{font-size:.5rem;white-space:normal;max-width:200px;right:auto;left:0}}

/* ─── Hub do Projeto · tela de entrada amigável com 8 cards macro ─── */
.hub-projeto-shell{max-width:1100px;margin:0 auto;padding:8px 0}
.hp-hero{padding:8px 0 24px 0;border-bottom:1px solid rgba(196,163,90,.08);margin-bottom:22px}
.hp-hero-cat{font-size:.5rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:rgba(196,163,90,.5);margin-bottom:8px}
.hp-hero-title{font-family:var(--sf);font-weight:300;font-size:2rem;line-height:1.15;color:var(--txt);margin:0 0 6px 0;letter-spacing:.01em}
.hp-hero-sub{font-size:.78rem;color:var(--t2);font-family:var(--sn);line-height:1.5;font-weight:400}
.hp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.hp-card{
  display:flex;gap:14px;align-items:flex-start;
  padding:18px 20px;background:rgba(255,255,255,.65);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(196,163,90,.12);border-radius:12px;
  cursor:pointer;transition:all .28s cubic-bezier(.19,1,.22,1);
  animation:hpCardIn .45s cubic-bezier(.19,1,.22,1) both;
}
@keyframes hpCardIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.hp-card:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 32px rgba(27,58,92,.08),0 2px 6px rgba(0,0,0,.04);
  border-color:rgba(196,163,90,.28);
  background:rgba(255,255,255,.85);
}
.hp-card:active{transform:translateY(-1px)}
.hp-card-icon{
  font-size:1.9rem;line-height:1;flex:0 0 auto;
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(196,163,90,.10),rgba(196,163,90,.04));
  border-radius:10px;border:1px solid rgba(196,163,90,.08);
}
.hp-card-body{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}
.hp-card-cat{font-family:var(--sf);font-weight:400;font-size:1rem;color:var(--navy,#1B3A5C);line-height:1.2;letter-spacing:.01em}
.hp-card-desc{font-size:.65rem;color:var(--t2);line-height:1.55;font-family:var(--sn)}
.hp-card-meta{display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding-top:8px;border-top:1px solid rgba(196,163,90,.06)}
.hp-c-count{font-size:.55rem;color:var(--t3);letter-spacing:.06em;text-transform:uppercase;font-weight:500}
.hp-c-arrow{font-size:.85rem;color:var(--gold,#C4A35A);transition:transform .22s ease;font-family:var(--sf)}
.hp-card:hover .hp-c-arrow{transform:translateX(4px)}
@media (max-width:768px){
  .hp-hero-title{font-size:1.55rem}
  .hp-grid{grid-template-columns:1fr;gap:10px}
  .hp-card{padding:14px 16px}
}
/* CVO 30/05 · RapheiceOS no Hub (dark): cards eram branco-translucido (.65) = cinza
   horrendo sobre o navy. Agora navy-deep + gold luminoso + cream. */
[data-theme="dark"] .hp-card{
  background:linear-gradient(135deg,rgba(196,163,90,.06),rgba(10,25,41,.55));
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(196,163,90,.16);
}
[data-theme="dark"] .hp-card:hover{
  background:linear-gradient(135deg,rgba(196,163,90,.12),rgba(10,25,41,.7));
  border-color:rgba(196,163,90,.42);
  box-shadow:0 14px 38px rgba(0,0,0,.42),0 2px 8px rgba(196,163,90,.10);
}
[data-theme="dark"] .hp-card-cat{color:var(--gold,#C4A35A)}
[data-theme="dark"] .hp-card-desc{color:var(--t2,#9A8F7A)}
[data-theme="dark"] .hp-card-icon{
  background:linear-gradient(135deg,rgba(196,163,90,.16),rgba(196,163,90,.05));
  border-color:rgba(196,163,90,.2);
}
[data-theme="dark"] .hp-hero-title{color:var(--cream,#F5F0E8)}
[data-theme="dark"] .hp-card-meta{border-top-color:rgba(196,163,90,.1)}

/* ─── Concierge FAB + Painel Flutuante (porta IA persistente em qualquer módulo) ─── */
.ai-fab.visible{display:flex!important;width:54px;height:54px;font-size:1.4rem;background:linear-gradient(135deg,#0A1929,#1B3A5C);border:1.5px solid rgba(196,163,90,.35);box-shadow:0 6px 22px rgba(0,0,0,.25),inset 0 1px 0 rgba(196,163,90,.12);transition:all .3s cubic-bezier(.19,1,.22,1);bottom:24px;right:24px}
.ai-fab.visible:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 10px 32px rgba(196,163,90,.35),inset 0 1px 0 rgba(196,163,90,.2);background:linear-gradient(135deg,#1B3A5C,#2A5580)}
.ai-fab.hidden{opacity:0;transform:scale(.85);pointer-events:none}
/* Pulse na primeira vez */
.ai-fab.first-time{animation:aiFabPulse 1.6s ease-in-out 3}
@keyframes aiFabPulse{0%,100%{box-shadow:0 6px 22px rgba(0,0,0,.25),0 0 0 0 rgba(196,163,90,0)}50%{box-shadow:0 6px 22px rgba(0,0,0,.25),0 0 0 14px rgba(196,163,90,.2)}}

/* ─── FAB cluster (CVO 08/06: botoes flutuantes estavam SOBREPOSTOS) ───
   Canto inf. direito = pilha vertical sem colisao: robo/concierge embaixo (24px),
   Tela Facil acima dele (88px). Reporte duplicado antigo (#ispReportBtn) oculto —
   o canonico e o #isp-report-fab (report-channel.js). */
#ispReportBtn{display:none!important}                         /* mata o duplicado V15.2 */
/* CVO 13/06 (PQV-02 mobile): a FAB 🐞 Reportar (z-index altíssimo, canto inf-esq) INTERCEPTAVA o
   botão Salvar/Cancelar dos modais no celular -> impossível salvar contato/fornecedor pelo mobile.
   Enquanto um modal está aberto, recolhe a FAB (não há porque flutuar sobre o modal — ele tem ações
   próprias). Cobre os overlays canônicos .mo/.modal-overlay/.cmd-overlay. */
body:has(.mo.show) #isp-report-fab,
body:has(#moG.show) #isp-report-fab,
body:has(.cmd-overlay.show) #isp-report-fab{display:none!important}
.ai-fab.visible{bottom:24px!important;right:24px!important;z-index:9997!important}
.isp-ms-fab{bottom:calc(88px + env(safe-area-inset-bottom))!important;right:24px!important;z-index:9997!important}
/* o card "Proxima Acao"/missao sobe pra nao encostar no Tela Facil */
#isfDailyMission{bottom:148px!important}
@media(max-width:768px){
  .ai-fab.visible{bottom:18px!important;right:18px!important}
  .isp-ms-fab{bottom:calc(76px + env(safe-area-inset-bottom))!important;right:18px!important}
  #isfDailyMission{bottom:136px!important}
}

.ph-conc-flyout{
  position:fixed;bottom:88px;right:24px;width:400px;max-width:calc(100vw - 32px);
  height:580px;max-height:calc(100vh - 130px);
  background:rgba(253,252,250,.78);
  -webkit-backdrop-filter:blur(26px) saturate(1.3);backdrop-filter:blur(26px) saturate(1.3);
  border:1px solid rgba(196,163,90,.22);border-radius:18px;
  box-shadow:0 24px 70px rgba(0,0,0,.28),0 4px 12px rgba(0,0,0,.1);
  display:flex;flex-direction:column;overflow:hidden;
  z-index:9998;
  transform:translateY(20px) scale(.95);opacity:0;pointer-events:none;
  transition:all .35s cubic-bezier(.19,1,.22,1);font-family:var(--sn);
}
[data-theme="dark"] .ph-conc-flyout{background:rgba(12,22,34,.82)}
.ph-conc-flyout.open{transform:translateY(0) scale(1);opacity:1;pointer-events:auto}
.pcf-header{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;background:linear-gradient(135deg,#0A1929,#1B3A5C);color:var(--cream,#F5F0E8);border-bottom:1px solid rgba(196,163,90,.2)}
.pcf-h-l{display:flex;align-items:center;gap:12px}
.pcf-avatar{font-size:1.6rem;width:38px;height:38px;display:flex;align-items:center;justify-content:center;background:rgba(196,163,90,.16);border-radius:50%;border:1px solid rgba(196,163,90,.3)}
.pcf-title{font-family:var(--sf);font-size:1rem;font-weight:300;letter-spacing:.02em;line-height:1.1}
.pcf-sub{font-size:.55rem;color:rgba(196,163,90,.6);letter-spacing:.05em;text-transform:uppercase;margin-top:2px;font-weight:500}
.pcf-close{background:transparent;border:none;color:rgba(196,163,90,.5);font-size:1.4rem;cursor:pointer;padding:2px 8px;border-radius:50%;transition:all .2s ease;line-height:1}
.pcf-close:hover{background:rgba(196,163,90,.12);color:var(--cream,#F5F0E8)}

.pcf-history{flex:1;overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:10px;background:transparent}
/* abas IA | Pessoas no hub de chat (CVO 08/06) */
.pcf-tabs{display:flex;gap:4px;padding:8px 14px 0;background:linear-gradient(135deg,#0A1929,#1B3A5C);border-bottom:1px solid rgba(196,163,90,.18)}
.pcf-tab{flex:1;border:none;background:transparent;color:rgba(245,240,232,.55);font-size:.68rem;font-weight:600;padding:9px 6px;cursor:pointer;border-bottom:2px solid transparent;transition:color .15s,border-color .15s;display:flex;align-items:center;justify-content:center;gap:6px}
.pcf-tab:hover{color:var(--cream,#F5F0E8)}
.pcf-tab.on{color:var(--gold);border-bottom-color:var(--gold)}
.pcf-pane{display:none;flex:1;flex-direction:column;min-height:0}
.pcf-pane.on{display:flex}
.pcf-msg-time{font-size:.52rem;opacity:.5;margin-top:4px;display:block}
.pcf-suggestions{display:flex;flex-direction:column;gap:8px}
.pcf-s-label{font-size:.6rem;color:var(--t3);letter-spacing:.06em;text-transform:uppercase;font-weight:500;margin-bottom:4px}
.pcf-chip{
  display:block;width:100%;text-align:left;padding:11px 14px;
  background:rgba(255,255,255,.7);border:1px solid rgba(196,163,90,.14);border-radius:10px;
  font-size:.7rem;color:var(--txt);font-family:var(--sn);cursor:pointer;
  transition:all .22s cubic-bezier(.19,1,.22,1);font-weight:400;
}
.pcf-chip:hover{background:rgba(255,255,255,.95);border-color:rgba(196,163,90,.32);transform:translateX(3px);box-shadow:0 4px 14px rgba(27,58,92,.06)}
.pcf-msg{padding:10px 14px;border-radius:12px;font-size:.72rem;line-height:1.55;max-width:88%;word-wrap:break-word}
.pcf-msg-user{background:linear-gradient(135deg,#1B3A5C,#0A1929);color:var(--cream,#F5F0E8);align-self:flex-end;border-bottom-right-radius:4px}
.pcf-msg-ai{background:rgba(255,255,255,.85);color:var(--txt);align-self:flex-start;border:1px solid rgba(196,163,90,.12);border-bottom-left-radius:4px}
.pcf-msg.pcf-thinking{color:var(--t3);font-style:italic}
.pcf-msg.pcf-thinking::after{content:'…';animation:pcfDots 1.4s steps(3,end) infinite}
@keyframes pcfDots{33%{content:'.'}66%{content:'..'}100%{content:'...'}}

.pcf-input-wrap{display:flex;gap:8px;padding:14px 16px;background:rgba(255,255,255,.6);border-top:1px solid rgba(196,163,90,.1)}
.pcf-input-wrap input{
  flex:1;padding:11px 14px;border:1px solid rgba(196,163,90,.18);border-radius:24px;
  font-size:.74rem;font-family:var(--sn);outline:none;background:#fff;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.pcf-input-wrap input:focus{border-color:rgba(196,163,90,.4);box-shadow:0 0 0 3px rgba(196,163,90,.08)}
.pcf-send{
  width:38px;height:38px;border-radius:50%;border:none;cursor:pointer;
  background:linear-gradient(135deg,var(--gold,#C4A35A),var(--gm,#B89D5E));
  color:var(--cream,#F5F0E8);font-size:1rem;font-weight:600;
  transition:all .25s cubic-bezier(.19,1,.22,1);box-shadow:0 3px 10px rgba(196,163,90,.3);
}
.pcf-send:hover{transform:translateY(-1px) scale(1.05);box-shadow:0 5px 16px rgba(196,163,90,.45)}
.pcf-send:active{transform:scale(.95)}
@media (max-width:600px){
  .ph-conc-flyout{bottom:0;right:0;width:100%;height:80vh;border-radius:18px 18px 0 0}
  .ai-fab.visible{width:48px;height:48px;font-size:1.2rem;bottom:18px;right:18px}
}

/* ─── Animation polish · transições suaves em elementos interativos ─── */
/* Ease compartilhado para feel coeso · cubic-bezier(.19,1,.22,1) = "out-expo" suave */
.btn{transition:transform .2s cubic-bezier(.19,1,.22,1),box-shadow .2s cubic-bezier(.19,1,.22,1),background-color .2s ease,border-color .2s ease,color .2s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(27,58,92,.08)}
.btn:active{transform:translateY(0) scale(.985);transition-duration:.1s}
.btn-g:hover{box-shadow:0 6px 18px rgba(46,125,50,.18)}
.btn-r:hover{box-shadow:0 6px 18px rgba(198,40,40,.18)}
.btn-o:hover{box-shadow:0 4px 14px rgba(196,163,90,.12)}

/* Sidebar items · hover translateX micro + accent */
.si{transition:background-color .22s cubic-bezier(.19,1,.22,1),transform .22s cubic-bezier(.19,1,.22,1),padding-left .22s ease}
.si:hover{transform:translateX(2px)}
.si.on{transform:translateX(0)}

/* Cards .cd e .kc · hover lift suave */
.cd,.kc{transition:transform .25s cubic-bezier(.19,1,.22,1),box-shadow .25s cubic-bezier(.19,1,.22,1),border-color .2s ease}
.cd:hover{transform:translateY(-2px)}
.kc:hover{transform:translateY(-1px) scale(1.01)}

/* Modal modais · suaviza entrada (.modal já tem animation; reforça via cubic) */
@keyframes ispModalUp{from{opacity:0;transform:translateY(20px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.mo.show .modal{animation:ispModalUp .35s cubic-bezier(.19,1,.22,1) both!important}

/* Inputs · focus ring suave em vez de outline browser default */
.fld input:focus,.fld select:focus,.fld textarea:focus{
  box-shadow:0 0 0 3px rgba(196,163,90,.10);
  transition:border-color .18s ease,box-shadow .25s cubic-bezier(.19,1,.22,1);
}

/* Toasts · entrada com translateY suave (overrride se necessário) */
.toast.show{transition:opacity .3s ease,transform .35s cubic-bezier(.19,1,.22,1)}

/* Respeita prefers-reduced-motion · acessibilidade não-negociável */
@media (prefers-reduced-motion: reduce){
  .btn,.si,.cd,.kc,.toast{transition:none}
  .btn:hover,.si:hover,.cd:hover,.kc:hover{transform:none}
  .mo.show .modal{animation:none!important}
}

/* ─── Indicador "Última ação" · feedback efêmero de auto-save (top-right) ─── */
.isp-last-action{
  position:fixed; top:64px; right:24px;
  padding:6px 13px; background:rgba(10,25,41,.86);
  border:1px solid rgba(196,163,90,.22); border-radius:14px;
  color:rgba(245,240,232,.88); font-size:.6rem; font-family:var(--sn,sans-serif);
  letter-spacing:.04em; z-index:1500; opacity:0; pointer-events:none;
  transform:translateY(-6px); transition:opacity .35s cubic-bezier(.19,1,.22,1),transform .35s cubic-bezier(.19,1,.22,1);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  max-width:300px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  box-shadow:0 4px 14px rgba(0,0,0,.18);
  display:flex; align-items:center; gap:6px;
}
.isp-last-action::before{content:'';width:5px;height:5px;border-radius:50%;background:#7CB342;display:inline-block;flex-shrink:0;animation:lapPulse 1.8s ease-in-out infinite}
@keyframes lapPulse{0%,100%{opacity:.5}50%{opacity:1}}
.isp-last-action.show{opacity:.92; transform:translateY(0)}
.isp-last-action.error{border-color:rgba(198,40,40,.4); color:rgba(255,200,200,.95)}
.isp-last-action.error::before{background:#C62828}
.isp-last-action.warn{border-color:rgba(230,81,0,.4); color:rgba(255,220,180,.95)}
.isp-last-action.warn::before{background:#E65100}
@media (max-width:768px){.isp-last-action{top:auto;bottom:96px;right:24px;left:auto;font-size:.55rem;max-width:220px}}
@media (prefers-reduced-motion: reduce){.isp-last-action,.isp-last-action::before{transition:none;animation:none}}
#isp_btn_requisicoes{transition:all .25s cubic-bezier(.19,1,.22,1)!important}
#isp_btn_requisicoes:hover{transform:translateY(-1px)}

/* ─── SPRINT #209 · HUB Fase 2 · Refinamento visual + animações ─────────── */
.hub-portao{
  position:relative;
  padding:32px 28px !important;
  border-radius:16px !important;
  cursor:pointer;
  overflow:hidden;
  transition:all .45s cubic-bezier(.19,1,.22,1) !important;
  opacity:0;
  animation:hubPortaoIn .6s cubic-bezier(.19,1,.22,1) both;
}
.hub-portao.hp-d0{animation-delay:.05s}
.hub-portao.hp-d1{animation-delay:.18s}
.hub-portao.hp-d2{animation-delay:.31s}
@keyframes hubPortaoIn{
  0%{opacity:0;transform:translateY(24px) scale(.985)}
  100%{opacity:1;transform:none}
}
.hub-portao::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(circle at 80% 20%,rgba(196,163,90,.12),transparent 55%);
  opacity:0;transition:opacity .35s ease;pointer-events:none;
}
.hub-portao:hover{
  transform:translateY(-4px) !important;
  box-shadow:0 18px 50px rgba(0,0,0,.4),0 0 0 1px rgba(196,163,90,.25) !important;
}
.hub-portao:hover::after{opacity:1}
.hub-portao .hp-arrow{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;
  background:rgba(196,163,90,.08);
  color:var(--gold);font-size:.95rem;font-weight:300;
  transition:all .35s cubic-bezier(.19,1,.22,1);
  margin-left:auto;
}
.hub-portao:hover .hp-arrow{
  background:var(--gold);color:#0A0F1A;transform:translateX(4px);
}
.hub-portao.hp-obras .hp-arrow{background:rgba(143,190,142,.1);color:#8FBE8E}
.hub-portao.hp-obras:hover .hp-arrow{background:#8FBE8E;color:#0A0F1A}
.hub-portao .hp-icon{
  font-size:2rem;line-height:1;
  filter:drop-shadow(0 2px 8px rgba(196,163,90,.2));
  transition:transform .35s cubic-bezier(.19,1,.22,1);
}
.hub-portao:hover .hp-icon{transform:scale(1.08) rotate(-3deg)}
.hub-portao .hp-title{
  font-family:var(--sf);
  font-size:1.55rem;font-weight:400;letter-spacing:.01em;
  color:var(--gold);margin-bottom:4px;line-height:1.2;
}
.hub-portao.hp-obras .hp-title{color:#8FBE8E}
.hub-portao .hp-tagline{
  font-family:var(--sf);font-size:.95rem;font-style:italic;font-weight:300;
  color:rgba(245,240,232,.55);margin-bottom:6px;letter-spacing:.005em;
}
.hub-portao .hp-sub{
  font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(196,163,90,.45);margin-bottom:20px;
}
.hub-portao .hp-stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  padding-top:18px;border-top:1px solid rgba(196,163,90,.08);
}
.hub-portao .hp-stat{text-align:left}
.hub-portao .hp-stat-v{
  font-family:var(--sf);font-size:1.4rem;font-weight:500;
  color:var(--cream,#F5F0E8);line-height:1.1;
}
.hub-portao.hp-obras .hp-stat-v{color:#E8F5E8}
.hub-portao .hp-stat-l{
  font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(245,240,232,.32);margin-top:4px;
}
.hub-portao .hp-pulse{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  background:#7DB88A;margin-right:6px;vertical-align:middle;
  box-shadow:0 0 0 0 rgba(125,184,138,.6);animation:hpPulse 2.4s infinite;
}
.hub-portao.hp-obras .hp-pulse{background:#7DB88A}
@keyframes hpPulse{
  0%{box-shadow:0 0 0 0 rgba(125,184,138,.55)}
  70%{box-shadow:0 0 0 8px rgba(125,184,138,0)}
  100%{box-shadow:0 0 0 0 rgba(125,184,138,0)}
}
/* DARK/LIGHT (CVO 08/06 · varredura de contraste): os cards do Hub tinham cores HARDCODED
   sem variante light (texto verde-claro #E8F5E8 e rótulo cream-translúcido) -> invisíveis no
   modo claro (ratio ~1.05). Override cirúrgico só no light, sem mexer no dark. */
body.light-mode .hub-portao.hp-obras .hp-stat-v{color:#1E5631}        /* verde escuro legível no claro */
body.light-mode .hub-portao .hp-stat-l{color:rgba(27,58,92,.55)}      /* rótulo navy translúcido */
body.light-mode .hub-portao .hp-stat-v{color:var(--txt)}              /* valor herda o texto do tema */

/* CVO card com mesma altura/respiração dos outros */
.hub-portao.hp-cvo .hp-title{color:var(--gold)}
.hub-portao.hp-cvo .hp-tagline{color:rgba(196,163,90,.45)}

/* Voltar ao hub: chip elegante */
.hub-back{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 20px !important;background:transparent !important;
  border:1px dashed rgba(196,163,90,.20) !important;border-radius:10px !important;
  cursor:pointer;transition:all .25s ease;
  opacity:0;animation:hubPortaoIn .5s ease both;animation-delay:.1s;
}
.hub-back:hover{
  border-color:var(--gold) !important;background:rgba(196,163,90,.04) !important;
  transform:translateY(-1px);
}
.hub-back .hb-arrow{
  font-size:.85rem;color:var(--gold);transition:transform .25s ease;
}
.hub-back:hover .hb-arrow{transform:translateX(-3px)}
.hub-back .hb-text{
  font-family:var(--sn);font-size:.7rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold);
}
.hub-back .hb-context{
  font-size:.58rem;color:rgba(196,163,90,.5);margin-left:4px;letter-spacing:.04em;
  text-transform:none;
}

/* Responsividade do hub */
@media(max-width:768px){
  .hub-portao{padding:24px 20px !important}
  .hub-portao .hp-title{font-size:1.3rem}
  .hub-portao .hp-tagline{font-size:.85rem}
  .hub-portao .hp-stats{grid-template-columns:1fr 1fr;gap:10px}
  .hub-portao .hp-stat-v{font-size:1.15rem}
}
@media(max-width:480px){
  .hub-portao{padding:20px 16px !important}
  .hub-portao .hp-title{font-size:1.15rem}
  .hub-portao .hp-stats{grid-template-columns:1fr 1fr;gap:8px}
  .hub-portao .hp-icon{font-size:1.6rem}
}