/* admin-common.css — tema visual compartilhado do painel administrativo LifCard.
   Usado por admin.html, admin-financeiro.html, admin-marketing.html, admin-engajamento.html,
   admin-logistica.html, admin-operadores.html e admin-vouchers.html. Editar aqui reflete em
   todas as páginas do painel de uma vez. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root { --navy:#FFFFFF; --navy2:#F1F3F6; --navy3:#E2E5EA; --orange:#FF6600; --text:#475569; --muted:#8a94a6; --green:#22c55e; --red:#ef4444; --ink:#111827; }
body { font-family:'Inter','Segoe UI',system-ui,sans-serif; background:var(--navy); color:var(--text); min-height:100vh; }
.header { background:var(--navy2); border-bottom:1px solid var(--navy3); padding:14px 24px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:10; }
.logo { display:flex; align-items:center; gap:10px; text-decoration:none; }
.logo img { height:44px; } .logo span { font-size:18px; font-weight:700; color:var(--ink); } .logo span em { color:var(--orange); font-style:normal; }
.tag { font-size:0.72rem; background:var(--orange); color:#fff; padding:3px 8px; border-radius:6px; font-weight:700; }
.tag.op { background:var(--navy3); color:var(--ink); }
.tag.st-ativo { background:rgba(34,197,94,0.15); color:#15803d; }
.tag.st-usado { background:var(--navy3); color:var(--ink); }
.tag.st-cancelado { background:rgba(239,68,68,0.15); color:#b91c1c; }
.btn-logout { background:transparent; border:1px solid var(--navy3); color:var(--ink); padding:7px 14px; border-radius:8px; font-size:0.8rem; cursor:pointer; }
.btn-logout:hover { border-color:var(--orange); }

/* ── Layout com menu lateral ── */
.layout { display:flex; align-items:flex-start; }
.sidebar { width:210px; flex-shrink:0; background:var(--navy2); border-right:1px solid var(--navy3); min-height:calc(100vh - 73px); padding:20px 0; }
.sidebar nav { display:flex; flex-direction:column; gap:2px; }
.side-link { display:block; padding:11px 22px; color:var(--text); text-decoration:none; font-size:0.9rem; font-weight:600; border-left:3px solid transparent; }
.side-link:hover { background:var(--navy3); color:var(--ink); }
.side-link.ativo { border-left-color:var(--orange); background:#fff; color:var(--orange); }
.content { flex:1; min-width:0; }
@media (max-width:820px) {
  .layout { flex-direction:column; }
  .sidebar { width:100%; min-height:auto; border-right:none; border-bottom:1px solid var(--navy3); }
  .sidebar nav { flex-direction:row; flex-wrap:wrap; padding:0 12px; }
  .side-link { border-left:none; border-bottom:3px solid transparent; padding:10px 14px; }
  .side-link.ativo { border-left:none; border-bottom-color:var(--orange); }
}

.main { max-width:980px; margin:0; padding:26px 24px 70px; }
h1 { color:var(--ink); font-size:1.4rem; margin-bottom:4px; }
.sub { color:var(--muted); font-size:0.82rem; margin-bottom:22px; }
.secao-titulo { color:var(--orange); font-size:0.75rem; text-transform:uppercase; letter-spacing:1px; font-weight:700; margin:28px 0 12px; display:flex; align-items:center; gap:8px; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; }
.kpi { background:var(--navy2); border:1px solid var(--navy3); border-radius:14px; padding:16px; }
.kpi .valor { font-size:1.7rem; font-weight:800; color:var(--ink); line-height:1.1; }
.kpi .rotulo { font-size:0.78rem; color:var(--muted); margin-top:4px; }
.kpi.ok .valor { color:var(--green); }
.kpi.alerta .valor { color:#dc2626; }
.cols2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px; }
@media (max-width:680px){ .cols2 { grid-template-columns:1fr; } }
.box { background:var(--navy2); border:1px solid var(--navy3); border-radius:14px; padding:18px; }
.box h4 { color:var(--ink); font-size:0.95rem; margin-bottom:12px; }

/* Kanban */
.kanban { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media (max-width:820px){ .kanban { grid-template-columns:1fr; } }
.coluna { background:var(--navy2); border:1px solid var(--navy3); border-radius:12px; padding:12px; }
.coluna .cab { font-size:0.8rem; font-weight:700; color:var(--ink); margin-bottom:10px; display:flex; justify-content:space-between; }
.coluna .cab .qtd { color:var(--muted); }
.cartao { background:var(--navy); border:1px solid var(--navy3); border-radius:10px; padding:12px; margin-bottom:10px; }
.cartao .nome { color:var(--ink); font-weight:700; font-size:0.9rem; }
.cartao .meta { color:var(--muted); font-size:0.78rem; margin-top:4px; line-height:1.5; }
.cartao .sang { display:inline-block; background:var(--red); color:#fff; border-radius:5px; padding:1px 7px; font-size:0.72rem; font-weight:700; margin-top:6px; }
.cartao a.qr { color:var(--orange); font-size:0.78rem; text-decoration:none; }
.cartao .btn { margin-top:10px; width:100%; border:none; border-radius:7px; padding:8px; font-size:0.8rem; font-weight:700; cursor:pointer; }
.btn-prod { background:var(--navy3); color:var(--ink); } .btn-prod:hover { background:#d6dae1; }
.btn-env { background:var(--green); color:#fff; } .btn-env:hover { opacity:.9; }
.vazio { color:var(--muted); font-size:0.8rem; padding:8px 2px; }
.btn-export { background:transparent; border:1.5px solid var(--navy3); color:var(--ink); padding:9px 16px; border-radius:8px; font-size:0.85rem; font-weight:600; cursor:pointer; }
.btn-export:hover { border-color:var(--orange); }

#boot, #restrito { text-align:center; padding:80px 20px; color:var(--muted); }
.spin { width:44px;height:44px;border:4px solid var(--navy3);border-top-color:var(--orange);border-radius:50%;animation:girar .8s linear infinite;margin:0 auto 18px; }
@keyframes girar { to { transform:rotate(360deg); } }
#painel, #restrito { display:none; }
#restrito .ic { font-size:2.4rem; margin-bottom:12px; }