/* ELAB - 3D com a identidade do portal elabcore.duckdns.org (2026-10-06, pedido do dono: "pegue as mesmas cores e
   design do portal"). Camada FINAL: substitui a camada iOS e define as proprias cores, entao a tela fica certa mesmo se
   o tokens.css compartilhado nao carregar (o print do dono mostrou fundo cinza e links roxos). Valores copiados da
   pagina de login do portal (portal/auth/login_page.py): preto-azulado, brilho azul, grade fina, painel com filete. */
:root{color-scheme:dark;
  --bg:#05070a;--surface:#0a111a;--surface-2:#0c1520;--surface-3:#11202f;
  --line:rgba(0,168,255,.16);--line-2:rgba(0,168,255,.30);
  --text:#f4f8fb;--text-2:#c9d6e2;--muted:#8d9bab;
  --accent:#00a8ff;--accent-light:#5cc8ff;--accent-dark:#0077ff;--accent-soft:rgba(0,168,255,.12);--on-accent:#fff;
  --good:#3ddc97;--warn:#ffb547;--danger:#ff5a67;--busy:#a99cf0;
  --painel:linear-gradient(145deg,rgba(12,21,32,.92),rgba(5,9,15,.89));
  --sombra:0 24px 70px rgba(0,0,0,.42),0 0 55px rgba(0,119,255,.05),inset 0 1px 0 rgba(255,255,255,.035);
  --r:12px;--r-lg:20px}
html{background:var(--bg)}
body{background:radial-gradient(circle at 50% -15%,rgba(0,119,255,.20) 0,transparent 42%),
  radial-gradient(circle at 8% 90%,rgba(0,168,255,.06) 0,transparent 32%),var(--bg) fixed;
  color:var(--text);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(0,168,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(0,168,255,.022) 1px,transparent 1px);
  background-size:42px 42px;-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.8),transparent);mask-image:linear-gradient(to bottom,rgba(0,0,0,.8),transparent)}
.tela,.topo{position:relative;z-index:1}
.topo{z-index:5}
a{color:inherit}
::selection{color:#fff;background:rgba(0,168,255,.45)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tela:focus,.tela:focus-visible{outline:none}   /* o foco vai para o <main> a cada troca de tela: sem moldura */
a:visited{color:inherit}

/* topo */
.topo{min-height:64px;background:rgba(5,7,10,.72);border-bottom:1px solid var(--line);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.marca{font-weight:800;letter-spacing:-.02em;color:#fff}
.marca svg{width:30px;height:30px;padding:5px;border:1px solid var(--line-2);border-radius:9px;background:var(--accent-soft);
  stroke:var(--accent-light);box-shadow:0 0 22px rgba(0,119,255,.12)}
.abas{gap:4px;padding:4px;border:1px solid var(--line);border-radius:12px;background:rgba(10,17,26,.7);box-shadow:none}
.abas a{min-height:36px;padding:0 14px;border-radius:9px;color:var(--muted);font-weight:650;font-size:14px}
.abas a:hover{color:var(--text)}
.abas a[aria-current=page]{background:var(--accent-soft);color:var(--accent-light);box-shadow:inset 0 0 0 1px var(--line-2)}
.contador{background:var(--warn);color:#1b1407}
.quem small{color:var(--accent-light)}

/* titulos: eyebrow azul + titulo branco apertado, como o login */
.titulo{font-size:2.5rem;font-weight:800;letter-spacing:-.05em;color:#fff;margin:14px 0 8px}
.sub{color:var(--muted);line-height:1.55}
.secao{color:var(--accent-light);font-size:.72rem;font-weight:760;letter-spacing:.14em;text-transform:uppercase;margin:28px 4px 10px}
.secao .qtd{color:var(--muted)}

/* paineis: gradiente escuro, borda azul fina, filete de luz no topo */
.cartao,.dossie,.nums,.previa,.familia,.espera,.opcoes,.lista.pedidos,.pedido-original{
  position:relative;background:var(--painel);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sombra)}
.cartao::before,.lista.pedidos::before,.opcoes::before{content:"";position:absolute;top:-1px;left:10%;right:10%;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.7;pointer-events:none}
.dossie{padding:14px;transition:border-color .18s,transform .18s,box-shadow .18s}
.dossie:hover{border-color:var(--line-2);transform:translateY(-1px);background:var(--painel);box-shadow:var(--sombra),0 0 30px rgba(0,119,255,.08)}
.mini{border-radius:12px;background:var(--surface-3)}
.dossie-nome{color:#fff;font-weight:700}
.num{box-shadow:inset -1px -1px 0 var(--line)}
.num dd{color:#fff}
.decisao{border-color:rgba(255,181,71,.35)}
.lista.pedidos{overflow:visible}
.pedido{border-radius:0}
.lista.pedidos li:first-child .pedido{border-radius:var(--r-lg) var(--r-lg) 0 0}
.lista.pedidos li:last-child .pedido{border-radius:0 0 var(--r-lg) var(--r-lg)}
.lista.pedidos li:only-child .pedido{border-radius:var(--r-lg)}
.pedido:hover,.opcao:hover{background:rgba(0,168,255,.05)}
.lista.pedidos li+li .pedido::before,.opcao+.opcao::before{border-top:1px solid var(--line)}
.opcoes{overflow:hidden}

/* botoes: acao em gradiente azul (igual "Entrar no portal"), secundario escuro com borda */
.btn{min-height:46px;padding:0 20px;border-radius:10px;border:1px solid var(--line-2);background:rgba(3,8,13,.8);
  color:var(--text);font-weight:700;font-size:15px;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;
  transition:transform .16s,filter .16s,box-shadow .16s,border-color .16s}
.btn:hover{border-color:var(--accent);background:rgba(5,13,21,.95)}
.btn.acao{border:1px solid rgba(92,200,255,.45);background:linear-gradient(135deg,var(--accent-dark),var(--accent));color:#fff;
  font-weight:800;box-shadow:0 10px 30px rgba(0,119,255,.22)}
.btn.acao:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 14px 38px rgba(0,119,255,.34)}
.btn:disabled,.btn.acao:disabled{opacity:.45;transform:none;filter:none;box-shadow:none}

/* campos */
textarea,input{border:1px solid rgba(0,168,255,.18);border-radius:10px;background:rgba(3,8,13,.8);color:var(--text);font-size:16px;
  transition:border-color .18s,box-shadow .18s,background .18s}
textarea:hover,input:hover{border-color:rgba(0,168,255,.32)}
textarea:focus,input:focus{outline:none;border-color:var(--accent);background:rgba(5,13,21,.95);box-shadow:0 0 0 3px rgba(0,168,255,.09),0 0 24px rgba(0,119,255,.11)}
.campo{color:#d9e5ee;font-weight:700;font-size:.8rem}
.entrar h1{font-size:2.6rem;letter-spacing:-.055em;color:#fff}

/* capsulas, gates, segmentos, chips */
.gates.compacto .gate{border:1px solid var(--line);background:rgba(0,168,255,.05);color:var(--muted)}
.gates.compacto .gate.aprovado{color:var(--good);border-color:rgba(61,220,151,.3);background:rgba(61,220,151,.08)}
.gates.compacto .gate.aguardando{color:var(--warn);border-color:rgba(255,181,71,.4);background:rgba(255,181,71,.08)}
.segmento{border:1px solid var(--line);border-radius:12px;background:rgba(10,17,26,.7);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.segmento button{border-radius:9px;color:var(--muted)}
.segmento button[aria-selected=true],.segmento button[aria-checked=true]{background:var(--accent-soft);color:var(--accent-light);box-shadow:inset 0 0 0 1px var(--line-2)}
.chip{border:1px solid var(--line);background:rgba(0,168,255,.05);color:var(--text-2)}
.chip:hover{border-color:var(--line-2);color:#fff}
.opcao:has(input:checked){background:var(--accent-soft)}
.opcao input{border-color:var(--line-2)}
.refs a,.md a{color:var(--accent-light)}
.anexo img,.anexo-pdf{border:1px solid var(--line);border-radius:12px}
.erro{border-color:rgba(255,90,103,.25);background:rgba(255,90,103,.08);border-radius:10px}
.erro-o-que{color:#ff7c87}
.aviso{background:var(--surface-2);border:1px solid var(--line-2);border-radius:12px}

/* celular: abas viram barra inferior com o mesmo vidro escuro */
@media (max-width:640px){
  .topo{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}
  .abas{left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));border-radius:14px;background:rgba(10,17,26,.92);
    -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 10px 30px rgba(0,0,0,.5)}
  .abas a{min-height:46px;font-size:13px;padding:0 6px}
  .titulo{font-size:2.1rem}
  .aviso{bottom:calc(84px + env(safe-area-inset-bottom))}
}

/* galeria de vistas (4 lados) e categoria da Biblioteca */
.galeria{display:grid;gap:10px}
.vistas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.vista{padding:0;border:1px solid var(--line);border-radius:12px;background:var(--surface-3);overflow:hidden;cursor:pointer;aspect-ratio:1}
.vista img{width:100%;height:100%;object-fit:cover;display:block}
.vista[aria-pressed=true]{border-color:var(--accent);box-shadow:0 0 0 2px rgba(0,168,255,.25)}
.categoria{display:inline-block;margin:0 0 10px;padding:4px 12px;border:1px solid var(--line-2);border-radius:999px;color:var(--accent-light);font-size:13px;font-weight:650}
.chips.filtros{margin:4px 0 6px}
.chip[aria-pressed=true]{border-color:var(--accent);color:var(--accent-light);background:var(--accent-soft)}