@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/ibm-plex-sans-400.77bc02670657.woff2") format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/ibm-plex-sans-500.f7016cd446d2.woff2") format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/ibm-plex-sans-600.196e3cbc5fee.woff2") format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/ibm-plex-sans-700.c277d7b83f8a.woff2") format('woff2')}
/* Condensada — usada só no que se OLHA (título de página, número de OS, valor,
   preço), nunca em texto corrido. Mesma superfamília da IBM Plex, então convive
   com a fonte de leitura sem parecer duas tipografias soltas. Subset latin:
   cobre todos os acentos do português (conferido com fontTools). */
@font-face{font-family:'IBM Plex Sans Condensed';font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/ibm-plex-sans-condensed-600.9a955d233e3f.woff2") format('woff2')}
@font-face{font-family:'IBM Plex Sans Condensed';font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/ibm-plex-sans-condensed-700.bc65f4c9d8ef.woff2") format('woff2')}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  /* ── Tokens do redesign — fonte única de verdade a partir daqui ── */
  --bg:#EEF1F4;
  --surface:#FFFFFF;
  --surface-2:#F7F8FA;
  --line:#DDE2E8;
  --line-strong:#C3CAD3;
  --ink:#14213D;
  --ink-2:#4A5568;
  --ink-3:#7B8794;
  --brand:#0B6E99;
  --brand-ink:#084F6E;
  --brand-tint:#E3F1F7;
  --ok:#1B7F4C;
  --ok-tint:#E6F4EC;
  --warn:#B54708;
  --warn-tint:#FDF1E6;
  --bad:#B42318;
  --bad-ink:#8B1B12;
  --bad-tint:#FCEBEA;
  --chamfer:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,0 100%);
  --r:6px;
  --r-lg:10px;
  --sb:240px;
  --sb-min:64px;
  --top:56px;
  --nav-m:64px;
  --t:.15s ease;

  /* ── Redesign "prancheta" (T.17) ──
     Famílias: uma de leitura, uma de exibição. Texto sobre a tinta (sidebar
     navy, faixa do dia) e o chanfro grande, usado em bloco — o pequeno
     (--chamfer) continua sendo o da etiqueta de status. */
  --sans:'IBM Plex Sans',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --cond:'IBM Plex Sans Condensed','Arial Narrow','IBM Plex Sans',sans-serif;
  --ink-on:#FFFFFF;
  --ink-on-2:rgba(255,255,255,.62);
  --ink-on-3:rgba(255,255,255,.34);
  --ink-line:rgba(255,255,255,.14);
  --ink-line-soft:rgba(255,255,255,.09);
  --ink-hover:rgba(255,255,255,.07);
  --brand-bright:#3AA8DE;
  --chamfer-lg:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%);
  /* Campo de chanfros: a mesma forma da etiqueta de OS, em tinta a 5%.
     Declarado uma vez aqui e reusado no shell, nos estados vazios e nas
     telas de acesso. */
  /* Amarelo do sino na topbar azul. Token proprio: nao e o --star das
     avaliacoes, que tem outro papel e pode mudar sozinho. */
  --bell:#F5C243;
  /* padding lateral do conteudo — a barra de acoes do formulario sangra
     exatamente por esse valor em cada breakpoint */
  --pc-pad:14px;
  --pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='%2314213D' fill-opacity='.05'%3E%3Cpath d='M8 8h20l8 8v20H8z'/%3E%3Cpath d='M44 44h16l4 4v16H44z'/%3E%3C/g%3E%3Cg fill='none' stroke='%2314213D' stroke-opacity='.05'%3E%3Cpath d='M44 8h16l4 4v16H44z'/%3E%3Cpath d='M8 44h20l8 8v16H8z'/%3E%3C/g%3E%3C/svg%3E");

  /* ── Aliases dos nomes antigos — removidos na Fase C, quando não houver mais uso ── */
  --primary:var(--brand);
  --primary-dark:var(--brand-ink);
  --primary-light:var(--brand-tint);
  --green:var(--ok);
  --green-bg:var(--ok-tint);
  --green-text:var(--ok);
  --red:var(--bad);
  --red-bg:var(--bad-tint);
  --red-text:var(--bad);
  --amber:var(--warn);
  --amber-bg:var(--warn-tint);
  --amber-text:var(--warn);
  --text-dark:var(--ink);
  --text-mid:var(--ink-2);
  --text-light:var(--ink-2);
  --text-xlight:var(--ink-3);
  --border:var(--line);
  --border-dark:var(--line-strong);
  --card-bg:var(--surface);
  --card-border:var(--line);
  --radius:var(--r);
  --radius-lg:var(--r-lg);
  --radius-xl:var(--r-lg);

  /* ── Sem equivalente novo ainda — preservados como estão até a fase que os trata (C) ── */
  --accent:var(--warn);
  --gray-mid:#5C6472;
  /* Superficie escura do sistema (menu, topbar, blocos de destaque).
     E a familia do --gray-mid escurecida para servir de fundo: --ink
     nao serve aqui porque ele e a cor do TEXTO do sistema inteiro. */
  --shell:#414855;
  --shell-2:#4C5462;
  --card-shadow:0 1px 2px rgba(18,23,31,.05),0 1px 1px rgba(18,23,31,.04);
  --green-border:#B7E1C8;
  --red-border:#F4B8B3;
  --amber-border:#F5D0AE;
  --blue-bg:var(--brand-tint);
  --blue-border:#B8DCEA;
  --blue-text:var(--brand-ink);
  --purple-bg:var(--surface-2);
  --purple-text:var(--ink-2);
  --purple-border:var(--line);
  --cyan-bg:var(--brand-tint);
  --cyan-text:var(--brand-ink);
  --cyan-border:#B8DCEA;
  --star:#f59e0b;
  --tooltip-bg:#1e293b;
  --avatar-bg:var(--brand-tint);
  --avatar-fg:var(--brand-ink);
  --transition:0.15s ease;
  --transition-slow:0.28s cubic-bezier(.4,0,.2,1);
}
html{font-size:16px;scroll-behavior:smooth}
body{font-family:'IBM Plex Sans',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg);color:var(--ink);min-height:100vh;line-height:1.5;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
@media (prefers-reduced-motion: reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}

/* ── TIPOGRAFIA DE EXIBIÇÃO (T.17) ──
   Condensada, só para o que se olha: título de página, número de OS, valor,
   preço. Texto que se LÊ continua na IBM Plex Sans normal. Não aplicar em
   parágrafo, label de formulário nem célula de texto de tabela. */
.disp{font-family:var(--cond);font-weight:700;letter-spacing:-.01em;line-height:1.05}
.disp-xl{font-size:2.6rem}
.disp-lg{font-size:1.9rem}
.disp-md{font-size:1.45rem}
.disp-sm{font-size:1.15rem;font-weight:600}
@media(max-width:768px){
  .disp-xl{font-size:2rem}
  .disp-lg{font-size:1.6rem}
}
a{color:var(--primary);text-decoration:none;transition:color var(--transition)}
a:hover{color:var(--primary-dark);text-decoration:none}
input,select,textarea,button{font-family:inherit}
::placeholder{color:var(--text-xlight)}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-dark);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--text-xlight)}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:38px;padding:0 14px;border-radius:var(--r);font-size:.86rem;font-weight:600;cursor:pointer;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);transition:background var(--transition),border-color var(--transition);white-space:nowrap;line-height:1.2;position:relative}
.btn:hover{background:var(--surface-2);text-decoration:none}
.btn:active{transform:scale(.97)}
.btn::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,0);transition:background .2s}
.btn:active::after{background:rgba(0,0,0,.05)}
.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff;clip-path:var(--chamfer)}
.btn-primary:hover{background:var(--brand-ink);border-color:var(--brand-ink);color:#fff}
.btn-primary:active::after{background:rgba(255,255,255,.15)}
.btn-outline{background:var(--surface);color:var(--ink-2);border-color:var(--line-strong)}
.btn-outline:hover{background:var(--surface-2);border-color:var(--line-strong);color:var(--ink)}
.btn-ghost{background:transparent;color:var(--ink-2);border-color:transparent}
.btn-ghost:hover{background:var(--surface-2);color:var(--ink)}
.btn-danger{background:var(--bad-tint);color:var(--bad);border-color:var(--red-border)}
.btn-danger:hover{background:var(--bad-tint);border-color:var(--red-border);color:var(--bad)}
.btn-success{background:var(--ok-tint);color:var(--ok);border-color:var(--green-border)}
.btn-success:hover{background:var(--ok-tint);border-color:var(--green-border);color:var(--ok)}
.btn-sm{height:32px;padding:0 10px;font-size:.8rem}
.btn-xs{height:26px;padding:0 8px;font-size:.72rem;border-radius:6px}
.btn-icon{padding:0;width:38px}
.w-full{width:100%}

/* ── LAYOUT ── */
.app-wrap{display:grid;grid-template-columns:var(--sb) 1fr;min-height:100vh;transition:grid-template-columns var(--transition-slow)}
body.sb-collapsed .app-wrap{grid-template-columns:var(--sb-min) 1fr}

/* ── Sidebar (T.18) ──
   A sidebar é a TINTA: navy sólido contra o papel do conteúdo. É o que cria
   hierarquia de verdade — antes sidebar, topbar e painéis eram todos brancos
   e só as bordas separavam. O item ativo é a etiqueta chanfrada branca, a
   mesma forma da etiqueta de status da OS. Só CSS: o base.html não mudou. */
.sidebar{
  position:sticky;top:0;height:100vh;
  background:var(--ink);border-right:1px solid var(--ink);
  color:var(--ink-on);
  display:flex;flex-direction:column;
  overflow:hidden;
  padding:14px 12px;
}
/* Quem rola e a NAVEGACAO, nao a sidebar inteira. Antes o menu media 1325px
   dentro de uma area de 900px e rolava por completo, entao o rodape - com o
   "Sair da conta" - caia centenas de pixels abaixo do fim da tela em todas
   as paginas. Agora marca e empresa ficam no topo, a lista rola no meio e o
   rodape fica sempre visivel.
   min-height:0 e obrigatorio: item flex nasce com min-height:auto e se
   recusa a encolher abaixo do conteudo, o que anularia o overflow. */
.sidebar-nav{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden}
.sidebar-nav::-webkit-scrollbar-thumb{background:var(--ink-line)}
.sidebar-nav::-webkit-scrollbar-thumb:hover{background:var(--ink-on-3)}
.brand{display:flex;align-items:center;gap:10px;padding:6px 8px 16px;overflow:hidden;white-space:nowrap;flex-shrink:0}
.brand-mark{width:30px;height:30px;background:var(--surface);clip-path:var(--chamfer);display:flex;align-items:center;justify-content:center;flex-shrink:0}
/* O SVG da marca traz stroke/fill="white" como atributo de apresentação, que
   perde para qualquer regra CSS — então a marca inverte (tinta sobre papel)
   sem precisar editar o template. */
.brand-mark svg [stroke]{stroke:var(--ink)}
.brand-mark svg [fill="white"]{fill:var(--ink)}
.brand-titles{min-width:0;overflow:hidden}
.brand-name{font-family:var(--cond);font-weight:700;font-size:1.22rem;letter-spacing:.01em;color:var(--ink-on);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-tagline{font-size:.68rem;color:var(--ink-on-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.sidebar-empresa{
  margin-bottom:12px;padding:8px 10px;
  background:transparent;border:1px solid var(--ink-line);border-radius:var(--r);
  overflow:hidden;flex-shrink:0;
}
.empresa-nome{font-weight:600;font-size:.78rem;color:var(--ink-on);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.empresa-papel{font-size:.68rem;color:var(--ink-on-2)}

.nav-section{padding:10px 0 2px;overflow:hidden}
.nav-lbl{padding:0 8px 4px;font-size:.72rem;color:var(--ink-on-3);white-space:nowrap}
.nav-a{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;
  color:var(--ink-on-2);
  font-size:.86rem;
  position:relative;
  margin:1px 0;
  border-radius:var(--r);
  white-space:nowrap;
  overflow:hidden;
}
.nav-a:hover{background:var(--ink-hover);color:var(--ink-on);text-decoration:none}
/* Item ativo = etiqueta chanfrada branca. Dispensa a barrinha lateral que
   existia antes: a própria forma já marca onde você está. */
.nav-a.active{background:var(--surface);color:var(--ink);font-weight:600;clip-path:var(--chamfer)}
.nav-a.active:hover{background:var(--surface);color:var(--ink)}
.nav-a .nav-icon{font-size:16px;flex-shrink:0;width:16px;text-align:center}
.nav-label{white-space:nowrap}
.nav-sep{height:1px;background:var(--ink-line);margin:6px 8px}

.sidebar-footer{border-top:1px solid var(--ink-line);padding-top:10px;margin-top:auto;flex-shrink:0;display:flex;flex-direction:column;gap:8px}
.user-card{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--r);cursor:default;overflow:hidden;text-decoration:none}
.user-card:hover{background:var(--ink-hover)}
.user-card-info{min-width:0}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.8rem;flex-shrink:0}
/* Fora da sidebar o avatar é navy sobre branco; dentro dela precisa inverter,
   senão vira um círculo navy invisível sobre a tinta. */
.sidebar .avatar{background:var(--ink-on);color:var(--ink)}
.user-avatar-img{width:32px;height:32px;border-radius:50%;object-fit:cover;flex-shrink:0;border:1px solid var(--line)}
.sidebar .user-avatar-img{border-color:var(--ink-line)}
.user-name{font-size:.82rem;font-weight:600;color:var(--ink-on);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-email{font-size:.68rem;color:var(--ink-on-2);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px}
.btn-logout{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:7px;background:transparent;border:1px solid var(--ink-line);border-radius:var(--r);color:var(--ink-on-2);font-size:.78rem;font-weight:500;cursor:pointer;text-decoration:none;overflow:hidden;white-space:nowrap}
.btn-logout:hover{background:var(--bad);border-color:var(--bad);color:#fff;text-decoration:none}
.btn-install-app{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:7px;background:transparent;border:1px solid var(--ink-line);border-radius:var(--r);color:var(--ink-on-2);font-size:.78rem;font-weight:500;cursor:pointer;overflow:hidden;white-space:nowrap}
.btn-install-app:hover{background:var(--ink-hover);border-color:var(--ink-on-3);color:var(--ink-on)}
body.sb-collapsed .btn-install-app .logout-label{display:none}

/* ── SIDEBAR COLLAPSED (desktop) ── */
body.sb-collapsed .brand{padding:6px 0 16px;justify-content:center;gap:0}
body.sb-collapsed .brand-name,
body.sb-collapsed .brand-tagline{display:none}
body.sb-collapsed .sidebar-empresa{display:none}
body.sb-collapsed .nav-lbl{display:none}
body.sb-collapsed .nav-label{display:none}
body.sb-collapsed .nav-a{justify-content:center;padding:10px 0;gap:0}
body.sb-collapsed .user-card{justify-content:center;padding:8px 0;gap:0}
body.sb-collapsed .user-name,
body.sb-collapsed .user-email{display:none}
body.sb-collapsed .btn-logout .logout-label{display:none}
body.sb-collapsed #sidebar-toggle-icon{transform:scaleX(-1)}

/* Main content */
/* T.34: a textura de chanfros saiu daqui. Atras dos paineis ela competia
   com a leitura em telas cheias como o dashboard. O padrao continua nas
   telas de acesso, onde o fundo e vazio e ele cumpre o papel de dar vida. */
.main{min-height:100vh;display:flex;flex-direction:column;min-width:0}
/* ── Topbar (T.30) ──
   Mesma tinta da sidebar (--ink), com os MESMOS tokens de texto, borda e
   hover que ela usa — não um segundo azul parecido. As duas superfícies
   viram uma peça só de tinta em volta do conteúdo em papel.
   Continua sticky, então o conteúdo não passa por baixo ao rolar. */
.topbar{
  height:var(--top);
  background:var(--shell);
  color:var(--ink-on);
  padding:0 28px;
  display:flex;align-items:center;gap:12px;
  position:sticky;top:0;z-index:200;flex-shrink:0;
}
.topbar .crumb-empresa{color:var(--ink-on-2)}
.topbar .crumb-empresa::after{color:var(--ink-on-3)}
.topbar .page-title{color:var(--ink-on)}
.topbar .breadcrumb,.topbar .breadcrumb a{color:var(--ink-on-2)}
.topbar .breadcrumb a:hover{color:var(--ink-on)}
.topbar .breadcrumb .sep{color:var(--ink-on-3)}
.topbar .menu-btn,.topbar .sidebar-toggle,.topbar .icon-btn{color:var(--ink-on)}
.topbar .menu-btn:hover,.topbar .sidebar-toggle:hover,
.topbar .icon-btn:hover,.topbar .tb-user:hover{background:var(--ink-hover);color:var(--ink-on)}
/* Sino em amarelo: é o único aviso da faixa e precisa saltar da tinta. */
.topbar #notif-btn .bi{color:var(--bell)}
.topbar .notif-badge{border-color:var(--shell)}
.topbar .tb-avatar{background:var(--ink-on);color:var(--shell)}
.topbar .tb-avatar-img{border-color:var(--ink-line)}
/* Botões de ação da tela (Imprimir, Editar, Nova OS...) sobre a tinta */
.topbar .btn{background:transparent;border-color:var(--ink-line);color:var(--ink-on)}
.topbar .btn:hover{background:var(--ink-hover);border-color:var(--ink-on-3);color:var(--ink-on)}
.topbar .btn-primary{background:var(--ink-on);border-color:var(--ink-on);color:var(--shell)}
.topbar .btn-primary:hover{background:var(--bg);border-color:var(--bg);color:var(--shell)}
.topbar .btn-ghost{border-color:transparent}
.tb-left{display:flex;align-items:center;gap:12px;min-width:0}
.menu-btn{display:none;background:none;border:none;color:var(--ink-2);cursor:pointer;padding:6px;border-radius:var(--r);align-items:center;justify-content:center;font-size:18px}
.menu-btn:hover{background:var(--line);color:var(--ink)}
.sidebar-toggle{background:none;border:none;color:var(--ink-2);cursor:pointer;padding:6px 8px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-size:18px}
.sidebar-toggle:hover{background:var(--line);color:var(--brand)}
/* Empresa e página deixam de ser duas linhas empilhadas e viram uma trilha
   só: "Empresa / Página". O separador entra por CSS, sem tocar no template. */
.tb-titles{min-width:0;overflow:hidden;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.crumb-empresa{font-size:.82rem;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}
.crumb-empresa::after{content:'/';margin-left:6px;color:var(--line-strong)}
.page-title{font-size:.82rem;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.page-title:empty{display:none}
/* Quando a tela define um breadcrumb proprio ("Ordens de servico / #OFC000381"),
   ele ja diz onde voce esta - entao o titulo da pagina sairia repetido ao lado.
   :has() resolve sem tocar em template (o projeto ja usa essa tecnica no
   backdrop do bottom sheet). */
.tb-titles:has(.breadcrumb) .page-title{display:none}
.breadcrumb{display:flex;align-items:center;gap:5px;font-size:.82rem;color:var(--ink-3)}
.breadcrumb a{color:var(--ink-3)}.breadcrumb a:hover{color:var(--brand)}
.breadcrumb .sep{color:var(--line-strong)}
.tb-right{display:flex;align-items:center;gap:8px;flex-shrink:0;margin-left:auto}
.tb-actions-wrap{display:flex;align-items:center;gap:6px;flex-shrink:0}
.tb-actions-wrap:empty{display:none}
.icon-btn{width:36px;height:36px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;color:var(--ink-2);position:relative;background:none;border:none;cursor:pointer;font-size:17px}
.icon-btn:hover{background:var(--line)}
.notif-badge{position:absolute;top:3px;right:3px;min-width:15px;height:15px;background:var(--bad);color:#fff;border-radius:99px;font-size:.58rem;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 3px;line-height:1;border:2px solid var(--bg)}
.tb-user{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:var(--r);text-decoration:none}
.tb-user:hover{background:var(--line)}
.tb-user-name{display:none}
.tb-avatar{width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700}
.tb-avatar-img{width:30px;height:30px;border-radius:50%;object-fit:cover;border:1px solid var(--line)}

/* Dropdown de notificações */
.notif-wrap{position:relative}
.notif-dd{position:absolute;right:0;top:calc(100% + 8px);width:310px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:0 8px 32px rgba(18,23,31,.16);z-index:400;overflow:hidden}
.notif-dd[hidden]{display:none}
.notif-dd-head{padding:11px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;font-size:.83rem;font-weight:600;color:var(--ink)}
.notif-dd-head i{color:var(--brand);font-size:13px}
.notif-link{font-size:.72rem;color:var(--brand);font-weight:500}
.notif-item{display:flex;align-items:flex-start;gap:10px;padding:9px 16px;text-decoration:none;border-bottom:1px solid var(--line)}
.notif-item:hover{background:var(--surface-2);text-decoration:none}
.notif-item-plan{background:var(--warn-tint)}
.notif-item-plan.is-danger{background:var(--bad-tint)}
.notif-ico{width:34px;height:34px;border-radius:8px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--ink-2);font-size:12px}
.notif-ico.is-today{background:var(--brand-tint);color:var(--brand)}
.notif-ico.is-warn{background:var(--warn-tint);color:var(--warn)}
.notif-ico.is-danger{background:var(--bad-tint);color:var(--bad)}
.notif-body{min-width:0;flex:1}
.notif-title{font-size:.8rem;font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notif-sub{font-size:.71rem;color:var(--ink-3)}
.notif-lbl{padding:8px 16px 2px;font-size:.68rem;font-weight:600;color:var(--ink-3)}
.notif-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;margin-top:5px}
.notif-dot.is-ok{background:var(--ok)}
.notif-dot.is-warn{background:var(--warn)}
.notif-empty{padding:28px 16px;text-align:center;color:var(--ink-3)}
.notif-empty i{font-size:1.8rem;display:block;margin-bottom:8px;opacity:.35}
.notif-empty span{font-size:.8rem}
.notif-dd-foot{padding:9px 16px;border-top:1px solid var(--line);text-align:center}

/* Aviso de vencimento de plano */
.plan-banner{color:var(--warn);background:var(--warn-tint);border:1px solid var(--amber-border);border-left:3px solid var(--warn);border-radius:var(--r);margin:0 28px 4px;padding:9px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:.8rem;flex-wrap:wrap}
.plan-banner.is-danger{color:var(--bad);background:var(--bad-tint);border-color:var(--red-border);border-left-color:var(--bad)}
.plan-banner-msg{display:flex;align-items:center;gap:9px}
.plan-banner-actions{display:flex;align-items:center;gap:14px}
.plan-banner-sub{opacity:.85;font-size:.73rem}
.plan-banner-close{background:none;border:none;color:inherit;opacity:.7;cursor:pointer;width:24px;height:24px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.plan-banner-close:hover{opacity:1;background:rgba(0,0,0,.06)}

.page-content{padding:28px;flex:1;max-width:1280px;width:100%;margin:0 auto}
.page-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:20px;gap:16px;flex-wrap:wrap}
.page-header-left .page-h1{font-family:var(--cond);font-size:1.9rem;font-weight:700;color:var(--ink);margin-bottom:2px;letter-spacing:-.01em;line-height:1.1}
.page-header-left .page-sub{font-size:.88rem;color:var(--ink-3);font-weight:400}
.page-header-right{display:flex;gap:8px;flex-shrink:0;flex-wrap:wrap;align-items:center}

/* Mobile overlay */
.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:250;backdrop-filter:blur(3px)}
.overlay.show{display:block}

/* Link "Início" nas páginas públicas/autenticação (fora do app-wrap) */
.auth-home-link{position:fixed;top:16px;left:20px;z-index:999;display:inline-flex;align-items:center;gap:7px;padding:7px 14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);font-size:.8rem;font-weight:500;color:var(--ink-2);text-decoration:none}
.auth-home-link:hover{color:var(--ink);text-decoration:none}
.auth-home-link i{font-size:12px;color:var(--brand)}

/* ── TELAS DE AUTENTICAÇÃO (login, primeiro acesso, esqueci/trocar senha) ──
   Cartão centralizado 400px com a marca chanfrada — mesma paleta e fonte
   do resto do app, sem gradiente. Compartilhado pelos 4 templates de
   auth/*.html pra evitar reimplementação por página. */
/* Fundo das telas de acesso (T.24): campo de chanfros - a mesma forma da
   etiqueta de OS, repetida em tinta a 5%. Um clarao radial no centro mantem
   a area do cartao limpa, entao o padrao so aparece nas bordas da tela.
   SVG embutido como data URI: nada externo, e o CSP ja libera img-src data:. */
.auth-wrap{
  min-height:100vh;display:grid;place-items:center;padding:20px;
  background-color:var(--bg);
  background-image:
    radial-gradient(ellipse 560px 420px at 50% 46%,var(--bg) 38%,rgba(240,242,245,0) 100%),
    var(--pattern);
  background-repeat:no-repeat,repeat;
}
.auth-box{width:100%;max-width:400px}
.auth-brand{text-align:center;margin-bottom:28px}
.auth-mark{width:52px;height:52px;background:var(--brand);clip-path:var(--chamfer);display:flex;align-items:center;justify-content:center;font-size:22px;color:#fff;margin:0 auto 14px}
.auth-brand-name{font-family:var(--cond);font-size:1.7rem;font-weight:700;color:var(--ink);letter-spacing:.01em}
.auth-brand-sub{font-size:.78rem;color:var(--ink-2);margin-top:4px}
.auth-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:32px;clip-path:var(--chamfer-lg)}
@media(max-width:440px){.auth-card{padding:22px}}
.auth-title{font-family:var(--cond);font-size:1.6rem;font-weight:700;color:var(--ink);margin-bottom:4px;line-height:1.1}
.auth-sub{font-size:.82rem;color:var(--ink-2);margin-bottom:22px;line-height:1.6}
.auth-notice{background:var(--warn-tint);border:1px solid var(--amber-border);border-radius:var(--r);padding:11px 14px;font-size:.82rem;color:var(--warn);margin-bottom:20px;display:flex;gap:8px;align-items:flex-start;line-height:1.5}
.auth-divider{height:1px;background:var(--line);margin:20px 0}
.auth-links{display:flex;flex-direction:column;gap:2px;margin-top:4px}
.auth-link{font-size:.77rem;color:var(--ink-2);text-align:center;padding:8px 12px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;gap:6px}
.auth-link:hover{background:var(--surface-2);color:var(--ink);text-decoration:none}
.auth-link .bi{font-size:13px;color:var(--ink-3)}
.auth-back{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);text-align:center;font-size:.8rem;color:var(--ink-3)}
.auth-back a{color:inherit}
.auth-back a:hover{color:var(--brand)}
.pw-wrap{position:relative}
.pw-wrap .form-control{padding-right:40px}
.pw-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--ink-3);padding:4px;display:flex;align-items:center;font-size:16px;line-height:1}
.pw-toggle:hover{color:var(--ink)}
.captcha-box{background:var(--surface-2);border:1px solid var(--line-strong);border-radius:var(--r);padding:12px 14px;display:flex;align-items:center;gap:12px;margin-bottom:4px}
.captcha-expr{font-size:1.1rem;font-weight:700;color:var(--brand-ink);white-space:nowrap;min-width:80px;letter-spacing:.5px}
.captcha-eq{color:var(--ink-2);font-weight:600}
.captcha-box .form-control{flex:1;padding:8px 12px;font-size:.95rem;font-weight:600;max-width:90px}
.auth-box-wide{max-width:520px}
.auth-notice.is-info{background:var(--blue-bg);border-color:var(--blue-border);color:var(--blue-text)}

/* Estado "enviado" das telas de solicitação pública (LGPD) */
.result-wrap{text-align:center;padding:20px 0}
.result-ico{width:60px;height:60px;border-radius:50%;background:var(--ok-tint);border:2px solid var(--green-border);display:flex;align-items:center;justify-content:center;margin:0 auto 18px;font-size:1.6rem;color:var(--ok)}
.result-title{font-size:1.05rem;font-weight:700;color:var(--ink);margin-bottom:8px}
.result-sub{font-size:.84rem;color:var(--ink-2);line-height:1.65;margin-bottom:16px}

/* Consentimento LGPD (checkbox + texto) */
.consent-row{display:flex;align-items:flex-start;gap:10px;cursor:pointer;margin-top:6px}
.consent-row input[type=checkbox]{margin-top:3px;flex-shrink:0;accent-color:var(--brand);width:16px;height:16px}
.consent-row span{font-size:.78rem;color:var(--ink-2);line-height:1.6}

/* Alternador CPF/CNPJ (radio como segmento) */
.doc-toggle{display:flex;background:var(--surface-2);border:1px solid var(--line-strong);border-radius:var(--r);overflow:hidden;margin-bottom:10px}
.doc-toggle label{flex:1;text-align:center;padding:9px 12px;font-size:.82rem;font-weight:500;color:var(--ink-2);cursor:pointer;user-select:none}
.doc-toggle input[type=radio]{position:absolute;opacity:0;pointer-events:none}
.doc-toggle input[type=radio]:checked+label{background:var(--brand);color:#fff;font-weight:600}
.doc-toggle input[type=radio]:focus-visible+label{outline:2px solid var(--brand);outline-offset:-2px}

/* Grupo de opções em rádio (solicitar exclusão) */
.radio-group{display:flex;flex-direction:column;gap:8px}
.radio-opt{display:flex;align-items:flex-start;gap:9px;padding:10px 12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);cursor:pointer}
.radio-opt:hover{border-color:var(--line-strong)}
.radio-opt input{margin-top:2px;accent-color:var(--brand)}
.radio-opt span{font-size:.83rem;color:var(--ink);line-height:1.4}

/* Verificação de e-mail (código de 6 dígitos) */
.envelope-icon{font-size:2.8rem;margin-bottom:16px;display:block;color:var(--brand)}
.email-highlight{color:var(--brand-ink);font-weight:600}
.code-input{width:100%;padding:14px;text-align:center;font-size:1.8rem;font-weight:700;letter-spacing:10px;background:var(--surface);border:2px solid var(--line-strong);border-radius:var(--r);color:var(--ink);font-family:'SF Mono','Consolas',monospace}
.code-input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-tint)}
.code-input::placeholder{letter-spacing:8px}
.resend{margin-top:16px;font-size:.82rem;color:var(--ink-3);text-align:center}
.resend a{color:var(--brand);font-weight:500}
.cnpj-feedback{font-size:.74rem;margin-top:5px;display:none}
.cnpj-feedback.ok{display:block;color:var(--ok)}
.cnpj-feedback.bad{display:block;color:var(--bad)}

/* ── MEU PERFIL ── */
.perfil-grid{display:grid;grid-template-columns:300px 1fr;gap:20px;align-items:start}
.perfil-col{display:flex;flex-direction:column;gap:20px}
.perfil-avatar{width:110px;height:110px;border-radius:50%;object-fit:cover;border:3px solid var(--brand)}
.perfil-avatar-placeholder{width:110px;height:110px;border-radius:50%;background:var(--ink);display:inline-flex;align-items:center;justify-content:center;font-size:2.5rem;font-weight:700;color:#fff}
.form-control-file{font-size:.78rem}
@media(max-width:900px){.perfil-grid{grid-template-columns:1fr}}

/* ── DASHBOARD ── */
.dash-periodo-info{display:flex;align-items:center;gap:8px;background:var(--brand-tint);border:1px solid var(--line);border-radius:var(--r-lg);padding:9px 16px;margin-bottom:14px;font-size:.82rem;color:var(--ink-2)}
.dash-periodo-info[hidden]{display:none}
.dash-periodo-info i{color:var(--brand);flex-shrink:0}
.dash-periodo-info .clear-link{margin-left:auto;font-size:.75rem;color:var(--brand);opacity:.8;flex-shrink:0}
.filtro-avancado-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.filtro-datas-wrap{display:none;align-items:center;gap:10px;flex-wrap:wrap}
.filtro-datas-wrap.show{display:flex}
.filtro-datas-sep{color:var(--ink-3);font-size:.8rem}
.dash-toggle{display:flex;align-items:center;gap:10px;margin-bottom:16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:10px 16px}
.dash-toggle-label{font-size:.77rem;color:var(--ink-2);font-weight:600;display:flex;align-items:center;gap:6px}
.dash-toggle-label i{color:var(--brand)}
.charts-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.chart-head-extra{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-left:auto}
.chart-box{height:240px}
.chart-box.is-md{height:220px}
.chart-box.is-sm{height:200px}
.chart-box.is-xs{height:160px}
.chart-empty{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--ink-3)}
.chart-empty i{font-size:2rem}
.chart-empty span{font-size:.8rem}
.donut-wrap{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.donut-chart-box{height:200px;flex:1;min-width:160px}
.donut-legend{display:flex;flex-direction:column;gap:10px;min-width:130px}
.donut-legend-item{display:flex;align-items:center;gap:8px}
.donut-dot{width:12px;height:12px;border-radius:3px;flex-shrink:0}
.donut-dot.is-gray{background:var(--gray-mid)}
.donut-dot.is-brand{background:var(--brand)}
.donut-dot.is-ok{background:var(--ok)}
.donut-legend-lbl{font-size:.7rem;color:var(--ink-3)}
.donut-legend-val{font-family:var(--cond);font-size:1.25rem;font-weight:700;color:var(--ink)}
.donut-legend-total{border-top:1px solid var(--line);padding-top:8px}
.donut-legend-total .donut-legend-val{font-size:1.2rem;font-weight:800}
.quick-action-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.quick-action-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px 12px;border-radius:var(--r-lg);background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line);text-decoration:none;text-align:center;font-weight:600;font-size:.78rem;cursor:pointer}
.quick-action-btn i{font-size:1.5rem}
.quick-action-btn:hover{border-color:var(--brand);color:var(--brand-ink);text-decoration:none}
.quick-action-btn.is-brand{background:var(--brand-tint);color:var(--brand-ink)}
.quick-action-btn.is-ok{background:var(--ok-tint);color:var(--ok)}
.quick-action-btn.is-bad{background:var(--bad-tint);color:var(--bad)}
.quick-action-btn.is-purple{background:var(--purple-bg);color:var(--purple-text)}
@media(max-width:480px){.quick-action-btn{padding:12px 8px}}
.upcoming-badge{font-size:.72rem;background:var(--brand-tint);color:var(--brand);border-radius:99px;padding:2px 10px;font-weight:600}
@media(max-width:900px){.charts-grid{grid-template-columns:1fr}}

/* ── CARDS (visual .panel) ── */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.card-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap;gap:10px}
.card-title{font-size:.95rem;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:7px}
.card-title .bi{color:var(--brand);font-size:15px}
.card-body{padding:18px}
.card-footer{padding:14px 18px;border-top:1px solid var(--line);background:var(--surface-2)}

/* ── KPI (faixa de indicadores — substitui stats-grid/stat-card/fin-card
   a partir da Fase C, tela por tela) ── */
.kpi{display:grid;grid-template-columns:repeat(4,1fr);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);margin-bottom:20px;overflow:hidden}
/* Telas com 2 ou 3 indicadores deixavam celula vazia na grade de 4. */
@media(min-width:769px){
  .kpi:has(>:last-child:nth-child(3)){grid-template-columns:repeat(3,1fr)}
  .kpi:has(>:last-child:nth-child(2)){grid-template-columns:repeat(2,1fr)}
}
.kpi>div,.kpi>a{padding:18px 22px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.kpi>a{color:inherit;text-decoration:none;display:block}
.kpi>a:hover{background:var(--surface-2);text-decoration:none}
.kpi>div:nth-child(4n),.kpi>a:nth-child(4n){border-right:0}
.kpi>div:nth-last-child(-n+4),.kpi>a:nth-last-child(-n+4){border-bottom:0}
.k-label{font-size:.82rem;color:var(--ink-2);display:flex;align-items:center;gap:8px}
.k-label i{width:8px;height:8px;clip-path:var(--chamfer);background:var(--c,var(--brand));flex-shrink:0}
.k-value{font-family:var(--cond);font-size:1.75rem;font-weight:700;letter-spacing:-.01em;margin:6px 0 2px;line-height:1.1;white-space:nowrap;color:var(--c,var(--ink))}
.k-delta{font-size:.8rem;color:var(--ink-3)} .k-delta b{font-weight:600}
.k-delta.up{color:var(--ok)} .k-delta.down{color:var(--bad)}
@media(max-width:768px){
  .kpi{grid-template-columns:repeat(2,1fr)}
  .kpi>div:nth-child(4n),.kpi>a:nth-child(4n){border-right:1px solid var(--line)}
  .kpi>div:nth-child(2n),.kpi>a:nth-child(2n){border-right:0}
  .kpi>div:nth-last-child(-n+4),.kpi>a:nth-last-child(-n+4){border-bottom:1px solid var(--line)}
  .kpi>div:last-child,.kpi>a:last-child,.kpi>div:nth-last-child(2),.kpi>a:nth-last-child(2){border-bottom:0}
}
@media(max-width:480px){
  .kpi{grid-template-columns:1fr}
  .kpi>div,.kpi>a{border-right:0!important}
  .kpi>div:last-child,.kpi>a:last-child{border-bottom:0}
}

/* ── CARD MOBILE ÚNICO (substitui .cli-card/.os-card/.vnd-card/… a partir
   da Fase C). Cor de faixa via var(--c,...); ver GUIA_REDESIGN.md sobre a
   exceção de style="" permitida só pra essa variável. ── */
/* Lista de cards mobile dentro de um painel. Sem isso os cards encostam
   na borda do painel e o texto fica em cima da linha. */
.m-cards{padding:4px 12px 12px}
/* display:block e obrigatorio: quando o .m-card e um <a> (lista de vendas
   do dashboard) ele nasce inline, a barra colorida do ::before estica por
   toda a lista em vez de ficar em cada card, e o overflow:hidden corta o
   inicio do texto. */
.m-card{display:block;border:1px solid var(--line);border-radius:var(--r);padding:12px 12px 12px 14px;margin:6px 0;background:var(--surface);position:relative;overflow:hidden;color:inherit;text-decoration:none}
a.m-card:hover{background:var(--surface-2);text-decoration:none}
.m-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--c,var(--brand))}
.m-card-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:.9rem}
.m-card-val{font-family:var(--cond);font-size:1.05rem;font-weight:700;white-space:nowrap}
.m-card-meta{font-size:.76rem;color:var(--ink-3);margin-top:2px}
.m-card-foot{display:flex;justify-content:space-between;align-items:center;margin-top:10px}
.m-card-foot .btn{height:40px}

/* ── STAT CARDS (legado — sai de uso conforme a Fase C migra cada tela pro .kpi) ── */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(245px,1fr));gap:16px;margin-bottom:24px}
.stat-card{
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:var(--radius-lg);
  padding:20px;
  position:relative;overflow:hidden;
  box-shadow:var(--card-shadow);
  transition:all var(--transition-slow);
  cursor:default;
}
.stat-card:hover{box-shadow:var(--card-shadow)}
.stat-card.is-link{cursor:pointer;text-decoration:none}
.stat-card.is-link:hover{text-decoration:none}
.stat-card::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent,var(--primary));border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.stat-card-icon{
  width:46px;height:46px;border-radius:12px;
  background:var(--icon-bg,var(--brand-tint));
  display:flex;align-items:center;justify-content:center;
  font-size:20px;color:var(--icon-color,var(--brand));
  margin-bottom:14px;
}
.stat-card-label{font-size:.8rem;font-weight:400;color:var(--ink-2);margin-bottom:5px}
.stat-card-value{font-family:var(--cond);font-size:clamp(1.3rem,4vw,1.7rem);font-weight:700;color:var(--accent,var(--text-dark));line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.4px;white-space:nowrap}
.stat-card-sub{font-size:.72rem;color:var(--text-xlight);margin-top:6px}
.stat-card-tags{position:absolute;top:12px;right:12px;display:flex;gap:4px;z-index:2}
.stat-card-tag{font-size:.6rem;font-weight:700;letter-spacing:.4px;padding:3px 8px;border-radius:99px;text-decoration:none;background:var(--accent,var(--primary));color:#fff;opacity:.82;transition:opacity .15s;white-space:nowrap}
.stat-card-tag:hover{opacity:1}

/* ── TABLE ── */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table{width:100%;border-collapse:collapse;font-size:.86rem}
.table thead tr{background:var(--surface-2)}
.table th{
  padding:10px 18px;text-align:left;
  font-size:.78rem;font-weight:500;
  color:var(--ink-3);background:var(--surface-2);
  border-bottom:1px solid var(--line);white-space:nowrap;
}
.table td{padding:12px 18px;border-bottom:1px solid var(--line);color:var(--ink-2);vertical-align:middle;font-variant-numeric:tabular-nums}
.table tr:last-child td{border-bottom:none}
.table tbody tr{transition:background .12s}
.table tbody tr:hover td{background:var(--surface-2)}
.table tbody tr[onclick],.table tbody tr.row-link{cursor:pointer}
.table tbody tr[onclick]:hover td,.table tbody tr.row-link:hover td{background:var(--surface-2)}
.table tbody tr[onclick]:hover td:first-child,.table tbody tr.row-link:hover td:first-child{box-shadow:inset 3px 0 0 var(--brand)}
.td-main{color:var(--ink);font-weight:600;line-height:1.4}
.td-sub{font-size:.76rem;color:var(--ink-3);margin-top:2px;line-height:1.3;display:block}
.empty-state{text-align:center;padding:52px 20px}
.empty-state .empty-icon{font-size:2.8rem;color:var(--line-strong);margin-bottom:14px;line-height:1}
.empty-state .empty-title{font-size:.95rem;font-weight:600;color:var(--ink-2);margin-bottom:6px}
.empty-state .empty-sub{font-size:.8rem;color:var(--ink-3)}

/* ── BADGES (visual .pill) ── */
.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:99px;font-size:.74rem;font-weight:500;white-space:nowrap;text-decoration:none}
a.badge:hover{text-decoration:none}
.badge i{font-size:8px}
.row-error{background:var(--bad-tint)}
.col-num{width:80px}
.import-msg{font-size:.78rem}
.badge-green{background:var(--ok-tint);color:var(--ok);border:1px solid var(--green-border)}
.badge-red{background:var(--bad-tint);color:var(--bad);border:1px solid var(--red-border)}
.badge-amber{background:var(--warn-tint);color:var(--warn);border:1px solid var(--amber-border)}
.badge-blue{background:var(--blue-bg);color:var(--blue-text);border:1px solid var(--blue-border)}
.badge-gray{background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line)}
.badge-purple{background:var(--purple-bg);color:var(--purple-text);border:1px solid var(--purple-border)}
.badge-cyan{background:var(--cyan-bg);color:var(--cyan-text);border:1px solid var(--cyan-border)}

/* ── ETIQUETA DE OS (elemento de assinatura) ── */
.os-tag{
  display:inline-flex;align-items:center;
  padding:6px 16px 6px 12px;
  font-size:.74rem;font-weight:600;
  color:#fff;white-space:nowrap;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%);
  -webkit-print-color-adjust:exact;print-color-adjust:exact;
}
.os-tag-registrada{background:var(--gray-mid)}
.os-tag-em_andamento{background:var(--primary)}
.os-tag-concluida{background:var(--green)}
.os-tag-cancelada{background:var(--bad)}

/* ── VALORES MONETÁRIOS ──
   tabular-nums alinha as colunas na vírgula.
   clamp faz a fonte encolher em vez de o texto ser cortado. */
.valor{
  font-family:var(--cond);
  font-variant-numeric:tabular-nums;
  letter-spacing:0;white-space:nowrap;
  font-weight:600;color:var(--text-dark);
}
.valor-grande{font-size:clamp(1.05rem,4.5vw,1.6rem);font-weight:700}
.valor-positivo{color:var(--green)}
.valor-negativo{color:var(--red)}

/* ── FORMS ── */
.form-group{margin-bottom:18px}
.form-label{display:block;font-size:.78rem;font-weight:500;color:var(--text-dark);margin-bottom:7px;letter-spacing:.01em}
.form-label .req{color:var(--red)}
.form-control{
  width:100%;padding:9px 12px;
  background:var(--surface);border:1px solid var(--line-strong);
  border-radius:var(--r);color:var(--ink);font-size:.88rem;
  transition:border-color var(--transition),box-shadow var(--transition);
  line-height:1.4;
}
.form-control:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)}
.form-control:hover:not(:focus){border-color:var(--line-strong)}
.form-control:disabled{background:var(--surface-2);color:var(--ink-3);cursor:not-allowed}
select.form-control{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:34px}
textarea.form-control{resize:vertical;min-height:84px}
.form-hint{font-size:.72rem;color:var(--text-xlight);margin-top:5px;line-height:1.4}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.form-section{margin-bottom:24px;padding-bottom:24px;border-bottom:1px solid var(--border)}
.form-section-title{font-size:.82rem;font-weight:600;color:var(--text-dark);margin-bottom:16px;display:flex;align-items:center;gap:7px}
.form-section-title .bi{color:var(--primary);font-size:14px}

/* ── BARRA DE AÇÃO FIXA NO FORMULÁRIO ──
   No mobile, vira sticky acima do bottom-nav — o botão de salvar não
   fica escondido no fim de uma rolagem longa. */
.form-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}
@media(max-width:768px){
  .form-actions{
    position:sticky;bottom:calc(72px + env(safe-area-inset-bottom));
    background:var(--card-bg);
    border-top:1px solid var(--border);
    margin:20px calc(-1 * var(--pc-pad)) 0;padding:12px var(--pc-pad);
    box-shadow:0 -2px 10px rgba(18,23,31,.05);
    z-index:50;
  }
  .form-actions .btn{flex:1;justify-content:center}
}

/* ── ALERTS ── */
.alert{padding:12px 16px;border-radius:var(--r);font-size:.85rem;margin-bottom:12px;display:flex;align-items:flex-start;gap:10px;border:1px solid transparent;line-height:1.5}
.alert .bi{font-size:15px;flex-shrink:0;margin-top:1px}
.alert-success{background:var(--ok-tint);border-color:var(--green-border);color:var(--ok)}
.alert-error{background:var(--bad-tint);border-color:var(--red-border);color:var(--bad)}
.alert-warning{background:var(--warn-tint);border-color:var(--amber-border);color:var(--warn)}
.alert-info{background:var(--blue-bg);border-color:var(--blue-border);color:var(--blue-text)}

/* ── SEARCH ── */
.search-wrap{display:flex;align-items:center;gap:9px;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius);padding:8px 14px;transition:all var(--transition)}
.search-wrap-flex{flex:1;min-width:220px}
.form-narrow{max-width:600px}
.btn-danger-solid{background:var(--bad);color:#fff;border-color:var(--bad)}
.btn-danger-solid:hover{background:var(--bad-ink);border-color:var(--bad-ink);color:#fff}

/* ── Confirmação de ação destrutiva (tela inteira, não o confirmModal) ── */
.danger-confirm{max-width:500px;margin:40px auto}
.danger-confirm .card-body{text-align:center;padding:40px 32px}
.danger-confirm-icon{width:64px;height:64px;border-radius:50%;background:var(--red-bg);border:2px solid var(--red-border);display:flex;align-items:center;justify-content:center;margin:0 auto 20px;font-size:28px;color:var(--red-text)}
.danger-confirm-title{font-size:1.1rem;font-weight:700;color:var(--text-dark);margin-bottom:8px}
.danger-confirm-sub{font-size:.85rem;color:var(--text-light);margin-bottom:6px}
.danger-confirm-target{font-size:1rem;font-weight:600;color:var(--text-dark);margin-bottom:20px;padding:12px 16px;background:var(--bg);border-radius:var(--radius);border:1px solid var(--border)}
.danger-confirm-notice{font-size:.78rem;color:var(--red-text);margin-bottom:28px;background:var(--red-bg);padding:10px 16px;border-radius:var(--radius);border:1px solid var(--red-border)}
.danger-confirm-actions{display:flex;gap:12px;justify-content:center}
.danger-confirm-box{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:14px 18px;margin-bottom:20px;text-align:left}
.danger-confirm-box-title{font-size:.88rem;font-weight:600;color:var(--text-dark)}
.danger-confirm-box-sub{font-size:.8rem;color:var(--text-light);margin-top:4px}
.form-section-last{border-bottom:none;margin-bottom:0;padding-bottom:0}

/* ── MODAL genérico (conteúdo maior — detalhe/formulário; .cfm-* continua
   sendo o dialogo pequeno de "tem certeza?" do confirmModal) ── */
.modal-overlay{display:none;position:fixed;inset:0;z-index:1050;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,.45);backdrop-filter:blur(3px)}
.modal-overlay.show{display:flex}
.modal-box{position:relative;z-index:1;background:var(--surface);border-radius:16px;width:100%;max-width:560px;max-height:85vh;display:flex;flex-direction:column;box-shadow:0 24px 60px rgba(0,0,0,.2)}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border);flex-shrink:0}
.modal-title{font-weight:700;font-size:.9rem;color:var(--text-dark);display:flex;align-items:center;gap:6px}
.modal-title i{color:var(--primary)}
.modal-close{background:none;border:none;cursor:pointer;color:var(--text-xlight);font-size:1.1rem;padding:4px;display:flex;align-items:center}
.modal-close:hover{color:var(--text-mid)}
.modal-body{overflow-y:auto;padding:20px;flex:1}
.modal-footer{padding:12px 20px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px;flex-shrink:0}
.modal-loading{text-align:center;padding:32px 0;color:var(--text-xlight)}
.modal-loading i{font-size:1.4rem;display:block;margin-bottom:8px;opacity:.5}
.modal-error{text-align:center;padding:24px;color:var(--red-text)}
.modal-error i{font-size:1.4rem;display:block;margin-bottom:8px}
.loading-box{padding:32px;text-align:center;color:var(--text-xlight);font-size:.84rem}
.error-box{padding:20px;text-align:center;color:var(--text-xlight)}

/* ── Financeiro: filtro, KPI, gráficos, categorias ── */
.filter-icon{color:var(--text-light);font-size:14px;flex-shrink:0}
.filtro-sep{color:var(--text-xlight);font-size:.8rem;flex-shrink:0}
.hint-xs{font-size:.68rem;color:var(--text-xlight)}
.year-pills{display:flex;flex-wrap:wrap;gap:6px;width:100%;align-items:center}
.year-pill{font-size:.72rem;padding:4px 12px;border-radius:20px;cursor:pointer;transition:all .15s;background:transparent;color:var(--text-light);border:1px solid var(--border);font-weight:400}
.year-pill.active{background:var(--primary);color:#fff;border-color:var(--primary);font-weight:600}
.btn-tab-xs{font-size:.68rem}
.card-body-tight{padding:12px 16px}
.cat-row{display:flex;justify-content:space-between;align-items:center;padding:7px 4px;border-bottom:1px solid var(--border);font-size:.8rem}
.cat-row-label{color:var(--text-mid);display:flex;align-items:center;gap:6px}
.cat-dot{width:8px;height:8px;border-radius:2px;display:inline-block;flex-shrink:0;background:var(--ink-3)}
.cat-dot.is-r{background:var(--green)}
.cat-dot.is-d{background:var(--red)}
.cat-val{font-size:.78rem}
.cat-empty{text-align:center;padding:20px 0;color:var(--text-xlight);font-size:.82rem}
#stat-s-val.is-negative{color:var(--red-text)}
#stat-s-val.is-positive{color:var(--blue-text)}

/* ── Assistente de importação (clientes/produtos) ── */
.import-grid{display:grid;grid-template-columns:1fr 380px;gap:20px;align-items:start}
@media(max-width:900px){.import-grid{grid-template-columns:1fr}}
.import-col{display:flex;flex-direction:column;gap:20px}
.import-hint-list{font-size:.8rem;color:var(--text-mid)}
.import-hint-list ul{padding-left:18px;line-height:2}
.import-preview{margin-bottom:16px;padding:12px;background:var(--blue-bg);border:1px solid var(--blue-border);border-radius:var(--radius)}
.import-preview[hidden]{display:none}
.import-preview-row{font-size:.8rem;color:var(--blue-text);display:flex;align-items:center;gap:8px}
.import-preview-row i{font-size:1.1rem}
.import-preview-nome{font-weight:600}
.import-preview-tam{color:var(--text-xlight)}
.import-hist-body{padding:0}
.import-hist-item{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border);text-decoration:none;transition:background .12s}
.import-hist-item:hover{background:var(--bg);text-decoration:none}
.import-hist-item:last-child{border-bottom:none}
.import-hist-icon{flex-shrink:0;font-size:16px}
.import-hist-icon.is-ok{color:var(--green)}
.import-hist-icon.is-warn{color:var(--amber)}
.import-hist-icon.is-bad{color:var(--red)}
.import-hist-info{min-width:0;flex:1}
.import-hist-file{font-size:.78rem;font-weight:500;color:var(--text-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.import-hist-meta{font-size:.7rem;color:var(--text-xlight)}
.search-wrap:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px rgba(14,165,233,.12),0 1px 4px rgba(0,0,0,.06);background:var(--surface)}
.search-wrap .bi{color:var(--text-xlight);font-size:14px;flex-shrink:0}
.search-wrap input{background:none;border:none;outline:none;color:var(--text-dark);font-size:.84rem;flex:1;min-width:0}

/* ── FILTER BAR ── */
.filter-bar{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:14px 20px;
  margin-bottom:16px;
}

/* ── FILTROS EM CHIP — atalhos (Hoje/Semana/Mês/Personalizado), visual de
   controle segmentado (.seg): faixa única, bordas internas, sem gaps.
   Faixa 1 sempre visível; faixa 2 (.filter-avancado) recolhida atrás
   de "Mais filtros". Campos de data só aparecem em "Personalizado". */
.filter-chips{display:inline-flex;border:1px solid var(--line-strong);border-radius:var(--r);overflow:hidden;background:var(--surface);max-width:100%;overflow-x:auto;flex-shrink:1}
.filter-chip{
  padding:0 14px;height:36px;border:0;border-right:1px solid var(--line);border-radius:0;
  background:none;font-size:.84rem;font-weight:500;
  color:var(--ink-2);cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
}
.filter-chip:last-child{border-right:0}
.filter-chip.active{
  background:var(--ink);color:#fff;font-weight:600;
}
.filter-chip.is-submit{color:var(--brand);font-weight:600}
/* T.28: o botao ficava DENTRO de .filter-chips, que tem borda e
   overflow-x:auto — por isso aparecia cortado. Agora ele e irmao da faixa,
   dentro de .filter-row, e nunca e clipado. */
.filter-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.filter-mais{
  display:inline-flex;align-items:center;gap:7px;
  height:36px;padding:0 13px;flex-shrink:0;
  background:var(--surface);border:1px solid var(--line-strong);
  border-radius:var(--r);color:var(--brand);
  font-size:.82rem;font-weight:600;cursor:pointer;white-space:nowrap;
}
.filter-mais:hover{background:var(--surface-2)}
.filter-mais .bi{font-size:.7rem;transition:transform var(--transition)}
body:has(.filter-avancado.aberto) .filter-mais .bi{transform:rotate(180deg)}
.filter-avancado{display:none}
.filter-avancado.aberto{display:block}
@media(max-width:768px){ .filter-chip{height:44px} }

/* Painel do "Mais filtros": linha de campos compactos com label pequeno.
   Reutilizado por qualquer tela com filtro avançado (dashboard, OS, …). */
.filtro-avancado-row{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.filtro-avancado-row .form-group{margin:0}
.form-label-sm{font-size:.72rem}
.fb-field{width:160px}
.filtro-datas-inline{gap:8px;flex-wrap:wrap;align-items:flex-end}
.filtro-datas-inline:not([hidden]){display:flex}
.filtro-sep-bottom{color:var(--ink-3);font-size:.8rem;padding-bottom:8px}

/* ── D.2: "Mais filtros" vira bottom sheet no mobile ──
   No desktop, .filter-avancado continua expandindo inline (regra acima).
   No mobile, as MESMAS classes (.filter-avancado/.aberto, já alternadas
   pelo JS de cada tela) passam a controlar um painel fixo que sobe do
   rodapé — a apresentação muda, o formulário GET continua o mesmo. */
.sheet-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:255}
.sheet-footer{display:none}
@media(max-width:768px){
  body:has(.filter-avancado.aberto) .sheet-backdrop{display:block}
  .filter-avancado{
    display:block;position:fixed;left:0;right:0;bottom:0;
    background:var(--surface);border-radius:16px 16px 0 0;
    box-shadow:0 -8px 30px rgba(0,0,0,.2);
    z-index:260;max-height:80vh;overflow-y:auto;
    padding:8px 16px calc(16px + env(safe-area-inset-bottom));
    transform:translateY(110%);
    transition:transform var(--transition-slow);
  }
  .filter-avancado::before{
    content:'';display:block;width:36px;height:4px;
    background:var(--line-strong);border-radius:99px;margin:10px auto 14px;
  }
  .filter-avancado.aberto{transform:translateY(0)}
  .sheet-footer{display:flex;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
  .sheet-footer .btn{flex:1;justify-content:center;min-height:44px}
  .filtro-limpar-inline{display:none}
}

/* ── UTILS ── */
.d-flex{display:flex}.align-center{align-items:center}.align-start{align-items:flex-start}.align-end{align-items:flex-end}.justify-between{justify-content:space-between}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.flex-col{flex-direction:column}.min-w-0{min-width:0}
.w-100{width:100%}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.gap-1{gap:4px}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}
.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}.mt-5{margin-top:20px}
.mb-1{margin-bottom:4px}.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}.mb-5{margin-bottom:20px}
.text-muted{color:var(--text-light)}.text-dark{color:var(--text-dark)}.text-primary{color:var(--primary)}.text-blue{color:var(--blue-text)}.text-xlight{color:var(--text-xlight)}
.ml-auto{margin-left:auto}
.text-green{color:var(--green-text)}.text-red{color:var(--red-text)}.text-amber{color:var(--amber-text)}
.fw-500{font-weight:500}.fw-600{font-weight:600}.fw-700{font-weight:700}
.font-mono{font-family:var(--cond);font-weight:600;font-size:1em;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}.m-0{margin:0}
.text-right{text-align:right}.text-center{text-align:center}.text-left{text-align:left}
.fs-xs{font-size:.72rem}.fs-sm{font-size:.82rem}
.icon-7{font-size:7px}.icon-8{font-size:8px}.icon-9{font-size:9px}
.justify-end{justify-content:flex-end}
.d-inline{display:inline}
.row-actions{display:flex;gap:6px;align-items:center}
.table tr.row-alerta{background:var(--amber-bg)}
@media(max-width:640px){.hide-mobile{display:none}}

/* ── OS ITEMS ── */
.item-row{
  background:var(--surface);border:1.5px solid var(--border);
  border-radius:var(--radius-lg);padding:16px;margin-bottom:10px;
  transition:border-color var(--transition),box-shadow var(--transition);
}
.item-row:hover{border-color:var(--primary);box-shadow:0 0 0 3px rgba(14,165,233,.07)}
.totals-box{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-lg);padding:16px}
.total-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;font-size:.84rem;color:var(--text-mid)}
.total-row:not(:last-child){border-bottom:1px solid var(--border)}
.total-big{font-size:1rem;font-weight:700;padding-top:14px;margin-top:6px;border-top:2px solid var(--border)!important;color:var(--text-dark)}
.total-big .tv{font-family:var(--cond);color:var(--ink);font-size:1.5rem;font-weight:700;font-variant-numeric:tabular-nums}

/* ── STATUS TRAIL ── */
.trail{display:flex;align-items:flex-start;margin:4px 0 16px;padding:8px 0}
.step{display:flex;flex-direction:column;align-items:center;flex:1}
.step-dot{width:30px;height:30px;border-radius:50%;border:2px solid var(--border-dark);background:var(--surface);display:flex;align-items:center;justify-content:center;font-size:12px;position:relative;z-index:1;font-weight:600;color:var(--text-light)}
.step-line{flex:1;height:2px;background:var(--border-dark);margin-top:15px;position:relative}
.step.done .step-dot{background:var(--green-bg);border-color:var(--green);color:var(--green)}
.step.done .step-line{background:var(--green)}
.step.cur .step-dot{background:var(--primary-light);border-color:var(--primary);color:var(--primary);box-shadow:0 0 0 4px rgba(14,165,233,.15)}
.step-lbl{font-size:.67rem;font-weight:500;color:var(--text-xlight);margin-top:7px;text-align:center;line-height:1.4}
.step.done .step-lbl{color:var(--green-text)}
.step.cur .step-lbl{color:var(--primary)}

/* ── ANIMATIONS ── */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

/* ── BOTTOM NAV (mobile) ── */
.bottom-nav{display:none}

/* ── MOBILE ── */
@media(max-width:768px){
  .app-wrap,body.sb-collapsed .app-wrap{display:block}
  .sidebar{position:fixed;top:0;left:0;bottom:0;height:100vh;width:var(--sb);z-index:300;transform:translateX(-100%);transition:transform var(--transition-slow)}
  .sidebar.open{transform:translateX(0)}
  .menu-btn{display:flex}
  .sidebar-toggle{display:none}
  .form-row,.form-row3{grid-template-columns:1fr}
  .form-control,
  select.form-control,
  textarea.form-control{font-size:16px}
  .btn{min-height:44px;padding:11px 18px}
  .row-actions{gap:8px}
  .row-actions .btn{min-width:44px;min-height:44px;padding:10px}
  .row-actions select{min-height:44px}
  .nav-a{min-height:44px}
  .stats-grid{grid-template-columns:1fr 1fr}
  .page-content{padding:14px}
  .topbar{padding:0 14px}
  .plan-banner{margin:0 14px 4px}
  .crumb-empresa{max-width:150px}
  .bottom-nav{
    display:grid;grid-template-columns:repeat(5,1fr);
    position:fixed;left:0;right:0;bottom:0;z-index:200;
    background:var(--surface);border-top:1px solid var(--border);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .bottom-nav a,.bottom-nav button{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:3px;min-height:56px;font-size:.68rem;
    color:var(--text-light);text-decoration:none;
    background:none;border:none;font-family:inherit;cursor:pointer;
  }
  .bottom-nav a.active{color:var(--primary)}
  .bottom-nav a i,.bottom-nav button i{font-size:19px}
  .card-body{padding:14px}
  .card-header{padding:12px 14px;min-height:auto}
  .charts-grid{display:grid!important;grid-template-columns:1fr!important}
  .topbar .btn span{display:none}
  .page-header-right{flex-wrap:wrap}
  .filter-bar{padding:12px 14px}
  /* Neutraliza larguras fixas em px definidas inline (ex: style="width:165px")
     nos campos de filtro: flex-basis tem prioridade sobre width no eixo
     principal do flex, então os campos passam a crescer/encolher e preencher
     a linha de forma uniforme em vez de deixar sobra ou aperto irregular. */
  .filter-bar input.form-control,
  .filter-bar select.form-control{
    flex:1 1 130px;
    min-width:120px;
  }
  .notif-dd{width:min(300px,calc(100vw - 24px));right:-4px}
  .stat-card{padding:16px}
  .page-header{margin-bottom:16px}
  .trail{overflow-x:auto;padding-bottom:4px}
  .table-wrap{position:relative}
  .table-wrap::after{content:'';position:absolute;right:0;top:0;bottom:0;width:32px;background:linear-gradient(to right,transparent,var(--card-bg));pointer-events:none;border-radius:0 var(--radius-lg) var(--radius-lg) 0}
}
@media(max-width:480px){
  .page-header{flex-direction:column;align-items:flex-start;gap:10px}
  .page-header-right{width:100%}
  .page-header-right .btn{flex:1;justify-content:center}
  .tb-right .tb-user-name{display:none}
  .page-content{padding:12px}
  :root{--pc-pad:12px}
  .card-body{padding:12px}
  .card-header{padding:10px 12px}
  .table td,.table th{padding:10px 12px}
  .filter-bar{padding:10px 12px}
  .stats-grid{gap:10px}
  .badge{font-size:.62rem;padding:2px 7px}
  .row-actions{flex-wrap:wrap;gap:4px}
  .form-group{margin-bottom:14px}
}
@media(max-width:360px){
  .stats-grid{grid-template-columns:1fr}
  .topbar{padding:0 10px}
  .page-content{padding:10px}
  :root{--pc-pad:10px}
}
/* Reafirmado por último para não ser sobrescrito pelo shorthand `padding`
   dos breakpoints de 480px/360px acima — sem isso o bottom-nav cobre o
   final do conteúdo em qualquer tela <=480px. */
@media(max-width:768px){
  .page-content{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
}
/* ── TABELA VIRA CARD (mobile) — incremental, tela por tela ── */
@media(max-width:640px){
  .table thead{display:none}
  .table tr{
    display:block;border:1px solid var(--border);
    border-radius:10px;margin-bottom:10px;padding:4px;
    background:var(--surface);
  }
  .table td{
    display:flex;justify-content:space-between;align-items:center;
    border:none;padding:9px 12px;text-align:right;
  }
  .table td::before{
    content:attr(data-label);
    font-weight:600;color:var(--text-light);
    text-align:left;padding-right:12px;
  }
  .table td.td-acoes{border-top:1px solid var(--border)}
}
/* ── LISTA DE TRANSAÇÕES (financeiro) — cartão estilo app bancário no mobile ── */
.tx-mobile-only{display:none}
.tx-card-desc{font-weight:600;font-size:.88rem;color:var(--text-dark);flex:1;min-width:0;line-height:1.35}
.tx-card-meta{display:flex;align-items:center;gap:6px;font-size:.74rem;color:var(--text-light);margin-top:5px}
.tx-card-obs{font-size:.74rem;color:var(--text-xlight);margin-top:5px;line-height:1.4}
.tx-filter-row{padding:10px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--surface-2)}
.tx-filter-label{font-size:.72rem;color:var(--text-xlight);font-weight:500;flex-shrink:0}
.tx-filter-count{margin-left:auto;font-size:.72rem;color:var(--text-xlight)}
.tx-os-badge{margin-left:4px;font-size:.63rem;background:var(--primary-light);color:var(--primary);border-radius:4px;padding:1px 6px;font-weight:600;vertical-align:middle}
.badge-sm{font-size:.63rem}
.hist-valor{font-size:.85rem}
.hist-user{font-size:.82rem;color:var(--text-mid)}
.select-auto{width:auto}
.p-0{padding:0}
.ml-1{margin-left:4px}
.table-min-750{min-width:750px}
.pagination-wrap{padding:12px 20px;border-top:1px solid var(--border)}
/* ── Agenda de recebíveis ── */
.rec-venc{font-size:.82rem}
.rec-venc.is-late{color:var(--red-text);font-weight:600}
.pill-atrasado{font-size:.68rem;background:var(--red-bg);color:var(--red-text);border:1px solid var(--red-border);border-radius:4px;padding:1px 5px;margin-left:4px}
.rec-origem-link{font-weight:500;font-size:.82rem}
.rec-origem-sub{font-size:.74rem;color:var(--text-light)}
.rec-empty{color:var(--text-xlight);font-size:.82rem}
.rec-empty-xs{font-size:.74rem;color:var(--text-xlight)}
.rec-forma-pill{font-size:.78rem;background:var(--surface-2);border-radius:4px;padding:2px 7px;display:inline-block}
.rec-parcela{font-size:.82rem;color:var(--text-mid)}
.rec-valor{font-weight:600;font-size:.82rem}
.rec-recebido{font-size:.82rem;color:var(--green-text)}
.liq-body{display:flex;flex-direction:column;gap:14px}
.liq-info{font-size:.82rem;color:var(--text-mid)}

/* ── Detalhe de transação (conteúdo do modal financeiro) ── */
.txd-head{display:flex;align-items:flex-start;gap:14px;padding-bottom:16px;border-bottom:1px solid var(--border);margin-bottom:16px}
.txd-icon{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1.25rem}
.txd-icon.is-receita{background:var(--green-bg);color:var(--green)}
.txd-icon.is-despesa{background:var(--red-bg);color:var(--red)}
.txd-title-wrap{flex:1;min-width:0}
.txd-title{font-size:1rem;font-weight:700;color:var(--text-dark);line-height:1.3;margin-bottom:4px}
.txd-badges{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.txd-valor-wrap{text-align:right;flex-shrink:0}
.txd-valor{font-family:var(--cond);font-size:1.5rem;font-weight:700}
.txd-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.txd-cell{background:var(--bg);border-radius:var(--radius);padding:10px 12px}
.txd-cell.span-all{grid-column:1/-1}
.txd-cell-label{font-size:.72rem;color:var(--text-xlight);margin-bottom:3px}
.txd-cell-value{font-size:.88rem;font-weight:600}
.txd-cell-value.is-truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.txd-obs{background:var(--bg);border-radius:var(--radius);padding:10px 14px;margin-bottom:16px;font-size:.83rem;color:var(--text-mid);border-left:3px solid var(--border-dark)}
.txd-box{border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:16px}
.txd-box-head{padding:10px 14px;display:flex;align-items:center;justify-content:space-between;gap:8px;border-bottom:1px solid var(--border)}
.txd-box-head.is-venda{background:var(--ok-tint);border-bottom-color:var(--green-border)}
.txd-box-head.is-os{background:var(--primary-light);border-bottom-color:var(--blue-border)}
.txd-box-head.is-recebivel{background:var(--blue-bg);border-bottom-color:var(--blue-border)}
.txd-box-head-left{display:flex;align-items:center;gap:8px}
.txd-box-title{font-weight:700;font-size:.88rem}
.txd-box-sub{font-size:.72rem;color:var(--text-xlight)}
.txd-box-link{font-size:.72rem;text-decoration:none;display:flex;align-items:center;gap:4px}
.txd-box-link:hover{text-decoration:none}
.txd-box-body{padding:12px 14px}
.txd-cliente-row{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.txd-avatar{width:30px;height:30px;border-radius:8px;background:var(--avatar-bg);display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:700;color:var(--primary);flex-shrink:0}
.txd-cliente-nome{font-size:.85rem;font-weight:600}
.txd-cliente-tel{font-size:.73rem;color:var(--text-xlight)}
.txd-resp-row{display:flex;align-items:center;gap:6px;margin-bottom:12px;font-size:.8rem;color:var(--text-mid)}
.txd-resp-row i{font-size:.75rem;color:var(--text-xlight)}
.txd-forma-pill{display:inline-flex;align-items:center;gap:6px;margin-bottom:12px;font-size:.8rem;background:var(--bg);border-radius:var(--radius);padding:5px 10px;border:1px solid var(--border)}
.txd-forma-pill i{font-size:.75rem;color:var(--text-xlight)}
.txd-forma-pill span{color:var(--text-mid)}
.txd-section-lbl{font-size:.72rem;color:var(--text-xlight);margin-bottom:6px;display:flex;align-items:center;gap:5px}
.txd-table{width:100%;border-collapse:collapse;font-size:.8rem;margin-bottom:4px}
.txd-table thead tr{background:var(--bg)}
.txd-table th{text-align:left;padding:5px 8px;color:var(--text-xlight);font-weight:500;border-bottom:1px solid var(--border)}
.txd-table td{padding:6px 8px}
.txd-table tbody tr{border-bottom:1px solid var(--border)}
.txd-table tfoot td{padding:7px 8px}
.col-qty{width:44px}
.col-money{width:88px}
.txd-item-label{display:inline-flex;align-items:center;gap:5px}
.txd-item-label i{font-size:.7rem;flex-shrink:0}
.txd-total-row{display:flex;justify-content:flex-end;align-items:center;gap:12px;padding:8px 8px 0;border-top:1px solid var(--border);margin-top:6px}
.txd-total-hint{font-size:.75rem;color:var(--text-xlight)}
.txd-total-lbl{font-size:.78rem;color:var(--text-mid)}
.txd-total-val{font-weight:800;font-size:.95rem}
.txd-rv-fields{padding:10px 14px;display:flex;flex-wrap:wrap;gap:14px;font-size:.82rem}
.txd-hist{border-top:1px solid var(--border);padding-top:14px;margin-top:4px}
.txd-hist-item{display:flex;gap:10px;padding:6px 0;align-items:flex-start}
.txd-hist-item.has-border{border-bottom:1px solid var(--border)}
.txd-hist-icon{width:24px;height:24px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:.65rem;margin-top:1px}
.txd-hist-icon.is-criada{background:var(--green-bg);color:var(--green)}
.txd-hist-icon.is-editada{background:var(--blue-bg);color:var(--blue-text)}
.txd-hist-icon.is-excluida{background:var(--red-bg);color:var(--red)}
.txd-hist-body{flex:1;min-width:0}
.txd-hist-acao{font-size:.82rem;font-weight:600;color:var(--text-dark)}
.txd-hist-user{font-size:.78rem;color:var(--text-mid)}
.txd-hist-date{font-size:.72rem;color:var(--text-xlight);margin-top:2px}
.txd-empty{text-align:center;padding:12px 0;color:var(--text-xlight);font-size:.82rem}
.txd-empty i{display:block;font-size:1.3rem;margin-bottom:6px;opacity:.4}

/* ── Produtos: linha/estado inativo ou alerta, botão de reativar ── */
.row-inativo{opacity:.55;background:var(--surface-2)}
.cat-select{width:auto;min-width:160px}
.text-empty{color:var(--text-xlight);font-size:.82rem}
.btn-outline-green{color:var(--green-text);border-color:var(--green-border)}
.empty-state-actions{display:flex;gap:8px;justify-content:center;margin-top:16px}
.m-card.is-inativo{opacity:.55;background:var(--surface-2)}
.m-card.is-alerta{background:var(--amber-bg)}

/* ── Painel de precificação em tempo real (produtos/form.html) ── */
.pricing-panel{background:var(--bg);border:1.5px solid var(--border);border-radius:var(--radius);padding:16px;transition:all .2s;margin-top:12px}
.pricing-panel.is-prejuizo{border-color:var(--red-border);background:var(--red-bg)}
.pricing-panel.is-abaixo{border-color:var(--amber-border);background:var(--amber-bg)}
.pricing-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px}
.pricing-label{font-size:.72rem;color:var(--text-xlight);font-weight:600;margin-bottom:3px}
.pricing-label-hint{opacity:.6}
.pricing-sug-val{font-family:var(--cond);font-size:1.35rem;font-weight:700;color:var(--brand)}
.pricing-margem-col{text-align:right}
.pricing-margem-val{font-family:var(--cond);font-size:1.35rem;font-weight:700;color:var(--text-xlight)}
.pricing-margem-val.is-good{color:var(--green)}
.pricing-margem-val.is-warn{color:var(--amber)}
.pricing-margem-val.is-bad{color:var(--red)}
.pricing-margem-rs{font-size:.72rem;color:var(--text-xlight);margin-top:2px}
.pricing-margem-rs.is-pos{color:var(--green-text)}
.pricing-margem-rs.is-neg{color:var(--red-text)}
.pricing-bar-track{height:6px;background:var(--border);border-radius:99px;overflow:hidden;margin-bottom:8px}
.pricing-bar-fill{height:100%;border-radius:99px;transition:width .3s,background .3s;width:0}
.pricing-bar-fill.is-good{background:var(--green)}
.pricing-bar-fill.is-warn{background:var(--amber)}
.pricing-bar-fill.is-bad{background:var(--red)}
.pricing-warn{display:flex;font-size:.74rem;color:var(--amber-text);align-items:center;gap:5px}
.pricing-warn[hidden]{display:none}
.pricing-warn.is-neg{color:var(--red-text)}

/* ── Estoque ── */
.alert-link{color:var(--amber-text);font-weight:600;text-decoration:underline;margin-left:4px}
.est-qtd{font-size:1.05rem;font-weight:700}
.mov-info-box{background:var(--primary-light);border:1.5px solid var(--primary);border-radius:var(--radius);padding:14px 16px;margin-bottom:18px}
.mov-info-box[hidden]{display:none}
.mov-info-label{font-size:.72rem;font-weight:600;color:var(--primary);margin-bottom:6px}
.mov-info-nome{font-weight:600;color:var(--text-dark);margin-bottom:4px}
.mov-info-estoque{font-size:.84rem;color:var(--text-mid)}
.mov-info-estoque-val{font-size:1.1rem;color:var(--primary)}
.mov-warn-box{background:var(--red-bg);border:1.5px solid var(--red);border-radius:var(--radius);padding:12px 16px;margin-bottom:18px;font-size:.84rem;color:var(--red-text)}
.mov-warn-box[hidden]{display:none}
.mov-warn-actions{margin-top:8px}
.btn.is-disabled{opacity:.5;cursor:not-allowed;transition:opacity .2s}
.k-value.is-sm{font-size:1.25rem}
.hist-date{font-size:.84rem;font-weight:500;color:var(--text-dark)}
.hist-cliente-link{font-size:.75rem;color:var(--primary);text-decoration:none}
.sidebar-grid{display:grid;grid-template-columns:1fr 260px;gap:20px;align-items:start}
.venda-item-line{font-size:.8rem;color:var(--text-mid)}
.venda-item-more{font-size:.75rem;color:var(--text-xlight)}
.cliente-fields{display:flex;flex-direction:column;gap:10px}
.field-value{font-size:.85rem}
.field-value.is-mono{font-family:var(--cond);font-weight:600;letter-spacing:.02em}
.field-value-link{color:var(--text-mid);text-decoration:none}
.field-value-link.is-whatsapp{color:var(--green-text);font-weight:500}
.card-body-slim{padding:8px 0}
.top-prod-row{display:flex;justify-content:space-between;align-items:center;padding:8px 16px;border-bottom:1px solid var(--border)}
.top-prod-row:last-child{border-bottom:none}
.top-prod-nome{font-size:.84rem;color:var(--text-mid)}
/* ── Follow-up de clientes ── */
.fu-filter-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:14px 18px;margin-bottom:16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.fu-filter-label{font-size:.84rem;color:var(--text-mid);font-weight:500}
.fu-day-btn{min-width:60px;text-align:center}
.fu-days-input{width:80px}
.fu-contact{display:flex;align-items:center;gap:5px;font-size:.8rem}
.fu-date{font-size:.84rem;font-weight:500}
.fu-date-label{font-size:.82rem;color:var(--text-mid)}
.venda-itens{font-size:.82rem;color:var(--text-mid)}
.sidebar-grid.is-wide{grid-template-columns:1fr 300px}
/* O colapso precisa vir DEPOIS de .is-wide: media query nao acrescenta
   especificidade, entao a regra de duas colunas venceria por ordem e a
   coluna do resumo (300px) continuava ao lado no celular, empurrando a
   pagina 133px para fora da tela. */
@media(max-width:900px){
  .sidebar-grid,.sidebar-grid.is-wide{grid-template-columns:1fr}
}
.venda-cliente-empty{text-align:center;padding:12px 0;color:var(--text-xlight)}
.venda-cliente-empty i{font-size:1.4rem;display:block;margin-bottom:6px;opacity:.5}
.venda-cliente-empty span{font-size:.84rem}
.venda-obs{color:var(--text-mid);font-size:.9rem;white-space:pre-line}
.field-icon{font-size:10px;margin-right:4px}
.tfoot-total{background:var(--bg)}
.tfoot-total-val{font-family:var(--cond);font-size:1.3rem;font-weight:700}
/* ── Nova Venda (formulário) ── */
.venda-summary-col{position:sticky;top:80px}
@media(max-width:900px){.venda-summary-col{position:static;top:auto}}
.tbl-col-qtd{width:110px}
.tbl-col-preco{width:140px}
.tbl-col-sub{width:130px}
.tbl-col-acoes-sm{width:44px}
.venda-item-sub{font-weight:600;color:var(--primary);font-size:.9rem}
.money-field{position:relative}
.money-field.is-sm{width:120px}
.money-field .money-prefix{position:absolute;left:9px;top:50%;transform:translateY(-50%);font-size:.8rem;color:var(--text-xlight);pointer-events:none}
.money-input{padding-left:28px}
.money-field.is-form .money-prefix{left:12px;font-size:.85rem;color:var(--text-light)}
.money-field.is-form .money-input{padding-left:36px}
.form-note{font-size:.82rem;color:var(--text-xlight);padding:4px 0}
.hr-tight{margin:4px 0;border-color:var(--border)}
.btn-outline-red{color:var(--red-text);border-color:var(--red-text)}
/* ── Funcionário (detalhe) ── */
.func-detail-avatar{width:52px;height:52px;border-radius:14px;background:var(--avatar-bg);display:flex;align-items:center;justify-content:center;font-size:1.4rem;font-weight:700;color:var(--avatar-fg);flex-shrink:0}
.func-detail-title-sub{margin-top:2px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.field-value.is-money{font-size:.95rem;font-weight:700;color:var(--green-text)}
.func-notice-box{margin-top:14px;padding:10px 14px;background:var(--bg);border-radius:var(--radius);border:1px solid var(--border)}
.link-inline{font-size:.78rem;color:var(--primary);text-decoration:none;display:inline-block;margin-top:6px}
/* ── Configurações da empresa (onboarding) ── */
.form-medium{max-width:640px}
.select-medium{max-width:240px}
.logo-preview{height:48px;border-radius:var(--radius);border:1px solid var(--border);box-shadow:var(--card-shadow)}
.logo-note{font-size:.78rem;color:var(--text-light)}
/* ── Usuários & Acesso (segurança) ── */
.grid-2-equal{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
@media(max-width:900px){.grid-2-equal{grid-template-columns:1fr}}
.avatar.is-sm{width:28px;height:28px;font-size:.7rem}
.empty-state.is-compact{padding:24px}
.empty-state.is-compact .empty-icon{font-size:2rem}
.senha-prov-alert{margin:12px 16px;padding:12px 16px;background:var(--red-bg);border:1px solid var(--red-border);border-radius:8px;font-size:.83rem;color:var(--text-dark)}
.senha-prov-alert-title{display:block;margin-bottom:4px;color:var(--red)}
.senha-prov-code{font-size:.95rem;letter-spacing:.05em;background:var(--bg);padding:2px 6px;border-radius:4px}
.token-mask{font-size:.8rem;color:var(--text-mid);letter-spacing:.2em}
.codigo-display{letter-spacing:2px;font-weight:600;color:var(--text-dark)}
.table-empty-note{text-align:center;padding:20px;color:var(--text-xlight);font-size:.82rem}
.usr-mobile-pad{padding:0 16px 16px}
/* ── Admin: Avaliações do sistema ── */
.text-star{color:var(--star)}
.star-rating{color:var(--star);white-space:nowrap}
.star-rating i{font-size:.8rem}
.col-comment{max-width:320px}
.ml-2{margin-left:8px}
/* ── Admin: Gerar código de acesso ── */
.form-narrow-md{max-width:540px}
.gerado-box{margin-bottom:20px;padding:16px 18px;background:var(--green-bg);border:1px solid var(--green-border);border-radius:10px;position:relative}
.gerado-box-close{position:absolute;top:8px;right:12px;background:none;border:none;cursor:pointer;font-size:1rem;color:var(--text-xlight)}
.gerado-box-title{font-size:.78rem;font-weight:700;color:var(--green-text);margin-bottom:10px;display:flex;align-items:center;gap:6px}
.gerado-box-label{margin-bottom:6px;font-size:.72rem;color:var(--text-xlight);font-weight:500}
.gerado-box-row{display:flex;align-items:center;gap:8px}
.gerado-code{font-size:1.15rem;font-weight:700;background:var(--green-bg);padding:6px 16px;border-radius:6px;letter-spacing:.15em;color:var(--green-text);border:1px solid var(--green-border)}
.gerado-box-hint{margin-top:8px;font-size:.73rem;color:var(--text-xlight)}
.gc-intro{font-size:.85rem;color:var(--text-light);margin-bottom:16px}
.gc-section-title{font-size:.78rem;font-weight:600;color:var(--text-light);margin-bottom:10px;display:flex;align-items:center;gap:6px}
.gc-cod-row{padding:11px 14px;background:var(--blue-bg);border:1px solid var(--blue-border);border-radius:8px;margin-bottom:8px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.gc-col{flex:1;min-width:120px}
.gc-col.is-wide{min-width:140px}
.gc-col.is-lg{min-width:200px}
.gc-field-label{font-size:.74rem;color:var(--text-xlight);margin-bottom:2px}
.gc-code-chip{font-size:.9rem;font-weight:700;background:var(--bg);padding:3px 10px;border-radius:4px;letter-spacing:.08em;color:var(--text-dark)}
.gc-hint{font-size:.73rem;color:var(--text-xlight);margin-top:4px}
.gc-empty-box{margin-top:20px;font-size:.82rem;color:var(--text-xlight);padding:12px 14px;background:var(--bg);border-radius:8px;border:1px solid var(--border)}
/* ── Admin: Solicitações de acesso a dados ── */
.pill-count-red{background:var(--red);color:#fff;font-size:.68rem;padding:1px 7px;border-radius:99px;margin-left:4px}
.acs-nome{font-size:.84rem;font-weight:500;color:var(--text-dark)}
.acs-desc-cell{font-size:.82rem;color:var(--text-light);max-width:280px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.table-empty-cell{text-align:center;padding:32px;color:var(--text-xlight)}
.table-empty-cell i{font-size:1.5rem;display:block;margin-bottom:8px}
.modal-info-box{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:12px;margin-bottom:16px;font-size:.83rem;color:var(--text-light);line-height:1.6}
.modal-form-label{display:block;font-size:.78rem;font-weight:500;color:var(--text-dark);margin-bottom:6px}
.textarea-md{min-height:80px;resize:vertical}
.btn-outline-amber{color:var(--amber-text);border-color:var(--amber)}
.btn-success-solid{background:var(--green);color:#fff;border-color:var(--green)}
.btn-success-solid:hover{filter:brightness(.92);background:var(--green);color:#fff}
.modal-box.is-md{max-width:480px}
/* ── Admin: Auditoria ── */
.aud-filter-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.fb-field.is-lg{width:220px}
.fb-field.is-md{width:180px}
.w-155{width:155px}
.filter-bar-sep{border-top:1px solid var(--border);padding-top:14px}
.aud-danger-label{font-size:.74rem;font-weight:600;color:var(--text-light);margin-bottom:8px;display:flex;align-items:center;gap:6px}
.aud-danger-row{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}
.self-end{align-self:flex-end}
.col-actions-sm{text-align:right;width:56px}
.aud-date{font-size:.8rem;font-weight:500;color:var(--text-dark);white-space:nowrap}
.badge.is-tight{font-size:.62rem;letter-spacing:.3px}
.aud-card-time{font-size:.76rem;color:var(--text-xlight);white-space:nowrap}
/* ── Admin: Reset de senha ── */
.gerado-box.is-blue{background:var(--primary-light);border-color:var(--blue-border)}
.gerado-box-title.is-blue{color:var(--primary)}
.gerado-code.is-blue{background:var(--primary-light);color:var(--primary);border-color:var(--blue-border)}
.field-label-sm{display:block;font-size:.78rem;font-weight:500;color:var(--text-light);margin-bottom:6px}
.gc-value-strong{font-size:.84rem;font-weight:600;color:var(--text-dark)}
/* ── Paginação (include compartilhado) ── */
.pagination-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 16px}
.pagination-info{font-size:.75rem;color:var(--text-xlight)}
.pagination-pages{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.pagination-current{cursor:default;min-width:30px;text-align:center}
.pagination-num{min-width:30px;text-align:center}
.pagination-ellipsis{color:var(--text-xlight);padding:0 2px;font-size:.8rem;align-self:center}
/* ── Admin: Solicitações de acesso (novas empresas) ── */
.gc-col.is-160{min-width:160px}
.gc-col.is-180{min-width:180px}
.gc-value{font-size:.88rem;color:var(--text-dark)}
.gerado-box-sub{margin-top:10px;font-size:.74rem;color:var(--green-text);display:flex;align-items:center;gap:5px}
.sol-doc-label{font-size:.72rem;font-weight:600;color:var(--text-xlight);margin-bottom:2px}
.sol-doc-value{font-size:.78rem;color:var(--text-xlight)}
/* ── Admin: Credenciais ── */
.card.is-flex-md{flex:1;min-width:280px}
.search-wrap.is-260{width:260px}
.td-sub.is-masked{letter-spacing:.2em}
.gc-code-chip.is-green{background:var(--green-bg);color:var(--green-text);border:1px solid var(--green-border)}
.adm-card-meta.is-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
/* ── Widget de busca (searchable-select) ── */
.ss-wrap{position:relative}
.ss-input{width:100%;box-sizing:border-box;padding:6px 10px 6px 30px;border:1px solid var(--border);border-radius:var(--radius);font-size:.82rem;background:var(--surface);color:var(--text-dark);outline:none;height:34px}
.ss-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--brand-tint)}
.ss-icon{position:absolute;left:9px;top:50%;transform:translateY(-50%);color:var(--text-xlight);font-size:.78rem;pointer-events:none}
.ss-opt{padding:7px 12px;font-size:.82rem;cursor:pointer;color:var(--text-dark)}
.ss-opt:hover,.ss-opt.active{background:var(--primary-light)}
.ss-empty{padding:10px 12px;font-size:.82rem;color:var(--text-xlight)}
.ss-disabled .ss-input{background:var(--bg);color:var(--text-xlight);cursor:not-allowed}
.ss-dropdown{position:fixed;display:none;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 8px 24px rgba(0,0,0,.15);z-index:9999;max-height:240px;overflow-y:auto;min-width:200px}
.ss-dropdown.show{display:block}
/* ── Admin: Pedidos de exclusão LGPD ── */
.badge.is-block{margin-bottom:4px;display:inline-flex}
.modal-warning-box{margin-bottom:16px;padding:10px 14px;background:var(--amber-bg);border:1px solid var(--amber);border-radius:8px;font-size:.82rem;color:var(--amber-text)}
.modal-danger-notice{margin-bottom:14px;padding:10px 14px;background:var(--red-bg);border:1px solid var(--red);border-radius:8px;font-size:.82rem;color:var(--red-text)}
.modal-footer[hidden]{display:none}
/* ── Admin: Dashboard super admin ── */
.plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.plan-box{border:1px solid var(--border);border-radius:12px;padding:14px}
.plan-box-badge-row{display:flex;align-items:center;gap:7px;margin-bottom:6px}
.plan-price{font-size:1.15rem;font-weight:700;color:var(--text-dark)}
.plan-period{font-size:.73rem;color:var(--text-xlight);margin-bottom:8px}
.plan-count{font-size:.78rem;color:var(--text-light)}
.quick-link-btn{justify-content:center;padding:12px}
.quick-link-badge{margin-left:6px;font-size:.72rem}
.adm-card-sub.is-flush{margin-top:0}
.text-purple{color:var(--purple-text)}
.modal-title.is-purple,.modal-title.is-purple i{color:var(--purple-text)}
/* ── Admin: Detalhe de empresa ── */
.emp-dados-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:520px){.emp-dados-grid{grid-template-columns:1fr}}
.stat-card-value.is-compact{font-size:1.1rem}
.field-label-caps{font-size:.7rem;color:var(--text-xlight);margin-bottom:2px}
.table-wrap.is-scroll{max-height:420px;overflow-y:auto}
.adm-mobile-only.is-scroll{max-height:420px;overflow-y:auto;padding:12px 16px}
.log-acao{font-size:.78rem}
.log-acao-title{font-size:.8rem}
.empty-state.is-tight{padding:20px}
.plano-value{font-size:.95rem;font-weight:700}
.plano-vencimento{font-size:.88rem}
.user-row-name{font-size:.8rem;font-weight:600;color:var(--text-dark)}
.user-row-email{font-size:.7rem;color:var(--text-xlight);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.badge.is-xs{font-size:.6rem}
/* ── Admin: Empresas (lista) ── */
.link-plain{color:inherit;text-decoration:none}
.pos-relative{position:relative}
.emp-dd{position:fixed;display:none;z-index:300;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:4px;min-width:185px;box-shadow:0 8px 24px rgba(0,0,0,.14)}
.emp-dd.show{display:block}
.emp-dd.is-wide{min-width:200px}
.emp-dd .dd-item{padding:7px 10px;font-size:.8rem;border-radius:7px}
.emp-dd .dd-item i{width:14px}
.dd-item-danger{color:var(--red-text)}
.dd-item-danger:hover{background:var(--red-bg)}
.dd-divider{height:1px;background:var(--border);margin:4px 2px}
.search-wrap.is-flex-constrained{flex:1;min-width:200px;max-width:320px}
.select-160{width:160px}
.select-195{width:195px}
.filter-checkbox-label{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--text-dark);white-space:nowrap;cursor:pointer}
.badge.is-excl{font-size:.62rem;padding:2px 8px;white-space:nowrap;flex-shrink:0}
.badge.is-excl-mobile{font-size:.62rem;padding:2px 8px;margin-top:6px;display:inline-block}
.cnpj-cell{font-size:.78rem;color:var(--text-xlight)}
.plano-cell{display:flex;flex-direction:column;gap:2px;align-items:flex-start}
.badge.is-plano{font-size:.68rem}
.btn.is-gap-sm{gap:5px}
.btn.is-dd-toggle{gap:5px;padding:4px 10px}
.chevron-toggle{font-size:.6rem;transition:.2s}
.chevron-toggle.is-open{transform:rotate(180deg)}
.dd-toggle-icon{font-size:.9rem}
.dd-toggle-chevron{font-size:.55rem}
.usuarios-row-cell{padding:0 16px 12px 16px}
.usuarios-chips-row{display:flex;flex-wrap:wrap;gap:8px;padding-top:10px;border-top:1px solid var(--border)}
.user-chip{display:flex;align-items:center;gap:6px;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:5px 10px}
.avatar.is-xs{width:22px;height:22px;font-size:.65rem}
.badge.is-chip{font-size:.62rem;padding:1px 7px}
.usuarios-mobile-box{display:none;flex-wrap:wrap;gap:8px;margin-top:8px;padding-top:8px;border-top:1px solid var(--border)}
.usuarios-mobile-box.show{display:flex}
.modal-danger-box{background:var(--red-bg);border:1px solid var(--red);border-radius:10px;padding:14px 16px;margin-bottom:18px}
.modal-danger-box-title{font-size:.82rem;font-weight:600;color:var(--red-text);margin-bottom:4px}
.modal-danger-box-text{font-size:.8rem;color:var(--red-text);line-height:1.5}
.modal-field-note{font-size:.8rem;color:var(--text-light);margin-bottom:4px}
.excluir-nome{font-size:.9rem;font-weight:700;color:var(--text-dark)}
.confirm-error{font-size:.73rem;color:var(--red-text);margin-top:4px}
.modal-subtitle{font-size:.85rem;color:var(--text-light);margin-bottom:16px}
/* ── Manual & Ajuda ── */
.man-wrap{display:grid;grid-template-columns:220px 1fr;gap:20px;align-items:flex-start}
.man-toc{position:sticky;top:20px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px;overflow:hidden}
.man-toc-title{font-size:.68rem;font-weight:700;color:var(--text-xlight);padding:0 6px;margin-bottom:8px}
.man-toc a{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:8px;font-size:.78rem;color:var(--text-light);text-decoration:none;transition:.12s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.man-toc a:hover{background:var(--primary-light);color:var(--primary)}
.man-toc a.toc-active{background:var(--primary-light);color:var(--primary);font-weight:600}
.man-toc a i{font-size:11px;flex-shrink:0}
.man-toc .toc-sep{height:1px;background:var(--border);margin:6px 4px}
.man-section{scroll-margin-top:20px;margin-bottom:20px}
.man-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;box-shadow:var(--card-shadow)}
.man-card-head{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--border)}
.man-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1.1rem;background:var(--icon-bg,var(--primary-light));color:var(--icon-color,var(--primary))}
.man-title{font-size:.93rem;font-weight:700;color:var(--text-dark)}
.man-subtitle{font-size:.77rem;color:var(--text-light);margin-top:2px}
.man-body{padding:18px 20px}
.man-body.is-tight-top{padding-top:12px}
.man-intro{font-size:.81rem;color:var(--text-light);line-height:1.6;margin-bottom:14px}
.man-step{display:flex;gap:12px;align-items:flex-start;padding:10px 14px;background:var(--bg);border-radius:9px;margin-bottom:8px}
.man-step-num{min-width:22px;height:22px;border-radius:50%;background:var(--primary);color:#fff;font-size:.66rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}
.man-step-num.is-purple{background:var(--purple-text)}
.man-step-num i{font-size:9px}
.man-step p{font-size:.8rem;color:var(--text-light);margin-top:3px;line-height:1.55}
.man-step h4{font-size:.84rem;font-weight:600;color:var(--text-dark)}
.man-tip{display:flex;gap:10px;padding:11px 14px;background:var(--amber-bg);border:1px solid var(--amber-border);border-radius:9px;margin-top:10px;font-size:.79rem;color:var(--amber-text);line-height:1.55}
.man-tip>i{font-size:14px;flex-shrink:0;color:var(--amber);margin-top:1px}
.man-info{display:flex;gap:10px;padding:11px 14px;background:var(--primary-light);border:1px solid var(--blue-border);border-radius:9px;margin-top:10px;font-size:.79rem;color:var(--primary);line-height:1.55}
.man-info>i{font-size:14px;flex-shrink:0;margin-top:1px}
.man-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.man-chip{display:inline-flex;align-items:center;gap:5px;font-size:.73rem;padding:4px 10px;border-radius:99px;background:var(--bg);border:1px solid var(--border);color:var(--text-light)}
.man-chip.is-block{border-radius:9px;padding:9px 12px;flex-direction:column;align-items:flex-start;gap:3px}
.man-chip-title{color:var(--text-dark);font-size:.8rem}
.man-chip-grid{display:grid;gap:8px;margin-bottom:14px}
.man-chip-grid.is-2{grid-template-columns:1fr 1fr}
.man-chip-grid.is-3{grid-template-columns:1fr 1fr 1fr}
.man-sub{font-size:.82rem;font-weight:600;color:var(--text-dark);margin:16px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--border)}
.faq-item{border:1px solid var(--border);border-radius:9px;overflow:hidden;margin-bottom:8px;background:var(--surface)}
.faq-q{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;cursor:pointer;font-size:.83rem;font-weight:500;color:var(--text-dark);background:var(--surface);border:none;width:100%;text-align:left;transition:.12s}
.faq-q:hover{background:var(--bg)}
.faq-q i.chevron{transition:.2s;font-size:.65rem;color:var(--text-xlight)}
.faq-q.is-open .chevron{transform:rotate(180deg)}
.faq-a{padding:12px 16px;font-size:.79rem;color:var(--text-light);line-height:1.6;background:var(--bg);border-top:1px solid var(--border)}
@media(max-width:800px){.man-wrap{grid-template-columns:1fr}.man-toc{position:static}}
.modal-box.is-sm{max-width:420px}
.modal-title.is-danger,.modal-title.is-danger i{color:var(--red)}
.venda-resumo-list{margin-bottom:16px;min-height:40px}
.venda-resumo-item{display:flex;justify-content:space-between;font-size:.82rem;padding:3px 0;border-bottom:1px solid var(--border)}
.venda-resumo-nome{color:var(--text-mid)}
.venda-resumo-val{font-weight:600}
.venda-totais{border-top:1px solid var(--border);padding-top:14px}
.venda-totais-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.venda-totais-row.is-final{border-top:1px solid var(--border);padding-top:10px;margin-bottom:0}
.venda-totais-label{font-size:.84rem;color:var(--text-mid)}
.venda-totais-label-inline{margin:0;font-size:.84rem;color:var(--text-mid);font-weight:500}
.venda-totais-val{font-size:.95rem;font-weight:600}
.venda-totais-val.is-total{font-family:var(--cond);font-size:1.65rem;font-weight:700;color:var(--ink)}
.venda-totais-lucro{display:flex;justify-content:space-between;align-items:center;margin-top:6px}
.venda-totais-lucro-label{font-size:.78rem;color:var(--text-xlight)}
.venda-totais-lucro-val{font-size:.86rem;font-weight:700}
.card-body-top-sep{border-top:1px solid var(--border);padding:14px 16px 0}
.form-label.is-sm{font-size:.73rem;color:var(--text-xlight)}
@media(max-width:640px){
  .tx-desktop-only{display:none}
  .tx-mobile-only{display:block}
}
/* ── AGENDAMENTOS — cartão cronológico no mobile ── */
.ag-mobile-only{display:none}
.ag-card-hora{font-size:1.05rem;font-weight:700;color:var(--text-dark);font-variant-numeric:tabular-nums}
.ag-card-data{font-size:.72rem;font-weight:400;color:var(--text-xlight);margin-left:6px}
.ag-card-cliente{font-weight:600;font-size:.88rem;color:var(--text-dark);margin-top:6px}
.ag-card-meta{display:flex;align-items:center;gap:6px;font-size:.78rem;color:var(--text-mid);margin-top:3px}
.ag-card-servico{font-size:.78rem;color:var(--text-light);margin-top:5px}
.ag-time{font-size:1rem;font-weight:700;color:var(--text-dark);font-variant-numeric:tabular-nums}
.ag-resp{font-size:.82rem;color:var(--text-mid)}
.ag-status-select{padding:4px 24px 4px 8px;font-size:.72rem;height:auto;border-radius:6px;min-width:0;width:auto}
.ag-status-select-sm{font-size:.78rem}
@media(max-width:640px){
  .ag-desktop-only{display:none}
  .ag-mobile-only{display:block}
}
/* ── CLIENTES — avatar reutilizado na linha desktop e no .m-card mobile ── */
.cli-mobile-only{display:none}
.cli-card-avatar{width:36px;height:36px;border-radius:10px;background:var(--avatar-bg);display:flex;align-items:center;justify-content:center;font-size:.9rem;font-weight:700;color:var(--primary);flex-shrink:0}
.cli-card-info{min-width:0;flex:1}
.cli-card-nome{font-weight:600;font-size:.9rem;color:var(--text-dark)}
.cli-card-sub{font-size:.76rem;color:var(--text-xlight);margin-top:1px}
.cli-card-tel{display:flex;align-items:center;gap:6px;margin-top:10px;font-size:.85rem;color:var(--primary);text-decoration:none;font-weight:500}
.cli-card-email{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:.78rem;color:var(--text-light)}
/* ── Contato na linha da tabela ── */
.cli-contact{display:flex;align-items:center;gap:5px;font-size:.8rem;color:var(--text-mid)}
.cli-contact i{font-size:10px;color:var(--text-xlight)}
.cli-contact a{color:var(--text-mid);text-decoration:none}
.cli-contact a:hover{color:var(--primary);text-decoration:none}
.cli-email-row{display:flex;align-items:center;gap:4px}
.cli-email-row i{font-size:9px}
.cli-contact-empty{font-size:.8rem;color:var(--text-light)}
.cli-lastbuy{font-size:.83rem;font-weight:500;color:var(--text-dark)}
/* ── Badge de método de pagamento ── */
.pm-badge{font-size:.65rem;font-weight:600;padding:2px 7px;border-radius:6px;display:inline-flex;align-items:center;gap:3px}
.pm-badge.is-ok{background:var(--ok-tint);color:var(--ok)}
.pm-badge.is-blue{background:var(--blue-bg);color:var(--blue-text)}
.pm-badge.is-warn{background:var(--warn-tint);color:var(--warn)}
.pm-badge.is-purple{background:var(--purple-bg);color:var(--purple-text)}
.pm-badge.is-neutral{background:var(--surface-2);color:var(--ink-3)}
/* ── Dropdown de ações (reutilizável) ── */
.dd-wrap{position:relative}
.dd-menu{position:absolute;right:0;top:calc(100% + 6px);min-width:180px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:0 8px 24px rgba(0,0,0,.1);z-index:400;overflow:hidden}
.dd-menu[hidden]{display:none}
.dd-item{display:flex;align-items:center;gap:9px;padding:10px 16px;font-size:.82rem;color:var(--ink-2);text-decoration:none;transition:background .1s}
.dd-item:hover{background:var(--surface-2);text-decoration:none}
@media(max-width:640px){
  .cli-desktop-only{display:none}
  .cli-mobile-only{display:block}
}
/* ── VENDAS — cartão no mobile ── */
.vnd-mobile-only{display:none}
.vnd-card-cliente{font-weight:600;font-size:.88rem;color:var(--text-dark)}
.vnd-card-cliente.is-empty{color:var(--text-xlight);font-weight:500}
.vnd-card-data{font-size:.74rem;color:var(--text-xlight);margin-top:1px}
.vnd-card-valor{font-weight:700;font-size:.95rem;color:var(--green-text);font-variant-numeric:tabular-nums;white-space:nowrap;flex-shrink:0}
.vnd-card-itens{font-size:.78rem;color:var(--text-light);margin-top:6px}
.vnd-card-meta{display:flex;align-items:center;gap:6px;font-size:.74rem;color:var(--text-light);margin-top:5px}
.vnd-card-actions .btn{min-height:44px}
@media(max-width:640px){
  .vnd-desktop-only{display:none}
  .vnd-mobile-only{display:block}
}
/* ── ESTOQUE — cartão no mobile ── */
.est-mobile-only{display:none}
.est-card-nome{font-weight:600;font-size:.88rem;color:var(--text-dark)}
.est-card-cat{font-size:.74rem;color:var(--text-xlight);margin-top:1px}
.est-card-qtd{font-family:var(--cond);font-weight:700;font-size:1.15rem;font-variant-numeric:tabular-nums;white-space:nowrap;flex-shrink:0}
.est-card-min{font-size:.74rem;color:var(--text-light);margin-top:5px}
@media(max-width:640px){
  .est-desktop-only{display:none}
  .est-mobile-only{display:block}
}
/* ── OS — cartão no mobile (visual .m-card, ver app/templates/empresa/os/lista.html) ── */
.os-mobile-only{display:none}
@media(max-width:640px){
  .os-desktop-only{display:none}
  .os-mobile-only{display:block}
}
/* ── PRODUTOS (catálogo) — visual .m-card, classes internas mantidas ── */
.prod-mobile-only{display:none}
.prod-card-nome{font-weight:600;font-size:.88rem;color:var(--text-dark)}
.prod-card-cat{font-size:.74rem;color:var(--text-xlight);margin-top:1px}
.prod-card-estoque{font-weight:700;font-size:1rem;font-variant-numeric:tabular-nums;white-space:nowrap;flex-shrink:0}
.prod-card-precos{display:flex;gap:14px;font-size:.78rem;color:var(--text-light);margin-top:8px}
.prod-card-precos strong{color:var(--text-dark);font-variant-numeric:tabular-nums}
@media(max-width:640px){
  .prod-desktop-only{display:none}
  .prod-mobile-only{display:block}
}
/* ── SERVIÇOS (catálogo) — cartão no mobile ── */
.srv-mobile-only{display:none}
.srv-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.srv-card-nome{font-weight:600;font-size:.88rem;color:var(--text-dark)}
.srv-card-desc{font-size:.76rem;color:var(--text-xlight);margin-top:2px}
.srv-card-preco{font-weight:700;font-size:.95rem;color:var(--text-dark);font-variant-numeric:tabular-nums;white-space:nowrap;flex-shrink:0}
.srv-card-meta{display:flex;align-items:center;gap:8px;font-size:.76rem;color:var(--text-light);margin-top:8px}
.srv-card-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}
.srv-card-actions .btn{min-height:44px}
@media(max-width:640px){
  .srv-desktop-only{display:none}
  .srv-mobile-only{display:block}
}
/* ── FOLLOW-UP DE CLIENTES — cartão no mobile ── */
.fu-mobile-only{display:none}
.fu-card{
  background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:14px;margin-bottom:8px;
}
.fu-card-top{display:flex;align-items:center;gap:10px}
.fu-card-avatar{width:36px;height:36px;border-radius:10px;background:var(--avatar-bg);display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700;color:var(--amber);flex-shrink:0}
.fu-card-nome{font-weight:600;font-size:.88rem;color:var(--text-dark)}
.fu-card-sub{font-size:.76rem;color:var(--text-xlight);margin-top:1px}
.fu-card-tel{display:flex;align-items:center;gap:6px;margin-top:10px;font-size:.85rem;color:var(--green-text);text-decoration:none;font-weight:500}
.fu-card-dias{margin-top:8px}
.fu-card-actions{display:flex;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}
.fu-card-actions .btn{min-height:44px;flex:1;justify-content:center}
@media(max-width:640px){
  .fu-desktop-only{display:none}
  .fu-mobile-only{display:block}
}
/* ── AGENDA DE RECEBÍVEIS — cartão no mobile ── */
.rec-mobile-only{display:none}
.rec-card{
  background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:14px;margin-bottom:8px;
}
.rec-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.rec-card-venc{font-weight:700;font-size:.88rem;color:var(--text-dark);font-variant-numeric:tabular-nums}
.rec-card-venc.atrasado{color:var(--red-text)}
.rec-card-origem{font-size:.85rem;color:var(--text-mid);margin-top:6px}
.rec-card-cliente{font-size:.78rem;color:var(--text-light);margin-top:1px}
.rec-card-valores{display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}
.rec-card-valor{font-family:var(--cond);font-weight:700;font-size:1.1rem;font-variant-numeric:tabular-nums}
.rec-card-recebido{font-size:.78rem;color:var(--green-text);font-variant-numeric:tabular-nums}
.rec-card-actions{margin-top:10px}
.rec-card-actions .btn{min-height:44px;width:100%;justify-content:center}
@media(max-width:640px){
  .rec-desktop-only{display:none}
  .rec-mobile-only{display:block}
}
/* ── FUNCIONÁRIOS (lista) — cartão no mobile ── */
.func-mobile-only{display:none}
.func-li-top{display:flex;align-items:center;gap:10px}
.func-li-avatar{width:36px;height:36px;border-radius:9px;background:var(--avatar-bg);display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700;color:var(--avatar-fg);flex-shrink:0}
.func-li-nome{font-weight:600;font-size:.88rem;color:var(--text-dark)}
.func-li-sub{font-size:.76rem;color:var(--text-xlight);margin-top:1px}
.func-li-badges{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.func-li-meta{display:flex;justify-content:space-between;align-items:center;font-size:.78rem;color:var(--text-light);margin-top:8px}
.func-li-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}
.func-li-actions .btn{min-height:44px}
@media(max-width:640px){
  .func-desktop-only{display:none}
  .func-mobile-only{display:block}
}
/* ── USUÁRIOS (segurança) — cartão no mobile ── */
.usr-mobile-only{display:none}
.usr-card{
  background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:14px;margin-bottom:8px;
}
.usr-card-top{display:flex;align-items:center;gap:10px}
.usr-card-nome{font-weight:600;font-size:.88rem;color:var(--text-dark)}
.usr-card-email{font-size:.76rem;color:var(--text-xlight);margin-top:1px}
.usr-card-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}
.usr-card-actions .btn{min-height:44px}
@media(max-width:640px){
  .usr-desktop-only{display:none}
  .usr-mobile-only{display:block}
}
/* ── HISTÓRICO DE AÇÕES (financeiro) — cartão no mobile ── */
.hist-mobile-only{display:none}
.hist-card{
  background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:14px;margin-bottom:8px;
}
.hist-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.hist-card-desc{font-weight:600;font-size:.86rem;color:var(--text-dark);flex:1;min-width:0}
.hist-card-valor{font-weight:700;font-size:.9rem;font-variant-numeric:tabular-nums;white-space:nowrap;flex-shrink:0}
.hist-card-meta{display:flex;align-items:center;gap:6px;font-size:.74rem;color:var(--text-light);margin-top:6px}
@media(max-width:640px){
  .hist-desktop-only{display:none}
  .hist-mobile-only{display:block}
}
/* ── PAINEL SUPER ADMIN — cartão genérico no mobile (reaproveitado nas 8 tabelas) ── */
.adm-mobile-only{display:none}
.adm-card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius-lg);padding:14px;margin-bottom:8px}
.adm-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.adm-card-title{font-weight:600;font-size:.86rem;color:var(--text-dark);flex:1;min-width:0}
.adm-card-sub{font-size:.76rem;color:var(--text-xlight);margin-top:1px}
.adm-card-meta{font-size:.78rem;color:var(--text-light);margin-top:6px;line-height:1.5}
.adm-card-desc{font-size:.78rem;color:var(--text-mid);margin-top:6px;line-height:1.4}
.adm-card-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}
.adm-card-actions .btn{min-height:44px}
@media(max-width:640px){
  .adm-desktop-only{display:none}
  .adm-mobile-only{display:block}
}
/* ── Tooltip component ── */
.tip{position:relative}
.tip::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);background:var(--tooltip-bg);color:#fff;font-size:.68rem;font-weight:400;padding:5px 10px;border-radius:6px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s;z-index:9999;font-family:'IBM Plex Sans',sans-serif;line-height:1.4;letter-spacing:.2px;max-width:220px;text-align:center}
.tip::before{content:'';position:absolute;bottom:calc(100% + 3px);left:50%;transform:translateX(-50%);border:4px solid transparent;border-top-color:var(--tooltip-bg);pointer-events:none;opacity:0;transition:opacity .15s;z-index:9999}
.tip:hover::after,.tip:hover::before{opacity:1}
.tip.is-wide::after{white-space:normal;width:220px}
.k-help{background:none;border:none;padding:0;margin-left:auto;color:var(--ink-3);cursor:help;display:inline-flex;line-height:1}
.k-help i{font-size:12px}
.dias-semana{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.dia-check{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);font-size:.82rem;cursor:pointer}
.dia-check input{margin:0}
.input-curto{max-width:110px}
/* Código de 6 dígitos: dígito grande e espaçado, para conferir sem esforço. */
.codigo-2fa{font-size:1.5rem;letter-spacing:.4em;text-align:center;font-variant-numeric:tabular-nums}
.tip-r::after{left:auto;right:0;transform:none}
.tip-r::before{left:auto;right:14px;transform:none}
.tip-l::after{left:0;transform:none}
.tip-l::before{left:14px;transform:none}
.tip-down::after{bottom:auto;top:calc(100% + 7px)}
.tip-down::before{bottom:auto;top:calc(100% + 3px);border-top-color:transparent;border-bottom-color:var(--tooltip-bg)}
#sb-tip{position:fixed;background:var(--tooltip-bg);color:#fff;font-size:.72rem;font-weight:500;padding:5px 11px;border-radius:6px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .12s;z-index:9999;font-family:'IBM Plex Sans',sans-serif;transform:translateY(-50%);box-shadow:0 2px 8px rgba(0,0,0,.3)}
/* ── Tour overlay ── */
#tour-overlay{position:fixed;inset:0;background:rgba(10,15,30,.78);z-index:1200;display:flex;align-items:center;justify-content:center;padding:20px}
.tour-card{background:var(--surface);border-radius:20px;padding:32px;max-width:520px;width:100%;box-shadow:0 24px 64px rgba(0,0,0,.35);animation:slideUp .25s ease}
.tour-head{text-align:center;margin-bottom:24px}
.tour-icon{width:56px;height:56px;background:var(--brand-tint);border-radius:16px;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;font-size:1.6rem;color:var(--brand)}
.tour-head h2{font-size:1.15rem;font-weight:700;color:var(--ink)}
.tour-head p{font-size:.82rem;color:var(--ink-2);margin-top:6px;line-height:1.5}
.tour-steps{display:flex;flex-direction:column;gap:6px;margin-bottom:24px}
.tour-step{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border-radius:10px;transition:.12s}
.tour-step:hover{background:var(--bg)}
.tour-step-icon{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:15px;background:var(--surface-2);color:var(--ink-2)}
.tour-step:nth-child(1) .tour-step-icon{background:var(--brand-tint);color:var(--brand)}
.tour-step:nth-child(2) .tour-step-icon{background:var(--ok-tint);color:var(--ok)}
.tour-step:nth-child(3) .tour-step-icon{background:var(--warn-tint);color:var(--warn)}
.tour-step-title{font-size:.84rem;font-weight:600;color:var(--ink)}
.tour-step-sub{font-size:.77rem;color:var(--ink-2);margin-top:2px;line-height:1.5}
.tour-btn{width:100%;font-size:.88rem;padding:11px}
.tour-skip-wrap{text-align:center;margin-top:10px}
.tour-skip{background:none;border:none;font-size:.73rem;color:var(--ink-3);cursor:pointer;text-decoration:underline}
/* ── TOAST NOTIFICATIONS ── */
#toast-area{position:fixed;bottom:72px;right:24px;z-index:9000;display:flex;flex-direction:column-reverse;gap:10px;pointer-events:none;max-width:360px}
.toast-item{background:var(--surface);border:1px solid rgba(0,0,0,.08);border-radius:13px;padding:14px 16px;display:flex;align-items:flex-start;gap:11px;box-shadow:0 10px 36px rgba(0,0,0,.13),0 2px 8px rgba(0,0,0,.05);pointer-events:all;animation:toastIn .32s cubic-bezier(.21,1.02,.73,1) both;position:relative;overflow:hidden;min-width:260px;max-width:360px}
.toast-item.removing{animation:toastOut .22s ease forwards}
.toast-ico{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:15px}
.toast-ico.t-success{background:var(--green-bg);color:var(--green)}
.toast-ico.t-error{background:var(--red-bg);color:var(--red)}
.toast-ico.t-warning{background:var(--amber-bg);color:var(--amber)}
.toast-ico.t-info{background:var(--primary-light);color:var(--primary)}
.toast-body{flex:1;min-width:0}
.toast-msg{font-size:.82rem;color:var(--text-dark);line-height:1.45;font-weight:500}
.toast-x{background:none;border:none;cursor:pointer;color:var(--text-xlight);padding:2px;display:flex;align-items:center;font-size:15px;flex-shrink:0;border-radius:4px;transition:.12s;margin-top:-1px}
.toast-x:hover{color:var(--text-dark);background:var(--bg)}
.toast-bar{position:absolute;bottom:0;left:0;height:3px;border-radius:0}
.toast-bar.t-success{background:var(--green)}.toast-bar.t-error{background:var(--red)}.toast-bar.t-warning{background:var(--amber)}.toast-bar.t-info{background:var(--primary)}
@keyframes toastIn{from{opacity:0;transform:translateX(110%) scale(.9)}to{opacity:1;transform:translateX(0) scale(1)}}
@keyframes toastOut{from{opacity:1;transform:translateX(0) scale(1)}to{opacity:0;transform:translateX(110%) scale(.9)}}
/* ── MODAL DE CONFIRMAÇÃO ── */
.cfm-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:2000;display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);animation:fadeIn .15s ease}
.cfm-overlay.hiding{animation:cfmFadeOut .15s ease forwards}
.cfm-box{background:var(--surface);border-radius:20px;padding:32px 28px;max-width:400px;width:100%;box-shadow:0 28px 72px rgba(0,0,0,.22);animation:slideUp .2s ease;text-align:center}
.cfm-overlay.hiding .cfm-box{animation:cfmSlideDown .15s ease forwards}
.cfm-ico{width:58px;height:58px;border-radius:16px;margin:0 auto 18px;display:flex;align-items:center;justify-content:center;font-size:26px}
.cfm-title{font-size:1.02rem;font-weight:700;color:var(--text-dark);margin-bottom:8px}
.cfm-sub{font-size:.82rem;color:var(--text-light);line-height:1.55;margin-bottom:24px}
.cfm-actions{display:flex;gap:10px;justify-content:center}
.cfm-field{text-align:left;margin-bottom:20px}
.cfm-field-label{display:block;font-size:.78rem;font-weight:600;color:var(--ink-1);margin-bottom:6px}
.cfm-field-erro{font-size:.75rem;color:var(--bad);margin-top:6px}
@keyframes cfmFadeOut{to{opacity:0}}
@keyframes cfmSlideDown{to{opacity:0;transform:translateY(12px) scale(.97)}}
/* ── LOADING SPINNER ── */
.spin{width:14px;height:14px;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite;flex-shrink:0}
.btn-outline .spin,.btn-ghost .spin{border-color:rgba(0,0,0,.12);border-top-color:var(--text-mid)}
@keyframes spin{to{transform:rotate(360deg)}}
/* ── ALERT DISMISS ── */
.alert{position:relative;padding-right:36px}
.alert-x{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:inherit;opacity:.55;padding:3px;display:flex;align-items:center;font-size:14px;border-radius:4px;transition:.12s;line-height:1}
.alert-x:hover{opacity:1;background:rgba(0,0,0,.06)}
/* ── FINANCIAL SUMMARY CARD ── */
.fin-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius-lg);padding:16px 20px;display:flex;align-items:center;gap:14px;box-shadow:var(--card-shadow);transition:all var(--transition-slow)}
.fin-card:hover{box-shadow:var(--card-shadow)}
.fin-icon{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.fin-label{font-size:.8rem;font-weight:400;color:var(--ink-2);margin-bottom:3px}
.fin-value{font-family:var(--cond);font-size:1.45rem;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums;line-height:1}
/* ── SEARCH LOADING ── */
.search-loading::after{content:'';position:absolute;right:14px;top:50%;transform:translateY(-50%);width:12px;height:12px;border:2px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .6s linear infinite}

/* ── FAIXA "HOJE" (T.21) ──
   O dia primeiro: antes de qualquer filtro ou gráfico, o que é de hoje.
   É o segundo bloco de tinta da tela (o primeiro é a sidebar) e usa o
   chanfro grande no canto. Cada célula inteira é o link — sem três
   "ver mais" competindo dentro da faixa. */
.today{
  display:grid;grid-template-columns:1.5fr 1fr 1fr;
  background:var(--ink);color:var(--ink-on);
  border-radius:var(--r-lg);overflow:hidden;margin-bottom:16px;
  clip-path:var(--chamfer-lg);
}
.today>a{padding:20px 22px 22px;border-right:1px solid var(--ink-line-soft);display:block;color:inherit;text-decoration:none}
.today>a:last-child{border-right:0}
.today>a:hover{background:var(--ink-hover);text-decoration:none}
.today h3{font-size:.78rem;font-weight:400;color:var(--ink-on-2);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.today h3 .bi{margin-left:auto;font-size:.85rem;color:var(--ink-on-3)}
.today>a:hover h3 .bi{color:var(--ink-on)}
.today ul{list-style:none;display:grid;gap:10px}
.today li{display:grid;grid-template-columns:52px 1fr;gap:10px;font-size:.9rem;align-items:baseline}
.today li time{font-family:var(--cond);font-weight:600;font-size:1.05rem;color:var(--ink-on-2)}
.today li small{display:block;font-size:.76rem;color:var(--ink-on-3);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.today-big{font-family:var(--cond);font-weight:700;font-size:2.1rem;line-height:1;margin-bottom:8px}
.today-sub{font-size:.82rem;color:var(--ink-on-2)}
.today-sub b{color:var(--ink-on);font-weight:600}
.today-empty{font-size:.84rem;color:var(--ink-on-3)}
@media(max-width:900px){
  .today{grid-template-columns:1fr 1fr}
  .today>a:first-child{grid-column:1/-1;border-right:0;border-bottom:1px solid var(--ink-line-soft)}
  .today>a:nth-child(2){border-right:1px solid var(--ink-line-soft)}
}
@media(max-width:768px){
  .today>a{padding:14px 16px}
  .today-big{font-size:1.7rem}
}

/* ── CABEÇALHO-ETIQUETA DA OS (T.23) ──
   A OS deixa de ser "título + card com trilha" e passa a ser um documento
   só: número, cliente, status e total no topo, trilha embutida embaixo,
   canto chanfrado. A .trail existente foi mantida como está — o guia pede
   que ela continue. */
.ticket{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);clip-path:var(--chamfer-lg);
  margin-bottom:16px;
}
.ticket-top{display:grid;grid-template-columns:1fr auto;gap:16px;padding:20px 26px 16px;align-items:start}
.ticket-num{font-family:var(--cond);font-weight:700;font-size:2.6rem;line-height:1.02;letter-spacing:-.01em;color:var(--ink)}
.ticket-who{font-size:.95rem;color:var(--ink-2);margin-top:4px}
.ticket-who b{color:var(--ink);font-weight:600}
.ticket-stamp{display:flex;flex-direction:column;align-items:flex-end;gap:10px;text-align:right}
.ticket-total{font-family:var(--cond);font-weight:700;font-size:1.7rem;line-height:1;color:var(--ink)}
.ticket-total small{display:block;font-family:var(--sans);font-weight:400;font-size:.74rem;color:var(--ink-3);margin-top:3px}
.ticket .trail{margin:0;padding:14px 26px 16px;border-top:1px solid var(--line)}
.ticket-copy{background:none;border:none;cursor:pointer;color:var(--ink-3);padding:2px 6px;border-radius:var(--r);font-size:.85rem;vertical-align:middle}
.ticket-copy:hover{background:var(--surface-2);color:var(--ink)}
@media(max-width:768px){
  .ticket-top{grid-template-columns:1fr;padding:16px 18px 12px}
  .ticket-num{font-size:2rem}
  .ticket-stamp{flex-direction:row;align-items:center;justify-content:space-between;width:100%;text-align:left}
  .ticket .trail{padding:12px 18px 14px}
}

/* ── Painel "Últimas vendas" do dashboard (T.32) ──
   Divide a faixa com o gráfico de faturamento, então tem ~metade da largura:
   quatro colunas com largura fixa, e o nome do cliente truncando em vez de
   empilhar em torre. Os itens vendidos são sub-linha, não coluna. */
.tbl-vendas{table-layout:fixed}
.tbl-vendas th,.tbl-vendas td{padding-left:12px;padding-right:12px}
.tbl-vendas .col-cli{width:38%}
.tbl-vendas .col-pgto{width:25%}
.tbl-vendas .col-tot{width:21%}
.tbl-vendas .col-data{width:16%}
.tbl-vendas .td-main,.tbl-vendas .td-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tbl-vendas .badge{max-width:100%;overflow:hidden;text-overflow:ellipsis;display:inline-block}