/* =====================================================================
   Layout Elevce — tema visual do Checklist Limpeza
   Carregado pelo includes/header.php (e pelo login.php).
   Todas as regras usam o prefixo .elv (classe do <body>) para ter
   prioridade sobre os <style> antigos de cada página.
   ===================================================================== */
:root{
  --elv-bg:#eef2f6;
  --elv-surface:#ffffff;
  --elv-line:#dfe5ec;
  --elv-line-soft:#edf1f5;
  --elv-ink:#13294b;          /* azul-marinho Elevce (títulos, números, botão principal) */
  --elv-ink-2:#0f1f3a;
  --elv-text:#1e293b;
  --elv-muted:#64748b;
  --elv-muted-2:#8a97a8;
  --elv-orange:#f95104;       /* laranja Elevce */
  --elv-orange-soft:#fff1e8;
  --elv-green:#16a148;
  --elv-green-soft:#e8f6ee;
  --elv-teal:#027f7b;
  --elv-teal-soft:#e8f4f3;
  --elv-red:#d03340;
  --elv-red-soft:#fbeaec;
  --elv-wine:#8e1f2c;
  --elv-wine-soft:#f6e9eb;
  --elv-slate:#4a5a70;
  --elv-slate-soft:#e9edf2;
  --elv-amber:#c27803;
  --elv-amber-soft:#fdf3e1;
  --elv-hero:linear-gradient(100deg,#0c2d39 0%,#112647 38%,#1a2a4c 58%,#393650 82%,#573f4b 100%);
  --elv-radius:16px;
  --elv-radius-lg:20px;
  --elv-shadow:0 1px 2px rgba(19,41,75,.04),0 6px 20px rgba(19,41,75,.05);
  --elv-shadow-lg:0 14px 34px rgba(19,41,75,.18);
  --elv-font:Inter,"Segoe UI",Arial,sans-serif;
  --elv-font-num:Sora,Inter,sans-serif;
}

/* ---------- Base ---------- */
body.elv{background:var(--elv-bg);color:var(--elv-text);font-family:var(--elv-font)}
.elv ::selection{background:#ffd9c4}
.elv .content{max-width:1440px;padding:22px 28px 40px}

/* ---------- Barra superior (marca) ---------- */
.elv .elv-topbar{position:sticky;top:0;z-index:40;background:rgba(238,242,246,.92);backdrop-filter:saturate(1.4) blur(8px);-webkit-backdrop-filter:saturate(1.4) blur(8px)}
.elv .elv-topbar-in{max-width:1440px;margin:0 auto;padding:12px 28px 0;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--elv-line)}
.elv .elv-brand-wrap{display:flex;align-items:center;gap:12px;min-width:0}
.elv .elv-logo{display:inline-flex;flex-direction:column;gap:9px;padding:2px 0 0}
.elv .elv-logo img{height:40px;width:auto;display:block}
.elv .elv-logo::after{content:"";display:block;height:3px;width:112px;margin-bottom:-2px;border-radius:2px;background:linear-gradient(90deg,var(--elv-orange) 0 34%,var(--elv-green) 34% 67%,var(--elv-teal) 67% 100%)}
.elv .elv-top-right{display:flex;align-items:center;gap:12px;min-width:0;padding-bottom:10px}
.elv .elv-pill{display:inline-flex;align-items:center;gap:8px;border:1px solid #ffc9ad;background:#fff;color:var(--elv-orange);border-radius:999px;padding:6px 12px;font-size:.66rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;max-width:46vw;overflow:hidden;text-overflow:ellipsis}
.elv .elv-pill i{width:8px;height:8px;border-radius:50%;background:var(--elv-orange);box-shadow:0 0 0 3px #ffe3d4;flex:0 0 auto}
.elv .mobile-menu-btn{width:40px;height:40px;border-radius:12px;border:1px solid var(--elv-line);background:#fff;color:var(--elv-ink);font-size:1.15rem;margin-bottom:10px}
.elv .mobile-menu-btn:hover{border-color:var(--elv-ink);background:#fff;color:var(--elv-ink)}
.elv .userbox{gap:10px}
.elv .avatar{width:36px;height:36px;background:var(--elv-ink);color:#fff;font-size:.85rem}
.elv .user-name{font-weight:800;font-size:.84rem;color:var(--elv-ink);line-height:1.15}
.elv .profile{font-size:.72rem;color:var(--elv-muted)}

/* ---------- Menu lateral ---------- */
.elv .sidebar-overlay{background:rgba(12,24,44,.45)}
.elv .sidebar{background:#fff;color:var(--elv-text);border-right:1px solid var(--elv-line);box-shadow:none;padding:18px 14px}
.elv .sidebar.open{box-shadow:24px 0 60px rgba(12,24,44,.18)}
.elv .sidebar-close{background:var(--elv-bg);border-color:var(--elv-line);color:var(--elv-ink)}
.elv .brand{border-bottom:1px solid var(--elv-line);padding:6px 44px 16px 8px;flex-direction:column;align-items:flex-start;gap:8px}
.elv .brand img{height:38px;width:auto}
.elv .brand p{color:var(--elv-muted);font-size:.72rem;font-weight:600;margin:0}
.elv .menu-title{color:var(--elv-muted-2);font-weight:800}
.elv .menu a{color:#334155;font-weight:600;border-radius:12px;position:relative}
.elv .menu a:hover{background:var(--elv-bg);color:var(--elv-ink)}
.elv .menu a.active{background:var(--elv-ink);color:#fff}
.elv .menu a.active::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--elv-orange)}

/* ---------- Cabeçalho da página = faixa escura (hero) ---------- */
.elv .page-head{position:relative;background:var(--elv-hero);color:#fff;border-radius:var(--elv-radius-lg);border-left:4px solid var(--elv-orange);padding:26px 26px 24px 26px;margin:6px 0 18px;box-shadow:var(--elv-shadow-lg);align-items:center;z-index:5}
.elv .page-head::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(600px 220px at 85% 0%,rgba(255,255,255,.06),transparent 70%);pointer-events:none}
.elv .page-head>*{position:relative;z-index:1}
.elv .page-head>div:first-child::before{content:"";display:block;width:38px;height:4px;border-radius:2px;margin-bottom:14px;background:linear-gradient(90deg,var(--elv-orange) 0 55%,var(--elv-green) 55% 100%)}
.elv .page-head h2{font-family:var(--elv-font);font-weight:800;font-size:1.65rem;letter-spacing:-.01em;color:#fff;margin:0}
.elv .page-head p,.elv .page-head .muted{color:#d5dce8;font-size:.86rem;line-height:1.55;margin:8px 0 0;max-width:720px}
.elv .page-head p strong,.elv .page-head p b{color:#fff}
.elv .page-head .btn,.elv .page-head .btn-outline{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.38);box-shadow:none}
.elv .page-head .btn:hover,.elv .page-head .btn-outline:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.6);color:#fff}
.elv .page-head .btn-primary{background:var(--elv-orange);border-color:var(--elv-orange)}
.elv .page-head .btn-primary:hover{background:#e04800;border-color:#e04800}
.elv .page-head .badge{background:rgba(255,255,255,.14);color:#fff}
.elv .page-head select,.elv .page-head input{background:#fff}
.elv .page-head .dropdown-menu-local{border-color:var(--elv-line);box-shadow:var(--elv-shadow-lg)}
.elv .page-head .dropdown-menu-local a:hover,.elv .page-head .dropdown-menu-local button:hover{background:var(--elv-bg);color:var(--elv-ink)}

/* ---------- Cartões, títulos internos ---------- */
.elv .card{border:1px solid var(--elv-line);border-radius:var(--elv-radius);box-shadow:var(--elv-shadow)}
.elv .card-header{border-bottom:1px solid var(--elv-line-soft)}
.elv .card-header h3,.elv .modal-header h3,.elv .rel-title h2{font-family:var(--elv-font);font-weight:800;color:var(--elv-ink)}
.elv .rel-title h2{font-size:1.15rem}

/* ---------- Botões ---------- */
.elv .btn{border-radius:10px;font-weight:700;transition:background .15s,border-color .15s,color .15s}
.elv .btn-primary{background:var(--elv-ink);color:#fff;border:1px solid var(--elv-ink)}
.elv .btn-primary:hover{background:var(--elv-ink-2);border-color:var(--elv-ink-2)}
.elv .btn-outline{background:#fff;color:var(--elv-ink);border:1px solid var(--elv-line)}
.elv .btn-outline:hover{border-color:var(--elv-ink);color:var(--elv-ink)}
.elv .btn-danger{background:var(--elv-red-soft);color:var(--elv-wine)}
.elv .btn-success{background:var(--elv-green-soft);color:#0f7a37}
.elv .btn-warning{background:var(--elv-orange-soft);color:#b23a00}
.elv .btn-purple{background:var(--elv-teal-soft);color:var(--elv-teal)}

/* ---------- Formulários e filtros ---------- */
.elv .form-control,.elv .filter-item input,.elv .filter-item select,.elv input[type=text],.elv input[type=email],.elv input[type=password],.elv input[type=date],.elv input[type=number],.elv input[type=search],.elv select,.elv textarea{border-color:#d3dbe5;border-radius:10px}
.elv .form-control:focus,.elv .filter-item input:focus,.elv .filter-item select:focus,.elv input:focus,.elv select:focus,.elv textarea:focus{border-color:var(--elv-ink);box-shadow:0 0 0 3px rgba(19,41,75,.12);outline:none}
.elv .form-label,.elv .filter-item label{color:var(--elv-slate);font-weight:800;font-size:.7rem;letter-spacing:.05em;text-transform:uppercase}
.elv .filter-bar,.elv .filter-card{border:1px solid var(--elv-line);border-radius:14px;box-shadow:var(--elv-shadow)}

/* ---------- Tabelas ---------- */
.elv th{background:#f6f8fb;color:var(--elv-slate);font-weight:800;font-size:.68rem;letter-spacing:.06em;border-bottom:1px solid var(--elv-line)}
.elv td{border-bottom:1px solid var(--elv-line-soft)}
.elv tr:hover td{background:#f8fafc}

/* ---------- Selos (badges) ---------- */
.elv .badge{font-weight:800;font-size:.7rem;padding:4px 10px}
.elv .badge-concluido{background:var(--elv-green-soft);color:#0f7a37}
.elv .badge-pendente{background:var(--elv-slate-soft);color:var(--elv-slate)}
.elv .badge-reprovado{background:var(--elv-red-soft);color:var(--elv-wine)}
.elv .badge-andamento{background:var(--elv-ink);color:#fff}
.elv .badge-reaberto{background:var(--elv-teal-soft);color:var(--elv-teal)}
.elv .badge-alerta{background:var(--elv-orange-soft);color:#b23a00;border:1px solid #ffd2bb}

/* ---------- Avisos ---------- */
.elv .flash{border-radius:12px;font-weight:700}
.elv .flash-ok{background:var(--elv-green-soft);border:1px solid #bfe6cd;color:#0f6a31}
.elv .flash-erro{background:var(--elv-red-soft);border:1px solid #f1c3c8;color:var(--elv-wine)}

/* ---------- Estados vazios ---------- */
.elv .empty-box,.elv .elv-empty{background:#fff;border:1px dashed #cfd8e3;border-radius:var(--elv-radius);color:var(--elv-muted);padding:34px;text-align:center}

/* ---------- Modais ---------- */
.elv .modal-backdrop{background:rgba(12,24,44,.55)}
.elv .modal-box{border-radius:var(--elv-radius-lg);border-top:4px solid var(--elv-orange)}
.elv .modal-close{background:var(--elv-bg);color:var(--elv-ink)}

/* ---------- Indicadores (KPIs) ---------- */
.elv .elv-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 18px}
.elv .elv-kpi{--kc:var(--elv-slate);--ks:var(--elv-slate-soft);position:relative;background:#fff;border:1px solid var(--elv-line);border-radius:var(--elv-radius);box-shadow:var(--elv-shadow);padding:16px 16px 14px;display:flex;gap:12px;align-items:flex-start;min-height:100px;overflow:hidden}
.elv .elv-kpi::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--kc)}
.elv .elv-kpi-icon{width:30px;height:30px;border-radius:9px;background:var(--ks);color:var(--kc);display:flex;align-items:center;justify-content:center;font-size:.9rem;font-weight:900;flex:0 0 auto}
.elv .elv-kpi-label{font-size:.64rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--elv-slate)}
.elv .elv-kpi-num{font-family:var(--elv-font-num);font-weight:800;font-size:1.65rem;line-height:1.1;color:var(--elv-ink);margin-top:2px}
.elv .elv-kpi-sub{font-size:.72rem;color:var(--elv-muted);line-height:1.4;margin-top:4px}
.elv .elv-kpi--amber{--kc:var(--elv-amber);--ks:var(--elv-amber-soft)}
.elv .elv-kpi--navy{--kc:var(--elv-ink);--ks:#e7ebf2}
.elv .elv-kpi--green{--kc:var(--elv-green);--ks:var(--elv-green-soft)}
.elv .elv-kpi--red{--kc:var(--elv-red);--ks:var(--elv-red-soft)}
.elv .elv-kpi--red .elv-kpi-num{color:var(--elv-red)}
.elv .elv-kpi--wine{--kc:var(--elv-wine);--ks:var(--elv-wine-soft)}
.elv .elv-kpi--teal{--kc:var(--elv-teal);--ks:var(--elv-teal-soft);background:#f2f8f8;border-color:var(--elv-teal)}

/* Indicadores antigos (caso alguma tela ainda use .dash-kpi) */
.elv .dash-kpi{position:relative;border:1px solid var(--elv-line);border-radius:var(--elv-radius);box-shadow:var(--elv-shadow);overflow:hidden}
.elv .dash-kpi::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--elv-ink)}
.elv .dash-kpi-title{color:var(--elv-slate);font-size:.66rem;letter-spacing:.07em;text-transform:uppercase}
.elv .dash-kpi-num{font-family:var(--elv-font-num);color:var(--elv-ink)}

/* ---------- Listas/cartões das telas existentes ---------- */
.elv .loja-accordion,.elv .agenda-row,.elv .resposta-item,.elv .area-card,.elv .checklist-item,.elv .pill{border-color:var(--elv-line);box-shadow:var(--elv-shadow)}
.elv .loja-accordion[open] summary{background:#f6f8fb}
.elv .loja-accordion[open] .chev{background:var(--elv-ink);color:#fff;border-color:var(--elv-ink)}
.elv .checklist-item:hover{border-color:var(--elv-ink)}
.elv .checklist-item.active{border-color:var(--elv-ink);background:#eef1f7;box-shadow:inset 3px 0 0 var(--elv-orange)}
.elv .agenda-title{font-family:var(--elv-font);color:var(--elv-ink)}

/* ---------- Paginação ---------- */
.elv .pag a,.elv .pag span{border-color:var(--elv-line);border-radius:9px;color:var(--elv-ink)}
.elv .pag a:hover{border-color:var(--elv-ink)}
.elv .pag .current{background:var(--elv-ink);border-color:var(--elv-ink);color:#fff}

/* ---------- Responsivo ---------- */
@media(max-width:1100px){
  .elv .elv-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .elv .content{padding:18px 18px 32px}
  .elv .elv-topbar-in{padding:10px 18px 0}
}
@media(max-width:920px){
  .elv .elv-pill{display:none}
  .elv .page-head{padding:22px 18px 20px}
  .elv .page-head h2{font-size:1.35rem}
}
@media(max-width:640px){
  .elv .content{padding:12px 12px 28px}
  .elv .elv-topbar-in{padding:8px 12px 0}
  .elv .elv-logo img{height:32px}
  .elv .elv-logo::after{width:90px}
  .elv .elv-kpis{grid-template-columns:1fr 1fr;gap:10px}
  .elv .elv-kpi{padding:14px 12px 12px;min-height:0;flex-direction:column;gap:8px}
  .elv .elv-kpi-num{font-size:1.4rem}
  .elv .page-head{border-radius:16px;margin-top:4px}
  .elv .page-head h2{font-size:1.2rem}
}