@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Source+Sans+3:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

/* Tema único, sempre claro no conteúdo — preto só na sidebar/login (igual o
   LISTA). Paleta laranja/preto "segurança & scan", tirada direto da logo
   (escudo laranja + reconhecimento facial em grade sobre fundo preto). */
:root{
  color-scheme: light;
  --ink:#201911;
  --muted:#7A6C60;
  --paper:#FBF7F2;
  --card:#FFFFFF;
  --surface-2:#F3EAE0;
  --ac:#FF7A1A;
  --ac-forte:#E35D00;
  --ouro:#B07A12;
  --err:#D64545;
  --linha:rgba(32,25,17,0.12);
  --linha-suave:rgba(32,25,17,0.06);
  --sombra: 0 1px 2px rgba(32,25,17,0.06), 0 20px 45px -22px rgba(227,93,0,0.35);
  --gradiente: linear-gradient(135deg, var(--ac), var(--ac-forte));
  --tx: var(--ink);
  --tx2: var(--muted);

  --preto:#17120C;
  --preto-2:#241B12;
  --creme:#F5EEE6;
  --creme-muted:#B8A997;
}

*{box-sizing:border-box;}
[hidden]{ display:none !important; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Source Sans 3', ui-sans-serif, system-ui, sans-serif;
  font-size:16px; line-height:1.6;
}
h1,h2,h3{ font-family:'Fraunces', Georgia, serif; text-wrap:balance; margin:0; }
a{ color:var(--ac-forte); }
.mono{ font-family:'IBM Plex Mono', ui-monospace, monospace; }
.centro{ min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:24px; }

.card{
  background:var(--card); border:1px solid var(--linha); border-radius:18px;
  padding:32px; box-shadow:var(--sombra);
}

.botao{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:'Source Sans 3', sans-serif; font-weight:600; font-size:0.98rem;
  padding:11px 20px; border-radius:10px; border:1px solid transparent; cursor:pointer;
  text-decoration:none; width:100%; transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.botao.primario{ background:var(--gradiente); color:#fff; }
.botao.primario:hover{ filter:brightness(1.08); transform:translateY(-1px); box-shadow:0 14px 28px -14px color-mix(in srgb, var(--ac) 55%, transparent); }
.botao.secundario{ background:transparent; border-color:var(--linha); color:var(--ink); }
.botao.secundario:hover{ background:var(--surface-2); }
.botao-linha{ width:auto; padding:11px 22px; }

.campo{ display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.campo label{ font-size:0.85rem; color:var(--muted); font-weight:600; }
.campo input{
  font:inherit; padding:10px 12px; border-radius:8px; border:1px solid var(--linha);
  background:var(--paper); color:var(--ink);
}
.campo input:focus{ outline:2px solid var(--ac); outline-offset:1px; }

.erro-form{
  background:color-mix(in srgb, var(--err) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--err) 35%, transparent);
  color:var(--err); padding:10px 14px; border-radius:8px; font-size:0.9rem; margin-bottom:16px;
}
.aviso-sucesso{
  background:color-mix(in srgb, var(--ac) 14%, transparent); border:1px solid color-mix(in srgb, var(--ac) 35%, transparent);
  color:var(--ac-forte); padding:10px 14px; border-radius:8px; font-size:0.9rem; margin-bottom:20px;
}

.badge{
  display:inline-flex; align-items:center; gap:5px; font-family:'IBM Plex Mono', monospace;
  font-size:11px; letter-spacing:0.04em; text-transform:uppercase; padding:3px 9px; border-radius:100px;
}
.badge.ok{ background:color-mix(in srgb, var(--ac) 16%, transparent); color:var(--ac-forte); }
.badge.pendente{ background:color-mix(in srgb, var(--ouro) 16%, transparent); color:var(--ouro); }
.badge.off{ background:var(--surface-2); color:var(--muted); }

.hamburguer{
  display:none; background:none; border:1px solid var(--linha); border-radius:8px;
  width:40px; height:40px; align-items:center; justify-content:center; cursor:pointer; color:var(--ink);
}
.hamburguer span, .hamburguer span::before, .hamburguer span::after{
  content:''; display:block; width:18px; height:2px; background:var(--ink); position:relative;
  transition:transform .15s ease, opacity .15s ease;
}
.hamburguer span::before{ position:absolute; top:-6px; }
.hamburguer span::after{ position:absolute; top:6px; }

/* ---- dashboard: sidebar preta fixa à esquerda + conteúdo claro à direita ---- */
.dash{ display:flex; min-height:100dvh; align-items:stretch; }
.dash-sidebar{
  width:308px; flex-shrink:0; color:var(--creme);
  display:flex; flex-direction:column; position:sticky; top:0; height:100dvh; overflow-y:auto;
  padding:36px 20px 24px;
  background:
    radial-gradient(360px circle at 20% 0%, color-mix(in srgb, var(--ac) 30%, transparent), transparent 60%),
    var(--preto);
}
.dash-marca{ display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center; margin-bottom:40px; text-decoration:none; }
.dash-marca img{ width:180px; height:180px; border-radius:36px; object-fit:cover; box-shadow:0 24px 48px -14px rgba(0,0,0,.7); }
.dash-marca .dash-monograma{
  width:180px; height:180px; border-radius:36px; display:flex; align-items:center; justify-content:center;
  background:var(--gradiente); font-family:'Fraunces',serif; font-weight:700; font-size:3.6rem; color:#fff;
  box-shadow:0 24px 48px -14px rgba(0,0,0,.7);
}
.dash-marca span{ font-family:'Fraunces', serif; font-weight:700; font-size:1.4rem; color:var(--creme); text-wrap:balance; line-height:1.25; }

.dash-nav{ display:flex; flex-direction:column; gap:3px; flex:1; }
.dash-nav a{
  display:flex; align-items:center; gap:10px; padding:12px 16px; border-radius:10px;
  color:var(--creme-muted); text-decoration:none; font-size:0.95rem; font-weight:500;
  transition:background .15s ease, color .15s ease;
}
.dash-nav a:hover{ background:rgba(255,255,255,.07); color:var(--creme); }
.dash-nav a.ativo{ background:var(--gradiente); color:#fff; font-weight:600; box-shadow:0 8px 20px -8px rgba(227,93,0,.55); }
.dash-nav-sep{ height:1px; background:rgba(255,255,255,.1); margin:16px 6px; }
.dash-nav-email{ padding:10px 16px 4px; color:var(--creme-muted); font-size:0.78rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.dash-conteudo{ flex:1; min-width:0; padding:44px 44px 60px; }

.dash .hamburguer{ display:none; }
@media (max-width:900px){
  .dash{ flex-direction:column; }
  .dash-sidebar{
    width:100%; height:auto; position:sticky; top:0; z-index:30; overflow:visible;
    flex-direction:row; align-items:center; justify-content:space-between; padding:14px 18px;
  }
  .dash-marca{ flex-direction:row; align-items:center; gap:12px; margin-bottom:0; text-align:left; }
  .dash-marca img, .dash-marca .dash-monograma{ width:44px; height:44px; border-radius:11px; font-size:1.1rem; box-shadow:none; }
  .dash-marca span{ font-size:1.05rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .dash .hamburguer{ display:flex; border-color:rgba(255,255,255,.25); flex-shrink:0; }
  .dash .hamburguer span, .dash .hamburguer span::before, .dash .hamburguer span::after{ background:var(--creme); }
  .dash-nav{
    display:none; position:absolute; top:100%; left:0; right:0; z-index:25;
    background:var(--preto-2); flex-direction:column; padding:10px; gap:2px;
    box-shadow:0 24px 48px -16px rgba(0,0,0,.6);
  }
  .dash-nav.aberto{ display:flex; }
  .dash-conteudo{ padding:28px 18px 44px; }
}

/* ---- cards de aplicativos ---- */
.grade-admin{ display:grid; grid-template-columns:repeat(auto-fill, minmax(320px,1fr)); gap:20px; margin-top:24px; }
@media (max-width:480px){ .grade-admin{ grid-template-columns:1fr; } }
.app-card{
  background:var(--card); border:1px solid var(--linha); border-radius:18px; padding:24px;
  box-shadow:var(--sombra); display:flex; flex-direction:column; gap:16px;
}
.app-card-topo{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.app-card-nome{ font-family:'Fraunces', serif; font-weight:700; font-size:1.1rem; color:var(--ink); }
.app-card-qr{ display:flex; justify-content:center; padding:14px; background:var(--surface-2); border-radius:14px; }
.app-card-qr img{ width:160px; height:160px; display:block; }
.app-card-key{
  font-family:'IBM Plex Mono', monospace; font-size:0.78rem; color:var(--muted);
  background:var(--surface-2); padding:8px 10px; border-radius:8px; word-break:break-all;
}
.app-card-rodape{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; padding-top:4px; border-top:1px solid var(--linha-suave); padding-top:14px; }
.acoes-linha{ display:flex; gap:6px; flex-wrap:wrap; }
.botao-mini{ font-size:0.8rem; padding:6px 12px; border-radius:7px; border:1px solid var(--linha); background:transparent; color:var(--ink); cursor:pointer; white-space:nowrap; font-family:inherit; }
.botao-mini:hover{ background:var(--surface-2); }
.botao-mini.perigo{ color:var(--err); border-color:color-mix(in srgb, var(--err) 40%, transparent); }
.botao-mini.perigo:hover{ background:color-mix(in srgb, var(--err) 10%, transparent); }

.vazio{ text-align:center; padding:64px 20px; color:var(--muted); }

.botao-topo{
  position:fixed; right:22px; bottom:22px; z-index:40;
  width:46px; height:46px; border-radius:50%; border:none; cursor:pointer;
  background:var(--gradiente); color:#fff; font-size:1.2rem; line-height:1;
  box-shadow:var(--sombra); display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transform:translateY(8px);
  transition:opacity .18s ease, transform .18s ease, filter .15s ease;
}
.botao-topo.show{ opacity:1; pointer-events:auto; transform:none; }
.botao-topo:hover{ filter:brightness(1.1); }

/* ---- /login — painel dividido escuro, mesmo padrão do LISTA ---- */
.auth-pagina{
  --auth-bg: hsl(28 28% 7%);
  --auth-painel: hsl(26 24% 11%);
  --auth-card: hsl(26 22% 10%);
  --auth-borda: hsl(26 16% 22%);
  --auth-texto: hsl(30 30% 97%);
  --auth-mudo: hsl(26 12% 68%);
  --auth-cta: #FF7A1A;
  --auth-cta-hover: #E35D00;
  min-height:100dvh; background:var(--auth-bg); color:var(--auth-texto);
  display:grid; grid-template-columns:1fr; place-items:center; gap:28px; padding:24px;
}
@media (min-width:1024px){
  .auth-pagina{ grid-template-columns:minmax(0,560px) minmax(0,460px); gap:32px; max-width:1080px; margin:0 auto; }
}
.auth-lado{
  display:none; position:relative; overflow:hidden; border-radius:24px; border:1px solid rgba(255,255,255,.1);
  background:
    radial-gradient(560px circle at 20% 15%, color-mix(in srgb, var(--auth-cta) 35%, transparent), transparent 60%),
    radial-gradient(480px circle at 90% 85%, color-mix(in srgb, var(--auth-cta) 22%, transparent), transparent 55%),
    var(--auth-painel);
  padding:40px; height:640px; flex-direction:column; justify-content:space-between; box-shadow:0 30px 60px -20px rgba(0,0,0,.6);
}
@media (min-width:1024px){ .auth-lado{ display:flex; } }
.auth-marca-mobile{ display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center; }
.auth-marca-mobile img, .auth-marca-mobile .dash-monograma{ width:200px; height:200px; border-radius:36px; object-fit:cover; box-shadow:0 24px 48px -14px rgba(0,0,0,.65); }
.auth-marca-mobile p{ font-family:'Fraunces', serif; font-weight:700; font-size:1.4rem; margin:0; color:var(--auth-texto); }
@media (min-width:1024px){ .auth-marca-mobile{ display:none; } }

.auth-marca-grande{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; flex:1; }
.auth-marca-grande img{ width:220px; height:220px; border-radius:40px; object-fit:cover; box-shadow:0 30px 60px -18px rgba(0,0,0,.7); }
.auth-marca-grande .dash-monograma{ width:220px; height:220px; border-radius:40px; display:flex; align-items:center; justify-content:center; background:var(--gradiente); font-family:'Fraunces',serif; font-weight:700; font-size:4.2rem; color:#fff; box-shadow:0 30px 60px -18px rgba(0,0,0,.7); }
.auth-marca-grande p{ font-family:'Fraunces', serif; font-weight:700; font-size:1.3rem; margin:8px 0 0; color:var(--auth-texto); }

.auth-headline{ font-family:'Fraunces', serif; font-size:1.6rem; font-weight:700; line-height:1.25; letter-spacing:-0.01em; margin:0 0 18px; text-wrap:balance; color:var(--auth-texto); }
.auth-headline span{ color:var(--auth-cta); }
.auth-lista{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; font-size:0.88rem; color:var(--auth-texto); }
.auth-lista li{ display:flex; align-items:flex-start; gap:10px; opacity:.92; }
.auth-lista li::before{ content:'•'; color:var(--auth-cta); font-size:1.2rem; line-height:1; }

.auth-card{
  width:100%; max-width:420px; background:color-mix(in srgb, var(--auth-card) 80%, transparent);
  border:1px solid var(--auth-borda); border-radius:16px; padding:32px;
  box-shadow:0 24px 60px -24px rgba(0,0,0,.65); backdrop-filter:blur(20px);
}
.auth-card h1{ font-size:1.4rem; margin:0 0 6px; color:var(--auth-texto); }
.auth-card .auth-sub{ color:var(--auth-mudo); font-size:0.88rem; margin:0 0 26px; }
.auth-cta-btn{
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  background:var(--auth-cta); color:#fff; font-weight:600; font-size:0.95rem;
  padding:12px 20px; border-radius:10px; border:none; text-decoration:none; cursor:pointer;
  transition:background .15s ease, transform .15s ease;
}
.auth-cta-btn:hover{ background:var(--auth-cta-hover); transform:translateY(-1px); }
.auth-erro{
  background:hsl(0 72% 51% / .12); border:1px solid hsl(0 72% 51% / .35); color:hsl(0 85% 72%);
  padding:10px 14px; border-radius:10px; font-size:0.85rem; margin-bottom:20px;
}