@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800&display=swap');

:root{
  --mais-blue:#1E63FF;
  --mais-red:#FF3B4D;
  --mais-yellow:#FFC400;

  --text:#0E1533;
  --muted:#6B7280;
  --card:#FFFFFF;
  --line:rgba(15,23,42,.08);

  --radius:20px;
  --shadow:0 20px 60px rgba(17,24,39,.08);
}

*{
  box-sizing:border-box;
}

html, body{
  height:100%;
}

body{
  margin:0;
  font-family:"Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--text);

  /* 🔥 DEGRADÊ COMPLETO NA TELA */
  background:
    radial-gradient(900px 600px at 10% 0%, rgba(30,99,255,.25), transparent 60%),
    radial-gradient(900px 600px at 90% 0%, rgba(255,59,77,.22), transparent 60%),
    radial-gradient(900px 600px at 50% 100%, rgba(255,196,0,.22), transparent 60%),
    linear-gradient(180deg, #f4f6fb, #eef1f9);
}

/* ================= CONTAINER ================= */

.container{
  max-width:1000px;
  margin:0 auto;
  padding:24px;
  min-height:100vh;
}

/* ================= HEADER ================= */

.header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:20px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
}

.logo-img{
  max-height:48px;
  width:auto;
  display:block;
  object-fit:contain;
  border-radius:12px;
}

.brand h1{
  margin:0;
  font-size:18px;
  font-weight:800;
}

.brand p{
  margin:0;
  font-size:12px;
  color:var(--muted);
}

.small{
  font-size:12px;
  color:var(--muted);
}

a{
  color:var(--mais-blue);
  text-decoration:none;
}

/* ================= HERO ================= */

.hero{
  border-radius:var(--radius);
  padding:22px;
  margin-bottom:18px;
  background:linear-gradient(135deg,
      rgba(30,99,255,.12),
      rgba(255,59,77,.10),
      rgba(255,196,0,.15)
  );
  box-shadow:var(--shadow);
}

/* ================= CARDS ================= */

.card{
  background:var(--card);
  border-radius:var(--radius);
  padding:22px;
  box-shadow:var(--shadow);
  border:1px solid var(--line);
}

.card.soft{
  background:#f9fafc;
  box-shadow:none;
}

.grid{
  display:grid;
  gap:14px;
}

.grid2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

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

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

/* ================= FORM ================= */

label{
  font-size:12px;
  font-weight:600;
  color:var(--muted);
}

input, select{
  width:100%;
  padding:13px;
  border-radius:16px;
  border:1px solid var(--line);
  font-family:inherit;
  font-size:14px;
  background:#fff;
}

input:focus, select:focus{
  border-color:var(--mais-blue);
  outline:none;
  box-shadow:0 0 0 3px rgba(30,99,255,.15);
}

/* ================= BUTTONS ================= */

button{
  padding:13px;
  border-radius:16px;
  border:none;
  font-weight:800;
  cursor:pointer;
  transition:all .15s ease;
  background:linear-gradient(135deg, var(--mais-blue), #4B86FF);
  color:#fff;
}

button:hover{
  transform:translateY(-1px);
  filter:brightness(1.05);
}

button.secondary{
  background:#fff;
  border:1px solid var(--mais-blue);
  color:var(--mais-blue);
}

button.warn{
  background:linear-gradient(135deg, var(--mais-yellow), #FFD34D);
  color:#1a1300;
}

button.danger{
  background:linear-gradient(135deg, var(--mais-red), #FF6A78);
  color:#fff;
}

/* ================= BADGES ================= */

.badge{
  display:inline-block;
  padding:6px 14px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  background:#fff;
  border:1px solid var(--line);
}

/* ================= CARD INFO ================= */

.cardinfo{
  border-radius:var(--radius);
  padding:16px;
  background:linear-gradient(135deg,
      rgba(30,99,255,.08),
      rgba(255,196,0,.08)
  );
  border:1px dashed rgba(30,99,255,.3);
}

.cardinfo .title{
  font-weight:700;
  font-size:13px;
}

.cardinfo .num{
  font-size:20px;
  font-weight:900;
  margin-top:6px;
  letter-spacing:1px;
}

.cardinfo .hint{
  font-size:12px;
  color:var(--muted);
  margin-top:4px;
}

/* ================= NOTICE ================= */

.notice{
  padding:14px;
  border-radius:16px;
  border:1px solid var(--line);
  background:#fff;
}

.notice.ok{
  background:rgba(30,99,255,.08);
  border-color:rgba(30,99,255,.25);
}

.notice.err{
  background:rgba(255,59,77,.08);
  border-color:rgba(255,59,77,.3);
}

/* ================= ADMIN TABLE ================= */

.table{
  width:100%;
  border-collapse:collapse;
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  background:#fff;
}

.table th,.table td{
  padding:12px;
  border-bottom:1px solid var(--line);
  font-size:14px;
}

.table th{
  background:rgba(15,23,42,.03);
  color:var(--muted);
  font-weight:800;
}

.actions a{
  margin-right:10px;
}

/* ================= ADMIN LAYOUT (MENU LATERAL) ================= */

.admin-shell{
  display:flex;
  gap:16px;
  min-height:calc(100vh - 48px);
}

.sidebar{
  width:260px;
  flex:0 0 260px;
  background:rgba(255,255,255,.80);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px;
  position:sticky;
  top:18px;
  height:fit-content;
}

.sidebar .s-brand{
  display:flex;
  align-items:center;
  gap:10px;
  padding-bottom:12px;
  border-bottom:1px solid var(--line);
  margin-bottom:12px;
}

.sidebar .s-brand img{
  max-height:36px;
  width:auto;
  border-radius:10px;
}

.sidebar .s-title{
  font-weight:900;
  line-height:1.1;
}
.sidebar .s-sub{
  font-size:12px;
  color:var(--muted);
}

.nav{
  display:grid;
  gap:8px;
  margin-top:10px;
}

.nav a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  color:var(--text);
  border:1px solid transparent;
  background:transparent;
  font-weight:700;
}

.nav a:hover{
  background:rgba(30,99,255,.08);
  border-color:rgba(30,99,255,.16);
}

.nav a.active{
  background:linear-gradient(135deg, rgba(30,99,255,.14), rgba(255,196,0,.14));
  border-color:rgba(30,99,255,.20);
}

.nav .dot{
  width:10px;height:10px;border-radius:999px;
  background:linear-gradient(135deg, var(--mais-blue), var(--mais-red));
  flex:0 0 10px;
}

.sidebar .s-footer{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--line);
  display:grid;
  gap:10px;
}

.content{
  flex:1;
  min-width:0;
}

.page-title{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}

.page-title h2{
  margin:0;
  font-size:18px;
  font-weight:900;
}

.page-title p{
  margin:4px 0 0;
  color:var(--muted);
  font-size:12px;
}

.kpis{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
@media(max-width:900px){
  .admin-shell{ flex-direction:column; }
  .sidebar{ width:100%; position:relative; top:auto; }
  .kpis{ grid-template-columns:1fr; }
}

.kpi{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px;
}
.kpi .label{ font-size:12px; color:var(--muted); font-weight:700; }
.kpi .value{ font-size:22px; font-weight:900; margin-top:6px; }