/* ══════════════════════════════════════════════════════════════
   GENTE SINGULAR — camada visual · Identidade Singular (唯一)
   Preto e branco absolutos, linhas como estrutura, cantos retos,
   sem sombras. Cor SOMENTE para estado operacional.
   Mantém todos os nomes de classe existentes (contratos de layout).
   ══════════════════════════════════════════════════════════════ */

/* ── Fonte da marca: Gilroy ── */
@font-face{font-family:"Gilroy";src:url("/static/fonts/Gilroy-Light.ttf") format("truetype");font-weight:300;font-display:swap}
@font-face{font-family:"Gilroy";src:url("/static/fonts/Gilroy-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Gilroy";src:url("/static/fonts/Gilroy-Medium.ttf") format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:"Gilroy";src:url("/static/fonts/Gilroy-SemiBold.ttf") format("truetype");font-weight:600;font-display:swap}
@font-face{font-family:"Gilroy";src:url("/static/fonts/Gilroy-Bold.ttf") format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:"Gilroy";src:url("/static/fonts/Gilroy-ExtraBold.ttf") format("truetype");font-weight:800;font-display:swap}
@font-face{font-family:"Gilroy";src:url("/static/fonts/Gilroy-Heavy.ttf") format("truetype");font-weight:900;font-display:swap}

/* ── Tokens ── */
:root {
  /* marca */
  --black:   #000000;
  --white:   #FFFFFF;
  --grey:    #80807b;   /* 423 C — texto secundário, painel */
  --ground-metal: #827155; /* 871 C — acento raríssimo */

  /* superfícies (tema Branco, leitura densa) */
  --surface: #f5f5f4;   /* preenchimento sutil: hover de linha, zebra, área de drop */
  --card:    #ffffff;
  --border:  #e5e5e3;   /* divisor interno (linhas de tabela, listas) */
  --rule:    #000000;   /* linha estrutural (caixas, barras) */
  --ink-2:   #4a4a47;   /* texto de apoio sobre branco (AA) */

  /* tipografia */
  --font-sans: "Gilroy","Helvetica Neue",Arial,sans-serif;
  --font-mono: "IBM Plex Mono",ui-monospace,monospace;

  /* espaço */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s6:24px; --s8:32px; --s12:48px;

  /* linhas, raios, sombras */
  --hair: 1px; --strong: 2px;
  --radius: 0px;
  --shadow: none;
  --t: .15s;
  --focus: #000000;

  /* cores OPERACIONAIS (únicas cores permitidas além de P&B) */
  --op-manha-bg:#fef3c7; --op-manha-fg:#78350f; --op-manha-bd:#d9a514;
  --op-tarde-bg:#fed7aa; --op-tarde-fg:#7c2d12; --op-tarde-bd:#ea7a2a;
  --op-folga-bg:#dcfce7; --op-folga-fg:#14532d; --op-folga-bd:#4fb377;
  --op-dayoff-bg:#dbeafe; --op-dayoff-fg:#1e40af; --op-dayoff-bd:#5b8fe0;
  --op-ferias-bg:#e0f2fe; --op-ferias-fg:#0c4a6e; --op-ferias-bd:#3aa6d9;
  --op-afast-bg:#f3f4f6; --op-afast-fg:#374151; --op-afast-bd:#9ca3af;
  --op-alerta-bg:#fee2e2; --op-alerta-fg:#991b1b; --op-alerta-bd:#e05252;
  --op-critico:#b91c1c;
  --op-ok-bg:#dcfce7; --op-ok-fg:#14532d; --op-ok-bd:#4fb377;
}

/* ── Base ── */
html { -webkit-text-size-adjust:100%; }
body, button, input, select, textarea, table { font-family: var(--font-sans) !important; }
body { -webkit-font-smoothing:antialiased; font-weight:400; }
body.bg-brand-surface { background: var(--white); }
::selection { background:#000; color:#fff; }
a { color: inherit; }

/* Cantos retos e sem sombra em todo o sistema */
*, *::before, *::after { border-radius: 0 !important; }
.rounded-full, .dot { border-radius: 9999px !important; }        /* só pontos/avatares circulares */
img.rounded-full, label.rounded-full { border-radius: 50% !important; }
.shadow, .shadow-sm, .shadow-md, .shadow-lg, .shadow-xl, .shadow-2xl,
.hover\:shadow-md:hover { box-shadow: none !important; }
.shadow-lg, .shadow-xl, .shadow-2xl { border: var(--hair) solid var(--rule) !important; } /* modais/flutuantes: moldura 1px */

/* Foco visível (acessibilidade) */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus) !important; outline-offset: 3px; }
nav :focus-visible { outline-color: #fff !important; }

/* Movimento mínimo */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* Scrollbar discreta, reta */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--surface); }
::-webkit-scrollbar-thumb { background: #b9b9b5; }
::-webkit-scrollbar-thumb:hover { background: var(--black); }

/* ── Navegação (barra preta, moldura 2px) ── */
nav.bg-black { border-bottom: var(--strong) solid #fff !important; position: sticky; top: 0; z-index: 40; }
nav.bg-black > div { padding-top: 10px; padding-bottom: 10px; row-gap: 6px; column-gap: 18px; }
nav.bg-black .border-gray-700 { border-color: #3a3a38 !important; }
nav.bg-black span.uppercase { color:#fff !important; font-weight:500 !important; letter-spacing:.14em !important; }
nav.bg-black span.uppercase::before { content:"[ "; color: var(--grey); }
nav.bg-black span.uppercase::after  { content:" ]"; color: var(--grey); }

.nav-link {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #b4b4ae;
  transition: background-color var(--t), color var(--t);
  padding: 6px 8px;
  border: var(--hair) solid transparent;
  border-bottom: var(--hair) solid transparent;
  white-space: nowrap;
}
.nav-link:hover { color: #000 !important; background: #fff; }
.nav-active {
  color: #000 !important;
  background: #fff;
  border-color: #fff;
}
nav form button[type="submit"] {
  font-weight: 500 !important; letter-spacing: .1em; text-transform: uppercase;
  border-color: #fff !important; color: #fff !important; padding: 6px 12px !important;
  transition: background-color var(--t), color var(--t);
}
nav form button[type="submit"]:hover { background:#fff; color:#000 !important; }
nav .bg-white.text-black { font-weight: 500 !important; }

/* Logo (SVG oficial branco, mínimo 130px de largura) */
.logo-img { height: 32px; width: auto; min-width: 136px; display: block; }
.logo-text-fallback {
  font-family: var(--font-sans); font-weight: 800; font-size: 1.1rem;
  line-height: 1.05; letter-spacing: -0.02em; color: #fff;
}

/* ── Blocos ── */
.gs-card {
  background: var(--card);
  border: var(--hair) solid var(--rule);
}
.gs-card.overflow-hidden { overflow: hidden; }

/* Títulos de seção — caixa alta, entre colchetes */
.gs-section-title {
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.gs-section-title::before { content: "[ "; color: var(--grey); }
.gs-section-title::after  { content: " ]"; color: var(--grey); }

/* Títulos de página (h1/h2 tailwind) — Gilroy, entrelinha apertada */
main h1, main h2 { letter-spacing: -0.01em; line-height: 1.05; }
main h1.text-3xl, main h1.text-2xl, main h1.text-xl { text-transform: uppercase; font-weight: 700 !important; letter-spacing: 0; }

/* Setor header — barra preta */
.setor-header {
  background: var(--black);
  color: var(--white);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.7rem;
  padding: 8px 12px;
}
.setor-header .bg-white\/20 { background: transparent !important; border: 1px solid #fff; }
.setor-header .bg-white\/20:hover { background: #fff !important; color: #000; }

/* ── Hub de módulos: cor decorativa removida, hover por inversão ── */
a.gs-card.group {
  border-left: var(--hair) solid var(--rule) !important;
  border-top: 4px solid var(--rule);
  transform: none !important;
  transition: background-color var(--t), color var(--t);
}
a.gs-card.group > span:first-child { background: transparent !important; border: 1px solid currentColor; }
a.gs-card.group h3 { text-transform: uppercase; font-weight: 700 !important; letter-spacing: .02em; }
a.gs-card.group > span:last-child { color: inherit !important; text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; font-weight: 500 !important; }
a.gs-card.group:hover { background: var(--black); color: var(--white); }
a.gs-card.group:hover .text-brand-grey { color: #c9c9c4 !important; }

/* Setor/turno: título colorido do turno mantém a cor (operacional) */

/* ── Grade ── */
.grade-cell {
  position: relative;
  cursor: pointer;
  user-select: none;
  min-width: 36px;
  text-align: center;
  font-size: 0.66rem;
  font-weight: 700;
  padding: 3px 1px;
  border: 1px solid var(--border);
  transition: outline-color .08s;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.grade-cell:hover {
  outline: 2px solid var(--black);
  outline-offset: -1px;
  z-index: 2;
}

/* Turnos — cores operacionais, planas */
.turno-MANHA       { background: var(--op-manha-bg); color: var(--op-manha-fg); border: 1px solid var(--op-manha-bd); }
.turno-TARDE       { background: var(--op-tarde-bg); color: var(--op-tarde-fg); border: 1px solid var(--op-tarde-bd); }
.turno-compound    { background: linear-gradient(to bottom, var(--op-manha-bg) 50%, var(--op-tarde-bg) 50%); color: var(--op-tarde-fg); border: 1px solid var(--op-tarde-bd); }
.turno-FOLGA       { background: var(--op-folga-bg); color: var(--op-folga-fg); border: 1px solid var(--op-folga-bd); }
.turno-DAYOFF      { background: var(--op-dayoff-bg); color: var(--op-dayoff-fg); border: 1px solid var(--op-dayoff-bd); font-weight: 800; }
.turno-FERIAS      { background: var(--op-ferias-bg); color: var(--op-ferias-fg); border: 1px solid var(--op-ferias-bd); font-weight: 800; }
.turno-AFASTAMENTO { background: var(--op-afast-bg); color: var(--op-afast-fg); border: 1px dashed var(--op-afast-bd); font-weight: 800; }
.turno-vazio       { background: #fff; color: #c4c4c0; }
.turno-ESCALADO    { background: var(--op-alerta-bg); color: var(--op-alerta-fg); border: 1px solid var(--op-alerta-bd); font-weight: 800; }
.turno-streak      { background: var(--op-critico); color: #fff; border: 1px solid #7f1414; font-weight: 800; }

/* Chips "Por praça" — EXTRAS */
.praca-chip-escalado    { background: var(--op-alerta-bg); color: var(--op-alerta-fg); border: 1px solid var(--op-alerta-bd); }
.praca-chip-solicitacao { background: var(--op-alerta-bg); color: var(--op-alerta-fg); border: 1px dashed var(--op-critico); }
.praca-chip-confirmado  { background: var(--op-ok-bg); color: var(--op-ok-fg); border: 1px solid var(--op-ok-bd); }

/* Domingo / feriado no cabeçalho da grade (operacional) */
.domingo-header { background: var(--op-critico) !important; color: #fff !important; }
.feriado-header { background: var(--op-folga-bg) !important; color: var(--op-folga-fg) !important; }

/* Badge extra — etiqueta outline */
.badge-extra {
  font-size: 0.56rem;
  background: #fff;
  color: #000;
  padding: 1px 5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid #000;
}

/* ── Formulários ── */
.gs-input {
  background: #fff;
  border: 1px solid var(--grey);
  color: var(--black);
  padding: 8px 12px;
  font-size: 0.86rem;
  font-weight: 400;
  min-height: 38px;
  transition: border-color var(--t), box-shadow var(--t);
  width: 100%;
}
.gs-input::placeholder { color: #9a9a95; font-weight: 300; }
.gs-input:hover { border-color: var(--black); }
.gs-input:focus, .gs-input:focus-visible {
  outline: none !important;
  border-color: var(--black);
  box-shadow: inset 0 0 0 1px var(--black) !important; /* borda 2px sem deslocar layout */
}
.gs-input option { background: #fff; color: var(--black); }
select.gs-input {
  -webkit-appearance: none; appearance: none; padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='miter'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center;
}

/* Campos em modo leitura (cadastros) */
.gs-input:disabled {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  cursor: default;
  color: #000 !important;
  -webkit-text-fill-color: #000;
  opacity: 1;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: none !important;
  padding-left: 0;
  min-height: 0;
}

/* ── Botões — retos, caixa alta, hover por inversão ── */
.gs-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 8px 16px;
  min-height: 36px;
  line-height: 1.15;
  transition: background-color var(--t), color var(--t), border-color var(--t);
  cursor: pointer;
  border: 1px solid var(--black);
}
.gs-btn:disabled, .gs-btn[disabled] { cursor: not-allowed; border-style: dashed !important; background: transparent !important; color: var(--grey) !important; border-color: var(--grey) !important; }
.gs-btn-primary, .gs-btn-warm { background: var(--black); color: var(--white); border-color: var(--black); }
.gs-btn-primary:hover, .gs-btn-warm:hover { background: var(--white); color: var(--black); }
.gs-btn-ghost   { background: transparent; color: var(--black); border-color: var(--black); }
.gs-btn-ghost:hover { background: var(--black); color: var(--white); }
.gs-btn-danger  { background: #fff; color: var(--op-alerta-fg); border-color: var(--op-alerta-fg); }
.gs-btn-danger:hover { background: var(--op-alerta-fg); color: #fff; }

/* Checkbox */
input[type="checkbox"].gs-check, input[type="checkbox"], input[type="radio"] {
  accent-color: var(--black);
}
input[type="checkbox"].gs-check { width: 16px; height: 16px; cursor: pointer; }

/* ── Tabelas densas ── */
.gs-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.gs-table thead th {
  background: #fff;
  color: var(--black);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 10px 12px;
  text-align: left;
  font-weight: 500;
  border-bottom: var(--strong) solid var(--black);
  white-space: nowrap;
}
.gs-table tbody tr { border-bottom: 1px solid var(--border); transition: background-color var(--t); }
.gs-table tbody tr:hover { background: var(--surface); }
.gs-table tbody td { padding: 9px 12px; color: var(--black); }

/* ── Alertas (operacionais) ── */
.gs-alert-ok, .gs-alert-erro, .gs-alert-aviso { padding: 10px 14px; font-size: 0.82rem; border-left-width: 4px !important; }
.gs-alert-ok    { background: var(--op-ok-bg); border: 1px solid var(--op-ok-bd); color: var(--op-ok-fg); }
.gs-alert-erro  { background: #fff1f2; border: 1px solid var(--op-alerta-bd); color: #9f1239; }
.gs-alert-aviso { background: var(--op-manha-bg); border: 1px solid var(--op-manha-bd); color: var(--op-manha-fg); }

/* ── Entregadores ── */
.entr-cell {
  cursor: pointer;
  user-select: none;
  min-width: 36px;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 3px 1px;
  border: 1px solid var(--border);
  transition: outline-color .08s;
  font-variant-numeric: tabular-nums;
}
.entr-cell:hover { outline: 2px solid var(--black); outline-offset: -1px; z-index: 2; position: relative; }
.entr-ESCALADO   { background: var(--op-manha-bg); color: var(--op-manha-fg); border: 1px solid var(--op-manha-bd); }
.entr-CONFIRMADO { background: var(--op-ok-bg); color: var(--op-ok-fg); border: 1px solid var(--op-ok-bd); }
.entr-vazio      { background: #fff; color: #c4c4c0; }
.entr-excesso { background: var(--op-alerta-bg) !important; color: var(--op-alerta-fg) !important; border-color: var(--op-alerta-bd) !important; outline: 2px solid var(--op-critico); }

/* ── Abas / chips / kanban definidos nas telas (sobrescrita visual) ── */
.recr-tab { border-color: #000 !important; color: #000 !important; font-weight: 500 !important; letter-spacing: .08em !important; transition: background-color var(--t), color var(--t); }
.recr-tab:hover { background: #000 !important; color: #fff !important; }
.recr-tab.active { background: #000 !important; color: #fff !important; }
.recr-tab-danger.active { background: var(--op-alerta-fg) !important; border-color: var(--op-alerta-fg) !important; }
.recr-tab-count { background: transparent !important; border: 1px solid currentColor; color: inherit !important; }
.recr-tabs { border-bottom: 2px solid #000 !important; }
.kcol { background: var(--surface) !important; border: 1px solid var(--border) !important; }
.kcol.kover { background: #fff !important; border: 2px dashed #000 !important; }
.kcol-head { color: #000 !important; font-weight: 500 !important; letter-spacing: .1em !important; border-bottom: 2px solid #000; margin-bottom: 8px; }
.kcount { border-color: #000 !important; }
.active-chip { background: var(--black) !important; color: #fff !important; border-color: var(--black) !important; }
.filtro-fixo-btn.filtro-ativo { background: #000 !important; border-color: #000 !important; }
.tm-toggle.ativo { outline: 2px solid #000; }
.gcal-dia:hover { opacity: 1; outline: 2px solid #000; outline-offset: 1px; }

/* Organograma — neutro, sem tons quentes decorativos */
.cell { background: var(--surface) !important; border-color: #d6d6d2 !important; }
.band-cell { background: #fff !important; }
.org-node { border: 1px solid #000 !important; border-top: 3px solid #000 !important; }
.org-lider, .org-lidertag { color: #000 !important; }
.org-lidertag { background: #fff !important; border: 1px solid #000; }
.org-sen { background: #000 !important; }
.org-pill-more { color: #000 !important; }
.col-head { border-bottom: 2px solid #000 !important; text-transform: uppercase !important; font-weight: 500 !important; letter-spacing: .08em; font-size: .72rem !important; }

/* Drag & drop de praças */
.praca-drop { background: var(--surface) !important; border-color: #b9b9b5 !important; }
.praca-drop.ring-2, .praca-drop[class*="border-black"] { background: #fff !important; border-color: #000 !important; }
.praca-pessoa, .equipe-drag { touch-action: none; }
.equipe-drag:hover { background: var(--surface); }

/* Tons decorativos quentes do Tailwind (brand-warm) → preto */
.text-brand-warm { color: #000 !important; }
.bg-brand-warm { background: #000 !important; }
.border-brand-warm { border-color: #000 !important; }

/* Cinza de apoio: legível em telas densas (AA sobre branco) */
.text-brand-grey { color: #6b6b66 !important; }

/* ── Celular ── */
@media (max-width: 640px) {
  nav.bg-black > div { flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 4px !important; padding-left: 12px; padding-right: 12px; }
  nav.bg-black > div::-webkit-scrollbar { display: none; }
  nav.bg-black > div > * { flex: none; }
  nav.bg-black > div > a:first-child { margin-right: 8px !important; }
  .logo-img { height: 30px; min-width: 128px; }
  .nav-link { min-height: 40px; display: inline-flex; align-items: center; padding: 6px 10px; }
  main { padding-left: 12px !important; padding-right: 12px !important; padding-top: 16px !important; }
  .gs-btn { min-height: 44px; padding: 10px 14px; }
  .gs-input { min-height: 44px; font-size: 16px; } /* evita zoom no iOS */
  .gs-table { font-size: 0.8rem; }
  .gs-table thead th, .gs-table tbody td { padding: 8px 10px; }
  .grade-cell, .entr-cell { min-width: 34px; }
  input[type="checkbox"].gs-check { width: 20px; height: 20px; }
}