/*
  Visual do sistema Lins Services: moderno, limpo e adaptado ao celular.

  PALETA: para mudar as cores do sistema inteiro, mude só os valores do bloco ":root" logo abaixo.
*/

:root {
  /* Menu lateral */
  /* Cores da marca: índigo #1a1879 e cinza #63616d */
  --marca: #1a1879;
  --marca-cinza: #63616d;

  --menu-fundo: var(--marca);
  --menu-texto: #cdcbe8;
  --menu-forte: #ffffff;
  --menu-hover: #26249a;
  --menu-ativo: #3a37b3;

  /* Cor de destaque (botões, links, itens marcados) */
  --acento: var(--marca);
  --acento-escuro: #100f55;
  --acento-fundo: #ebebf8;

  /* Página e cartões */
  --fundo: #f4f4f8;
  --cartao: #ffffff;
  --borda: #e3e2ec;
  --texto: #1c1b2b;
  --suave: var(--marca-cinza);

  /* Situações */
  --ok: #15803d;        --ok-fundo: #e3f6ea;
  --alerta: #b45309;    --alerta-fundo: #fff3dc;
  --erro: #b42318;      --erro-fundo: #fde8e6;

  /* Tipo de contrato do funcionário */
  --clt: #1d4ed8;          --clt-fundo: #e2eafd;
  --intermitente: #c2410c; --intermitente-fundo: #ffedd5;
  --freelance: #7e22ce;    --freelance-fundo: #f3e8ff;

  --raio: 12px;
  --sombra: 0 1px 2px rgba(26, 24, 121, .06), 0 4px 14px rgba(26, 24, 121, .05);

  /* Nomes antigos (as telas ainda usam): apontam para a paleta acima */
  --cor-principal: var(--acento);
  --cor-principal-escura: var(--acento-escuro);
  --cor-fundo: var(--fundo);
  --cor-cartao: var(--cartao);
  --cor-texto: var(--texto);
  --cor-texto-suave: var(--suave);
  --cor-borda: var(--borda);
  --cor-erro: var(--erro);
  --cor-erro-fundo: var(--erro-fundo);
  --cor-ok: var(--ok);
  --cor-ok-fundo: var(--ok-fundo);
}

* { box-sizing: border-box; }

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

a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }
.grade-nome a, .tabela td a, .lista-limpa a:not(.pilula):not(.botao-pequeno) { color: var(--texto); font-weight: 600; }
.grade-nome a:hover, .tabela td a:hover { color: var(--acento); }
svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
h1 { font-size: 1.55rem; margin: 0 0 0.25rem; letter-spacing: -0.01em; }
h2 { font-size: 1.15rem; margin: 0 0 0.5rem; }
h3 { font-size: 1.02rem; }
.sub-titulo { color: var(--suave); margin: 0 0 1.25rem; }
.titulo-grupo { margin-top: 1.5rem; font-size: 1rem; color: var(--suave); text-transform: uppercase; letter-spacing: .04em; }

/* ===== Estrutura: menu lateral + área principal ===== */
.app { display: flex; min-height: 100vh; }

.menu-lateral {
  width: 255px; flex: none; background: var(--menu-fundo); color: var(--menu-texto);
  padding: 1rem 0.75rem; display: flex; flex-direction: column; gap: 0.2rem;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.marca { display: flex; align-items: center; gap: 0.65rem; padding: 0.35rem 0.6rem 1.1rem; color: var(--menu-forte); font-weight: 700; font-size: 1.05rem; text-decoration: none; }
.marca .logo { width: 40px; height: 48px; flex: none; display: grid; place-items: center; }
.marca .logo img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35)); }
.logo-login { display: block; width: 100%; max-width: 300px; height: auto; margin: 0 auto 0.5rem; }
.marca small { display: block; font-weight: 400; font-size: 0.72rem; color: var(--menu-texto); margin-top: -2px; }

.menu-item {
  display: flex; align-items: center; gap: 0.7rem; width: 100%; padding: 0.58rem 0.75rem;
  border: 0; background: none; border-radius: 10px; color: var(--menu-texto);
  font: inherit; text-align: left; text-decoration: none; cursor: pointer;
}
.menu-item:hover { background: var(--menu-hover); color: var(--menu-forte); }
.menu-item.ativo, .menu-grupo.ativo > .menu-item { background: var(--menu-ativo); color: var(--menu-forte); font-weight: 600; }
.menu-grupo { position: relative; }
.menu-item .seta { margin-left: auto; width: 15px; height: 15px; transition: transform .2s; }
.menu-grupo.aberto > .menu-item .seta { transform: rotate(90deg); }
.submenu { list-style: none; margin: 0.15rem 0 0.4rem 1.3rem; padding: 0 0 0 0.8rem; border-left: 1px solid rgba(197, 208, 222, .25); display: none; }
.menu-grupo.aberto .submenu { display: block; }
.submenu a { display: block; padding: 0.4rem 0.7rem; border-radius: 8px; font-size: 0.93rem; color: var(--menu-texto); text-decoration: none; }
.submenu a:hover { color: var(--menu-forte); background: var(--menu-hover); }
.submenu a.ativo { color: var(--menu-forte); font-weight: 600; background: rgba(255, 255, 255, .08); }
.menu-rodape { margin-top: auto; padding: 0.9rem 0.6rem 0; border-top: 1px solid rgba(197, 208, 222, .2); display: flex; gap: 0.6rem; align-items: center; font-size: 0.85rem; }
.menu-rodape b { color: var(--menu-forte); display: block; font-weight: 600; line-height: 1.2; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--menu-ativo); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 0.85rem; flex: none; }

.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.barra-topo {
  display: flex; align-items: center; gap: 1rem; padding: 0.7rem 1.5rem;
  background: var(--cartao); border-bottom: 1px solid var(--borda);
  position: sticky; top: 0; z-index: 30;
}
.busca { flex: 1; max-width: 460px; display: flex; align-items: center; gap: 0.5rem; background: var(--fundo); border: 1px solid var(--borda); padding: 0 0.8rem; border-radius: 10px; color: var(--suave); }
.busca:focus-within { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-fundo); }
.busca input[type="search"] { border: 0; background: none; padding: 0.55rem 0; outline: none; box-shadow: none; }
.sair { margin: 0 0 0 auto; }
.hamburguer { display: block; border: 1px solid var(--borda); background: var(--cartao); border-radius: 10px; padding: 0.45rem; cursor: pointer; color: var(--texto); }

.hamburguer:hover { border-color: var(--acento); color: var(--acento); }
.hamburguer svg { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
/* Menu recolhido (computador): a área de trabalho ocupa a tela toda */
.marca-topo { display: none; align-items: center; gap: 0.45rem; color: var(--marca); font-weight: 700; text-decoration: none; white-space: nowrap; }
.marca-topo img { width: 26px; height: 32px; object-fit: contain; }
.marca-topo:hover { text-decoration: none; }
@media (min-width: 861px) {
  .menu-recolhido .marca-topo { display: flex; }
  .menu-recolhido .menu-lateral { display: none; }
  .menu-recolhido .conteudo { max-width: none; }
}

.conteudo { width: 100%; max-width: 1280px; margin: 0; padding: 1.5rem 1.5rem 3rem; }
.conteudo-login { max-width: 460px; margin: 0 auto; padding-top: 2rem; }

/* ===== Cartões e títulos de seção ===== */
.cartao {
  background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 1.15rem 1.25rem; margin-top: 1rem; box-shadow: var(--sombra);
}
.cartao-login { max-width: 400px; margin: 3rem auto; }
.cartao-login h1 { text-align: center; color: var(--acento); }
.subtitulo { text-align: center; color: var(--suave); margin-top: 0; }

.cabecalho { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin-top: 1.25rem; }
.cabecalho:first-child { margin-top: 0; }
.cabecalho h1, .cabecalho h2, .cabecalho h3 { margin: 0; }
.cartao .cabecalho { margin-top: 0; margin-bottom: 0.6rem; }
.voltar { display: inline-block; margin-bottom: 0.5rem; color: var(--suave); text-decoration: none; font-size: 0.9rem; }
.voltar:hover { color: var(--acento); }

/* ===== Formulários ===== */
label { display: block; font-weight: 600; margin: 1rem 0 0.35rem; font-size: 0.92rem; }
input[type="email"], input[type="password"], input[type="text"], input[type="tel"], input[type="search"],
input[type="number"], input[type="date"], input[type="time"], input[type="month"], select, textarea {
  width: 100%; padding: 0.62rem 0.8rem; font: inherit; color: var(--texto);
  border: 1px solid var(--borda); border-radius: 10px; background: #fff;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-fundo); }
.formulario { max-width: 760px; }
.campo-checkbox label { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; }
.campo-checkbox input, .dia input { width: 1.2rem; height: 1.2rem; }
.ajuda { display: block; color: var(--suave); font-size: 0.85rem; margin-top: 0.25rem; }
.erro { display: block; color: var(--erro); font-size: 0.9rem; margin-top: 0.25rem; }
.campo-erro input, .campo-erro select, .campo-erro textarea { border-color: var(--erro); }
.obrigatorio { color: var(--suave); font-size: 0.85rem; margin: 1rem 0 0; }
.dias { border: 1px solid var(--borda); border-radius: 10px; margin: 1rem 0 0; padding: 0.75rem 1rem 1rem; }
.dias legend { font-weight: 600; padding: 0 0.25rem; }
.atalhos { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; }
.lista-dias { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.dia { display: flex; align-items: center; gap: 0.35rem; margin: 0; font-weight: 500; }
.filtros { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 1rem 0; }
.filtros input[type="text"] { flex: 1 1 14rem; width: auto; }
.filtros select { width: auto; flex: 0 1 auto; }
.data-ir { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-weight: 500; }
.data-ir input, .data-ir select { width: auto; }
.subsecao { margin: 1.5rem 0 0; padding-top: 1rem; border-top: 1px solid var(--borda); }

/* ===== Botões ===== */
.botao {
  display: inline-block; width: 100%; margin-top: 1.5rem; padding: 0.7rem 1rem; font: inherit; font-weight: 600;
  color: #fff; background: var(--acento); border: 0; border-radius: 10px; cursor: pointer; text-decoration: none; text-align: center;
}
.botao:hover { background: var(--acento-escuro); }
.botao[disabled] { opacity: .5; cursor: not-allowed; }
.botao-auto { width: auto; margin-top: 0; }
.botao-secundario { background: #fff; color: var(--acento); border: 1px solid var(--acento); }
.botao-secundario:hover { background: var(--acento-fundo); }
.botao-perigo { background: var(--erro); }
.botao-perigo:hover { background: #8e1b12; }
.botao-pequeno {
  display: inline-block; padding: 0.38rem 0.85rem; font: inherit; font-size: 0.88rem; color: var(--texto);
  background: var(--cartao); border: 1px solid var(--borda); border-radius: 10px; text-decoration: none; cursor: pointer;
}
.botao-pequeno:hover { border-color: var(--acento); color: var(--acento); }
.botao-pequeno.perigo { color: var(--erro); }
.botao:hover, .botao-pequeno:hover, .abas a:hover, .lista li a:hover, .menu-item:hover, .submenu a:hover, .marca:hover, .estatistica:hover, .plantao:hover { text-decoration: none; }
.link { background: none; border: 0; padding: 0; font: inherit; text-decoration: underline; cursor: pointer; }
.acoes-topo { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.acoes { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.acoes .botao { width: auto; flex: 1 1 10rem; margin-top: 0; }

/* ===== Listas clicáveis ===== */
.lista { list-style: none; margin: 0.75rem 0 0; padding: 0; }
.lista li a {
  display: block; padding: 0.85rem 1rem; margin-bottom: 0.5rem; background: var(--cartao);
  border: 1px solid var(--borda); border-radius: var(--raio); color: inherit; text-decoration: none; box-shadow: var(--sombra);
}
.lista li a:hover { border-color: var(--acento); }
.lista-apagada li a { opacity: 0.7; }
.selo-medicao-emitida { background: #eceff3; color: var(--suave); }
.selo-medicao-enviada { background: var(--alerta-fundo); color: var(--alerta); }
.selo-medicao-paga { background: #e1f4e8; color: #17703a; }
.situacao-medicao { margin: 0.75rem 0; }
.situacao-linha { margin: 0 0 0.5rem; }
.situacao-acoes { display: flex; flex-wrap: wrap; align-items: end; gap: 0.5rem 0.75rem; }
.situacao-acoes label { margin: 0; font-size: 0.85rem; }
/* Postos como cartões lado a lado (05/11/2026) */
.lista-postos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr)); gap: 0.75rem; }
.lista-postos li a { display: flex; flex-direction: column; gap: 0.35rem; height: 100%; margin: 0; }
.lista-postos .posto-nome { font-weight: 700; font-size: 0.98rem; }
.lista-postos .posto-local { margin-bottom: 0.15rem; }
.lista-postos .posto-turnos { display: flex; flex-direction: column; gap: 0.3rem; margin-top: auto; padding-top: 0.5rem; border-top: 1px solid var(--borda); font-size: 0.85rem; }
.lista-postos .posto-turno { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.45rem; }
.turno-tipo { font-size: 0.7rem; text-transform: uppercase; letter-spacing: .03em; padding: 0.05rem 0.4rem; border-radius: 4px; }
.turno-noturno { background: #2b2f55; color: #fff; }
.turno-diurno { background: #fff3cf; color: #7a5600; }
.lista-simples { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.lista-simples li { padding: 0.4rem 0; border-bottom: 1px solid var(--borda); }
.lista-limpa { list-style: none; margin: 0; padding: 0; }
.lista-limpa li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--borda); }
.lista-limpa li:last-child { border-bottom: 0; }
.lista-limpa .direita { color: var(--suave); white-space: nowrap; }
.detalhe { display: block; color: var(--suave); font-size: 0.88rem; margin: 0.1rem 0 0; font-weight: 400; }
.vazio { color: var(--suave); }
.alerta-texto { color: var(--alerta); }
.grupo { font-size: 1.05rem; margin-top: 1.5rem; }
.grupo a { color: var(--acento); }

/* ===== Selos e pílulas ===== */
.selo { display: inline-block; padding: 0.1rem 0.55rem; margin-left: 0.25rem; font-size: 0.75rem; font-weight: 600; border-radius: 999px; vertical-align: middle; }
.selo-vigente { background: var(--ok-fundo); color: var(--ok); }
.selo-encerrado, .selo-inativo { background: #eceff3; color: var(--suave); }
.selo-a-iniciar { background: var(--alerta-fundo); color: var(--alerta); }
.selo-tipo-clt { background: var(--clt-fundo); color: var(--clt); }
.selo-tipo-intermitente { background: var(--intermitente-fundo); color: var(--intermitente); }
.selo-tipo-freelance { background: var(--freelance-fundo); color: var(--freelance); }
.tipo-clt { color: var(--clt); font-weight: 600; }
.tipo-intermitente { color: var(--intermitente); font-weight: 600; }
.tipo-freelance { color: var(--freelance); font-weight: 600; }
.selo-alerta { display: inline-block; background: var(--erro-fundo); color: var(--erro); font-weight: 700; font-size: 0.8rem; border-radius: 6px; padding: 0.05rem 0.45rem; }
.pilula { font-size: 0.78rem; font-weight: 600; padding: 0.12rem 0.6rem; border-radius: 999px; background: var(--alerta-fundo); color: var(--alerta); white-space: nowrap; text-decoration: none; }
.pilula.erro { background: var(--erro-fundo); color: var(--erro); }
.pilula.ok { background: var(--ok-fundo); color: var(--ok); }
.pilula.info { background: var(--acento-fundo); color: var(--acento-escuro); }
.avisos-adm { margin-top: 0; margin-bottom: 1rem; }
/* Ficha do funcionário: dados pessoais e contrato lado a lado */
.ficha-dados { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
.ficha-dados > .cartao { margin-top: 0; }
.ficha-dados .ficha-secao { margin-top: 0; padding-top: 0; border-top: 0; }
.ficha-dados .dados { margin-top: 0.6rem; }
@media (max-width: 900px) { .ficha-dados { grid-template-columns: 1fr; } }
/* Avisos agrupados por assunto (tela inicial) */
.lista-limpa li.grupo-aviso { display: block; }
.grupo-aviso summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; list-style: none; }
.grupo-aviso summary::-webkit-details-marker { display: none; }
.grupo-aviso summary > span:first-child::before { content: '▸'; display: inline-block; width: 1rem; color: var(--suave); transition: transform .15s; }
.grupo-aviso details[open] summary > span:first-child::before { transform: rotate(90deg); }
.contador-grupo { display: inline-block; min-width: 1.5rem; padding: 0 0.45rem; margin-left: 0.2rem; border-radius: 999px; font-size: 0.78rem;
  font-weight: 700; text-align: center; background: var(--alerta-fundo); color: var(--alerta); }
.contador-grupo.erro { background: var(--erro-fundo); color: var(--erro); }
.contador-grupo.info { background: var(--acento-fundo); color: var(--acento-escuro); }
.itens-grupo { list-style: none; margin: 0.5rem 0 0.2rem 1rem; padding: 0 0 0 0.8rem; border-left: 2px solid var(--borda); }
.lista-limpa .itens-grupo li { display: block; padding: 0.35rem 0; border-bottom: 0; }
.itens-grupo .detalhe { display: block; font-size: 0.82rem; }
.lista-limpa li.subtitulo-lista { display: block; padding: 0.9rem 0 0.3rem; border-bottom: 0; font-size: 0.75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--suave); }
.lista-limpa li.subtitulo-lista:first-child { padding-top: 0; }
.lista-limpa li.subtitulo-lista.urgente { color: var(--erro); }
.dias-obra { padding: 0.8rem 1rem; margin-bottom: 1rem; }
.dias-obra > .detalhe { display: block; margin-bottom: 0.4rem; }
.dia-obra-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; padding: 0.35rem 0; border-top: 1px solid var(--borda); }
.dia-obra-nome { font-weight: 600; min-width: 12rem; }
.dia-obra { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0; }
.dia-obra button.pilula { border: 0; cursor: pointer; font: inherit; font-size: 0.78rem; font-weight: 600; }

/* ===== Dados em pares rótulo/valor ===== */
.dados { display: grid; grid-template-columns: max-content 1fr; gap: 0.4rem 1.25rem; margin: 1rem 0 0; }
.dados dt { font-weight: 600; color: var(--suave); }
.dados dd { margin: 0; overflow-wrap: anywhere; }
.valor-grande { font-size: 1.4rem; font-weight: 700; margin: 0.5rem 0; }
.valor-grande .detalhe { display: inline; font-weight: 400; }

/* ===== Abas e avisos ===== */
.abas { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 1rem 0; }
.abas a { padding: 0.4rem 0.95rem; border: 1px solid var(--borda); border-radius: 999px; background: #fff; color: var(--texto); text-decoration: none; font-size: 0.92rem; }
.abas a:hover { border-color: var(--acento); }
.abas a.ativa { background: var(--acento); border-color: var(--acento); color: #fff; }

/* Abas da ficha do funcionário (linha embaixo, aba ativa sublinhada) */
.abas-ficha { display: flex; gap: 0.25rem; overflow-x: auto; overflow-y: hidden; border-bottom: 1px solid var(--borda); margin: 1rem 0 1.25rem; }
.abas-ficha a { padding: 0.6rem 1rem; color: var(--suave); font-weight: 600; font-size: 0.95rem; text-decoration: none; white-space: nowrap; border-bottom: 3px solid transparent; }
.abas-ficha a:hover { color: var(--acento); text-decoration: none; }
.abas-ficha a.ativa { color: var(--acento); border-bottom-color: var(--acento); }
.abas-ficha .contador { display: inline-block; min-width: 1.3rem; padding: 0 0.35rem; border-radius: 999px; background: var(--erro); color: #fff; font-size: 0.75rem; line-height: 1.3rem; text-align: center; }
.com-abas .titulo-aba { display: none; }
.com-abas .aba-painel > .cabecalho:first-child { justify-content: flex-end; margin-top: 0; }

.aviso { padding: 0.8rem 1rem; border-radius: var(--raio); margin-bottom: 1rem; }
.aviso-error { background: var(--erro-fundo); color: var(--erro); }
.aviso-success { background: var(--ok-fundo); color: var(--ok); }
.aviso-warning { background: var(--alerta-fundo); color: var(--alerta); }
.aviso-info { background: var(--acento-fundo); color: var(--acento-escuro); }
.aviso-com-acao { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.aviso-com-acao a { margin-left: auto; font-weight: 600; color: inherit; white-space: nowrap; }

/* ===== Tabelas ===== */
.tabela-rolagem { overflow-x: auto; margin-top: 0.75rem; }
.tabela { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.tabela th, .tabela td { text-align: left; padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--borda); vertical-align: top; }
.tabela th { color: var(--suave); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: .03em; background: var(--fundo); }
.tabela tbody tr:hover { background: #f8f8fc; }
.tabela-pagar td:not(:first-child), .tabela-pagar th:not(:first-child) { text-align: right; }
.tabela-pagar td:nth-child(2), .tabela-pagar th:nth-child(2) { text-align: left; }
.resultado .tabela td:last-child { text-align: right; white-space: nowrap; }
.resultado .total td { font-weight: 700; font-size: 1.1rem; border-top: 2px solid var(--acento); }
.paginacao { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1rem; flex-wrap: wrap; }
.parametro summary { cursor: pointer; color: var(--acento); }

/* ===== Histórico de alterações ===== */
.registro { padding: 0.75rem 1rem; margin-top: 0.5rem; border-left: 4px solid var(--borda); }
.registro summary { cursor: pointer; }
.registro-criou { border-left-color: var(--ok); }
.registro-alterou { border-left-color: var(--acento); }
.registro-excluiu { border-left-color: var(--erro); }
.registro-quando { color: var(--suave); font-size: 0.9rem; margin-right: 0.5rem; }

/* ===== Tela inicial ===== */
.cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 1rem; margin: 1rem 0; }
.estatistica { display: block; margin: 0; color: inherit; text-decoration: none; transition: transform .12s, border-color .12s; }
.estatistica:hover { border-color: var(--acento); transform: translateY(-1px); }
.estatistica .rotulo { display: flex; align-items: center; gap: 0.55rem; color: var(--suave); font-size: 0.88rem; }
.estatistica .icone { width: 32px; height: 32px; border-radius: 9px; background: var(--acento-fundo); color: var(--acento); display: grid; place-items: center; }
.estatistica .valor { display: block; font-size: 1.9rem; font-weight: 700; letter-spacing: -0.02em; margin-top: 0.4rem; line-height: 1.1; }
.estatistica .nota { display: block; font-size: 0.82rem; color: var(--suave); margin-top: 0.1rem; }
.estatistica.ok .icone { background: var(--ok-fundo); color: var(--ok); }
.estatistica.alerta .icone { background: var(--alerta-fundo); color: var(--alerta); }
.estatistica.erro .icone { background: var(--erro-fundo); color: var(--erro); }
.duas-colunas { display: grid; grid-template-columns: 3fr 2fr; gap: 1rem; align-items: start; }
.duas-colunas > .cartao { margin-top: 0; }

/* ===== Escala ===== */
/* A grade rola dentro da própria caixa (no máximo a altura da tela): assim a linha dos dias fica fixa no topo */
/* A grade ocupa a tela abaixo da barra do topo e rola sozinha: o cabeçalho dos dias fica sempre à vista. */
.grade-rolagem { overflow: auto; max-height: calc(100vh - 5.25rem); overscroll-behavior: contain; scroll-margin-top: 4.75rem; margin-top: 0.5rem; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--cartao); box-shadow: var(--sombra); }
.grade { width: 100%; min-width: 52rem; border-collapse: collapse; font-size: 0.9rem; }
.grade th, .grade td { border-bottom: 1px solid var(--borda); border-right: 1px solid var(--borda); padding: 0.3rem; vertical-align: top; text-align: left; }
.grade thead th { text-align: center; color: var(--suave); font-weight: 600; background: var(--fundo);
  position: sticky; top: 0; z-index: 2; box-shadow: inset 0 -1px 0 var(--borda); }
.grade thead th.grade-nome { left: 0; z-index: 3; }
.grade tbody .grade-nome { z-index: 1; }
.grade th.domingo { color: var(--erro); }
.grade .grade-nome { min-width: 10rem; max-width: 13rem; background: var(--fundo); position: sticky; left: 0; }
.grade tr.grade-obra th { background: var(--acento-fundo); color: var(--acento-escuro); padding: 0.45rem 0.6rem; font-weight: 700; }
.grade tr.grade-obra a { color: var(--acento-escuro); }
.grade tr.grade-obra .detalhe { display: inline; margin-left: 0.5rem; font-weight: 400; }
.grade tfoot td { text-align: center; font-weight: 600; }
.grade .detalhe { font-weight: 400; }
.plantao { display: block; background: var(--cor-dia, var(--acento-fundo)); border-left: 4px solid var(--cor-barra, var(--acento)); border-radius: 6px; padding: 0.25rem 0.45rem; margin-bottom: 0.25rem; color: var(--texto); text-decoration: none; }
.plantao:hover { filter: brightness(.96); }
.plantao-noturno { background: var(--cor-noite, #cfcdf0); }
/* Cor do posto (cadastro do posto): fundo claro de dia, mais forte no noturno, barra lateral forte */
.cor-azul     { --cor-barra: #2f6fd6; --cor-dia: #e1ebfc; --cor-noite: #c3d5f6; }
.cor-verde    { --cor-barra: #2e9a55; --cor-dia: #dff3e6; --cor-noite: #bce4c9; }
.cor-rosa     { --cor-barra: #d63a8f; --cor-dia: #fbe2ef; --cor-noite: #f3c3dd; }
.cor-turquesa { --cor-barra: #12a0a6; --cor-dia: #daf3f4; --cor-noite: #b2e3e6; }
.cor-marrom   { --cor-barra: #a0602a; --cor-dia: #f3e6d8; --cor-noite: #e3caaf; }
.cor-roxo     { --cor-barra: #7a4fc1; --cor-dia: #ece5fa; --cor-noite: #d5c6f2; }
.cor-oliva    { --cor-barra: #7d8c1c; --cor-dia: #eff2d9; --cor-noite: #dbe1b0; }
.cor-grafite  { --cor-barra: #5d6470; --cor-dia: #e9ebef; --cor-noite: #d0d5dd; }
.bolinha-cor { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--cor-barra); margin-right: 0.4rem; vertical-align: 0.05em; }
.selo-ft { display: inline-block; margin-top: 0.15rem; font-size: 0.68rem; font-weight: 700; line-height: 1.25; border-radius: 4px; padding: 0.05rem 0.35rem; background: #fff; color: #5b3a96; border: 1px solid #7a4fc1; }
.cores-posto { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.cor-opcao { position: relative; margin: 0; cursor: pointer; }
.cor-opcao input { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.cor-opcao span { display: inline-block; padding: 0.3rem 0.7rem 0.3rem 0.55rem; border-radius: 8px; border: 1px solid var(--borda); border-left: 6px solid var(--cor-barra); background: var(--cor-dia); font-size: 0.86rem; font-weight: 600; }
.cor-opcao input:checked + span { box-shadow: 0 0 0 2px var(--cor-barra); }
.cor-opcao input:focus-visible + span { outline: 2px solid var(--acento); outline-offset: 2px; }
.plantao-posto { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 0; min-width: 100%; }  /* não alarga a coluna */
.plantao-conflito { background: var(--erro-fundo); border-left-color: var(--erro); }
.plantao-descanso { background: var(--alerta-fundo); border-left-color: var(--alerta); }
.selo-jornada { display: inline-block; background: var(--alerta-fundo); color: var(--alerta); font-weight: 700; font-size: 0.75rem; border-radius: 6px; padding: 0.05rem 0.45rem; margin-top: 0.15rem; }
.grade td.falta { background: #fff8f7; }
.grade .selo-escalar { display: block; margin-bottom: 0.25rem; text-decoration: none; text-align: center; }
.grade .selo-escalar:hover { background: var(--erro); color: #fff; }
.grade .grade-nome .detalhe { display: block; }
.rodizio-posto { margin: 0.4rem 0 0; }
.rodizio-posto .botao-pequeno { font-size: 0.75rem; padding: 0.2rem 0.5rem; }
.grade td.nao-funciona { background: var(--fundo); }
.grade td.indisponivel { background: repeating-linear-gradient(45deg, #fff, #fff 6px, #eceff3 6px, #eceff3 12px); }
.grade .mais { display: block; text-align: center; color: var(--suave); text-decoration: none; opacity: 0.45; }
.grade .mais:hover { opacity: 1; color: var(--acento); }
.legenda { margin-top: 0.75rem; }
.legenda-escala { margin-top: 0.6rem; font-size: 0.82rem; color: var(--suave); }
.legenda-escala summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.45rem; }
.legenda-escala summary::-webkit-details-marker { display: none; }
.legenda-escala summary .selo-ft, .legenda-escala summary .selo-jornada { margin-top: 0; }
.legenda-escala .listrado { display: inline-block; width: 1.1rem; height: 0.8rem; border: 1px solid var(--borda); border-radius: 3px;
  background: repeating-linear-gradient(45deg, #fff, #fff 3px, #dfe3e9 3px, #dfe3e9 6px); }
.legenda-mais { margin-left: 0.4rem; color: var(--acento); text-decoration: underline; }
.legenda-escala[open] .legenda-mais { text-decoration: none; }
.legenda-escala p { margin: 0.35rem 0 0; }
.preencher { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin: 0; }
/* Barra da escala numa linha: rodízio, filtro de pessoas e "?" com a legenda ao passar o mouse (06/11/2026) */
.barra-escala { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin: 0.5rem 0 0; }
.pilula-filtro { font-size: 0.85rem; padding: 0.3rem 0.75rem; border: 1px dashed var(--borda); border-radius: 999px;
  color: var(--acento); text-decoration: none; background: var(--cartao); }
.pilula-filtro:hover { border-color: var(--acento); text-decoration: none; }
.pilula-filtro.ativa { border-style: solid; background: var(--acento-fundo); color: var(--acento-escuro); }
.ajuda-escala { position: relative; }
.ajuda-botao { width: 1.9rem; height: 1.9rem; border-radius: 50%; border: 1px solid var(--borda); background: var(--cartao);
  color: var(--acento); font-weight: 700; cursor: help; }
.ajuda-botao:hover, .ajuda-botao:focus { border-color: var(--acento); }
.ajuda-painel { display: none; position: absolute; right: 0; top: calc(100% + 0.4rem); z-index: 40; width: min(24rem, 86vw);
  padding: 0.75rem 0.9rem; background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio);
  box-shadow: 0 8px 24px rgba(20, 24, 60, 0.16); font-size: 0.82rem; color: var(--texto); }
.ajuda-escala:hover .ajuda-painel, .ajuda-escala:focus-within .ajuda-painel { display: block; }
.ajuda-painel p { margin: 0 0 0.45rem; line-height: 1.45; }
.ajuda-painel p > span:not(.ajuda-texto) { margin-right: 0.3rem; vertical-align: 0.05em; }
.ajuda-painel p:last-child { margin-bottom: 0; }
.ajuda-painel .ajuda-texto { display: block; color: var(--suave); }
.ajuda-painel .selo-ft, .ajuda-painel .selo-jornada { margin-top: 0; }
.ajuda-painel .listrado { display: inline-block; width: 1.1rem; height: 0.8rem; border: 1px solid var(--borda); border-radius: 3px;
  background: repeating-linear-gradient(45deg, #fff, #fff 3px, #dfe3e9 3px, #dfe3e9 6px); }
.preencher .detalhe { margin: 0; }
.texto-whatsapp { font-family: Consolas, monospace; white-space: pre; }

/* ===== Presença ===== */
.grade-mes { min-width: 80rem; font-size: 0.8rem; }
.grade-mes th, .grade-mes td { text-align: center; padding: 0.15rem; min-width: 2.6rem; }
.grade-mes .grade-nome { text-align: left; min-width: 9rem; }
.grade-mes thead a { color: inherit; text-decoration: none; }
.ponto { display: block; margin: 0.15rem 0; padding: 0.1rem 0 0; border-radius: 4px; line-height: 1.15; text-decoration: none; color: var(--texto); background: #fff; border: 1px solid var(--borda); }
.ponto .faixa { display: block; margin-top: 0.1rem; font-size: 0.65rem; padding: 0 0.1rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 3.4rem; margin-inline: auto; }
.p-ok .faixa, .chip.p-ok { background: #bfe5c9; }
.p-alerta .faixa, .chip.p-alerta { background: #ffb74d; }
.p-falta, .chip.p-falta { background: var(--erro-fundo); color: var(--erro); font-weight: 700; }
.p-falta .faixa { background: #f4b6af; }
.p-atestado, .chip.p-atestado { background: #fff4c2; font-weight: 700; }
.p-atestado .faixa { background: #f0d96b; }
.p-programado, .chip.p-programado { background: var(--fundo); color: var(--suave); border-style: dashed; }
.p-programado .faixa { background: #dfe5ee; }
.chip { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 6px; border: 1px solid var(--borda); font-size: 0.85rem; margin-right: 0.35rem; }
.legenda-presenca { margin: 0.5rem 0; }
.total-horas { font-weight: 700; }
.presenca-dia input[type="time"], .presenca-dia select { width: auto; min-width: 7rem; }

/* ===== Formulários de horário ===== */
.rotulo-hora { display: block; color: var(--acento); font-weight: 600; margin-top: 0.25rem; }
.resumo-horario { margin-top: 1rem; padding: 0.6rem 0.9rem; border-radius: 10px; background: var(--ok-fundo); color: var(--ok); font-weight: 700; }
.resumo-horario:empty { display: none; }
.resumo-horario.resumo-excedente { background: var(--alerta-fundo); color: var(--alerta); }
.resumo-horario.erro { background: var(--erro-fundo); color: var(--erro); }
.tabela td.direita, .tabela th.direita { white-space: nowrap; }
.info-turno { background: var(--fundo); border-radius: 8px; padding: 0.35rem 0.6rem; }
.info-turno:empty { display: none; }

/* ===== Celular: o menu vira uma gaveta e tudo ocupa a largura toda ===== */
@media (max-width: 860px) {
  .menu-lateral { position: fixed; inset: 0 auto 0 0; z-index: 60; transform: translateX(-100%); transition: transform .25s; width: 270px; }
  body.menu-aberto .menu-lateral { transform: none; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .45); }
  .hamburguer { display: block; }
  .barra-topo { padding: 0.6rem 1rem; gap: 0.6rem; }
  .conteudo { padding: 1rem 1rem 3rem; }
  .duas-colunas { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .dados { grid-template-columns: 1fr; gap: 0; }
  .dados dd { margin-bottom: 0.6rem; }
  .busca input[type="search"] { font-size: 0.9rem; }
}

/* Imagem da escala para o grupo */
.cartoes-imagem { grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr)); align-items: start; }
.imagem-cartao { margin: 0; }
.imagem-cartao h2 { margin: 0; }
.previa-imagem img { display: block; width: 100%; height: auto; border: 1px solid var(--borda); border-radius: 10px; margin-top: 0.6rem; }

/* Subtítulos dentro de um módulo do menu (ex.: Escala e Presença em Operações) */
.submenu-titulo { padding: 0.55rem 0.7rem 0.15rem; font-size: 0.7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(205, 203, 232, .6); }
.submenu-titulo:first-child { padding-top: 0.2rem; }
/* Separação entre as seções do submenu (07/11/2026) */
.submenu-titulo:not(:first-child) { margin-top: 0.5rem; padding-top: 0.7rem; border-top: 1px solid rgba(197, 208, 222, .12); }
.submenu a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Disponibilidade dos freelances */
.grade-disponibilidade { min-width: 60rem; }
.grade-disponibilidade td { text-align: center; font-weight: 700; }
.disp-livre { background: var(--ok-fundo); color: var(--ok); }
.disp-escalado { background: var(--acento-fundo); color: var(--acento); }
.disp-bloqueado { background: var(--erro-fundo); color: var(--erro); }
.disp-nao { background: var(--fundo); color: var(--suave); }
.chip.disp-livre, .chip.disp-escalado, .chip.disp-bloqueado, .chip.disp-nao { font-weight: 600; }
/* Elementos escondidos pelo sistema ficam escondidos mesmo que tenham display próprio */
[hidden] { display: none !important; }

/* ===== Janela compacta (escalar, editar, substituir, presença) ===== */
.janela-x:focus:not(:focus-visible) { outline: none; }
.janela { border: 0; padding: 0; border-radius: 14px; width: min(660px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem);
  box-shadow: 0 20px 50px rgba(16, 15, 85, .25); color: var(--texto); background: var(--cartao); }
.janela::backdrop { background: rgba(16, 15, 50, .45); }
.janela-caixa { display: flex; flex-direction: column; max-height: calc(100vh - 2rem); }
.janela-caixa.pagina { max-width: 660px; background: var(--cartao); border-radius: var(--raio); box-shadow: var(--sombra); }
.janela-form { display: flex; flex-direction: column; min-height: 0; margin: 0; }
.janela-topo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--borda); }
.janela-topo h2 { margin: 0; font-size: 1.12rem; }
.janela-topo .subtitulo { display: block; font-size: 0.85rem; font-weight: 400; color: var(--suave); margin: 0.1rem 0 0; text-align: left; }
.janela-x { border: 0; background: none; font-size: 1.5rem; line-height: 1; color: var(--suave); cursor: pointer; padding: 0.2rem 0.4rem; text-decoration: none; }
.janela-x:hover { color: var(--texto); text-decoration: none; }
.janela-corpo { padding: 0.9rem 1.25rem 0.5rem; overflow-y: auto; }
.janela-rodape { display: flex; align-items: center; gap: 0.6rem; padding: 0.85rem 1.25rem; border-top: 1px solid var(--borda); }
.janela-rodape .espaco { flex: 1; }
.janela-rodape .botao { width: auto; margin: 0; padding: 0.55rem 1.3rem; }
.janela-rodape .botao-secundario { padding: 0.55rem 1.1rem; }
.link-perigo { border: 0; background: none; color: var(--erro); font: inherit; font-size: 0.9rem; cursor: pointer; padding: 0; }
.link-perigo:hover { text-decoration: underline; }
.conflito-escala ul { margin: 0.3rem 0 0.5rem 1.1rem; padding: 0; }
.link-desfazer { display: block; margin-top: 0.2rem; border: 0; background: none; padding: 0; font: inherit; font-size: 0.8rem; color: var(--suave); cursor: pointer; }
.link-desfazer:hover { color: var(--erro); text-decoration: underline; }

.linha { display: grid; grid-template-columns: 8.5rem 1fr; align-items: center; gap: 0.25rem 1rem; padding: 0.42rem 0; }
.linha > label, .linha > .rotulo { margin: 0; font-weight: 500; font-size: 0.92rem; color: var(--suave); }
.linha .valor { min-width: 0; }
.linha .valor .erro { margin-top: 0.15rem; }
.linha .valor input[type="date"], .linha .valor select.curto { width: auto; min-width: 12rem; }
.linha .valor input[type="time"] { width: 7.2rem; }
.linha .fixo { padding: 0.45rem 0.7rem; background: var(--fundo); border-radius: 8px; color: var(--suave); }
.linha .dica { display: block; font-size: 0.8rem; color: var(--suave); margin-top: 0.2rem; }
.horas-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.5rem; }
.horas-linha .til { color: var(--suave); }
.horas-total { font-size: 0.85rem; font-weight: 700; color: var(--ok); background: var(--ok-fundo); border-radius: 999px; padding: 0.15rem 0.65rem; }
.horas-total.excedente { color: var(--alerta); background: var(--alerta-fundo); }
.horas-total:empty { display: none; }
.turno-botoes { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.turno-botao { padding: 0.45rem 1rem; border: 1.5px solid var(--borda); border-radius: 8px; background: #fff;
  color: var(--texto); font: inherit; font-weight: 600; cursor: pointer; }
.turno-botao:hover { border-color: var(--acento); }
.turno-botao[aria-pressed="true"] { background: var(--acento); border-color: var(--acento); color: #fff; }
.selo-folga { font-size: 0.8rem; font-weight: 700; border-radius: 999px; padding: 0.2rem 0.7rem; background: #eceff3; color: var(--suave); }
.selo-folga-pedida { display: block; text-align: center; font-size: 0.75rem; font-weight: 700; color: var(--alerta);
  background: var(--alerta-fundo); border-radius: 6px; padding: 0.1rem 0.4rem; margin-bottom: 0.25rem; }
.selo-folga.folga { background: var(--alerta-fundo); color: var(--alerta); }
.repetir-dias { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.chip-dia { margin: 0; cursor: pointer; position: relative; }
.chip-dia input { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.chip-dia span { display: flex; flex-direction: column; align-items: center; min-width: 2.6rem; padding: 0.2rem 0.3rem;
  border: 1.5px solid var(--borda); border-radius: 8px; font-size: 0.72rem; color: var(--suave); background: #fff; }
.chip-dia span b { font-size: 0.9rem; color: var(--texto); }
.chip-dia.domingo span { color: var(--erro); }
.chip-dia input:checked + span { background: var(--acento); border-color: var(--acento); color: #fff; }
.chip-dia input:checked + span b { color: #fff; }
.chip-dia input:focus-visible + span { outline: 2px solid var(--acento); outline-offset: 2px; }
.mais-opcoes { margin-top: 0.4rem; border-top: 1px dashed var(--borda); padding-top: 0.4rem; }
.mais-opcoes summary { cursor: pointer; color: var(--acento); font-size: 0.9rem; padding: 0.3rem 0; }
.erros-gerais { margin-bottom: 0.5rem; }

/* Botões de situação lado a lado (Trabalhou | Faltou | Atestado) */
.segmentado { display: inline-flex; border: 1px solid var(--borda); border-radius: 10px; overflow: hidden; background: var(--cartao); }
.segmentado label { margin: 0; display: block; position: relative; }   /* prende o rádio invisível aqui: sem isso, clicar rolava a tela */
.segmentado input { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.segmentado span { display: block; padding: 0.38rem 0.8rem; font-size: 0.86rem; font-weight: 600; color: var(--suave); cursor: pointer; border-right: 1px solid var(--borda); white-space: nowrap; }
.segmentado label:last-child span { border-right: 0; }
.segmentado input:focus-visible + span { box-shadow: inset 0 0 0 2px var(--acento); }
.segmentado input[value="trabalhou"]:checked + span { background: var(--ok-fundo); color: var(--ok); }
.segmentado input[value="falta"]:checked + span { background: var(--erro-fundo); color: var(--erro); }
.segmentado input[value="atestado"]:checked + span { background: var(--alerta-fundo); color: var(--alerta); }
.segmentado input:disabled + span { cursor: not-allowed; opacity: .6; }

/* Substituir: lista de quem pode cobrir */
.candidatos { list-style: none; margin: 0; padding: 0; }
.candidatos li { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0; border-bottom: 1px solid var(--borda); }
.candidatos li:last-child { border-bottom: 0; }
.candidatos .quem { flex: 1; min-width: 0; }
.candidatos .quem strong { display: block; }
.candidatos .motivos { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.15rem; }
.candidatos .pilula { font-size: 0.72rem; }
.candidatos button { flex: none; }
.grupo-candidatos { margin: 0.6rem 0 0.2rem; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); }

/* Presença do dia em tabela */
.presenca-tabela td, .presenca-tabela th { vertical-align: middle; }
.presenca-tabela tr.obra-titulo th { background: var(--acento-fundo); color: var(--acento-escuro); text-align: left; font-size: 0.85rem; padding: 0.45rem 0.7rem; }
.presenca-tabela tr.pendente td:first-child, .presenca-tabela tr.pendente th:first-child { box-shadow: inset 4px 0 0 var(--alerta); }
.presenca-tabela tr.sem-horario input[type="time"] { visibility: hidden; }
.presenca-tabela input[type="time"] { width: 6.6rem; padding: 0.35rem 0.4rem; }
.presenca-tabela input.obs { width: 100%; min-width: 7rem; padding: 0.35rem 0.5rem; }
.presenca-tabela td, .presenca-tabela th { padding-left: 0.5rem; padding-right: 0.5rem; }
.presenca-tabela td:first-child { min-width: 9rem; }
.presenca-tabela td:nth-child(2) .detalhe { white-space: nowrap; }
.presenca-tabela .segmentado span { padding: 0.35rem 0.6rem; }
.presenca-tabela .acoes-linha .botao-pequeno { padding: 0.25rem 0.55rem; font-size: 0.82rem; }
.presenca-tabela .diferenca { font-size: 0.8rem; font-weight: 700; white-space: nowrap; }
.presenca-tabela .diferenca.mais { color: var(--alerta); }
.presenca-tabela .diferenca.menos { color: var(--erro); }
.presenca-tabela .acoes-linha { white-space: nowrap; text-align: right; }
.barra-salvar { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 1rem; margin-top: 1rem;
  padding: 0.75rem 1rem; background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); }
.barra-salvar .botao { width: auto; margin: 0; }

@media (max-width: 600px) {
  .linha { grid-template-columns: 1fr; }
  .linha > label, .linha > .rotulo { font-size: 0.85rem; }
}

/* Vale transporte antecipado */
.tabela-vt td, .tabela-vt th { vertical-align: middle; }
.tabela-vt input.dias { width: 4.5rem; padding: 0.35rem 0.4rem; }
.tabela-vt input.obs { min-width: 8rem; padding: 0.35rem 0.5rem; }
.tabela-vt input[type="checkbox"] { width: 1.1rem; height: 1.1rem; }
.tabela-vt .desconto { display: inline-flex; align-items: center; gap: 0.3rem; margin: 0 0.6rem 0.2rem 0; font-weight: 400; font-size: 0.85rem; white-space: nowrap; }
.tabela-vt td:nth-child(n+3):not(:nth-child(5)):not(:nth-child(9)) { white-space: nowrap; }

/* ===== Ficha do funcionário (novo / editar) ===== */
.ficha { background: var(--cartao); border-radius: 14px; box-shadow: var(--sombra); overflow: hidden; max-width: 1100px; margin-top: 0.5rem; }
.ficha-topo { display: flex; align-items: center; justify-content: space-between; padding: 0.9rem 1.5rem; background: var(--marca); color: #fff; }
.ficha-topo h1 { margin: 0; font-size: 1.2rem; display: flex; align-items: center; gap: 0.6rem; color: #fff; }
.ficha-topo h1 svg { width: 20px; height: 20px; }
.ficha-x { color: #fff; font-size: 1.6rem; line-height: 1; text-decoration: none; opacity: .85; }
.ficha-x:hover { opacity: 1; text-decoration: none; }
.ficha-corpo { display: grid; grid-template-columns: 230px 1fr; gap: 1.5rem; padding: 1.4rem 1.5rem; }
.ficha-foto { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; padding-right: 1.5rem; border-right: 1px solid var(--borda); text-align: center; }
.foto-circulo { width: 150px; height: 150px; border-radius: 50%; overflow: hidden; background: var(--acento-fundo); display: grid; place-items: center;
  box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--acento-fundo); }
.foto-circulo img { width: 100%; height: 100%; object-fit: cover; }
.foto-circulo span { font-size: 2.6rem; font-weight: 700; color: var(--marca); }
.escolher-foto { position: relative; cursor: pointer; margin: 0.4rem 0 0; }
.escolher-foto input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.remover-foto { margin: 0; font-weight: 400; font-size: 0.85rem; }
.ficha-campos { min-width: 0; }
.grade-campos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8rem 1rem; }
.celula { min-width: 0; }
.celula label { margin: 0 0 0.25rem; font-size: 0.82rem; font-weight: 600; color: var(--texto); }
.celula input, .celula select, .celula textarea { width: 100%; padding: 0.5rem 0.65rem; }
.celula .erro, .celula .ajuda { font-size: 0.78rem; }
.celula-checkbox { display: flex; align-items: flex-end; padding-bottom: 0.45rem; }
.celula-checkbox label { margin: 0; }
.largura-2 { grid-column: span 2; }
.largura-3 { grid-column: span 3; }
.largura-4 { grid-column: span 4; }
.so-leitura { background: var(--fundo); color: var(--suave); text-align: center; font-weight: 700; }
.ficha-secao { margin: 1.3rem 0 0.7rem; padding-top: 0.9rem; border-top: 1px solid var(--borda); font-size: 0.82rem;
  text-transform: uppercase; letter-spacing: .05em; color: var(--marca); }
.ficha .dias { margin-top: 1rem; }
.ficha-rodape { display: flex; justify-content: flex-end; gap: 0.75rem; padding: 0.9rem 1.5rem; border-top: 1px solid var(--borda); background: #fbfbfe; }
.ficha-rodape .botao { width: auto; margin: 0; padding: 0.6rem 1.4rem; }

/* Foto pequena (ficha e listas) */
.avatar-foto { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex: none; background: var(--acento-fundo);
  display: grid; place-items: center; font-weight: 700; color: var(--marca); font-size: 0.95rem; }
.avatar-foto img { width: 100%; height: 100%; object-fit: cover; }
.avatar-foto.pequeno { width: 32px; height: 32px; font-size: 0.75rem; }
/* Lista de funcionários em tabela */
.contagem { margin: 0.9rem 0 0; }
.tabela-pessoas { padding: 0; }
.tabela-pessoas .tabela { font-size: 0.92rem; }
.tabela-pessoas .tabela td { vertical-align: middle; padding-top: 0.45rem; padding-bottom: 0.45rem; }
.tabela-pessoas .tabela th:first-child, .tabela-pessoas .tabela td:first-child { padding-left: 1rem; }
.pessoa-linha { display: flex; align-items: center; gap: 0.65rem; text-decoration: none; }
.tabela-pessoas .suave { color: var(--suave); }
.tabela-pessoas .direita { text-align: right; padding-right: 1rem; }
.tabela-pessoas .falta { color: var(--alerta); font-size: 0.85rem; }
table.ordenavel th[data-ordem] { cursor: pointer; user-select: none; white-space: nowrap; }
table.ordenavel th[data-ordem]:hover { color: var(--acento); }
table.ordenavel th[aria-sort="ascending"]::after { content: ' ▲'; font-size: 0.7em; }
table.ordenavel th[aria-sort="descending"]::after { content: ' ▼'; font-size: 0.7em; }
.avatar-foto.grande { width: 84px; height: 84px; font-size: 1.6rem; }
.cabecalho-pessoa { display: flex; align-items: center; gap: 1rem; }

@media (max-width: 860px) {
  .ficha-corpo { grid-template-columns: 1fr; }
  .ficha-foto { border-right: 0; padding-right: 0; border-bottom: 1px solid var(--borda); padding-bottom: 1rem; }
  .grade-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .largura-3, .largura-4 { grid-column: span 2; }
}
.lista li a.item-pessoa { display: flex; align-items: center; gap: 0.9rem; }
.celula-checkbox label.campo-checkbox { display: flex; align-items: center; gap: 0.5rem; font-size: 0.92rem; }

/* Gráfico de horas (escala/grafico.py) */
.grafico-numeros .estatistica:hover { transform: none; border-color: var(--borda); }
.estatistica .valor-texto { font-size: 1.35rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grafico-cartao { position: relative; }
.grafico-legenda { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; margin: 0.6rem 0 0.4rem; padding: 0; font-size: 0.88rem; color: var(--texto); }
.grafico-legenda li, .divisao-tabela td:first-child, .grafico-dica li { display: flex; align-items: center; gap: 0.45rem; }
.amostra { display: inline-block; width: 12px; height: 12px; border-radius: 3px; flex: none; }
.svg-barras, .svg-rosca { stroke: none; stroke-width: 0; fill: currentColor; flex: initial; }   /* não herda o estilo dos ícones */
.svg-barras { width: 100%; height: auto; display: block; }
.svg-barras .grade { stroke: var(--borda); stroke-width: 1; stroke-dasharray: 2 3; }
.svg-barras .base { stroke: #c9c8d6; stroke-width: 1; }
.svg-barras .eixo { fill: var(--suave); font-size: 11px; }
.svg-barras .eixo.menor { font-size: 9.5px; }
.svg-barras .eixo.fds { fill: var(--erro); }
.svg-barras .coluna { cursor: default; outline: none; }
.svg-barras .coluna.ativa path, .svg-barras .coluna.ativa rect:not([fill="transparent"]) { filter: brightness(1.08); }
.svg-barras .coluna.ativa rect[fill="transparent"] { fill: rgba(26, 24, 121, .05); }
.grafico-dica { position: absolute; z-index: 5; pointer-events: none; min-width: 190px; background: var(--cartao); border: 1px solid var(--borda);
  border-radius: 10px; box-shadow: var(--sombra); padding: 0.55rem 0.75rem; font-size: 0.84rem; }
.grafico-dica ul { list-style: none; margin: 0.35rem 0 0; padding: 0; }
.grafico-dica li { justify-content: flex-start; padding: 0.1rem 0; }
.grafico-dica li b, .grafico-dica .total b { margin-left: auto; padding-left: 1rem; }
.grafico-dica .total { display: flex; border-top: 1px solid var(--borda); margin-top: 0.3rem; padding-top: 0.3rem; font-weight: 600; }
.grafico-divisao { display: grid; grid-template-columns: 240px 1fr; gap: 1.5rem; align-items: center; }
.svg-rosca { width: 100%; max-width: 240px; height: auto; display: block; }
.svg-rosca .fatia { stroke: var(--cartao); stroke-width: 2; }
.svg-rosca circle { fill: none; }
.divisao-tabela .nome-serie { display: block; }
.divisao-tabela .nome-serie .detalhe { display: block; font-size: 0.8rem; }
.svg-rosca .rosca-valor { font-size: 22px; font-weight: 700; fill: var(--texto); }
.svg-rosca .rosca-rotulo { font-size: 11px; fill: var(--suave); }
.divisao-tabela td { vertical-align: middle; }
.divisao-tabela td.direita, .divisao-tabela th.direita { text-align: right; white-space: nowrap; }
.barra-celula { width: 35%; }
.barra-fundo { display: block; height: 14px; background: var(--fundo); border-radius: 4px; overflow: hidden; }
.barra-fundo .barra { display: block; height: 100%; border-radius: 4px; }
.grafico-tabela summary { cursor: pointer; font-weight: 600; }
.grafico-tabela .tabela td.direita, .grafico-tabela .tabela th.direita { text-align: right; }
@media (max-width: 760px) { .grafico-divisao { grid-template-columns: 1fr; justify-items: center; } }

/* ===== Tela da escala com amplitude (06/11/2026) =====
   A página vira uma coluna da altura da tela: barra compacta em cima e a grade com todo o resto, rolando sozinha
   (o cabeçalho dos dias e a coluna dos nomes ficam fixos). Em tela cheia, o menu e a barra do topo somem. */
.conteudo.tela-escala { max-width: none; padding: 0.75rem 1rem 0.75rem; }
@media (min-width: 861px) {
  .principal:has(.tela-escala) { height: 100vh; }
  .conteudo.tela-escala { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .tela-escala .grade-rolagem { flex: 1; min-height: 16rem; max-height: none; }
  .tela-cheia .app:has(.tela-escala) .menu-lateral,
  .tela-cheia .app:has(.tela-escala) .barra-topo { display: none; }
}
.tela-escala > .aviso { margin: 0 0 0.5rem; padding: 0.5rem 0.8rem; }

.barra-semana { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.nav-semana { display: flex; align-items: center; gap: 0.35rem; }
.nav-semana h1 { margin: 0 0 0 0.4rem; font-size: 1.2rem; white-space: nowrap; }
.botao-icone { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem;
  border: 1px solid var(--borda); border-radius: 8px; background: var(--cartao); color: var(--texto);
  font-size: 1.15rem; line-height: 1; text-decoration: none; cursor: pointer; padding: 0; }
.botao-icone:hover { border-color: var(--acento); color: var(--acento); text-decoration: none; }
.botao-icone[aria-pressed="true"] { background: var(--acento); border-color: var(--acento); color: #fff; }
.barra-semana .botao-pequeno { white-space: nowrap; }

.alternar { display: inline-flex; border: 1px solid var(--borda); border-radius: 8px; overflow: hidden; background: var(--cartao); }
.alternar a { padding: 0.32rem 0.8rem; font-size: 0.88rem; color: var(--texto); text-decoration: none; white-space: nowrap; }
.alternar a + a { border-left: 1px solid var(--borda); }
.alternar a:hover { background: var(--acento-fundo); text-decoration: none; }
.alternar a.ativa { background: var(--acento); color: #fff; font-weight: 600; }

.filtros-escala { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0; flex: 1 1 16rem; }
.filtros-escala select, .filtros-escala input { width: auto; padding: 0.32rem 0.55rem; font-size: 0.88rem; }
.filtros-escala select[name="obra"] { flex: 1 1 12rem; max-width: 26rem; min-width: 0; }
.acoes-escala { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-left: auto; }
.acoes-escala .pilula { font-size: 0.8rem; padding: 0.3rem 0.7rem; }
.acoes-escala .pilula-filtro { padding: 0.28rem 0.7rem; font-size: 0.82rem; }

/* Cabeçalho dos dias: dia da semana pequeno, data em destaque; hoje em azul; fim de semana marcado */
.grade thead th.dia-col { padding: 0.35rem 0.3rem; line-height: 1.2; }
.grade th.dia-col .dia-semana { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; }
.grade th.dia-col .dia-numero { display: block; font-size: 0.98rem; color: var(--texto); font-weight: 700; }
.grade th.dia-col.domingo .dia-numero, .grade th.dia-col.domingo .dia-semana { color: var(--erro); }
.grade th.dia-col.sabado .dia-semana { color: var(--acento); }
.grade thead th.dia-col.hoje { background: #dde8fb; box-shadow: inset 0 -3px 0 #2f6fd6; }
.grade thead th.dia-col.hoje .dia-numero, .grade thead th.dia-col.hoje .dia-semana { color: #1d4fa8; }
.grade td.hoje { background-color: #f1f6fe; }
.grade td.hoje.falta { background-color: #fff1ef; }
.grade tfoot td.hoje { background-color: #e6eefc; }

/* "A obra trabalha?" dentro do cabeçalho do sábado */
.dia-obra-menu { position: relative; margin-top: 0.25rem; text-align: left; }
.dia-obra-menu summary { list-style: none; cursor: pointer; }
.dia-obra-menu summary::-webkit-details-marker { display: none; }
.chip-obra { display: flex; align-items: center; gap: 0.1rem; max-width: 100%; font-size: 0.7rem; font-weight: 700;
  border-radius: 999px; padding: 0.08rem 0.45rem; border: 1px solid transparent; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; justify-content: center; }
.chip-obra .chip-nome { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.chip-obra.parada { background: var(--ok-fundo); color: var(--ok); }
.chip-obra.trabalha { background: var(--acento-fundo); color: var(--acento-escuro); }
.chip-obra.a-confirmar { border: 1px dashed currentColor; }
span.chip-obra { display: inline-flex; background: var(--ok-fundo); color: var(--ok); }
.dia-obra-menu[open] > summary { box-shadow: 0 0 0 2px var(--acento); }
.dia-obra-caixa { position: absolute; top: calc(100% + 0.3rem); left: 50%; transform: translateX(-50%); z-index: 45;
  width: 17rem; padding: 0.7rem 0.8rem; display: flex; flex-direction: column; gap: 0.4rem; text-align: left;
  background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio);
  box-shadow: 0 8px 24px rgba(20, 24, 60, 0.16); font-weight: 400; color: var(--texto); white-space: normal; }
.dia-obra-caixa .detalhe { font-size: 0.78rem; }
.dia-obra-caixa .dia-obra { display: flex; gap: 0.4rem; }
.dia-obra-caixa .dia-obra button.pilula { padding: 0.3rem 0.7rem; font-size: 0.82rem; }
.dia-obra-caixa .dia-obra { display: flex; align-items: center; gap: 0.35rem; padding-top: 0.35rem; border-top: 1px solid var(--borda); }
.dia-obra-caixa .dia-obra-nome { flex: 1; min-width: 0; font-size: 0.8rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dia-obra-caixa .dia-obra button.pilula { padding: 0.25rem 0.6rem; font-size: 0.78rem; white-space: nowrap; }
.dia-obra-caixa.varias { width: 30rem; max-width: 80vw; }
.dia-obra-caixa strong .detalhe { font-weight: 400; margin-left: 0.3rem; }
/* nos dias da ponta a caixa abre para dentro da grade (não fica cortada) */
.grade th.dia-col:nth-child(2) .dia-obra-caixa, .grade th.dia-col:nth-child(3) .dia-obra-caixa { left: 0; transform: none; }
.grade th.dia-col:nth-last-child(-n+2) .dia-obra-caixa { left: auto; right: 0; transform: none; }
/* Plantão mais compacto: 2 linhas (horário · horas / posto), para caber mais gente na tela */
.grade .plantao { font-size: 0.84rem; line-height: 1.3; padding: 0.2rem 0.4rem; }
.grade .plantao .detalhe { font-size: 0.78rem; }
.plantao-linha { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 0; min-width: 100%; }
.plantao-horas { color: var(--suave); font-weight: 600; font-size: 0.78rem; }
/* O "+" de escalar: sempre visível na célula vazia; na que já tem plantão aparece ao passar o mouse, no canto */
.grade td { position: relative; }
@media (hover: hover) {
  .grade td .plantao ~ .mais { position: absolute; right: 0.2rem; bottom: 0.1rem; width: 1.3rem; height: 1.3rem; line-height: 1.2rem;
    border-radius: 50%; background: var(--cartao); box-shadow: var(--sombra); opacity: 0; }
  .grade td:hover .plantao ~ .mais { opacity: 0.9; }
  .grade td:has(.plantao) { padding-bottom: 0.3rem; }
}
/* Colunas: nome com largura fixa e os 7 dias com a mesma largura (como uma agenda) */
.tela-escala .grade { table-layout: fixed; }
.tela-escala .grade thead th.grade-nome { width: 12.5rem; }
.tela-escala .grade .grade-nome { max-width: none; overflow-wrap: anywhere; }
.filtros-escala .comeca { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0; font-size: 0.82rem; font-weight: 500; color: var(--suave); white-space: nowrap; }

/* ---- Presença do dia: tela ampla e limpa (07/11/2026) ---- */
.nav-semana h1 .sobretitulo { display: inline-block; margin-right: 0.35rem; padding: 0.1rem 0.5rem; border-radius: 999px;
  background: var(--acento-fundo); color: var(--acento-escuro); font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; vertical-align: middle; }
.botao-icone.desativado { opacity: .35; cursor: default; }
.botao-icone.desativado:hover { border-color: var(--borda); color: inherit; }
.tela-presenca .barra-semana { margin-bottom: 0.6rem; }
.tela-presenca .acoes-escala .pilula { font-weight: 500; }
.tela-presenca .acoes-escala .pilula:hover { text-decoration: none; filter: brightness(.97); }
.tela-presenca .vazio-presenca { margin-top: 0.5rem; }
@media (min-width: 861px) {
  .tela-escala > .form-tela { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .tela-escala > .form-tela > .grade-rolagem { flex: 1; min-height: 12rem; max-height: none; }
}
.tela-presenca .grade-rolagem { border: 1px solid var(--borda); border-radius: var(--raio); background: var(--cartao); overflow: auto; }
.presenca-tabela thead th { position: sticky; top: 0; z-index: 2; font-size: 0.72rem; padding-top: 0.5rem; padding-bottom: 0.5rem; }
.presenca-tabela td { padding-top: 0.4rem; padding-bottom: 0.4rem; border-bottom-color: color-mix(in srgb, var(--borda) 60%, transparent); }
.presenca-tabela tr.obra-titulo th { position: sticky; top: 2.05rem; z-index: 1; background: var(--fundo); color: var(--texto);
  text-transform: none; letter-spacing: 0; font-size: 0.82rem; font-weight: 700; padding: 0.35rem 0.7rem; }
.presenca-tabela .obra-empresa { font-weight: 400; color: var(--suave); }
.presenca-tabela .obra-qtd { display: inline-block; min-width: 1.4rem; margin-left: 0.3rem; padding: 0 0.4rem; border-radius: 999px;
  background: var(--cartao); border: 1px solid var(--borda); font-size: 0.72rem; font-weight: 600; color: var(--suave); text-align: center; }
.presenca-tabela tr.linha-presenca:hover td { background: color-mix(in srgb, var(--acento-fundo) 35%, transparent); }
.presenca-tabela td strong { font-weight: 600; }
.presenca-tabela .detalhe { font-size: 0.78rem; }
.presenca-tabela .col-nome { width: 15rem; }
.presenca-tabela .col-acoes { width: 1%; }
.celula-situacao { display: flex; align-items: center; gap: 0.5rem; }
.celula-situacao .link-desfazer { display: inline; margin: 0; font-size: 0.75rem; }
.presenca-tabela .segmentado { border-radius: 8px; }
.presenca-tabela .segmentado span { padding: 0.28rem 0.6rem; font-size: 0.8rem; }
.horas-real { display: flex; align-items: center; gap: 0.3rem; white-space: nowrap; }
.horas-real .seta-horas { color: var(--suave); font-size: 0.8rem; }
.presenca-tabela .horas-real input[type="time"] { width: 6.1rem; padding: 0.28rem 0.35rem; font-size: 0.86rem; }
.presenca-tabela tr.sem-horario .seta-horas { visibility: hidden; }
.presenca-tabela .horas-real .diferenca { min-width: 2.6rem; }
.presenca-tabela input.obs { border-color: transparent; background: transparent; padding: 0.28rem 0.5rem; font-size: 0.86rem; }
.presenca-tabela tr:hover input.obs, .presenca-tabela input.obs:focus, .presenca-tabela input.obs:not(:placeholder-shown) { border-color: var(--borda); background: var(--cartao); }
.presenca-tabela input.obs::placeholder { color: var(--suave); opacity: .7; }
.botao-fantasma { background: transparent; border-color: transparent; color: var(--suave); }
.presenca-tabela tr:hover .botao-fantasma, .botao-fantasma:focus-visible { border-color: var(--borda); color: var(--texto); background: var(--cartao); }
.tela-presenca .barra-salvar { margin-top: 0.6rem; padding: 0.55rem 0.9rem; gap: 0.75rem; flex-wrap: wrap; }
.barra-salvar #contador { font-size: 0.9rem; padding: 0.2rem 0.7rem; border-radius: 999px; }
.barra-salvar #contador.falta-confirmar { background: var(--alerta-fundo); color: var(--alerta); }
.barra-salvar #contador.tudo-ok { background: var(--ok-fundo); color: var(--ok); }
.tela-presenca .filtros-escala { flex: 0 1 auto; }
.tela-presenca .filtros-escala select[name="obra"] { flex: 0 1 17rem; width: 17rem; }
.presenca-tabela .col-nome { width: auto; min-width: 11rem; }
.presenca-tabela .col-posto { min-width: 12.5rem; }
.presenca-tabela td:nth-child(2) { min-width: 12.5rem; }
.presenca-tabela input.obs { min-width: 0; }
.celula-situacao .link-desfazer { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem;
  border-radius: 6px; font-size: 1rem; text-decoration: none; }
.celula-situacao .link-desfazer:hover { background: var(--erro-fundo); text-decoration: none; }
.presenca-tabela .acoes-linha { display: table-cell; }
.presenca-tabela .acoes-linha .botao-pequeno + .botao-pequeno { margin-left: 0.25rem; }
.celula-situacao .link-desfazer[hidden] { display: none; }
.presenca-tabela .horas-real input[type="time"] { width: 6.1rem; }
.presenca-tabela .acoes-linha .botao-icone { width: 1.9rem; height: 1.9rem; font-size: 1.1rem; vertical-align: middle; }
.tela-presenca .barra-semana .pilula { padding: 0.3rem 0.7rem; font-size: 0.8rem; }
.presenca-tabela td:nth-child(2) .pilula { white-space: normal; display: inline-block; line-height: 1.3; }
.presenca-tabela td:nth-child(2) { min-width: 11rem; max-width: 17rem; }
.tela-presenca .filtros-escala select[name="obra"] { flex-basis: 14rem; width: 14rem; }
.tela-presenca .nav-semana h1 { font-size: 1.1rem; }

/* Presença do dia: resumo e filtro no espaço livre da barra (07/11/2026) */
.resumo-dia { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; flex: 1 1 22rem; min-width: 0; }
.chip-resumo { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0; padding: 0.28rem 0.65rem; width: auto;
  border: 1px solid var(--borda); border-radius: 999px; background: var(--cartao); color: var(--suave);
  font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; white-space: nowrap; box-shadow: none; }
.chip-resumo b { font-weight: 700; color: var(--texto); }
.chip-resumo:hover { border-color: var(--acento); }
.chip-resumo.zero { opacity: .5; }
.chip-resumo.trabalhou b { color: var(--ok); }
.chip-resumo.falta b { color: var(--erro); }
.chip-resumo.atestado b, .chip-resumo.pendente b { color: var(--alerta); }
.chip-resumo.ativo { background: var(--acento); border-color: var(--acento); color: #fff; opacity: 1; }
.chip-resumo.ativo b { color: #fff; }
.resumo-dia .filtro-nome { flex: 1 1 9rem; min-width: 8rem; max-width: 16rem; width: auto; margin: 0 0 0 0.25rem;
  padding: 0.3rem 0.6rem; font-size: 0.85rem; border-radius: 999px; }
.tela-presenca .filtros-escala select[name="obra"] { flex-basis: 17rem; width: 17rem; }
.presenca-tabela tr[hidden] { display: none; }
.resumo-dia { flex-wrap: nowrap; flex: 1 1 auto; }
.resumo-dia .filtro-nome { flex: 1 1 6rem; min-width: 6rem; }
.chip-resumo { padding: 0.28rem 0.55rem; }
.resumo-dia .filtro-nome { flex: 0 1 11rem; }
.tela-presenca .resumo-dia { order: 10; flex: 1 1 100%; }
.tela-presenca .filtros-escala select[name="obra"] { flex-basis: 14rem; width: 14rem; }
.tela-presenca .filtros-escala { flex: 1 1 auto; }
.tela-presenca .filtros-escala select[name="obra"] { flex: 1 1 14rem; width: auto; max-width: 30rem; }
.tela-presenca .filtros-escala { flex: 1 1 23rem; min-width: 0; flex-wrap: nowrap; }

/* Refeição do plantão emendado na tela inicial (07/11/2026) */
.refeicoes-pix { border-left: 4px solid var(--alerta); }
.refeicoes-pix .selo-refeicao { display: inline-block; padding: 0 0.45rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700;
  background: var(--alerta-fundo); color: var(--alerta); }
.refeicoes-pix .selo-refeicao.janta { background: var(--acento-fundo); color: var(--acento-escuro); }
.refeicoes-pix .chave-pix { font-family: ui-monospace, Consolas, monospace; user-select: all; }
.refeicoes-pix .form-pix { margin: 0; }
.refeicoes-pix .form-pix .pilula { border: 0; cursor: pointer; font: inherit; font-size: 0.8rem; font-weight: 600; padding: 0.3rem 0.7rem; }
.refeicoes-pix .form-pix { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.refeicoes-pix .valor-refeicao { font-weight: 700; white-space: nowrap; }
.refeicoes-pix .form-pix .botao-pequeno { white-space: nowrap; }
.refeicoes-pix li { flex-wrap: wrap; row-gap: 0.4rem; }
.refeicoes-pix li > span { flex: 1 1 16rem; }
.refeicoes-pix .form-pix { margin-left: auto; }

/* Aviso no WhatsApp depois de marcar o Pix da refeição (07/11/2026) */
.aviso-whatsapp { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; }
.aviso-whatsapp > div:first-child { flex: 1 1 20rem; }
.aviso-whatsapp .detalhe { display: block; margin-top: 0.15rem; }
.previa-whatsapp { margin: 0.5rem 0 0; padding: 0.55rem 0.8rem; border-radius: 10px; background: #dcf8c6; color: #1c1b2b;
  font-size: 0.9rem; max-width: 34rem; }
.acoes-whatsapp { display: flex; align-items: center; gap: 0.5rem; }
.botao-whatsapp { width: auto; margin: 0; background: #1fa855; border-color: #1fa855; color: #fff; }
.botao-whatsapp:hover { background: #178a45; border-color: #178a45; color: #fff; text-decoration: none; }

/* Acompanhar medição: folha de presença do posto (07/11/2026) */
.folha-posto { padding: 0; overflow: hidden; }
.folha-posto > summary { list-style: none; cursor: pointer; padding: 0.8rem 1rem; margin: 0; }
.folha-posto > summary::-webkit-details-marker { display: none; }
.folha-posto > summary h2::before { content: '▸ '; color: var(--suave); }
.folha-posto[open] > summary h2::before { content: '▾ '; }
.tabela-folha-posto td, .tabela-folha-posto th { padding-top: 0.35rem; padding-bottom: 0.35rem; vertical-align: middle; }
.tabela-folha-posto tr.fim-de-semana td { background: color-mix(in srgb, var(--acento-fundo) 40%, transparent); }
.tabela-folha-posto tr.a-confirmar td { background: color-mix(in srgb, var(--alerta-fundo) 60%, transparent); }
.tabela-folha-posto tr.nao-cobra td { color: var(--suave); }
.tabela-folha-posto tr.nao-cobra td:nth-child(3) strong, .tabela-folha-posto tr.nao-cobra td:nth-child(4),
.tabela-folha-posto tr.nao-cobra td:nth-child(5) { text-decoration: line-through; }
.tabela-folha-posto .detalhe { display: block; font-size: 0.78rem; }
.tabela-folha-posto tfoot th { background: var(--fundo); }

/* Enviar a imagem da escala pelo WhatsApp (07/11/2026) */
.acoes-enviar { flex-wrap: wrap; align-items: center; }
.botao-whatsapp { background: #1f9d55; border-color: #1f9d55; }
.botao-whatsapp:hover { background: #17834a; border-color: #17834a; }
.aviso-copiado { margin: 0.5rem 0 0; }

/* Fechamentos: marcar como pago direto na lista; pago = travado (07/11/2026) */
.item-fechamento { position: relative; }
.item-fechamento > a { padding-right: 22rem; }
.item-fechamento .pagar-rapido { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); display: flex; gap: 0.5rem; align-items: center; }
.item-fechamento .pagar-rapido input[type=date] { width: auto; padding: 0.3rem 0.5rem; }
.item-fechamento .trava { position: absolute; right: 1.1rem; top: 50%; transform: translateY(-50%); opacity: .7; }
@media (max-width: 700px) {
  .item-fechamento > a { padding-right: 1rem; padding-bottom: 3.4rem; }
  .item-fechamento .pagar-rapido { top: auto; bottom: 1.1rem; transform: none; left: 1rem; }
  .item-fechamento .trava { top: 1rem; transform: none; }
}

/* Cadastros incompletos (07/11/2026) */
.cartoes-faltam { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .cartoes-faltam { grid-template-columns: repeat(2, 1fr); } }
.cartoes-faltam a.cartao { color: inherit; text-decoration: none; }
.cartoes-faltam a.cartao.selecionado { outline: 2px solid var(--acento); outline-offset: -2px; }
.tabela-incompletos td .detalhe { display: block; }
.tabela-incompletos .centro { text-align: center; }
.tabela-incompletos .falta { color: var(--erro); font-weight: 700; }
.tabela-incompletos .tem { color: var(--ok); }
.tabela-incompletos .na { color: var(--suave); opacity: .6; }

/* Escala por obra: horários do posto numa linha só (08/11/2026) */
.posto-resumo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.15rem 0.4rem; margin-top: 0.15rem; }
.posto-horarios { font-size: 0.78rem; font-weight: 400; color: var(--suave); white-space: nowrap; }
.posto-horarios .icones { font-size: 0.85rem; }
.posto-horarios .separador { margin: 0 0.3rem; }
.posto-resumo .rodizio-posto { margin: 0; }
.posto-resumo .rodizio-posto .botao-pequeno { white-space: nowrap; font-size: 0.72rem; padding: 0.1rem 0.45rem; }

/* Painel de pendências da tela inicial (08/11/2026) */
.painel-pendencias { margin-bottom: 1rem; }
.painel-pendencias .lista-limpa > li { padding-left: 0.75rem; border-left: 3px solid var(--borda); }
.painel-pendencias .lista-limpa > li.nivel-erro { border-left-color: var(--erro); }
.painel-pendencias .lista-limpa > li.nivel-alerta { border-left-color: var(--alerta); }
.painel-pendencias .lista-limpa > li.nivel-info { border-left-color: var(--acento); }
.duas-colunas > div > .cartao:first-child { margin-top: 0; }

/* Valores a pagar: marcar plantões já pagos fora do sistema (08/11/2026) */
.tabela-pagar .col-marcar { width: 2rem; text-align: center; }
.form-pago-fora { margin: 0.6rem 0 1rem; }
.pagos-fora { margin: 1rem 0; }
.pagos-fora h2 { margin-top: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.marcar-erro { margin-left: auto; font-weight: 600; white-space: nowrap; cursor: pointer; }

/* Fechamento: gratificação / bônus (08/11/2026) */
.campos-gratificacao { display: grid; grid-template-columns: 17rem 1fr; gap: 0 1rem; }
@media (max-width: 600px) { .campos-gratificacao { grid-template-columns: 1fr; } }