/* =====================================================================
   Gerador de Escala - estilo geral
   ===================================================================== */

:root {
    --cor-primaria: #1d4ed8;
    --cor-primaria-escura: #1e3a8a;
    --cor-texto: #1f2937;
    --cor-texto-suave: #6b7280;
    --cor-borda: #d8dee9;
    --cor-fundo: #f1f5f9;
    --cor-branco: #ffffff;
    --cor-sucesso: #047857;
    --cor-sucesso-fundo: #d1fae5;
    --cor-erro: #b91c1c;
    --cor-erro-fundo: #fee2e2;
    --cor-alerta: #b45309;
    --cor-alerta-fundo: #fef3c7;
    --raio: 8px;
    --sombra: 0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .06);
}

* { box-sizing: border-box; }

/* O QUE ESTÁ MARCADO COM `hidden` SOME. SEMPRE.
   O navegador aplica `[hidden] { display: none }` com peso baixíssimo, então
   qualquer `display:` numa classe passa por cima e o elemento continua na
   tela — e o JavaScript que liga o `hidden` parece não fazer nada. Isso já
   mordeu duas vezes aqui: a caixa do chat, que nascia aberta e não fechava, e
   a lista do "Ver como", que não filtrava. A regra fica no alto do arquivo
   para valer para tudo, inclusive para o que ainda vai ser escrito. */
[hidden] { display: none !important; }

body {
    margin: 0;
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 14px;
    color: var(--cor-texto);
    background: var(--cor-fundo);
    line-height: 1.5;
}

a { color: var(--cor-primaria); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ------------------------------ Topo ------------------------------- */
.topo {
    background: var(--cor-primaria-escura);
    color: #fff;
    box-shadow: var(--sombra);
}

/* Largura útil do sistema. A escala é o que manda aqui: com as três
   colunas fixas (84 + 34 + 210 = 328px) e ~28px por dia, 1600px comportam
   uns 45 dias sem barra de rolagem lateral. */
:root { --largura-sistema: 1600px; }

/* A ESCALA GANHA O POUCO QUE FALTAVA, E SÓ ISSO.
 *
 * Com 1600px sobravam 1514px úteis para uma grade de 1535px. Faltavam VINTE E
 * UM PIXELS — e vinte e um pixels bastam para a barra aparecer e obrigar a
 * rolar a grade toda só para ver o último dia do período.
 *
 * 1660 dá a folga necessária e mais nada. Já esteve em 2000: a barra sumia,
 * mas sobravam quase 300px de branco à direita e a página ficava enorme. O
 * pedido era resolver a barra, não alargar a tela.
 *
 * O tamanho das colunas continua o de sempre — a grade não estica para
 * preencher espaço. Em monitor menor nada muda, porque max-width nunca passa
 * da janela; ali a rolagem continua, e é para isso que as colunas de SALDO e
 * FE ficam grudadas na direita.
 *
 * Vale para o topo e o rodapé também, porque os três leem esta variável: se
 * só o conteúdo crescesse, o menu ficaria desalinhado da grade. */
body.tela-escala { --largura-sistema: 1660px; }

.topo-interno {
    max-width: var(--largura-sistema);
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
}

.marca {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    padding: 14px 0;
}
.marca:hover { text-decoration: none; }
.marca-icone { font-size: 20px; }

.menu { display: flex; flex-wrap: wrap; align-items: stretch; }

.menu-item {
    display: flex;
    align-items: center;
    color: #c7d2fe;
    font-size: 14px;
    font-weight: 500;
    padding: 16px 14px;
    border-bottom: 3px solid transparent;
}
.menu-item:hover { color: #fff; text-decoration: none; }
.menu-item.ativo { color: #fff; border-bottom-color: #93c5fd; }

/* Grupo "Cadastros" com submenu */
.menu-grupo { position: relative; }

.menu-gatilho {
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: #c7d2fe;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 16px 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}
.menu-gatilho:hover { color: #fff; }
.menu-grupo.ativo > .menu-gatilho { color: #fff; border-bottom-color: #93c5fd; }
.menu-gatilho .seta { font-size: 10px; transition: transform .15s; }
.menu-grupo.aberto .menu-gatilho .seta { transform: rotate(180deg); }

.submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 50;
    min-width: 210px;
    background: #fff;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    box-shadow: 0 8px 24px rgba(15, 23, 42, .18);
    padding: 6px;
}
.menu-grupo:hover .submenu,
.menu-grupo.aberto .submenu,
.menu-grupo:focus-within .submenu { display: block; }

.submenu a {
    display: block;
    padding: 9px 12px;
    border-radius: 6px;
    color: var(--cor-texto);
    font-size: 13.5px;
    font-weight: 500;
}
.submenu a:hover { background: #f1f5f9; text-decoration: none; }
.submenu a.ativo { background: var(--cor-primaria); color: #fff; }

/* Ações à direita do topo */
.topo-acoes { margin-left: auto; display: flex; gap: 8px; align-items: center; }

/* Vale tanto para <a> quanto para <button>. Sem zerar o fundo, o botão vinha
   com o cinza padrão do navegador atrás, e a letra clara em cima dele ficava
   ilegível — 1,31 de contraste, quando o mínimo é 4,5. O <a> ao lado não
   sofria disso e os dois pareciam controles diferentes. */
.botao-topo {
    background: none;
    font: inherit;
    color: #c7d2fe;
    border: 1px solid rgba(199, 210, 254, .45);
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
}
.botao-topo:hover { color: #fff; border-color: #fff; text-decoration: none; }
.botao-topo.ativo { background: #fff; color: var(--cor-primaria-escura); border-color: #fff; }

/* ---------------------------- Conteúdo ----------------------------- */
.conteudo {
    max-width: var(--largura-sistema);
    margin: 0 auto;
    padding: 24px 20px 60px;
}

.rodape {
    max-width: var(--largura-sistema);
    margin: 0 auto;
    padding: 16px 20px 32px;
    color: var(--cor-texto-suave);
    font-size: 12px;
}

.cabecalho-pagina {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.cabecalho-pagina h1 {
    font-size: 22px;
    margin: 0;
}

.cabecalho-pagina p.subtitulo {
    margin: 4px 0 0;
    color: var(--cor-texto-suave);
    font-size: 13px;
}

.cartao {
    background: var(--cor-branco);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 20px;
    margin-bottom: 20px;
}

/* Dois cartões lado a lado (dados pessoais + alocação). */
.colunas-cartoes {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 0 20px;
    align-items: start;
}
@media (max-width: 1000px) {
    .colunas-cartoes { grid-template-columns: 1fr; }
}

.cartao h2 {
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--cor-texto-suave);
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--cor-borda);
}

/* ----------------------------- Botões ------------------------------ */
.botao {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    background: var(--cor-primaria);
    color: #fff;
    font-family: inherit;
}
.botao:hover { background: var(--cor-primaria-escura); text-decoration: none; color: #fff; }

.botao-secundario { background: #fff; color: var(--cor-texto); border-color: var(--cor-borda); }
.botao-secundario:hover { background: #f8fafc; color: var(--cor-texto); }

.botao-perigo { background: #dc2626; }
.botao-perigo:hover { background: #991b1b; }

.botao-pequeno { padding: 5px 10px; font-size: 12.5px; }

/* --------------------------- Formulários --------------------------- */
.grade {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 14px 16px;
}

.campo { display: flex; flex-direction: column; }
.campo label { font-size: 12.5px; font-weight: 600; margin-bottom: 5px; color: #374151; }
.campo label .obrigatorio { color: var(--cor-erro); }

.campo input,
.campo select,
.campo textarea {
    font-family: inherit;
    font-size: 14px;
    padding: 8px 10px;
    border: 1px solid var(--cor-borda);
    border-radius: 6px;
    background: #fff;
    color: var(--cor-texto);
    width: 100%;
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
    outline: none;
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 3px rgba(29, 78, 216, .12);
}

.campo textarea { resize: vertical; min-height: 70px; }
.campo .ajuda { font-size: 11.5px; color: var(--cor-texto-suave); margin-top: 4px; }

/* Campo cujo valor veio da integração com o EaseRH, ou que está diferente
   do que consta lá. Fica embaixo do campo, no lugar da ajuda. */
.campo .nota-rh { color: #1e6f43; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.campo .nota-rh.diferente { color: #92400e; }
.campo .nota-rh .botao-pequeno { padding: 1px 8px; font-size: 11px; }

.col-1  { grid-column: span 1; }
.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-12 { grid-column: span 12; }

/* Vaga sem ninguém: a linha continua na escala, em branco, para o buraco na
   equipe ficar visível e o tamanho do bloco não balançar. Ela não conta em
   lugar nenhum — nem como gente trabalhando, nem no total do turno. */
table.escala tr.vaga-vazia > td { background: #fbfcfe; }
table.escala tr.vaga-vazia .col-posicao { color: #b6bfcc; }
table.escala td.col-nome.vazia {
    color: #b6bfcc;
    font-style: italic;
    font-size: 11.5px;
    cursor: default;
}
table.escala td.celula.sem-ocupante {
    background: repeating-linear-gradient(
        -45deg, #fbfcfe, #fbfcfe 4px, #f1f5f9 4px, #f1f5f9 8px
    );
    cursor: default;
}

/* Durante o arrasto a vaga vazia se anuncia como alvo: soltar em cima dela
   não empurra a fila — é o único ARRASTO em que a pessoa leva as folgas dela
   junto, então precisa ficar claro que ali é diferente. (Mudar de bloco pelo
   cadastro também leva, mas ali não há o que sinalizar na grade.) */
table.escala tbody.arrastando-linha tr.vaga-vazia > td {
    background: #ecfdf5;
    box-shadow: inset 0 0 0 1px #6ee7b7;
}
table.escala tbody.arrastando-linha tr.vaga-vazia td.col-nome.vazia {
    color: #047857;
    font-style: normal;
    font-weight: 600;
}
table.escala tbody.arrastando-linha tr.vaga-vazia td.col-nome.vazia::after {
    content: ' \2190 solte aqui';
    font-weight: 400;
    font-size: 10.5px;
}

/* Ressalva sobre os períodos à frente, logo abaixo do nome do turno. Uma
   linha solta, vermelha e em negrito: é uma advertência, e precisa ser lida
   antes de alguém tomar a folga de um mês adiante como definitiva.
   Diferente do rodapé de regras, esta VAI para o papel. */
.aviso-escala {
    margin: 0 0 10px;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.45;
    text-align: center;
    color: var(--cor-erro);
}

/* Rodapé de regras da escala: o que o operador pode e não pode. Fica no fim
   da página, discreto, para a equipe consultar sem precisar perguntar.
   Some na impressão — no papel vai a escala, não o manual. */
.regras-operador {
    margin: 28px 0 0;
    padding: 18px 20px;
    background: #f8fafc;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    font-size: 12.5px;
    line-height: 1.65;
    color: var(--cor-texto);
}
.regras-operador h3 {
    margin: 0 0 10px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--cor-texto-suave);
}
.regras-operador .colunas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 28px;
    align-items: start;
}
@media (max-width: 900px) {
    .regras-operador .colunas { grid-template-columns: 1fr; }
}
.regras-operador h4 {
    margin: 0 0 6px;
    font-size: 12.5px;
    font-weight: 700;
}
.regras-operador h4.pode { color: #1f6f43; }
.regras-operador h4.nao-pode { color: var(--cor-erro); }
.regras-operador ul { margin: 0; padding-left: 18px; }
.regras-operador li { margin-bottom: 4px; }
.regras-operador .sobre-do {
    margin: 16px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--cor-borda);
    color: var(--cor-texto-suave);
}

/* Navegação entre os ciclos da escala: « anterior · atual · próximo »,
   grudada nos campos de data, que é o que ela muda. */
.navegacao-periodo {
    display: flex;
    gap: 6px;
    align-items: stretch;
    flex-wrap: nowrap;
}
.navegacao-periodo .botao { padding: 8px 12px; white-space: nowrap; }
/* As setas ficam mais largas e com a fonte maior: são alvo de clique
   repetido, e o rótulo é só um sinal. */
.navegacao-periodo .botao.seta {
    padding: 8px 14px;
    font-size: 17px;
    line-height: 1.2;
    font-weight: 700;
}

/* Seta sem para onde ir: a escala começa ali e não há período anterior.
   Fica visível, e não some, para o lugar do botão não dançar — e o título
   explica por que ela não responde. */
.navegacao-periodo .botao.seta.desligada {
    opacity: .4;
    cursor: not-allowed;
    background: var(--cor-branco);
    color: var(--cor-texto-suave);
    user-select: none;
}

.acoes-form {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--cor-borda);
}

/* ----------------------------- Filtros ----------------------------- */
.filtros { background: #fff; }
.filtros .acoes-filtro {
    grid-column: span 12;
    display: flex;
    gap: 10px;
    align-items: center;
    padding-top: 4px;
}

/* A linha de trabalho da escala: as datas, o Ver período, a navegação entre
   ciclos, os turnos e o GERAR — tudo à mesma altura.

   Alinhado pela BASE e não pelo centro: os campos de data têm rótulo em cima
   e os botões não, então centralizar deixava os botões flutuando acima da
   linha dos campos. Pela base, tudo encosta no mesmo chão.

   Quebra em telas estreitas: os turnos são muitos e no celular não cabem. */
.barra-escala {
    grid-column: span 12;
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}
/* Os campos de data levam a largura do conteúdo e nada mais: dd/mm/aaaa mais
   o ícone do calendário. Cada pixel a mais aqui era o GERAR quebrando para a
   linha de baixo, que é o que esta barra existe para evitar. */
.barra-escala .campo.campo-estreito { width: auto; flex: 0 0 auto; }
.barra-escala .campo.campo-estreito label { white-space: nowrap; }
.barra-escala .campo.campo-estreito input { width: 130px; padding-left: 8px; padding-right: 4px; }
.barra-escala .rotulo-turnos {
    font-size: 12.5px;
    font-weight: 600;
    color: #374151;
    margin-left: 2px;
    white-space: nowrap;
    padding-bottom: 9px;
    cursor: help;
}
/* Aqui os marcadores correm na horizontal, ao lado do rótulo, em vez de
   empilhar como no formulário de onde vieram. */
.barra-escala .caixa-turnos {
    flex-wrap: wrap;
    gap: 4px 12px;
    border: 0;
    padding: 0 0 8px;
    background: none;
    max-height: none;
    min-height: 0;
    overflow: visible;
}
.barra-escala .caixa-turnos label { margin: 0; }

/* O GERAR vai para a ponta direita: é o único botão da linha que reescreve
   a escala, e a distância evita o clique de passagem. */
.barra-escala .empurra-direita { margin-left: auto; }

/* Interruptor ON/OFF do acesso do operador. O botão aponta para um <form>
   que fica FORA da barra (form="form-travar-operador", ver escala/index.php)
   — um <form> aqui dentro aninharia no form de filtro, que é HTML inválido. */
.interruptor {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-weight: 700;
    font-size: 12.5px;
    white-space: nowrap;
    cursor: pointer;
}
button.interruptor { font-family: inherit; }
.interruptor.on  { background: var(--cor-sucesso-fundo); color: var(--cor-sucesso); border-color: #a7f3d0; }
.interruptor.off { background: var(--cor-erro-fundo); color: var(--cor-erro); border-color: #fecaca; }
.interruptor.on:hover  { background: #bbf3d5; }
.interruptor.off:hover { background: #fecaca; }
/* A versão sem formulário (quem não pode ligar/desligar) só mostra o
   estado — sem mão de clique, para não prometer uma ação que não existe. */
span.interruptor { cursor: default; }
.interruptor-bolinha {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}

/* ----------------------------- Tabela ------------------------------ */
.tabela-rolagem { overflow-x: auto; }

table.tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

table.tabela th {
    text-align: left;
    background: #f8fafc;
    color: #475569;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 10px 12px;
    border-bottom: 2px solid var(--cor-borda);
    white-space: nowrap;
}

table.tabela td {
    padding: 10px 12px;
    border-bottom: 1px solid #eef2f7;
    vertical-align: middle;
}

table.tabela tbody tr:hover { background: #f8fafc; }
table.tabela td.acoes { white-space: nowrap; text-align: right; }
table.tabela .vazio {
    text-align: center;
    padding: 36px 12px;
    color: var(--cor-texto-suave);
}

/* ---------------------------- Etiquetas ---------------------------- */
.etiqueta {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    background: #e5e7eb;
    color: #374151;
    white-space: nowrap;
}
.etiqueta-ativo    { background: var(--cor-sucesso-fundo); color: var(--cor-sucesso); }
.etiqueta-inativo  { background: #e5e7eb; color: #4b5563; }
.etiqueta-afastado { background: var(--cor-alerta-fundo); color: var(--cor-alerta); }
.etiqueta-ferias   { background: #dbeafe; color: #1e40af; }
.etiqueta-neutra   { background: #f1f5f9; color: #64748b; font-weight: 500; }

/* Etiqueta dos tipos de folga: cor vem do cadastro, via style inline. */
.etiqueta-folga {
    min-width: 34px;
    text-align: center;
    font-weight: 700;
    letter-spacing: .03em;
    border: 1px solid rgba(15, 23, 42, .12);
}

/* Campo de cor + amostra */
.linha-cor { display: flex; align-items: center; gap: 10px; }
.linha-cor input[type="color"] {
    width: 52px;
    height: 38px;
    padding: 2px;
    cursor: pointer;
    flex: none;
}
.linha-cor input[type="text"] { flex: 1; font-family: Consolas, monospace; }

.amostra-cor {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    border: 1px solid rgba(15, 23, 42, .18);
    display: inline-block;
    vertical-align: middle;
}

.previa-folga {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: #f8fafc;
    border: 1px dashed var(--cor-borda);
    border-radius: var(--raio);
}

/* ----------------------------- Alertas ----------------------------- */
.alerta {
    padding: 12px 16px;
    border-radius: var(--raio);
    margin-bottom: 18px;
    border: 1px solid transparent;
}
.alerta-sucesso { background: var(--cor-sucesso-fundo); color: var(--cor-sucesso); border-color: #a7f3d0; }
.alerta-erro    { background: var(--cor-erro-fundo);    color: var(--cor-erro);    border-color: #fecaca; }
.alerta-aviso   { background: var(--cor-alerta-fundo);  color: var(--cor-alerta);  border-color: #fde68a; }
.alerta ul { margin: 6px 0 0; padding-left: 20px; }

/* ----------------------------- Escala ------------------------------
   Grade no estilo planilha: muitos dias na horizontal, com as duas
   primeiras colunas (bloco e nome) fixas ao rolar para o lado.
   ------------------------------------------------------------------- */
table.escala {
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12px;
    white-space: nowrap;

    /* Nada de width:100% aqui. A tabela tem de manter a largura natural das
       colunas: esticá-la faz o navegador engordar também BLOCOS, POS. e
       COLABORADOR, e o "left" das colunas grudadas é calculado em cima das
       larguras declaradas — elas sairiam desalinhadas ao rolar para o lado. */

    /* Largura das colunas fixas. As três grudam à esquerda uma depois da
       outra, então o deslocamento de cada uma é a soma das anteriores —
       por isso os valores ficam aqui, num lugar só. Cabe "SUPERVISOR". */
    --largura-bloco: 84px;
    --largura-posicao: 34px;
}

table.escala th,
table.escala td {
    border-right: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    padding: 3px 4px;
    text-align: center;
    background: #fff;
}

table.escala thead th {
    background: #f1f5f9;
    color: #475569;
    font-size: 11px;
    font-weight: 700;
    border-bottom: 2px solid var(--cor-borda);
    position: sticky;
    top: 0;
    z-index: 2;
}
table.escala thead tr:nth-child(2) th { top: 22px; }

/* A coluna do dia agora precisa comportar "01/07", e não só "01". Para a
   data caber sem roubar dias da tela, ela usa fonte menor e as colunas de
   dia ficam com respiro lateral menor que o resto da tabela. */
table.escala th.dia { width: 32px; min-width: 32px; }
table.escala th.dia.data { font-size: 10px; letter-spacing: -.03em; }
table.escala th.dia,
table.escala td.celula { padding-left: 2px; padding-right: 2px; }
table.escala th.dia.domingo { background: #009900; color: #fff; }
table.escala td.col-domingo { background: #f0fdf4; }

/* Domingos e feriados saem em negrito, no cabeçalho e na coluna toda.
   Precisa de mais especificidade que a regra geral de td.celula. */
table.escala th.dia.domingo,
table.escala th.dia.feriado,
table.escala td.celula.col-domingo,
table.escala td.celula.col-feriado { font-weight: 800; }

table.escala th.dia.feriado { background: #7c3aed; color: #fff; }
/* A coluna inteira do feriado sai em roxo claro, para o olho descer do
   cabeçalho até o fim da grade sem perder de vista qual é o dia. Era um roxo
   tão lavado (#f5f3ff) que passava por branco. */
table.escala td.col-feriado { background: #ede9fe; }
table.escala th.dia.domingo.feriado { background: #4c1d95; }

table.escala .col-bloco {
    width: var(--largura-bloco);
    min-width: var(--largura-bloco);
    max-width: var(--largura-bloco);
    position: sticky;
    left: 0;
    z-index: 3;
    background: #f8fafc;
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: -.02em;
    overflow: hidden;
    text-overflow: ellipsis;
    border-right: 2px solid var(--cor-borda);
}
table.escala thead .col-bloco { z-index: 4; }

/* Coluna da posição dentro do bloco (1, 2, 3... e "S" no supervisor).
   Não acompanha o nome quando a linha é arrastada: é fixa como o bloco. */
table.escala .col-posicao {
    width: var(--largura-posicao);
    min-width: var(--largura-posicao);
    position: sticky;
    left: var(--largura-bloco);
    z-index: 3;
    background: #f8fafc;
    font-weight: 700;
    color: #475569;
    border-right: 1px solid var(--cor-borda);
}
table.escala thead .col-posicao { z-index: 4; }

table.escala .col-nome {
    width: 210px;
    min-width: 210px;
    max-width: 210px;
    position: sticky;
    left: calc(var(--largura-bloco) + var(--largura-posicao));
    z-index: 3;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    border-right: 2px solid var(--cor-borda);
}
table.escala thead .col-nome { z-index: 4; }

/* A célula do nome vira uma fileira: alça, nome, botão de copiar. Antes o
   nome comprido simplesmente empurrava o botão para fora dos 210px — a
   célula corta com overflow:hidden, então "empurrado para fora" é "some da
   tela". Um Matheus Henrique Marcon Barcelos ou uma Bruna Mikaelly Eufrazio
   Alencar Silva escondiam o próprio botão de copiar.
   Agora só o NOME encolhe com reticências (min-width:0 é o que permite um
   filho flex encolher além do que o próprio conteúdo pediria); a alça e o
   botão têm flex-shrink:0 e nunca perdem espaço, então o botão está sempre
   ali, do mesmo tamanho, não importa quão comprido seja o nome. */
table.escala td.col-nome {
    display: flex;
    align-items: center;
    min-width: 0;
}
table.escala td.col-nome > a {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
table.escala td.col-nome .pega,
table.escala td.col-nome .copiar-escala {
    flex: 0 0 auto;
}
table.escala .col-nome a { color: var(--cor-texto); }

table.escala td.celula { font-weight: 600; color: #94a3b8; }
table.escala td.celula.editavel { cursor: pointer; }
table.escala td.celula.editavel:hover { outline: 2px solid var(--cor-primaria); outline-offset: -2px; }

table.escala td.celula.total {
    font-weight: 700;
    color: var(--cor-texto);
    background: #f8fafc;
    line-height: 13px;
    padding: 2px 3px;
}
table.escala td.celula.total .qtd { font-size: 11px; }
table.escala td.celula.total .pct { font-size: 9px; font-weight: 500; color: var(--cor-texto-suave); }
table.escala tr.linha-total .col-nome { font-size: 11px; color: var(--cor-texto-suave); }

/* Menu que abre ao clicar numa célula da escala. */
.menu-celula {
    position: absolute;
    z-index: 80;
    background: #fff;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    box-shadow: 0 8px 24px rgba(15, 23, 42, .2);
    padding: 5px;
    min-width: 190px;
}
.menu-celula button {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-radius: 5px;
    padding: 8px 10px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--cor-texto);
    cursor: pointer;
}
.menu-celula button:hover { background: #f1f5f9; }

/* O "Padrão" é o desfazer, e não mais um tipo de folga: fica separado dos
   lançamentos por uma linha, para não ser lido como "mais uma opção". */
.menu-celula button.menu-celula-padrao {
    margin-top: 4px;
    padding-top: 9px;
    border-top: 1px solid var(--cor-borda);
    color: var(--cor-texto-suave);
}
.menu-celula button.destaque {
    margin-top: 4px;
    border-top: 1px solid var(--cor-borda);
    border-radius: 0 0 5px 5px;
    color: var(--cor-primaria);
    font-weight: 600;
}

/* A ação que não cabe NESTE dia: continua na lista, apagada, com o motivo
   embaixo. Some-la seria mais limpo e foi o que havia antes — quem clicava
   num dia que não servia não via botão nenhum e não tinha como saber se o
   problema era o dia, o saldo ou o próprio direito. */
.menu-celula button.acao-bloqueada {
    color: var(--cor-texto-suave);
    font-weight: 500;
    cursor: not-allowed;
    opacity: .85;
}
.menu-celula button.acao-bloqueada:hover { background: none; }

/* O motivo quebra em segunda linha e não estica o menu: sem o max-width ele
   empurraria a largura do menu até o tamanho da frase. */
.menu-celula .motivo-bloqueio {
    display: block;
    margin-top: 3px;
    max-width: 260px;
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.35;
    color: var(--cor-texto-suave);
    white-space: normal;
}

/* A linha do próprio usuário fica destacada na escala. */
table.escala td.celula.minha-linha { box-shadow: inset 0 -2px 0 var(--cor-primaria); }

/* E o nome dele ganha um realce discreto, em outra cor. */
table.escala td.col-nome.meu-nome {
    background: #fff7ed;
    border-left: 4px solid #f59e0b;
    padding-left: 4px;
}
table.escala td.col-nome.meu-nome a { color: #92400e; font-weight: 700; }
table.escala tbody tr:hover td.col-nome.meu-nome { background: #fef3c7; }

/* Legenda ao lado do nome do turno, alinhada à direita.
   Tudo numa linha só: nada de flex-wrap aqui, nem no título nem na legenda.
   Se faltar espaço, quem cede é a legenda — ela encolhe e rola por dentro,
   em vez de empurrar o nome do turno para outra linha. */
.titulo-turno {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: nowrap;
}
.titulo-turno > span:first-child { white-space: nowrap; flex: 0 0 auto; }

.legenda-turno {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    white-space: nowrap;
    margin-left: auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    text-transform: none;
    letter-spacing: 0;
    font-size: 11px;
    font-weight: 500;
    color: var(--cor-texto-suave);
}
.legenda-turno::-webkit-scrollbar { display: none; }
.legenda-turno > span { flex: 0 0 auto; }
.legenda-turno .etiqueta { margin-left: 6px; }
.legenda-turno .etiqueta:first-child { margin-left: 0; }

/* Coluna de domingos: zero é irregular. */
table.escala td.contagem.alerta-zero {
    background: var(--cor-erro-fundo);
    color: var(--cor-erro);
    font-weight: 800;
}

/* Dia de afastamento: férias, atestado, licença. Não é folga nem trabalho,
   então mostra o ícone e não conta no rodapé. */
table.escala td.celula.afastado {
    background: #f1f5f9;
    font-size: 12px;
    cursor: default;
}

/* Dia abaixo do efetivo mínimo definido para o turno. */
table.escala td.total.abaixo-do-minimo,
table.escala.padrao tfoot td.total-dia.abaixo-do-minimo {
    background: var(--cor-erro-fundo);
}
table.escala td.total.abaixo-do-minimo .qtd,
table.escala.padrao tfoot td.total-dia.abaixo-do-minimo .qtd {
    color: var(--cor-erro);
    font-weight: 800;
}

/* Dia que já passou: véu cinza translúcido por cima, seja qual for a cor da
   folga embaixo. É informativo — quem tem permissão ainda corrige o passado;
   o que o dia passado impede é entrar em troca de folga. O box-shadow interno
   é o que permite o véu funcionar sobre o fundo colorido da própria célula. */
table.escala td.celula.dia-passado {
    box-shadow: inset 0 0 0 999px rgba(100, 116, 139, .22);
}
table.escala tbody tr:hover td.celula.dia-passado { box-shadow: inset 0 0 0 999px rgba(100, 116, 139, .12); }

/* No feriado o véu é ROXO, não cinza. O cinza apagava a única coisa que a
   coluna tinha para dizer: assim que o feriado ficava para trás, ela virava
   uma coluna cinza igual às vizinhas, e só o cabeçalho lembrava do feriado.
   O escurecido continua marcando o dia passado — só que na cor do feriado. */
table.escala td.celula.dia-passado.col-feriado {
    box-shadow: inset 0 0 0 999px rgba(124, 58, 237, .18);
}
table.escala tbody tr:hover td.celula.dia-passado.col-feriado {
    box-shadow: inset 0 0 0 999px rgba(124, 58, 237, .10);
}

/* Dia de período fechado: não aceita clique e sai levemente apagado. */
table.escala td.celula.dia-fechado {
    opacity: .62;
    cursor: not-allowed;
}

/* Folga que foi lançada quando a vaga era de outra pessoa. O cantinho
   marcado evita ler o passado como se fosse do ocupante de hoje. */
table.escala td.celula.de-outro {
    position: relative;
    box-shadow: inset -6px 6px 0 -3px rgba(15, 23, 42, .35);
}

/* Semana inteira sem nenhuma folga: aviso, não impedimento. Amarelo para
   não se confundir com o vermelho do domingo zerado, que é irregular.
   Especificidade acima da do domingo e do feriado, senão o fundo deles
   venceria justamente nos dias que mais interessa enxergar. */
table.escala td.celula.semana-sem-folga {
    background: var(--cor-alerta-fundo);
    color: var(--cor-alerta);
}

/* Dica "?" ao lado de um rótulo. */
.dica {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--cor-primaria);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    cursor: help;
    margin-left: 4px;
}

/* Quadro de permissões */
.tabela-permissoes input[type="checkbox"] { width: auto; transform: scale(1.2); cursor: pointer; }
.tabela-permissoes td { vertical-align: middle; }

/* Folgas que podem ser entregues na troca, entre o 1º e o 2º clique. */
table.escala td.celula.oferecivel {
    outline: 3px solid var(--cor-primaria);
    outline-offset: -3px;
    cursor: pointer;
    animation: pulsa 1.1s ease-in-out infinite;
}
@keyframes pulsa { 50% { outline-color: #93c5fd; } }

/* Barra de instrução do 2º clique. */
.barra-troca {
    position: fixed;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 640px;
    padding: 12px 18px;
    border-radius: var(--raio);
    background: var(--cor-primaria-escura);
    color: #fff;
    font-size: 13.5px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .3);
}
.barra-troca[hidden] { display: none; }
.barra-troca strong { color: #fde68a; }

/* Usuário logado no topo */
.usuario-logado {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    max-width: 210px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.usuario-logado small { color: #c7d2fe; font-size: 11px; font-weight: 400; }

/* ------------------ Trocas de folga, abaixo da escala ---------------- */
.painel-trocas {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--cor-borda);
}
.painel-trocas h3 {
    margin: 0 0 10px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--cor-texto-suave);
}

.lista-trocas { list-style: none; margin: 0; padding: 0; }
.lista-trocas li {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 10px 12px;
    margin-bottom: 8px;
    border: 1px solid var(--cor-borda);
    border-left: 4px solid var(--cor-primaria);
    border-radius: var(--raio);
    background: #f8fafc;
    font-size: 13.5px;
}
.lista-trocas li form { margin: 0; }
.lista-trocas .troca-info { flex: 1; min-width: 260px; }
.lista-trocas .troca-motivo {
    display: block;
    color: var(--cor-texto-suave);
    font-size: 12.5px;
    font-style: italic;
    margin-top: 2px;
}

/* --------------------------- Janelas -------------------------------- */
.janela {
    position: fixed;
    inset: 0;
    z-index: 120;
    background: rgba(15, 23, 42, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.janela[hidden] { display: none; }

.janela-caixa {
    background: #fff;
    border-radius: var(--raio);
    box-shadow: 0 20px 50px rgba(15, 23, 42, .3);
    padding: 22px;
    width: 100%;
    max-width: 440px;
}
.janela-caixa h3 { margin: 0 0 12px; font-size: 17px; }
.janela-linha { margin: 0 0 14px; font-size: 14px; }
.janela-ajuda { margin: 12px 0 0; font-size: 12.5px; color: var(--cor-texto-suave); }
.janela-acoes {
    display: flex;
    gap: 10px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--cor-borda);
}

/* Separação dos blocos: borda grossa no fim de cada bloco, tanto nas linhas
   dos colaboradores quanto na coluna do bloco (que é mesclada).

   O `tbody` no seletor da coluna do bloco não é enfeite. Sem ele a regra
   pegava também a primeira célula do RODAPÉ, que leva a mesma classe, e
   desenhava um traço grosso e curto embaixo dela — um toco solto à esquerda,
   sem nada que o continuasse pela tabela. */
table.escala tbody tr.fim-bloco > td { border-bottom: 3px solid #64748b; }
table.escala tbody td.col-bloco { border-bottom: 3px solid #64748b; }

/* A linha grossa que separa a grade do rodapé é UMA só, em cima da primeira
   linha de totais. Aplicada a todas, ela também aparecia entre "Trabalhando
   no dia" e "Com Intermediário", que são duas leituras do mesmo total e não
   pedem separação dessa força. */
table.escala tfoot tr:first-child > td { border-top: 3px solid #64748b; }
table.escala tfoot tr + tr > td { border-top: 1px solid var(--cor-borda); }

/* Moldura em volta da escala inteira do turno. */
.tabela-rolagem.arrastavel {
    border: 2px solid #64748b;
    border-radius: 4px;
}

/* Turno escondido pelo filtro do topo. */
.secao-turno[hidden] { display: none; }

/* Cada turno é uma grade grande e só uma cabe na tela de cada vez. Sem isto
   o navegador calcula a posição de TODAS as células dos cinco turnos a cada
   abertura da página — medido em 44 ms na escala de cinco semanas, e muito
   pior na escala padrão, que tem 20 mil células. Com content-visibility ele
   desenha só o turno à vista e deixa os outros para quando chegarem perto:
   os mesmos 44 ms caem para 3 ms.
   O `auto` do contain-intrinsic-size faz o navegador guardar o tamanho real
   depois da primeira vez, então a barra de rolagem não pula. */
.secao-turno {
    content-visibility: auto;
    contain-intrinsic-size: auto 700px;
}

/* -------------------- Grade da escala padrão ---------------------- */
table.escala .cabecalho-semana {
    background: #e2e8f0;
    color: #334155;
    border-bottom: 2px solid var(--cor-borda);
    letter-spacing: .04em;
}
table.escala th.fim-semana,
table.escala td.fim-semana { border-right: 3px solid #64748b; }

/* A SEPARAÇÃO ENTRE AS SEMANAS, na grade da escala.
   Vai no domingo, que é onde a semana fecha. Numa grade de trinta e cinco
   colunas iguais, achar onde uma semana acaba era contar de sete em sete —
   e é justamente a semana que manda na folga.

   Fina e preta: o que separa aqui é a COR, não a espessura. As bordas das
   outras colunas são cinza-claro, então um fio preto de 1px já corta a
   grade sem engordar a coluna do domingo nem empurrar as vizinhas.
   Fora a escala padrão, que já tinha a dela e não foi pedida. */
table.escala:not(.padrao) th.fim-semana,
table.escala:not(.padrao) td.fim-semana { border-right: 1px solid #000; }

/* Linhas compactas e de altura fixa: o clique troca só o texto e a cor,
   nunca o tamanho da célula. */
table.escala.padrao td,
table.escala.padrao th { padding: 0 3px; height: 20px; }

table.escala.padrao td.celula { padding: 0; }

/* Célula clicável: "T" trabalha, "FP" folga padrão.
   O marcador se chama .marca-dia, e não .marca: .marca é a marca do sistema
   no topo da página, com padding de 14px e fonte de 17px, e aquela regra
   caía aqui dentro — o fundo colorido ficava alto demais e passava por cima
   das linhas e das bordas da grade.
   A altura vem só do line-height, que é igual à altura da célula. */
.celula-padrao {
    display: block;
    cursor: pointer;
    line-height: 20px;
}
.celula-padrao input { display: none; }
.celula-padrao .marca-dia {
    display: block;
    padding: 0;
    line-height: inherit;
    font-weight: 700;
    font-size: 10px;
    color: #b6bfcc;
}
.celula-padrao .marca-dia::after { content: 'T'; }
.celula-padrao:hover .marca-dia { background: #e0e7ff; color: var(--cor-primaria); }
.celula-padrao input:checked + .marca-dia {
    background: var(--cor-folga, #3498db);
    color: #fff;
}
.celula-padrao input:checked + .marca-dia::after { content: 'FP'; }

/* Totalizador do rodapé: quantidade em cima, percentual embaixo. */
/* ---- Previsão à direita da grade editável ----
   Não é editável: é o mesmo padrão da esquerda com uma semana a mais (igual
   à primeira) e, a cada bloco desses, o padrão descendo uma linha. Fica em
   tom mais claro justamente para ninguém tentar clicar. */
table.escala.padrao th.grupo-editavel,
table.escala.padrao th.grupo-previsto {
    font-size: 10px;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--cor-borda);
}
table.escala.padrao th.grupo-editavel { background: #cbd5e1; color: #1e293b; }
table.escala.padrao th.grupo-previsto { background: #eef2f7; color: #64748b; font-weight: 600; }

/* Bloco cuja folga cai sempre no mesmo dia — fica de fora do rodízio. */
table.escala.padrao .marca-fixa {
    display: inline-block;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #1f6f43;
    background: #d1fae5;
    border-radius: 3px;
    padding: 0 4px;
    line-height: 13px;
}

table.escala.padrao th.cabecalho-semana.previsto { background: #f1f5f9; color: #94a3b8; }
table.escala.padrao th.dia.previsto { background: #f8fafc; color: #94a3b8; }

table.escala.padrao td.celula.prevista {
    line-height: 20px;
    font-weight: 700;
    font-size: 10px;
    color: #d3dae4;
    background: #fbfcfe;
    /* Não há o que clicar aqui, então a célula mostra a mãozinha de arrastar
       a grade, que é o que ela realmente faz. */
    cursor: inherit;
}
table.escala.padrao td.celula.prevista::after { content: 'T'; }
table.escala.padrao td.celula.prevista.folga {
    background: var(--cor-folga, #3498db);
    color: #fff;
    opacity: .55;
}
table.escala.padrao td.celula.prevista.folga::after { content: 'FP'; }

table.escala.padrao tfoot td.total-previsto {
    height: 32px;
    line-height: 14px;
    padding: 1px 2px;
    background: #f8fafc;
}
table.escala.padrao tfoot td.total-previsto .qtd { font-weight: 700; color: #94a3b8; font-size: 11px; }
table.escala.padrao tfoot td.total-previsto .pct { font-size: 9px; color: #b6bfcc; }

/* Onde começa cada volta do rodízio. */
table.escala.padrao th.inicio-bloco,
table.escala.padrao td.inicio-bloco { border-left: 3px solid #94a3b8; }

/* Rótulo das linhas de total, na coluna dos blocos. */
table.escala.padrao tfoot td.rotulo-total {
    text-align: left;
    font-size: 10px;
    font-weight: 700;
    color: var(--cor-texto-suave);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

table.escala.padrao tfoot td.total-dia {
    height: 32px;
    line-height: 14px;
    padding: 1px 2px;
    background: #f1f5f9;
}
table.escala.padrao tfoot td.total-dia .qtd { font-weight: 700; color: var(--cor-texto); font-size: 11px; }
table.escala.padrao tfoot td.total-dia .pct { font-size: 9px; color: var(--cor-texto-suave); }

/* Arrastar a grade para o lado com o mouse. */
.tabela-rolagem.arrastavel { cursor: grab; }
.tabela-rolagem.arrastavel.arrastando { cursor: grabbing; user-select: none; }
.tabela-rolagem.arrastavel.arrastando a { pointer-events: none; }

/* Enquanto arrasta, a mão fechada vale em toda a grade — inclusive sobre as
   células da escala padrão, que fora do arrasto mostram a mãozinha de clique. */
.tabela-rolagem.arrastavel.arrastando .celula-padrao,
.tabela-rolagem.arrastavel.arrastando table.escala.padrao td { cursor: grabbing; }

/* Reordenar linhas: a coluna do nome é a alça. */
table.escala td.col-nome { cursor: move; }
table.escala td.col-nome .pega {
    color: #cbd5e1;
    font-size: 11px;
    letter-spacing: -2px;
    margin-right: 5px;
    user-select: none;
}
table.escala tbody tr:hover td.col-nome .pega { color: var(--cor-primaria); }
table.escala tbody tr.linha-arrastada > td { opacity: .45; background: #dbeafe; }

.aviso-flutuante {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 90;
    background: var(--cor-sucesso-fundo);
    color: var(--cor-sucesso);
    border: 1px solid #a7f3d0;
    border-radius: var(--raio);
    padding: 10px 16px;
    font-size: 13.5px;
    font-weight: 500;
    box-shadow: 0 6px 20px rgba(15, 23, 42, .16);
}
.aviso-flutuante.erro {
    background: var(--cor-erro-fundo);
    color: var(--cor-erro);
    border-color: #fecaca;
}

/* Caixa de seleção múltipla (turnos no filtro da escala) */
.caixa-marcadores {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    align-items: center;
    padding: 7px 10px;
    border: 1px solid var(--cor-borda);
    border-radius: 6px;
    background: #fff;
    min-height: 38px;
}
.caixa-marcadores label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 500;
    margin: 0;
    cursor: pointer;
    white-space: nowrap;
}
.caixa-marcadores input { width: auto; }

/* Lista longa de marcadores (blocos visíveis): rola dentro da caixa. */
.caixa-marcadores.caixa-rolagem {
    display: block;
    max-height: 190px;
    overflow-y: auto;
}
.caixa-marcadores.caixa-rolagem label { margin: 1px 0; }
.caixa-marcadores.caixa-rolagem .titulo-grupo {
    display: block;
    margin: 8px 0 3px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--cor-texto-suave);
}
.caixa-marcadores.caixa-rolagem .titulo-grupo:first-child { margin-top: 0; }

table.escala .contagem {
    width: 28px;
    min-width: 28px;
    background: #f8fafc;
    font-weight: 700;
    color: #475569;
}

table.escala tbody tr:hover td.celula { background: #eff6ff; }
table.escala tbody tr:hover .col-nome { background: #eff6ff; }

/* ---------------------------- Paginação ---------------------------- */
.paginacao {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 18px;
    flex-wrap: wrap;
}
.paginacao a, .paginacao span {
    padding: 6px 11px;
    border: 1px solid var(--cor-borda);
    border-radius: 6px;
    background: #fff;
    font-size: 13px;
}
.paginacao .atual { background: var(--cor-primaria); color: #fff; border-color: var(--cor-primaria); }
.paginacao .info { border: none; background: none; color: var(--cor-texto-suave); margin-left: auto; }

/* -------------------------- Painel inicial ------------------------- */
.cartoes-resumo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.resumo {
    background: #fff;
    border: 1px solid var(--cor-borda);
    border-left: 4px solid var(--cor-primaria);
    border-radius: var(--raio);
    padding: 16px 18px;
    box-shadow: var(--sombra);
}
.resumo .numero { font-size: 30px; font-weight: 700; line-height: 1.1; }
.resumo .rotulo { color: var(--cor-texto-suave); font-size: 13px; margin-top: 2px; }
.resumo:hover { text-decoration: none; }

@media (max-width: 900px) {
    .grade > [class*="col-"] { grid-column: span 12; }
}

/* ------------------- Filtros na própria grade ----------------------
   Uma linha de campos logo abaixo dos títulos das colunas, no estilo de
   planilha. O filtro roda no banco (a listagem é paginada), então os
   campos pertencem a um <form> que fica fora da tabela — ver o atributo
   form= no HTML.
   ------------------------------------------------------------------- */
.barra-grade {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.barra-grade input[type="search"] { max-width: 320px; }
.barra-grade select { width: auto; }
.barra-grade .info { margin-left: auto; color: var(--cor-texto-suave); font-size: 12.5px; }

table.tabela.com-filtros thead tr.linha-filtros th {
    padding: 4px 6px;
    background: #eef2f7;
    border-bottom: 2px solid var(--cor-borda);
}
table.tabela.com-filtros thead tr.linha-filtros input,
table.tabela.com-filtros thead tr.linha-filtros select {
    width: 100%;
    min-width: 0;
    padding: 3px 5px;
    font-size: 12px;
    font-weight: 400;
    border: 1px solid var(--cor-borda);
    border-radius: 4px;
    background: #fff;
}
table.tabela.com-filtros thead tr.linha-filtros input::placeholder {
    color: #a3adba;
    font-style: italic;
}
/* Campo preenchido fica visível de longe: dá para ver que a lista está
   filtrada mesmo sem ler o conteúdo de cada campo. A classe .com-valor é
   posta pelo app.js. */
table.tabela.com-filtros thead tr.linha-filtros input:not(:placeholder-shown),
table.tabela.com-filtros thead tr.linha-filtros .com-valor {
    border-color: var(--cor-primaria);
    background: #eff6ff;
}

/* ---------------------------- Impressão ----------------------------
   Sai no papel só a escala que está na tela. Os turnos desmarcados no
   filtro já estão com [hidden], então não há nada a fazer por eles: o
   que este bloco faz é tirar o que é de tela (topo, filtros, botões,
   janelas) e desmontar a rolagem/colunas grudadas, que na tela ajudam
   e no papel cortariam a grade.
   ------------------------------------------------------------------- */

/* Só aparece na impressão — ver .cabecalho-impressao no escala/index.php. */
.cabecalho-impressao { display: none; }

@page {
    size: landscape;
    margin: 8mm;
}

/* ---------------------------- Janelas ---------------------------- */
.janela-fundo {
    position: fixed; inset: 0; background: rgba(15,23,42,.45);
    display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 60;
}
.janela-fundo[hidden] { display: none !important; }
.janela-caixa {
    background: var(--cor-branco); border-radius: 10px; width: 460px; max-width: 100%;
    max-height: calc(100vh - 40px); overflow-y: auto;
    box-shadow: 0 18px 44px rgba(15,23,42,.3);
}
.janela-topo { padding: 13px 18px; border-bottom: 1px solid var(--cor-borda); font-weight: 600; }
.janela-corpo { padding: 16px 18px; }
.janela-pe {
    padding: 12px 18px; background: #f8fafc; border-top: 1px solid var(--cor-borda);
    display: flex; justify-content: flex-end; gap: 8px;
}
.janela-caixa .campo { margin-bottom: 12px; }
.janela-caixa .campo label { display: block; font-size: 12.5px; color: var(--cor-texto-suave); margin-bottom: 3px; }
.janela-caixa .campo input,
.janela-caixa .campo select,
.janela-caixa .campo textarea {
    width: 100%; padding: 7px 9px; border: 1px solid var(--cor-borda);
    border-radius: 6px; font: inherit;
}
.janela-caixa .ajuda { color: var(--cor-texto-suave); font-size: 11.5px; margin: 4px 0 0; }

/* ------------------------- Ver como outra pessoa -------------------------
   O administrador olhando o sistema pelos olhos de um colaborador. Tudo
   aqui existe para uma coisa só: não deixar ninguém esquecer que está na
   pele de outra pessoa. */

.usuario-logado.vendo-como {
    background: #fde68a;
    color: #78350f;
    border-radius: 6px;
    padding: 2px 8px;
}
.usuario-logado.vendo-como small { color: #92400e; }

.forma-topo { margin: 0; display: inline; }
.botao-sair-do-modo {
    background: #f59e0b !important;
    border-color: #f59e0b !important;
    color: #451a03 !important;
    font-weight: 600;
}
.botao-sair-do-modo:hover { background: #d97706 !important; }

.faixa-vendo-como {
    background: #fef3c7;
    border-bottom: 2px solid #f59e0b;
    color: #78350f;
    padding: 9px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 13px;
}
.faixa-vendo-como .so-leitura { color: #92400e; }
.faixa-vendo-como form { margin: 0; }
.faixa-vendo-como button {
    border: 0;
    border-radius: 6px;
    background: #b45309;
    color: #fff;
    font: inherit;
    font-weight: 600;
    padding: 5px 12px;
    cursor: pointer;
}
.faixa-vendo-como button:hover { background: #92400e; }

.busca-ver-como {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--cor-borda);
    border-radius: 7px;
    font: inherit;
    margin-bottom: 10px;
}
.lista-ver-como {
    max-height: 360px;
    overflow-y: auto;
    border: 1px solid var(--cor-borda);
    border-radius: 7px;
}
.item-ver-como {
    display: block;
    width: 100%;
    padding: 8px 11px;
    border: 0;
    border-bottom: 1px solid #eef2f7;
    background: transparent;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
}
.item-ver-como:hover { background: #f6f9fc; }
.item-ver-como .quem { display: block; font-weight: 600; }
.item-ver-como .onde { display: block; font-size: 11.5px; color: var(--cor-texto-suave); }
.vazio-ver-como { text-align: center; color: var(--cor-texto-suave); font-size: 12.5px; }


@media print {
    /* Sem isto o navegador imprime os fundos em branco e a escala perde as
       cores das folgas, o verde do domingo e o roxo do feriado. */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    body { background: #fff; }

    .topo,
    .filtros,
    .linha-filtros,
    .barra-grade,
    .cabecalho-pagina,
    .alerta,
    .painel-trocas,
    .barra-troca,
    .janela,
    .menu-celula,
    .aviso-flutuante,
    .paginacao,
    .rodape,
    .regras-operador,
    [data-imprimir],
    [data-pedir-troca] { display: none !important; }

    .cabecalho-impressao {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 16px;
        font-size: 11px;
        border-bottom: 1px solid #94a3b8;
        padding-bottom: 4px;
        margin-bottom: 8px;
    }
    .cabecalho-impressao strong { font-size: 13px; }

    .conteudo { max-width: none; padding: 0; margin: 0; }

    .cartao {
        border: 0;
        box-shadow: none;
        padding: 0;
        margin: 0 0 10px;
        border-radius: 0;
    }

    /* A rolagem lateral é recurso de tela: no papel a tabela precisa poder
       se estender à vontade, senão o navegador corta no limite da caixa. */
    .tabela-rolagem { overflow: visible !important; }

    /* Colunas grudadas viram colunas comuns — sticky no papel duplica ou
       some, dependendo do navegador. */
    table.escala .col-bloco,
    table.escala .col-posicao,
    table.escala .col-nome,
    table.escala .col-saldo,
    table.escala .col-preferencia,
    table.escala thead th { position: static !important; }

    table.escala { font-size: 8.5px; width: 100%; }
    table.escala th,
    table.escala td { padding: 1px 2px; }
    table.escala th.dia { width: auto; min-width: 0; }
    table.escala td.col-nome .pega { display: none; }

    /* Um turno por vez, sem quebrar linha no meio.
       O content-visibility da tela precisa sair aqui: no papel não existe
       "fora da vista", e sem isto o turno que não estava na tela sairia em
       branco na impressão. */
    .secao-turno {
        content-visibility: visible;
        contain-intrinsic-size: none;
        break-inside: avoid;
        page-break-inside: avoid;
    }
    table.escala tr { break-inside: avoid; page-break-inside: avoid; }
    table.escala thead { display: table-header-group; }

    .titulo-turno { font-size: 12px; margin: 0 0 4px; }
    .legenda-turno { font-size: 8.5px; }

    /* O realce da própria linha é orientação de tela e no papel só suja. */
    table.escala td.col-nome.meu-nome { background: #fff !important; }
    table.escala td.celula.minha-linha { box-shadow: none !important; }
}

/* --------------------- Ordenar clicando na coluna ---------------------
   Vale para qualquer tabela marcada com "ordenavel". A seta apagada diz
   "dá para clicar aqui"; cheia, diz por onde a lista está ordenada. */
table.ordenavel thead th.ordenavel {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
table.ordenavel thead th.ordenavel:hover { background: #eef4ff; color: var(--cor-primaria); }
table.ordenavel thead th.ordenavel::after { content: ' \2195'; opacity: .3; font-weight: 400; }
table.ordenavel thead th.ordenavel.subindo::after  { content: ' \25B2'; opacity: 1; color: var(--cor-primaria); }
table.ordenavel thead th.ordenavel.descendo::after { content: ' \25BC'; opacity: 1; color: var(--cor-primaria); }

/* Campo de busca esperando o recarregamento: um pulso discreto, para a
   pessoa saber que a digitação foi ouvida. */
table.com-filtros .linha-filtros input.buscando {
    background-image: linear-gradient(90deg, transparent, rgba(29,78,216,.18), transparent);
    background-size: 60% 100%;
    background-repeat: no-repeat;
    animation: buscando 0.8s linear infinite;
}
@keyframes buscando {
    from { background-position: -60% 0; }
    to   { background-position: 160% 0; }
}

/* Bloco que não vai rodiziar por falta de linha em alguma vaga. A prévia à
   direita mostra o rodízio; esta marca avisa que o GERAR não vai aplicá-lo
   aqui enquanto a linha faltar. */
table.escala.padrao .marca-sem-rodizio {
    display: inline-block;
    margin-top: 3px;
    padding: 0 6px;
    border-radius: 9px;
    background: var(--cor-alerta-fundo);
    color: #78350f;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
}

/* Última coluna da escala: o saldo a compensar de cada um.

   Grudada na direita, do mesmo jeito que bloco/posição/nome ficam grudados
   na esquerda. A grade rola muitos dias na horizontal, e um número que só
   aparece no fim da rolagem não serve para conferir a escala. */
table.escala .col-saldo {
    width: 52px;
    min-width: 52px;
    position: sticky;
    right: 0;
    z-index: 3;
    text-align: center;
    font-weight: 700;
    font-size: 12px;
    background: #f8fafc;
    border-left: 2px solid var(--cor-borda);
}
table.escala thead .col-saldo { z-index: 4; font-size: 9px; line-height: 1.15; }
table.escala .col-saldo-sub { font-weight: 400; opacity: .8; }

/* ---------------------------------------------------------------
   A PREFERÊNCIA DE FOLGA EXTRA (V / G / T).

   Fica grudada na ponta direita, e o SALDO cede o lugar dela — daí a
   classe "com-preferencia" na tabela: sem ela as duas disputariam o
   right:0 e uma cobriria a outra. A classe só existe quando a coluna
   existe, então quem não a enxerga tem o saldo na ponta, como antes.
   --------------------------------------------------------------- */
table.escala .col-preferencia {
    width: 34px;
    min-width: 34px;
    position: sticky;
    right: 0;
    z-index: 3;
    text-align: center;
    font-weight: 700;
    font-size: 12px;
    background: #f8fafc;
    border-left: 1px solid var(--cor-borda);
}
table.escala.com-preferencia .col-saldo { right: 34px; }
table.escala thead .col-preferencia { z-index: 4; font-size: 9px; line-height: 1.15; }

/* Cada resposta tem a sua cor, para a coluna ser lida de relance numa grade
   de oitenta linhas. Quem não respondeu fica em branco — e o branco aqui é
   informação, não falta de dado: é a lista de quem ainda precisa responder. */
table.escala .col-preferencia.pref-v { color: #92400e; background: #fffbeb; }
table.escala .col-preferencia.pref-g { color: #1f6f43; background: #ecfdf5; }
table.escala .col-preferencia.pref-t { color: #475569; background: #f1f5f9; }
table.escala .col-preferencia.pref-vazia { background: #fbfcfe; }

/* Positivo é dia que a empresa deve — e é o que libera a FE. Negativo é
   quem já tirou a mais. O zero fica apagado de propósito: quem está em dia
   não precisa chamar atenção. */
/* A SETA: até que dia o saldo da última coluna está contado.

   Nasce em hoje. Arrasta para a direita para projetar; para trás não passa
   de hoje. A coluna inteira ganha uma linha vertical, para o olho descer do
   dia até a linha da pessoa sem se perder no meio de trinta e cinco colunas. */
/* A faixa fica ACIMA da grade, fora da área que rola. O JS alinha a seta com
   a coluna do dia e estica o fio até a coluna do saldo. */
.faixa-seta {
    position: relative;
    height: 20px;
    margin: 0 0 2px;
    overflow: hidden;
}
.faixa-seta .seta-marca {
    position: absolute;
    bottom: -3px;
    transform: translateX(-50%);
    font-size: 19px;
    line-height: 1;
    color: #111827;
    /* O traço do glifo é fino demais no tamanho que cabe aqui. O contorno
       engrossa sem precisar de imagem nem de SVG. */
    -webkit-text-stroke: 0.6px #111827;
    cursor: grab;
    user-select: none;
    touch-action: none;
    z-index: 2;
}
.faixa-seta .seta-marca:active { cursor: grabbing; }

/* Verde ao passar o mouse NA SETA — e o fio junto, para ficar claro que os
   dois são a mesma peça: o dia lá em cima manda no número lá na ponta.
   O fio acende pelo seletor de irmão, e é por isso que a marca vem antes
   dele no HTML. */
.faixa-seta .seta-marca:hover {
    color: #1f6f43;
    -webkit-text-stroke-color: #1f6f43;
}
.faixa-seta .seta-marca:hover ~ .seta-fio {
    background: #1f6f43;
    opacity: .9;
    height: 2px;
}
.faixa-seta .seta-marca:hover ~ .seta-ponta {
    color: #1f6f43;
    -webkit-text-stroke-color: #1f6f43;
}

/* A ponta do fio: a mesma seta, do outro lado, apontando para a coluna do
   saldo. É marca, não controle — a coluna do saldo é fixa e não teria para
   onde ser arrastada. Sem pointer-events ela não vira alvo de mouse, então
   não convida a um arrasto que não existe e não rouba o hover do fio. */
.faixa-seta .seta-ponta {
    cursor: default;
    pointer-events: none;
}
/* Coluna rolada para fora: a seta encosta na borda e avisa que não está
   sobre o dia dela. */
.faixa-seta .seta-marca.presa-na-borda { opacity: .35; }

/* O fio que liga a seta à coluna do saldo. Fino de propósito: é uma pista,
   não um elemento da escala. */
.faixa-seta .seta-fio {
    position: absolute;
    bottom: 5px;
    height: 1px;
    background: #111827;
    opacity: .55;
}
/* A faixa precisa deixar o fio chegar na coluna do saldo, que fica na borda
   direita. Com overflow escondido ele era cortado antes. */
.faixa-seta { overflow: visible; }

table.escala th.dia { cursor: pointer; }

table.escala th.dia.na-seta {
    background: #fff;
    color: var(--cor-texto);
    box-shadow: inset 1px 0 0 #111827, inset -1px 0 0 #111827;
}

/* Domingo e feriado escrevem em BRANCO sobre o fundo colorido. Debaixo da
   seta, que clareia o fundo, a letra sumia junto — o dia ficava em branco
   no branco. Aqui a cor troca de lugar: sai do fundo e vai para a letra.
   O dia volta a ser legível e continua reconhecível de longe, porque é a
   mesma cor de sempre, só que escrita em vez de pintada. */
table.escala th.dia.domingo.na-seta         { color: #007a00; }
table.escala th.dia.feriado.na-seta         { color: #6d28d9; }
table.escala th.dia.domingo.feriado.na-seta { color: #4c1d95; }
table.escala td.celula[data-na-seta] {
    box-shadow: inset 1px 0 0 rgba(17, 24, 39, .55), inset -1px 0 0 rgba(17, 24, 39, .55);
}

table.escala .col-saldo.positivo { color: #1f6f43; background: #ecfdf5; }
table.escala .col-saldo.negativo { color: var(--cor-erro); background: #fef2f2; }
table.escala .col-saldo.zerado   { color: #b6bfcc; }
table.escala .col-saldo.vazio    { background: #fbfcfe; }
/* A coluna do saldo acompanha a linha grossa do rodapé em vez de furá-la.
   Ela tinha 1px enquanto o resto tinha 3px, e como é a última coluna o
   traço parecia interrompido bem na ponta direita. */
table.escala tfoot tr:first-child > .col-saldo.soma-saldo { border-top: 3px solid #64748b; }
table.escala tfoot tr + tr > .col-saldo.soma-saldo { border-top: 1px solid var(--cor-borda); }

/* O número é a porta do extrato. Herda a cor do saldo em vez do azul de
   link, senão o verde do positivo e o vermelho do negativo se perdem — que
   é justamente o que se lê de relance. O sublinhado só no passar do mouse
   diz que dá para clicar, sem sujar a coluna inteira. */
table.escala .col-saldo .link-saldo {
    color: inherit;
    text-decoration: none;
    display: block;
    cursor: pointer;
}
table.escala .col-saldo .link-saldo:hover,
table.escala .col-saldo .link-saldo:focus-visible {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* O nome dentro dos avisos de equipe vira atalho para a linha na grade.
   É um <button> e não um <a>: não navega para lugar nenhum, só rola a tela —
   um link com href falso quebraria o "abrir em nova aba" sem avisar. */
.alerta .ir-para-pessoa {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 700;
    color: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-style: dotted;
}
.alerta .ir-para-pessoa:hover { text-decoration-style: solid; }

/* A piscada de quem foi procurado pelo aviso.

   Some sozinha em 4 segundos, e a qualquer clique fora. Um destaque que
   ficasse ali viraria ruído na conferência seguinte — e, pior, se confundiria
   com as marcas que significam alguma coisa na escala (domingo, feriado,
   semana sem folga). */
@keyframes piscar-nome {
    0%, 100% { background: var(--cor-alerta-fundo); }
    50%      { background: #fde68a; }
}
table.escala td.col-nome.piscando {
    animation: piscar-nome .7s ease-in-out 0s 5;
    box-shadow: inset 0 0 0 2px #f59e0b;
    font-weight: 700;
}
table.escala tr.piscando-linha > td { background: #fffbeb; }

/* Linha de uma vaga que não tem ninguém.

   Ela continua editável de propósito: é justamente esta linha que o próximo
   contratado vai herdar, e completá-la é o que faz o bloco voltar a rodiziar.
   O que faltava era dizer que ali não tem dono — mexer numa vaga aberta é
   uma decisão diferente de mexer na folga de alguém.

   Marca discreta: quem edita precisa enxergar as caixas de seleção, não uma
   faixa colorida. O fundo só esmaece a linha; o selo fica na coluna da vaga. */
table.escala.padrao tr.linha-sem-gente > td { background: #fbfcfe; }
table.escala.padrao tr.linha-sem-gente .col-posicao { color: #94a3b8; }
table.escala.padrao .marca-sem-gente {
    display: block;
    margin-top: 2px;
    font-size: 8.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: #94a3b8;
}

/* Cartão que abre e fecha, para bloco de auditoria que não é o assunto da
   tela — o histórico de trocas de senha, por exemplo. Nasce fechado.
   <details> em vez de JS: funciona sem script, o navegador cuida do estado
   e o teclado já navega nele. */
.cartao-recolhivel > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px;
    user-select: none;
}
.cartao-recolhivel > summary::-webkit-details-marker { display: none; }
.cartao-recolhivel > summary::before {
    content: "\25B8";
    color: var(--cor-texto-suave);
    font-size: 13px;
    transition: transform .15s;
}
.cartao-recolhivel[open] > summary::before { transform: rotate(90deg); }
.cartao-recolhivel > summary:hover .titulo-recolhivel { color: var(--cor-primaria); }
.cartao-recolhivel .titulo-recolhivel {
    font-size: 16px;
    font-weight: 600;
    color: var(--cor-texto);
}

/* ================= O que o operador precisa achar rápido =================
   Três coisas, todas sobre orientação: onde estou eu, onde é hoje, e quando
   é a minha próxima folga. Numa grade de trinta e cinco colunas por dez
   linhas, achar isso era o primeiro custo de toda leitura. */

/* 1) A PRÓXIMA FOLGA, escrita. É a pergunta que faz alguém abrir a tela. */
.minha-proxima-folga {
    margin: 0 0 12px;
    padding: 9px 14px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-left: 4px solid #1f6f43;
    border-radius: 7px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13.5px;
    color: #14532d;
}
.minha-proxima-folga .rotulo {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #1f6f43;
    opacity: .85;
}
.minha-proxima-folga strong { font-size: 15px; }
.minha-proxima-folga .daqui { font-weight: 600; }
.minha-proxima-folga .seguinte { opacity: .75; }

/* 2) A COLUNA DE HOJE. O passado já fica esmaecido, o que dá uma borda
   implícita — mas nada dizia "é aqui". Fundo suave na coluna inteira e o
   cabeçalho marcado, sem competir com o verde do domingo nem com o roxo do
   feriado, que significam outra coisa. */
table.escala th.dia.col-hoje {
    box-shadow: inset 0 3px 0 #1e3a8a;
}
table.escala td.celula.col-hoje {
    background-image: linear-gradient(rgba(30, 58, 138, .07), rgba(30, 58, 138, .07));
}

/* 3) A MINHA LINHA. Era um risco de 2px embaixo da célula: num bloco de dez
   pessoas com sobrenomes parecidos, isso não acha ninguém. A linha inteira
   ganha fundo e o nome fica em negrito — o olho vai direto. */
table.escala tr.sou-eu > td {
    background-image: linear-gradient(rgba(37, 99, 235, .09), rgba(37, 99, 235, .09));
}
table.escala tr.sou-eu td.col-nome a { font-weight: 700; color: var(--cor-primaria-escura); }
table.escala tr.sou-eu td.col-nome {
    box-shadow: inset 3px 0 0 var(--cor-primaria);
}

/* O botão de copiar a escala de alguém, na célula do nome. Some até o mouse
   passar na linha: são oitenta e oito linhas, e um ícone fixo em cada uma
   viraria ruído. Fica sempre visível na própria linha, que é a que mais
   interessa copiar. */
.copiar-escala {
    border: 0;
    background: none;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 4px;
    opacity: 0;
    transition: opacity .12s;
}
table.escala tr:hover .copiar-escala,
table.escala tr.sou-eu .copiar-escala,
.copiar-escala:focus-visible { opacity: .65; }
.copiar-escala:hover { opacity: 1; background: #e8eefc; }
.copiar-escala.copiou { opacity: 1; color: #1f6f43; }
.copiar-escala.falhou { opacity: 1; color: var(--cor-erro); }

/* Na impressão nada disso serve: papel não tem hoje nem mouse. */
@media print {
    .copiar-escala { display: none !important; }
    table.escala td.celula.col-hoje,
    table.escala tr.sou-eu > td { background-image: none !important; }
}

/* A mesma barra, quando NAO ha folga a frente. Cinza em vez de verde: nao e
   boa noticia, e informacao — e some o "nao aparece nada", que era lido como
   defeito. */
.minha-proxima-folga.sem-folga {
    background: var(--cor-fundo);
    border-color: var(--cor-borda);
    border-left-color: #94a3b8;
    color: var(--cor-texto);
}
.minha-proxima-folga.sem-folga .rotulo { color: var(--cor-texto-suave); }
.minha-proxima-folga.sem-folga .daqui { font-weight: 400; color: var(--cor-texto-suave); }

/* Marcador que fica solto numa linha, fora de uma caixa de marcadores —
   uma chave de leitura, e nao um filtro. */
.marcador-solto {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--cor-texto);
    cursor: pointer;
}
.marcador-solto input { width: auto; margin: 0; }
/* ---------------------------------------------------------------------
   Tarja de ambiente
   ---------------------------------------------------------------------
   Só aparece quando ESCALA_AMBIENTE está definida — ou seja, nunca em
   produção. A cópia de teste tem a mesma tela, os mesmos nomes e os mesmos
   dados da produção; sem um aviso impossível de ignorar, alguém acaba
   lançando folga na cópia errada e ninguém descobre no mesmo dia.

   Fica no fluxo da página (não é fixa) para empurrar o cabeçalho para
   baixo em vez de cobri-lo. Na impressão some: papel não tem ambiente. */
.tarja-ambiente {
    background: repeating-linear-gradient(-45deg, #b45309, #b45309 12px, #92400e 12px, #92400e 24px);
    color: #fff;
    font-weight: 700;
    text-align: center;
    padding: 7px 12px;
    font-size: 13px;
    letter-spacing: .3px;
    line-height: 1.4;
}
.tarja-ambiente strong { text-decoration: underline; }

@media print {
    .tarja-ambiente { display: none; }
}

/* ---------------------------------------------------------------
   ABAS DO HISTÓRICO

   São links, e não botões com JavaScript: cada aba tem endereço
   próprio, entra no favorito e o botão de voltar do navegador
   funciona. Numa tela de auditoria isso importa — quem achou uma
   conversa precisa conseguir mandar o endereço dela para alguém.
   --------------------------------------------------------------- */
.abas-historico {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin: 0 0 16px;
    border-bottom: 2px solid var(--cor-borda);
}
.abas-historico .aba {
    padding: 9px 16px;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    margin-bottom: -2px;
    color: var(--cor-texto-suave);
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}
.abas-historico .aba:hover { background: #f1f5f9; color: var(--cor-texto); }

/* A ativa "encosta" no conteúdo: a borda de baixo dela some contra o fundo
   branco, que é o que faz a aba parecer a frente da pasta e não mais um
   botão aceso. */
.abas-historico .aba-ativa,
.abas-historico .aba-ativa:hover {
    background: #fff;
    color: var(--cor-primaria);
    font-weight: 600;
    border-color: var(--cor-borda);
    border-bottom: 2px solid #fff;
}

/* O texto da mensagem na auditoria. Quebra em várias linhas — recado é frase,
   não campo de tabela — mas com um teto, para uma mensagem longa não empurrar
   as outras colunas para fora da tela. */
.tabela .celula-mensagem {
    white-space: pre-wrap;
    word-break: break-word;
    max-width: 520px;
    line-height: 1.4;
}

/* ---------------------------------------------------------------
   A MIRA: a linha e a coluna sob o cursor.

   Numa grade de oitenta linhas por trinta e cinco colunas, achar o
   cruzamento "esta pessoa × este dia" é o esforço maior de ler a
   escala — e é de onde vem o clique na linha errada.

   O realce é um véu por cima, e não uma cor de fundo: as células já
   carregam a cor da folga, e trocar o fundo apagaria justamente a
   informação que a pessoa foi conferir.

   A COLUNA não tem seletor em CSS. Em vez de marcar as oitenta
   células com uma classe a cada movimento do mouse, o JS escreve UM
   atributo na tabela e o navegador resolve o resto — é uma escrita
   por movimento em vez de oitenta.
   --------------------------------------------------------------- */
table.escala tbody tr:hover > td { box-shadow: inset 0 0 0 999px rgba(37, 99, 235, .07); }

table.escala[data-dia-sob-o-cursor] tbody td.celula.na-mira,
table.escala[data-dia-sob-o-cursor] thead th.na-mira {
    box-shadow: inset 0 0 0 999px rgba(37, 99, 235, .07);
}

/* O cruzamento das duas recebe as duas camadas e fica mais forte que cada
   uma — é ele que o olho procura. */
table.escala tbody tr:hover > td.celula.na-mira {
    box-shadow: inset 0 0 0 999px rgba(37, 99, 235, .16);
}

/* O cabeçalho do dia na mira ganha contorno: ele é clicável (copia a lista
   de quem folga ou trabalha), e sem isso ninguém descobre que é. */
table.escala thead th.dia.na-mira {
    outline: 2px solid var(--cor-primaria);
    outline-offset: -2px;
    cursor: pointer;
}

/* O véu do dia passado já usa box-shadow e venceria a mira, porque vem
   depois. Aqui ele é reforçado para os dois aparecerem: cinza do passado
   por baixo, azul da mira reconhecível por cima. */
table.escala tbody tr:hover > td.celula.dia-passado.na-mira {
    box-shadow: inset 0 0 0 999px rgba(71, 85, 105, .26);
}

/* O menu do cabeçalho do dia. Herda a caixa do menu de célula e só acrescenta
   o título e a contagem — são o mesmo objeto para quem olha, e devem ser o
   mesmo objeto no CSS. */
.menu-dia { min-width: 232px; }
.menu-dia-titulo {
    margin: 0;
    padding: 7px 10px 8px;
    border-bottom: 1px solid var(--cor-borda);
    color: var(--cor-texto-suave);
    font-size: 12px;
}
.menu-dia button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
/* A contagem antecipa o tamanho da lista: quem vê "0" não precisa copiar
   para descobrir que não há ninguém. */
.menu-dia button em {
    flex-shrink: 0;
    padding: 1px 7px;
    border-radius: 999px;
    background: #eef2f7;
    color: var(--cor-texto-suave);
    font-style: normal;
    font-size: 11.5px;
    font-weight: 700;
}

/* ---------------------------------------------------------------
   O PRESENTE DO ANIVERSÁRIO.

   É um enfeite, e só. Não substitui o que está escrito na célula, não
   é uma folga e não entra em conta nenhuma: T continua T, FP continua
   FP, férias continuam férias. Quem soma a ocupação do dia e quem
   calcula o saldo leem o banco, não esta marca.

   Por isso ele vai num ::after posicionado no canto, e não no texto
   da célula: escrevê-lo dentro empurraria a legenda — que é o que a
   pessoa foi ler — e num dia de férias disputaria espaço com o 🏖️.

   Fica no canto SUPERIOR ESQUERDO porque a legenda é centralizada e o
   canto direito já é onde o olho procura a próxima coluna.
   --------------------------------------------------------------- */
table.escala td.celula[data-aniversario] { position: relative; }
table.escala td.celula[data-aniversario]::after {
    /* Era um bolo, e em 9px o bolo virava uma mancha marrom sem forma
       reconhecível — a equipe achou parecido com outra coisa. O presente
       tem silhueta quadrada com o laço no topo, que ainda se lê pequeno. */
    content: '🎁';
    position: absolute;
    top: -1px;
    left: 1px;
    font-size: 9px;
    line-height: 1;
    pointer-events: none;   /* nunca rouba o clique da célula */
}

/* Na impressão o emoji sai borrado e gasta tinta à toa; o dia continua
   legível sem ele. */
@media print {
    table.escala td.celula[data-aniversario]::after { content: none; }
}

/* ---------------------------------------------------------------
   O GRÁFICO DA PREFERÊNCIA DE FOLGA EXTRA, no painel.

   Barras horizontais em HTML puro: três números não pedem biblioteca
   de gráfico, e barra deitada deixa o rótulo e o número na mesma
   linha que ela — o olho não pula do eixo para a legenda.
   --------------------------------------------------------------- */
.grafico-preferencia { display: flex; flex-direction: column; gap: 10px; }

/* A mesma letra da coluna FE da escala e da tela do saldo. O desenho é
   repetido aqui porque o do saldo vive em saldo.css, que o painel não
   carrega — e carregar uma folha inteira por causa de um quadradinho
   custaria mais do que estas seis linhas. */
.grafico-preferencia .sigla-preferencia {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    color: #fff;
    font-weight: 700;
    font-size: 12px;
}
.linha-preferencia { display: flex; align-items: center; gap: 12px; }
.rotulo-preferencia {
    flex-shrink: 0;
    width: 128px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 500;
}
.trilho-preferencia {
    flex: 1;
    height: 18px;
    background: #f1f5f9;
    border-radius: 999px;
    overflow: hidden;
}
.barra-preferencia { display: block; height: 100%; border-radius: 999px; }
.numero-preferencia { flex-shrink: 0; width: 92px; text-align: right; font-size: 13px; }