/* ============================================================
   FATO — DESIGN TOKENS + COMPONENTES BASE
   Fonte da verdade: fato-design-system.html (v2)
   Linguagem "credencial de acesso":
     · sem faixas laterais coloridas
     · sem emojis — ícones autorais em assets/img/icons.svg
     · amarelo #F7DC06 como ACENTO, nunca preenchimento decorativo
   Importado por TODAS as páginas (site institucional e sistema).
   ============================================================ */

:root{
  /* --- escala amarelo (marca) --- */
  --yellow-50:#FEFBE6; --yellow-100:#FDF4B3; --yellow-200:#FBEA6E;
  --yellow-300:#F9E13A; --yellow-400:#F7DC06; /* BRAND */
  --yellow-500:#E4C800; --yellow-600:#B99F00; --yellow-700:#8A7700;

  /* --- escala grafite / aço --- */
  --ink-950:#0A0A0B; --ink-900:#131417; --ink-800:#1C1E22; --ink-700:#2A2D33;
  --ink-600:#3D424A; --ink-500:#5A616B; --ink-400:#838A94; --ink-300:#AEB4BC;
  --ink-200:#D4D8DD; --ink-100:#E9EBEE; --ink-50:#F5F6F8; --white:#FFFFFF;
  --steel:#DFDFDF; /* prata do cadeado do logo */

  /* --- semânticos (status de acesso) --- */
  --success:#16A34A; --success-bg:#DCFCE7; --success-fg:#166534;
  --danger:#DC2626;  --danger-bg:#FEE2E2;  --danger-fg:#991B1B;
  --warning:#D97706; --warning-bg:#FEF3C7; --warning-fg:#92400E;
  --info:#2563EB;    --info-bg:#DBEAFE;    --info-fg:#1E40AF;

  /* --- tipografia --- */
  --font-head:"Space Grotesk",system-ui,-apple-system,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;

  /* --- raios --- */
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:18px; --r-pill:999px;

  /* --- espaçamento (base 4px) --- */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;
  --sp-8:32px;--sp-10:40px;--sp-12:48px;--sp-16:64px;

  /* --- sombras --- */
  --sh-sm:0 1px 2px rgba(10,10,11,.05),0 1px 3px rgba(10,10,11,.08);
  --sh-md:0 4px 12px rgba(10,10,11,.07),0 2px 4px rgba(10,10,11,.05);
  --sh-lg:0 14px 34px rgba(10,10,11,.12),0 4px 8px rgba(10,10,11,.05);

  --header-h:66px;
}

[data-theme="light"]{
  --bg:var(--ink-50); --surface:var(--white); --surface-2:var(--ink-50);
  --surface-3:var(--ink-100); --border:var(--ink-200); --border-strong:var(--ink-300);
  --text:var(--ink-900); --text-muted:var(--ink-500); --text-subtle:var(--ink-400);
  --brand:var(--yellow-400); --brand-ink:var(--ink-950); --brand-text:var(--yellow-700);
  --nav-bg:var(--ink-950); --nav-text:var(--white); --hair:rgba(10,10,11,.09);
  --tile:var(--ink-950); --tile-fg:var(--yellow-400);
  color-scheme:light;
}

[data-theme="dark"]{
  --bg:var(--ink-950); --surface:var(--ink-900); --surface-2:var(--ink-800);
  --surface-3:var(--ink-700); --border:var(--ink-700); --border-strong:var(--ink-600);
  --text:var(--ink-50); --text-muted:var(--ink-300); --text-subtle:var(--ink-400);
  --brand:var(--yellow-400); --brand-ink:var(--ink-950); --brand-text:var(--yellow-300);
  --nav-bg:#000; --nav-text:var(--white); --hair:rgba(255,255,255,.10);
  --tile:#000; --tile-fg:var(--yellow-400);
  --sh-sm:0 1px 2px rgba(0,0,0,.5); --sh-md:0 4px 14px rgba(0,0,0,.5); --sh-lg:0 16px 40px rgba(0,0,0,.6);
  --success-bg:#0c2a18; --success-fg:#4ade80; --danger-bg:#2c0f0f; --danger-fg:#f87171;
  --warning-bg:#2a1e05; --warning-fg:#fbbf24; --info-bg:#0d1a33; --info-fg:#60a5fa;
  color-scheme:dark;
}

/* ===================== BASE ===================== */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);background:var(--bg);color:var(--text);line-height:1.55;
  -webkit-font-smoothing:antialiased;transition:background .3s,color .3s}
h1,h2,h3,h4{font-family:var(--font-head);line-height:1.14;letter-spacing:-.012em;font-weight:700}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%}
button{font:inherit}

/* Números tabulares: horários e placas nunca "dançam" ao atualizar */
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* Acessibilidade */
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:var(--r-sm)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--brand);
  color:var(--brand-ink);padding:12px 20px;font-weight:600;border-radius:0 0 var(--r-md) 0}
.skip-link:focus{left:0}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ===================== ÍCONES AUTORAIS ===================== */
.icon{width:20px;height:20px;stroke:currentColor;stroke-width:1.7;fill:none;
  stroke-linecap:round;stroke-linejoin:round;flex:none;display:inline-block;vertical-align:middle}
.icon-sm{width:16px;height:16px}
.icon-lg{width:26px;height:26px;stroke-width:1.6}

/* ===================== LAYOUT ===================== */
.wrap{max-width:1160px;margin:0 auto;padding:0 var(--sp-6)}
.wrap-wide{max-width:1400px;margin:0 auto;padding:0 var(--sp-6)}
.sec-label{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:11.5px;
  font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--sp-3)}
.sec-label .idx{border:1px solid var(--border-strong);color:var(--brand-text);border-radius:5px;
  padding:3px 8px;font-weight:600;letter-spacing:.05em}
h2.title{font-size:clamp(24px,3vw,34px);margin-bottom:var(--sp-2)}
.lead{color:var(--text-muted);max-width:64ch;margin-bottom:var(--sp-8);font-size:16px}

.grid{display:grid;gap:var(--sp-4)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}.g2{grid-template-columns:1fr}}
@media(max-width:560px){.g3,.g4{grid-template-columns:1fr}}

/* ===================== MARCA / TOPBAR ===================== */
.topbar{position:sticky;top:0;z-index:50;background:var(--nav-bg);color:var(--nav-text);
  border-bottom:1px solid rgba(255,255,255,.08)}
.topbar .wrap,.topbar .wrap-wide{display:flex;align-items:center;justify-content:space-between;
  height:var(--header-h);gap:var(--sp-4)}
.brand{display:flex;align-items:center;gap:12px;flex:none}
.brand .fatomark{height:30px;width:auto;display:block}
.brand .sub{font-family:var(--font-body);font-size:9.5px;letter-spacing:.3em;color:var(--ink-400);
  display:block;font-weight:600;margin-top:4px}
@media(max-width:560px){.brand .sub{display:none}.brand .fatomark{height:26px}}

.toggle{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);color:#fff;padding:8px 14px;border-radius:var(--r-pill);
  cursor:pointer;font-family:var(--font-body);font-weight:600;font-size:13px;transition:.2s}
.toggle:hover{background:rgba(247,220,6,.14);border-color:var(--brand)}

/* ===================== BOTÕES ===================== */
.btn{font-family:var(--font-body);font-weight:600;font-size:14px;border-radius:var(--r-md);
  padding:11px 18px;border:1px solid transparent;cursor:pointer;display:inline-flex;
  align-items:center;gap:8px;transition:.18s;line-height:1;text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.btn-primary{background:var(--brand);color:var(--brand-ink)}
.btn-primary:hover:not(:disabled){background:var(--yellow-300)}
.btn-dark{background:var(--ink-900);color:#fff}
[data-theme="dark"] .btn-dark{background:var(--ink-700)}
.btn-dark:hover:not(:disabled){background:var(--ink-700)}
.btn-outline{background:transparent;border-color:var(--border-strong);color:var(--text)}
.btn-outline:hover:not(:disabled){border-color:var(--brand);color:var(--brand-text)}
.btn-ghost{background:transparent;color:var(--text-muted)}
.btn-ghost:hover:not(:disabled){background:var(--surface-3);color:var(--text)}
.btn-danger{background:var(--danger);color:#fff}
.btn-danger:hover:not(:disabled){background:#b91c1c}
.btn-lg{padding:15px 26px;font-size:16px;border-radius:var(--r-lg)}
.btn-sm{padding:7px 12px;font-size:12.5px}
.btn-block{width:100%;justify-content:center}

/* ===================== CAMPOS ===================== */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:12.5px;font-weight:600;color:var(--text-muted)}
.input,select.input,textarea.input{width:100%;background:var(--surface-2);
  border:1px solid var(--border-strong);border-radius:var(--r-md);padding:11px 13px;
  font-family:var(--font-body);font-size:14px;color:var(--text);transition:.15s}
textarea.input{resize:vertical;min-height:110px;line-height:1.5}
.input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(247,220,6,.26);
  background:var(--surface)}
.input::placeholder{color:var(--text-subtle)}
.input-ico{position:relative}
.input-ico .icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-subtle);
  pointer-events:none}
.input-ico .input{padding-left:38px}
.input-mono{font-family:var(--font-mono);letter-spacing:.06em;text-transform:uppercase}
.hint{font-size:12px;color:var(--text-subtle)}
.err-text{font-size:12.5px;color:var(--danger-fg);font-weight:600}

/* ===================== BADGES DE STATUS ===================== */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
  padding:4px 10px 4px 8px;border-radius:var(--r-pill);line-height:1.3;white-space:nowrap}
.badge .dot{width:7px;height:7px;border-radius:50%;flex:none}
.badge .icon-sm{width:13px;height:13px;stroke-width:2}
.b-in{background:var(--success-bg);color:var(--success-fg)}    .b-in .dot{background:var(--success)}
.b-out{background:var(--surface-3);color:var(--text-muted)}    .b-out .dot{background:var(--ink-400)}
.b-pend{background:var(--warning-bg);color:var(--warning-fg)}  .b-pend .dot{background:var(--warning)}
.b-block{background:var(--danger-bg);color:var(--danger-fg)}   .b-block .dot{background:var(--danger)}
.b-brand{background:var(--surface-3);color:var(--text-muted)}
.b-info{background:var(--info-bg);color:var(--info-fg)}        .b-info .dot{background:var(--info)}

/* ===================== PAINÉIS ===================== */
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);
  padding:var(--sp-6);box-shadow:var(--sh-md)}
.panel-flat{box-shadow:none}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  flex-wrap:wrap;margin-bottom:var(--sp-5)}

/* ===================== LED (há gente dentro agora) ===================== */
.led{position:relative;width:9px;height:9px;border-radius:50%;background:var(--success);flex:none}
.led::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid var(--success);
  opacity:.5;animation:ping 2.2s cubic-bezier(0,0,.2,1) infinite}
.led-off{background:var(--ink-400)}
.led-off::after{display:none}
@keyframes ping{0%{transform:scale(.6);opacity:.6}80%,100%{transform:scale(1.6);opacity:0}}

/* ===================== CREDENCIAL POR CLIENTE ===================== */
/* Coluna flexível para que a faixa e os números fiquem alinhados entre
   credenciais da mesma linha, mesmo quando o local ocupa duas linhas. */
.cred{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);
  box-shadow:var(--sh-sm);transition:.2s;cursor:pointer;overflow:hidden;color:inherit;
  display:flex;flex-direction:column}
.cred:hover{transform:translateY(-3px);box-shadow:var(--sh-lg);border-color:var(--border-strong)}
.cred .head{display:flex;align-items:center;gap:12px;padding:var(--sp-5) var(--sp-5) var(--sp-4);flex:1}
.tile{width:46px;height:46px;border-radius:12px;background:var(--tile);color:var(--tile-fg);
  display:grid;place-items:center;font-family:var(--font-head);font-weight:700;font-size:16px;
  flex:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.cred .name{font-family:var(--font-head);font-weight:700;font-size:16px}
.cred .loc{font-size:12px;color:var(--text-muted)}
.cred .live{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--success-fg);
  white-space:nowrap;align-self:flex-start;margin-top:3px}
.cred .live.idle{color:var(--text-subtle)}
.cred .strip{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px var(--sp-5);border-top:1px dashed var(--border);border-bottom:1px dashed var(--border);
  background:var(--surface-2)}
.cred .pid{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--text-muted);
  display:inline-flex;align-items:center;gap:7px}
.cred .stats{display:flex;gap:22px;padding:var(--sp-4) var(--sp-5) var(--sp-5)}
.cred .n{font-family:var(--font-head);font-size:24px;font-weight:700;line-height:1}
.cred .n.acc{color:var(--success)}
.cred .l{font-size:11px;color:var(--text-muted);margin-top:4px}

/* ===================== TABELA DE REGISTRO ===================== */
.tbl-wrap{border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--sh-sm);background:var(--surface)}
.tbl-scroll{overflow-x:auto}
table.log{width:100%;border-collapse:collapse;background:var(--surface);font-size:13.5px}
table.log th{text-align:left;font-weight:600;font-size:11.5px;text-transform:uppercase;
  letter-spacing:.06em;color:var(--text-muted);background:var(--surface-2);padding:11px 14px;
  border-bottom:1px solid var(--border);white-space:nowrap}
table.log td{padding:12px 14px;border-bottom:1px solid var(--border);vertical-align:middle}
table.log tr:last-child td{border-bottom:none}
table.log tbody tr:hover td{background:var(--surface-2)}
.who{display:flex;align-items:center;gap:10px}
.avatar{width:32px;height:32px;border-radius:8px;background:var(--surface-3);color:var(--text-muted);
  display:grid;place-items:center;font-weight:700;font-size:12px;flex:none}
.plate{font-family:var(--font-mono);font-weight:600;background:var(--surface-3);
  border:1px solid var(--border-strong);border-radius:5px;padding:3px 8px;font-size:12.5px;
  letter-spacing:.05em;display:inline-block;white-space:nowrap}
.empty{padding:var(--sp-12) var(--sp-6);text-align:center;color:var(--text-muted)}
.empty .icon{width:34px;height:34px;color:var(--text-subtle);margin-bottom:var(--sp-3)}

/* ===================== SEGMENTOS (entrada/saída, tipo) ===================== */
.seg{display:flex;background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--r-md);padding:4px;gap:4px}
.seg button{flex:1;border:none;background:transparent;padding:9px;border-radius:7px;font-weight:600;
  font-size:13px;cursor:pointer;color:var(--text-muted);font-family:var(--font-body);
  display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:.15s}
.seg button:hover{color:var(--text)}
.seg button.on{background:var(--brand);color:var(--brand-ink);box-shadow:var(--sh-sm)}

/* ===================== CARD DE SERVIÇO (site) ===================== */
.svc{display:flex;gap:14px;align-items:flex-start;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-5);box-shadow:var(--sh-sm);
  transition:.2s}
.svc:hover{border-color:var(--border-strong);box-shadow:var(--sh-md);transform:translateY(-2px)}
.svc .sico{width:44px;height:44px;border-radius:11px;flex:none;display:grid;place-items:center;
  background:var(--surface-2);border:1px solid var(--border);color:var(--text)}
.svc .sico .icon{width:22px;height:22px;color:var(--brand-text)}
.svc h4{font-size:15px;margin-bottom:3px}
.svc p{font-size:13px;color:var(--text-muted)}

/* ===================== RODAPÉ ===================== */
footer{background:var(--nav-bg);color:var(--ink-300);padding:var(--sp-10) 0;
  border-top:1px solid rgba(255,255,255,.08)}
footer b{color:#fff}
footer a:hover{color:var(--brand)}
.pill-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.pill{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);padding:6px 12px;
  border-radius:999px;font-size:12px}

/* ===================== AVISOS ===================== */
.alert{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--r-md);
  font-size:13.5px;border:1px solid transparent}
.alert .icon{flex:none;margin-top:1px}
.alert-ok{background:var(--success-bg);color:var(--success-fg);border-color:rgba(22,163,74,.25)}
.alert-err{background:var(--danger-bg);color:var(--danger-fg);border-color:rgba(220,38,38,.25)}
.alert-warn{background:var(--warning-bg);color:var(--warning-fg);border-color:rgba(217,119,6,.25)}
.alert-info{background:var(--info-bg);color:var(--info-fg);border-color:rgba(37,99,235,.25)}

/* ===================== UTILITÁRIOS ===================== */
.stack{display:flex;flex-direction:column;gap:var(--sp-4)}
.row{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.row-end{margin-left:auto}
.muted{color:var(--text-muted)}
.subtle{color:var(--text-subtle)}
.nowrap{white-space:nowrap}
.text-center{text-align:center}