/* Área do Cliente — identidade Barcelos & Bernardes */
:root{--champanhe:#F9DCA5;--dourado-ch:#EDD093;--dourado:#D8BB76;--ambar:#BEA151;--ouro:#B89B48;
--onix:#000;--carvao:#1A1A1A;--grafite:#3D3D3D;--nevoa:#6B6B6B;--areia:#F7F2E7;
--grad:linear-gradient(135deg,#F9DCA5 0%,#D8BB76 50%,#B89B48 100%);
--serif:'Playfair Display',Georgia,serif;--sans:'Inter',Arial,sans-serif}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--sans);color:var(--grafite);background:var(--areia);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--ouro);text-decoration:none}
.centro{min-height:100vh;display:grid;place-items:center;background:var(--onix);padding:24px;position:relative;overflow:hidden}
.centro::before{content:"";position:absolute;top:-200px;right:-160px;width:640px;height:640px;background:radial-gradient(circle,rgba(216,187,118,.16),transparent 62%)}
.cartao{position:relative;z-index:2;width:100%;max-width:420px;background:#111;border:1px solid rgba(216,187,118,.3);border-radius:16px;padding:42px 36px;box-shadow:0 30px 70px rgba(0,0,0,.5)}
.cartao img.logo{height:52px;margin:0 auto 8px;display:block}
.cartao .desc{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dourado);text-align:center;font-weight:600;margin-bottom:28px}
.cartao h1{font-family:var(--serif);color:#fff;font-size:1.45rem;font-weight:600;text-align:center;margin-bottom:22px}
label{display:block;font-size:.84rem;font-weight:600;margin-bottom:6px}
.cartao label{color:rgba(255,255,255,.75)}
input,select,textarea{width:100%;padding:12px 14px;border-radius:8px;border:1px solid #DFD5BC;background:#FDFBF6;font-family:var(--sans);font-size:.95rem;color:var(--onix)}
/* Caixas de marcar e opções não seguem a largura dos campos de texto. */
input[type=checkbox],input[type=radio]{width:16px;min-width:16px;height:16px;padding:0;margin:0;flex:0 0 16px;accent-color:#B89B48;cursor:pointer}
.cartao input{background:#0D0D0D;border-color:#2B2B2B;color:#fff}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--dourado)}
.grupo{margin-bottom:16px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:14px 22px;border:0;border-radius:8px;background:var(--grad);color:var(--onix);font-weight:600;font-size:.98rem;cursor:pointer;transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(216,187,118,.35)}
.btn-linha{background:transparent;border:1px solid rgba(184,155,72,.65);color:#6B5A2A}
/* O dourado claro só tem contraste sobre fundo escuro. */
.cartao .btn-linha,.topo .btn-linha{color:var(--dourado-ch);border-color:rgba(216,187,118,.5)}
.btn-mini{width:auto;padding:8px 14px;font-size:.82rem}
.aviso{padding:12px 14px;border-radius:8px;font-size:.86rem;margin-bottom:18px;background:rgba(216,187,118,.12);border:1px solid rgba(216,187,118,.4);color:#6B5A2A}
.cartao .aviso{color:var(--dourado-ch)}
.aviso-claro{background:#FFF;border:1px solid var(--dourado);color:var(--grafite)}
.rodape-login{margin-top:22px;text-align:center;font-size:.78rem;color:rgba(255,255,255,.4)}
.rodape-login a{color:var(--dourado)}
/* painel */
.topo{background:var(--onix);border-bottom:2px solid;border-image:var(--grad) 1;padding:0 24px}
.topo-in{max-width:1080px;margin:0 auto;height:70px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.topo img{height:34px}
.topo .quem{color:#fff;font-size:.88rem;text-align:right}
.troca-empresa{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.troca-empresa label{font-size:.62rem;text-transform:uppercase;letter-spacing:.07em;color:#C9B487;font-weight:700}
.troca-empresa select{max-width:320px;background:#111;color:#F5EFE2;border:1px solid #6B5A2A;border-radius:8px;
  padding:6px 10px;font-size:.82rem;font-weight:600}
@media (max-width:760px){.troca-empresa select{max-width:180px;font-size:.76rem}}

.topo .quem b{display:block;font-size:.94rem}
.topo .quem span{color:var(--dourado);font-size:.76rem}
.topo a.sair{color:var(--dourado-ch);font-size:.84rem;font-weight:600;border:1px solid rgba(216,187,118,.45);padding:8px 14px;border-radius:8px;white-space:nowrap}
.miolo{max-width:1080px;margin:0 auto;padding:36px 24px 70px}
h2.titulo{font-family:var(--serif);font-size:1.6rem;color:var(--onix);margin-bottom:6px}
.sub{color:var(--nevoa);font-size:.92rem;margin-bottom:26px}
.painel-caixa{background:#fff;border:1px solid #E9E0CB;border-radius:14px;padding:26px;margin-bottom:24px;overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:640px}
th{text-align:left;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--nevoa);padding:10px 12px;border-bottom:2px solid var(--areia)}
td{padding:12px;border-bottom:1px solid #F0EADA;vertical-align:middle}
tr:hover td{background:#FCFAF3}
.tag{display:inline-block;padding:4px 10px;border-radius:100px;font-size:.72rem;font-weight:700;letter-spacing:.04em}
.tag-ok{background:#EDF5EC;color:#2E6B34}.tag-perto{background:#FFF4DC;color:#8A6A12}.tag-vencida{background:#FBEAEA;color:#A03030}.tag-off{background:#EEE;color:#777}
.acoes{display:flex;gap:8px;flex-wrap:wrap}
.filtro{display:flex;gap:12px;align-items:end;flex-wrap:wrap;margin-bottom:18px}
.filtro .grupo{margin:0;min-width:180px}
.abas{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.abas a{padding:10px 18px;border-radius:100px;border:1px solid #DFD5BC;background:#fff;color:var(--grafite);font-size:.88rem;font-weight:600}
.abas a.ativa{background:var(--grad);border-color:transparent;color:var(--onix)}
.duas{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:720px){.duas{grid-template-columns:1fr}.topo .quem b{font-size:.84rem}}
/* modal recálculo */
.veu{display:none;position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:50;padding:20px}
.veu.aberto{display:grid;place-items:center}
.modal{width:100%;max-width:440px;background:#fff;border-radius:14px;border-top:4px solid var(--dourado);padding:28px}
.modal h3{font-family:var(--serif);font-size:1.25rem;margin-bottom:6px}
.modal p{font-size:.86rem;color:var(--nevoa);margin-bottom:16px}
.modal .acoes{margin-top:16px;justify-content:flex-end}
.vazio{text-align:center;padding:44px 16px;color:var(--nevoa)}
.vazio b{display:block;font-family:var(--serif);font-size:1.15rem;color:var(--grafite);margin-bottom:6px}
/* assistente IA */
.chat{background:#fff;border:1px solid #E9E0CB;border-radius:14px;display:flex;flex-direction:column;height:min(62vh,560px)}
.chat-msgs{flex:1;overflow-y:auto;padding:22px;display:flex;flex-direction:column;gap:12px}
.balao{max-width:82%;padding:12px 16px;border-radius:14px;font-size:.92rem;line-height:1.55;white-space:pre-wrap;word-wrap:break-word}
.balao-c{align-self:flex-end;background:linear-gradient(135deg,#F9DCA5,#D8BB76);color:#000;border-bottom-right-radius:4px}
.balao-ia{align-self:flex-start;background:#1A1A1A;color:rgba(255,255,255,.88);border-bottom-left-radius:4px}
.balao-ia b{color:#EDD093}
.chat-form{display:flex;gap:10px;padding:14px;border-top:1px solid #F0EADA}
.chat-form input{flex:1}
.chat-form button{width:auto;padding:12px 22px}
.chat-rodape{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:.76rem;color:var(--nevoa);margin-top:10px}
.digitando{align-self:flex-start;color:var(--nevoa);font-size:.85rem;font-style:italic}
/* logo clicável -> página inicial do site */
.logo-link{display:inline-flex;line-height:0;border-radius:6px}
.logo-link img{transition:opacity .2s,transform .2s}
.logo-link:hover img{opacity:.82;transform:translateY(-1px)}
.logo-link:focus-visible{outline:2px solid var(--dourado-ch);outline-offset:4px}
.cartao .logo-link{display:block}

/* ══════════════ MODO DIA / MODO NOITE ══════════════
   Vale para toda a Área do Cliente. O botão fica ao lado das abas e a
   escolha é guardada no aparelho de quem acessa. */
:root{
  --apu-fundo:#F7F2E7; --apu-cartao:#FFFFFF; --apu-borda:#E9E0CB; --apu-titulo:#1A1A1A;
  --apu-texto:#3D3D3D; --apu-suave:#6B6B6B; --apu-eixo:#6B6B6B; --apu-zebra:#FDFBF6;
  --apu-ouro:#B89B48; --apu-dourado:#D8BB76;
}
html[data-tema="noite"]{
  --apu-fundo:#121212; --apu-cartao:#1C1C1C; --apu-borda:#332F27; --apu-titulo:#F5EFE2;
  --apu-texto:#E4DFD4; --apu-suave:#A9A296; --apu-eixo:#A9A296; --apu-zebra:#232019;
  --apu-ouro:#D8BB76; --apu-dourado:#EDD093;
}
html[data-tema="noite"] body{background:var(--apu-fundo);color:var(--apu-texto)}
html[data-tema="noite"] .titulo,
html[data-tema="noite"] .vazio b{color:var(--apu-titulo)}
html[data-tema="noite"] .sub,
html[data-tema="noite"] .vazio{color:var(--apu-suave)}
html[data-tema="noite"] .painel-caixa{background:var(--apu-cartao);border-color:var(--apu-borda)}
html[data-tema="noite"] table td{border-color:var(--apu-borda);color:var(--apu-texto)}
html[data-tema="noite"] table th{color:var(--apu-suave);border-color:var(--apu-ouro)}
/* As abas: só as inativas mudam de cor. A ativa continua dourada, com
   texto preto — é o contraste mais forte da marca. */
html[data-tema="noite"] .abas a:not(.ativa){
  background:var(--apu-cartao);border-color:var(--apu-borda);color:var(--apu-texto)}
html[data-tema="noite"] .abas a.ativa{color:var(--onix)}
html[data-tema="noite"] .btn-linha{color:var(--dourado-ch);border-color:rgba(216,187,118,.55)}
html[data-tema="noite"] .aviso{color:var(--dourado-ch)}
html[data-tema="noite"] .aviso-claro{background:var(--apu-cartao);border-color:var(--apu-ouro);color:var(--apu-texto)}
html[data-tema="noite"] input,
html[data-tema="noite"] select,
html[data-tema="noite"] textarea{background:var(--apu-cartao);border-color:var(--apu-borda);color:var(--apu-texto)}
html[data-tema="noite"] label{color:var(--apu-texto)}
html[data-tema="noite"] .tag-off{background:#2A2721;color:#B9B2A5}
html[data-tema="noite"] .tag-ok{background:#1E3020;color:#8FCB96}
html[data-tema="noite"] .tag-perto{background:#332A12;color:#EDD093}
html[data-tema="noite"] .tag-vencida{background:#3A1F1F;color:#E79A9A}

/* Botão de alternância */
.barra-abas{position:relative}
.barra-abas .abas{padding-right:60px}
.btn-tema{position:absolute;top:0;right:0;z-index:20;display:inline-flex;align-items:center;
  padding:10px 16px;border-radius:100px;border:1px solid var(--ouro);background:var(--apu-cartao);
  color:#6B5A2A;font-size:.86rem;font-weight:700;font-family:inherit;cursor:pointer;line-height:1.2}
html[data-tema="noite"] .btn-tema{color:var(--dourado-ch);border-color:#8A6A12}
.btn-tema{padding:10px 12px;line-height:0}
.btn-tema svg{flex:0 0 auto}
.btn-tema span{display:inline-flex;align-items:center}
.btn-tema span.btn-tema-txt{display:none}   /* só o sol ou a lua, sem palavra */
@media (max-width:430px){.barra-abas .abas{padding-right:56px}}
@media print{.btn-tema{display:none!important}}

/* Cartões brancos das demais abas seguem o tema. Sem isto, no modo noite
   o texto claro cai sobre cartão branco e some. */
html[data-tema="noite"] .cat-bloco,
html[data-tema="noite"] .cert-card,
html[data-tema="noite"] .frcard,
html[data-tema="noite"] .pacote,
html[data-tema="noite"] .anos-chips a{
  background:var(--apu-cartao);border-color:var(--apu-borda);color:var(--apu-texto)}
html[data-tema="noite"] .pacote table,
html[data-tema="noite"] .pacote td,
html[data-tema="noite"] .cat-bloco td{color:var(--apu-texto)}
html[data-tema="noite"] .anos-chips a.ativa{color:var(--onix)}
html[data-tema="noite"] h3,html[data-tema="noite"] h4{color:var(--apu-titulo)}
html[data-tema="noite"] small,html[data-tema="noite"] .nota{color:var(--apu-suave)}
html[data-tema="noite"] a{color:var(--dourado-ch)}
html[data-tema="noite"] .topo a.logo-link{color:inherit}

/* No celular as tabelas viram cartões, e o rótulo de cada linha é escrito
   por CSS. No modo noite ele precisa clarear junto. */
html[data-tema="noite"] .tabela-guias td::before,
html[data-tema="noite"] .tabela-folha td::before{color:var(--apu-suave)}
html[data-tema="noite"] .tabela-guias tr,
html[data-tema="noite"] .tabela-folha tr,
html[data-tema="noite"] .pacote tr{background:var(--apu-cartao);border-color:var(--apu-borda)}
html[data-tema="noite"] .pacote thead,
html[data-tema="noite"] .pacote th{background:transparent}


/* ══════════════ DICA DE ARRASTE (tabelas largas) ══════════════
   Vale para toda a Área do Cliente. Aparece só onde a tabela não cabe
   na largura da tela e some assim que a pessoa arrasta. */
.dica-arraste{display:inline-flex;align-items:center;margin:0 0 10px;padding:7px 14px;
  border-radius:100px;background:rgba(216,187,118,.18);border:1px solid rgba(184,155,72,.55);
  color:#6B5A2A;font-size:.8rem;font-weight:700;transition:opacity .35s}
html[data-tema="noite"] .dica-arraste{color:#EDD093;background:rgba(216,187,118,.12)}
.dica-arraste-fim{opacity:0}
.dica-arraste-dedo{display:inline-flex;margin-right:10px;flex:0 0 auto;
  animation:arrastaDedo 1.6s ease-in-out infinite}
@keyframes arrastaDedo{
  0%{transform:translateX(0);opacity:.55}
  35%{opacity:1}
  60%{transform:translateX(16px);opacity:1}
  100%{transform:translateX(0);opacity:.55}
}
@media (prefers-reduced-motion:reduce){.dica-arraste-dedo{animation:none}}
@media print{.dica-arraste{display:none!important}}

/* ══════ TABELAS QUEBRADAS NO CELULAR ══════
   No celular a tabela vira cartão (uma linha embaixo da outra), mas a regra
   geral table{min-width:640px} continuava valendo e empurrava o conteúdo
   para fora do cartão — era o que cortava os valores à direita. */
@media (max-width:760px){
  .painel-caixa table.tabela-guias,
  .painel-caixa table.tabela-folha,
  .pacote table.tabela-folha,
  table.tabela-guias,
  table.tabela-folha{min-width:0}
  .tabela-guias td,.tabela-folha td{overflow-wrap:anywhere}
}
/* O pacote da folha tinha overflow escondido: o que não coubesse era
   simplesmente cortado, sem como arrastar. */
.pacote{overflow-x:auto}


/* ── filtros de tabela (componente global) ─────────────────────── */
.bb-filtro-linha td{padding:4px 6px 8px;background:transparent}
.bb-filtro-linha input{width:100%;min-width:56px;box-sizing:border-box;padding:5px 8px;
  font:12px/1.3 'Inter',Arial,sans-serif;color:#3D3D3D;background:#FBF8F0;
  border:1px solid #E9E0CB;border-radius:6px;outline:none}
.bb-filtro-linha input:focus{border-color:#D8BB76;background:#FFFFFF;
  box-shadow:0 0 0 2px rgba(216,187,118,.25)}
.bb-filtro-linha input::placeholder{color:#B8B0A0;font-size:11px}
.bb-filtro-info{font:12px 'Inter',Arial,sans-serif;color:#8A6A12;padding:6px 2px 0;
  text-align:right}
@media (max-width:820px){.bb-filtro-linha input{min-width:44px;font-size:11px;padding:4px 6px}}
.bb-filtro-linha select{width:100%;min-width:56px;box-sizing:border-box;padding:5px 6px;
  font:12px/1.3 'Inter',Arial,sans-serif;color:#3D3D3D;background:#FBF8F0;
  border:1px solid #E9E0CB;border-radius:6px;outline:none;cursor:pointer}
.bb-filtro-linha select:focus{border-color:#D8BB76;background:#FFF}

/* ── panorama de férias: colunas sem quebra feia + formulário de datas ── */
.fer-tab th{white-space:nowrap}
.fer-tab td{vertical-align:middle}
.fer-tab td:nth-child(2),.fer-tab td:nth-child(4){white-space:nowrap}
.fer-prog{min-width:330px}
.fer-prog-form{display:flex;gap:8px;align-items:center;flex-wrap:nowrap}
.fer-prog-form input[type=date]{width:128px;padding:7px 6px;font-size:13px;
  border:1px solid #E9E0CB;border-radius:8px;background:#FBF8F0;color:#3D3D3D}
.fer-prog-form input[type=date]:focus{border-color:#D8BB76;background:#FFF;outline:none}
.fer-prog-form .btn{width:auto;padding:8px 16px;font-size:13px;white-space:nowrap}
.fer-andamento{min-width:190px}
.bb-regressivo{display:inline-block;margin-top:4px;font-size:12px;font-weight:700;
  padding:3px 8px;border-radius:6px}
.bb-reg-ok{background:#FDF6E3;border:1px solid #E6D9A8;color:#7A6210}
.bb-reg-venceu{background:#FBEAEA;border:1px solid #E4B6B6;color:#A03030}
@media (max-width:900px){.fer-prog-form{flex-wrap:wrap}.fer-prog{min-width:0}}

/* ── panorama de férias: respiro e alinhamento ─────────────────── */
.fer-tab th,.fer-tab td{vertical-align:top;padding-top:14px;padding-bottom:14px}
.fer-tab td:nth-child(2),.fer-tab td:nth-child(4){white-space:nowrap}
.fer-prog form{display:flex;flex-direction:column;gap:7px;min-width:196px}
.fer-prog label{display:flex;align-items:center;gap:8px;font-weight:400}
.fer-prog label span{width:28px;color:#8A8578;font-size:12px}
.fer-prog input[type=date]{width:158px;padding:7px 8px;box-sizing:border-box}
.fer-prog .btn{width:auto;padding:7px 18px;align-self:flex-start}
.fer-andamento{min-width:215px;line-height:1.5}
.bb-regressivo{background:#FBF8F0;border:1px solid #E9E0CB;border-radius:6px;padding:3px 8px}
.bb-regressivo{display:inline-block;margin-top:4px;font-size:12.5px;color:#6B6350}
.bb-regressivo{color:#6B6350}
.bb-reg-atraso,.bb-reg-atraso .bb-reg-txt{color:#A03030;font-weight:700}
@media (max-width:900px){.fer-prog form{min-width:180px}.fer-prog input[type=date]{width:140px}}

/* ─── Dica "gire o aparelho" (celular em pé) ─────────────────────────
   Só existe em tela estreita + orientação retrato + toque (pointer coarse):
   desktop e celular deitado nunca veem. Some sozinha após 8s e reaparece
   a cada página. Sem JavaScript — a orientação é resolvida pelo CSS. */
.bb-gire{display:none}
@media (max-width:900px) and (orientation:portrait) and (pointer:coarse){
  .bb-gire{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:9500;
    display:flex;align-items:center;gap:10px;width:max-content;max-width:92vw;
    background:#1A1A1A;color:#F9DCA5;border:1px solid #B89B48;border-radius:16px;
    padding:11px 18px;font-size:.84rem;line-height:1.3;box-shadow:0 6px 18px rgba(0,0,0,.28);
    animation:bbGireSome .5s ease 8s forwards;pointer-events:none}
  .bb-gire b{color:#EDD093}
  .bb-gire-fone{flex:0 0 auto;width:12px;height:20px;border:2px solid #EDD093;border-radius:3px;
    position:relative;animation:bbGireGira 2.2s ease-in-out infinite}
  .bb-gire-fone::after{content:'';position:absolute;left:50%;bottom:1px;transform:translateX(-50%);
    width:4px;height:2px;border-radius:2px;background:#EDD093}
}
@keyframes bbGireGira{0%,20%{transform:rotate(0deg)}45%,75%{transform:rotate(-90deg)}100%{transform:rotate(0deg)}}
@keyframes bbGireSome{to{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion:reduce){
  .bb-gire{animation:none}
  .bb-gire-fone{animation:none;transform:rotate(-90deg)}
}
@media print{.bb-gire{display:none}}
html[data-tema="noite"] .bb-gire{background:#2A2622;border-color:#8A6A12}

/* ─── Menu "Eficiência" (um botão no lugar da fileira de abas) ─────── */
.barra-ef{display:flex;align-items:center;gap:12px;margin-bottom:24px}
.ef-menu{position:relative}
.ef-botao{display:inline-flex;align-items:center;gap:8px;cursor:pointer;list-style:none;
  padding:11px 20px;border-radius:100px;background:var(--grad);color:var(--onix);
  font-weight:700;font-size:.92rem;border:1px solid transparent;user-select:none}
.ef-botao::-webkit-details-marker{display:none}
.ef-nome{letter-spacing:.2px}
.ef-atual{font-weight:600;font-size:.84rem;opacity:.78;max-width:46vw;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.ef-seta{font-size:.7rem;transition:transform .18s ease}
.ef-menu[open] .ef-seta{transform:rotate(180deg)}
.ef-lista{position:absolute;left:0;top:calc(100% + 8px);z-index:9000;min-width:250px;
  max-height:64vh;overflow:auto;display:flex;flex-direction:column;gap:2px;
  background:#fff;border:1px solid #DFD5BC;border-radius:14px;padding:8px;
  box-shadow:0 10px 28px rgba(0,0,0,.16)}
.ef-lista a{padding:9px 14px;border-radius:9px;color:var(--grafite);font-size:.88rem;
  font-weight:600;white-space:nowrap}
.ef-lista a:hover{background:#FBF8F0}
.ef-lista a.ativa{background:var(--grad);color:var(--onix)}
.ef-check{font-size:.8rem}
/* a barra do cliente mantém o botão de tema à direita (regra herdada) */
.barra-abas.barra-ef{position:relative}
@media (max-width:430px){.ef-lista{min-width:230px;max-width:88vw}.ef-lista a{white-space:normal}}
html[data-tema="noite"] .ef-lista{background:var(--apu-cartao,#26221D);border-color:#584A28}
html[data-tema="noite"] .ef-lista a{color:var(--apu-texto,#EDE6D6)}
html[data-tema="noite"] .ef-lista a:hover{background:rgba(216,187,118,.12)}
html[data-tema="noite"] .ef-lista a.ativa{color:var(--onix)}

/* ─── Sino de tarefas da equipe ────────────────────────────────────── */
.sino{margin-left:2px}
.sino-botao{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  list-style:none;position:relative;width:42px;height:42px;border-radius:50%;
  background:#fff;border:1px solid #DFD5BC;color:#6B5A2A;user-select:none}
.sino-botao::-webkit-details-marker{display:none}
.sino-botao:hover{border-color:#B89B48}
.sino-badge{position:absolute;top:-5px;right:-5px;min-width:19px;height:19px;padding:0 5px;
  display:flex;align-items:center;justify-content:center;border-radius:99px;
  background:#C24040;color:#fff;font-size:.68rem;font-weight:800;border:2px solid #FBF8F0}
.sino-lista{min-width:300px;max-width:88vw}
.sino-lista a{white-space:normal;display:block;line-height:1.35}
.sino-lista a small{display:block;font-weight:500;color:#6B6B6B;font-size:.74rem;margin-top:2px}
.sino-lista a.ativa small,.sino-lista a:hover small{color:inherit;opacity:.75}
.sino-titulo{padding:6px 14px 8px;font-size:.74rem;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;color:#8A6A12;border-bottom:1px solid #F0EADA;margin-bottom:4px}
.sino-vazio{padding:12px 14px;font-size:.85rem;color:#3D6B35;font-weight:600}
.sino-atraso{color:#A03030;font-weight:800}
html[data-tema="noite"] .sino-botao{background:var(--apu-cartao,#26221D);border-color:#584A28;color:#EDD093}
html[data-tema="noite"] .sino-titulo{border-color:#3A332A}
html[data-tema="noite"] .sino-lista a small{color:#9A9082}

/* ─── Área da EQUIPE em tela cheia (v7.34): sempre desktop — nada de
   espremer cartões e tabelas numa coluna de 1080px ─── */
.miolo-eq{max-width:1780px}
.miolo-eq .painel-caixa{max-width:none !important}

/* ─── Cabeçalho FIXO na rolagem (as duas áreas): o topo preto (empresa do
   grupo / Sair) e a barra Eficiência + tema/sino ficam sempre à vista ─── */
.topo{position:sticky;top:0;z-index:9600}
.barra-abas.barra-ef,.miolo-eq > .barra-ef{position:sticky;top:72px;z-index:9400;
  background:var(--areia);padding:10px 0 12px;margin-bottom:14px}
html[data-tema="noite"] .barra-abas.barra-ef{background:var(--apu-fundo,#141210)}

/* ─── v7.35: aba Férias do cliente em moldura larga no desktop — a tabela
   do panorama cabe inteira, sem rolagem horizontal. No celular nada muda
   (o max-width só age em telas grandes; a dica de girar permanece). ─── */
.miolo-largo{max-width:1700px}
.miolo-largo .fer-tab{min-width:0}
.miolo-largo .fer-prog{min-width:290px}
.miolo-largo .fer-prog input[type=date]{width:146px}
.miolo-largo .fer-andamento{min-width:185px}
.miolo-largo .fer-tab th,.miolo-largo .fer-tab td{padding-left:10px;padding-right:10px}

/* ─── v7.35: CABEÇALHO DE TABELA FIXO na rolagem vertical.
   position:sticky em th só funciona quando a tabela NÃO está presa num
   contêiner de rolagem horizontal; o script marca .rolagem-livre nas
   tabelas que cabem inteiras (desktop, na maioria) e o th gruda logo
   abaixo do topo + barra (altura medida em --th-topo). ─── */
.rolagem-livre{overflow-x:visible !important}
/* o CARTÃO também precisa deixar de ser scrollport (painel-caixa tem
   overflow:auto) — senão o sticky prende dentro dele e COBRE as linhas */
.caixa-livre{overflow:visible !important}
.caixa-livre table thead th{position:sticky;top:var(--th-topo,140px);z-index:30;
  background:#fff;box-shadow:0 1px 0 #E9E0CB}
html[data-tema="noite"] .caixa-livre table thead th{background:var(--apu-cartao,#26221D);box-shadow:0 1px 0 #3A332A}