/* ============================================================
   OneMundo RH — Kit Tech CSS (2026-06-12)
   ============================================================ */

/* ---------- Command Palette ⌘K ---------- */
#omcmd { position: fixed; inset: 0; z-index: 99999; display: none; }
#omcmd.on { display: block; }
#omcmd .omcmd-bd { position: absolute; inset: 0; background: rgba(0,0,0,.45); backdrop-filter: blur(3px); animation: omcmdfade .15s ease; }
#omcmd .omcmd-panel {
  position: relative; max-width: 600px; margin: 11vh auto 0; background: #fff;
  border: 1px solid #e5e5e5; border-radius: 16px; overflow: hidden;
  box-shadow: 0 24px 70px rgba(0,0,0,.28); animation: omcmdpop .18s cubic-bezier(.2,.9,.3,1);
  font-family: 'Inter',-apple-system,sans-serif;
}
@keyframes omcmdfade { from { opacity: 0 } to { opacity: 1 } }
@keyframes omcmdpop { from { opacity: 0; transform: translateY(-10px) scale(.98) } to { opacity: 1; transform: none } }
#omcmd .omcmd-search { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid #f0f0f0; color: #6b7280; }
#omcmd .omcmd-search input { flex: 1; border: none; outline: none; font-size: 16px; color: #111; background: transparent; font-family: inherit; }
#omcmd .omcmd-search input::placeholder { color: #9ca3af; }
#omcmd .omcmd-search kbd { font-size: 11px; color: #9ca3af; background: #f3f4f6; border: 1px solid #e5e5e5; border-radius: 6px; padding: 2px 7px; font-family: inherit; }
#omcmd .omcmd-list { max-height: 56vh; overflow-y: auto; padding: 8px; }
#omcmd .omcmd-item { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 10px; text-decoration: none; color: #111; cursor: pointer; }
#omcmd .omcmd-item.on { background: #000; color: #fff; }
#omcmd .omcmd-item.on .omcmd-ic { background: #fff; color: #000; }
#omcmd .omcmd-item.on .omcmd-go { opacity: 1; }
#omcmd .omcmd-ic { width: 28px; height: 28px; border-radius: 8px; background: #f3f4f6; color: #111; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0; }
#omcmd .omcmd-tx { flex: 1; font-size: 14.5px; font-weight: 500; }
#omcmd .omcmd-go { opacity: 0; font-size: 13px; }
#omcmd .omcmd-empty { padding: 30px; text-align: center; color: #9ca3af; font-size: 14px; }

/* dica visual: hint ⌘K (some no mobile) */
.om-cmd-hint { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: #9ca3af; border: 1px solid #e5e5e5; border-radius: 7px; padding: 3px 8px; cursor: pointer; background: #fff; }
.om-cmd-hint:hover { border-color: #000; color: #000; }
@media (max-width: 640px) { .om-cmd-hint { display: none; } }

/* ---------- Skeleton shimmer ---------- */
.om-skel { display: flex; flex-direction: column; gap: 12px; padding: 8px 0; }
.om-skel-line { height: 14px; border-radius: 7px; background: linear-gradient(90deg,#eee 25%,#f5f5f5 37%,#eee 63%); background-size: 400% 100%; animation: omshim 1.3s ease infinite; }
@keyframes omshim { 0% { background-position: 100% 0 } 100% { background-position: -100% 0 } }

/* ---------- Botão Voltar global ---------- */
.om-back {
  position: fixed; left: 16px; top: 14px; z-index: 8500;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.92); color: #111; border: 1px solid #e5e5e5;
  padding: 8px 14px 8px 11px; border-radius: 10px; font-size: 13.5px; font-weight: 600;
  text-decoration: none; box-shadow: 0 4px 14px rgba(0,0,0,.10); backdrop-filter: blur(8px);
  transition: transform .15s, box-shadow .2s, border-color .2s;
}
.om-back:hover { transform: translateX(-2px); border-color: #000; box-shadow: 0 6px 20px rgba(0,0,0,.16); }
/* se a página tem um header preto no topo, o botão fica branco sobre ele */
.top .om-back, .topbar .om-back { display: none; }

/* ============================================================
   CAMADA MODERNA (2026-07-24) — OneMundo RH
   Objetivo: tirar o visual "2019" (gradiente roxo, sombra pesada,
   cantos gigantes) e deixar tudo no padrao preto & branco tipo Uber.
   Carrega DEPOIS dos <style> inline, entao usa !important onde o
   bloco antigo de override tambem usa. Sem modo escuro — sempre claro.
   ============================================================ */

/* ---------- 1. Tipografia ---------- */
html { -webkit-text-size-adjust: 100%; }
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif !important;
  letter-spacing: -0.005em;
}
h1, h2, h3, h4, h5, .stat-card .value, .kpi-value, .card-title {
  letter-spacing: -0.021em;
  font-weight: 650;
}
h1, h2 { line-height: 1.2; }
/* numeros alinhados em coluna (nao "dancam" ao atualizar) */
.value, .count, .fcount, .badge, .stat-card .value, .kpi-value,
td, .score-number, .num, time { font-variant-numeric: tabular-nums; }

/* ---------- 2. Cartoes: sombra leve, canto discreto ---------- */
.card, .content-card, .stat-card, .stats-card, .kpi-card, .panel, .box,
.white-card, .form-card, .table-card, .chart-card, .list-card,
.section-card, .widget, .view-card, .email-list, .file-list {
  border-radius: 14px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 1px 3px rgba(0,0,0,.03) !important;
  border: 1px solid #ececec !important;
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.card:hover, .stat-card:hover, .view-card:hover, .kpi-card:hover {
  box-shadow: 0 2px 6px rgba(0,0,0,.07), 0 6px 18px rgba(0,0,0,.05) !important;
  border-color: #e0e0e0 !important;
}

/* ---------- 3. Botoes ---------- */
button, .btn, input[type=submit] {
  border-radius: 10px !important;
  font-weight: 600;
  letter-spacing: -0.008em;
  transition: background .16s ease, color .16s ease, border-color .16s ease,
              transform .1s ease, box-shadow .16s ease;
}
button:active, .btn:active, input[type=submit]:active { transform: translateY(1px); }
.btn-primary, button[type=submit].primary, .filters button {
  box-shadow: 0 1px 2px rgba(0,0,0,.12) !important;
}
.btn-primary:hover, button[type=submit].primary:hover, .filters button:hover {
  background: #1f1f1f !important;
}
/* nada de zoom estranho no hover (visual datado) */
.btn:hover, button:hover { transform: none; }

/* ---------- 4. Campos e foco (acessibilidade) ---------- */
input, select, textarea, button, a { outline-offset: 2px; }
:focus-visible {
  outline: 2px solid #111 !important;
  outline-offset: 2px;
  border-radius: 6px;
}
input:not([type=checkbox]):not([type=radio]), select, textarea {
  border-radius: 10px !important;
  transition: border-color .16s ease, box-shadow .16s ease;
}

/* ---------- 5. Tabelas ---------- */
table { border-collapse: separate; border-spacing: 0; }
thead th, th {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding-top: 11px !important; padding-bottom: 11px !important;
}
tbody tr { transition: background .13s ease; }
/* cabecalho fixo ao rolar tabela longa */
.table-scroll thead th, .table-card thead th { position: sticky; top: 0; z-index: 2; }
/* tabela nunca empurra a pagina de lado no celular */
.table-wrap, .table-scroll, .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- 6. Avatares e icones: liso, sem gradiente roxo ---------- */
.avatar, .email-avatar, .user-avatar, .file-icon, .icon-box, .stat-icon {
  background: #111 !important;
  background-image: none !important;
  color: #fff !important;
  border-radius: 12px !important;
  font-weight: 650;
  box-shadow: none !important;
}
.avatar { border-radius: 50% !important; }
.file-icon { background: #f4f4f5 !important; color: #111 !important; }

/* ---------- 7. Selos de status: pastel legivel, nao neon ---------- */
.badge, .tag, .chip, .status-badge, .pill {
  border-radius: 999px !important;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .002em;
}

/* ---------- 8. Estados vazios ---------- */
.empty-state, .empty {
  padding: 56px 24px !important;
  color: #8a8a8a !important;
}
.empty-state i, .empty i { opacity: .18 !important; color: #111 !important; }
.empty-state h3 { color: #111 !important; font-weight: 650; margin-bottom: 6px; }

/* ---------- 9. Links ---------- */
.back-link {
  color: #6b7280 !important;
  font-weight: 550;
  font-size: 13.5px;
  transition: color .15s ease;
}
.back-link:hover { color: #111 !important; }

/* ---------- 10. Barras de rolagem discretas ---------- */
* { scrollbar-width: thin; scrollbar-color: #d4d4d4 transparent; }
::-webkit-scrollbar-thumb { background: #d4d4d4 !important; border-radius: 999px !important; }
::-webkit-scrollbar-thumb:hover { background: #b8b8b8 !important; }
::-webkit-scrollbar-track { background: transparent !important; }

/* ---------- 11. Aparecer suave ao carregar ---------- */
@keyframes omfade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.card, .stat-card, .view-card, .content-card { animation: omfade .26s ease both; }

/* ---------- 12. Respeita quem pediu menos animacao ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 13. Celular ---------- */
@media (max-width: 640px) {
  .container { padding: 16px !important; }
  .stats, .grid { grid-template-columns: 1fr !important; }
  .header { padding: 16px 18px !important; }
  h1 { font-size: 20px !important; }
  .stat-card .value { font-size: 26px !important; }
}

/* ---------- 14. Impressao ---------- */
@media print {
  .sidebar, .tabs, .filters, .fleet-bar, .back-link, button, .btn { display: none !important; }
  .card, .view-card { box-shadow: none !important; border: 1px solid #ccc !important; break-inside: avoid; }
  body { background: #fff !important; }
}