/* ============================================================
   Sistema Rodo Wall — Padrão visual (fonte única)
   ------------------------------------------------------------
   Cores, tipografia e componentes de TODOS os módulos. Tela nova
   ou alterada usa só o que está aqui: classe em vez de style="",
   variável em vez de cor fixa, tamanho da escala em vez de px solto.

   As classes mantêm o prefixo cl- (nasceram no Checklist e já são
   as mais usadas no sistema) — o nome não aparece para o usuário,
   então renomear 1.000+ usos não valeria o risco.

   Régua:
     Fonte      Inter, pesos 400 / 500 / 600
     Tamanhos   12 · 13 · 14 · 16 · 20 · 28  (nada abaixo de 12)
     Raios      6 (controles) · 12 (cards e janelas) · pílula
     Espaço     múltiplos de 4
     Ação       azul secundário oficial #005d92
     Marca      azul principal #020d3f + mostarda #b5911b (menu)
   ============================================================ */

/* ---------- Tokens: tema CLARO (padrão) ---------- */
:root{
  --font:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fs-xs:12px;   /* legenda, cabeçalho de tabela, etiqueta */
  --fs-sm:13px;   /* tabela, botão, texto de apoio */
  --fs-md:14px;   /* texto padrão, campo */
  --fs-lg:16px;   /* título de card e de janela */
  --fs-xl:20px;   /* título da tela */
  --fs-num:28px;  /* número de indicador */

  --r-sm:6px; --r-lg:12px; --r-full:999px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px;
  --ctl:36px; --ctl-sm:30px;   /* altura de botão e campo; versão de tabela */
  --t:.15s ease;

  --navy:#020d3f; --mustard:#b5911b;
  --mustard-text:#8a6c10;   /* mostarda como cor de TEXTO: o #b5911b some no fundo claro */

  --bg:#eef2f9; --surface:#ffffff; --surface2:#f5f7fb; --surface3:#e8edf5;
  --border:#dde4ee; --border2:#b9c5d7;
  --text:#0c1a3d; --text2:#43577a; --text3:#586a89;

  --accent:#005d92; --accent-hover:#004a75; --accent-text:#005d92;
  --accent-dim:rgba(0,93,146,.09); --on-accent:#ffffff;

  --green:#11704a;  --green-dim:rgba(17,112,74,.10); --green-solid:#11704a;
  --orange:#a3540b; --orange-dim:rgba(163,84,11,.10);
  --red:#c0292b;    --red-dim:rgba(192,41,43,.09); --red-solid:#c0292b;
  --gray-dim:rgba(67,87,122,.09);

  --side-bg:#020d3f; --side-text:#b9c4d9; --side-text-forte:#ffffff;
  --side-hover:rgba(255,255,255,.06); --side-ativo:rgba(255,255,255,.10); --side-borda:rgba(255,255,255,.10);

  --overlay:rgba(2,13,63,.45);
  --sombra-1:0 1px 2px rgba(2,13,63,.05);
  --sombra-2:0 8px 24px rgba(2,13,63,.12);
  --sombra-3:0 20px 48px rgba(2,13,63,.22);
  --foco:0 0 0 3px rgba(0,93,146,.22);
  color-scheme:light;
}

/* ---------- Tokens: tema ESCURO ----------
   Repetido de propósito: [data-theme] é a escolha da pessoa no sistema;
   a media query cobre o instante antes do JS aplicar o tema. */
:root[data-theme="dark"]{
  --bg:#0a1124; --surface:#111a33; --surface2:#17223f; --surface3:#1e2a4b;
  --border:#24314f; --border2:#364668;
  --text:#e7ecf5; --text2:#a8b5cb; --text3:#8592ab;
  --accent:#1f7bb8; --accent-hover:#2a8bcc; --accent-text:#5aaee3; --mustard-text:#e3bd45;
  --accent-dim:rgba(90,174,227,.14); --on-accent:#ffffff;
  --green:#3cc48f;  --green-dim:rgba(60,196,143,.13); --green-solid:#1a7a53;   /* fundo com letra branca: o verde claro do escuro não dá leitura */
  --orange:#e89a4f; --orange-dim:rgba(232,154,79,.13);
  --red:#f0716e;    --red-dim:rgba(240,113,110,.13); --red-solid:#c43a35;
  --gray-dim:rgba(168,181,203,.12);
  --side-bg:#070d20; --side-text:#a8b5cb;
  --overlay:rgba(0,0,0,.55);
  --sombra-1:0 1px 2px rgba(0,0,0,.25);
  --sombra-2:0 8px 24px rgba(0,0,0,.35);
  --sombra-3:0 20px 48px rgba(0,0,0,.5);
  --foco:0 0 0 3px rgba(90,174,227,.30);
  color-scheme:dark;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0a1124; --surface:#111a33; --surface2:#17223f; --surface3:#1e2a4b;
    --border:#24314f; --border2:#364668;
    --text:#e7ecf5; --text2:#a8b5cb; --text3:#8592ab;
    --accent:#1f7bb8; --accent-hover:#2a8bcc; --accent-text:#5aaee3; --mustard-text:#e3bd45;
    --accent-dim:rgba(90,174,227,.14); --on-accent:#ffffff;
    --green:#3cc48f;  --green-dim:rgba(60,196,143,.13); --green-solid:#1a7a53;   /* fundo com letra branca: o verde claro do escuro não dá leitura */
    --orange:#e89a4f; --orange-dim:rgba(232,154,79,.13);
    --red:#f0716e;    --red-dim:rgba(240,113,110,.13); --red-solid:#c43a35;
    --gray-dim:rgba(168,181,203,.12);
    --side-bg:#070d20; --side-text:#a8b5cb;
    --overlay:rgba(0,0,0,.55);
    --sombra-1:0 1px 2px rgba(0,0,0,.25);
    --sombra-2:0 8px 24px rgba(0,0,0,.35);
    --sombra-3:0 20px 48px rgba(0,0,0,.5);
    --foco:0 0 0 3px rgba(90,174,227,.30);
    color-scheme:dark;
  }
}

/* ---------- Compatibilidade ----------
   Os nomes antigos de cada módulo (Checklist --cl*, PAD --p*, telas antigas)
   aparecem em centenas de lugares; apontá-los para o padrão unifica as cores
   sem mexer em cada uso. Tela migrada usa os nomes do padrão direto. */
:root{
  --clbg:var(--bg); --clbg2:var(--surface); --clcard:var(--surface); --clcard-h:var(--surface2);
  --claccent:var(--accent); --claccent-dim:var(--accent-dim); --claccent-glow:var(--accent-dim);
  --clborder:var(--border); --clborder-b:var(--border2);
  --cltx:var(--text); --cltx2:var(--text2); --cltx3:var(--text3);
  --clgreen:var(--green); --clgreen-dim:var(--green-dim);
  --clred:var(--red); --clred-dim:var(--red-dim);
  --clorange:var(--orange); --clorange-dim:var(--orange-dim);
  --clradius:var(--r-lg); --clfd:var(--font); --clfb:var(--font);
  --pbg:var(--bg); --pcard:var(--surface); --pcard-h:var(--surface2);
  --pacc:var(--accent); --pacc-dim:var(--accent-dim); --pacc-glow:var(--accent-dim);
  --pbor:var(--border); --pbor-b:var(--border2);
  --ptx:var(--text); --ptx2:var(--text2); --ptx3:var(--text3); --pfd:var(--font);
  --accent2:var(--accent-text); --accent-glow:var(--accent-dim); --glass-border:var(--border);
  --elev:var(--sombra-1); --elev-md:var(--sombra-2); --elev-lg:var(--sombra-3);
  --r-xs:var(--r-sm); --r-md:var(--r-sm);
}

/* ---------- Base ---------- */
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font); font-size:var(--fs-md); line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
:focus-visible{ outline:2px solid var(--accent-text); outline-offset:2px; }
.cl-num{ font-variant-numeric:tabular-nums; text-align:right; }
.cl-ic{ display:inline-block; vertical-align:middle; flex-shrink:0; }

/* ---------- Estrutura: menu lateral + cabeçalho + conteúdo ---------- */
.cl-app{
  display:none; min-height:100vh;
  background:var(--bg); color:var(--text);
  font-family:var(--font); font-size:var(--fs-md);
}
.cl-app[style*="flex"]{ display:flex !important; }

.cl-side{
  width:240px; flex-shrink:0;
  display:flex; flex-direction:column; gap:2px;
  padding:16px 12px; background:var(--side-bg); color:var(--side-text);
}
/* Logo em cima e nome do módulo embaixo: nomes longos ("Gestão do Motorista") cabem sem espremer */
.cl-brand{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:0 8px 16px; margin-bottom:8px; text-align:center;
  border-bottom:1px solid var(--side-borda);
  color:var(--side-text-forte); font-size:var(--fs-md); font-weight:600;
}
.cl-brand-logo{ width:112px; height:52px; object-fit:cover; flex-shrink:0; }   /* o PNG tem margem larga: o corte centraliza o emblema */
.cl-brand-modulo{ line-height:1.3; }

.cl-nav{ display:flex; flex-direction:column; gap:2px; }
.cl-nav-sec{
  padding:16px 10px 6px;
  font-size:var(--fs-xs); font-weight:600; color:var(--side-text); opacity:.75;
}
.cl-nav-item{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:8px 10px; border:none; border-radius:var(--r-sm);
  background:transparent; color:var(--side-text);
  font-family:var(--font); font-size:var(--fs-md); font-weight:500;
  text-align:left; white-space:nowrap; cursor:pointer;
  transition:background var(--t), color var(--t);
}
.cl-nav-item span{ overflow:hidden; text-overflow:ellipsis; min-width:0; }
.cl-nav-item:hover{ background:var(--side-hover); color:var(--side-text-forte); }
.cl-nav-item.active{
  background:var(--side-ativo); color:var(--side-text-forte); font-weight:600;
  box-shadow:inset 3px 0 0 var(--mustard);
}
.cl-nav-badge{
  margin-left:auto; min-width:20px; padding:0 6px; border-radius:var(--r-full);
  background:var(--mustard); color:var(--navy);
  font-size:var(--fs-xs); font-weight:600; line-height:20px; text-align:center;
}

.cl-nav-badge.alerta{ background:var(--red-solid); color:#fff; }   /* contador de prazo/alerta vencendo */

.cl-main{ flex:1; display:flex; flex-direction:column; min-width:0; }
.cl-top{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:16px 24px; background:var(--surface); border-bottom:1px solid var(--border);
}
.cl-top-title{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.cl-top-title span{ font-size:var(--fs-xl); font-weight:600; line-height:1.3; color:var(--text); }
.cl-top-title small{ font-size:var(--fs-sm); color:var(--text2); }
.cl-top-title small:empty{ display:none; }
.cl-top-right{ display:flex; align-items:center; gap:8px; }
.cl-top-user{ font-size:var(--fs-sm); font-weight:500; color:var(--text2); }
.cl-view{ padding:24px; width:100%; box-sizing:border-box; }

/* Barra da tela: filtros à esquerda, ação principal à direita */
.cl-barra, .cl-filtros{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.cl-barra-fim{ margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; }
/* Filtros na barra não ocupam a linha toda: dividem o espaço e quebram linha se precisar */
.cl-barra > .cl-input{ width:auto; }
.cl-filtros > .cl-input, .cl-filtros > select{ width:auto; flex:1 1 150px; min-width:0; }
.cl-busca{ position:relative; flex:1 1 240px; max-width:360px; }
.cl-busca .cl-ic{ position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--text3); pointer-events:none; }
.cl-busca .cl-input{ padding-left:34px; }

/* Usuário e botão de tema no cabeçalho (o ícone vem de theme.js) */
.cl-top .user-pill{ display:flex; align-items:center; gap:8px; font-size:var(--fs-sm); font-weight:500; color:var(--text2); }
.cl-top .role-tag{ padding:2px 8px; border-radius:var(--r-full); font-size:var(--fs-xs); font-weight:500; letter-spacing:0; text-transform:none; }

/* PAD e Administração: mesma casca, mas a área de conteúdo rola por dentro */
#app.cl-app, #hubAdminScreen{ height:100vh; overflow:hidden; }
#app .cl-main, #hubAdminScreen .cl-main{ min-height:0; overflow:hidden; }
#hubAdminScreen .content-wrap{ flex:1; overflow-y:auto; padding:24px; }

/* ---------- Tela de módulos ---------- */
#hubScreen{
  position:fixed; inset:0; z-index:500; display:none;
  flex-direction:column; align-items:center; overflow-y:auto;
  background:var(--side-bg); color:var(--side-text-forte);
}
.hub-inner{ position:relative; box-sizing:border-box; width:min(1040px, 100%); padding:48px 24px 32px; }
.hub-head{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-bottom:32px; }
.hub-logo{ width:140px; height:72px; object-fit:cover; flex-shrink:0; }
.hub-boasvindas{ flex:1; min-width:200px; padding-left:20px; border-left:1px solid var(--side-borda); }
.hub-title{ margin:0; font-size:var(--fs-xl); font-weight:600; color:var(--side-text-forte); }
.hub-sub{ margin:2px 0 0; font-size:var(--fs-md); color:var(--side-text); }
.hub-acoes{ display:flex; gap:8px; }
.hub-acoes .cl-btn-ghost{ color:var(--side-text); }
.hub-acoes .cl-btn-ghost:hover{ background:var(--side-hover); color:var(--side-text-forte); }
.hub-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:16px; }
.hub-card{
  position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:4px;
  padding:20px; text-align:left; cursor:pointer;
  background:var(--surface); color:var(--text);
  border:1px solid var(--border); border-radius:var(--r-lg);
  font-family:var(--font); transition:border-color var(--t), box-shadow var(--t);
}
.hub-card:hover{ border-color:var(--accent); box-shadow:var(--sombra-2); }
.hub-card-ic{
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; margin-bottom:8px; border-radius:var(--r-sm);
  background:var(--accent-dim); color:var(--accent-text);
}
.hub-card-nome{ font-size:var(--fs-lg); font-weight:600; color:var(--text); }
.hub-card-desc{ font-size:var(--fs-sm); line-height:1.5; color:var(--text2); }
.hub-card-seta{ position:absolute; top:20px; right:20px; color:var(--text3); transition:transform var(--t), color var(--t); }
.hub-card:hover .hub-card-seta{ transform:translateX(3px); color:var(--accent-text); }
.hub-card-admin .hub-card-ic{ background:var(--gray-dim); color:var(--text2); }
.hub-foot{ margin-top:32px; text-align:center; font-size:var(--fs-xs); color:var(--side-text); }

@media (max-width:860px){
  #hubAdminScreen{ flex-direction:column !important; }
  .hub-inner{ padding:24px 16px; }
  .hub-boasvindas{ padding-left:0; border-left:none; }
}

/* ---------- Card ---------- */
.cl-card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:20px; margin-bottom:16px;
  box-shadow:var(--sombra-1);
}
.cl-card-titulo{
  display:flex; align-items:center; gap:8px; margin:0 0 16px;
  font-size:var(--fs-lg); font-weight:600; color:var(--text);
}
.cl-card-titulo .cl-ic{ color:var(--text3); }
.cl-sec-box{
  background:var(--surface2); border:1px solid var(--border);
  border-radius:var(--r-sm); padding:16px; margin-bottom:16px;
}
.cl-sec-lbl{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-bottom:12px; font-size:var(--fs-xs); font-weight:600; color:var(--text2);
}

/* ---------- Botões ----------
   Primária = a ação da tela (uma só). Secundária = demais ações.
   Discreta = ação de menor peso. Perigo = excluir; na confirmação,
   primária + perigo fica vermelha cheia. .cl-btn-sec e .cl-modbtn
   eram variantes antigas: agora têm a mesma cara da secundária. */
.cl-btn, .cl-btn-sec, .cl-modbtn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  box-sizing:border-box; height:var(--ctl); padding:0 14px;
  border:1px solid var(--border2); border-radius:var(--r-sm);
  background:var(--surface); color:var(--text);
  font-family:var(--font); font-size:var(--fs-sm); font-weight:600; line-height:1;
  white-space:nowrap; text-decoration:none; cursor:pointer;
  transition:background var(--t), border-color var(--t), color var(--t);
}
.cl-btn:hover, .cl-modbtn:hover{ background:var(--surface2); color:var(--text); }
.cl-btn:active{ background:var(--surface3); }
.cl-btn:disabled{ opacity:.5; cursor:not-allowed; }
.cl-btn .cl-ic{ width:16px; height:16px; }
.cl-btn-primary{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.cl-btn-primary:hover{ background:var(--accent-hover); border-color:var(--accent-hover); color:var(--on-accent); }
.cl-btn-ghost, .cl-modbtn{ background:transparent; border-color:transparent; color:var(--text2); }
.cl-btn-ghost:hover{ background:var(--surface2); color:var(--text); }
.cl-btn-danger{ color:var(--red); }
.cl-btn-danger:hover{ background:var(--red-dim); border-color:var(--red); color:var(--red); }
.cl-btn-primary.cl-btn-danger{ background:var(--red-solid); border-color:var(--red-solid); color:#fff; }
.cl-btn-primary.cl-btn-danger:hover{ background:var(--red-solid); border-color:var(--red-solid); color:#fff; filter:brightness(1.08); }
.cl-btn-icone{ width:var(--ctl); padding:0; }
.cl-btn-sm{ height:var(--ctl-sm); padding:0 10px; font-size:var(--fs-xs); }
.cl-btn-sm.cl-btn-icone{ width:var(--ctl-sm); padding:0; }
/* Texto clicável no meio de uma frase ou célula (abre algo, não grava nada) */
.cl-link{ color:var(--accent-text); font-weight:500; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.cl-link:hover{ text-decoration-thickness:2px; }
.cl-td-acoes{ display:flex; gap:4px; justify-content:flex-end; }
/* Botão dentro de linha de tabela: versão baixa, para caber mais linhas numa tela */
.cl-td-acoes .cl-btn, .cl-table td .cl-btn, .cl-table td .cl-btn-sec{ height:var(--ctl-sm); padding:0 10px; font-size:var(--fs-xs); }
.cl-td-acoes .cl-btn-icone, .cl-table td .cl-btn-icone{ width:var(--ctl-sm); padding:0; }

/* ---------- Campos ---------- */
.cl-field{ display:flex; flex-direction:column; gap:6px; margin-bottom:16px; min-width:0; }
.cl-field label, .cl-rotulo{ font-size:var(--fs-sm); font-weight:500; color:var(--text2); }
/* :where() zera o peso do filtro de tipo, senão o foco e o erro abaixo não venceriam */
.cl-input, .cl-textarea,
.cl-field :where(input:not([type="checkbox"]):not([type="radio"])), .cl-field select, .cl-field textarea{
  box-sizing:border-box; width:100%; height:var(--ctl); padding:0 12px;
  border:1px solid var(--border2); border-radius:var(--r-sm);
  background:var(--surface); color:var(--text);
  font-family:var(--font); font-size:var(--fs-md);
  transition:border-color var(--t), box-shadow var(--t);
}
/* Campo dentro de uma LINHA flex (ex.: nº da nota + tipo + remover): sem os 100%, senão um
   campo espreme o outro até sumir. Volta ao tamanho natural; quem tem flex:1 ocupa o resto. */
[style*="display:flex"]:not([style*="column"]) > .cl-input{ width:auto; min-width:0; }
[style*="display:flex"]:not([style*="column"]) > input.cl-input{ min-width:120px; }
.cl-textarea, .cl-field textarea{ height:auto; min-height:88px; padding:8px 12px; line-height:1.5; resize:vertical; }
select.cl-input, .cl-field select{
  appearance:none; padding-right:32px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d8ca6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; background-size:16px;
}
.cl-input::placeholder, .cl-textarea::placeholder, .cl-field ::placeholder{ color:var(--text3); }
.cl-input:focus, .cl-textarea:focus, .cl-field input:focus, .cl-field select:focus, .cl-field textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:var(--foco);
}
.cl-input:disabled, .cl-field input:disabled, .cl-field select:disabled{
  background:var(--surface2); color:var(--text3); cursor:not-allowed;
}
.cl-ajuda{ font-size:var(--fs-xs); color:var(--text3); }
.cl-erro{ font-size:var(--fs-xs); color:var(--red); }
.cl-field.is-erro input, .cl-field.is-erro select, .cl-field.is-erro textarea{ border-color:var(--red); }
input[type="checkbox"], input[type="radio"]{ accent-color:var(--accent); }
.cl-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
.cl-form-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:0 16px; }
.cl-acoes-fim{ display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap; margin-top:16px; }

/* Opções de filtro (liga/desliga) */
.cl-filtro-lbl{ font-size:var(--fs-sm); font-weight:500; color:var(--text2); }
.cl-filtro-opt, .cl-chk-item{
  display:inline-flex; align-items:center; gap:6px;
  box-sizing:border-box; height:32px; padding:0 12px;
  border:1px solid var(--border2); border-radius:var(--r-full);
  background:var(--surface); color:var(--text2);
  font-family:var(--font); font-size:var(--fs-sm); font-weight:500; cursor:pointer;
  transition:background var(--t), border-color var(--t), color var(--t);
}
.cl-filtro-opt:hover, .cl-chk-item:hover{ background:var(--surface2); color:var(--text); }
.cl-filtro-opt.is-on, .cl-chk-item:has(input:checked){
  background:var(--accent-dim); border-color:var(--accent); color:var(--accent-text);
}
.cl-filtro-qtd{
  min-width:20px; padding:0 6px; border-radius:var(--r-full);
  background:var(--surface3); color:var(--text2);
  font-size:var(--fs-xs); font-weight:600; line-height:20px; text-align:center;
}
.cl-filtro-opt.is-on .cl-filtro-qtd{ background:var(--accent); color:var(--on-accent); }

/* ---------- Abas ---------- */
/* A linha de baixo é sombra (não borda) para a aba ativa pintar por cima sem
   margem negativa, que criava rolagem vertical quando as abas não cabem. */
.cl-tabs{
  display:flex; gap:4px; margin-bottom:16px; box-shadow:inset 0 -1px 0 var(--border);
  overflow-x:auto; scrollbar-width:none;
}
.cl-tabs::-webkit-scrollbar{ display:none; }
.cl-tab{
  flex-shrink:0; padding:10px 12px;
  border:none; border-bottom:2px solid transparent; border-radius:0; background:none;
  color:var(--text2); font-family:var(--font); font-size:var(--fs-md); font-weight:500;
  white-space:nowrap; cursor:pointer;
}
.cl-tab:hover{ color:var(--text); }
.cl-tab.active{ border-bottom-color:var(--accent); color:var(--accent-text); font-weight:600; }

/* ---------- Tabela ----------
   A sombra nas bordas avisa que a tabela rola (gradientes "local" cobrem
   a sombra quando a rolagem chega ao fim). 1ª coluna fica fixa ao rolar. */
.cl-table-wrap{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:thin; scrollbar-color:var(--border2) transparent;
  background:
    linear-gradient(to right, var(--surface) 30%, transparent) 0 0,
    linear-gradient(to left, var(--surface) 30%, transparent) 100% 0,
    linear-gradient(to right, rgba(0,0,0,.18), transparent) 0 0,
    linear-gradient(to left, rgba(0,0,0,.18), transparent) 100% 0;
  background-repeat:no-repeat;
  background-size:24px 100%, 24px 100%, 10px 100%, 10px 100%;
  background-attachment:local, local, scroll, scroll;
  background-color:var(--surface);
}
/* O texto das células quebra linha; a tabela só rola de lado quando nem assim cabe
   (os botões de ação nunca quebram: .cl-td-acoes é flex sem quebra). */
.cl-table{
  width:100%; border-collapse:collapse;
  font-size:var(--fs-sm); font-variant-numeric:tabular-nums;
}
.cl-table th{
  padding:8px 12px; text-align:left; white-space:nowrap;
  background:var(--surface2); border-bottom:1px solid var(--border);
  color:var(--text2); font-size:var(--fs-xs); font-weight:600;
}
.cl-table td{ padding:10px 12px; border-bottom:1px solid var(--border); color:var(--text); vertical-align:middle; }
.cl-table tbody tr{ background:var(--surface); transition:background var(--t); }
.cl-table tbody tr:hover{ background:var(--surface2); }
.cl-table tbody tr:last-child td{ border-bottom:none; }
.cl-table th.cl-num, .cl-table td.cl-num{ text-align:right; white-space:nowrap; }
.cl-centro{ text-align:center; }
.cl-table-click tbody tr{ cursor:pointer; }
.cl-table-click tbody tr.plain{ cursor:default; }
.cl-table th:first-child, .cl-table td:first-child{ position:sticky; left:0; z-index:1; }
.cl-table td:first-child{ background:inherit; }   /* cobre o que passa por baixo ao rolar */
.cl-td-forte, .cl-forte{ font-weight:600; }
.cl-apoio{ font-size:var(--fs-sm); color:var(--text2); }
.cl-td-apoio{ display:block; font-size:var(--fs-xs); color:var(--text3); }

/* Paginação (js/comum/paginacao.js): a lista mostra só o que cabe numa tela */
tr.rw-pag-fora{ display:none !important; }   /* !important: no celular algumas tabelas viram cartões com display próprio */
.cl-pag{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding-top:12px; font-size:var(--fs-sm); color:var(--text2);
}
.cl-pag-nav{ display:flex; align-items:center; gap:8px; }

/* ---------- Etiquetas ----------
   Azul = em andamento · Laranja = atenção · Vermelho = vencido/erro ·
   Verde = concluído · Cinza = inativo ou aguardando. */
.cl-pill, .cl-pill-gray{
  display:inline-flex; align-items:center; gap:6px;
  height:22px; padding:0 8px; border-radius:var(--r-full);
  background:var(--gray-dim); color:var(--text2);
  font-size:var(--fs-xs); font-weight:500; white-space:nowrap;
}
.cl-pill::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.cl-pill-blue{ background:var(--accent-dim); color:var(--accent-text); }
.cl-pill-orange{ background:var(--orange-dim); color:var(--orange); }
.cl-pill-red{ background:var(--red-dim); color:var(--red); }
.cl-pill-green{ background:var(--green-dim); color:var(--green); }
.cl-pill-purple{ background:var(--purple-dim); color:var(--purple); }   /* cor escolhida em cadastro (status) */
.cl-chip{
  display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 10px;
  border-radius:var(--r-full); background:var(--accent-dim); color:var(--accent-text);
  font-size:var(--fs-xs); font-weight:600;
}
.cl-chip button{ border:none; background:none; color:inherit; font-size:16px; line-height:1; cursor:pointer; padding:0; }
.cl-placa{
  display:inline-block; padding:2px 6px; border:1px solid var(--border2); border-radius:var(--r-sm);
  background:var(--surface2); color:var(--text);
  font-size:var(--fs-xs); font-weight:600; letter-spacing:.06em; white-space:nowrap;
}

/* ---------- Indicadores ---------- */
.cl-kpis{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:16px; margin-bottom:16px; }
.cl-kpi{
  display:flex; align-items:center; gap:14px; padding:16px 20px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); box-shadow:var(--sombra-1);
}
.cl-kpi-ic{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:40px; height:40px; border-radius:var(--r-sm);
  background:var(--surface2); color:var(--text2);
}
.cl-kpi-info{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.cl-kpi-num{ font-size:var(--fs-num); font-weight:600; line-height:1.15; color:var(--text); font-variant-numeric:tabular-nums; }
.cl-kpi-lbl{ font-size:var(--fs-sm); color:var(--text2); }
.cl-kpi-alerta .cl-kpi-ic{ background:var(--red-dim); color:var(--red); }
.cl-kpi-alerta .cl-kpi-num{ color:var(--red); }
.cl-kpi-mustard .cl-kpi-ic{ background:var(--orange-dim); color:var(--orange); }
.cl-kpi-green .cl-kpi-ic{ background:var(--green-dim); color:var(--green); }

/* ---------- Janela ----------
   Rodapé com os botões fica preso embaixo: em formulário comprido, Salvar
   e Cancelar continuam à vista sem rolar até o fim. */
.cl-modal-overlay{
  position:fixed; inset:0; z-index:9000;
  display:flex; align-items:center; justify-content:center; padding:16px;
  background:var(--overlay); animation:clFade .15s ease;
}
@keyframes clFade{ from{ opacity:0; } to{ opacity:1; } }
.cl-modal{
  box-sizing:border-box; width:100%; max-width:640px; max-height:88vh; overflow-y:auto;
  padding:24px; background:var(--surface); color:var(--text);
  border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--sombra-3);
}
.cl-modal.wide{ max-width:960px; }
.cl-modal-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:20px; }
.cl-modal-titulo{ font-size:var(--fs-lg); font-weight:600; line-height:1.4; color:var(--text); }
.cl-modal-sub{ margin-top:2px; font-size:var(--fs-sm); color:var(--text2); }
.cl-modal-x{
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  width:32px; height:32px; margin:-6px -6px 0 0;
  border:none; border-radius:var(--r-sm); background:none;
  color:var(--text3); font-size:20px; line-height:1; cursor:pointer;
}
.cl-modal-x:hover{ background:var(--surface2); color:var(--text); }
.cl-modal > .cl-acoes-fim{
  position:sticky; bottom:-24px; margin:24px -24px -24px; padding:16px 24px;
  background:var(--surface2); border-top:1px solid var(--border);
  border-radius:0 0 var(--r-lg) var(--r-lg);
}

/* Confirmação (rwConfirm): mesma janela, menor; a ação fica à direita */
.rwc-overlay{
  position:fixed; inset:0; z-index:9600;
  display:flex; align-items:center; justify-content:center; padding:16px;
  background:var(--overlay); opacity:0; transition:opacity .15s ease;
}
.rwc-overlay.rwc-in{ opacity:1; }
.rwc-box{
  box-sizing:border-box; width:min(440px, 100%); padding:24px;
  background:var(--surface); color:var(--text);
  border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--sombra-3);
}
.rwc-title{ margin-bottom:8px; font-size:var(--fs-lg); font-weight:600; color:var(--text); }
.rwc-msg{ display:block; font-size:var(--fs-md); line-height:1.5; color:var(--text2); }
.rwc-box .cl-input{ margin-top:16px; }
.rwc-btns{ display:flex; justify-content:flex-end; gap:8px; margin-top:24px; }
.rwc-btn{
  height:var(--ctl); padding:0 14px; border:1px solid var(--border2); border-radius:var(--r-sm);
  background:var(--surface); color:var(--text);
  font-family:var(--font); font-size:var(--fs-sm); font-weight:600; cursor:pointer;
}
.rwc-btn-cancel:hover{ background:var(--surface2); }
.rwc-btn-ok{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.rwc-btn-ok:hover{ background:var(--accent-hover); }
.rwc-danger .rwc-btn-ok{ background:var(--red-solid); border-color:var(--red-solid); color:#fff; }

/* Janelas antigas (cadastros da Administração e Ferramentas de TI): mesma cara
   da .cl-modal, sem precisar reescrever quem as abre */
.modal-bg, .tools-overlay{
  position:fixed; inset:0; z-index:9000; display:none;
  align-items:center; justify-content:center; padding:16px; background:var(--overlay);
}
.modal-bg.open, .tools-overlay.open{ display:flex; }
.modal, .tools-modal{
  box-sizing:border-box; width:100%; max-width:480px; max-height:88vh; overflow-y:auto;
  padding:24px; background:var(--surface); color:var(--text);
  border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--sombra-3);
}
.tools-modal{ max-width:600px; }
.modal-title{
  display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:20px;
  font-family:var(--font); font-size:var(--fs-lg); font-weight:600; letter-spacing:0; text-transform:none; color:var(--text);
}
.mx{
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  width:32px; height:32px; margin:-6px -6px 0 0; border:none; border-radius:var(--r-sm);
  background:none; color:var(--text3); font-size:20px; line-height:1; cursor:pointer;
}
.mx:hover{ background:var(--surface2); color:var(--text); }
.mfg{ margin-bottom:16px; }
.mfg label{ display:block; margin-bottom:6px; font-size:var(--fs-sm); font-weight:500; letter-spacing:0; text-transform:none; color:var(--text2); }
.mfg input, .mfg select, .mfg textarea{
  box-sizing:border-box; width:100%; height:var(--ctl); padding:0 12px;
  border:1px solid var(--border2); border-radius:var(--r-sm); background:var(--surface); color:var(--text);
  font-family:var(--font); font-size:var(--fs-md); outline:none;
}
.mfg textarea{ height:auto; min-height:88px; padding:8px 12px; }
.mfg input:focus, .mfg select:focus, .mfg textarea:focus{ border-color:var(--accent); box-shadow:var(--foco); }
.modal-btns{
  position:sticky; bottom:-24px; display:flex; justify-content:flex-end; gap:8px;
  margin:24px -24px -24px; padding:16px 24px;
  background:var(--surface2); border-top:1px solid var(--border); border-radius:0 0 var(--r-lg) var(--r-lg);
}
.mbtn{
  height:var(--ctl); padding:0 14px; border:1px solid var(--border2); border-radius:var(--r-sm);
  background:var(--surface); color:var(--text);
  font-family:var(--font); font-size:var(--fs-sm); font-weight:600; cursor:pointer;
}
.mbtn.c:hover{ background:var(--surface2); color:var(--text); border-color:var(--border2); }
.mbtn.p{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); box-shadow:none; }
.mbtn.p:hover{ background:var(--accent-hover); filter:none; }

/* ---------- Avisos ---------- */
.toast-container{
  position:fixed; right:24px; bottom:24px; z-index:9800;
  display:flex; flex-direction:column; gap:8px; max-width:380px; pointer-events:none;
}
.toast{
  display:flex; align-items:flex-start; gap:10px; padding:12px 14px;
  background:var(--surface); color:var(--text);
  border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--sombra-2);
  font-family:var(--font); font-size:var(--fs-sm); line-height:1.45;
  opacity:0; transform:translateY(8px); transition:opacity .2s ease, transform .2s ease;
  pointer-events:auto;
}
.toast-in{ opacity:1; transform:none; }
.toast-out{ opacity:0; }
.toast-icon{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:20px; height:20px; border-radius:50%; color:#fff;
}
.toast-icon svg{ width:12px; height:12px; }
.toast-icon-success{ background:var(--green); }
.toast-icon-error{ background:var(--red-solid); }
.toast-icon-warn{ background:var(--orange); }
.toast-icon-info{ background:var(--accent); }
.toast-msg{ flex:1; padding-top:1px; }
.toast-spinner{ width:16px; height:16px; flex-shrink:0; border:2px solid var(--border2); border-top-color:var(--accent); border-radius:var(--r-full); animation:cl-spin .8s linear infinite; }   /* aviso de "carregando" */

/* Aviso dentro da tela (fica até a situação mudar) */
.cl-aviso{
  display:flex; align-items:flex-start; gap:10px; margin-bottom:16px; padding:12px 14px;
  border-radius:var(--r-sm); background:var(--accent-dim); color:var(--text);
  font-size:var(--fs-sm); line-height:1.5;
}
.cl-aviso > .cl-ic{ color:var(--accent-text); margin-top:1px; }
.cl-aviso-alerta{ background:var(--orange-dim); }
.cl-aviso-alerta > .cl-ic{ color:var(--orange); }
.cl-aviso-erro{ background:var(--red-dim); }
.cl-aviso-erro > .cl-ic{ color:var(--red); }
.cl-aviso-ok{ background:var(--green-dim); }
.cl-aviso-ok > .cl-ic{ color:var(--green); }

/* ---------- Vazio e carregando ---------- */
.cl-empty{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:40px 16px; text-align:center; }
.cl-empty-ic{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; margin-bottom:8px; border-radius:50%;
  background:var(--surface2); color:var(--text3);
}
.cl-empty-titulo{ font-size:var(--fs-md); font-weight:600; color:var(--text); }
.cl-empty-desc{ max-width:44ch; font-size:var(--fs-sm); color:var(--text2); }
.cl-empty .cl-btn{ margin-top:12px; }
.cl-empty-inline{ padding:24px; text-align:center; font-size:var(--fs-sm); color:var(--text3); }
.cl-loading{
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:24px; font-size:var(--fs-sm); color:var(--text3);
}
.cl-loading::before{
  content:""; width:16px; height:16px; border-radius:50%;
  border:2px solid var(--border); border-top-color:var(--accent);
  animation:cl-spin .7s linear infinite;
}
@keyframes cl-spin{ to{ transform:rotate(360deg); } }

/* ---------- Celular ---------- */
@media (max-width:860px){
  .cl-app{ flex-direction:column; }
  .cl-side{ width:auto; flex-direction:row; align-items:center; gap:4px; padding:8px 12px; overflow-x:auto; }
  .cl-brand{ flex-direction:row; padding:0 12px 0 0; margin:0; border-bottom:none; }
  .cl-brand-logo{ width:64px; height:32px; }
  .cl-brand-modulo{ display:none; }   /* no celular o cabeçalho já diz onde você está */
  .cl-nav{ flex-direction:row; }
  .cl-nav-sec{ display:none; }
  .cl-nav-item.active{ box-shadow:inset 0 -3px 0 var(--mustard); }
  .cl-top{ padding:12px 16px; }
  .cl-view{ padding:16px; }
  .cl-grid2{ grid-template-columns:1fr; }
  .cl-btn, .cl-td-acoes .cl-btn, .cl-table td .cl-btn, .cl-table td .cl-btn-sec{ height:40px; }   /* alvo de toque */
  /* 16px nos campos: abaixo disso o iPhone dá zoom ao tocar */
  .cl-input, .cl-textarea, .cl-field input, .cl-field select, .cl-field textarea,
  .cl-app input, .cl-app select, .cl-app textarea{ font-size:16px; }
  .cl-modal{ padding:20px; }
  .cl-modal > .cl-acoes-fim{ bottom:-20px; margin:20px -20px -20px; padding:12px 20px; }
  .cl-barra-fim{ margin-left:0; }
}

@media (prefers-reduced-motion:reduce){
  *, *::before{ animation-duration:.01ms !important; transition:none !important; }
}

/* Indicador clicável: abre os registros que formam o número (js/comum/drill.js) */
.rw-drill{ cursor:pointer; transition:border-color .15s; }
.rw-drill:hover{ border-color:var(--accent); }