/* =============================================================
   Controle de Patio — folha de estilo unica
   Sem etapa de build: este arquivo e servido como esta pelo Nginx.

   Como esta organizado:
     1. tokens      cor, tipografia, espaco, raio, sombra
     2. base        reset curto e elementos nus
     3. primitivas  botao, campo, cartao, tabela, selo
     4. componentes shell, fila, docas, modal, painel

   Tres decisoes que vale explicar, porque parecem detalhe e nao sao:

   TIPOGRAFIA DO SISTEMA. Nada de fonte externa. A guarita costuma estar
   em rede restrita ou instavel, e uma folha de estilo que espera o Google
   responder deixa a tela sem formatacao enquanto o caminhao espera. A
   pilha abaixo usa a fonte nativa de cada sistema — San Francisco no Mac,
   Segoe no Windows, Roboto no Android — que ja esta carregada e e a que o
   usuario le o dia inteiro.

   MEDIDAS EM rem. Quem trabalha oito horas numa tela costuma aumentar a
   fonte do navegador. Com px isso nao faz nada. Com rem, a tela inteira
   acompanha.

   ALVO DE TOQUE DE 44px. A portaria opera em touchscreen, as vezes de
   luva. Botao de 32px de altura e bonito no monitor do desenvolvedor e
   impossivel na guarita.
   ============================================================= */

/* ---------- 1. tokens ---------- */
:root{
  /* superficies, do fundo para a frente */
  --bg:#EFF3F6; --surface:#FFFFFF; --surface-2:#E7ECF1; --surface-3:#DDE4EA;
  --line:#D2DBE3; --line-2:#B6C3CE;

  /* Texto em tres niveis. Os valores sao conferidos contra o fundo MAIS
     DIFICIL em que aparecem, que e --surface-2 (cartao da fila, linha da
     tabela sob o cursor, caixa de marcar) — e nao contra o branco. Medir
     so no branco deixava o metadado em 4.35:1, abaixo do minimo AA,
     justamente onde ele mais aparece. */
  --ink:#152029;            /* 14.8:1  texto corrido      */
  --ink-2:#4C5C6A;          /*  6.2:1  apoio              */
  --ink-3:#5B6B7A;          /*  4.6:1  rotulo e metadado  */

  /* marca do cliente. Os valores reais sao calculados no servidor a
     partir da cor do contrato (ver app/services/marca.py) e injetados
     em base.html; o que esta aqui e so o padrao de quem nao definiu. */
  --accent:#0B5FA5;         /* fundo de botao e realce         */
  --accent-ink:#0B5FA5;     /* a marca como TEXTO sobre o claro */
  --on-accent:#FFFFFF;      /* texto sobre a cor da marca      */
  --accent-2:#0A4A80;       /* estado pressionado              */
  --destaque:#C77700; --on-destaque:#FFFFFF; --destaque-ink:#8A5300;

  /* estados, conferidos no mesmo criterio */
  --ok:#17703F; --warn:#A05E00; --crit:#AF2A21; --info:#5B44A0; --idle:#5D6A77;

  /* escala tipografica, razao 1.2 a partir de 16px */
  --t-xs:.75rem;      /* 12px  rotulo em caixa alta — o MINIMO do sistema */
  --t-sm:.8125rem;    /* 13px  metadado             */
  --t-md:.875rem;     /* 14px  tabela e formulario  */
  --t-base:1rem;      /* 16px  texto corrido        */
  --t-lg:1.125rem;    /* 18px                       */
  --t-xl:1.375rem;    /* 22px  titulo de secao      */
  --t-2xl:1.75rem;    /* 28px  titulo de tela       */
  --t-3xl:2.5rem;     /* 40px  numero grande        */

  /* espaco: escala de 4px, para nao haver dois "quase iguais" */
  --e-1:.25rem; --e-2:.5rem; --e-3:.75rem; --e-4:1rem;
  --e-5:1.25rem; --e-6:1.5rem; --e-8:2rem; --e-10:2.5rem;

  --r:.375rem; --r-lg:.5rem; --r-xl:.75rem; --r-pill:999px;

  /* altura minima de qualquer coisa que se toca */
  --toque:2.75rem;        /* 44px */
  --toque-sm:2.25rem;     /* 36px — so para acao secundaria em tabela */

  --shadow:0 1px 2px rgba(21,32,41,.06), 0 8px 24px -14px rgba(21,32,41,.28);
  --shadow-lg:0 20px 48px -16px rgba(21,32,41,.32);
  --foco:0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent);

  --f-body:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
           Arial, "Noto Sans", sans-serif;
  --f-disp:var(--f-body);
  --f-mono:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
           "Liberation Mono", monospace;

  color-scheme:light dark;
}

/* O tema escuro so troca cor. Tamanho, espaco e raio sao os mesmos:
   o que muda e a luz da sala, nao o dedo de quem opera. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0C1219; --surface:#131D26; --surface-2:#1A2733; --surface-3:#22303D;
    --line:#26343F; --line-2:#384956;
    --ink:#E4EDF4; --ink-2:#9AAEBE; --ink-3:#8393A4;
    --accent:var(--accent-escuro, #57A6E4);
    --accent-ink:var(--accent-escuro, #57A6E4);
    --accent-2:#7CBDF0;
    --destaque-ink:var(--destaque-escuro, #E0A02A);
    --ok:#3FBE77; --warn:#E0A02A; --crit:#F2685D; --info:#A78BFA; --idle:#8592A0;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -16px rgba(0,0,0,.8);
    --shadow-lg:0 24px 60px -18px rgba(0,0,0,.85);
  }
}
:root[data-theme="dark"]{
  --bg:#0C1219; --surface:#131D26; --surface-2:#1A2733; --surface-3:#22303D;
  --line:#26343F; --line-2:#384956;
  --ink:#E4EDF4; --ink-2:#9AAEBE; --ink-3:#8393A4;
  --accent:var(--accent-escuro, #57A6E4);
  --accent-ink:var(--accent-escuro, #57A6E4);
  --accent-2:#7CBDF0;
  --destaque-ink:var(--destaque-escuro, #E0A02A);
  --ok:#3FBE77; --warn:#E0A02A; --crit:#F2685D; --info:#A78BFA; --idle:#8592A0;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -16px rgba(0,0,0,.8);
  --shadow-lg:0 24px 60px -18px rgba(0,0,0,.85);
}

/* ---------- 2. base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--f-body); font-size:var(--t-md); line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3{margin:0; font-family:var(--f-disp); font-weight:650; text-wrap:balance;
         line-height:1.2; letter-spacing:-.011em}
p{margin:0}
button{font:inherit; color:inherit}
a{color:var(--accent-ink)}

/* Foco sempre visivel, e visivel de verdade: quem navega por teclado
   precisa enxergar onde esta sem precisar adivinhar. */
:focus-visible{
  outline:2px solid var(--accent-ink); outline-offset:2px; border-radius:var(--r);
}
:focus:not(:focus-visible){outline:none}

/* Quem pediu menos movimento no sistema operacional nao recebe nenhum. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}

.mono{font-family:var(--f-mono); font-variant-numeric:tabular-nums}
.num{font-variant-numeric:tabular-nums; letter-spacing:-.01em; font-weight:650}

/* Visivel so para leitor de tela — rotulo que o olho dispensa e a
   tecnologia assistiva precisa. */
.so-leitor{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- shell: trilho, cabecalho e area de trabalho ---------- */
.shell{display:grid; grid-template-columns:14.5rem 1fr; min-height:100vh}
.rail{
  background:var(--surface); border-right:1px solid var(--line);
  display:flex; flex-direction:column; gap:.125rem; padding:var(--e-4) var(--e-3);
  position:sticky; top:0; height:100vh; overflow:auto;
}
.brand{display:flex; align-items:center; gap:var(--e-3); padding:0 var(--e-2) var(--e-5)}
.brand svg{flex:none}
.brand b{font-size:var(--t-lg); font-weight:700; letter-spacing:.03em;
         text-transform:uppercase; line-height:1.1; display:block}
.brand > div{min-width:0}
.brand span{
  display:block; font-size:.625rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); margin-top:.15rem; line-height:1.3;
  /* Assinatura longa cabe em duas linhas; a partir dai some, em vez de
     empurrar o menu para baixo. */
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.rail-lbl{
  font-size:var(--t-xs); letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3);
  padding:var(--e-4) var(--e-2) var(--e-1); font-weight:700;
}
/* O item de menu tambem e alvo de toque: na portaria se navega no dedo. */
.nav{
  display:flex; align-items:center; gap:var(--e-3); width:100%; text-align:left;
  min-height:var(--toque); padding:0 var(--e-3);
  border:1px solid transparent; background:none; border-radius:var(--r);
  cursor:pointer; color:var(--ink-2); font-weight:600; font-size:var(--t-md);
  text-decoration:none;
}
.nav:hover{background:var(--surface-2); color:var(--ink)}
.nav[aria-current="true"]{background:var(--accent); color:var(--on-accent)}
.nav[aria-current="true"] .nav-ct{background:color-mix(in srgb, var(--on-accent) 25%, transparent);
                                  color:inherit}
.nav-ic{width:1.15rem; height:1.15rem; flex:none; opacity:.85}
.nav[aria-current="true"] .nav-ic{opacity:1}
.nav-ct{
  margin-left:auto; font-family:var(--f-mono); font-size:var(--t-xs); font-weight:700;
  background:var(--surface-3); color:var(--ink-2);
  padding:.1rem var(--e-2); border-radius:var(--r-pill); min-width:1.5rem; text-align:center;
}
.rail-foot{
  margin-top:auto; padding:var(--e-4) var(--e-2) 0; border-top:1px solid var(--line);
  font-size:var(--t-sm); color:var(--ink-3);
}
.rail-foot b{display:block; color:var(--ink-2); font-weight:650; font-size:var(--t-md)}

.main{min-width:0; display:flex; flex-direction:column}
.topbar{
  display:flex; align-items:center; gap:var(--e-4); flex-wrap:wrap;
  padding:var(--e-4) var(--e-6); border-bottom:1px solid var(--line);
  background:var(--surface); position:sticky; top:0; z-index:20;
}
.topbar h1{font-size:var(--t-2xl)}
.topbar .sub{font-size:var(--t-sm); color:var(--ink-3); margin-top:.1rem}
.clock{margin-left:auto; display:flex; align-items:center; gap:var(--e-4)}
.clock .t{font-family:var(--f-mono); font-size:var(--t-lg); font-weight:600;
          letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.clock .d{font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase;
          color:var(--ink-3); text-align:right}
.page{padding:var(--e-5) var(--e-6) var(--e-10); display:flex; flex-direction:column;
      gap:var(--e-5)}

/* ---------- 3. primitivas ---------- */

/* BOTAO
   Tres variantes e dois tamanhos, e nada alem disso. Cada variante tem um
   papel: `btn-pri` e a acao que a tela existe para fazer (uma por tela),
   `btn` e tudo o mais, `btn-perigo` e o que nao tem volta. Botao de tabela
   usa `btn-sm`, o unico que pode ficar abaixo do alvo de toque cheio —
   e esta em tabela, onde se opera com mouse. */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--e-2);
  min-height:var(--toque); padding:0 var(--e-4);
  border-radius:var(--r); border:1px solid var(--line-2);
  background:var(--surface); color:var(--ink);
  cursor:pointer; font-weight:600; font-size:var(--t-md);
  white-space:nowrap; text-decoration:none;
  transition:background .12s ease, border-color .12s ease, transform .06s ease;
}
.btn:hover{background:var(--surface-2); border-color:var(--ink-3)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:none; box-shadow:var(--foco); border-color:var(--accent)}

.btn-pri{
  background:var(--accent); border-color:var(--accent); color:var(--on-accent);
}
.btn-pri:hover{background:var(--accent-2); border-color:var(--accent-2)}

.btn-perigo{
  background:var(--surface); border-color:color-mix(in srgb, var(--crit) 45%, var(--line-2));
  color:var(--crit);
}
.btn-perigo:hover{background:color-mix(in srgb, var(--crit) 10%, var(--surface));
                  border-color:var(--crit)}

.btn-ghost{border-color:transparent; background:transparent; color:var(--ink-2)}
.btn-ghost:hover{background:var(--surface-2); color:var(--ink); border-color:transparent}

.btn-sm{min-height:var(--toque-sm); padding:0 var(--e-3); font-size:var(--t-sm)}
.btn-bloco{width:100%}

/* Desabilitado precisa parecer desabilitado SEM depender so de opacidade:
   a 42% o texto perdia o contraste e virava ilegivel, nao inativo. */
.btn:disabled, .btn[aria-disabled="true"]{
  cursor:not-allowed; background:var(--surface-2); border-color:var(--line);
  color:var(--ink-3); transform:none;
}
.btn:disabled:hover{background:var(--surface-2)}

/* CAMPO */
.fld{display:flex; flex-direction:column; gap:var(--e-2); min-width:0}
.fld > label{
  font-size:var(--t-xs); letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-3); font-weight:700;
}
.fld .ajuda{font-size:var(--t-sm); color:var(--ink-3); line-height:1.4}

input[type=text], input[type=tel], input[type=email], input[type=password],
input[type=date], input[type=number], input[type=search], select, textarea{
  font:inherit; font-size:var(--t-md); min-height:var(--toque);
  padding:0 var(--e-3); width:100%;
  border:1px solid var(--line-2); border-radius:var(--r);
  background:var(--surface); color:var(--ink);
  transition:border-color .12s ease, box-shadow .12s ease;
}
textarea{padding:var(--e-3); line-height:1.5; min-height:5rem; resize:vertical}
select{
  /* Espaco a direita para a seta nativa nao encostar no texto. */
  padding-right:var(--e-8); appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:right 1.1rem center, right .85rem center;
  background-size:.3rem .3rem, .3rem .3rem;
  background-repeat:no-repeat;
}
input:focus, select:focus, textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:var(--foco);
}
input:disabled, select:disabled, textarea:disabled{
  background:var(--surface-2); color:var(--ink-3); cursor:not-allowed;
}
input::placeholder, textarea::placeholder{color:var(--ink-3); opacity:1}
input[aria-invalid="true"], select[aria-invalid="true"]{
  border-color:var(--crit);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--crit) 22%, transparent);
}

/* CARTAO */
.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--shadow);
}
.card-h{
  display:flex; align-items:center; gap:var(--e-3);
  padding:var(--e-3) var(--e-4); border-bottom:1px solid var(--line);
  flex-wrap:wrap;
}
.card-h h2{font-size:var(--t-sm); letter-spacing:.09em; text-transform:uppercase;
           color:var(--ink-2); font-weight:700}
.card-h .hint{font-size:var(--t-sm); color:var(--ink-3); margin-left:auto}

/* NUMERO EM DESTAQUE */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(10.5rem,1fr)); gap:var(--e-3)}
.kpi{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--e-3) var(--e-4); border-left:3px solid var(--tone,var(--accent));
  box-shadow:var(--shadow);
}
.kpi .k{font-size:var(--t-xs); letter-spacing:.11em; text-transform:uppercase;
        color:var(--ink-3); font-weight:700}
.kpi .v{font-size:var(--t-3xl); font-weight:700; line-height:1.05; margin-top:var(--e-1);
        font-variant-numeric:tabular-nums; letter-spacing:-.025em}
.kpi .v small{font-size:var(--t-base); font-weight:600; color:var(--ink-3); margin-left:.15em}
.kpi .s{font-size:var(--t-sm); color:var(--ink-3)}

/* SELO DE SITUACAO
   A cor nunca carrega o significado sozinha: o selo sempre traz o texto.
   Oito por cento dos homens nao distingue vermelho de verde, e pelo menos
   um deles trabalha numa portaria. */
.chip{
  display:inline-flex; align-items:center; gap:var(--e-2);
  font-size:var(--t-xs); font-weight:700; letter-spacing:.02em;
  padding:.2rem .6rem .2rem .45rem; border-radius:var(--r-pill); white-space:nowrap;
  color:var(--tone); background:color-mix(in srgb, var(--tone) 13%, transparent);
  border:1px solid color-mix(in srgb, var(--tone) 34%, transparent);
}
.chip::before{content:""; width:.4rem; height:.4rem; border-radius:50%;
              background:var(--tone); flex:none}
.t-ok{--tone:var(--ok)} .t-warn{--tone:var(--warn)} .t-crit{--tone:var(--crit)}
.t-info{--tone:var(--info)} .t-idle{--tone:var(--idle)} .t-acc{--tone:var(--accent-ink)}

/* TABELA */
table{width:100%; border-collapse:collapse; font-size:var(--t-md)}
.tw{overflow-x:auto; -webkit-overflow-scrolling:touch}
.tw-wide table{min-width:72rem}
.nw{white-space:nowrap}
th{
  text-align:left; font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); font-weight:700; padding:var(--e-3) var(--e-4);
  border-bottom:1px solid var(--line); white-space:nowrap;
  background:var(--surface); position:sticky; top:0; z-index:1;
}
td{padding:var(--e-3) var(--e-4); border-bottom:1px solid var(--line); vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--surface-2)}
.r{text-align:right}

/* AVISOS */
.erro, .aviso-ok, .aviso{
  font-size:var(--t-md); line-height:1.5; padding:var(--e-3) var(--e-4);
  border-radius:var(--r); border-left:3px solid var(--tone);
  background:color-mix(in srgb, var(--tone) 11%, var(--surface));
  border-top:1px solid color-mix(in srgb, var(--tone) 24%, transparent);
  border-right:1px solid color-mix(in srgb, var(--tone) 24%, transparent);
  border-bottom:1px solid color-mix(in srgb, var(--tone) 24%, transparent);
  color:var(--ink);
}
.erro{--tone:var(--crit)}
.aviso-ok{--tone:var(--ok)}
.aviso{--tone:var(--warn)}

/* ELEMENTOS DO DOMINIO */
.avatar{
  width:2.6rem; height:2.6rem; border-radius:var(--r); object-fit:cover;
  background:var(--surface-3); border:1px solid var(--line-2); flex:none; display:block;
}
.person{display:flex; align-items:center; gap:var(--e-3)}
.person .nm{font-weight:650; line-height:1.25}
.person .mt{font-size:var(--t-sm); color:var(--ink-3)}
.senha{
  font-family:var(--f-mono); font-weight:700; font-size:var(--t-md); letter-spacing:.06em;
  background:var(--surface-3); padding:.15rem var(--e-2); border-radius:var(--r); color:var(--ink);
}
.plate{
  font-family:var(--f-mono); font-weight:700; font-size:var(--t-sm); letter-spacing:.08em;
  border:1px solid var(--line-2); padding:.1rem var(--e-2); border-radius:var(--r);
  background:var(--surface-2);
}
.empty{padding:var(--e-10) var(--e-4); text-align:center; color:var(--ink-3);
       font-size:var(--t-md)}
/* Link dentro de texto corrido sublinha; dentro de tabela, nao — numa tela
   densa o sublinhado constante vira ruido. Em ambos os casos continua
   obvio que e clicavel pela cor e pelo peso, e sublinha ao passar. */
.link{color:var(--accent-ink); text-decoration:underline; text-underline-offset:2px;
      font-weight:600}
td .link, .person .link{text-decoration:none}
td .link:hover, .person .link:hover{text-decoration:underline}

/* ---------- fila armazém ---------- */
.queue{display:grid; grid-template-columns:repeat(auto-fill,minmax(288px,1fr)); gap:var(--e-3); padding:var(--e-4)}
.qcard{border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--e-3); background:var(--surface-2); display:flex; flex-direction:column; gap:var(--e-3); align-items:stretch}
.qcard > .chip{align-self:flex-start}
.qcard.aging{border-color:color-mix(in srgb, var(--crit) 55%, var(--line))}
.qtop{display:flex; gap:var(--e-3); align-items:flex-start}
.qtimer{margin-left:auto; text-align:right}
.qtimer b{font-family:var(--f-mono); font-size:var(--t-lg); font-weight:600; display:block; line-height:1.1}
.qtimer span{font-size:var(--t-xs); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)}
.qrow{display:flex; gap:var(--e-2); align-items:center}
/* Os campos seguem a definicao unica das primitivas — repetir aqui foi o
   que fez o alvo de toque sumir na fila do armazem. */
.qrow select{min-width:0}

/* ---------- docas ---------- */
.docks{display:grid; grid-template-columns:repeat(auto-fill,minmax(184px,1fr)); gap:var(--e-3); padding:var(--e-4)}
.dock{
  border:1px solid var(--line); border-left:4px solid var(--tone,var(--idle));
  border-radius:var(--r); padding:var(--e-3) var(--e-3); background:var(--surface-2); min-height:104px;
  display:flex; flex-direction:column; gap:var(--e-1);
}
.dock .dh{display:flex; align-items:baseline; gap:var(--e-2)}
.dock .dn{font-family:var(--f-disp); font-size:var(--t-2xl); font-weight:700; line-height:1}
.dock .dst{font-size:var(--t-xs); letter-spacing:.12em; text-transform:uppercase; color:var(--tone,var(--ink-3)); font-weight:700; margin-left:auto}
.dock .dnm{font-size:var(--t-sm); font-weight:600; line-height:1.25; margin-top:2px}
.dock .dmt{font-size:var(--t-sm); color:var(--ink-3)}
.dock .dt{font-family:var(--f-mono); font-size:var(--t-base); font-weight:600; margin-top:auto}
.dock.free{background:transparent; border-style:dashed}
.dock.free .dfree{font-size:var(--t-sm); color:var(--ink-3); margin-top:auto}

/* ---------- modal ---------- */
.scrim{
  position:fixed; inset:0; background:rgba(9,16,22,.62); z-index:60;
  display:flex; align-items:flex-start; justify-content:center; padding:40px var(--e-4); overflow:auto;
}
.modal{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); width:100%; max-width:640px; box-shadow:0 30px 70px -20px rgba(0,0,0,.5)}
.modal-h{display:flex; align-items:center; gap:var(--e-3); padding:var(--e-4) var(--e-5); border-bottom:1px solid var(--line)}
.modal-h h2{font-size:var(--t-lg)}
.modal-b{padding:var(--e-5); display:flex; flex-direction:column; gap:var(--e-4)}
.modal-f{display:flex; gap:var(--e-2); padding:var(--e-4) var(--e-5); border-top:1px solid var(--line); background:var(--surface-2); border-radius:0 0 10px 10px}
.modal-f .sp{margin-left:auto}
.steps{display:flex; gap:var(--e-2); margin-left:auto}
.step{
  width:26px; height:4px; border-radius:2px; background:var(--surface-3);
}
.step.on{background:var(--accent)}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:var(--e-3)}
.fld{display:flex; flex-direction:column; gap:var(--e-1); min-width:0}
.fld label{font-size:var(--t-xs); letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3); font-weight:600}
.note{
  font-size:var(--t-sm); padding:var(--e-3) var(--e-3); border-radius:var(--r); line-height:1.45;
  background:color-mix(in srgb, var(--tone,var(--accent)) 11%, transparent);
  border:1px solid color-mix(in srgb, var(--tone,var(--accent)) 30%, transparent);
}
.cam{display:flex; gap:var(--e-4); align-items:center}
.cam-box{
  width:150px; height:150px; border-radius:var(--r-lg); border:1px solid var(--line-2); background:var(--surface-3);
  display:grid; place-items:center; overflow:hidden; flex:none; position:relative;
}
.cam-box img, .cam-box video{width:100%; height:100%; object-fit:cover; display:block}
.cam-box .ph{font-size:var(--t-sm); color:var(--ink-3); text-align:center; padding:var(--e-3)}
.cam-side{display:flex; flex-direction:column; gap:var(--e-2); align-items:flex-start; font-size:var(--t-sm); color:var(--ink-2)}

/* ---------- avisos whatsapp ---------- */
.zap-wrap{display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,368px); gap:0}
.zap-tpl{padding:var(--e-4) var(--e-4); border-right:1px solid var(--line); display:flex; flex-direction:column; gap:var(--e-3)}
.tpl{border:1px solid var(--line); border-radius:var(--r); padding:var(--e-3) var(--e-3); background:var(--surface-2)}
.tpl .tn{font-family:var(--f-mono); font-size:var(--t-sm); font-weight:600; color:var(--accent); letter-spacing:.02em}
.tpl .tb{font-size:var(--t-sm); color:var(--ink-2); margin-top:5px; line-height:1.45}
.tpl .tb b{color:var(--ink); font-weight:600}
.tpl .tg{font-size:var(--t-xs); letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3); font-weight:600; margin-top:7px}
.thread{padding:var(--e-4); display:flex; flex-direction:column; gap:var(--e-2); max-height:396px; overflow-y:auto; background:var(--surface-2)}
.bub{
  border-radius:var(--r-lg) 9px 9px 3px; padding:var(--e-2) var(--e-3); font-size:var(--t-sm); line-height:1.45;
  background:var(--surface); border:1px solid var(--line); max-width:94%; align-self:flex-start;
}
.bub.out{
  align-self:flex-end; border-radius:var(--r-lg) 9px 3px 9px;
  background:color-mix(in srgb, var(--ok) 13%, var(--surface));
  border-color:color-mix(in srgb, var(--ok) 34%, transparent);
}
.bub .who{font-size:var(--t-xs); letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); font-weight:600; margin-bottom:3px}
.bub .meta{display:flex; gap:var(--e-2); align-items:center; justify-content:flex-end; margin-top:5px; font-size:var(--t-xs); color:var(--ink-3); font-family:var(--f-mono)}
.tick{font-weight:700; letter-spacing:-.12em}
.tick.read{color:var(--accent)}
.zap-flag{font-size:var(--t-xs); color:var(--ok); font-weight:600; white-space:nowrap}
.zap-off{font-size:var(--t-xs); color:var(--ink-3); white-space:nowrap}
@media (max-width:900px){ .zap-wrap{grid-template-columns:1fr} .zap-tpl{border-right:none; border-bottom:1px solid var(--line)} }

/* ---------- toast ---------- */
.toasts{position:fixed; right:18px; bottom:18px; z-index:80; display:flex; flex-direction:column; gap:var(--e-2); max-width:340px}
.toast{
  background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--tone,var(--ok));
  border-radius:var(--r); padding:var(--e-3) var(--e-4); box-shadow:var(--shadow); font-size:var(--t-md);
  animation:slide .25s ease;
}
@keyframes slide{from{opacity:0; transform:translateY(8px)}}
@media (prefers-reduced-motion:reduce){.toast{animation:none}}

/* ---------- painel tv (committed dark) ---------- */
.tv{
  --tv-bg:#070D14; --tv-p:#0E1926; --tv-p2:#132234; --tv-line:#1E3348;
  --tv-ink:#EAF2FA; --tv-ink2:#7E9AB4;
  --tv-ok:#2ECC71; --tv-warn:#F2B233; --tv-crit:#F0554B; --tv-info:#A78BFA; --tv-acc:#3FA0E8; --tv-idle:#42566B;
  background:var(--tv-bg); color:var(--tv-ink); min-height:100vh; padding:1.286em 1.429em 1.571em;
  display:flex; flex-direction:column; gap:1em;
}
.tv-top{display:flex; align-items:center; gap:1.429em; flex-wrap:wrap}
.tv-title{flex:1; text-align:center; min-width:18.571em}
.tv-title h1{font-family:var(--f-disp); font-size:3em; font-weight:700; letter-spacing:.05em; text-transform:uppercase; line-height:1}
.tv-title p{margin:0.286em 0 0; color:var(--tv-acc); font-size:1em; letter-spacing:.02em}
.tv-clock{text-align:right; font-family:var(--f-mono)}
.tv-clock .big{font-size:1.857em; font-weight:600; line-height:1.1}
.tv-clock .sm{font-size:0.9em; letter-spacing:.14em; color:var(--tv-ink2); text-transform:uppercase}
.tv-kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(13.571em,1fr)); gap:0.857em}
.tvk{
  background:linear-gradient(160deg, color-mix(in srgb, var(--tone) 16%, var(--tv-p)), var(--tv-p));
  border:1px solid color-mix(in srgb, var(--tone) 42%, transparent);
  border-radius:0.643em; padding:0.857em 1.071em;
}
.tvk .k{font-size:0.9em; letter-spacing:.14em; text-transform:uppercase; color:var(--tone); font-weight:700}
.tvk .v{font-family:var(--f-disp); font-size:3.143em; font-weight:700; line-height:1; margin-top:0.286em; font-variant-numeric:tabular-nums}
.tvk .s{font-size:0.9em; color:var(--tv-ink2)}
.tv-panel{background:var(--tv-p); border:1px solid var(--tv-line); border-radius:0.643em; overflow:hidden}
.tv-panel > h3{
  font-family:var(--f-disp); font-size:1.214em; letter-spacing:.14em; text-transform:uppercase;
  padding:0.786em 1.071em; border-bottom:1px solid var(--tv-line); color:var(--tv-ink);
}
.tv-panel table{font-size:1em}
.tv-panel th{color:var(--tv-ink2); border-bottom:1px solid var(--tv-line); padding:0.571em 0.857em; font-size:0.9em}
.tv-panel td{border-bottom:1px solid color-mix(in srgb,var(--tv-line) 55%, transparent); padding:0.643em 0.857em}
.tv-panel tbody tr:nth-child(even){background:var(--tv-p2)}
.tv-panel tbody tr:hover{background:var(--tv-p2)}
.tv-grid{display:grid; grid-template-columns:minmax(17.143em,1fr) minmax(18.571em,1.15fr) minmax(20em,1.3fr); gap:0.857em}
.tag{
  display:inline-block; font-size:0.9em; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  padding:3px 9px; border-radius:4px; color:#061019;
}
.tv-st{display:inline-flex; align-items:center; gap:0.5em; font-size:0.9em; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:var(--tone)}
.tv-st::before{content:""; width:0.643em; height:0.643em; border-radius:50%; background:var(--tone); flex:none}
.legend{display:flex; flex-direction:column; gap:7px; padding:14px}
.lg{display:flex; align-items:center; gap:9px; font-size:0.9em}
.lg .sw{width:11px; height:11px; border-radius:3px; flex:none}
.lg .nm{color:var(--tv-ink2); letter-spacing:.04em; text-transform:uppercase; font-size:0.9em; font-weight:600}
.lg .ct{margin-left:auto; font-family:var(--f-mono); font-weight:600}
.bars{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:16px 14px 12px; align-items:end; height:198px}
.bar{display:flex; flex-direction:column; align-items:center; gap:6px; height:100%; justify-content:flex-end}
.bar .bv{font-family:var(--f-disp); font-size:1.857em; font-weight:700; line-height:1}
.bar .bb{width:100%; border-radius:4px 4px 0 0; min-height:4px; transition:height .4s ease}
.bar .bl{font-size:0.9em; letter-spacing:.08em; text-transform:uppercase; color:var(--tv-ink2); text-align:center}
.dgrid{display:grid; grid-template-columns:repeat(6,1fr); gap:7px; padding:14px}
.dcell{
  border-radius:6px; padding:7px 4px; text-align:center; border:1px solid var(--tone);
  background:color-mix(in srgb, var(--tone) 20%, transparent);
}
.dcell .dnum{font-family:var(--f-disp); font-size:1.429em; font-weight:700; line-height:1; color:var(--tv-ink)}
.dcell .dic{font-size:0.9em; color:var(--tone); line-height:1.4}
.dfoot{display:flex; flex-wrap:wrap; gap:12px; padding:0 14px 12px; font-size:0.9em; letter-spacing:.08em; text-transform:uppercase; color:var(--tv-ink2)}
.dfoot span{display:flex; align-items:center; gap:5px}
.dfoot i{width:9px; height:9px; border-radius:2px; display:block}
.tv-foot{text-align:center; color:var(--tv-acc); font-size:0.9em; letter-spacing:.34em; text-transform:uppercase; padding-top:0.143em}
.tv-exit{background:transparent; border-color:#28415A; color:#7E9AB4; padding:0.429em 0.786em; font-size:0.9em}
.tv-exit:hover,.tv-exit:focus-visible{background:#132234; color:#EAF2FA}



/* ---------- 4. composicoes de tela ---------- */
a.nav{text-decoration:none}
form.inline{display:inline}

.login-tela{display:grid; place-items:center; min-height:100vh; padding:var(--e-6);
            background:var(--bg)}
.login-caixa{width:100%; max-width:25rem}
.login-caixa .card{padding:var(--e-6)}
.login-caixa h1{font-size:var(--t-2xl); color:var(--ink)}
.login-caixa .sub{color:var(--ink-3); font-size:var(--t-md); margin:var(--e-1) 0 var(--e-5)}

.acoes{display:flex; gap:var(--e-2); align-items:center; flex-wrap:wrap}
.filtros{
  display:flex; gap:var(--e-3); align-items:flex-end; flex-wrap:wrap;
  padding:var(--e-3) var(--e-4); border-bottom:1px solid var(--line);
}
.filtros .fld{min-width:10rem}
.secao{padding:var(--e-4); display:flex; flex-direction:column; gap:var(--e-4)}

/* Caixa de marcar: o rotulo inteiro e clicavel, e a area passa do alvo de
   toque — marcar "sim" com o dedo nao pode exigir pontaria. */
.chk{
  display:flex; gap:var(--e-3); align-items:flex-start; font-size:var(--t-md);
  min-height:var(--toque); padding:var(--e-3); border:1px solid var(--line);
  border-radius:var(--r); background:var(--surface-2); cursor:pointer;
}
.chk:hover{border-color:var(--line-2)}
.chk:focus-within{border-color:var(--accent); box-shadow:var(--foco)}
.chk input{width:1.15rem; height:1.15rem; min-height:0; margin:.1rem 0 0;
           accent-color:var(--accent); flex:none; cursor:pointer}

.sep{
  font-size:var(--t-xs); letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3);
  font-weight:700; padding-top:var(--e-2); border-top:1px solid var(--line);
}
.crono.atrasado, .mono.atrasado{color:var(--crit); font-weight:700}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:var(--e-4)}

/* ---------- seletor de unidade no cabecalho ---------- */
.sel-unidade{display:flex; flex-direction:column; gap:2px}
.sel-unidade label{font-size:var(--t-xs); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); font-weight:600}
.sel-unidade select{width:auto; min-width:150px; padding:5px 8px; font-size:var(--t-sm); font-weight:600}

/* ---------- marca do cliente ---------- */
:root{--destaque:#C77700}
.brand-logo{padding:2px 6px 20px}
.brand-logo img{max-width:100%; max-height:46px; width:auto; height:auto; display:block}
/* Na tela de entrada o logo ganha plaqueta branca: a maioria dos logos vem
   com fundo branco, e sem a plaqueta o retangulo aparece sobre o cinza. */
.login-caixa .brand-logo{justify-content:center; padding:0 0 18px}
.login-caixa .brand-logo img{
  max-height:64px; max-width:260px; background:#fff;
  padding:14px 22px; border-radius:9px; border:1px solid var(--line);
}

/* A segunda cor da marca aparece onde nao disputa com o significado das
   cores de situacao: a linha da marca no cabecalho e a senha de atendimento. */
.topbar{border-top:2px solid var(--destaque)}
.senha{
  background:color-mix(in srgb, var(--destaque) 15%, var(--surface-2));
  border:1px solid color-mix(in srgb, var(--destaque) 38%, transparent);
}

/* Painel do patio: o logo ganha uma plaqueta clara para ler sobre o fundo escuro. */
.tv-marca{
  background:#fff; border-radius:0.643em; padding:0.714em 1.286em; min-width:16.429em;
  display:flex; align-items:center; justify-content:center;
}
.tv-marca img{max-height:4em; max-width:17.857em; width:auto; display:block}


/* ---------- 5. telas estreitas ---------- */
/* A portaria as vezes opera num tablet, e a gestao abre relatorio no
   celular. O trilho lateral vira barra horizontal e some o que e
   decorativo; o que opera continua alcancavel pelo dedo. */
@media (max-width:1080px){
  .tv-grid{grid-template-columns:1fr}
  .shell{grid-template-columns:1fr}
  .rail{
    position:static; height:auto; flex-direction:row; flex-wrap:wrap;
    align-items:center; gap:var(--e-1);
    border-right:none; border-bottom:1px solid var(--line);
    padding:var(--e-2) var(--e-3);
  }
  .brand{padding:0 var(--e-3) 0 0}
  .brand-logo{padding:0 var(--e-3) 0 0}
  .brand-logo img{max-height:2rem}
  .rail-lbl{display:none}
  .rail-foot{
    margin:0 0 0 auto; padding:0; border-top:none; min-width:0;
    display:flex; align-items:center; gap:var(--e-2); flex-wrap:wrap;
    justify-content:flex-end; font-size:var(--t-sm);
  }
  .rail-foot b{display:inline; font-size:var(--t-sm)}
  /* O perfil repetido abaixo do nome nao cabe e nao faz falta no celular. */
  .rail-foot br{display:none}
  .nav{width:auto; padding:0 var(--e-3)}
  .zap-wrap{grid-template-columns:1fr}
  .zap-tpl{border-right:none; border-bottom:1px solid var(--line)}
}

@media (max-width:720px){
  .grid2{grid-template-columns:1fr}
  .page{padding:var(--e-4) var(--e-3) var(--e-10); gap:var(--e-4)}
  .topbar{padding:var(--e-3) var(--e-3)}
  .topbar h1{font-size:var(--t-xl)}
  .clock{width:100%; margin-left:0; justify-content:space-between}
  .dgrid{grid-template-columns:repeat(4,1fr)}
  .queue, .docks{grid-template-columns:1fr; padding:var(--e-3)}
  .modal-f{flex-wrap:wrap}
  .modal-f .btn{flex:1 1 auto}
  .cam{flex-direction:column; align-items:stretch}
  .cam-box{width:100%; height:auto; aspect-ratio:1}
  /* Nenhuma acao principal fica apertada num polegar. */
  .acoes .btn{flex:1 1 auto}
}

/* ---------- 6. impressao ---------- */
/* Relatorio de patio vira documento: a gestao imprime para anexar a uma
   discussao de estadia com transportadora. Sem isto, sai o menu inteiro
   e a tabela cortada. */
@media print{
  .rail, .topbar .clock, .acoes, .filtros, .toasts, .btn{display:none !important}
  .shell{display:block}
  .page{padding:0}
  .card{border:none; box-shadow:none}
  table{font-size:10pt}
  th{background:transparent; color:#000; border-bottom:1pt solid #000}
  td{border-bottom:.5pt solid #999}
  tbody tr{break-inside:avoid}
  .chip{border:.5pt solid #666; color:#000; background:transparent}
  a[href]::after{content:""}
  body{background:#fff; color:#000}
}

/* Acoes na linha da tabela.

   Duas correcoes de leitura: as acoes ficam lado a lado em vez de
   empilhadas, e o botao fantasma ganha contorno aqui dentro. Sem contorno,
   quando a linha quebrava, "Editar" e "Abrir" pareciam texto solto pairando
   acima dos botoes de verdade. */
.acoes-linha{display:flex; gap:var(--e-2); align-items:center; justify-content:flex-end}
.acoes-linha .inline, .acoes .inline{display:inline-flex}
td .acoes{justify-content:flex-end; gap:var(--e-2)}
td .btn-ghost, .acoes-linha .btn-ghost{border-color:var(--line-2); color:var(--ink-2)}
td .btn-ghost:hover, .acoes-linha .btn-ghost:hover{border-color:var(--ink-3); color:var(--ink)}

/* Metadado abaixo do valor principal numa celula. */
td .meta{font-size:var(--t-sm); color:var(--ink-3); line-height:1.35}

/* Nome de pessoa na tabela: o sublinhado constante pesava numa tela densa.
   Continua claramente clicavel pela cor e pelo peso, e sublinha ao passar. */
td a:not(.btn){color:var(--accent-ink); text-decoration:none; font-weight:650}
td a:not(.btn):hover{text-decoration:underline; text-underline-offset:2px}

/* Botao so com icone: quadrado, e o rotulo vive no aria-label. */
.btn-ic{padding:0; width:var(--toque-sm); flex:none}
.btn-ic svg{width:1.05rem; height:1.05rem}
.btn-ic:hover{color:var(--warn)}


/* =============================================================
   5. densidades
   A mesma tela nao serve igual a tres lugares. Cada tela declara o
   seu contexto em <html data-densidade>, e so os tokens mudam — os
   componentes sao os mesmos.

     guarita    porteiro em pe, touchscreen, as vezes de luva, com a
                fila andando: letra maior e alvo de toque de 56px.
     compacta   gestao e configuracao, no monitor da mesa: mais linhas
                por tela, sem descer de 44px no que se clica.
     tv         painel do patio, lido a metros de distancia: a base
                cresce com a largura da tela (o painel inteiro esta
                em em, entao acompanha).
   ============================================================= */
[data-densidade="guarita"]{
  --t-xs:.8125rem; --t-sm:.9375rem; --t-md:1.0625rem; --t-base:1.125rem; --t-lg:1.25rem;
  --toque:3.5rem; --toque-sm:2.75rem;
}
[data-densidade="guarita"] .fld input,
[data-densidade="guarita"] .fld select,
[data-densidade="guarita"] .fld textarea{font-size:var(--t-base); min-height:var(--toque)}
[data-densidade="guarita"] .btn{min-height:var(--toque); font-size:var(--t-md)}

[data-densidade="compacta"] td{padding:var(--e-2) var(--e-3)}
[data-densidade="compacta"] th{padding-top:var(--e-2); padding-bottom:var(--e-2)}

.tv{font-size:clamp(14px, 1.05vw, 30px)}