:root {
  /* base hues sampled from the Norte Agro Projetos logo */
  --brown-900: #37312a;
  --brown-700: #4c4438;
  --brown-500: #7a7061;
  --olive-700: #6e8548;
  --olive-500: #86a058;
  --olive-300: #a9c07e;
  --paper-100: #f4f4f2;
  --paper-050: #fbfaf7;
  --ink-950: #141210;

  --bg: var(--paper-100);
  --bg-radial: radial-gradient(1000px 520px at 50% -6%, #fbfbfa 0%, var(--paper-100) 65%);
  --panel: #ffffff;
  --panel-2: #eeece4;
  --border: rgba(55, 49, 42, 0.1);
  --border-strong: rgba(55, 49, 42, 0.18);
  --text: var(--brown-900);
  --text-muted: var(--brown-500);
  --text-faint: rgba(55, 49, 42, 0.45);
  --accent: var(--olive-700);
  --accent-soft: rgba(110, 133, 72, 0.12);
  --success: var(--olive-700);
  --danger: #b5503a;
  --danger-soft: rgba(181, 80, 58, 0.1);
  /* aniversário (ponto): dourado/âmbar — deliberadamente diferente do
     verde (accent) e do vermelho (danger/holiday), pra ler como "dia
     especial", não como alerta nem como o próprio destaque da marca. */
  --birthday-soft: rgba(201, 147, 44, 0.16);
  --shadow: 0 1px 2px rgba(40, 35, 28, 0.06), 0 8px 24px -12px rgba(40, 35, 28, 0.18);
  --focus-ring: 0 0 0 3px rgba(110, 133, 72, 0.38);
  --avatar-bg: #eeece4;
  --avatar-icon: var(--brown-500);
  --btn-text: #fbfaf7;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--ink-950);
    --bg-radial: radial-gradient(1000px 520px at 50% -6%, #221d16 0%, var(--ink-950) 65%);
    --panel: #221e18;
    --panel-2: #2a2419;
    --border: rgba(246, 245, 241, 0.1);
    --border-strong: rgba(246, 245, 241, 0.18);
    --text: var(--paper-100);
    --text-muted: #b3a996;
    --text-faint: rgba(246, 245, 241, 0.45);
    --accent: var(--olive-300);
    --accent-soft: rgba(169, 192, 126, 0.16);
    --success: var(--olive-300);
    --danger: #e08a72;
    --danger-soft: rgba(224, 138, 114, 0.16);
    --birthday-soft: rgba(224, 184, 92, 0.2);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 14px 34px -16px rgba(0, 0, 0, 0.65);
    --focus-ring: 0 0 0 3px rgba(169, 192, 126, 0.4);
    --avatar-bg: #2a2419;
    --avatar-icon: #b3a996;
    --btn-text: var(--ink-950);
  }
}
:root[data-theme="dark"] {
  --bg: var(--ink-950);
  --bg-radial: radial-gradient(1000px 520px at 50% -6%, #221d16 0%, var(--ink-950) 65%);
  --panel: #221e18;
  --panel-2: #2a2419;
  --border: rgba(246, 245, 241, 0.1);
  --border-strong: rgba(246, 245, 241, 0.18);
  --text: var(--paper-100);
  --text-muted: #b3a996;
  --text-faint: rgba(246, 245, 241, 0.45);
  --accent: var(--olive-300);
  --accent-soft: rgba(169, 192, 126, 0.16);
  --success: var(--olive-300);
  --danger: #e08a72;
  --danger-soft: rgba(224, 138, 114, 0.16);
  --birthday-soft: rgba(224, 184, 92, 0.2);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 14px 34px -16px rgba(0, 0, 0, 0.65);
  --focus-ring: 0 0 0 3px rgba(220, 182, 88, 0.45);
  --avatar-bg: #2a2419;
  --avatar-icon: #b3a996;
  --btn-text: var(--ink-950);
}
:root[data-theme="light"] {
  --bg: var(--paper-100);
  --bg-radial: radial-gradient(1000px 520px at 50% -6%, #fbfbfa 0%, var(--paper-100) 65%);
  --panel: #ffffff;
  --panel-2: #eeece4;
  --border: rgba(55, 49, 42, 0.1);
  --border-strong: rgba(55, 49, 42, 0.18);
  --text: var(--brown-900);
  --text-muted: var(--brown-500);
  --text-faint: rgba(55, 49, 42, 0.45);
  --accent: var(--olive-700);
  --accent-soft: rgba(110, 133, 72, 0.12);
  --success: var(--olive-700);
  --danger: #b5503a;
  --danger-soft: rgba(181, 80, 58, 0.1);
  --birthday-soft: rgba(201, 147, 44, 0.16);
  --shadow: 0 1px 2px rgba(40, 35, 28, 0.06), 0 8px 24px -12px rgba(40, 35, 28, 0.18);
  --focus-ring: 0 0 0 3px rgba(110, 133, 72, 0.38);
  --avatar-bg: #eeece4;
  --avatar-icon: var(--brown-500);
  --btn-text: #fbfaf7;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg-radial), var(--bg);
  color: var(--text);
  font-family: -apple-system, "Segoe UI", "Inter", Roboto, Helvetica, Arial, sans-serif;
  position: relative;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  width: 100%;
  background: var(--panel); border: 1px solid var(--border); border-radius: 999px;
  padding: 10px 20px; box-shadow: var(--shadow);
  margin-bottom: 28px;
}

.topbar-search {
  display: flex; align-items: center; gap: 8px;
  width: 100%; max-width: 320px; flex: 1 1 240px;
  color: var(--text-faint);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 7px 14px;
}
.topbar-search:focus-within { border-color: var(--accent); }
.topbar-search svg { width: 15px; height: 15px; flex: none; }
.topbar-search input {
  flex: 1; min-width: 0; border: none; background: none; font: inherit;
  font-size: 13px; color: var(--text);
}
.topbar-search input::placeholder { color: var(--text-faint); }
.topbar-search input:focus-visible { outline: none; }

.topbar-actions { display: flex; align-items: center; gap: 14px; flex: none; }

.theme-toggle, .icon-btn {
  width: 22px; height: 22px; flex: none;
  background: none; border: none;
  display: grid; place-items: center; cursor: pointer; color: var(--text-muted);
}
.theme-toggle:hover, .icon-btn:hover { color: var(--accent); }
.theme-toggle:focus-visible, .icon-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 999px; }
.theme-toggle svg, .icon-btn svg { width: 17px; height: 17px; }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }

/* Seletor de idioma — um botão só (bandeira + sigla do idioma atual) que
   abre uma lista com as três opções (mesmo formato: bandeira + sigla).
   Fica sempre ao lado do theme-toggle (tanto na topbar quanto na tela de
   login, ver .login-corner-actions abaixo). Cada instância é tratada como
   "mais uma cópia" (ver frontend/assets/js/i18n.js), não a única no DOM. */
.lang-select { position: relative; flex: none; }
.lang-select-toggle {
  display: flex; align-items: center; gap: 5px; flex: none;
  background: none; border: 1px solid var(--border); border-radius: 999px;
  padding: 5px 10px 5px 9px; cursor: pointer; font: inherit; color: var(--text-muted);
}
.lang-select-toggle:hover { border-color: var(--accent); color: var(--accent); }
.lang-select-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* Bandeiras de verdade (SVG local, ver frontend/assets/img/flags/) em vez de
   emoji — proporção 4:3 do arquivo original, do tamanho da sigla ao lado
   (mesma altura aproximada do texto) pra ler como uma coisa só; sem
   contorno próprio — quem enquadra bandeira+sigla é a borda do botão
   (.lang-select-toggle/.lang-btn), não cada bandeira isolada. */
.lang-select-flag {
  width: 14px; height: 10.5px; flex: none; border-radius: 1.5px;
  object-fit: cover;
}
.lang-select-code { font-size: 11px; font-weight: 700; letter-spacing: 0.03em; line-height: 1; }
.lang-select-caret { width: 12px; height: 12px; flex: none; transition: transform 0.15s ease; }
.lang-select.open .lang-select-caret { transform: rotate(180deg); }

.lang-select-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 20;
  display: flex; flex-direction: column; gap: 2px; min-width: 118px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow); padding: 6px;
}
.lang-select-menu[hidden] { display: none; }

.lang-btn {
  display: flex; align-items: center; gap: 6px; width: 100%;
  background: none; border: none; border-radius: 8px; padding: 7px 9px;
  cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-muted); text-align: left;
}
.lang-btn:hover { background: var(--accent-soft); color: var(--accent); }
.lang-btn.active { background: var(--accent-soft); color: var(--accent); }
.lang-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Notificações: sino com bolinha (aparece só quando tem algo pra ver) que
   abre um painel flutuante — mesmo espírito do .lang-select (botão +
   painel ancorado embaixo), só que sem opções pra escolher, é lista. */
.notif-wrap { position: relative; flex: none; }
.notif-dot {
  position: absolute; top: 1px; right: 1px; width: 8px; height: 8px;
  border-radius: 999px; background: var(--danger); box-shadow: 0 0 0 2px var(--panel);
}
.notif-dot[hidden] { display: none; }

.notif-panel {
  position: absolute; top: calc(100% + 10px); right: -10px; z-index: 20;
  width: 300px; max-width: calc(100vw - 40px);
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow); padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.notif-panel[hidden] { display: none; }
.notif-panel-title { font-size: 12.5px; font-weight: 700; color: var(--text); }
.notif-list { display: flex; flex-direction: column; gap: 6px; max-height: 280px; overflow-y: auto; }
.notif-empty { font-size: 12px; color: var(--text-muted); padding: 4px 2px; }
.notif-row { display: flex; align-items: flex-start; gap: 8px; padding: 8px 9px; border-radius: 10px; background: var(--panel-2); }
.notif-row-icon { font-size: 15px; line-height: 1.3; flex: none; }
.notif-row-text { font-size: 12.5px; color: var(--text); line-height: 1.4; }
.notif-row-text b { font-weight: 700; }

.topbar-divider { width: 1px; height: 20px; background: var(--border); flex: none; }

.topbar-user {
  display: flex; align-items: center; gap: 10px;
  background: none; border: none; padding: 4px 6px; margin: -4px -6px; border-radius: 10px;
  cursor: pointer; font: inherit; text-align: left;
}
.topbar-user[hidden] { display: none; }
.topbar-user:hover { background: var(--accent-soft); }
.topbar-user:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.topbar-user-icon {
  width: 34px; height: 34px; border-radius: 999px; flex: none; overflow: hidden;
  background: var(--avatar-bg); color: var(--avatar-icon);
  display: grid; place-items: center;
  box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--accent);
}
.topbar-user-icon svg { width: 17px; height: 17px; }
.topbar-user-icon img { width: 100%; height: 100%; object-fit: cover; }
.topbar-user-info { display: flex; flex-direction: column; line-height: 1.3; }
.topbar-user-name { font-size: 13px; font-weight: 700; color: var(--text); }
.topbar-user-email { font-size: 11px; color: var(--text-muted); }

/* --- login view layout --- */
.view-login { position: relative; padding: 56px 20px; min-height: 100vh; }
.login-stage { position: relative; z-index: 1; width: 100%; max-width: 420px; margin: 0 auto; }

/* Idioma + tema no canto da tela de login — mesmos componentes/classes da
   topbar (.lang-select/.theme-toggle), só reposicionados aqui por cima de
   tudo (z-index maior que .login-stage) já que a tela de login não tem
   uma topbar própria pra encaixar eles. */
.login-corner-actions {
  position: absolute; top: 20px; right: 20px; z-index: 2;
  display: flex; align-items: center; gap: 12px;
}

/* --- app shell layout (users view) --- */
.app-shell { position: relative; z-index: 1; display: flex; min-height: 100vh; }
.sidebar {
  width: 240px; flex: none; position: sticky; top: 20px; height: calc(100vh - 40px);
  background: var(--panel); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow);
  margin: 20px 0 20px 20px;
  padding: 28px 18px; display: flex; flex-direction: column; gap: 30px;
  overflow: hidden;
  transition: width 0.2s ease, padding 0.2s ease;
}
.sidebar-logo {
  display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%;
  background: none; border: none; padding: 2px; cursor: pointer; font: inherit; text-align: left;
}
.sidebar-logo:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 8px; }
/* Ícone avulso (só a folha, SVG) — usado SÓ com o menu colapsado; com o
   menu expandido quem aparece é a logo completa abaixo (ela já traz a
   folha embutida na imagem, então mostrar os dois juntos duplicaria a
   folha). */
.sidebar-logo-collapsed-icon { display: none; width: 36px; height: 36px; transform: none; }
/* Logo completa (folha + texto), troca por tema — arquivos em
   frontend/assets/img/logo-*.png, sem fundo (PNG com alpha). Altura fixa, largura
   segue a proporção própria de cada arquivo (não são idênticas). */
.sidebar-wordmark-img { display: flex; align-items: center; }
.sidebar-logo-img { height: 34px; width: auto; display: block; }
.sidebar-logo-img.logo-dark { display: none; }
:root[data-theme="dark"] .sidebar-logo-img.logo-light { display: none; }
:root[data-theme="dark"] .sidebar-logo-img.logo-dark { display: block; }
.sidebar-divider { width: 100%; border: none; border-top: 1px solid var(--border); margin: 0; flex: none; }
/* .sidebar tem gap:30px entre todos os filhos — bom pro resto, mas
   deixava um vão grande entre a logo e o traço logo abaixo dela.
   Margem negativa só nesse par (não mexe no espaçamento em nenhum outro
   lugar, inclusive o outro <hr> lá no rodapé). */
.sidebar-logo + .sidebar-divider { margin-top: -24px; }
.sidebar-nav { display: flex; flex-direction: column; gap: 4px; }
.sidebar-nav-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px;
  font-size: 13.5px; font-weight: 600; color: var(--text-muted); white-space: nowrap;
  background: none; border: none; margin: 0; width: 100%;
  font-family: inherit; line-height: normal; cursor: pointer; text-align: left;
  /* position+z-index cria um stacking context só do botão, pra garantir
     que o ::before (z-index -1, ver abaixo) fique atrás do ícone/label
     mesmo eles sendo conteúdo "normal" — sem isso um z-index negativo
     pode acabar comparado lá em cima na árvore e sumir atrás do painel
     da sidebar inteira. overflow:hidden corta a luz nos cantos
     arredondados do próprio botão. */
  position: relative; z-index: 0; overflow: hidden;
}
.sidebar-nav-item svg { width: 17px; height: 17px; flex: none; }
.sidebar-nav-item:hover { color: var(--text); }
.sidebar-nav-item:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.sidebar-nav-item.active { background: var(--accent-soft); color: var(--accent); }
.sidebar-nav-item.active:hover { color: var(--accent); }

/* "Luzinha" ao passar o cursor: um preenchimento que entra da esquerda
   pra direita até cobrir o botão inteiro (igual o item ativo) e some
   assim que o cursor sai, sem alterar ícone/texto (fica atrás, graças ao
   z-index -1 + stacking context acima). Cor sólida --accent-soft, sem
   gradiente — o MESMO tom exato do fundo de .sidebar-nav-item.active
   logo acima, não uma variação. */
.sidebar-nav-item::before {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; width: 0;
  background: var(--accent-soft);
  opacity: 0; pointer-events: none;
  transition: opacity 0.15s ease;
}
.sidebar-nav-item:hover::before { opacity: 1; animation: sidebarNavSweep 0.35s ease-out forwards; }
@keyframes sidebarNavSweep {
  from { width: 0; }
  to { width: 100%; }
}
.sidebar-footer { margin-top: auto; display: flex; flex-direction: column; gap: 4px; }

.sidebar-action {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px; border-radius: 9px; border: none; background: none; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--text-muted); text-align: left;
  white-space: nowrap;
}
.sidebar-action:hover { color: var(--accent); background: var(--accent-soft); }
.sidebar-action:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.sidebar-action svg { width: 17px; height: 17px; flex: none; }
.sidebar-toggle .icon-expand { display: none; }

/* padding-top igual à margem superior do .sidebar (20px) — assim a
   topbar (primeira coisa dentro de .content) começa exatamente na mesma
   altura que o topo do menu lateral, em vez de ficar mais baixa. */
.content { flex: 1; min-width: 0; padding: 20px 44px 56px; }

@media (min-width: 721px) {
  .sidebar.collapsed { width: 76px; padding-left: 14px; padding-right: 14px; }
  .sidebar.collapsed .sidebar-logo { justify-content: center; }
  .sidebar.collapsed .sidebar-logo-collapsed-icon { display: flex; }
  .sidebar.collapsed .sidebar-wordmark-img,
  .sidebar.collapsed .nav-label,
  .sidebar.collapsed .action-label { display: none; }
  .sidebar.collapsed .sidebar-nav-item,
  .sidebar.collapsed .sidebar-action { justify-content: center; padding-left: 0; padding-right: 0; }
  .sidebar.collapsed .sidebar-toggle .icon-collapse { display: none; }
  .sidebar.collapsed .sidebar-toggle .icon-expand { display: block; }
}

@media (max-width: 720px) {
  .app-shell { flex-direction: column; }
  .sidebar {
    width: auto; height: auto; position: relative; flex-direction: row;
    align-items: center; justify-content: space-between; padding: 14px 18px; gap: 16px;
    margin: 16px 16px 0; border-radius: 18px;
  }
  .sidebar-nav { flex-direction: row; }
  .sidebar-footer { flex-direction: row; margin-top: 0; }
  .sidebar-toggle { display: none; }
  /* Linhas horizontais não fazem sentido na barra virando row nesse
     breakpoint — o gap entre os itens já separa visualmente. */
  .sidebar-divider { display: none; }
  .content { padding: 24px 20px 40px; }
}

.letterhead { text-align: center; margin-bottom: 36px; }
.mark { display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.leaf-icon { width: 24px; height: 24px; flex: none; color: var(--accent); transform: translateY(-2px); }
.leaf-icon svg { width: 100%; height: 100%; }
/* Mesma logo (arquivo) e mesma troca por tema do menu lateral — ver
   .sidebar-logo-img acima. Altura maior aqui porque é o destaque da tela
   de login, não um item de menu; largura segue a proporção própria do
   arquivo. */
.letterhead-logo-img { display: inline-flex; align-items: center; justify-content: center; }
.letterhead-logo { height: clamp(48px, 9vw, 72px); width: auto; display: block; }
.letterhead-logo.logo-dark { display: none; }
:root[data-theme="dark"] .letterhead-logo.logo-light { display: none; }
:root[data-theme="dark"] .letterhead-logo.logo-dark { display: block; }
.tagline { max-width: 340px; margin: 14px auto 0; font-size: 12.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; }
.tagline::before, .tagline::after { content: "·"; color: var(--accent); margin: 0 8px; }

.view[hidden] { display: none; }
.view.anim { animation: viewIn 0.28s ease both; }
@keyframes viewIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* shared field styles */
.field { display: flex; flex-direction: column; gap: 5px; }
/* Dois .field lado a lado (ex.: cargo+aniversário, senha+confirmar senha no
   modal) — cada um ocupa metade do .modal-panel; a própria .field-row é que
   vira o filho direto do .modal-panel (herda o gap de 14px dele). */
.field-row { display: flex; gap: 14px; }
.field-row .field { flex: 1; min-width: 0; }
.field label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); font-weight: 700; }
.field input, .field select, .field textarea {
  font: inherit; font-size: 13.5px; padding: 10px 12px; border-radius: 9px;
  border: 1px solid var(--border); background: var(--panel-2); color: var(--text); width: 100%;
}
.field textarea { resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-faint); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }

.btn {
  font: inherit; font-size: 13.5px; font-weight: 700; padding: 10px 16px; border-radius: 9px;
  border: 1px solid transparent; background: var(--accent); color: var(--btn-text); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.btn[hidden] { display: none; }
.btn:hover { filter: brightness(1.08); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn svg { width: 13px; height: 13px; }
.btn.secondary { background: transparent; border-color: var(--border-strong); color: var(--text); }
.btn.secondary:hover { border-color: var(--accent); color: var(--accent); }
.btn.danger { background: var(--danger); }
.btn.block { width: 100%; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; filter: none; pointer-events: none; }

.error-msg { font-size: 11.5px; color: var(--danger); font-weight: 600; min-height: 14px; }
.error-msg:empty { display: none; }
.success-msg { font-size: 11.5px; color: var(--success); font-weight: 600; min-height: 14px; }
.success-msg:empty { display: none; }
/* Aviso de correção pendente no card de ponto pessoal — âmbar (mesmo tom
   do aniversário no Ponto), pra ler como "atenção", não como erro
   (--danger) nem como sucesso (--success). */
.ponto-pending-note {
  font-size: 12px; font-weight: 600; color: var(--text); margin: 0;
  padding: 8px 12px; border-radius: 9px; background: var(--birthday-soft);
}

/* --- login view --- */
.login-panel {
  width: 100%; max-width: 360px; margin: 0 auto;
  background: var(--panel); border: 1px solid var(--border); border-radius: 18px;
  box-shadow: var(--shadow); padding: 30px 28px 26px;
  display: flex; flex-direction: column; gap: 16px;
}
.login-panel-title { font-size: 15px; font-weight: 700; text-align: center; }

/* Botão que se comporta/parece um link — hoje só "Esqueci minha senha",
   mas genérico o bastante pra reaproveitar em qualquer outro CTA de baixa
   ênfase dentro de um .field-column/.modal-panel. */
.link-btn {
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--accent);
  background: none; border: none; padding: 2px; cursor: pointer; align-self: center;
  margin-top: -4px;
}
.link-btn:hover { text-decoration: underline; }
.link-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }

.picker-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.picker-icon { width: 22px; height: 22px; color: var(--accent); flex: none; }
/* Empurra só esse botão pro fim da linha, sem virar justify-content:
   space-between no .picker-head (quebraria o par ícone+título nas outras
   páginas, que não têm um terceiro item pra empurrar). */
.ponto-my-history-btn { margin-left: auto; padding: 7px 12px; font-size: 12.5px; }
.ponto-my-history-btn svg { width: 13px; height: 13px; }
.picker-icon svg { width: 100%; height: 100%; }
.picker-title { font-size: 17px; font-weight: 700; }
.picker-hint { font-size: 12px; color: var(--text-muted); }

/* Abas "Usuários"/"Cargos" — ocupam a largura toda (cada .users-tab com
   flex:1 divide exatamente ao meio), com um respiro pequeno entre elas
   (gap) em vez de ficarem grudadas — por isso cada uma tem sua própria
   borda/cantos arredondados agora, não é mais um controle segmentado de
   peça única. Trocam só o que aparece dentro da página (ver .users-tab em
   app.js); não mexem na sidebar. Mesma paleta de .sidebar-nav-item.active
   pro estado selecionado. */
.users-tabs { display: flex; gap: 8px; margin-bottom: 20px; }
.users-tab {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 16px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--panel-2); color: var(--text-muted); font: inherit; font-size: 12.5px; font-weight: 700;
  cursor: pointer;
}
.users-tab svg { width: 15px; height: 15px; flex: none; }
.users-tab:hover { color: var(--text); }
.users-tab:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.users-tab.active { background: var(--accent-soft); color: var(--accent); border-color: transparent; }

/* --- users view: toolbar --- */
.toolbar {
  display: flex; align-items: center; gap: 10px; margin-bottom: 20px; flex-wrap: wrap;
}
.search-box {
  flex: 0 1 260px; min-width: 140px; display: flex; align-items: center; gap: 7px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px;
  padding: 7px 13px;
}
.search-box svg { width: 14px; height: 14px; color: var(--text-faint); flex: none; }
.search-box input {
  flex: 1; min-width: 0; background: none; border: none; color: var(--text); font: inherit; font-size: 13px;
}
.search-box input::placeholder { color: var(--text-faint); }
.search-box input:focus-visible { outline: none; }

.view-toggle {
  width: 34px; height: 34px; flex: none; border-radius: 999px;
  border: 1px solid var(--border); background: var(--panel-2); color: var(--text-muted);
  display: grid; place-items: center; cursor: pointer;
}
.view-toggle:hover { border-color: var(--accent); color: var(--accent); }
.view-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.view-toggle svg { width: 17px; height: 17px; }
.view-toggle .icon-list { display: none; }
.view-toggle[data-mode="list"] .icon-grid { display: none; }
.view-toggle[data-mode="list"] .icon-list { display: block; }

/* Último item do .toolbar (depois de search-box/view-toggle) — margin-left:
   auto empurra só ele pro fim da linha, sem afetar os irmãos anteriores
   (que ficam no início, com gap normal entre si). */
#open-create { margin-left: auto; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(246px, 1fr)); gap: 17px; }

.grid.is-list { grid-template-columns: 1fr; gap: 8px; }
.grid.is-list .card {
  display: grid; grid-template-columns: 40px 1fr auto auto auto;
  grid-template-rows: auto auto; align-items: center;
  column-gap: 16px; row-gap: 0; padding: 10px 18px; text-align: left;
}
.grid.is-list .avatar { grid-column: 1; grid-row: 1 / 3; width: 38px; height: 38px; margin-bottom: 0; }
.grid.is-list .avatar svg { width: 19px; height: 19px; }
.grid.is-list .card-name { grid-column: 2; grid-row: 1; }
.grid.is-list .card-email { grid-column: 2; grid-row: 2; margin-bottom: 0; }
.grid.is-list .card-meta {
  grid-column: 3; grid-row: 1 / 3; flex-direction: row; gap: 20px;
  border-top: none; padding-top: 0; margin-top: 0;
}
.grid.is-list .card-top {
  grid-column: 4; grid-row: 1 / 3; flex-direction: row; align-items: center;
  width: auto; margin-bottom: 0; gap: 8px;
}
.grid.is-list .card-actions {
  grid-column: 5; grid-row: 1 / 3; width: auto;
  border-top: none; margin-top: 0; padding-top: 0; gap: 14px;
}
@media (max-width: 640px) {
  .grid.is-list .card { grid-template-columns: 34px 1fr auto auto; }
  .grid.is-list .card-meta { display: none; }
}

.card {
  position: relative;
  background: var(--panel); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: var(--shadow); padding: 16px 18px 13px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.card:hover { border-color: var(--border-strong); transform: translateY(-2px); }

.card-top { display: flex; align-items: center; justify-content: flex-end; width: 100%; margin-bottom: 7px; }
.status-dot { width: 22px; height: 22px; display: grid; place-items: center; }
.status-dot svg { width: 22px; height: 22px; }
.status-dot.ok { color: var(--success); }
.status-dot.unknown { color: var(--text-faint); }

.avatar {
  width: 58px; height: 58px; border-radius: 999px; background: var(--avatar-bg);
  display: grid; place-items: center; color: var(--avatar-icon); margin-bottom: 5px;
  overflow: hidden;
}
.avatar svg { width: 28px; height: 28px; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }

.card-name { font-size: 16px; font-weight: 700; }
.card-email { font-size: 13px; color: var(--text-muted); margin-bottom: 5px; word-break: break-all; }

.card-meta {
  width: 100%; border-top: 1px solid var(--border); padding-top: 12px; margin-top: 5px;
  display: flex; flex-direction: column; gap: 4px; text-align: left;
}
.card-meta div { font-size: 13.5px; color: var(--text-muted); }
.card-meta b { color: var(--text); font-weight: 600; }

.card-actions {
  width: 100%; border-top: 1px solid var(--border); margin-top: 12px; padding-top: 12px;
  display: flex; align-items: center; justify-content: center; gap: 26px;
}
.icon-btn {
  background: none; border: none; cursor: pointer; color: var(--text-muted);
  display: grid; place-items: center; padding: 5px; border-radius: 6px;
}
.icon-btn svg { width: 19px; height: 19px; }
.icon-btn:hover { color: var(--accent); }
.icon-btn.danger:hover { color: var(--danger); }
.icon-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.empty { grid-column: 1 / -1; text-align: center; font-size: 12.5px; color: var(--text-muted); padding: 30px 0; }

/* --- modal (add / edit user) --- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(4, 7, 12, 0.65);
  display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 10;
}
.modal-overlay[hidden] { display: none; }
.modal-panel {
  width: 100%; max-width: 360px; background: var(--panel); border: 1px solid var(--border-strong);
  border-radius: 18px; box-shadow: var(--shadow); padding: 24px 24px 22px;
  display: flex; flex-direction: column; gap: 14px;
}
/* Modal de criar/editar usuário: 20px mais largo que o padrão de
   .modal-panel — os .field-row (cargo+aniversário, senha+confirmar senha)
   ficavam apertados nos 360px genéricos. */
.user-modal-panel { max-width: 380px; }
.modal-head { display: flex; align-items: center; }
.modal-title { font-size: 15px; font-weight: 700; }
.modal-hint { font-size: 12.5px; color: var(--text-muted); margin: 0; line-height: 1.5; }
/* Um passo (ex.: e-mail vs. código+senha nova) do modal "esqueci minha
   senha" — os dois moram no mesmo .modal-panel, um escondido por vez (ver
   forgot-step-email/forgot-step-reset em index.html), então cada um
   precisa do próprio flex column pra ter o mesmo espaçamento entre campos
   que .modal-panel já dá pros filhos diretos. */
.modal-step { display: flex; flex-direction: column; gap: 14px; }

.photo-picker { position: relative; display: inline-flex; align-self: flex-start; }
.photo-preview {
  width: 60px; height: 60px; border-radius: 999px; flex: none; overflow: hidden;
  background: var(--avatar-bg); color: var(--avatar-icon);
  border: 1px solid var(--border);
  display: grid; place-items: center;
}
.photo-preview svg { width: 27px; height: 27px; }
.photo-preview img { width: 100%; height: 100%; object-fit: cover; }

.photo-badge {
  position: absolute; bottom: -2px; right: -2px;
  width: 22px; height: 22px; border-radius: 999px;
  background: #fff; border: none;
  display: grid; place-items: center; cursor: pointer;
}
.photo-badge[hidden] { display: none; }
.photo-badge svg { width: 15px; height: 15px; }
.photo-badge-remove svg { width: 13px; height: 13px; }
.photo-badge:hover { filter: brightness(1.2); }
.photo-badge:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.photo-badge-upload { color: var(--accent); }
.photo-badge-remove { color: var(--danger); }

.confirm-panel { align-items: center; text-align: center; }
.confirm-icon-chip {
  width: 48px; height: 48px; border-radius: 999px;
  background: var(--danger-soft); color: var(--danger);
  display: grid; place-items: center; margin: 2px auto 0;
}
.confirm-icon-chip.neutral { background: var(--accent-soft); color: var(--accent); }
.confirm-icon-chip svg { width: 21px; height: 21px; }
.confirm-message { font-size: 13.5px; color: var(--text-muted); line-height: 1.5; margin: 0; }
.confirm-message b { color: var(--text); }
.modal-actions { display: flex; gap: 10px; margin-top: 4px; }
.modal-actions .btn { flex: 1; }

/* --- ponto: saldo do dia (colaborador), visual de "comprovante" de papel
   (cartão cor de pergaminho com borda serrilhada embaixo) — aparece depois
   da saída do dia batida. Sem CNPJ e sem "Referência": não existem no app. */
.day-balance-panel { max-width: 380px; }
.day-balance-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13px; }
.day-balance-label { color: var(--text-muted); font-weight: 600; }
.day-balance-value { font-weight: 700; color: var(--text); text-align: right; }

.day-balance-receipt {
  --receipt-bg: #f7e7ac;
  --receipt-ink: #4a3a16;
  --receipt-muted: #8d7640;
  background: var(--receipt-bg); color: var(--receipt-ink);
  border-radius: 14px 14px 0 0; padding: 18px 18px 0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.day-balance-receipt-title { text-align: center; font-size: 12.5px; font-weight: 600; }
.day-balance-receipt-title strong { display: block; font-size: 15.5px; margin-top: 3px; }
.day-balance-receipt-company { text-align: center; font-size: 11px; color: var(--receipt-muted); margin: 4px 0 12px; }
.day-balance-receipt-divider { border: none; border-top: 1px dashed var(--receipt-muted); opacity: 0.55; margin: 12px 0; }
.day-balance-receipt .day-balance-punches { display: flex; flex-direction: column; gap: 6px; padding: 0; background: transparent; }
.day-balance-receipt .day-balance-label { color: var(--receipt-muted); }
.day-balance-receipt .day-balance-value { color: var(--receipt-ink); }
/* Sem flex/space-between de propósito — o HTML já vem como "Rótulo: valor"
   (texto normal, ver index.html), então isso fica junto sozinho. Com flex +
   space-between, o rótulo ia pra ponta esquerda e o valor pra ponta
   direita, deixando os dois soltos com o ":" perdido no meio da linha. */
.day-balance-receipt-row { font-size: 12.5px; margin-top: 6px; }
.day-balance-receipt-row:last-of-type { margin-bottom: 14px; }
#day-balance-result.positive { color: #2c6b34; }
#day-balance-result.negative { color: #9c2f2f; }
/* "papel rasgado": triângulos na cor do modal por trás recortam a base
   do cartão — o cartão precisa terminar exatamente aqui (sem padding). */
.day-balance-receipt-zigzag {
  height: 10px; margin: 0 -18px;
  background-image: linear-gradient(-45deg, var(--panel) 5px, transparent 0),
    linear-gradient(45deg, var(--panel) 5px, transparent 0);
  background-position: left bottom; background-repeat: repeat-x; background-size: 10px 10px;
}
.day-balance-close-btn {
  width: 100%; background: none; border: none; color: var(--text-muted);
  font-size: 12.5px; font-weight: 600; padding: 6px; margin-top: 4px; cursor: pointer;
}
.day-balance-close-btn:hover { color: var(--text); }
.day-balance-close-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* --- ponto (time clock) --- */
.ponto-layout { display: flex; flex-direction: column; gap: 20px; max-width: 640px; }
.ponto-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: var(--shadow); padding: 22px 24px; max-width: 560px;
  display: flex; flex-direction: column; gap: 18px;
}
.ponto-card[hidden] { display: none; }
/* Card do colaborador comum (bater ponto): centralizado no meio da tela
   no sentido horizontal. margin:auto num item flex absorve o espaço
   sobrando dos dois lados igual — funciona tanto empilhado (mobile,
   eixo cross) quanto lado a lado com o painel do admin (desktop, eixo
   principal), sem precisar de regra separada por breakpoint. */
#ponto-personal-card { margin-left: auto; margin-right: auto; }
/* Tabela de ponto de todos os colaboradores (users-history) é larga —
   deixa esse card esticar até a ponta em vez de ficar preso ao
   max-width padrão dos outros cards de ponto. width:100% explícito (não
   só max-width:none) porque esse card carrega uma tabela larga com
   scroll próprio (.users-history-scroll) — sem uma largura garantida
   pelo pai, ele encolhia pro conteúdo em vez de esticar. */
.ponto-card-full { max-width: none; width: 100%; }

/* Empilhado: ações (bater ponto + corrigir) em cima, blocos de
   estatísticas embaixo — antes ficava lado a lado, virou uma coluna só. */
.ponto-card-layout { display: flex; flex-direction: column; align-items: stretch; gap: 24px; }
.ponto-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; }
/* Círculo perfeito (mesma largura e altura) — só o ícone dentro; o texto
   que muda conforme a próxima ação ("Bater entrada"/"Bater saída"...)
   fica como legenda embaixo (.ponto-punch-label), não dentro do botão. */
.ponto-punch-btn { width: 84px; height: 84px; padding: 0; border-radius: 999px; flex: none; }
.ponto-punch-btn svg { width: 30px; height: 30px; }
.ponto-punch-label { font-size: 13px; font-weight: 700; color: var(--text); text-align: center; }

/* Uma fileira por bloco (KPI tiles empilhados) — cada .ponto-stat é um
   cartão com fundo próprio, conteúdo centralizado, largura total. */
.ponto-stats { display: flex; flex-direction: column; gap: 12px; flex: 1 1 auto; }
.ponto-stat {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  text-align: center; padding: 14px 12px; border-radius: 14px; background: var(--panel-2);
}
.ponto-stat-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); font-weight: 700; }
.ponto-stat-value { font-size: 15px; font-weight: 700; color: var(--text); white-space: nowrap; }
.ponto-stat-value.positive { color: var(--success); }
.ponto-stat-value.negative { color: var(--danger); }
/* Legenda pequena embaixo do valor — deixa explícito que a meta de
   "Horas no mês" é proporcional ao dia em que o mês está (não o mês
   inteiro), pra não parecer que a barra "devia" estar mais cheia. */
.ponto-stat-hint { font-size: 10px; color: var(--text-faint); white-space: nowrap; }

/* Cada bloco com uma cor — reaproveitando tons já usados no resto do
   app (nada novo/dissonante): neutro pro informativo, verde da marca pro
   que é "acumulando" (mês), verde/vermelho dinâmico pro saldo (bom/ruim)
   e âmbar (mesmo tom do aniversário no Ponto) pro medidor do dia. */
.ponto-stat-accent { background: var(--accent-soft); }
.ponto-stat-bank.positive { background: var(--accent-soft); }
.ponto-stat-bank.negative { background: var(--danger-soft); }
.ponto-stat-today { background: var(--birthday-soft); }

/* Medidor "Horas do dia" — trilho num tom mais claro do MESMO verde que
   preenche (não uma cor à parte), enchendo da esquerda pra direita
   conforme as horas trabalhadas hoje se aproximam do esperado. */
.ponto-meter { width: 100%; height: 7px; border-radius: 999px; background: var(--accent-soft); overflow: hidden; }
.ponto-meter-fill { height: 100%; border-radius: 999px; background: var(--accent); transition: width 0.4s ease; }
/* Dia de folga (fim de semana/feriado/aniversário) — nada esperado pra
   hoje, então a barra fica cheia mas num tom neutro (nem "meta batida"
   nem "vazio"), com o texto avisando o motivo. */
.ponto-stat-today.off .ponto-meter-fill { background: var(--text-faint); }

.ponto-admin-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ponto-admin-title { font-size: 14px; font-weight: 700; }
.ponto-schedule-list { display: flex; flex-direction: column; }

/* --- ponto: tabela de horário/correção dos colaboradores (admin) --- */
.schedule-table-scroll { overflow-x: auto; }
.schedule-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.schedule-table th {
  text-align: left; padding: 8px 10px; color: var(--text-muted);
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700;
  border-bottom: 1px solid var(--border);
}
.schedule-table td { padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; white-space: nowrap; }
.schedule-table tr:last-child td { border-bottom: none; }
.schedule-table-name { font-weight: 600; white-space: normal; }
.schedule-table-actions { display: flex; gap: 4px; justify-content: flex-end; }

.weekday-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.weekday-chip {
  font: inherit; font-size: 12px; font-weight: 700; padding: 7px 11px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: var(--panel-2); color: var(--text-muted); cursor: pointer;
}
.weekday-chip:hover { border-color: var(--accent); color: var(--accent); }
.weekday-chip.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.weekday-chip:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* exceções de horas por dia da semana, no modal "Configurar horário" —
   uma linha por dia atualmente selecionado nos weekday-chip acima (ver
   renderScheduleDayHours em app.js) */
.day-hours-list { display: flex; flex-direction: column; gap: 6px; }
.day-hours-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.day-hours-label { font-size: 12.5px; font-weight: 700; color: var(--text-muted); width: 32px; flex: none; }
.field .day-hours-input { width: 84px; flex: none; text-align: right; }
.field-hint { font-size: 11.5px; color: var(--text-faint); margin: 0; }

.ponto-correct-btn { align-self: flex-start; }

.ponto-admin-stack { display: flex; flex-direction: column; gap: 20px; }
.ponto-admin-stack[hidden] { display: none; }

/* Escala e correções lado a lado (quebra pra coluna se não couber) — a
   tabela de ponto de todos os colaboradores fica de fora, embaixo, porque
   é larga e tem scroll próprio. */
.ponto-admin-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px; }
.ponto-admin-row > .ponto-card { flex: 1 1 320px; }

.ponto-corrections-list { display: flex; flex-direction: column; gap: 10px; max-height: 340px; overflow-y: auto; }
.ponto-corrections-list[hidden] { display: none; }
.ponto-correction-row { padding: 10px 12px; border-radius: 10px; background: var(--panel-2); }
.ponto-correction-row.pending { border: 1px solid var(--border-strong); }
.ponto-correction-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.ponto-correction-user { font-size: 13px; font-weight: 700; }
.ponto-correction-when { font-size: 11px; color: var(--text-faint); white-space: nowrap; }
.ponto-correction-change { font-size: 12.5px; color: var(--text-muted); margin-bottom: 4px; }
.ponto-correction-text { font-size: 12.5px; color: var(--text); font-style: italic; }
/* Anexos de uma solicitação já enviada (painel do admin e "Minhas
   solicitações") — cada um é um link que abre/baixa o arquivo (data URL),
   ver renderAttachmentChips em app.js. */
.ponto-correction-attachments { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ponto-correction-status {
  font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.04em; flex: none;
}
.ponto-correction-status.pendente { background: var(--accent-soft); color: var(--accent); }
.ponto-correction-status.aprovada { background: var(--panel); color: var(--success); border: 1px solid var(--border-strong); }
.ponto-correction-status.rejeitada { background: var(--danger-soft); color: var(--danger); }
.ponto-correction-actions { display: flex; gap: 8px; margin-top: 9px; }
.ponto-correction-actions .btn { padding: 6px 13px; font-size: 12px; }

.punch-edit-requests { display: flex; flex-direction: column; gap: 8px; }
.punch-edit-requests-toggle {
  display: flex; align-items: center; gap: 6px; align-self: flex-start;
  background: none; border: none; padding: 2px 0; cursor: pointer;
  font: inherit; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text-muted); font-weight: 700;
}
.punch-edit-requests-toggle:hover { color: var(--accent); }
.punch-edit-requests-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 6px; }
.punch-edit-requests-chevron { width: 13px; height: 13px; flex: none; transition: transform 0.15s ease; }
.punch-edit-requests-toggle[aria-expanded="true"] .punch-edit-requests-chevron { transform: rotate(90deg); }

@media (min-width: 860px) {
  .ponto-layout { flex-direction: row; align-items: flex-start; max-width: none; }
  .ponto-layout > .ponto-card,
  .ponto-layout > .ponto-admin-stack { flex: 1 1 0; min-width: 0; }
}

/* --- ponto: modal de correção manual (mais largo que os demais, por causa
   das linhas com select + horário + ações) --- */
.punch-edit-panel { max-width: 480px; }
.punch-edit-list { display: flex; flex-direction: column; gap: 8px; max-height: 260px; overflow-y: auto; }
.punch-edit-row, .punch-edit-add {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 9px; background: var(--panel-2);
}
.punch-edit-row.pending select, .punch-edit-row.pending input[type="time"] { opacity: 0.6; }
.punch-edit-row select, .punch-edit-add select {
  flex: 1 1 150px; font: inherit; font-size: 12.5px; padding: 7px 8px; border-radius: 7px;
  border: 1px solid var(--border); background: var(--panel); color: var(--text);
}
.punch-edit-row input[type="time"], .punch-edit-add input[type="time"] {
  flex: 0 1 100px; font: inherit; font-size: 12.5px; padding: 7px 8px; border-radius: 7px;
  border: 1px solid var(--border); background: var(--panel); color: var(--text);
}
.punch-edit-add { background: none; border: 1px dashed var(--border-strong); }
.punch-edit-add[hidden] { display: none; }
.punch-edit-add .btn { flex: none; padding: 7px 12px; font-size: 12.5px; }
.punch-edit-add .btn svg { width: 12px; height: 12px; }

/* Wrap fica em fluxo normal de bloco (não flex) — o botão é
   inline-block (largo só o necessário) e o painel abaixo dele é um
   div comum, então ocupa a largura toda sem precisar esticar nada
   via flex. */
.punch-add-toggle { margin-bottom: 8px; padding: 7px 12px; font-size: 12.5px; }
.punch-add-toggle-icon { transition: transform 0.15s ease; }

/* Picker de anexos (documento/foto/áudio) do modal "Solicitar correção" —
   botão + lista de chips dos arquivos já escolhidos, ver
   pendingAttachments/renderAttachPicker em app.js. */
.punch-attach-btn { padding: 7px 12px; font-size: 12.5px; align-self: flex-start; }
.punch-attach-btn svg { width: 14px; height: 14px; }
.punch-attach-list:not(:empty) { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.punch-attach-chip {
  display: flex; align-items: center; gap: 6px; max-width: 100%;
  padding: 5px 6px 5px 9px; border-radius: 999px; background: var(--panel-2);
  border: 1px solid var(--border); font-size: 11.5px; color: var(--text-muted);
}
.punch-attach-chip-thumb { width: 18px; height: 18px; border-radius: 5px; object-fit: cover; flex: none; }
.punch-attach-chip-icon { width: 13px; height: 13px; flex: none; color: var(--text-faint); }
.punch-attach-chip-name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.punch-attach-chip-remove {
  width: 16px; height: 16px; flex: none; border-radius: 999px; border: none; background: none;
  color: var(--text-faint); cursor: pointer; display: grid; place-items: center;
}
.punch-attach-chip-remove:hover { color: var(--danger); }
.punch-attach-chip-remove svg { width: 11px; height: 11px; }
.punch-add-toggle[aria-expanded="true"] .punch-add-toggle-icon { transform: rotate(45deg); }

/* Filtro de período do modal "Meus pontos" — mesmo espírito visual do
   Calendário: "< mês ano >" centralizado (.cal-nav/.cal-title) com o
   seletor de visão (.cal-view-switch/.cal-view-btn) embaixo. Classes
   próprias porque é um contexto diferente (não mexe no mesmo JS). */
.myhistory-nav { display: flex; align-items: center; justify-content: center; gap: 4px; }
.myhistory-title { font-size: 15px; font-weight: 700; min-width: 170px; text-align: center; }
.myhistory-view-switch { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.myhistory-view-btn {
  font: inherit; font-size: 12.5px; font-weight: 700; padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: transparent; color: var(--text-muted); cursor: pointer;
}
.myhistory-view-btn:hover { border-color: var(--accent); color: var(--accent); }
.myhistory-view-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.myhistory-view-btn.active { background: var(--accent); border-color: var(--accent); color: var(--btn-text); }

/* --- ponto: planilha mensal (admin), estilo Excel — uma linha por dia do
   mês corrente de verdade (28-31 dias conforme o mês/ano) --- */
.punch-sheet-panel { max-width: 940px; width: 100%; max-height: calc(100vh - 40px); }
.punch-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex: none; }
.punch-sheet-nav { display: flex; gap: 2px; flex: none; }
/* overflow:auto (não só overflow-x) + max-height — até 31 linhas (uma por
   dia do mês) não cabem inteiras na tela; sem isso a planilha só cresce
   pra baixo/pra fora da viewport, sem jeito nenhum de ver o resto.
   Cabeçalho fixo no topo (sticky) ajuda a saber qual coluna é qual
   enquanto rola. */
.punch-sheet-scroll { overflow: auto; border: 1px solid var(--border); border-radius: 10px; max-height: 60vh; }
.punch-sheet-table { width: 100%; border-collapse: collapse; font-size: 12.5px; white-space: nowrap; }
.punch-sheet-table th {
  position: sticky; top: 0; text-align: left; padding: 8px 10px; background: var(--panel-2); color: var(--text-muted);
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700;
  border-bottom: 1px solid var(--border);
}
.punch-sheet-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.punch-sheet-table tr:last-child td { border-bottom: none; }
.punch-sheet-row.off-day { opacity: 0.5; }
.punch-sheet-row.holiday { background: var(--danger-soft); opacity: 1; }
.punch-sheet-row.holiday.today { background: var(--danger-soft); }
.punch-sheet-row.birthday { background: var(--birthday-soft); opacity: 1; }
.punch-sheet-row.birthday.today { background: var(--birthday-soft); }
.punch-sheet-row.today { background: var(--accent-soft); }
.punch-sheet-day { font-weight: 700; }
.punch-sheet-time {
  font: inherit; font-size: 12px; padding: 5px 6px; border-radius: 6px; width: 84px;
  border: 1px solid var(--border); background: var(--panel); color: var(--text);
}
.punch-sheet-time:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.punch-sheet-total { font-weight: 700; }
.punch-sheet-diff.positive { color: var(--success); font-weight: 700; }
.punch-sheet-diff.negative { color: var(--danger); font-weight: 700; }

/* --- ponto: histórico de todos os colaboradores no mês (admin), estilo
   Excel — nome fixo na coluna da esquerda, cabeçalho de dias fixo no topo,
   um dia por coluna. Direto no card (sem modal), com scroll próprio. --- */
.users-history-actions { display: flex; align-items: center; gap: 8px; flex: none; }
#users-history-download-btn { padding: 7px 12px; font-size: 12.5px; }

/* Filtro por mês: mesmo espírito do .lang-select/.notif-wrap (botão +
   painel ancorado embaixo) — só abre um <input type="month"> nativo em
   vez de uma lista de opções. */
.users-history-filter-wrap { position: relative; flex: none; }
.users-history-filter-panel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 20;
  display: flex; flex-direction: column; gap: 6px; min-width: 168px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow); padding: 10px 12px;
}
.users-history-filter-panel[hidden] { display: none; }
.users-history-filter-panel label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); font-weight: 700;
}
.users-history-filter-panel input[type="month"] {
  font: inherit; font-size: 13px; padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--panel-2); color: var(--text);
}
.users-history-filter-panel input[type="month"]:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }

.users-history-scroll { overflow: auto; border: 1px solid var(--border); border-radius: 10px; max-height: 68vh; }
/* width:100% — sem isso a tabela só fica do tamanho do conteúdo (colunas
   estreitas) e sobra um vão em branco depois da última coluna (Banco de
   horas) dentro do card, que agora é largo (.ponto-card-full). Só entra
   scroll de verdade se ainda faltar espaço mesmo esticada. */
.users-history-table { border-collapse: collapse; font-size: 11.5px; width: 100%; }
.users-history-table th,
.users-history-table td {
  padding: 6px 9px; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border);
  text-align: center; vertical-align: middle; white-space: nowrap;
}
.users-history-table th {
  position: sticky; top: 0; background: var(--panel-2); color: var(--text-muted);
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; z-index: 1;
}
.users-history-table td:first-child,
.users-history-table th:first-child {
  position: sticky; left: 0; text-align: left; font-weight: 600; min-width: 130px;
}
.users-history-table td:first-child { background: var(--panel); z-index: 1; }
.users-history-table th:first-child { z-index: 2; }
.users-history-table th.weekend, .users-history-table td.weekend { background: var(--panel-2); }
.users-history-table th.holiday, .users-history-table td.holiday { background: var(--danger-soft); }
.users-history-table td.birthday { background: var(--birthday-soft); }
.users-history-punches { display: flex; flex-direction: column; gap: 1px; font-size: 10.5px; color: var(--text-muted); line-height: 1.4; }
.users-history-summary { font-weight: 700; }
.users-history-summary.positive { color: var(--success); }
.users-history-summary.negative { color: var(--danger); }

/* --- calendário: grade mensal/semanal/diária, com feriados, recesso e
   aniversários da equipe marcados nos dias certos (ver renderCalendarPage
   em app.js) --- */
.cal-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 18px;
  box-shadow: var(--shadow); overflow: hidden;
}
.cal-toolbar {
  display: flex; flex-direction: column; align-items: center;
  gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.cal-nav { display: flex; align-items: center; gap: 4px; }
.cal-title { font-size: 15px; font-weight: 700; min-width: 150px; text-align: center; }
.cal-view-switch { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.cal-view-btn {
  font: inherit; font-size: 12.5px; font-weight: 700; padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: transparent; color: var(--text-muted); cursor: pointer;
}
.cal-view-btn:hover { border-color: var(--accent); color: var(--accent); }
.cal-view-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.cal-view-btn.active { background: var(--accent); border-color: var(--accent); color: var(--btn-text); }
.cal-today-btn { margin-left: 4px; }

/* mês */
.cal-month-headrow, .cal-month-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-month-headrow { border-bottom: 1px solid var(--border); }
.cal-weekday {
  padding: 10px 8px; text-align: center; font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted);
}
.cal-day-cell {
  min-height: 92px; padding: 8px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 4px; position: relative;
}
.cal-month-grid .cal-day-cell:nth-child(7n) { border-right: none; }
.cal-month-grid .cal-day-cell:nth-last-child(-n+7) { border-bottom: none; }
.cal-day-cell.out { color: var(--text-faint); }
.cal-day-cell.out .cal-day-num { color: var(--text-faint); }
.cal-day-cell.clickable { cursor: pointer; }
.cal-day-cell.clickable:hover { background: var(--panel-2); }
.cal-day-num {
  align-self: flex-end; font-size: 12.5px; font-weight: 700; color: var(--text);
  width: 24px; height: 24px; display: grid; place-items: center; border-radius: 999px;
}
.cal-day-cell.today { background: var(--accent-soft); }
.cal-day-cell.today.clickable:hover { background: var(--accent-soft); filter: brightness(0.97); }
.cal-day-cell.today .cal-day-num { background: var(--accent); color: var(--btn-text); }

.cal-day-events { display: flex; flex-direction: column; gap: 3px; overflow: hidden; }
.cal-chip {
  font-size: 10.5px; font-weight: 600; padding: 2px 6px; border-radius: 6px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; line-height: 1.5;
}
.cal-chip.feriado { background: var(--accent-soft); color: var(--accent); }
.cal-chip.recesso { background: var(--panel-2); color: var(--text-muted); border: 1px solid var(--border-strong); }
.cal-chip.aniversario { background: none; color: var(--accent); border: 1px dashed var(--border-strong); }
.cal-chip-more { font-size: 10px; color: var(--text-muted); font-weight: 700; padding: 0 2px; }

/* semana / dia */
.cal-timegrid-head, .cal-allday-row { display: flex; border-bottom: 1px solid var(--border); }
.cal-time-gutter { flex: 0 0 56px; }
.cal-day-col-head {
  flex: 1 1 0; min-width: 0; padding: 10px 6px; text-align: center;
  border-left: 1px solid var(--border); font-size: 12.5px; font-weight: 700; color: var(--text);
}
.cal-day-col-head.today, .cal-allday-col.today { background: var(--accent-soft); color: var(--accent); }
.cal-allday-row { min-height: 30px; }
.cal-allday-col {
  flex: 1 1 0; min-width: 0; border-left: 1px solid var(--border); padding: 4px 5px;
  display: flex; flex-direction: column; gap: 3px;
}
.cal-timegrid-body { display: flex; max-height: 480px; overflow-y: auto; }
.cal-hour-labels { flex: 0 0 56px; }
.cal-hour-label { height: 48px; font-size: 10.5px; color: var(--text-faint); text-align: right; padding-right: 8px; transform: translateY(-6px); }
.cal-day-col { flex: 1 1 0; min-width: 0; border-left: 1px solid var(--border); position: relative; }
.cal-day-col.today { background: var(--accent-soft); }
.cal-hour-line { height: 48px; border-bottom: 1px solid var(--border); }
.cal-now-line { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid var(--accent); z-index: 2; }
.cal-now-line::before { content: ""; position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 999px; background: var(--accent); }

@media (max-width: 640px) {
  .cal-title { min-width: 0; font-size: 13px; }
  .cal-day-cell { min-height: 60px; padding: 5px; }
  .cal-day-events { display: none; }
}

footer { text-align: center; margin-top: 34px; font-size: 11px; color: var(--text-faint); letter-spacing: 0.02em; }

@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin 0.85s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  .card, .view.anim, .sidebar { transition: none; animation: none; }
  .spin { animation-duration: 0.001ms; }
  .sidebar-nav-item:hover::before { animation: none; left: 0; width: 100%; }
}