/* =========================================================================
   Estilo das telas administrativas (login, upload, dashboard).
   Antes cada pagina carregava sua propria copia deste CSS; agora e um arquivo
   so. Os valores vivem nos tokens do :root — mexa la para mudar o visual em
   todas as telas de uma vez, em vez de cacar hexadecimais soltos.
   ========================================================================= */

:root {
    /* ---- marca ---- */
    --cor-primaria: #008ec1;
    --cor-primaria-escura: #07587a;
    --gradiente-acao: linear-gradient(120deg, var(--cor-primaria) 0%, var(--cor-primaria-escura) 100%);

    /* degrade do fundo, o mesmo do portal (body.page-degrade do template-03) */
    --gradiente-fundo:
        radial-gradient(ellipse at 12% 46%, #36ffe7 0%, #31cce8 18%, transparent 45%),
        radial-gradient(ellipse at 28% 58%, #008ec1 0%, #07587a 28%, transparent 60%),
        radial-gradient(ellipse at 53% 100%, #382072 0%, transparent 48%),
        radial-gradient(ellipse at 45% 0%, #8b4ac5 0%, transparent 30%),
        linear-gradient(120deg, #1d2a75 0%, #063e55 38%, #15052b 100%);

    /* ---- texto ---- */
    --texto: #1d1d1f;
    --texto-medio: #5b6670;
    --texto-suave: #7b8794;
    --texto-fraco: #9aa3ab;
    --texto-apagado: #c7ccd1;
    --texto-invertido: #fff;
    --texto-sobre-fundo: rgba(255, 255, 255, 0.75);

    /* ---- superficies ---- */
    --superficie: #fff;
    --superficie-cartao: rgba(255, 255, 255, 0.95);
    --superficie-suave: #f7fafc;
    --superficie-cabecalho: #f1f6f9;

    /* ---- bordas ---- */
    --borda: #dfe5ea;
    --borda-suave: #e8ecf0;
    --borda-linha: #f1f3f5;
    --borda-tracejada: #dde3e8;

    /* ---- estados ---- */
    --sucesso: #137333;
    --sucesso-fundo: #e6f4ea;
    --erro: #c5221f;
    --erro-fundo: #fce8e6;
    --aviso: #b06000;
    --aviso-fundo: #fef7e0;
    --info: #1967d2;
    --info-fundo: #e8f0fe;
    --neutro-fundo: #eef1f4;
    --perigo: #d03b3b;
    --ativo: #0ca30c;

    /* ---- forma ---- */
    --raio-p: 10px;
    --raio-m: 12px;
    --raio-g: 14px;
    --raio-gg: 16px;
    --raio-cartao: 24px;
    --raio-pilula: 999px;

    --sombra-cartao: 0 20px 60px rgba(0, 0, 0, 0.1);
    --sombra-cartao-forte: 0 20px 60px rgba(0, 0, 0, 0.18);

    /* ---- tipografia ---- */
    --fonte: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    --fonte-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
    --fonte-rotulo: 0.72rem;   /* rotulos em caixa alta */
    --fonte-apoio: 0.82rem;    /* textos de apoio, status */
    --fonte-campo: 0.9rem;     /* inputs, selects, tabela */

    /* ---- espacamento ---- */
    --gap: 14px;
    --campo-padding: 0.65rem 0.85rem;
}

/* =========================== base =========================== */

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { width: 100%; overflow-x: hidden; }

body {
    font-family: var(--fonte);
    font-size: 16px;
    line-height: 1.5;
    color: var(--texto);
    min-height: 100vh;
    background: var(--gradiente-fundo);
    background-attachment: fixed;
}

/* Telas de uma coisa so (login): conteudo centralizado na viewport. */
body.tela-centro {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
}

/* =========================== layout =========================== */

.page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 48px 16px;
}

.page__head {
    display: flex;
    align-items: center;
    gap: var(--gap);
}

.page__logo {
    height: 44px;
    width: auto;
    display: block;
    flex-shrink: 0;
}

.page__title {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--texto-invertido);
    letter-spacing: -0.01em;
}

.page__subtitle {
    color: var(--texto-sobre-fundo);
    font-size: 0.92rem;
    font-weight: 500;
    margin: 6px 0 24px;
}

/* =========================== cartao =========================== */

.card {
    background: var(--superficie-cartao);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--raio-cartao);
    box-shadow: var(--sombra-cartao);
    padding: 2rem;
}

/* Cartao unico e estreito, usado como formulario (tela de login). */
.card--estreito {
    width: 100%;
    max-width: 380px;
    box-shadow: var(--sombra-cartao-forte);
}

.card--estreito .field { margin-bottom: 1rem; }
.card--estreito .btn { width: 100%; margin-top: 0.5rem; }

.card__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 1.5rem;
    text-align: center;
}

.card__logo { height: 42px; width: auto; display: block; }

.card__title {
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.card__subtitle {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--texto-suave);
}

/* =========================== navegacao =========================== */

/* Abas do topo: alternam entre as areas (inicio / colaboradores). */
.nav-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.nav-tabs__item {
    font-size: var(--fonte-apoio);
    font-weight: 700;
    color: var(--texto-sobre-fundo);
    text-decoration: none;
    padding: 0.5rem 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--raio-pilula);
    backdrop-filter: blur(6px);
    transition: background 0.2s, color 0.2s;
}

.nav-tabs__item:hover { background: rgba(255, 255, 255, 0.14); color: var(--texto-invertido); }

.nav-tabs__item.is-active {
    background: var(--superficie);
    border-color: transparent;
    color: var(--cor-primaria-escura);
}

/* =========================== opcoes (menu) =========================== */

.opcoes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--gap);
}

/* Cartao clicavel do menu. Vale para <a> (abre outra tela) e para <button>
   (abre um modal), entao zera o que cada um traz de padrao: sublinhado do link,
   fonte e alinhamento central do botao. */
.opcao {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    padding: 1.75rem 1.5rem;
    background: var(--superficie-cartao);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--raio-cartao);
    box-shadow: var(--sombra-cartao);
    color: var(--texto);
    font-family: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.25s, box-shadow 0.25s;
}

.opcao:hover { transform: translateY(-3px); box-shadow: var(--sombra-cartao-forte); }
.opcao:focus-visible { outline: 3px solid var(--cor-primaria); outline-offset: 3px; }

.opcao__titulo {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.opcao__descricao {
    font-size: var(--fonte-apoio);
    font-weight: 500;
    color: var(--texto-suave);
}

/* =========================== modal =========================== */

.modal {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
}

.modal.is-open { display: flex; }

.modal__fundo {
    position: absolute;
    inset: 0;
    background: rgba(10, 12, 30, 0.6);
    backdrop-filter: blur(3px);
}

.modal__janela {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: 85vh;
    overflow-y: auto;
    background: var(--superficie);
    border-radius: var(--raio-cartao);
    box-shadow: var(--sombra-cartao-forte);
    padding: 1.75rem;
}

.modal__topo {
    display: flex;
    align-items: flex-start;
    gap: var(--gap);
    margin-bottom: 1.25rem;
}

.modal__titulo {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.modal__descricao {
    font-size: var(--fonte-apoio);
    font-weight: 500;
    color: var(--texto-suave);
    margin-top: 2px;
}

/* Botao de fechar: alvo generoso, sem peso visual. */
.modal__fechar {
    margin-left: auto;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--texto-suave);
    background: none;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.modal__fechar:hover { background: var(--neutro-fundo); color: var(--texto); }

.modal__acoes { display: flex; gap: 10px; margin-top: 1rem; }
.modal__acoes--fim { justify-content: flex-end; border-top: 1px solid var(--borda-suave); padding-top: 1rem; }

/* Formulario de duas colunas que vira uma so em tela estreita. */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.form-grid .field--largo { grid-column: 1 / -1; }

.rotulo-opcional {
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--texto-fraco);
}

/* Acao secundaria dentro do modal: presente, sem competir com o envio. */
.btn--secundario {
    background: none;
    border: 1px solid var(--cor-primaria);
    color: var(--cor-primaria-escura);
}

.btn--secundario:hover:not(:disabled) { background: rgba(0, 142, 193, 0.08); filter: none; }

/* Acao de escape (descartar, cancelar): presente para quem procura, discreta
   para nao competir com o que a tela quer que a pessoa faca. */
.btn--texto {
    background: none;
    border: 0;
    color: var(--texto-suave);
    font-weight: 600;
    padding: 0.7rem 0.9rem;
}

.btn--texto:hover:not(:disabled) {
    background: var(--neutro-fundo);
    color: var(--texto);
    filter: none;
    transform: none;
}

/* Fila de funcionarios a enviar. */
.fila { display: flex; flex-direction: column; gap: 8px; margin-top: 1rem; }

.fila__titulo {
    font-size: var(--fonte-rotulo);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--texto-suave);
}

.fila__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--borda-suave);
    border-radius: var(--raio-m);
    font-size: var(--fonte-apoio);
}

.fila__nome { font-weight: 700; color: var(--texto); }
.fila__dado { color: var(--texto-suave); }

.fila__remover {
    margin-left: auto;
    flex-shrink: 0;
    background: none;
    border: 0;
    color: var(--texto-suave);
    font-size: 1.2rem;
    line-height: 1;
    padding: 4px 8px;
    border-radius: var(--raio-p);
    cursor: pointer;
}

.fila__remover:hover { background: var(--erro-fundo); color: var(--erro); }

/* Mensagem de erro sob um campo invalido. */
.campo-erro {
    font-size: var(--fonte-rotulo);
    font-weight: 600;
    color: var(--erro);
}
.campo-erro:empty { display: none; }

.field input.invalido, .field select.invalido { border-color: var(--erro); }

/* =========================== blocos do upload =========================== */

#bloco-corrigir[hidden], #bloco-prontos[hidden] { display: none; }

.bloco__titulo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 1.5rem 0 0.25rem;
}

/* Cor so reforca o simbolo — o texto do titulo ja diz o que e. */
.bloco__titulo--corrigir { color: var(--aviso); }
.bloco__titulo--corrigir::before { content: '!'; font-weight: 900; }
.bloco__titulo--prontos { color: var(--sucesso); }
.bloco__titulo--prontos::before { content: '✓'; }

.bloco__ajuda {
    font-size: var(--fonte-apoio);
    color: var(--texto-suave);
    margin-bottom: 0.75rem;
}

.cartoes { display: flex; flex-direction: column; gap: 12px; }

/* Cartao editavel de quem precisa de correcao. */
.cartao-edit {
    border: 1px solid var(--aviso);
    border-left: 3px solid var(--aviso);
    border-radius: var(--raio-m);
    background: var(--aviso-fundo);
    padding: 1rem 1.1rem;
}

.cartao-edit__topo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0.75rem;
}

.cartao-edit__nome { font-weight: 800; color: var(--texto); }

.cartao-edit .form-grid { background: none; }

/* Dentro do cartao os campos ficam sobre o fundo âmbar; branco os destaca. */
.cartao-edit .field input,
.cartao-edit .field select { background: var(--superficie); }

.cartao-edit__acoes { display: flex; justify-content: flex-end; margin-top: 0.75rem; }

/* Linha compacta de quem esta pronto. */
.fila__acoes { margin-left: auto; display: flex; align-items: center; gap: 4px; }

.fila__link {
    background: none;
    border: 0;
    color: var(--cor-primaria-escura);
    font-family: inherit;
    font-size: var(--fonte-apoio);
    font-weight: 600;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--raio-p);
}
.fila__link:hover { background: var(--superficie-suave); }

/* Marca de resultado do envio na linha do pronto. */
.st-mini { font-weight: 700; }
.st-mini--ok { color: var(--sucesso); }
.st-mini--duplicado { color: var(--aviso); }
.st-mini--erro { color: var(--erro); }

#enviar[hidden] { display: none; }

/* =========================== campos =========================== */

.controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gap);
    margin-bottom: 1.5rem;
}

/* Faixa de configuracao no topo de uma tela de trabalho. */
.settings {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
    padding: 1rem;
    margin-bottom: 1.5rem;
    background: var(--superficie-suave);
    border: 1px solid var(--borda-suave);
    border-radius: var(--raio-gg);
}

.field { display: flex; flex-direction: column; gap: 5px; }

/* Dentro da faixa de configuracao os campos dividem a linha. */
.settings .field { flex: 1 1 240px; }

.field label {
    font-size: var(--fonte-rotulo);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--texto-suave);
}

.field input,
.field select {
    font-family: inherit;
    font-size: var(--fonte-campo);
    padding: var(--campo-padding);
    border: 1px solid var(--borda);
    border-radius: var(--raio-m);
    background: var(--superficie);
    color: var(--texto);
    transition: border-color 0.2s;
}

.field select { font-weight: 600; cursor: pointer; }

.field input:focus,
.field select:focus { outline: none; border-color: var(--cor-primaria); }

.field small { font-size: var(--fonte-rotulo); color: var(--texto-fraco); }

input[type="file"] {
    font-family: inherit;
    font-size: var(--fonte-campo);
    color: #6b7280;
}

input[type="file"]::file-selector-button {
    font-family: inherit;
    font-size: var(--fonte-campo);
    font-weight: 700;
    color: var(--texto-invertido);
    background: var(--gradiente-acao);
    border: 0;
    border-radius: var(--raio-g);
    padding: 0.7rem 1.2rem;
    margin-right: 12px;
    cursor: pointer;
    transition: filter 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

input[type="file"]::file-selector-button:hover {
    filter: brightness(1.12);
    transform: translateY(-1px);
}

/* =========================== botao =========================== */

.btn {
    font-family: inherit;
    font-size: var(--fonte-campo);
    font-weight: 700;
    color: var(--texto-invertido);
    background: var(--gradiente-acao);
    border: 0;
    border-radius: var(--raio-g);
    padding: 0.7rem 1.4rem;
    cursor: pointer;
    transition: filter 0.3s, transform 0.3s;
}

.btn:hover:not(:disabled) { filter: brightness(1.12); transform: translateY(-1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* Acao secundaria sobre o fundo escuro — ex.: "Sair", no cabecalho da pagina.
   O margin-left automatico empurra o botao para a ponta direita do .page__head. */
.btn--ghost {
    margin-left: auto;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: var(--texto-invertido);
    font-size: var(--fonte-apoio);
    padding: 0.5rem 1.1rem;
    backdrop-filter: blur(6px);
}

.btn--ghost:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.22);
    filter: none;
}

/* .btn nasceu para <button>; num <a> falta zerar o sublinhado e alinhar o
   conteudo, senao o padding fica torto ao lado dos botoes de verdade. */
a.btn {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

/* Dois .btn--ghost no cabecalho: o primeiro empurra o par para a direita, o
   segundo so acompanha. */
.btn--ghost + .btn--ghost { margin-left: 0; }

/* =========================== avisos =========================== */

/* Mensagem de erro do formulario; some quando vazia. */
.error {
    font-size: var(--fonte-apoio);
    font-weight: 600;
    color: var(--erro);
    background: var(--erro-fundo);
    border-radius: var(--raio-p);
    padding: 0.6rem 0.8rem;
    margin-bottom: 0.75rem;
}
.error:empty { display: none; }

/* Destino confirmado pela propria API, nao pelo que foi digitado. */
.target {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0.7rem 1rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--borda-suave);
    border-radius: var(--raio-m);
    font-size: var(--fonte-apoio);
    font-weight: 600;
    color: var(--texto-medio);
}

.target--homolog { border-color: var(--aviso); background: rgba(250, 178, 25, 0.1); color: #7a4400; }
.target--local { border-color: var(--borda-suave); background: var(--superficie-suave); }
.target--down { border-color: var(--perigo); background: rgba(208, 59, 59, 0.06); color: #8f2020; }

.target .dot { width: 8px; height: 8px; border-radius: 50%; background: #898781; flex-shrink: 0; }
.target--homolog .dot { background: var(--aviso); }
.target--local .dot { background: var(--ativo); }
.target--down .dot { background: var(--perigo); }

.target code { font-family: var(--fonte-mono); font-size: 0.8rem; }

.progress {
    font-size: var(--fonte-apoio);
    font-weight: 600;
    color: var(--texto-medio);
}
.progress:empty { display: none; }
.progress b.ok { color: var(--sucesso); }
.progress b.fail { color: var(--erro); }

/* Etiqueta de status por linha da tabela. */
.st {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--raio-p);
    font-size: var(--fonte-rotulo);
    font-weight: 700;
    white-space: nowrap;
}

.st--idle { background: var(--neutro-fundo); color: var(--texto-suave); }
.st--sending { background: var(--info-fundo); color: var(--info); }
.st--ok { background: var(--sucesso-fundo); color: var(--sucesso); }
.st--dup { background: var(--aviso-fundo); color: var(--aviso); }
.st--err { background: var(--erro-fundo); color: var(--erro); }

/* Contador do arquivo escolhido; some quando vazio. */
.info-pill {
    color: var(--cor-primaria-escura);
    background: rgba(0, 142, 193, 0.09);
    border-radius: var(--raio-pilula);
    padding: 0.35rem 0.85rem;
    font-size: var(--fonte-apoio);
    font-weight: 600;
}
.info-pill:empty { display: none; }
.info-pill--clicavel { cursor: pointer; }
.info-pill--clicavel:hover { background: rgba(0, 142, 193, 0.18); }

.empty {
    color: var(--texto-fraco);
    font-size: var(--fonte-campo);
    text-align: center;
    padding: 2.5rem 1rem;
    border: 1px dashed var(--borda-tracejada);
    border-radius: var(--raio-gg);
}

/* ---- Avisos do upload: leitura, conferencia e resultado do envio ----
   A cor nunca conta a historia sozinha — cada aviso tem um simbolo e um texto,
   para quem nao distingue as cores entender igual. */
#resumo:empty { display: none; }
#resumo { margin-bottom: 1.25rem; display: flex; flex-direction: column; gap: 10px; }

.aviso {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 0.85rem 1rem;
    border: 1px solid var(--borda-suave);
    border-radius: var(--raio-m);
    font-size: var(--fonte-apoio);
    font-weight: 600;
    color: var(--texto-medio);
    background: var(--superficie-suave);
}

.aviso__icone { flex-shrink: 0; font-weight: 800; line-height: 1.4; }
.aviso__corpo { display: flex; flex-direction: column; gap: 4px; }
.aviso__titulo { color: var(--texto); }

.aviso--ok { border-color: var(--sucesso); background: var(--sucesso-fundo); color: var(--sucesso); }
.aviso--ok .aviso__titulo { color: var(--sucesso); }
.aviso--erro { border-color: var(--erro); background: var(--erro-fundo); color: var(--erro); }
.aviso--erro .aviso__titulo { color: var(--erro); }
.aviso--atencao { border-color: var(--aviso); background: var(--aviso-fundo); color: var(--aviso); }
.aviso--atencao .aviso__titulo { color: var(--aviso); }

/* Lista de quem falhou / esta incompleto. */
.aviso__lista {
    margin: 2px 0 0;
    padding-left: 1.1rem;
    font-weight: 500;
}

.aviso__lista li { margin-bottom: 2px; }

.muted { color: var(--texto-apagado); }

/* =========================== tabela =========================== */

.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--borda-suave);
    border-radius: var(--raio-gg);
}

table {
    border-collapse: collapse;
    width: 100%;
    font-size: var(--fonte-campo);
}

thead th {
    position: sticky;
    top: 0;
    background: var(--superficie-cabecalho);
    color: var(--cor-primaria-escura);
    font-size: var(--fonte-rotulo);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    text-align: left;
    padding: 12px var(--gap);
    border-bottom: 1px solid var(--borda-suave);
}

tbody td {
    padding: 12px var(--gap);
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid var(--borda-linha);
}

tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: rgba(0, 142, 193, 0.04); }

td.masked {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.5px;
    color: #6b7280;
}

/* =================== lista de colaboradores =================== */

.lista-colab { margin-top: 2rem; }

.lista-colab__topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.85rem;
}

.lista-colab__titulo {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--texto);
    margin: 0;
}

.btn--pequeno { padding: 0.4rem 0.85rem; font-size: var(--fonte-apoio); }

.colab-filtro {
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    font-size: var(--fonte-campo);
    padding: var(--campo-padding);
    border: 1px solid var(--borda);
    border-radius: var(--raio-m);
    background: var(--superficie);
    color: var(--texto);
    margin-bottom: 0.85rem;
    transition: border-color 0.2s;
}
.colab-filtro:focus { outline: none; border-color: var(--cor-primaria); }
.colab-filtro:disabled { background: var(--superficie-suave); cursor: not-allowed; }

.colab-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.85rem;
    flex-wrap: wrap;
}
.colab-pager__info { font-size: var(--fonte-apoio); color: var(--texto-suave); font-weight: 600; }
.colab-pager__botoes { display: inline-flex; align-items: center; gap: 10px; }
.colab-pager__num { font-size: var(--fonte-apoio); color: var(--texto-medio); font-weight: 600; }
.colab-pager[hidden] { display: none; }

.colab-tabela {
    border: 1px solid var(--borda-suave);
    border-radius: var(--raio-gg);
    overflow: hidden;
    background: var(--superficie);
}

/* Nome | CPF | E-mail | Acesso | Editar */
.colab-linha {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1.6fr auto auto;
    align-items: center;
    gap: var(--gap);
    padding: 12px var(--gap);
    border-bottom: 1px solid var(--borda-linha);
    font-size: var(--fonte-campo);
}

.colab-linha:last-child { border-bottom: 0; }
.colab-linha:not(.colab-linha--cab):hover { background: rgba(0, 142, 193, 0.04); }

.colab-linha--cab {
    background: var(--superficie-cabecalho);
    color: var(--cor-primaria-escura);
    font-size: var(--fonte-rotulo);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.colab-linha__nome { font-weight: 600; color: var(--texto); }
.colab-linha__dado {
    color: var(--texto-medio);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.colab-linha__acesso { display: inline-flex; align-items: center; gap: 8px; }
.colab-linha__rotulo { font-size: var(--fonte-apoio); color: var(--texto-suave); font-weight: 600; }
.colab-linha__editar { padding: 0.3rem 0.6rem; }

/* Switch acessível: o input real fica invisível sobre o trilho. */
.switch { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch__trilho {
    width: 40px;
    height: 22px;
    border-radius: var(--raio-pilula);
    background: var(--borda);
    transition: background 0.15s ease;
    display: inline-block;
    position: relative;
}
.switch__trilho::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    transition: transform 0.15s ease;
}
.switch input:checked + .switch__trilho { background: var(--sucesso); }
.switch input:checked + .switch__trilho::after { transform: translateX(18px); }
.switch input:focus-visible + .switch__trilho { outline: 2px solid var(--cor-primaria); outline-offset: 2px; }
.switch input:disabled + .switch__trilho { opacity: 0.5; cursor: default; }

/* ---- Modo do modal: cadastro x edição ----
   Em edição, a fila/envio em lote e o botão de cadastrar saem de cena; sobra
   só "Salvar alterações". No cadastro, o inverso. */
#modal-funcionarios[data-modo="editar"] #funcionarios-lista,
#modal-funcionarios[data-modo="editar"] .modal__acoes--fim,
#modal-funcionarios[data-modo="editar"] #adicionar-colaborador,
#modal-funcionarios[data-modo="editar"] #limpar-formulario { display: none; }

#modal-funcionarios:not([data-modo="editar"]) #salvar-edicao { display: none; }

/* CPF travado na edição: deixa claro que não dá para mexer. */
#modal-funcionarios input[readonly] { background: var(--superficie-suave); color: var(--texto-medio); cursor: not-allowed; }

/* =========================== responsivo =========================== */

@media (max-width: 600px) {
    .page { padding: 32px 12px; }
    .card { padding: 1.25rem; border-radius: 18px; }
    .page__title { font-size: 1.4rem; }
    .page__logo { height: 34px; }

    /* A tabela vira cartões empilhados: some o cabeçalho e cada linha quebra. */
    .colab-linha--cab { display: none; }
    .colab-linha {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "nome acesso"
            "cpf editar"
            "email email";
        row-gap: 6px;
    }
    .colab-linha__nome { grid-area: nome; }
    .colab-linha__dado:nth-of-type(2) { grid-area: cpf; }
    .colab-linha__dado:nth-of-type(3) { grid-area: email; white-space: normal; }
    .colab-linha__acesso { grid-area: acesso; justify-self: end; }
    .colab-linha__editar { grid-area: editar; justify-self: end; }
}