/* ============================================================
   LeonRocker — Painel Administrativo
   Mesma paleta do site (azul #0060BF / navy #0B1B33) num layout
   de app moderno: sidebar fixa + área de conteúdo em cards.
   ============================================================ */

*{margin:0; padding:0; box-sizing:border-box;}

:root{
  --azul:#0060BF;
  --navy:#0B1B33;
  --vermelho:#C30;
  --verde:#009933;
  --laranja:#f90;
  --ciano:#006699;
  --bg:#F5F7FA;
  --card:#FFFFFF;
  --borda:#E4E9F0;
  --texto:#1A2B42;
  --texto-suave:#5C6B7D;
  --texto-fraco:#8A94A3;
}

body{
  font:14px "Segoe UI", Arial, Helvetica, sans-serif;
  color:var(--texto);
  background:var(--bg);
  min-height:100vh;
}

a{color:inherit;}

/* ---------- Tela de login ---------- */
.login_wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 20% 20%, #123564 0%, #0B1B33 55%, #060E1C 100%);
  padding:20px;
}

.login_card{
  width:100%; max-width:380px; background:var(--card); border-radius:18px;
  padding:38px 34px; box-shadow:0 20px 60px rgba(0,0,0,.35);
  animation:lr-pop .35s ease;
}

@keyframes lr-pop{ from{opacity:0; transform:translateY(10px) scale(.98);} to{opacity:1; transform:none;} }

.login_logo{display:flex; align-items:baseline; gap:8px; margin-bottom:6px;}

.login_logo .mark{background:linear-gradient(135deg,#0060BF,#C30); color:#FFF; font:800 16px "Segoe UI",Arial; padding:5px 8px; border-radius:8px;}

.login_logo .word{font:800 24px "Segoe UI",Arial; color:var(--navy);}

.login_logo .word strong{color:var(--azul);}

.login_sub{color:var(--texto-fraco); font-size:12.5px; text-transform:uppercase; letter-spacing:.6px; margin-bottom:28px;}

.campo{margin-bottom:16px;}

.campo label{display:block; font-size:12.5px; font-weight:700; color:var(--texto-suave); margin-bottom:6px; text-transform:uppercase; letter-spacing:.4px;}

.campo input[type=text], .campo input[type=password], .campo input[type=email], .campo input[type=url],
.campo input[type=number], .campo input[type=datetime-local], .campo select, .campo textarea{
  width:100%; padding:11px 13px; border:1.5px solid var(--borda); border-radius:9px;
  font:14px "Segoe UI", Arial, sans-serif; color:var(--texto); background:#FBFCFE;
  transition:border-color .15s, box-shadow .15s; outline:none;
}

.campo input:focus, .campo select:focus, .campo textarea:focus{
  border-color:var(--azul); box-shadow:0 0 0 3px rgba(0,96,191,.12); background:#FFF;
}

.campo textarea{resize:vertical; min-height:90px; font-family:"Segoe UI", Arial, sans-serif;}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:11px 20px; border:0; border-radius:9px; cursor:pointer;
  font:700 13.5px "Segoe UI", Arial, sans-serif; text-decoration:none;
  transition:transform .12s ease, box-shadow .12s ease, background .15s ease;
}

.btn:active{transform:scale(.97);}

.btn_primario{background:var(--azul); color:#FFF; box-shadow:0 4px 14px rgba(0,96,191,.3);}

.btn_primario:hover{background:#0050A3;}

.btn_bloco{width:100%;}

.btn_perigo{background:#FFF0ED; color:#C0341C;}

.btn_perigo:hover{background:#FFE1D9;}

.btn_secundario{background:#F0F3F8; color:var(--navy);}

.btn_secundario:hover{background:#E4E9F0;}

.alerta{
  padding:11px 14px; border-radius:9px; font-size:13px; margin-bottom:18px;
  animation:lr-pop .25s ease;
}

.alerta_erro{background:#FFF0ED; color:#A32B12; border:1px solid #F3C1B2;}

.alerta_sucesso{background:#EAF9EE; color:#186B33; border:1px solid #B7E8C4;}

/* ---------- Layout com sidebar ---------- */
.app{display:flex; min-height:100vh;}

.sidebar{
  width:230px; flex-shrink:0; background:var(--navy); color:#FFF;
  padding:22px 16px; position:sticky; top:0; height:100vh; display:flex; flex-direction:column;
}

.sidebar_logo{display:flex; align-items:baseline; gap:7px; padding:0 8px 22px; border-bottom:1px solid rgba(255,255,255,.1); margin-bottom:18px;}

.sidebar_logo .mark{background:linear-gradient(135deg,#3E8EFF,#FF6A3D); color:#FFF; font:800 13px "Segoe UI",Arial; padding:4px 7px; border-radius:6px;}

.sidebar_logo .word{font:800 18px "Segoe UI",Arial; color:#FFF;}

.sidebar_logo .word strong{color:#79B4FF;}

.sidebar nav{display:flex; flex-direction:column; gap:3px; flex:1;}

.sidebar nav a{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:9px;
  text-decoration:none; color:rgba(255,255,255,.7); font-weight:600; font-size:13.5px;
  transition:background .15s, color .15s;
}

.sidebar nav a:hover{background:rgba(255,255,255,.06); color:#FFF;}

.sidebar nav a.ativo{background:var(--azul); color:#FFF;}

.nav_badge{background:#C0341C; color:#FFF; font-size:10.5px; font-weight:700; border-radius:99px; padding:1px 7px; margin-left:auto;}

.sidebar_rodape{border-top:1px solid rgba(255,255,255,.1); padding-top:14px; margin-top:14px;}

.sidebar_user{font-size:12.5px; color:rgba(255,255,255,.55); margin-bottom:8px;}

.sidebar_rodape a{color:rgba(255,255,255,.7); font-size:13px; text-decoration:none; font-weight:600;}

.sidebar_rodape a:hover{color:#FFF;}

.sidebar_voltar{display:block; margin-top:10px; font-size:12px !important; color:rgba(255,255,255,.4) !important; font-weight:400 !important;}

/* ---------- Conteúdo ---------- */
.conteudo{flex:1; padding:32px 40px; max-width:1180px;}

.topo_pagina{display:flex; align-items:center; justify-content:space-between; margin-bottom:26px; flex-wrap:wrap; gap:14px;}

.topo_pagina h1{font:800 24px "Segoe UI", Arial, sans-serif; color:var(--navy); letter-spacing:-.3px;}

.topo_pagina p{color:var(--texto-fraco); font-size:13px; margin-top:3px;}

/* Stat cards */
.stats_grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:16px; margin-bottom:30px;}

.stat_card{
  background:var(--card); border:1px solid var(--borda); border-radius:14px; padding:20px;
  box-shadow:0 2px 8px rgba(10,30,60,.04); transition:transform .15s, box-shadow .15s;
}

.stat_card:hover{transform:translateY(-3px); box-shadow:0 10px 24px rgba(10,30,60,.09);}

.stat_card .valor{font:800 30px "Segoe UI", Arial, sans-serif; color:var(--navy);}

.stat_card .rotulo{font-size:12.5px; color:var(--texto-fraco); text-transform:uppercase; letter-spacing:.5px; font-weight:700; margin-top:4px;}

.stat_card .barra{height:4px; border-radius:4px; margin-bottom:12px; width:38px;}

/* Cards de conteúdo / tabelas */
.painel{background:var(--card); border:1px solid var(--borda); border-radius:14px; padding:24px; box-shadow:0 2px 8px rgba(10,30,60,.04); margin-bottom:24px;}

.painel_titulo{font:700 15px "Segoe UI", Arial, sans-serif; color:var(--navy); margin-bottom:16px; display:flex; align-items:center; justify-content:space-between;}

table.tabela{width:100%; border-collapse:collapse;}

table.tabela th{text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--texto-fraco); padding:10px 12px; border-bottom:2px solid var(--borda);}

table.tabela td{padding:12px; border-bottom:1px solid var(--borda); font-size:13.5px; vertical-align:middle;}

table.tabela tr:hover td{background:#F8FAFC;}

.thumb{width:52px; height:38px; object-fit:cover; border-radius:6px; display:block;}

.tag_categoria{display:inline-block; color:#FFF; font:700 10.5px "Segoe UI",Arial; padding:3px 9px; border-radius:99px; text-transform:uppercase; letter-spacing:.4px;}

.tag_destaque{display:inline-block; background:#FFF6DA; color:#8A6100; font:700 10.5px "Segoe UI",Arial; padding:3px 9px; border-radius:99px;}

.tag_status{display:inline-block; font:700 10.5px "Segoe UI",Arial; padding:3px 9px; border-radius:99px; text-transform:uppercase; letter-spacing:.4px;}
.tag_status_pendente{background:#FFF6DA; color:#8A6100;}
.tag_status_aprovado{background:#E3F7E9; color:#116631;}
.tag_status_spam{background:#FFE1D9; color:#C0341C;}

.filtro_abas{display:flex; gap:6px;}
.filtro_abas a{
  font:600 12.5px "Segoe UI", Arial, sans-serif; color:var(--texto-fraco); text-decoration:none;
  padding:6px 12px; border-radius:99px; transition:background .15s, color .15s;
}
.filtro_abas a:hover{background:#F0F4F9;}
.filtro_abas a.ativo{background:var(--azul); color:#FFF;}

.acoes{display:flex; gap:8px;}

.acoes a, .acoes button{
  font-size:12px; font-weight:700; padding:6px 10px; border-radius:7px; text-decoration:none;
  border:0; cursor:pointer; transition:background .15s;
}

.acao_editar{background:#EAF1FC; color:var(--azul);}
.acao_editar:hover{background:#D7E6FA;}

.acao_excluir{background:#FFF0ED; color:#C0341C;}
.acao_excluir:hover{background:#FFE1D9;}

.vazio{padding:32px; text-align:center; color:var(--texto-fraco); font-size:13.5px;}

.grid_2col{display:grid; grid-template-columns:2fr 1fr; gap:20px;}

@media (max-width: 900px){
  .app{flex-direction:column;}
  .sidebar{width:100%; height:auto; position:relative;}
  .conteudo{padding:22px;}
  .grid_2col{grid-template-columns:1fr;}
}

.preview_imagem{
  width:100%; max-height:220px; object-fit:cover; border-radius:10px; margin-top:10px;
  border:1px solid var(--borda); display:none;
}

.ajuda{font-size:12px; color:var(--texto-fraco); margin-top:5px;}

.switch_wrap{display:flex; align-items:center; gap:10px; padding:10px 0;}

.badge_cor{display:inline-block; width:16px; height:16px; border-radius:5px; vertical-align:middle; margin-right:6px;}

.galeria_linha{display:flex; align-items:center; gap:8px; margin-bottom:8px;}

.galeria_linha input{
  flex:1; padding:9px 12px; border:1.5px solid var(--borda); border-radius:9px;
  font:13.5px "Segoe UI", Arial, sans-serif; color:var(--texto); background:#FBFCFE;
  transition:border-color .15s, box-shadow .15s; outline:none;
}

.galeria_linha input:focus{border-color:var(--azul); box-shadow:0 0 0 3px rgba(0,96,191,.12); background:#FFF;}

.galeria_linha [data-remover-galeria]{
  flex-shrink:0; padding:8px 12px; font-size:13px; line-height:1; color:#C0341C; background:#FFF0ED;
}

.galeria_linha [data-remover-galeria]:hover{background:#FFE1D9;}