/* ==========================================================================
   IDENTIDADE VISUAL DO CAIS — sistema de gestão (09/10/2026)

   *"O layout é muito grosso, não dá sensação de sistema. Letras brutas,
   janelas grossas. Preciso de algo mais bonito, mais didático."* E depois da
   primeira proposta: *"parece a mesma coisa"* — o pedido é de um sistema de
   gestão no jeito dos ERPs (Conta Azul, Omie), e o que mais incomoda é
   janela e card pesados, excesso de texto e tabela pesada.

   Esta folha vem DEPOIS de app.css e só troca a aparência. As variáveis
   continuam com os nomes de sempre (casco, doca, maré, névoa, cal), porque o
   sistema inteiro pinta por elas; o que muda é o que cada uma vale e como as
   peças são desenhadas:

   - página cinza-clara, janelas brancas SEM moldura, separadas por sombra;
   - menu branco, com ícones de verdade e a tela aberta marcada em azul;
   - cabeçalho de sistema: a trilha (Setores › Fiscal), o título e uma linha;
   - tabela de sistema: faixa cinza no cabeçalho, linhas finas, letra média;
   - explicações FECHADAS — abrem num clique; o texto de apoio dos painéis
     ocupa uma linha e abre se a pessoa quiser;
   - uma cor de ação (o azul CAIS) e as cores de situação só para situação.
   ========================================================================== */

@font-face{
  font-family:"Figtree";font-style:normal;font-weight:300 900;font-display:swap;
  src:url("fontes/figtree-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Figtree";font-style:normal;font-weight:300 900;font-display:swap;
  src:url("fontes/figtree-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* --------------------------------------------------------------- tokens */
:root{
  --display:"Figtree",'Segoe UI',system-ui,sans-serif;
  --corpo:"Figtree",'Segoe UI',system-ui,-apple-system,sans-serif;
  --topo:60px;
  --larg-menu:236px;
  --raio:10px;
}
body[data-tema="claro"]{
  color-scheme:light;
  --casco:#F3F5F9;          /* a página */
  --doca:#FFFFFF;           /* janelas, menu, topo */
  --mare:#E6E9EF;           /* fio fino */
  --mare-2:#D0D5DD;         /* borda de campo */
  --nevoa:#667085;          /* texto de apoio */
  --cal:#1D2433;            /* a tinta */
  --neutro:#98A2B3;
  --marca:#1E63D6; --marca-forte:#174FAD; --marca-suave:#EAF1FD; --marca-tinta:#1A56BD;
  --azul:#1E63D6; --azul-forte:#1A56BD;
  --turquesa:#0E7F57;       /* no prazo, entregue */
  --ambar:#B25E09; --vermelho:#C2362D;
  --destaque:var(--marca);
  --faixa:#F7F8FB;          /* cabeçalho de tabela, fundo de seção */
  --linha-suave:#EEF0F4;
  --hover:#F6F8FC;
  --sombra:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.06);
  --sombra-alta:0 20px 48px rgba(16,24,40,.16),0 4px 10px rgba(16,24,40,.06);
}
body[data-tema="escuro"]{
  --casco:#0F141C; --doca:#171E29; --mare:#252E3C; --mare-2:#34404F;
  --nevoa:#9AA4B5; --cal:#E8ECF2; --neutro:#6B7689;
  --marca:#4C8DF6; --marca-forte:#3A78E0; --marca-suave:#1C2B45; --marca-tinta:#8AB4FA;
  --azul:#4C8DF6; --azul-forte:#8AB4FA;
  --turquesa:#3CC08E; --ambar:#E7A13D; --vermelho:#F06B62;
  --destaque:var(--marca);
  --faixa:#1B2330; --linha-suave:#212A37; --hover:#1C2431;
  --sombra:0 1px 2px rgba(0,0,0,.3);
  --sombra-alta:0 20px 48px rgba(0,0,0,.5);
}

/* --------------------------------------------------------------- letra */
body{font-family:var(--corpo);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--casco)}
.num,.v,td.num,.relogio{font-variant-numeric:tabular-nums}
h1,h2,h3,.num,.v,.relogio{letter-spacing:0;font-family:var(--corpo)}
h1{font-size:24px;font-weight:700;letter-spacing:-.015em;line-height:1.25;color:var(--cal)}
h2{font-size:15px;font-weight:650;letter-spacing:0;text-transform:none;color:var(--cal);margin:0 0 2px}
h3{font-size:14.5px;font-weight:650}
a{color:var(--marca-tinta)}
:focus-visible{outline:2px solid var(--marca);outline-offset:2px}
th,.faixa .r,.fichaNum .r,.atalhos b,.cabProposta,.cabServico,.celTab.cab,.semana span,
.tabelaGrafico th,.doca .grupo{text-transform:none;letter-spacing:0;font-family:var(--corpo)}
.icone{display:block;flex-shrink:0}

/* --------------------------------------------------------------- topo */
.topo{background:var(--doca);border-bottom:1px solid var(--mare);height:var(--topo);padding:0 20px 0 0;gap:14px;
  box-shadow:0 1px 0 rgba(16,24,40,.02)}
.topo .marca{width:var(--larg-menu);height:100%;padding-left:22px;color:var(--cal);flex-shrink:0;
  letter-spacing:.14em;font-size:16px;font-weight:800;border-right:1px solid var(--mare);margin-right:6px}
.marca i{width:26px;height:26px;border-radius:7px;background:
  linear-gradient(180deg,transparent 60%,rgba(255,255,255,.95) 60%,rgba(255,255,255,.95) 70%,transparent 70%),
  linear-gradient(150deg,#4C8DF6,var(--marca-forte))}
body[data-doca="minima"] .topo .marca{width:64px;padding-left:19px;font-size:0;gap:0}
.busca{display:flex;align-items:center;gap:9px;background:var(--casco);border:1px solid var(--mare);border-radius:9px;
  padding:9px 14px;font-size:13.5px;max-width:460px;color:var(--nevoa)}
.busca:hover{border-color:var(--mare-2);background:var(--doca)}
.sino{width:38px;height:38px;border-radius:9px;color:var(--nevoa)}
.sino:hover{background:var(--hover);color:var(--cal)}
.quem{font-size:13px}
/* `background-color`, e não `background`: o atalho zerava o `background-size:cover`
   da foto, e ela aparecia ampliada e cortada (Pedro, 09/10). */
.avatar{background-color:var(--marca-suave);color:var(--marca-tinta);font-weight:700}
.avatar:not(.enorme){border-radius:50%}
.euBotao:hover,.euBotao[aria-expanded="true"]{background:var(--hover);border-color:var(--mare)}

/* --------------------------------------------------------------- menu */
.doca{width:var(--larg-menu);background:var(--doca);border-right:1px solid var(--mare);padding:14px 12px 12px}
body[data-doca="minima"] .doca{width:64px;padding:14px 10px}
.doca .grupo{font-size:11.5px;font-weight:650;color:var(--neutro);padding:18px 10px 6px;gap:6px}
.doca .grupo:hover{color:var(--nevoa)}
.doca .grupo .seta{font-size:8px;opacity:.7}
.doca button{font-size:14px;font-weight:500;color:#344054;padding:8px 10px;border-radius:8px;gap:11px;line-height:1.3}
body[data-tema="escuro"] .doca button{color:var(--nevoa)}
.doca button:hover{background:var(--hover);color:var(--cal)}
.doca button[aria-current="page"]{background:var(--marca-suave);color:var(--marca-tinta);font-weight:650}
.doca button[aria-current="page"] .pt{background:var(--marca)}
.doca .pt{width:3px;height:18px;border-radius:2px}
.doca .ic{width:20px;font-size:15px;color:var(--neutro);display:grid;place-items:center}
.doca button:hover .ic{color:var(--nevoa)}
.doca button[aria-current="page"] .ic{color:var(--marca)}
.recolher{background:transparent;border:1px solid var(--mare);color:var(--nevoa);border-radius:8px}
.recolher:hover{background:var(--hover);color:var(--cal)}

/* --------------------------------------------------------------- página */
.trabalho{padding:24px 32px 96px}
.cabecalho{margin-bottom:20px}
.cabecalho .trilha{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--nevoa);margin-bottom:6px}
.cabecalho .trilha span{color:var(--neutro)}
.cabecalho h1{margin:0 0 2px}
/* "excesso de texto": a linha de apoio cabe numa linha; clicar abre o resto */
.cabecalho p{font-size:14px;color:var(--nevoa);max-width:90ch;margin:2px 0 0;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.cabecalho p.aberto,.painel > p.sub.aberto{-webkit-line-clamp:unset;display:block}
.cabecalho p:not(.aberto),.painel > p.sub:not(.aberto){cursor:pointer}

/* --------------------------------------------------------------- janelas: sem moldura, separadas por sombra */
.painel{background:var(--doca);border:0;border-radius:var(--raio);padding:18px 20px;margin-bottom:16px;box-shadow:var(--sombra)}
.painel > h2,.painel .topoPainel{margin-bottom:4px}
.painel .topoPainel h2{margin:0}
.painel > p.sub{font-size:13px;margin:0 0 14px !important;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.linha{gap:16px}
.contexto{background:var(--doca);border-left:1px solid var(--mare);padding:22px 22px 60px;box-shadow:-8px 0 24px rgba(16,24,40,.04)}
.painel.destacado{box-shadow:var(--sombra),inset 0 0 0 2px var(--marca)}
.painel.perigo{box-shadow:var(--sombra),inset 3px 0 0 var(--vermelho)}

/* --------------------------------------------------------------- indicadores (fichas) */
.fichas{gap:14px;margin-bottom:18px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.fichaNum{background:var(--doca);border:0;border-radius:var(--raio);padding:16px 18px 14px;gap:3px;box-shadow:var(--sombra);
  position:relative;overflow:hidden}
.fichaNum .r{font-size:13px;font-weight:500;color:var(--nevoa);white-space:normal}
.fichaNum .v{font-size:23px;font-weight:700;letter-spacing:-.015em;line-height:1.25;color:var(--cal)}
.fichaNum .d{font-size:12.5px;font-weight:600}
.fichaNum .sub{font-size:12.5px}
.faixa{gap:14px}
.faixa button{background:var(--doca);border:0;border-radius:var(--raio);padding:14px 18px;box-shadow:var(--sombra);min-width:150px}
.faixa button:hover{box-shadow:var(--sombra),inset 0 0 0 1px var(--mare-2)}
.faixa button[aria-pressed="true"]{box-shadow:var(--sombra),inset 0 0 0 2px var(--marca)}
.faixa .v{font-size:24px;font-weight:700;letter-spacing:-.015em}
.faixa .r{font-size:13px;font-weight:500}

/* --------------------------------------------------------------- tabela de sistema */
table{font-size:13.5px}
th{font-size:12.5px;font-weight:600;color:var(--nevoa);padding:10px 12px;background:var(--faixa);
  border-bottom:1px solid var(--mare);white-space:nowrap}
th:first-child{border-top-left-radius:8px} th:last-child{border-top-right-radius:8px}
td{padding:10px 12px;border-top:0;border-bottom:1px solid var(--linha-suave)}
tbody tr:last-child > td{border-bottom:0}
tbody tr:hover > td{background:var(--hover)}
.cli{font-weight:600;font-size:13.5px;letter-spacing:.005em}
td .sub{font-size:12.5px}
.tabelaGrafico th{background:transparent;border-bottom:1px solid var(--mare)}

/* --------------------------------------------------------------- etiquetas de situação */
.etq{border:0;padding:3px 10px;font-size:12px;font-weight:600;border-radius:99px;background:var(--linha-suave);color:var(--nevoa)}
.etq.ok{background:color-mix(in srgb,var(--turquesa) 12%,transparent);color:var(--turquesa)}
.etq.per{background:color-mix(in srgb,var(--ambar) 13%,transparent);color:var(--ambar)}
.etq.atr{background:color-mix(in srgb,var(--vermelho) 11%,transparent);color:var(--vermelho)}
.etq.esp,.etq.and{background:var(--marca-suave);color:var(--marca-tinta)}

/* --------------------------------------------------------------- botões */
.acao{background:var(--marca);color:#fff;border-radius:8px;padding:9px 16px;font-weight:600;font-size:13.5px;
  box-shadow:0 1px 2px rgba(16,24,40,.08);transition:background .12s ease}
.acao:hover{background:var(--marca-forte)}
.acao.fantasma{background:var(--doca);border:1px solid var(--mare-2);color:#344054;box-shadow:0 1px 2px rgba(16,24,40,.05)}
body[data-tema="escuro"] .acao.fantasma{color:var(--cal)}
.acao.fantasma:hover{background:var(--hover)}
.acao.pequena{padding:6px 11px;font-size:12.5px}
.acao.perigo{background:var(--vermelho)}

/* --------------------------------------------------------------- abas: linha sublinhada, como em sistema */
.abas2{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--mare);margin-bottom:20px;padding:0}
.abas2 button{border:0;border-radius:0;padding:10px 14px;font-size:14px;font-weight:500;color:var(--nevoa);
  border-bottom:2px solid transparent;margin-bottom:-1px;background:transparent}
.abas2 button:hover{color:var(--cal);background:transparent;border-color:transparent;border-bottom-color:var(--mare-2)}
.abas2 button[aria-pressed="true"]{color:var(--marca-tinta);font-weight:650;background:transparent;border-color:transparent;border-bottom-color:var(--marca)}

/* --------------------------------------------------------------- campos e filtros */
.campo span{font-size:13px;font-weight:500;color:#344054}
body[data-tema="escuro"] .campo span{color:var(--nevoa)}
.campo input,.campo select,.campo textarea,.filtroCol,.filtrosCrm select,.filtrosCrm input,.filtroInline input,
.filtroData input,.filtroData select{background:var(--doca);border:1px solid var(--mare-2);border-radius:8px;color:var(--cal);
  box-shadow:0 1px 2px rgba(16,24,40,.04)}
.campo input:focus,.campo select:focus,.campo textarea:focus,.filtroCol:focus,.filtrosCrm select:focus,
.filtrosCrm input:focus,.filtroInline input:focus,.filtroData input:focus,.filtroData select:focus{
  outline:none;border-color:var(--marca);box-shadow:0 0 0 4px color-mix(in srgb,var(--marca) 15%,transparent)}
.filtroCol{font-size:12.5px;font-weight:400}
.filtroCol:has(option:checked:not(:first-child)){border-color:var(--marca);color:var(--marca-tinta)}
.filtroData{font-size:13px;color:var(--nevoa)}
.atalhosRecorte button{border:1px solid var(--mare-2);background:var(--doca);font-size:12.5px;font-weight:500;padding:5px 12px;color:#344054}
body[data-tema="escuro"] .atalhosRecorte button{color:var(--nevoa)}
.atalhosRecorte button:hover{border-color:var(--marca)}
.atalhosRecorte button[aria-pressed="true"]{background:var(--marca-suave);border-color:var(--marca);color:var(--marca-tinta)}

/* --------------------------------------------------------------- explicações: fechadas, abrem num clique */
details.explica{background:var(--doca);border:1px solid var(--mare);border-left:1px solid var(--mare);border-radius:8px;
  padding:0;margin:12px 0 0;font-size:13px;color:var(--nevoa)}
details.explica > summary{list-style:none;display:flex;align-items:center;gap:8px;padding:9px 12px;cursor:pointer;
  color:var(--cal);font-size:13px}
details.explica > summary::-webkit-details-marker{display:none}
details.explica > summary::after{content:"Ver explicação";margin-left:auto;font-size:12px;color:var(--marca-tinta);font-weight:600;flex-shrink:0}
details.explica[open] > summary::after{content:"Fechar"}
details.explica > summary .icone{color:var(--marca)}
details.explica > summary b{display:inline;margin:0;font-weight:600;font-family:var(--corpo);color:var(--cal)}
details.explica .explicaTexto{padding:0 14px 12px 36px;line-height:1.6}
details.explica:hover{border-color:var(--mare-2)}
/* o aviso que precisa ser lido continua aberto e colorido */
div.explica{background:var(--faixa);border:1px solid var(--mare);border-left:3px solid var(--marca);border-radius:8px;
  padding:11px 14px;font-size:13px;line-height:1.55;color:var(--nevoa)}
div.explica b{font-family:var(--corpo);font-weight:650;color:var(--cal)}
div.explica.alerta,.explica.alerta{background:color-mix(in srgb,var(--ambar) 7%,var(--doca));border-color:color-mix(in srgb,var(--ambar) 25%,var(--mare));border-left:3px solid var(--ambar)}
.cobertura{background:var(--doca);border:0;border-left:3px solid var(--ambar);border-radius:8px;padding:10px 16px;box-shadow:var(--sombra)}
.cobertura .sub{font-size:13px;line-height:1.5}
.vazio{padding:34px 16px}
.vazio b{font-family:var(--corpo);font-size:15px;font-weight:650}

/* --------------------------------------------------------------- listas */
.item{border-top:1px solid var(--linha-suave);padding:11px 0}
.item .txt b{font-weight:600}
.dl{font-size:13.5px;grid-template-columns:120px 1fr}

/* --------------------------------------------------------------- diálogos */
.fundo{background:rgba(16,24,40,.45);backdrop-filter:blur(3px)}
.dialogo{border:0;border-radius:14px;padding:24px;box-shadow:var(--sombra-alta)}
.dialogo h2{font-size:18px;font-weight:700}
.recado{background:#1D2433;border:0;color:#fff;box-shadow:var(--sombra-alta);font-weight:500;border-radius:10px}

/* --------------------------------------------------------------- entrar */
.entrar{background:linear-gradient(180deg,var(--marca-suave),var(--casco) 55%)}
.entrar .caixa{background:var(--doca);border:0;border-radius:16px;padding:36px 32px;box-shadow:var(--sombra-alta);max-width:410px}
.entrar .marca{color:var(--cal);letter-spacing:.16em;font-size:20px;font-weight:800}

/* --------------------------------------------------------------- ajustes finos */
td.num,td[data-r="Comp."],td[data-r="Competência"]{white-space:nowrap}
textarea,.contexto textarea,.dialogo textarea{background:var(--doca);border:1px solid var(--mare-2);border-radius:8px;color:var(--cal);
  padding:9px 11px;font:inherit;font-size:13.5px}
textarea:focus{outline:none;border-color:var(--marca);box-shadow:0 0 0 4px color-mix(in srgb,var(--marca) 15%,transparent)}
.contexto h2{font-size:17px;font-weight:700}
.contexto .dl dt{font-size:13px}
.contexto details.explica > summary::after{content:"Ver";}
.contexto details.explica[open] > summary::after{content:"Fechar"}

/* --------------------------------------------------------------- rótulos restantes, sem maiúsculas */
.pizza .furoRot,.medidor .medRot,.euBloco > b{text-transform:none;letter-spacing:0}

/* --------------------------------------------------------------- celular */
@media (max-width:900px){
  .topo{padding:0 12px 0 0;gap:6px}
  .topo .marca,body[data-doca="minima"] .topo .marca{width:auto;padding-left:14px;border-right:0;margin-right:auto;font-size:15px;gap:8px}
  .trabalho{padding:18px 14px 110px}
  h1{font-size:21px}
  th{background:transparent;border:0;padding:0}
  td::before{text-transform:none;letter-spacing:0;font-size:12px;font-weight:600}
  td{border-bottom:0}
  tbody tr{background:var(--doca);border-radius:var(--raio);box-shadow:var(--sombra);margin-bottom:10px}
  .flutuante{background:var(--marca);border-radius:14px;box-shadow:0 8px 22px rgba(30,99,214,.35)}
  .abas2{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .abas2 button{white-space:nowrap}
  .fichas{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.euBloco > b{font-size:12px;font-weight:650;color:var(--neutro)}
.menuEu{border:0;box-shadow:var(--sombra-alta);border-radius:12px}
.abas{background:var(--doca);border-top:1px solid var(--mare)}
.abas .ic{display:grid;place-items:center;color:var(--neutro)}
.abas button[aria-current="page"],.abas button[aria-current="page"] .ic{color:var(--marca)}