/* =====================================================================
   style.css — VISUAL DO SISTEMA
   ---------------------------------------------------------------------
   Identidade administrativa NEUTRA (une os quatro restaurantes) +
   uma cor de destaque (--acento) que muda conforme o restaurante
   selecionado. As cores de cada restaurante ficam em js/config.js.
   ===================================================================== */

:root {
  --tinta: #221E1B;
  --tinta-2: #3A342F;
  --lateral: #1D1A17;
  --lateral-2: #2A2622;
  --lateral-txt: #E9E2D8;
  --lateral-suave: #A39B91;

  --fundo: #F5F2ED;
  --superficie: #FFFFFF;
  --texto: #221E1B;
  --texto-suave: #6B635C;
  --texto-fraco: #9C948C;
  --linha: #E8E2DA;
  --linha-forte: #D6CEC3;

  --acento: #2B2622;
  --acento-claro: #EFE9E0;

  --ok: #2F7D4F;      --ok-fundo: #E6F2EA;
  --alerta: #A8641A;  --alerta-fundo: #FBF0DD;
  --erro: #B3412E;    --erro-fundo: #F9E5E0;
  --info: #3B5B78;    --info-fundo: #E8EEF4;

  --raio: 16px;
  --raio-p: 10px;
  --sombra: 0 1px 2px rgba(34, 30, 27, .05), 0 6px 20px rgba(34, 30, 27, .05);
  --sombra-forte: 0 10px 40px rgba(34, 30, 27, .18);
  --fonte: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --serifa: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;

  /* cores das quatro estações (sinal da marca) */
  --q1: #A8782A; --q2: #A3261B; --q3: #1F5E63; --q4: #7E7A1C;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fundo); color: var(--texto); font-family: var(--fonte); font-size: 15px; line-height: 1.45; }
body.sem-rolagem { overflow: hidden; }
h1, h2, h3 { margin: 0; line-height: 1.2; }
h1 { font-family: var(--serifa); font-size: 30px; font-weight: 600; letter-spacing: -.01em; }
h2 { font-size: 16.5px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
h3 { font-size: 15px; }
a { color: inherit; }
code { background: var(--fundo); padding: 1px 6px; border-radius: 5px; font-size: 13px; }
small { font-size: 12.5px; }
.ico { flex-shrink: 0; }
[hidden] { display: none !important; }
.espaco { flex: 1; }

/* ========== Sinal da marca: quatro círculos = quatro estações ========== */
.marca-sinal { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 3px; width: 30px; height: 30px; flex-shrink: 0; }
.marca-sinal i { border-radius: 50%; }
.marca-sinal i:nth-child(1) { background: var(--q1); }
.marca-sinal i:nth-child(2) { background: var(--q2); }
.marca-sinal i:nth-child(3) { background: var(--q3); }
.marca-sinal i:nth-child(4) { background: var(--q4); }
.marca-sinal.grande { width: 44px; height: 44px; gap: 4px; }

/* =====================================================================
   TELA DE ENTRADA
   ===================================================================== */
.entrada { position: relative; min-height: 100vh; overflow: hidden; background: #14110F; color: #F7F2EA; }
.entrada-fundo {
  position: absolute; inset: -40px; background-size: cover; background-position: center;
  filter: blur(26px) saturate(1.1) brightness(.42); transform: scale(1.06);
}
.entrada::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(20,17,15,.1), rgba(20,17,15,.75) 75%); pointer-events: none; }
.entrada-conteudo { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding: 42px 32px 48px; }
.entrada-topo { display: flex; align-items: center; gap: 14px; margin-bottom: 40px; }
.entrada-sistema { font-size: 13px; letter-spacing: .32em; text-transform: uppercase; color: #D8CFC3; }
.frase { font-family: var(--serifa); font-weight: 400; font-size: clamp(30px, 4.6vw, 56px); line-height: 1.08; letter-spacing: -.01em; margin-bottom: 14px; }
.frase span { display: block; animation: surgir .9s ease both; }
.frase span:nth-child(2) { animation-delay: .12s; }
.frase span:nth-child(3) { animation-delay: .24s; font-style: italic; color: #E8D7B5; }
@keyframes surgir { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.entrada-sub { color: #CFC6BA; margin: 0 0 30px; font-size: 15.5px; max-width: 560px; }

.grade-estacoes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.card-estacao {
  position: relative; display: flex; flex-direction: column; text-align: left; padding: 0; border: 0; cursor: pointer;
  border-radius: 18px; overflow: hidden; background: #221E1B; color: #fff; font: inherit;
  box-shadow: 0 10px 30px rgba(0,0,0,.35); transition: transform .25s ease, box-shadow .25s ease;
  animation: surgir .8s ease both;
}
.card-estacao:nth-child(2) { animation-delay: .08s; } .card-estacao:nth-child(3) { animation-delay: .16s; } .card-estacao:nth-child(4) { animation-delay: .24s; }
.card-estacao:hover, .card-estacao:focus-visible { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(0,0,0,.45); outline: none; }
.card-estacao:focus-visible { box-shadow: 0 0 0 3px #fff, 0 18px 44px rgba(0,0,0,.45); }
.ce-img { display: block; aspect-ratio: 3 / 2; background-size: cover; background-position: center; transition: transform .5s ease; }
.card-estacao:hover .ce-img { transform: scale(1.03); }
.ce-info { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px 16px; border-top: 4px solid var(--rc); background: #1F1B18; }
.ce-estacao { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: #BFB5A8; }
.ce-nome { font-family: var(--serifa); font-size: 21px; font-weight: 600; }
.ce-num { font-size: 13px; color: #D9D0C4; }
.ce-entrar {
  position: absolute; right: 14px; bottom: 16px; display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px; font-weight: 600; color: #fff; opacity: .75; transition: opacity .2s, gap .2s;
}
.card-estacao:hover .ce-entrar, .card-todos:hover .ce-entrar { opacity: 1; gap: 8px; }

.card-todos {
  position: relative; margin-top: 18px; width: 100%; display: flex; align-items: center; gap: 18px; text-align: left; cursor: pointer;
  padding: 18px 22px; border-radius: 18px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.07);
  backdrop-filter: blur(6px); color: #fff; font: inherit; transition: background .2s, border-color .2s;
}
.card-todos:hover, .card-todos:focus-visible { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.35); outline: none; }
.ct-quatro { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; width: 38px; height: 38px; flex-shrink: 0; }
.ct-quatro i { border-radius: 50%; }
.ct-txt { display: flex; flex-direction: column; }
.ct-txt b { font-family: var(--serifa); font-size: 20px; font-weight: 600; }
.ct-txt small { color: #D2C9BD; font-size: 13.5px; }
.card-todos .ce-entrar { position: static; margin-left: auto; }
.entrada-demo { display: flex; align-items: center; gap: 8px; margin: 22px 0 0; color: #E3C98F; font-size: 13.5px; }

/* =====================================================================
   PARTE OPERACIONAL
   ===================================================================== */
.layout { display: flex; min-height: 100vh; }

.menu-lateral {
  width: 256px; flex-shrink: 0; background: var(--lateral); color: var(--lateral-txt);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; padding: 18px 14px 14px; overflow-y: auto;
}
.marca { display: flex; align-items: center; gap: 12px; padding: 4px 6px 18px; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 14px; }
.marca-txt { display: flex; flex-direction: column; }
.marca-txt b { font-family: var(--serifa); font-size: 17.5px; font-weight: 600; color: #fff; }
.marca-txt small { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--lateral-suave); }

.rotulo-menu { display: block; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--lateral-suave); margin: 0 8px 6px; }
.bloco-rest { margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.08); }
#seletor-rest { display: flex; flex-direction: column; gap: 2px; }
#seletor-rest button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 9px; border: 0; cursor: pointer;
  background: transparent; color: rgba(233,226,216,.78); font: inherit; font-size: 14px; text-align: left; transition: background .15s, color .15s;
}
#seletor-rest button:hover { background: rgba(255,255,255,.06); color: #fff; }
#seletor-rest button.ativo { background: rgba(255,255,255,.1); color: #fff; font-weight: 600; box-shadow: inset 3px 0 0 var(--rc, #E9E2D8); }
.dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.dot.quatro { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5px; width: 12px; height: 12px; }
.dot.quatro i { border-radius: 50%; }
.dot.quatro i:nth-child(1) { background: var(--q1); } .dot.quatro i:nth-child(2) { background: var(--q2); }
.dot.quatro i:nth-child(3) { background: var(--q3); } .dot.quatro i:nth-child(4) { background: var(--q4); }

#nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
#nav a {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px;
  color: rgba(233,226,216,.75); text-decoration: none; font-size: 14.5px; transition: background .15s, color .15s;
}
#nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
#nav a.ativo { background: var(--lateral-txt); color: var(--tinta); font-weight: 600; }

.indicador-backup {
  display: flex; gap: 10px; align-items: flex-start; text-align: left; margin-top: 12px; padding: 11px 12px; border-radius: 10px; cursor: pointer;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); color: var(--lateral-txt); font: inherit;
}
.indicador-backup:hover { background: rgba(255,255,255,.09); }
.indicador-backup span { display: flex; flex-direction: column; min-width: 0; }
.indicador-backup small { font-size: 11px; color: var(--lateral-suave); }
.indicador-backup b { font-size: 13px; font-weight: 600; }
.indicador-backup em { font-style: normal; font-size: 11px; color: #F0C987; margin-top: 2px; }
.indicador-backup.alerta { background: rgba(240,160,60,.16); border-color: rgba(240,160,60,.45); }
.indicador-backup.alerta .ico, .indicador-backup.pendente .ico { color: #F0C987; }

.principal { flex: 1; min-width: 0; }

/* Faixa superior: "onde estou" */
.topo {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; padding: 12px 36px;
  background: rgba(245,242,237,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--linha);
}
.topo::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--acento); }
body[data-ctx="todos"] .topo::before { background: linear-gradient(90deg, var(--q1) 0 25%, var(--q2) 25% 50%, var(--q3) 50% 75%, var(--q4) 75%); }
.topo-rest { display: flex; align-items: center; gap: 12px; }
.topo-thumb { width: 54px; height: 36px; border-radius: 8px; background-size: cover; background-position: center; box-shadow: 0 0 0 2px var(--acento); }
.topo-quatro { display: grid; grid-template-columns: repeat(4, 22px); gap: 3px; }
.topo-quatro i { height: 36px; border-radius: 6px; background-size: cover; background-position: center; }
.topo-rest > span:last-child { display: flex; flex-direction: column; line-height: 1.15; }
.topo-rest small { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-suave); }
.topo-rest b { font-family: var(--serifa); font-size: 19px; font-weight: 600; color: var(--acento); }
body[data-ctx="todos"] .topo-rest b { color: var(--tinta); }
.topo-acoes { margin-left: auto; }
.btn-icone.so-celular { display: none; }

main { max-width: 1240px; margin: 0 auto; padding: 28px 36px 64px; outline: none; }

/* ========== Cabeçalho de página ========== */
.cabecalho { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; flex-wrap: wrap; }
.sobre { margin: 6px 0 0; color: var(--texto-suave); font-size: 14.5px; }
.frase-mini { font-family: var(--serifa); font-style: italic; color: var(--texto-suave); font-size: 15px; }
.cab-acoes { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.voltar { display: inline-flex; align-items: center; gap: 4px; color: var(--texto-suave); text-decoration: none; margin-bottom: 14px; font-size: 14px; }
.voltar:hover { color: var(--texto); }

/* ========== Botões ========== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-weight: 600; font-size: 14.5px;
  padding: 10px 18px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .15s, border-color .15s, transform .05s, filter .15s;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.pequeno { padding: 6px 12px; font-size: 13px; border-radius: 8px; }
.btn.primario { background: var(--acento); color: #fff; }
body[data-ctx="todos"] .btn.primario { background: var(--tinta); }
.btn.primario:hover { filter: brightness(1.12); }
.btn.secundario { background: var(--superficie); color: var(--texto); border-color: var(--linha-forte); }
.btn.secundario:hover { border-color: var(--texto-suave); }
.btn.fantasma { background: transparent; color: var(--texto-suave); }
.btn.fantasma:hover { background: rgba(34,30,27,.05); color: var(--texto); }
.btn.perigo { background: var(--erro); color: #fff; }
.btn.perigo:hover { background: #9a3524; }
.perigo-texto { color: var(--erro) !important; }
.btn-icone { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; border: 0; background: transparent; color: var(--texto-suave); cursor: pointer; flex-shrink: 0; }
.btn-icone:hover { background: rgba(34,30,27,.07); color: var(--texto); }
.link { font-size: 13.5px; color: var(--texto-suave); text-decoration: none; font-weight: 600; }
.link:hover { color: var(--texto); text-decoration: underline; }
.linha-botoes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }

/* ========== Painéis ========== */
.painel { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 20px 22px; box-shadow: var(--sombra); margin-bottom: 18px; }
.painel.sem-padding { padding: 0; overflow: hidden; }
.painel-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.nota-topo { color: var(--texto-fraco); }
.valor-topo { font-variant-numeric: tabular-nums; font-size: 16px; }
.nota { color: var(--texto-suave); font-size: 13px; margin: 12px 0 0; }
.nota .ico { vertical-align: -3px; margin-right: 4px; }
.ajuda { color: var(--texto-suave); font-size: 13.5px; margin: 0 0 14px; }
.confirmar { display: inline-block; background: var(--alerta-fundo); color: #7a4a10; border-radius: 5px; padding: 0 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; }
.grade-2 { display: grid; grid-template-columns: 1.1fr 1fr; gap: 18px; }
.grade-2.iguais { grid-template-columns: 1fr 1fr; }
.grade-2 > * { min-width: 0; }
.grade-2 > .painel { margin-bottom: 0; }
.grade-2.iguais > .painel { margin-bottom: 0; }

/* ========== Faixas de aviso ========== */
.faixa { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; margin-bottom: 16px; font-size: 14px; border: 1px solid transparent; }
.faixa span { flex: 1; }
.faixa.info { background: var(--info-fundo); color: #22384c; border-color: #d3dde8; }
.faixa.alerta { background: var(--alerta-fundo); color: #6d410f; border-color: #f0d9b0; }

/* ========== KPIs ========== */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 16px; }
.kpis.tres { grid-template-columns: repeat(3, 1fr); }
.kpi {
  position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 18px 20px; text-decoration: none; box-shadow: var(--sombra);
  transition: border-color .15s, transform .15s;
}
a.kpi:hover { border-color: var(--linha-forte); transform: translateY(-1px); }
.kpi small { color: var(--texto-suave); font-size: 13px; font-weight: 600; padding-right: 40px; }
.kpi strong { font-size: 27px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.kpi-det { color: var(--texto-fraco); font-size: 12.5px; }
.kpi-ico { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--acento-claro); color: var(--acento); }

/* Cartões por restaurante (visão consolidada) */
.grade-rest { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 18px; }
.mini-rest {
  display: flex; flex-direction: column; padding: 0; border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; cursor: pointer;
  background: var(--superficie); box-shadow: var(--sombra); text-align: left; font: inherit; color: inherit; transition: transform .15s, border-color .15s;
}
.mini-rest:hover { transform: translateY(-2px); border-color: var(--rc); }
.mr-img { height: 92px; background-size: cover; background-position: center 38%; border-bottom: 3px solid var(--rc); }
.mr-corpo { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px 14px; font-size: 13px; color: var(--texto-suave); }
.mr-corpo b { font-family: var(--serifa); font-size: 16.5px; color: var(--rc); margin-bottom: 2px; }
.mr-corpo em { font-style: normal; font-weight: 700; color: var(--texto); font-variant-numeric: tabular-nums; }

/* ========== Listas simples ========== */
.lista { list-style: none; margin: 0; padding: 0; }
.lista li + li { border-top: 1px solid var(--linha); }
.lista a { display: flex; align-items: center; gap: 12px; padding: 10px 4px; text-decoration: none; border-radius: 8px; }
.lista a:hover { background: var(--fundo); }
.l-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.l-txt small { color: var(--texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.l-dir { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; }
.l-dir small { color: var(--texto-suave); font-variant-numeric: tabular-nums; }

/* ========== Etiquetas, carimbos, selos, avatar ========== */
.etiqueta {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 7px; border-radius: 20px; font-size: 12px; font-weight: 600;
  background: color-mix(in srgb, var(--cor) 12%, white); color: var(--cor); white-space: nowrap;
}
.etiqueta i { width: 7px; height: 7px; border-radius: 50%; background: var(--cor); }
.carimbo { display: inline-flex; align-items: center; gap: 6px; padding: 1px 9px 1px 7px; border-radius: 20px; font-size: 12px; font-weight: 600; background: var(--rcl); color: var(--rc); white-space: nowrap; vertical-align: middle; }
.carimbo i { width: 8px; height: 8px; border-radius: 50%; background: var(--rc); }
.selos { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.selo { display: inline-block; padding: 1px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 600; background: #EFEAE3; color: var(--tinta-2); white-space: nowrap; }
.selo.verde { background: var(--ok-fundo); color: var(--ok); }
.selo.roxo { background: #ECE8F5; color: #5B4A8A; }
.selo.cinza { background: #EEECE9; color: var(--texto-fraco); }
.avatar {
  display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  background: var(--rcl); color: var(--rc); font-weight: 700; font-size: 13.5px; letter-spacing: .02em;
}
.avatar.grande { width: 68px; height: 68px; font-size: 22px; }
.avatar.inativo { filter: grayscale(1); opacity: .6; }

/* ========== Filtros ========== */
.filtros { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.busca { flex: 1 1 260px; display: flex; align-items: center; gap: 8px; background: var(--superficie); border: 1px solid var(--linha-forte); border-radius: 10px; padding: 0 12px; color: var(--texto-fraco); }
.busca input { flex: 1; border: 0; outline: none; background: transparent; font: inherit; padding: 10px 0; color: var(--texto); min-width: 0; }
.busca:focus-within { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-claro); }
.segmentado { max-width: 100%; overflow-x: auto; display: inline-flex; background: #ECE7E0; border-radius: 10px; padding: 3px; gap: 2px; }
.segmentado button, .segmentado a { border: 0; background: transparent; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--texto-suave); padding: 7px 12px; border-radius: 8px; cursor: pointer; text-decoration: none; white-space: nowrap; }
.segmentado .ativo { background: var(--superficie); color: var(--texto); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.chips-rest { display: flex; gap: 6px; flex-wrap: wrap; }
.chips-rest button { border: 1px solid var(--linha-forte); background: var(--superficie); border-radius: 20px; padding: 6px 13px; font: inherit; font-size: 13px; font-weight: 600; color: var(--texto-suave); cursor: pointer; }
.chips-rest button:hover { border-color: var(--rc, var(--texto-suave)); color: var(--texto); }
.chips-rest button.ativo { background: var(--rc, var(--tinta)); border-color: var(--rc, var(--tinta)); color: #fff; }

/* ========== Funcionários ========== */
.grupo-titulo { display: flex; align-items: center; gap: 8px; font-family: var(--serifa); font-size: 18px; margin: 22px 0 10px; color: var(--rc); }
.grupo-titulo i { width: 10px; height: 10px; border-radius: 50%; background: var(--rc); }
.grupo-titulo small { font-family: var(--fonte); color: var(--texto-fraco); font-size: 13px; }
.grade-func { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.cartao-func {
  position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 14px 14px 14px 16px; text-decoration: none;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: 14px; box-shadow: var(--sombra); transition: border-color .15s, transform .15s;
  border-left: 3px solid var(--rc);
}
.cartao-func:hover { transform: translateY(-1px); border-color: var(--linha-forte); border-left-color: var(--rc); }
.cf-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cf-txt small { color: var(--texto-suave); }
.mais-rapido { margin: -4px -4px 0 0; color: var(--rc); }
.mais-rapido:hover { background: var(--acento-claro); color: var(--rc); }

.ficha-topo {
  display: flex; gap: 18px; align-items: center; flex-wrap: wrap; padding: 22px; margin-bottom: 18px;
  background: linear-gradient(120deg, var(--rcl), var(--superficie) 70%); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra);
  border-top: 4px solid var(--rc);
}
.ft-info { flex: 1; min-width: 240px; }
.ft-info h1 { font-size: 28px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ft-info p { margin: 6px 0 0; color: var(--texto-suave); }
.ft-meta { font-size: 13.5px; }
.ft-meta .ico { vertical-align: -3px; margin-right: 2px; }
.ft-acoes { display: flex; gap: 8px; flex-wrap: wrap; }

.resumo-mes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.rm { padding: 12px 14px; border-radius: 12px; background: var(--fundo); display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rm small { color: var(--texto-suave); font-weight: 600; font-size: 12px; }
.rm b { font-size: 21px; font-variant-numeric: tabular-nums; }
.rm span { color: var(--texto-fraco); font-size: 12px; }
.rm.destaque { background: var(--acento-claro); }
.rm.destaque b { color: var(--acento); }
body[data-ctx="todos"] .rm.destaque b { color: var(--tinta); }

/* Linha do tempo */
.timeline { display: flex; flex-direction: column; gap: 18px; }
.tl-mes h3 { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-fraco); margin-bottom: 8px; }
.tl-mes ul { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--linha); }
.tl-item { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 7px 0 7px 12px; }
.tl-item::before { content: ""; position: absolute; left: -21px; top: 13px; width: 12px; height: 12px; border-radius: 50%; background: var(--cor); border: 3px solid var(--superficie); }
.tl-dia { width: 44px; flex-shrink: 0; color: var(--texto-suave); font-size: 13px; font-variant-numeric: tabular-nums; padding-top: 2px; }
.tl-corpo { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.tl-corpo small { color: var(--texto-suave); }
.tl-obs { flex-basis: 100%; color: var(--texto-suave); font-size: 13px; }
.tl-item.cancelado { opacity: .55; }
.tl-item.cancelado .tl-corpo > b { text-decoration: line-through; }
.tl-item .btn-icone { width: 30px; height: 30px; }

/* ========== Parcelamentos ========== */
.grade-parc { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.cartao-parc {
  display: flex; flex-direction: column; gap: 8px; text-align: left; padding: 14px 16px; cursor: pointer; font: inherit; color: inherit;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: 14px; box-shadow: var(--sombra); transition: border-color .15s, transform .15s;
}
.cartao-parc:hover { border-color: var(--cor); transform: translateY(-1px); }
.cartao-parc.concluido, .cartao-parc.cancelado { opacity: .7; }
.cp-topo { display: flex; justify-content: space-between; align-items: center; }
.cp-sit { font-size: 12px; color: var(--texto-suave); font-weight: 600; }
.cp-nome { display: flex; align-items: center; gap: 10px; }
.cp-nome .avatar { width: 32px; height: 32px; font-size: 12px; }
.cp-nome > span { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.cp-desc { color: var(--texto-suave); font-size: 13.5px; }
.barra { height: 7px; background: #EEE9E2; border-radius: 10px; overflow: hidden; }
.barra i { display: block; height: 100%; background: var(--cor); border-radius: 10px; }
.cp-nums { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--texto-suave); flex-wrap: wrap; }
.cp-nums b { color: var(--texto); font-variant-numeric: tabular-nums; }
.cp-mes { font-size: 12.5px; font-weight: 600; color: var(--cor); }
.cp-mes.leve { color: var(--texto-fraco); font-weight: 500; }

/* ========== Visão do mês ========== */
.totais-mes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.tm { padding: 9px 14px; border-radius: 11px; background: var(--superficie); border: 1px solid var(--linha); display: flex; flex-direction: column; min-width: 104px; }
.tm small { color: var(--texto-suave); font-size: 11.5px; font-weight: 600; }
.tm b { font-size: 17px; font-variant-numeric: tabular-nums; }
.tm b small { font-size: 12px; color: var(--texto-fraco); font-weight: 600; }
.tm.forte { background: var(--acento-claro); border-color: transparent; }
.tm.forte b { color: var(--acento); }
body[data-ctx="todos"] .tm.forte b { color: var(--tinta); }

.abas { display: flex; gap: 4px; border-bottom: 1px solid var(--linha-forte); margin-bottom: 16px; overflow-x: auto; }
.abas a { display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px; text-decoration: none; color: var(--texto-suave); font-weight: 600; font-size: 14px; border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.abas a:hover { color: var(--texto); }
.abas a.ativo { color: var(--texto); border-bottom-color: var(--acento); }
.barra-aba { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; color: var(--texto-suave); flex-wrap: wrap; gap: 8px; }

.lista-pessoas { display: flex; flex-direction: column; gap: 8px; }
.linha-pessoa { background: var(--superficie); border: 1px solid var(--linha); border-radius: 13px; box-shadow: var(--sombra); }
.linha-pessoa > summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 11px 14px; cursor: pointer; }
.linha-pessoa > summary::-webkit-details-marker { display: none; }
.linha-pessoa > summary > .ico { color: var(--texto-fraco); transition: transform .2s; }
.linha-pessoa[open] > summary > .ico { transform: rotate(180deg); }
.lp-nome { flex: 0 0 230px; min-width: 0; display: flex; flex-direction: column; }
.lp-nome small { color: var(--texto-suave); }
.lp-nums { flex: 1; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.nmini { display: inline-flex; flex-direction: column; align-items: flex-end; padding: 3px 10px; border-radius: 9px; background: var(--fundo); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 14px; line-height: 1.2; }
.nmini small { font-size: 10.5px; font-weight: 600; color: var(--texto-fraco); }
.nmini.forte { background: var(--acento-claro); color: var(--acento); }
body[data-ctx="todos"] .nmini.forte { color: var(--tinta); }
.nmini.vermelho { color: var(--erro); }
.lp-detalhe { padding: 4px 16px 16px 64px; border-top: 1px dashed var(--linha); }
.lp-detalhe ul { list-style: none; margin: 10px 0 0; padding: 0; }
.lp-detalhe li { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 14px; }
.lp-detalhe li > span:not(.etiqueta) { flex: 1; color: var(--texto-suave); min-width: 0; }
.lp-detalhe li b { font-variant-numeric: tabular-nums; }
.lp-detalhe li > i { width: 30px; }
.lp-detalhe li .btn-icone { width: 30px; height: 30px; }
.lp-vt { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 10px 0 0; padding: 8px 12px; background: var(--fundo); border-radius: 9px; font-size: 13.5px; color: var(--texto-suave); }

.formas-vt { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.formas-vt .selo { font-size: 13px; padding: 4px 10px; }

/* ========== Tabelas (só onde ajudam) ========== */
.rolagem-x { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th { text-align: left; font-size: 12px; font-weight: 700; color: var(--texto-suave); padding: 10px 12px; background: #FAF8F5; border-bottom: 1px solid var(--linha); white-space: nowrap; }
.tabela td { padding: 9px 12px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.tabela tbody tr:hover td { background: #FCFBF9; }
.tabela tfoot td { font-weight: 700; background: #FAF8F5; border-bottom: 0; }
.tabela .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabela td small { color: var(--texto-suave); }
.tabela a { text-decoration: none; font-weight: 600; }
.tabela a:hover { text-decoration: underline; }
.tabela.compacta td, .tabela.compacta th { padding: 7px 8px; }
.tabela tr.riscado td { color: var(--texto-fraco); text-decoration: line-through; }
.input-tabela { width: 64px; text-align: right; font: inherit; padding: 5px 7px; border: 1px solid var(--linha-forte); border-radius: 7px; background: #fff; }
.input-tabela.alterado { border-color: var(--acento); background: var(--acento-claro); font-weight: 700; }

/* ========== Regularizações ========== */
.lista-inc { display: flex; flex-direction: column; gap: 12px; }
.inc { background: var(--superficie); border: 1px solid var(--linha); border-left: 4px solid var(--alerta); border-radius: 14px; box-shadow: var(--sombra); padding: 14px 18px; }
.inc.ok { border-left-color: var(--ok); opacity: .82; }
.inc-topo, .inc-rodape { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.inc-topo small { color: var(--texto-suave); }
.inc-num { font-weight: 800; letter-spacing: .04em; }
.inc-corpo { display: flex; gap: 18px; justify-content: space-between; margin: 10px 0; flex-wrap: wrap; }
.inc-corpo p { margin: 3px 0 0; color: var(--texto-suave); font-size: 14px; max-width: 560px; }
.inc-valores { display: flex; gap: 8px; }
.inc-valores span { display: flex; flex-direction: column; padding: 6px 12px; background: var(--fundo); border-radius: 9px; font-weight: 700; font-variant-numeric: tabular-nums; }
.inc-valores small { font-size: 11px; color: var(--texto-suave); font-weight: 600; }
.inc-valores .dif { background: var(--alerta-fundo); color: #7a4a10; }
.inc-rodape { font-size: 13.5px; color: var(--texto-suave); border-top: 1px solid var(--linha); padding-top: 10px; }
.estado { padding: 1px 9px; border-radius: 20px; font-size: 12px; font-weight: 700; }
.estado.aberto { background: var(--alerta-fundo); color: #7a4a10; }
.estado.fechado { background: var(--ok-fundo); color: var(--ok); }

/* ========== Relatórios e dados ========== */
.grade-rel { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.relatorio { display: flex; gap: 16px; margin: 0; }
.rel-ico { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--acento-claro); color: var(--acento); flex-shrink: 0; }
.rel-corpo { flex: 1; min-width: 0; }
.rel-corpo p { color: var(--texto-suave); font-size: 13.5px; margin: 6px 0 12px; }
.grade-acoes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 18px; }
.acao-dados { display: flex; flex-direction: column; margin: 0; }
.acao-dados p { color: var(--texto-suave); font-size: 13.5px; flex: 1; }
.acao-dados .btn { align-self: flex-start; }
.acao-dados.principal { border: 2px solid var(--acento); }
.erros { color: var(--erro); }

/* ========== Formulários ========== */
.campo { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; min-width: 0; }
.campo > span { font-size: 13px; font-weight: 600; color: var(--texto-suave); }
.campo > span em { font-style: normal; font-weight: 400; color: var(--texto-fraco); }
.campo > small { color: var(--texto-fraco); font-size: 12px; }
.campo.curto { max-width: 240px; }
.campo input, .campo select, .campo textarea, select, .select-pequeno {
  font: inherit; font-size: 15px; padding: 10px 12px; border: 1px solid var(--linha-forte); border-radius: 10px; background: #fff; color: var(--texto); width: 100%; min-width: 0;
}
.cab-acoes select, .select-pequeno { width: auto; padding: 8px 10px; font-size: 14px; }
.campo textarea { resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus, select:focus, .input-tabela:focus {
  outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-claro);
}
.invalido { border-color: var(--erro) !important; box-shadow: 0 0 0 3px var(--erro-fundo) !important; }
.linha-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.linha-campos.tres { grid-template-columns: 1fr 1fr 1fr; }
.campo-inline { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--texto-suave); font-weight: 600; }
.campo-fixo { padding: 10px 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.campo-fixo small { color: var(--texto-fraco); }
.campo-fixo.grande { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.input-prefixo { display: flex; align-items: center; border: 1px solid var(--linha-forte); border-radius: 10px; background: #fff; overflow: hidden; }
.input-prefixo i { font-style: normal; padding: 0 0 0 12px; color: var(--texto-fraco); font-weight: 600; }
.input-prefixo input { border: 0 !important; box-shadow: none !important; padding-left: 8px; }
.input-prefixo:focus-within { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-claro); }
.grupo-campos { border: 1px solid var(--linha); border-radius: 12px; padding: 12px 16px 2px; margin: 4px 0 14px; }
.grupo-campos legend { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13.5px; padding: 0 6px; }
.desligado { opacity: .35; pointer-events: none; }
.mais-campos summary { cursor: pointer; font-weight: 600; color: var(--texto-suave); margin-bottom: 12px; font-size: 14px; }
.interruptor { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; margin-bottom: 12px; user-select: none; }
.interruptor input { position: absolute; opacity: 0; }
.interruptor span { width: 38px; height: 22px; border-radius: 20px; background: var(--linha-forte); position: relative; transition: background .2s; flex-shrink: 0; }
.interruptor span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.interruptor input:checked + span { background: var(--ok); }
.interruptor input:checked + span::after { transform: translateX(16px); }
.interruptor input:focus-visible + span { box-shadow: 0 0 0 3px var(--acento-claro); }
.escolha-dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.escolha-dupla label { display: flex; flex-direction: column; padding: 10px 12px 10px 38px; position: relative; border: 1px solid var(--linha-forte); border-radius: 10px; cursor: pointer; }
.escolha-dupla input { position: absolute; left: 13px; top: 13px; accent-color: var(--acento); width: 16px; height: 16px; }
.escolha-dupla small { color: var(--texto-fraco); }
.escolha-dupla label:has(input:checked) { border-color: var(--acento); background: var(--acento-claro); }
.previa { margin: -4px 0 14px; font-size: 13.5px; color: var(--texto-suave); }
.previa.destaque { padding: 10px 12px; border-radius: 10px; background: var(--acento-claro); color: var(--texto); }

/* Novo registro: passos e "tiles" */
.passo { display: flex; align-items: center; gap: 10px; margin: 4px 0 10px; }
.passo-n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--acento); color: #fff; font-size: 12.5px; font-weight: 700; }
body[data-ctx="todos"] .passo-n { background: var(--tinta); }
.pessoa-fixa { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--fundo); border-radius: 12px; margin-bottom: 16px; }
.pessoa-fixa > span { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 16px; }
.tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; min-height: 84px; padding: 10px 6px;
  border: 1px solid var(--linha-forte); border-radius: 12px; background: #fff; color: var(--cor); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: border-color .15s, background .15s, transform .1s;
}
.tile span { color: var(--texto); line-height: 1.2; }
.tile:hover { border-color: var(--cor); background: color-mix(in srgb, var(--cor) 6%, white); }
.tile.ativo { border-color: var(--cor); background: color-mix(in srgb, var(--cor) 12%, white); box-shadow: inset 0 0 0 1px var(--cor); }
.tiles.compacto .tile { min-height: 60px; flex-direction: row; gap: 6px; font-size: 12px; }
.tiles.compacto .tile .ico { width: 17px; height: 17px; }

/* ========== Estados vazios ========== */
.vazio { text-align: center; padding: 34px 20px; color: var(--texto-suave); }
.vazio .ico { color: var(--texto-fraco); margin-bottom: 8px; }
.vazio h3 { color: var(--texto); margin-bottom: 4px; }
.vazio p { margin: 0 auto 12px; max-width: 420px; font-size: 14px; }

/* ========== Modal ========== */
.modal-fundo { position: fixed; inset: 0; background: rgba(28,24,21,.5); display: flex; align-items: flex-start; justify-content: center; padding: 5vh 16px; z-index: 100; overflow-y: auto; animation: aparecer .15s ease; }
.modal { background: var(--superficie); border-radius: 18px; width: 100%; max-width: 520px; box-shadow: var(--sombra-forte); animation: subir .2s ease; }
.modal.larga { max-width: 760px; }
.modal-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 18px 20px 10px 24px; }
.modal-topo h2 { font-family: var(--serifa); font-size: 21px; font-weight: 600; }
.modal-sub { margin: 4px 0 0; color: var(--texto-suave); font-size: 13.5px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.modal-corpo { padding: 6px 24px 10px; }
.modal-rodape { display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding: 14px 24px 18px; border-top: 1px solid var(--linha); flex-wrap: wrap; }
.confirmacao p { margin: 0 0 12px; }
@keyframes aparecer { from { opacity: 0; } }
@keyframes subir { from { opacity: 0; transform: translateY(10px); } }

/* ========== Toasts ========== */
#toasts { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 10px; padding: 11px 18px; border-radius: 12px; background: var(--tinta); color: #fff; font-size: 14px; box-shadow: var(--sombra-forte); animation: subir .2s ease; transition: opacity .35s, transform .35s; max-width: 90vw; }
.toast.ok .ico { color: #8FD3A6; }
.toast.erro { background: #7E2A1D; }
.toast.saindo { opacity: 0; transform: translateY(8px); }

/* =====================================================================
   RESPONSIVO
   ===================================================================== */
@media (max-width: 1100px) {
  .grade-estacoes { grid-template-columns: 1fr 1fr; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .grade-rest { grid-template-columns: 1fr 1fr; }
  .grade-rel { grid-template-columns: 1fr; }
  .lp-nome { flex-basis: 180px; }
}
@media (max-width: 860px) {
  .menu-lateral { position: fixed; left: 0; top: 0; z-index: 60; transform: translateX(-100%); transition: transform .25s ease; box-shadow: var(--sombra-forte); }
  body.menu-aberto .menu-lateral { transform: none; }
  body.menu-aberto::after { content: ""; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 50; }
  .btn-icone.so-celular { display: inline-grid; }
  .topo { padding: 10px 16px; gap: 10px; }
  .topo-acoes .btn span { display: none; }
  .topo-acoes .btn { padding: 10px 12px; }
  main { padding: 20px 16px 60px; }
  h1 { font-size: 25px; }
  .grade-2, .grade-2.iguais, .kpis.tres, .grade-acoes { grid-template-columns: 1fr; }
  .grade-2 > .painel { margin-bottom: 0; }
  .tiles { grid-template-columns: repeat(3, 1fr); }
  .linha-pessoa > summary { flex-wrap: wrap; }
  .lp-nome { flex: 1 1 auto; }
  .lp-nums { flex-basis: 100%; justify-content: flex-start; }
  .lp-detalhe { padding-left: 16px; }
  .entrada-conteudo { padding: 28px 16px 36px; }
  .entrada-topo { margin-bottom: 26px; }
}
@media (max-width: 560px) {
  .grade-estacoes, .kpis, .grade-rest { grid-template-columns: 1fr; }
  .card-estacao .ce-img { aspect-ratio: 16 / 9; }
  .linha-campos, .linha-campos.tres, .escolha-dupla { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: 1fr 1fr; }
  .topo-thumb { width: 42px; height: 28px; }
  .topo-quatro { grid-template-columns: repeat(4, 12px); }
  .topo-quatro i { height: 28px; }
  .topo-rest b { font-size: 16px; }
  .modal-corpo, .modal-topo, .modal-rodape { padding-left: 16px; padding-right: 16px; }
  .ft-acoes .btn { flex: 1; }
}

/* =====================================================================
   VERSÃO 2 — lista de funcionários, vales, salários, férias, alertas
   ===================================================================== */

/* Funcionários em LISTA */
.lista-func { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra); overflow: hidden; }
.linha-func { display: grid; grid-template-columns: 38px minmax(200px, 1.6fr) minmax(0, 1.2fr) 150px 36px; align-items: center; gap: 14px;
  padding: 10px 14px 10px 16px; text-decoration: none; border-left: 3px solid var(--rc); transition: background .12s; }
.linha-func + .linha-func { border-top: 1px solid var(--linha); }
.linha-func:hover { background: #FBF9F6; }
.lf-nome { display: flex; flex-direction: column; min-width: 0; }
.lf-nome b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lf-nome small { color: var(--texto-suave); }
.lf-vinc { font-size: 12.5px; color: var(--texto-suave); }
.linha-func .selos { margin: 0; }
.lf-vazio { width: 36px; }
.selo.vermelho { background: var(--erro-fundo); color: var(--erro); }
.selo.laranja { background: var(--alerta-fundo); color: #8a520f; }

/* Menu: grupo "Mais" e crédito da administração */
.nav-mais { margin-top: 6px; }
.nav-mais summary { list-style: none; cursor: pointer; padding: 8px 12px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--lateral-suave); }
.nav-mais summary::-webkit-details-marker { display: none; }
.nav-mais summary::after { content: " +"; }
.nav-mais[open] summary::after { content: " −"; }
.credito-adm { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 0 6px; color: var(--lateral-suave); font-size: 11.5px; line-height: 1.25; }
.credito-adm small { display: block; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; opacity: .75; }
.credito-adm img { height: 22px; width: auto; border-radius: 4px; }
.adm-sinal { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: rgba(255,255,255,.07); }
.entrada-adm { display: flex; align-items: center; gap: 8px; margin: 22px 0 0; color: #BDB3A6; font-size: 12.5px; letter-spacing: .02em; }
.entrada-adm img { height: 22px; width: auto; border-radius: 4px; }
.entrada-adm b { color: #E6DDD1; font-weight: 600; }

/* Painel: alertas */
.alertas { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.alerta-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; text-decoration: none; border: 1px solid transparent; font-size: 14px; }
.alerta-item span { flex: 1; }
.alerta-item em { font-style: normal; font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.alerta-item.vermelho { background: var(--erro-fundo); color: #7d2a1d; border-color: #efc9c0; }
.alerta-item.laranja { background: var(--alerta-fundo); color: #6d410f; border-color: #f0d9b0; }
.alerta-item.azul { background: var(--info-fundo); color: #22384c; border-color: #d3dde8; }
.alerta-item:hover { filter: brightness(.98); }

/* Ficha: Total Vale clicável e discriminação */
.rm.clicavel { border: 0; font: inherit; text-align: left; cursor: pointer; color: inherit; }
.rm.clicavel small { display: inline-flex; align-items: center; gap: 4px; }
.rm.clicavel:hover { box-shadow: inset 0 0 0 2px var(--acento); }
.discrimina { margin-top: 12px; padding: 4px 6px; border: 1px solid var(--linha); border-radius: 12px; }
.falta-dado { color: var(--alerta); font-weight: 600; }

/* Salários a pagar */
.bloco-rest-pag { border-top: 3px solid var(--rc); }
.bloco-rest-pag h2 small { font-weight: 500; color: var(--texto-fraco); font-size: 13px; }
.tabela.pag td { vertical-align: top; }
.tabela tr.linha-paga td { background: #F3F8F4; }
.btn-icone.mini { width: 26px; height: 26px; vertical-align: middle; }

/* Vales a pagar */
.bloco-vales { border-top: 3px solid var(--rc); }
.vale-data { font-size: 13.5px; color: var(--texto-suave); }
.lista-vales { list-style: none; margin: 0; padding: 0; }
.lista-vales li { display: flex; align-items: center; gap: 12px; padding: 10px 2px; }
.lista-vales li + li { border-top: 1px solid var(--linha); }
.lista-vales li.pago { opacity: .78; }
.lv-nome { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lv-nome a { text-decoration: none; }
.lv-nome small { color: var(--texto-suave); }
.lv-nome .selos { margin-top: 4px; }
.lv-valor { font-variant-numeric: tabular-nums; min-width: 96px; text-align: right; }
.lv-status { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 120px; }
.lv-status small { color: var(--texto-suave); font-size: 11.5px; }
.vale-total { display: flex; gap: 18px; justify-content: flex-end; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--linha); font-size: 13.5px; color: var(--texto-suave); }
.vale-total b { color: var(--texto); font-variant-numeric: tabular-nums; }
.vale-total .pend b { color: var(--alerta); }
.vazio-linha { color: var(--texto-fraco); margin: 0; font-size: 14px; }
.pag-confirma { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--fundo); border-radius: 12px; margin-bottom: 14px; }
.pag-confirma > span { flex: 1; display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.pag-valor { font-size: 22px; font-variant-numeric: tabular-nums; }

/* Férias */
.tm.alerta-forte b { color: var(--erro); }
.grupo-ferias { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra); margin-bottom: 12px; overflow: hidden; }
.grupo-ferias > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 14px 18px; }
.grupo-ferias > summary::-webkit-details-marker { display: none; }
.grupo-ferias > summary > span { font-weight: 700; color: var(--texto-suave); }
.grupo-ferias > summary small { color: var(--texto-suave); font-size: 13px; }
.grupo-ferias.nivel-vencida { border-left: 4px solid var(--erro); }
.grupo-ferias.nivel-critico { border-left: 4px solid #D9622B; }
.grupo-ferias.nivel-atencao { border-left: 4px solid var(--alerta); }
.grupo-ferias.nivel-ok { border-left: 4px solid var(--ok); }
.lista-ferias { list-style: none; margin: 0; padding: 0 18px 8px; }
.lista-ferias li { display: grid; grid-template-columns: 38px minmax(160px, 1.3fr) 1.1fr .8fr 1.2fr auto; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--linha); }
.lista-ferias .lf-nome a { text-decoration: none; }
.fe-datas { display: flex; flex-direction: column; font-size: 13px; font-variant-numeric: tabular-nums; }
.fe-datas small { color: var(--texto-fraco); font-size: 11px; }
.fe-status { font-size: 13px; font-weight: 600; color: var(--texto-suave); }
.nivel-vencida .fe-status, .nivel-critico .fe-status { color: var(--erro); }

/* Relatórios: "Mais relatórios" */
.mais-rel { margin-top: 18px; }
.mais-rel > summary { cursor: pointer; font-weight: 700; color: var(--texto-suave); margin-bottom: 14px; }

@media (max-width: 860px) {
  .linha-func { grid-template-columns: 38px 1fr 36px; }
  .linha-func .selos, .linha-func .lf-valor { grid-column: 2 / 4; text-align: left; }
  .linha-func .lf-valor { align-items: flex-start; }
  .lista-ferias li { grid-template-columns: 38px 1fr auto; }
  .lista-ferias .fe-datas { display: none; }
  .lista-ferias .fe-status { grid-column: 2 / 4; }
  .lista-vales li { flex-wrap: wrap; }
}

/* Versão 2.1 — lista, resumo como conta, lançamentos editáveis, PIX */
.lf-valor { display: flex; flex-direction: column; align-items: flex-end; font-weight: 700; font-variant-numeric: tabular-nums; font-size: 14px; color: var(--tinta-2); }
.lf-valor small { font-weight: 500; font-size: 11px; color: var(--texto-fraco); }
.resumo-mes.conta { grid-template-columns: 1fr auto 1.4fr auto 1fr; align-items: stretch; }
.sinal-conta { align-self: center; font-size: 26px; font-weight: 300; color: var(--texto-fraco); }
.resumo-mes.secundario { margin-top: 10px; grid-template-columns: 1.6fr 1fr 1fr 1fr; }
.resumo-mes.secundario .rm { background: transparent; border: 1px solid var(--linha); }
.resumo-mes.secundario .rm b { font-size: 17px; }
.tabela.lanc td { vertical-align: middle; }
.tabela.lanc td:nth-child(3) { color: var(--texto-suave); font-size: 13.5px; }
.tabela .acoes { white-space: nowrap; text-align: right; width: 1%; }
.pix { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pix-btn { padding: 2px 8px !important; font-size: 12px !important; }
@media (max-width: 860px) {
  .resumo-mes.conta { grid-template-columns: 1fr; }
  .sinal-conta { display: none; }
  .resumo-mes.secundario { grid-template-columns: 1fr 1fr; }
}

.titulo-secao { margin: 26px 0 12px; font-size: 15px; color: var(--texto-suave); }

/* Crédito da administração com logo (prévia) */
.credito-adm { align-items: center; gap: 10px; margin-top: 12px; padding: 10px 8px 2px; border-top: 1px solid rgba(255,255,255,.08); }
.credito-adm img { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }
.credito-adm b { display: block; font-size: 12px; font-weight: 600; color: var(--lateral-txt); }
.credito-adm em { display: block; font-style: normal; font-size: 11px; }
.credito-adm a { font-size: 11px; color: var(--lateral-suave); text-decoration: none; }
.credito-adm a:hover { color: #fff; text-decoration: underline; }
.entrada-adm { align-items: center; gap: 12px; line-height: 1.5; }
.entrada-adm img { width: 44px; height: 44px; border-radius: 50%; }
.credito-adm img { width: 34px; height: 34px; }
.credito-adm { margin-top: 8px; padding-top: 8px; }
#nav a { padding: 8px 12px; }
#seletor-rest button { padding: 6px 10px; }
.bloco-rest { margin-bottom: 10px; padding-bottom: 10px; }
.marca { padding-bottom: 14px; margin-bottom: 10px; }

/* Topo da ficha (prévia): dados alinhados em grade */
.ficha-topo { align-items: flex-start; row-gap: 14px; }
.ficha-topo .ft-info { align-self: center; }
.ft-sub { margin-top: 4px !important; }
.ft-acoes { align-self: center; }
.ft-dados { flex-basis: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px 18px;
  padding-top: 14px; border-top: 1px solid var(--linha); }
.ft-dado small { display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-fraco); margin-bottom: 3px; }
.ft-dado > span { font-size: 14px; color: var(--texto); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ft-dado em { font-style: normal; color: var(--texto-suave); font-size: 12.5px; flex-basis: 100%; }
.ft-obs { flex-basis: 100%; margin: -4px 0 0; font-size: 13px; color: var(--texto-suave); }

/* ===== Login (versão local): foto ao lado ===== */
body.modo-login { overflow: hidden; }
.login { position: fixed; inset: 0; z-index: 50; display: grid; grid-template-columns: 54fr 46fr; background: var(--fundo); overflow-y: auto; }
.lg-foto { display: flex; flex-direction: column; justify-content: space-between; background: #14110F; color: #F7F2EA; min-height: 100vh; }
.lg-img { aspect-ratio: 3 / 2; background-size: cover; background-position: center; position: relative; }
.lg-img::after { content: ""; position: absolute; inset: auto 0 0 0; height: 30%; background: linear-gradient(180deg, rgba(20,17,15,0), #14110F); }
.lg-chamada { padding: 24px clamp(20px, 5%, 64px) clamp(28px, 7vh, 64px); }
.lg-frase { margin: 0 0 14px; font-family: var(--serifa); font-size: clamp(28px, 3.3vw, 46px); line-height: 1.1; color: #F7F2EA; }
.lg-frase i { color: #E8D7B5; }
.lg-chamada small { font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: #D9B56A; }
.lg-painel { display: flex; align-items: center; justify-content: center; padding: 40px clamp(20px, 6vw, 96px); }
.lg-cartao { width: min(420px, 100%); display: flex; flex-direction: column; gap: 14px; }
.lg-marca { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.lg-marca b { display: block; font-family: var(--serifa); font-size: 18px; font-weight: 600; }
.lg-marca small { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--texto-fraco); }
.lg-rotulo { font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--texto-suave); }
.lg-titulo { margin: 0; font-size: clamp(30px, 3vw, 40px); }
.lg-sub { margin: -6px 0 8px; color: var(--texto-suave); }
.lg-campo { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--texto-suave); }
.lg-campo input, .lg-campo select { font: inherit; font-size: 15px; font-weight: 400; color: var(--texto); padding: 13px 14px; border: 1px solid var(--linha-forte); border-radius: 10px; background: #fff; }
.lg-campo input:focus, .lg-campo select:focus { outline: 2px solid var(--tinta); outline-offset: 1px; }
.lg-dica { margin: 0; font-size: 13.5px; color: var(--texto-suave); }
.lg-erro { margin: 0; padding: 9px 12px; border-radius: 8px; background: var(--erro-fundo); color: var(--erro); font-size: 13.5px; }
.lg-botao { justify-content: center; padding: 14px; font-size: 15.5px; margin-top: 6px; }
.lg-link { background: none; border: 0; color: var(--texto-suave); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; align-self: center; }
.lg-rodape { display: flex; align-items: center; gap: 10px; margin: 18px 0 0; padding: 12px 14px; border: 1px solid var(--linha); border-radius: 10px; background: var(--superficie); font-size: 12px; color: var(--texto-fraco); line-height: 1.4; }
.lg-rodape img { width: 34px; height: 34px; border-radius: 50%; }
.lg-rodape b { color: var(--texto-suave); font-weight: 600; }
@media (max-width: 800px) {
  .login { display: block; }
  .lg-foto { min-height: 0; }
  .lg-chamada { padding: 4px 20px 24px; }
  .lg-frase { font-size: 24px; margin-bottom: 10px; }
  .lg-chamada small { font-size: 10.5px; letter-spacing: .16em; }
  .lg-painel { padding: 28px 20px 36px; }
}
.tabela .negativo { color: var(--erro); }

/* Salários em lote */
.passos-lote { margin: 6px 0 14px; padding-left: 20px; color: var(--texto-suave); }
.passos-lote li { margin: 3px 0; }

/* ===== Versão online (Supabase) ===== */
.carregando-online { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: #FBF8F3; z-index: 50; padding: 16px; text-align: center; font-size: 1.05rem; }
.carregando-online .erro { color: #A3261B; max-width: 480px; }
.sessao-online { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 0; padding: 8px 10px; border-radius: 10px; background: rgba(0,0,0,.04); }
.sessao-online span { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.sessao-online small { font-size: .72rem; opacity: .7; }
.sessao-online b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.faixa-leitura { background: #FFF4D6; color: #6B4E00; border-bottom: 1px solid #EBD9A6; padding: 8px 16px; font-size: .9rem; }