/* ============================================================
   DASHBOARDAMO — identidade visual
   Paleta amostrada do material da marca AMO Imports: fundo quase preto
   azulado, cartões um tom acima, vermelho da marca nas ações e no item
   ativo, azul e laranja como apoio. O tema escuro é o padrão; o claro
   existe e usa a mesma marca.
   ============================================================ */
:root{
  color-scheme: dark;
  /* Cinza neutro: o fundo perdeu o azul de propósito, para o vermelho da AMO
     ser a única cor forte da tela. Tons mais claros que a versão anterior —
     o preto absoluto cansava a vista em jornada inteira. */
  --plane:#17181b; --surface-1:#1f2124; --surface-2:#292b2f;
  --ink:#ffffff; --ink-2:#d9dade; --muted:#9b9ea4;
  --grid:#2e3135; --axis:#3d4146;
  --border:rgba(255,255,255,0.10); --border-strong:rgba(255,255,255,0.18);
  --shadow:0 1px 2px rgba(0,0,0,.35), 0 10px 24px rgba(0,0,0,.28);
  /* marca */
  --marca:#d9121a; --marca-forte:#ef1c25; --marca-2:#1b4fa0; --marca-3:#e5502a;
  --marca-wash:rgba(217,18,26,.14);
  /* séries de gráfico — o vermelho da marca fica de fora de propósito,
     para não ser confundido com prejuízo */
  --s1:#3b82e8; --s2:#e5643a; --s3:#1fb6a4; --s4:#e0a517; --s5:#c765a8; --s6:#8391a6;
  --s1-wash:rgba(59,130,232,.16);
  --seq-100:#0e2a52; --seq-250:#1b4fa0; --seq-400:#3b82e8; --seq-550:#8fbaf3;
  --good:#18a957; --warning:#e0a517; --serious:#e5643a; --critical:#e23b3b;
  --good-text:#3ed27c; --critical-text:#ff7b7b; --warning-text:#f0c24e;
  --sidebar:#1c1e21; --radius:16px;
  --fonte-titulo:'Orbitron Local','Orbitron','Segoe UI Semibold',system-ui,sans-serif;
  --fonte-texto:'Inter Local','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}
:root[data-theme="light"]{
  color-scheme: light;
  --plane:#f5f7fa; --surface-1:#ffffff; --surface-2:#eef1f6;
  --ink:#080d15; --ink-2:#3f4a59; --muted:#77828f;
  --grid:#e3e7ee; --axis:#c2cad4;
  --border:rgba(8,13,21,0.10); --border-strong:rgba(8,13,21,0.17);
  --shadow:0 1px 2px rgba(8,13,21,.05), 0 8px 24px rgba(8,13,21,.06);
  --marca:#c50f16; --marca-forte:#d9121a; --marca-2:#1b4fa0; --marca-3:#dc4a24;
  --marca-wash:rgba(197,15,22,.09);
  --s1:#2a6fd0; --s2:#d9552c; --s3:#12907f; --s4:#b98104; --s5:#a94a8c; --s6:#5f6c7e;
  --s1-wash:rgba(42,111,208,.10);
  --seq-100:#cfe0f8; --seq-250:#87b2ec; --seq-400:#2a6fd0; --seq-550:#12437f;
  --good:#0f8a45; --warning:#b98104; --serious:#d9552c; --critical:#c92a2a;
  --good-text:#0b6c36; --critical-text:#b02525; --warning-text:#8a5f02;
  --sidebar:#ffffff;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--plane);color:var(--ink);
  font-family:var(--fonte-texto);font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased}
button{font:inherit;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
a{color:var(--s1)}
h1{font-size:22px;font-weight:680;letter-spacing:-.4px;margin:0}
h2{font-size:16px;font-weight:650;letter-spacing:-.2px;margin:0}

/* ---------------- login ---------------- */
.login-tela{min-height:100vh;display:grid;grid-template-columns:1.05fr 1fr}
/* O lado da arte segue o material: azul-marinho profundo, com o vermelho da
   marca entrando só como brilho, nunca como fundo. */
.login-arte{
  background:radial-gradient(120% 90% at 12% 0%, #14315e 0%, #0a1830 45%, #04070c 100%);
  color:#fff;padding:56px 52px;display:flex;flex-direction:column;justify-content:space-between;
  position:relative;overflow:hidden;
}
.login-arte::after{content:'';position:absolute;right:-18%;bottom:-28%;width:78%;height:70%;
  background:radial-gradient(closest-side, rgba(217,18,26,.30), transparent 72%);pointer-events:none}
.login-arte > *{position:relative;z-index:1}
.login-arte h2{font-size:32px;font-weight:680;letter-spacing:-.9px;line-height:1.15;max-width:14ch}
.login-arte p{opacity:.88;max-width:44ch;font-size:14.5px;line-height:1.6}
.login-lista{display:flex;flex-direction:column;gap:12px;margin-top:8px}
.login-lista div{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;opacity:.92}
.login-lista b{display:grid;place-items:center;width:22px;height:22px;border-radius:7px;
  background:var(--marca);color:#fff;flex:0 0 auto;font-size:12px;font-family:var(--fonte-titulo);font-weight:700}
.login-form-lado{display:grid;place-items:center;padding:32px 24px}
.login-caixa{width:100%;max-width:400px}
.login-marca{display:flex;align-items:center;gap:11px;margin-bottom:28px}
.login-marca{align-items:center;gap:14px}
.login-marca i{width:96px;display:block;font-style:normal;flex:0 0 auto}
.login-marca i img{width:100%;height:auto;display:block}
.login-marca b{font-family:var(--fonte-titulo);font-weight:800;font-size:16px;letter-spacing:.05em;text-transform:uppercase}
.login-marca b .amo{color:var(--marca-forte)}

/* ---------------- estrutura admin ---------------- */
.app{display:grid;grid-template-columns:242px 1fr;min-height:100vh}
.sidebar{background:var(--sidebar);border-right:1px solid var(--border);padding:18px 12px;
  box-shadow:8px 0 24px rgba(0,0,0,.35);z-index:2;
  display:flex;flex-direction:column;gap:3px;position:sticky;top:0;height:100vh;overflow-y:auto}
.brand{display:flex;align-items:center;flex-direction:column;gap:12px;text-align:center;
  margin:0 0 8px;padding:14px 6px 18px;position:relative}
/* Placa da marca — mesma regra do painel: fundo claro, fio vermelho embaixo. */
.brand i{width:100%;max-width:186px;display:block;font-style:normal;flex:0 0 auto;position:relative;
  background:#fff;border-radius:16px;padding:15px 17px 14px;
  box-shadow:0 1px 2px rgba(0,0,0,.28), 0 14px 30px rgba(0,0,0,.42)}
.brand i::after{content:'';position:absolute;left:16%;right:16%;bottom:-7px;height:3px;
  border-radius:99px;background:linear-gradient(90deg,transparent,var(--marca-forte),transparent)}
.brand i img{width:100%;height:auto;display:block}
:root[data-theme="light"] .brand i{background:#eef1f6;
  box-shadow:inset 0 0 0 1px rgba(8,13,21,.09), 0 2px 6px rgba(8,13,21,.07)}
.brand div b{font-family:var(--fonte-titulo);font-weight:800;font-size:13px;letter-spacing:.04em;text-transform:uppercase}
.brand div b .amo{color:var(--marca-forte)}
.brand div b{display:block;font-weight:650;letter-spacing:-.2px;line-height:1.15}
.brand div span{font-size:11px;color:var(--muted)}
.nav-label{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
  padding:14px 10px 6px;font-weight:600}
.nav-item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:9px;
  border:0;background:transparent;color:var(--ink-2);text-align:left;font-weight:560;text-decoration:none}
.nav-item:hover{background:var(--surface-2);color:var(--ink)}
.nav-item[aria-current="page"]{background:linear-gradient(180deg,#c2121a,#960d13);
  color:#fff;font-weight:650;box-shadow:0 2px 10px rgba(150,13,19,.45)}
.nav-item[aria-current="page"] svg{color:#fff}
.sidebar-foot{margin-top:auto;border-top:1px solid var(--border);padding-top:12px}
.eu{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:10px}
.eu:hover{background:var(--surface-2)}
.avatar{width:32px;height:32px;border-radius:99px;background:var(--marca-wash);color:var(--marca-forte);
  display:grid;place-items:center;font-weight:700;font-size:12.5px;flex:0 0 auto}
.eu b{display:block;font-size:13px;font-weight:600;line-height:1.2}
.eu span{font-size:11px;color:var(--muted)}

.main{min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--plane) 88%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--border);padding:12px 24px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.content{padding:22px 24px 56px;flex:1}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-bottom:18px}
.page-sub{color:var(--ink-2);font-size:13px;margin:4px 0 0}

/* ---------------- componentes ---------------- */
.card{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius);
  padding:18px 20px;box-shadow:var(--shadow);min-width:0}
.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.card-sub{font-size:12px;color:var(--muted);margin:2px 0 0}
.grid{display:grid;gap:16px}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-2-1{grid-template-columns:2fr 1fr}
.stat-label{font-size:12.5px;color:var(--ink-2);font-weight:520}
.stat-value{font-size:27px;font-weight:660;letter-spacing:-.7px;line-height:1.15;margin-top:4px}

.btn{border:1px solid var(--border-strong);background:var(--surface-1);color:var(--ink);
  padding:8px 14px;border-radius:10px;font-weight:600;display:inline-flex;align-items:center;gap:7px}
.btn:hover:not(:disabled){background:var(--surface-2)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.primary{background:linear-gradient(180deg,#cf141c,#a50f16);border-color:#b3121a;color:#fff}
.btn.primary:hover:not(:disabled){background:var(--marca-forte);border-color:var(--marca-forte)}
/* contorno, não preenchido: o botão que apaga não pode ser igual ao que salva */
.btn.perigo{background:transparent;border-color:var(--critical);color:var(--critical-text)}
.btn.perigo:hover:not(:disabled){background:rgba(226,59,59,.12)}
.btn.sm{padding:5px 10px;font-size:12.5px;border-radius:8px}
.btn.ghost{border-color:transparent;background:transparent;color:var(--s1)}
.btn.ghost:hover:not(:disabled){background:var(--s1-wash)}
.btn.bloco{width:100%;justify-content:center;padding:11px 14px}

.campo{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.campo label{font-size:12.5px;color:var(--ink-2);font-weight:560;display:flex;justify-content:space-between;gap:8px}
.campo label .dica{color:var(--muted);font-weight:500}
.entrada{padding:10px 12px;border-radius:10px;border:1px solid var(--border-strong);
  background:var(--surface-1);width:100%}
.entrada:focus{outline:2px solid var(--s1);border-color:var(--s1);outline-offset:0}
.entrada.erro{border-color:var(--critical);background:rgba(208,59,59,.05)}
.msg-erro{color:var(--critical-text);font-size:11.5px;font-weight:550}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 14px}
.senha-wrap{position:relative}
.senha-wrap .olho{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;
  background:transparent;color:var(--muted);padding:4px;border-radius:6px;line-height:0}
.senha-wrap .olho:hover{color:var(--ink)}

table{width:100%;border-collapse:collapse;font-size:13px}
.table-wrap{overflow-x:auto;margin:0 -20px -18px;padding:0 20px}
th{text-align:left;font-weight:600;color:var(--muted);font-size:11px;letter-spacing:.05em;
  text-transform:uppercase;padding:9px 10px;border-bottom:1px solid var(--grid);white-space:nowrap}
td{padding:11px 10px;border-bottom:1px solid var(--grid);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--surface-2)}
.num{text-align:right;font-variant-numeric:tabular-nums}

.pill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:620;
  padding:3px 9px;border-radius:99px;border:1px solid transparent;white-space:nowrap}
.pill.good{background:rgba(12,163,12,.12);color:var(--good-text);border-color:rgba(12,163,12,.28)}
.pill.warn{background:rgba(250,178,25,.16);color:var(--warning-text);border-color:rgba(250,178,25,.42)}
.pill.bad{background:rgba(208,59,59,.12);color:var(--critical-text);border-color:rgba(208,59,59,.3)}
.pill.neutral{background:var(--surface-2);color:var(--ink-2);border-color:var(--border)}
.pill.info{background:var(--s1-wash);color:var(--s1);border-color:rgba(42,120,214,.3)}

.aviso{border:1px solid var(--border);border-left:3px solid var(--s1);border-radius:8px;
  background:var(--surface-2);padding:11px 13px;font-size:12.5px;color:var(--ink-2)}
.aviso.bom{border-left-color:var(--good)}
.aviso.ruim{border-left-color:var(--critical)}
.aviso.atencao{border-left-color:var(--warning)}

.vazio{padding:40px 20px;text-align:center;color:var(--muted);font-size:13px}
.vazio svg{opacity:.4;margin-bottom:10px}

/* carregando */
.esqueleto{background:linear-gradient(90deg,var(--surface-2) 25%,var(--grid) 50%,var(--surface-2) 75%);
  background-size:200% 100%;animation:desliza 1.3s infinite;border-radius:7px;height:14px}
@keyframes desliza{0%{background-position:200% 0}100%{background-position:-200% 0}}
.girando{display:inline-block;width:14px;height:14px;border:2px solid currentColor;
  border-right-color:transparent;border-radius:99px;animation:gira .7s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.esqueleto,.girando{animation:none}}

/* aviso flutuante */
#avisos{position:fixed;right:18px;bottom:18px;z-index:200;display:flex;flex-direction:column;gap:10px;
  max-width:min(400px,calc(100vw - 36px))}
.toast{background:var(--surface-1);border:1px solid var(--border-strong);border-left:3px solid var(--s1);
  border-radius:11px;box-shadow:0 10px 34px rgba(0,0,0,.18);padding:12px 14px;font-size:13px;
  display:flex;gap:10px;align-items:flex-start;animation:entra .18s ease}
.toast.bom{border-left-color:var(--good)}
.toast.ruim{border-left-color:var(--critical)}
.toast b{display:block;margin-bottom:2px}
.toast button{margin-left:auto;border:0;background:transparent;color:var(--muted);font-size:16px;line-height:1;padding:0 2px}
@keyframes entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* diálogo */
dialog{border:1px solid var(--border-strong);border-radius:var(--radius);padding:0;
  background:var(--surface-1);color:var(--ink);box-shadow:0 24px 60px rgba(0,0,0,.28);
  width:min(560px,calc(100vw - 32px));max-height:88vh}
dialog::backdrop{background:rgba(11,11,11,.45);backdrop-filter:blur(2px)}
.dlg-head{padding:18px 22px 0}
.dlg-corpo{padding:16px 22px;overflow-y:auto;max-height:60vh}
.dlg-pe{padding:14px 22px 18px;display:flex;gap:9px;justify-content:flex-end;flex-wrap:wrap;
  border-top:1px solid var(--grid);margin-top:6px}

/* matriz de permissões */
.mod-bloco{border:1px solid var(--border);border-radius:11px;margin-bottom:12px;overflow:hidden}
.mod-cab{display:flex;align-items:center;gap:10px;padding:11px 14px;background:var(--surface-2);
  border-bottom:1px solid var(--border)}
.mod-cab b{flex:1;font-size:13.5px}
.mod-corpo{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:4px;padding:12px 14px}
.perm{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:8px;cursor:pointer}
.perm:hover{background:var(--surface-2)}
.perm input{width:16px;height:16px;accent-color:var(--s1);flex:0 0 auto}
.perm span{font-size:13px}
.perm small{display:block;color:var(--muted);font-size:10.5px}
.perm.travada{opacity:.55;cursor:not-allowed}

.filtros{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.select{padding:8px 11px;border-radius:10px;border:1px solid var(--border-strong);
  background:var(--surface-1);font-weight:520}
.busca-wrap{position:relative;flex:1 1 240px;max-width:340px}
.busca-wrap svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.busca-wrap input{padding-left:34px}
.icon-btn{width:38px;height:38px;border-radius:10px;border:1px solid var(--border-strong);
  background:var(--surface-1);color:var(--ink-2);display:grid;place-items:center}
.icon-btn:hover{background:var(--surface-2);color:var(--ink)}

.paginacao{display:flex;gap:8px;align-items:center;justify-content:flex-end;margin-top:14px;
  font-size:12.5px;color:var(--ink-2)}

.chave{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;background:var(--surface-2);
  border:1px solid var(--border);border-radius:8px;padding:9px 11px;word-break:break-all;
  display:flex;align-items:center;gap:10px;justify-content:space-between}

@media (max-width:1100px){
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g-2-1{grid-template-columns:1fr}
  .login-tela{grid-template-columns:1fr}
  .login-arte{display:none}
}
@media (max-width:900px){
  .app{grid-template-columns:64px 1fr}
  .brand div,.nav-item span,.nav-label,.eu div{display:none}
  .nav-item{justify-content:center;padding:11px 0}
  .brand{justify-content:center;padding:6px 0 16px}
  .eu{justify-content:center}
}
@media (max-width:680px){
  .g4,.g3,.g2{grid-template-columns:1fr}
  .content{padding:16px 14px 48px}
  .topbar{padding:10px 14px}
}

/* --- tipografia da marca ---
   Orbitron nos títulos e nos indicadores grandes, como manda o manual.
   Nas tabelas o texto continua em Inter: Orbitron é largo e, em coluna de
   número, atrapalha mais do que enfeita. */
h1,h2,h3,.stat-value,.hero-value,.form-titulo,.marca-nome{font-family:var(--fonte-titulo);letter-spacing:.01em}
h1{font-weight:800;text-transform:uppercase;font-size:20px;letter-spacing:.06em}
h2,.card-title{font-weight:700;font-size:14.5px;letter-spacing:.04em;text-transform:uppercase}
.stat-value,.hero-value{font-weight:700;letter-spacing:0}
.stat-label{text-transform:uppercase;letter-spacing:.07em;font-size:11px;font-weight:600;color:var(--muted)}