/* Identidade visual MiltonNet no portal dos atendentes (F5g, 2026-10-18) — a mesma do painel novo (skill
   design-miltonnet): tokens laranja/azul/branco, IBM Plex, claro e escuro. Carregado por TODAS as telas, DEPOIS do
   mn.css e do lab.css: aqui moram as cores; lá, só as regras. Componente nenhum usa cor solta.
   🔴 Contraste conferido (WCAG AA, docs/NOTAS-rede.md): as cores de status da skill (#30A46C, #E5484D) passam como
   bolinha/borda, mas REPROVAM como texto pequeno no claro (3,16 e 3,91) — o texto de status usa as variantes --*-tx.
   Laranja nunca leva texto branco: o botão principal é azul (--bb). */

@font-face{font-family:'IBM Plex Sans';font-weight:400;font-style:normal;font-display:swap;
  src:url('/static/fonts/plex-sans-latin-400.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-weight:500;font-style:normal;font-display:swap;
  src:url('/static/fonts/plex-sans-latin-500.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-weight:600;font-style:normal;font-display:swap;
  src:url('/static/fonts/plex-sans-latin-600.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-weight:400;font-style:normal;font-display:swap;
  src:url('/static/fonts/plex-sans-latin-ext-400.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-weight:500;font-style:normal;font-display:swap;
  src:url('/static/fonts/plex-sans-latin-ext-500.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-weight:600;font-style:normal;font-display:swap;
  src:url('/static/fonts/plex-sans-latin-ext-600.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-weight:400;font-style:normal;font-display:swap;
  src:url('/static/fonts/plex-mono-latin-400.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-weight:500;font-style:normal;font-display:swap;
  src:url('/static/fonts/plex-mono-latin-500.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-weight:400;font-style:normal;font-display:swap;
  src:url('/static/fonts/plex-mono-latin-ext-400.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-weight:500;font-style:normal;font-display:swap;
  src:url('/static/fonts/plex-mono-latin-ext-500.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ── tokens: claro em :root; escuro pelo sistema (sem escolha) ou pela escolha do atendente ── */
:root{
  --bg:#F3F5F8; --side:#FFFFFF; --surf:#FFFFFF; --surf2:#EEF2F6; --bd:#DCE3EA; --bd2:#C6D1DC;
  --tx:#12202E; --mu:#56677A; --bl:#00568F; --bb:#00568F; --bbh:#00477A; --or:#D45F00; --ors:rgba(255,115,0,.14);
  --st-ok:#30A46C; --st-erro:#E5484D; --st-aten:#FF7300; --st-pend:#FFB224; --st-info:#2B7FB8; --st-off:#7C8A99;
  --ok-tx:#1F7A4D; --erro-tx:#C4262C; --aten-tx:#A34A00; --info-tx:#1F6A9C;
  --tinta-ok:#E6F4EC; --borda-ok:#B9DFC9; --tinta-erro:#FCEBEC; --borda-erro:#F2C3C5;
  --tinta-aviso:#FFF3E6; --borda-aviso:#F5CFA8;
  --perigo:#C4262C; --perigo-h:#A51F25;
  --balao:#E8EDF2; --balao-bd:#DCE3EA;
  --sombra:0 1px 2px rgba(18,32,46,.06),0 8px 24px rgba(18,32,46,.08);
  --veu:rgba(13,20,28,.45);
  --fonte:'IBM Plex Sans',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0D141C; --side:#111A24; --surf:#16212D; --surf2:#1D2B3A; --bd:#27394B; --bd2:#33495F;
    --tx:#E7EEF5; --mu:#9AABBC; --bl:#4DB0E3; --bb:#007BB0; --bbh:#0A8CC6; --or:#FF7300; --ors:rgba(255,115,0,.18);
    --ok-tx:#3DBE80; --erro-tx:#FF7A7E; --aten-tx:#FF9A4D; --info-tx:#5AA9DE;
    --tinta-ok:#15302A; --borda-ok:#24513D; --tinta-erro:#2A1E24; --borda-erro:#5A2C33;
    --tinta-aviso:#2A2018; --borda-aviso:#5A3A1C;
    --balao:#1D2B3A; --balao-bd:#27394B;
    --sombra:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.4);
    --veu:rgba(0,0,0,.55);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0D141C; --side:#111A24; --surf:#16212D; --surf2:#1D2B3A; --bd:#27394B; --bd2:#33495F;
  --tx:#E7EEF5; --mu:#9AABBC; --bl:#4DB0E3; --bb:#007BB0; --bbh:#0A8CC6; --or:#FF7300; --ors:rgba(255,115,0,.18);
  --ok-tx:#3DBE80; --erro-tx:#FF7A7E; --aten-tx:#FF9A4D; --info-tx:#5AA9DE;
  --tinta-ok:#15302A; --borda-ok:#24513D; --tinta-erro:#2A1E24; --borda-erro:#5A2C33;
  --tinta-aviso:#2A2018; --borda-aviso:#5A3A1C;
  --balao:#1D2B3A; --balao-bd:#27394B;
  --sombra:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.4);
  --veu:rgba(0,0,0,.55);
  color-scheme:dark;
}

/* os nomes que o lab.css (telas do atendente) e o mn.css (cartões, acesso, admin) já usam, apontados para os
   tokens: as regras deles mudam de cor sem ser reescritas. Precisam vir em :root para seguir o tema. */
:root{
  --fundo:var(--bg); --lateral:var(--side); --sup:var(--surf); --sup2:var(--surf2); --linha:var(--bd); --linha-forte:var(--bd2);
  --texto:var(--tx); --mudo:var(--mu); --acento:var(--bb); --acento-h:var(--bbh); --acento-txt:#FFFFFF;
  --ok:var(--ok-tx); --aviso:var(--aten-tx); --erro:var(--erro-tx); --azul:var(--bl);
  /* Code = laranja (skill: "Claude Code com bolinha laranja"); sem roxo na paleta */
  --roxo:var(--aten-tx); --tinta-roxo:var(--ors); --borda-roxo:var(--borda-aviso);
  --foco:var(--or);
  --mn-bg:var(--bg); --mn-sf:var(--surf); --mn-ink:var(--tx); --mn-mut:var(--mu); --mn-mut2:var(--mu); --mn-line:var(--bd);
  --mn-or:var(--bb); --mn-orh:var(--bbh); --mn-bl:var(--bl); --mn-pu:var(--aten-tx);
  --mn-ok:var(--ok-tx); --mn-wa:var(--aten-tx); --mn-er:var(--erro-tx);
  --mn-okbg:var(--tinta-ok); --mn-erbg:var(--tinta-erro); --mn-pubg:var(--ors); --mn-orbg:var(--surf2);
  --mn-r:12px;
  font-family:var(--fonte);
}

/* ── base: 13 px, linha 1.45; mono para código, IP, terminal ── */
body{background:var(--bg);color:var(--tx);font-family:var(--fonte);font-size:13px;line-height:1.45;
  -webkit-font-smoothing:antialiased}
code,pre,kbd,.terminal,.mono{font-family:var(--mono)}
/* F5g.1: o mn.css ainda chamava a JetBrains Mono pelo nome nestes — tudo IBM Plex Mono (skill). O terminal (xterm, canvas)
   fica para a homologação. */
.vmchip,.term-ajuda kbd,.term-versao,.med-num,.pilula .ip,.app-terminal .cifrao,.cvm-meta,.pt-txt b,.msg-txt code,
.cmd-rot,.cmd-codigo,.hist-cmd,.resumo-fatos{font-family:var(--mono)}
/* F5g.1: peso 400 no texto corrido; 500 só em título e botão (a skill vai até 600; o Milton pediu mais leve) */
label{font-weight:500}
.marca{font-weight:500}
.cartao h2,.bloco h3,.acesso .lado h1{font-weight:500}
.sit,.chip{font-weight:500}
a{color:var(--bl)}
:focus-visible{outline:2px solid var(--or);outline-offset:2px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--or);outline-offset:1px;border-color:var(--or)}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ic{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ic.p{width:16px;height:16px}

/* ── botões (skill): principal azul com texto branco; secundário surf2 com borda; perigoso vermelho ── */
.btn{background:var(--bb);color:#fff;border-radius:8px;font-weight:500;font-family:var(--fonte)}
.btn:hover:not(:disabled){background:var(--bbh)}
.btn.sec{background:var(--surf2);color:var(--tx);border:1px solid var(--bd)}
.btn.sec:hover:not(:disabled){background:var(--bd)}
.btn.perigo{background:var(--perigo);color:#fff}
.btn.perigo:hover:not(:disabled){background:var(--perigo-h)}

/* ── campos ── */
input[type=text],input[type=email],input[type=password],select,textarea{background:var(--surf2);color:var(--tx);
  border:1px solid var(--bd);border-radius:8px;font-family:var(--fonte)}
label{color:var(--mu)}

/* ── recados e chips (o mn.css tinha tintas fixas do claro) ── */
.erro{background:var(--tinta-erro);color:var(--erro-tx);border-color:var(--borda-erro)}
.aviso{background:var(--tinta-aviso);color:var(--aten-tx);border-color:var(--borda-aviso)}
.ok{background:var(--tinta-ok);color:var(--ok-tx);border-color:var(--borda-ok)}
.pend{background:var(--tinta-aviso);border-color:var(--borda-aviso);color:var(--aten-tx)}
.pt-bola{background:var(--st-aten)}
.chip{font-family:var(--fonte);font-size:11px;font-weight:600;border-radius:99px;background:var(--surf2);
  border:1px solid var(--bd);color:var(--mu)}

/* ── telas de acesso (entrar, cadastro, aguardando) ── */
.acesso{background:var(--bg)}
.acesso .lado{background:var(--side);color:var(--tx);border-right:1px solid var(--bd);padding:40px 48px;gap:14px}
.marca{font-weight:500;font-size:14px;color:var(--tx)}
.marca .pt{width:26px;height:26px;border-radius:7px;background:var(--or);color:#1A1206;font-weight:600;font-size:13px}
.etq{font-size:12px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--mu)}
.acesso .marca{font-size:15px}
.acesso .lado h1{font-size:26px;font-weight:500;letter-spacing:-.01em;line-height:1.2;color:var(--tx);text-wrap:balance}
.acesso .lado p{color:var(--mu);font-size:14px;line-height:1.55}
.acesso .restrito{color:var(--mu);font-size:11px}
/* F6a: metade esquerda equilibrada — o bloco da marca centralizado no espaço, com presença; o rodapé no pé */
.acesso .lado{justify-content:space-between;align-items:center;padding:40px 48px 28px}
.acesso .lado-centro{flex:1;display:flex;flex-direction:column;justify-content:center;gap:16px;max-width:420px;width:100%}
.acesso .marca-grande{font-size:18px;gap:12px}
.acesso .marca-grande .pt{width:40px;height:40px;border-radius:11px;font-size:19px}
.acesso .lado-centro h1{font-size:30px;line-height:1.2;margin:10px 0 0}
.acesso .lado-centro p{font-size:15px;max-width:36ch}
.acesso .lado-centro .etq{padding-top:14px;border-top:2px solid var(--or);align-self:flex-start;font-size:12px}
.acesso .restrito{margin-top:0;align-self:stretch;max-width:420px;margin-inline:auto;width:100%}
/* F6a (LGPD): aviso de registro visível no login e no cadastro */
.aviso-registro{margin:16px 0 0;padding:10px 12px;border-radius:8px;background:var(--surf2);border:1px solid var(--bd);
  font-size:12px;line-height:1.5;color:var(--mu);text-align:left}
.registro-caixa{margin:14px 0 0;padding:10px 12px;border-radius:8px;background:var(--surf2);border:1px solid var(--bd)}
.registro-caixa p{margin:0 0 6px;font-size:12px;line-height:1.5;color:var(--tx)}
.registro-caixa .lembrar{margin:0;color:var(--tx);font-weight:500}
.acesso .cartao{background:var(--surf);border:1px solid var(--bd);border-radius:12px;padding:28px 26px;box-shadow:var(--sombra)}
.acesso .cartao h2{font-size:18px;font-weight:500}
.acesso .cartao .sub{color:var(--mu);font-size:13px}
.acesso label{font-size:12px;font-weight:500;margin:14px 0 6px}
.acesso input[type=text],.acesso input[type=email],.acesso input[type=password]{padding:9px 12px;font-size:13px;height:38px}
.acesso .btn{height:40px;padding:0 14px;font-size:13px;margin-top:18px}
.acesso .lembrar{font-size:12px;font-weight:400;color:var(--mu)}
.acesso .pe{font-size:12px;color:var(--mu)}

/* ── telas internas antigas (admin, conta): topo e blocos ── */
.topo{background:var(--side);border-bottom:1px solid var(--bd);padding:10px 22px;min-height:52px}
.topo .btn.min,.pag-topo .btn.min{height:32px;padding:0 12px;display:inline-flex;align-items:center;font-size:13px}
.bloco{background:var(--surf);border:1px solid var(--bd);border-radius:12px}
.volta-topo{display:inline-flex;align-items:center;min-height:32px;margin:0 0 12px;font-size:13px;color:var(--bl)}

/* ── menus (⋯, Minha VM, rodapé): lista curta sobre o conteúdo ── */
.menu{min-width:208px;padding:6px;border-radius:10px;background:var(--surf);border:1px solid var(--bd);
  box-shadow:var(--sombra);display:flex;flex-direction:column;gap:1px;z-index:40}
.menu-op{display:flex;align-items:center;gap:10px;width:100%;min-height:32px;padding:6px 10px;border:0;border-radius:7px;
  background:transparent;color:var(--tx)!important;font:inherit;font-size:13px;text-align:left;text-decoration:none!important;cursor:pointer}
.menu-op .ic{color:var(--mu)}
.menu-op:hover,.menu-op:focus-visible{background:var(--surf2)}
.menu-op:focus-visible{outline-offset:-2px}
.menu-op.perigo{color:var(--erro-tx)!important}
.menu-op.perigo .ic{color:var(--erro-tx)}
.menu-op[aria-checked="true"]{background:var(--ors)}
.menu-op .menu-marca{margin-left:auto;font-size:12px;color:var(--mu)}
.menu-sep{height:1px;background:var(--bd);margin:5px 4px}
.menu-rot{padding:4px 10px 2px;font-size:11px;color:var(--mu)}
.menu-versao{padding:4px 10px 2px;font-family:var(--mono);font-size:11px;color:var(--mu)}

/* ── confirmação (skill): janela central, título com ação e alvo, uma frase, Cancelar + ação ── */
.confirma-dlg{width:min(400px,calc(100vw - 32px));padding:20px;border:1px solid var(--bd);border-radius:12px;
  background:var(--surf);color:var(--tx);box-shadow:var(--sombra)}
.confirma-dlg::backdrop{background:var(--veu)}
.confirma-dlg h2{margin:0 0 6px;font-size:15px;font-weight:500;text-wrap:balance}
.confirma-dlg p{margin:0 0 18px;font-size:13px;line-height:1.5;color:var(--mu)}
.confirma-dlg .confirma-botoes{display:flex;justify-content:flex-end;gap:8px}
.confirma-dlg .btn{width:auto;margin:0;height:34px;padding:0 14px;font-size:13px}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}