/* ─────────────────────────────────────────────────────────────────────
   MOOB CP — Painel administrativo
   Design renovado: verde-limão (#c6f24a) + roxo (#8b5cf6)
   Tipografia: Sora (títulos) + Manrope (texto)
   Temas: claro + escuro com suporte a preferência do sistema
   ───────────────────────────────────────────────────────────────────── */


:root{
  --bg:#eceef2; --panel:#ffffff; --tile:#f3f4f7; --tile-2:#eef0f4;
  --ink:#14161c; --sub:#5b6270; --faint:#9aa1ad; --line:#e3e6ec;
  --lime:#c6f24a; --lime-deep:#93c221; --violet:#8b5cf6; --violet-deep:#6d28d9;
  --dark:#181b22; --dark-2:#22262f;
  --good:#16a34a; --warn:#d97706; --orange:#f97316;
  --shadow:0 6px 20px rgba(20,22,28,.06); --shadow-2:0 10px 30px rgba(20,22,28,.10);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0d0f14; --panel:#161922; --tile:#1c2029; --tile-2:#20242e;
    --ink:#eef1f6; --sub:#a2abbb; --faint:#6b7484; --line:#262b36;
    --dark:#10131a; --dark-2:#1a1e27;
    --shadow:0 6px 20px rgba(0,0,0,.35); --shadow-2:0 12px 34px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --bg:#0d0f14; --panel:#161922; --tile:#1c2029; --tile-2:#20242e;
  --ink:#eef1f6; --sub:#a2abbb; --faint:#6b7484; --line:#262b36;
  --dark:#10131a; --dark-2:#1a1e27;
  --shadow:0 6px 20px rgba(0,0,0,.35); --shadow-2:0 12px 34px rgba(0,0,0,.5);
}
:root[data-theme="light"]{
  --bg:#eceef2; --panel:#ffffff; --tile:#f3f4f7; --tile-2:#eef0f4;
  --ink:#14161c; --sub:#5b6270; --faint:#9aa1ad; --line:#e3e6ec;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:var(--bg); color:var(--ink);
  -webkit-font-smoothing:antialiased; line-height:1.45;
  min-height:100vh;
}

/* A topbar, a nav inferior, o chat e a barra de suporte vivem em
   moob-chrome.css — carregado antes deste arquivo em toda página do admin. */

.conteudo{ padding:24px 20px 120px; max-width:1160px; margin:0 auto}

/* ── Títulos ─────────────────────────────────────────────────────────── */
h2{
  font-family:'Sora',sans-serif; font-weight:700; font-size:18px;
  letter-spacing:-.01em; margin:26px 0 14px; padding-left:14px;
  color:var(--ink);
  border-left:3px solid var(--lime);
}

h3{
  font-family:'Sora',sans-serif; font-weight:700; font-size:15px;
}

/* ── Cards de métrica ────────────────────────────────────────────────── */
.cards{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:12px; margin-bottom:26px;
}

.card{
  background:var(--panel); border:1px solid var(--line);
  border-radius:16px; padding:16px 14px; box-shadow:var(--shadow);
  position:relative; overflow:hidden;
  transition:transform .12s ease, box-shadow .12s ease;
}

.card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-2)}

.card::before{
  content:''; position:absolute; inset:0 auto 0 0;
  width:2px; background:linear-gradient(135deg,var(--lime),var(--violet));
}

.card b{
  display:block; font-family:'Sora',sans-serif; font-weight:800;
  font-size:26px; letter-spacing:-.02em; margin-top:4px;
  background:linear-gradient(135deg,var(--lime),var(--violet));
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}

.card span{
  font-size:11.5px; color:var(--sub); font-weight:600;
  display:block; margin-top:6px;
}

/* ── Painéis genéricos ───────────────────────────────────────────────── */
.painel, .dash-bloco, .form-midia, .form-linha{
  background:var(--panel); border:1px solid var(--line);
  border-radius:16px; box-shadow:var(--shadow);
}

/* ── Formulários ─────────────────────────────────────────────────────── */
label{
  display:block; font-size:11px; font-weight:700;
  letter-spacing:.6px; text-transform:uppercase;
  color:var(--sub); margin-bottom:6px;
}

label small{
  font-weight:500; text-transform:none; letter-spacing:0;
  color:var(--faint);
}

input, select, textarea{
  width:100%; padding:10px 12px; font-size:13px;
  color:var(--ink); background:var(--tile);
  border:1px solid var(--line); border-radius:10px;
  outline:none; transition:all .12s ease; font-family:inherit;
}

input::placeholder, textarea::placeholder{
  color:var(--faint);
}

input:focus, select:focus, textarea:focus{
  border-color:var(--violet); background:var(--panel);
  box-shadow:0 0 0 3px rgba(139,92,246,.15);
}

select option{
  background:var(--panel); color:var(--ink);
}

.form-linha{
  padding:16px; display:flex; gap:14px;
  flex-wrap:wrap; align-items:flex-end;
}

.form-linha > div{
  flex:1 1 200px;
}

.form-linha > div:last-child{
  flex:0 0 auto;
}

/* ── Botões ──────────────────────────────────────────────────────────── */
button, .botao{
  display:inline-flex; align-items:center; justify-content:center;
  gap:6px; padding:11px 16px; font-size:13px; font-weight:700;
  color:#fff; background:linear-gradient(135deg,var(--lime),var(--violet));
  border:none; border-radius:10px; cursor:pointer;
  box-shadow:var(--shadow); transition:all .12s ease;
}

button:hover:not(:disabled), .botao:hover{
  transform:translateY(-2px); box-shadow:var(--shadow-2);
}

button:active:not(:disabled){
  transform:translateY(0);
}

button:disabled{
  opacity:.6; cursor:default;
}

button.mini, .mini{
  padding:8px 12px; font-size:12px; font-weight:600;
  color:var(--ink); background:var(--tile);
  border:1px solid var(--line); box-shadow:none;
  text-shadow:none; text-decoration:none;
}

button.mini:hover, .mini:hover{
  background:var(--lime); color:var(--dark);
  border-color:var(--lime);
  transform:none; box-shadow:var(--shadow);
}

button.perigo, .perigo{
  color:var(--warn); background:rgba(217,119,6,.12);
  border:1px solid rgba(217,119,6,.3);
}

button.perigo:hover{
  background:rgba(217,119,6,.24); border-color:var(--warn);
}

.btn-link{
  display:inline-block; padding:8px 12px; border-radius:10px;
  border:1px solid var(--line); color:var(--sub);
  text-decoration:none; font-size:12px; background:transparent;
  cursor:pointer; transition:all .12s ease;
}

.btn-link:hover{
  background:var(--tile); color:var(--ink); border-color:var(--lime);
}

/* ── Tabelas ─────────────────────────────────────────────────────────── */
.tabela-scroll{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  border-radius:16px;
}

.tabela-scroll table{
  min-width:900px;
}

table{
  width:100%; background:var(--panel); border:1px solid var(--line);
  border-radius:16px; border-collapse:separate;
  border-spacing:0; box-shadow:var(--shadow);
}

th, td{
  padding:12px 14px; text-align:left;
  font-size:13px; border-bottom:1px solid var(--line);
}

th{
  background:var(--tile); font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em;
  color:var(--sub);
}

tr:last-child td{
  border-bottom:none;
}

tbody tr:hover td{
  background:var(--tile);
}

td code, code{
  font-family:ui-monospace,'SF Mono',Menlo,monospace;
  font-size:12px; padding:3px 8px; border-radius:6px;
  background:var(--tile); color:var(--violet);
}

.acoes{
  display:flex; gap:6px; flex-wrap:wrap; align-items:center;
}

.acoes form{
  display:inline;
}

.papel-form{
  display:flex; align-items:center; gap:6px; min-width:250px;
}

.papel-form select{
  width:auto; min-width:185px; padding:8px 10px;
}

/* ── Status pills ────────────────────────────────────────────────────── */
.ok, .off{
  display:inline-flex; align-items:center; gap:4px;
  font-size:11px; font-weight:700; padding:4px 10px;
  border-radius:999px;
}

.ok{
  color:var(--good); background:rgba(22,163,74,.15);
}

.off{
  color:var(--faint); background:var(--tile);
}

/* ── Mensagens ───────────────────────────────────────────────────────── */
.flash{
  padding:12px 16px; border-radius:12px; margin:14px 0;
  font-size:13px; border:1px solid rgba(22,163,74,.3);
  background:rgba(22,163,74,.12); color:var(--good);
}

.flash.erro{
  border-color:rgba(217,119,6,.3); background:rgba(217,119,6,.12);
  color:var(--warn);
}

.nota{
  font-size:13px; color:var(--sub); margin:8px 0;
  line-height:1.6;
}

.nota code{
  color:var(--violet);
}

.aviso{
  padding:10px 14px; border-radius:10px; font-size:13px;
  margin-top:8px; background:rgba(249,115,22,.12);
  color:var(--orange); border:1px solid rgba(249,115,22,.25);
}

.aviso.erro{
  background:rgba(217,119,6,.12); color:var(--warn);
  border-color:rgba(217,119,6,.3);
}

.oculto{
  display:none;
}

/* ── Formulário de upload ────────────────────────────────────────────── */
.form-midia{
  padding:22px; max-width:760px;
}

.grade2{
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
}

@media (max-width:560px){
  .grade2{
    grid-template-columns:1fr;
  }
}

.campo-arquivo{
  margin:20px 0;
}

.campo-arquivo input[type=file]{
  padding:22px; background:rgba(198,242,74,.06);
  border:1.5px dashed rgba(198,242,74,.35);
  border-radius:12px; cursor:pointer; color:var(--sub);
}

.campo-arquivo input[type=file]:hover{
  background:rgba(198,242,74,.12); border-color:rgba(198,242,74,.55);
}

.form-midia button{
  margin-top:6px;
}

/* ── Utilidades ──────────────────────────────────────────────────────── */
em{
  color:var(--ink); font-style:normal; font-weight:700;
}

a{
  color:var(--violet); text-decoration:none;
  transition:color .12s ease;
}

a:hover{
  color:var(--lime);
}

ol.nota, ul.nota{
  padding-left:20px;
}

ol.nota li, ul.nota li{
  margin:6px 0;
}

hr{
  border:none; border-top:1px solid var(--line);
  margin:20px 0;
}

/* ── Tela de login ───────────────────────────────────────────────────── */
.tela-login{
  min-height:100vh; min-height:100dvh;
  display:flex; align-items:center; justify-content:center; padding:20px;
}

.cartao-login{
  width:100%; max-width:380px; padding:34px 30px;
  background:var(--panel); border:1px solid var(--line);
  border-radius:22px; box-shadow:var(--shadow-2);
  position:relative; overflow:hidden;
}

.cartao-login::before{
  content:''; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg,var(--lime),var(--violet));
}

.cartao-login h1{
  font-family:'Sora',sans-serif; font-size:20px; font-weight:800;
  letter-spacing:.02em; text-transform:uppercase;
  margin-bottom:20px; text-align:center; color:var(--ink);
}

.cartao-login .marca-badge{display:block; width:46px; height:46px; margin:0 auto 14px}
.cartao-login input{margin-bottom:14px}
.cartao-login button{width:100%; margin-top:4px}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width:700px){
  .conteudo{
    padding:20px 14px 120px;
  }

  .cards{
    grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
    gap:10px;
  }

  table{
    font-size:12px;
  }

  th, td{
    padding:10px 10px;
  }
}

/* ── Redução de movimento ────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *{
    transition:none!important;
  }
}