/* ============================================================
   Portaria+ — sistema de design clean
   Fundo cinza frio, cards brancos flutuando, muito respiro.
   Cor é SEMÂNTICA: verde=entrada, âmbar=saída, vermelho=alerta.
   Fonte local (sem Google Fonts): Plus Jakarta Sans.
   ============================================================ */

@font-face {
  font-family: 'Jakarta';
  font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('../fonts/jakarta-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: 'Jakarta';
  font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('../fonts/jakarta-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------- Tokens: CLARO ---------------- */
:root {
  color-scheme: light;

  --bg: #EEF1F6;
  --surface: #FFFFFF;
  --surface-2: #F5F7FB;
  --text: #0F172A;
  --muted: #59677D;   /* escurecido: #64748B dava 4.20 sobre o fundo da página */
  --border: #E8EDF4;

  /* Cores ajustadas para passar em contraste 4.5:1 sobre seus fundos "soft"
     e sobre o fundo da página (achado C-08 da auditoria). */
  --brand: #4F46E5;
  --brand-soft: #EEF0FE;
  --entrada: #046B50;      --entrada-soft: #E7F7F1;
  --saida:   #9A4A08;      --saida-soft:   #FDF3E3;
  --alert:   #C81E1E;      --alert-soft:   #FDECEC;
  /* Cor do texto QUANDO --brand é o fundo. No escuro, --brand é um índigo claro
     (feito para ser texto sobre fundo escuro); manter branco em cima dele dava
     2.98:1 no botão primário, nos pills e no skip link. */
  --on-brand: #FFFFFF;
  --on-entrada: #FFFFFF;

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-7:28px; --sp-8:32px; --sp-10:40px; --sp-12:48px;

  --fs-xs:.75rem; --fs-sm:.8125rem; --fs-md:.875rem; --fs-base:.9375rem;
  --fs-lg:1.0625rem; --fs-xl:1.25rem; --fs-2xl:1.625rem; --fs-3xl:2rem;

  --r-sm:10px; --r:14px; --r-lg:20px; --r-xl:24px; --r-pill:999px;

  --shadow-1: 0 1px 2px rgba(15,23,42,.04), 0 6px 20px rgba(15,23,42,.05);
  --shadow-2: 0 12px 40px rgba(15,23,42,.12);

  --dur:.18s; --ease:cubic-bezier(.2,.6,.2,1);
  --ring: 0 0 0 3px color-mix(in srgb, var(--brand) 35%, transparent);
  --font: 'Jakarta', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ---------------- Tokens: ESCURO ---------------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0F1420; --surface: #171E2E; --surface-2: #1E2637;
  --text: #F1F5F9; --muted: #A6B3C4; --border: #263149;
  --brand: #818CF8; --brand-soft: #232B4A;
  --entrada: #34D399; --entrada-soft: #14312A;
  --saida:   #FBBF24; --saida-soft:   #33280F;
  --alert:   #F87171; --alert-soft:   #351B1E;
  --on-brand: #131A2E; --on-entrada: #0B2119;   /* texto escuro sobre os acentos claros */
  --shadow-1: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.25);
  --shadow-2: 0 14px 44px rgba(0,0,0,.5);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0F1420; --surface: #171E2E; --surface-2: #1E2637;
    --text: #F1F5F9; --muted: #A6B3C4; --border: #263149;
    --brand: #818CF8; --brand-soft: #232B4A;
    --entrada: #34D399; --entrada-soft: #14312A;
    --saida:   #FBBF24; --saida-soft:   #33280F;
    --alert:   #F87171; --alert-soft:   #351B1E;
  --on-brand: #131A2E; --on-entrada: #0B2119;   /* texto escuro sobre os acentos claros */
    --shadow-1: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.25);
    --shadow-2: 0 14px 44px rgba(0,0,0,.5);
  }
}

* { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -.01em;
}

/* Foco de teclado: usa OUTLINE, não box-shadow.
   Antes era `box-shadow: var(--ring)` dentro de :where() — especificidade
   (0,1,0), a mesma de `.btn-primary`, que vem depois no arquivo e sobrescrevia
   a sombra: nenhum botão primário mostrava foco (achado C-04 da auditoria).
   Outline não colide com sombra decorativa e sobrevive ao alto contraste. */
:where(a,button,input,select,textarea,[tabindex],.pill,.icon-btn,.tab):focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}
@media (forced-colors: active) {
  :where(a,button,input,select,textarea,[tabindex],.pill,.icon-btn,.tab):focus-visible {
    outline: 3px solid Highlight;
  }
}
.ic { flex-shrink: 0; vertical-align: middle; }
::selection { background: color-mix(in srgb, var(--brand) 25%, transparent); }

/* ---------------- Layout ---------------- */
.layout { display:flex; min-height:100vh; }

.sidebar {
  width: 244px; flex-shrink:0;
  background: var(--surface);
  padding: var(--sp-6) var(--sp-4);
  display:flex; flex-direction:column; gap:var(--sp-1);
  position:sticky; top:0; height:100vh; z-index:20;
  border-right: 1px solid var(--border);
}

.logo { display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-2) var(--sp-3) var(--sp-8); }
.logo-icon {
  width:38px; height:38px; border-radius:12px; flex-shrink:0;
  background: var(--brand); color:var(--on-brand);
  display:grid; place-items:center;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--brand) 34%, transparent);
}
.logo b { font-size: var(--fs-lg); font-weight:800; letter-spacing:-.02em; display:block; }
.logo span { display:block; font-size:var(--fs-xs); color:var(--muted); font-weight:500; }

.nav-link {
  display:flex; align-items:center; gap:var(--sp-3);
  padding: var(--sp-3); border-radius: var(--r);
  color: var(--muted); text-decoration:none;
  font-size: var(--fs-base); font-weight:600;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav-link .nav-ico {
  width:34px; height:34px; border-radius:10px; flex-shrink:0;
  display:grid; place-items:center;
  background: transparent; color: var(--muted);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav-link .nav-curto { display:none; }   /* só aparece na barra inferior do celular */
.nav-link:hover { color: var(--text); background: var(--surface-2); }
.nav-link[aria-current="page"] { color: var(--text); font-weight:700; }
.nav-link[aria-current="page"] .nav-ico { background: var(--brand); color:var(--on-brand); }
.nav-spacer { flex:1; }
.nav-foot { font-size:var(--fs-xs); color:var(--muted); padding:var(--sp-3); line-height:1.45; }
/* Prova visível de qual versão o navegador está rodando. Duas vezes o usuário
   viu tela velha e nós dois levamos tempo para descobrir; agora dá para conferir
   de relance, sem abrir o DevTools. */
.build-tag {
  display:inline-block; margin-top:var(--sp-2); padding:2px 8px;
  border-radius:var(--r-pill); background:var(--surface-2);
  font-variant-numeric:tabular-nums; font-weight:700; letter-spacing:.02em;
}

.content { flex:1; padding: var(--sp-6) var(--sp-8) var(--sp-10); max-width:1560px; width:100%; }

/* Cabeçalho da página com usuário à direita */
.page-head {
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-4); flex-wrap:wrap; margin-bottom: var(--sp-6);
}
.page-head h1 { font-size:var(--fs-2xl); font-weight:800; letter-spacing:-.03em; }
.page-head p { color:var(--muted); font-size:var(--fs-md); margin-top:2px; font-weight:500; }
.head-actions { display:flex; gap:var(--sp-2); align-items:center; flex-wrap:wrap; }

.user-chip {
  display:flex; align-items:center; gap:var(--sp-3);
  background: var(--surface); border:1px solid var(--border);
  padding: 6px 6px 6px var(--sp-4); border-radius: var(--r-pill);
  cursor:pointer; font-family:inherit; color:var(--text);
  transition: box-shadow var(--dur) var(--ease);
}
.user-chip:hover { box-shadow: var(--shadow-1); }
.user-chip .u-name { font-size:var(--fs-md); font-weight:700; line-height:1.15; text-align:right; }
.user-chip .u-role { font-size:var(--fs-xs); color:var(--muted); font-weight:500; text-align:right; }
.user-chip .u-av {
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  background: var(--brand); color:var(--on-brand);
  display:grid; place-items:center; font-weight:800; font-size:var(--fs-md);
}
.user-menu {
  position:absolute; right:0; top:calc(100% + 8px); z-index:60; min-width:210px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
  box-shadow:var(--shadow-2); padding:var(--sp-2); display:none;
}
.user-menu.open { display:block; }
.user-menu a, .user-menu button {
  display:flex; align-items:center; gap:var(--sp-3); width:100%;
  padding:var(--sp-3); border:none; background:none; border-radius:var(--r-sm);
  font:inherit; font-size:var(--fs-md); font-weight:600; color:var(--text);
  text-decoration:none; cursor:pointer; text-align:left;
}
.user-menu a:hover, .user-menu button:hover { background:var(--surface-2); }

/* ---------------- Cards ---------------- */
.card {
  background: var(--surface);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  box-shadow: var(--shadow-1);
}
.card h2, .card h3 {
  font-size: var(--fs-lg); font-weight:700; letter-spacing:-.02em;
  margin-bottom: var(--sp-5); display:flex; align-items:center; gap:var(--sp-2);
}
.card h2 .ic, .card h3 .ic { color: var(--muted); }
.card-sub { color:var(--muted); font-size:var(--fs-md); margin-top:-14px; margin-bottom:var(--sp-5); font-weight:500; }

/* ---------------- Chips / status ---------------- */
.chip {
  display:inline-flex; align-items:center; gap:var(--sp-2);
  padding:7px var(--sp-3); border-radius:var(--r-pill);
  font-size:var(--fs-sm); font-weight:600;
  background: var(--surface); border:1px solid var(--border); color:var(--text);
}
.chip .dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.dot.on  { background:var(--entrada); box-shadow:0 0 0 3px color-mix(in srgb,var(--entrada) 20%,transparent); }
.dot.off { background:var(--alert);   box-shadow:0 0 0 3px color-mix(in srgb,var(--alert) 20%,transparent); }
.dot.warn{ background:var(--saida);   box-shadow:0 0 0 3px color-mix(in srgb,var(--saida) 20%,transparent); }

/* ---------------- Botões ---------------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  padding:0 var(--sp-5); min-height:44px; border-radius:var(--r);
  border:1px solid transparent; font-family:inherit;
  font-size:var(--fs-base); font-weight:700; letter-spacing:-.01em;
  cursor:pointer; text-decoration:none; color:var(--text);
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn-primary { background:var(--brand); color:var(--on-brand); box-shadow:0 6px 16px color-mix(in srgb,var(--brand) 30%,transparent); }
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 10px 22px color-mix(in srgb,var(--brand) 38%,transparent); }
.btn-ghost { background:var(--surface); border-color:var(--border); }
.btn-ghost:hover { background:var(--surface-2); }
.btn-green  { background:var(--entrada-soft); color:var(--entrada); }
.btn-green:hover  { background:color-mix(in srgb,var(--entrada) 18%,transparent); }
.btn-orange { background:var(--saida-soft); color:var(--saida); }
.btn-orange:hover { background:color-mix(in srgb,var(--saida) 18%,transparent); }
.btn-danger { background:var(--alert-soft); color:var(--alert); }
.btn-danger:hover { background:color-mix(in srgb,var(--alert) 18%,transparent); }
.btn-sm { min-height:38px; padding:0 var(--sp-4); font-size:var(--fs-md); border-radius:var(--r-sm); }
.btn:disabled { opacity:.5; cursor:not-allowed; transform:none !important; }

.icon-btn {
  display:inline-grid; place-items:center; width:38px; height:38px;
  border-radius:var(--r-sm); background:var(--surface-2); border:1px solid transparent;
  color:var(--muted); cursor:pointer; touch-action:manipulation;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.icon-btn:hover { background:color-mix(in srgb,var(--text) 8%,transparent); color:var(--text); }
.icon-btn.danger:hover { background:var(--alert-soft); color:var(--alert); }
.theme-toggle { display:inline-grid; place-items:center; width:40px; height:40px; border-radius:var(--r-sm);
  border:1px solid var(--border); background:var(--surface); color:var(--muted); cursor:pointer; touch-action:manipulation; }
.theme-toggle:hover { color:var(--text); background:var(--surface-2); }

/* ---------------- Formulários ---------------- */
input, select, textarea {
  width:100%; padding:0 var(--sp-4); min-height:46px;
  background:var(--surface-2); border:1px solid transparent; border-radius:var(--r);
  color:var(--text); font-family:inherit; font-weight:500;
  /* 16px é o mínimo: abaixo disso o Safari do iPad dá zoom sozinho ao focar
     e desloca a tela inteira a cada campo (achado A-09). */
  font-size:1rem;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
textarea { min-height:88px; padding:var(--sp-3) var(--sp-4); resize:vertical; line-height:1.5; }
input[type="range"] { padding:0; background:transparent; accent-color:var(--brand); min-height:32px; }
input:hover, select:hover, textarea:hover { background:color-mix(in srgb,var(--text) 6%,transparent); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  background:var(--surface); border-color:var(--brand); box-shadow:var(--ring);
}
input::placeholder, textarea::placeholder { color:var(--muted); opacity:.85; }
select { background-color:var(--surface-2); color:var(--text); cursor:pointer; }
select option { background:var(--surface); color:var(--text); }
label { display:block; font-size:var(--fs-md); font-weight:600; color:var(--text); margin:var(--sp-4) 0 var(--sp-2); }
.field-hint { font-size:var(--fs-sm); color:var(--muted); margin-top:var(--sp-2); line-height:1.5; font-weight:500; }

.check {
  display:flex; align-items:center; gap:var(--sp-3); cursor:pointer;
  font-size:var(--fs-base); font-weight:600; color:var(--text);
  margin:var(--sp-3) 0; padding:var(--sp-1) 0;
}
.check input { width:20px; height:20px; min-height:0; flex-shrink:0; accent-color:var(--brand); }

.pw-field { position:relative; }
.pw-field input { padding-right:48px; }
.pw-field .pw-toggle {
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border:none; background:none; cursor:pointer;
  color:var(--muted); border-radius:8px; display:grid; place-items:center;
}
.pw-field .pw-toggle:hover { background:color-mix(in srgb,var(--text) 8%,transparent); color:var(--text); }

/* ---------------- Badges ---------------- */
.badge {
  display:inline-flex; align-items:center; gap:5px;
  padding:4px var(--sp-3); border-radius:var(--r-pill);
  font-size:var(--fs-xs); font-weight:700; letter-spacing:.01em;
}
.badge-entrada { background:var(--entrada-soft); color:var(--entrada); }
.badge-saida   { background:var(--saida-soft);   color:var(--saida); }
.badge-alert   { background:var(--alert-soft);   color:var(--alert); }
.badge-neutral { background:var(--surface-2);    color:var(--muted); }

/* ---------------- Abas ---------------- */
.tabs { display:inline-flex; gap:var(--sp-1); background:var(--surface-2); padding:5px; border-radius:var(--r); margin-bottom:var(--sp-6); }
.tab {
  padding:var(--sp-2) var(--sp-5); min-height:40px; border:none; background:none;
  border-radius:var(--r-sm); font:inherit; font-size:var(--fs-base); font-weight:700;
  color:var(--muted); cursor:pointer; display:inline-flex; align-items:center; gap:var(--sp-2);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tab[aria-selected="true"] { background:var(--surface); color:var(--text); box-shadow:var(--shadow-1); }

/* ---------------- Tabela ---------------- */
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:var(--fs-md); }
th {
  text-align:left; padding:var(--sp-3) var(--sp-4); color:var(--muted);
  font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.06em; font-weight:700;
  border-bottom:1px solid var(--border); white-space:nowrap;
}
td { padding:var(--sp-4); border-bottom:1px solid var(--border); font-weight:500; }
td.num, th.num { font-variant-numeric:tabular-nums; }
tbody tr:last-child td { border-bottom:none; }
tbody tr:hover td { background:var(--surface-2); }

/* ---------------- Toast ---------------- */
#toasts { position:fixed; right:var(--sp-6); bottom:var(--sp-6); z-index:999;
  display:flex; flex-direction:column; gap:var(--sp-2); max-width:min(92vw,380px); }
.toast {
  display:flex; align-items:flex-start; gap:var(--sp-3);
  padding:var(--sp-4); border-radius:var(--r);
  font-size:var(--fs-md); font-weight:600;
  background:var(--surface); box-shadow:var(--shadow-2);
  border-left:4px solid var(--muted);
  animation: slideIn .25s var(--ease);
}
.toast.ok  { border-left-color:var(--entrada); }
.toast.ok .t-ico  { color:var(--entrada); }
.toast.err { border-left-color:var(--alert); }
.toast.err .t-ico { color:var(--alert); }
.toast .t-msg { flex:1; min-width:0; }
.toast .t-close { background:none; border:none; color:var(--muted); cursor:pointer; padding:2px; border-radius:6px; display:grid; place-items:center; }
.toast .t-close:hover { background:var(--surface-2); color:var(--text); }
@keyframes slideIn { from { transform:translateY(10px); opacity:0; } }

/* ---------------- Avatares e listas ---------------- */
.avatar {
  width:44px; height:44px; border-radius:50%; object-fit:cover; overflow:hidden;
  background:var(--brand-soft); color:var(--brand);
  display:grid; place-items:center; font-weight:800; font-size:var(--fs-md); flex-shrink:0;
}
.avatar img { width:100%; height:100%; object-fit:cover; }

.feed-item {
  display:flex; gap:var(--sp-4); align-items:center;
  padding:var(--sp-4); border-radius:var(--r-lg);
  background:var(--surface-2);
  margin-bottom:var(--sp-2);
  animation: slideIn .3s var(--ease);
}
.feed-item .fi-main { flex:1; min-width:0; }
.feed-item .fi-name { font-weight:700; font-size:var(--fs-base); display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; }
.feed-item .fi-sub { font-size:var(--fs-sm); color:var(--muted); margin-top:2px; font-weight:500; overflow:hidden; text-overflow:ellipsis; }
.feed-item .fi-time { font-size:var(--fs-sm); color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums; font-weight:600; }
.feed-item.alert { background:var(--alert-soft); }

/* Cartão de chegada (destaque do feed principal) */
.arrival { padding:var(--sp-5); gap:var(--sp-5); }
.arrival .avatar { width:56px; height:56px; font-size:var(--fs-lg); }
.arrival .fi-name { font-size:var(--fs-lg); }

/* ---------------- Grids ---------------- */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-6); }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4); }
.dash-grid { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(0,1fr); gap:var(--sp-6); align-items:start; }

/* Faixa de métricas compacta */
.stats-row { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4); margin-bottom:var(--sp-6); }
.stat-card {
  background:var(--surface); border-radius:var(--r-lg); padding:var(--sp-5);
  box-shadow:var(--shadow-1); display:flex; align-items:center; gap:var(--sp-4);
}
.stat-card .s-ico { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; flex-shrink:0; }
.stat-card.is-present .s-ico { background:var(--brand-soft); color:var(--brand); }
.stat-card.is-in .s-ico { background:var(--entrada-soft); color:var(--entrada); }
.stat-card.is-out .s-ico { background:var(--saida-soft); color:var(--saida); }
.stat-card .s-n { font-size:var(--fs-2xl); font-weight:800; line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.stat-card .s-l { font-size:var(--fs-sm); color:var(--muted); font-weight:600; margin-top:3px; }

.stat { text-align:center; padding:var(--sp-5) var(--sp-3); }
.stat .n { font-size:var(--fs-3xl); font-weight:800; line-height:1; color:var(--text); font-variant-numeric:tabular-nums; }
.stat .l { font-size:var(--fs-sm); color:var(--muted); font-weight:600; margin-top:var(--sp-2); }

.video-wrap {
  border-radius:var(--r-lg); overflow:hidden; background:#0B1120;
  position:relative; aspect-ratio:16/9;
}
.video-wrap img { width:100%; height:100%; object-fit:cover; display:block; }
.video-wrap video { width:100%; height:100%; object-fit:contain; display:block; background:#000; }
/* A área de vídeo é preta nos DOIS temas, então o texto dentro dela não pode
   herdar --muted (calibrado para fundo claro): dava 3.28:1 no tema claro. */
.video-wrap .empty, .video-wrap .empty p, .video-wrap .field-hint { color:#B9C4D4; }
.video-overlay { position:absolute; top:var(--sp-3); left:var(--sp-3); display:flex; gap:var(--sp-2); }
.video-overlay .chip { background:rgba(11,17,32,.72); color:#fff; border-color:rgba(255,255,255,.16); backdrop-filter:blur(6px); }
.video-fallback {
  position:absolute; inset:0; display:none; flex-direction:column; gap:var(--sp-2);
  align-items:center; justify-content:center; text-align:center; padding:var(--sp-5);
  color:#94A3B8; background:#0B1120; font-size:var(--fs-md); font-weight:500;
}

/* ---------------- Estados vazios / carregando ---------------- */
.empty, .empty-state {
  text-align:center; color:var(--muted); padding:var(--sp-10) var(--sp-5);
  display:flex; flex-direction:column; align-items:center; gap:var(--sp-3); font-weight:500;
}
.empty .e-ico, .empty-state .e-ico {
  width:56px; height:56px; border-radius:16px; display:grid; place-items:center;
  background:var(--surface-2); color:var(--muted); margin-bottom:var(--sp-1);
}
.empty strong, .empty-state strong { color:var(--text); font-size:var(--fs-base); font-weight:700; }
.empty p, .empty-state p { font-size:var(--fs-md); max-width:42ch; }

.skeleton { position:relative; overflow:hidden; background:var(--surface-2); border-radius:var(--r-sm); }
.skeleton::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--text) 6%,transparent),transparent);
  transform:translateX(-100%); animation:shimmer 1.3s infinite;
}
@keyframes shimmer { to { transform:translateX(100%); } }

/* Indicador de "salvando…" dentro do botão travado por withBusy() */
.spinner {
  display:inline-block; width:16px; height:16px; flex:none;
  border:2px solid color-mix(in srgb, currentColor 30%, transparent);
  border-top-color:currentColor; border-radius:50%;
  animation:spin .7s linear infinite;
}
.spinner-sm { width:14px; height:14px; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ---------------- Passos-guia ---------------- */
.steps { display:flex; gap:var(--sp-2); flex-wrap:wrap; margin-bottom:var(--sp-6); }
.step {
  display:flex; align-items:center; gap:var(--sp-2);
  padding:var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-2); border-radius:var(--r-pill);
  background:var(--surface); box-shadow:var(--shadow-1);
  font-size:var(--fs-md); font-weight:600; color:var(--muted);
}
.step .n { width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  font-size:var(--fs-sm); font-weight:800; background:var(--surface-2); color:var(--muted); }
.step.done { color:var(--entrada); }
.step.done .n { background:var(--entrada); color:var(--on-entrada); }

/* ---------------- Pills de vínculo ---------------- */
.pill {
  display:inline-flex; align-items:center; gap:var(--sp-2);
  padding:var(--sp-2) var(--sp-4); min-height:38px; border-radius:var(--r-pill);
  border:1px solid var(--border); background:var(--surface);
  font-family:inherit; font-size:var(--fs-md); font-weight:600; color:var(--muted);
  cursor:pointer; touch-action:manipulation;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.pill:hover { border-color:var(--brand); color:var(--text); }
.pill[aria-pressed="true"] { background:var(--brand); border-color:var(--brand); color:var(--on-brand); }

/* ---------------- Cards de responsáveis ---------------- */
.g-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr)); gap:var(--sp-4); }
.gcard {
  background:var(--surface-2); border-radius:var(--r-lg); padding:var(--sp-5);
  display:flex; flex-direction:column; gap:var(--sp-4);
  transition: box-shadow var(--dur) var(--ease);
}
.gcard:hover { box-shadow:var(--shadow-1); }
.gcard .g-head { display:flex; gap:var(--sp-3); align-items:center; }
.gcard .avatar { width:52px; height:52px; font-size:var(--fs-lg); }
.gcard .g-name { font-weight:700; font-size:var(--fs-base); }
.gcard .g-sub { font-size:var(--fs-sm); color:var(--muted); margin-top:1px; font-weight:500; }
.gcard .g-kids { display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.kid-chip { font-size:var(--fs-xs); font-weight:700; padding:4px var(--sp-3); border-radius:var(--r-pill);
  background:var(--brand-soft); color:var(--brand); }
.g-actions { display:flex; gap:var(--sp-2); flex-wrap:wrap; margin-top:auto; align-items:center; }

.facedots { display:inline-flex; gap:4px; align-items:center; }
.facedots i { width:8px; height:8px; border-radius:50%; background:color-mix(in srgb,var(--muted) 30%,transparent); font-style:normal; }
.facedots i.on { background:var(--entrada); }
.count-badge { font-size:var(--fs-xs); font-weight:800; padding:3px var(--sp-3); border-radius:var(--r-pill);
  background:var(--brand-soft); color:var(--brand); margin-left:var(--sp-2); }

/* ---------------- Login ---------------- */
.auth-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:var(--sp-6); }
.auth-card { width:100%; max-width:420px; padding:var(--sp-8); border-radius:var(--r-xl); }
.auth-logo { display:flex; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-8); }
.auth-logo .logo-icon { width:44px; height:44px; }
.auth-logo b { font-size:var(--fs-lg); font-weight:800; }
.auth-logo span { display:block; font-size:var(--fs-xs); color:var(--muted); font-weight:500; }
.auth-card h1 { font-size:var(--fs-xl); font-weight:800; letter-spacing:-.03em; }
.auth-sub { color:var(--muted); font-size:var(--fs-md); margin-top:var(--sp-1); font-weight:500; }
.auth-err { margin-top:var(--sp-4); font-size:var(--fs-md); font-weight:600; color:var(--alert); min-height:1em;
  display:flex; align-items:center; gap:var(--sp-2); }

/* ---------------- Modal ---------------- */
.modal-backdrop {
  position:fixed; inset:0; z-index:500; background:rgba(15,23,42,.5);
  display:flex; align-items:center; justify-content:center; padding:var(--sp-5);
  animation:fadeIn .2s var(--ease); overscroll-behavior:contain; backdrop-filter:blur(3px);
}
/* max-height + overflow: sem isto um diálogo mais alto que a tela (o editor de
   falas tem campo, lista de marcadores e prévia) empurra o botão Salvar para
   fora da janela num notebook, e não há como salvar. */
.modal { width:100%; max-width:440px; background:var(--surface); border-radius:var(--r-xl);
  padding:var(--sp-7); box-shadow:var(--shadow-2); animation:pop .28s var(--ease);
  max-height:88vh; overflow:auto; }
.modal h2, .modal h3 { font-size:var(--fs-xl); font-weight:800; letter-spacing:-.02em; margin-bottom:var(--sp-3); }
.modal p { color:var(--muted); font-size:var(--fs-base); line-height:1.55; font-weight:500; }
.modal-actions { display:flex; gap:var(--sp-2); justify-content:flex-end; margin-top:var(--sp-7); flex-wrap:wrap; }
@keyframes fadeIn { from { opacity:0; } }
@keyframes pop { from { transform:scale(.95); opacity:0; } }

/* ---------------- Barra mobile / offline ---------------- */
.topbar { display:none; }
.offline-banner {
  position:fixed; left:0; right:0; bottom:0; z-index:400;
  background:var(--alert); color:#fff; text-align:center;
  padding:var(--sp-3) var(--sp-4); font-weight:700; font-size:var(--fs-base);
  display:none; align-items:center; justify-content:center; gap:var(--sp-2);
}
.offline-banner.show { display:flex; }

/* O banner é fixo no rodapé e cobria justamente o chip de status e o botão de
   teste dos painéis kiosk — que somem quando mais se precisa deles (A-10).
   Com o banner à mostra, o rodapé do painel sobe acima dele. */
body.tem-banner .panel-foot { bottom:calc(var(--sp-6) + 52px); }
.panel-foot { position:absolute; bottom:var(--sp-6); z-index:410; transition:bottom var(--dur) var(--ease); }
.panel-foot.esq { left:var(--sp-7); }
.panel-foot.dir { right:var(--sp-7); }

/* ---------------- Responsivo ---------------- */
@media (max-width:1100px) { .dash-grid { grid-template-columns:1fr; } }
@media (max-width:1000px) { .grid-2 { grid-template-columns:1fr; } }

@media (max-width:860px) {
  .layout { flex-direction:column; }
  .sidebar {
    position:fixed; bottom:0; left:0; right:0; top:auto; width:auto; height:auto;
    flex-direction:row; gap:2px; padding:var(--sp-1) var(--sp-2);
    border-right:none; border-top:1px solid var(--border);
    justify-content:space-around; overflow-x:auto;
    padding-bottom:calc(var(--sp-1) + env(safe-area-inset-bottom));
  }
  .sidebar .logo, .sidebar .nav-spacer, .sidebar .nav-foot, .sidebar .nav-tools { display:none; }
  /* o botão de tema já existe na topbar; sem isto apareciam dois (achado A-07) */
  .head-actions .theme-toggle { display:none; }
  .nav-link { flex-direction:column; gap:1px; padding:var(--sp-2) 2px; font-size:9.5px;
    font-weight:700; flex:1 1 0; min-width:0; text-align:center; letter-spacing:-.02em; }
  .nav-link .nav-longo { display:none; }
  .nav-link .nav-curto { display:inline; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .nav-link .nav-ico { width:28px; height:28px; }
  /* folga suficiente para a barra inferior não cobrir o último card (M-03) */
  .content { padding:var(--sp-4) var(--sp-4) calc(96px + env(safe-area-inset-bottom)); }
  .topbar {
    display:flex; align-items:center; justify-content:space-between;
    padding:var(--sp-3) var(--sp-4); position:sticky; top:0; z-index:30;
    background:var(--surface); border-bottom:1px solid var(--border);
  }
  .topbar .logo { padding:0; }
  .topbar .logo-icon { width:34px; height:34px; }
  .page-head h1 { font-size:var(--fs-xl); }
}

@media (max-width:560px) {
  .stats-row, .grid-3 { grid-template-columns:1fr; gap:var(--sp-3); }
  .stat-card { padding:var(--sp-4); }
  .content { padding:var(--sp-3) var(--sp-3) calc(78px + env(safe-area-inset-bottom)); }
  .card { padding:var(--sp-5); border-radius:var(--r-lg); }
  .user-chip .u-name, .user-chip .u-role { display:none; }
  .user-chip { padding:5px; }
}

/* ---------- Texto longo não pode estourar o card (achado A-01) ---------- */
body { overflow-wrap: anywhere; }
.fi-name, .fi-sub, .g-name, .g-sub, .toast .t-msg, .modal p, .kid .n { min-width: 0; }

/* ---------- Conteúdo só para leitor de tela (skip link, títulos) ---------- */
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
.skip-link {
  position:absolute; left:var(--sp-3); top:-60px; z-index:900;
  background:var(--brand); color:var(--on-brand); padding:var(--sp-3) var(--sp-4);
  border-radius:var(--r-sm); font-weight:700; text-decoration:none;
  transition:top var(--dur) var(--ease);
}
.skip-link:focus { top:var(--sp-3); }

/* ---------- Alvos de toque de 44px em telas de toque (achado M-07) ---------- */
@media (pointer: coarse) {
  .btn-sm, .pill, .tab { min-height:44px; }
  .icon-btn, .theme-toggle { width:44px; height:44px; }
  .pw-field .pw-toggle { width:44px; height:44px; }
  .toast .t-close { min-width:44px; min-height:44px; }
  table a { display:inline-block; padding:var(--sp-2) var(--sp-1); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  /* EXCEÇÃO: indicadores de progresso precisam continuar girando, senão leem
     como interface travada (achado do spinner "Aguarde, já vamos atender"). */
  .spinner, .skeleton::after {
    animation-duration:1s !important; animation-iteration-count:infinite !important;
  }
}