/* AlfaDash — design system (mesma identidade do Painel Comercial) */
:root{
  --bg:#f2f6fa; --panel:#ffffff; --panel2:#e9f0f8; --border:#d3dfec;
  --txt:#002850; --mut:#5e7590; --azul:#1878c8; --brand:#b3282d; --navy:#002850;
  --green:#15803d; --sombra:rgba(0,40,80,.12);
}
body.escuro{
  --bg:#0e1726; --panel:#152238; --panel2:#1b2c47; --border:#24395c;
  --txt:#e8eef7; --mut:#8fa3bf; --azul:#4a82c4; --brand:#d9484d; --navy:#0b1322;
  --green:#4ade80; --sombra:rgba(0,0,0,.45);
}
*{box-sizing:border-box; margin:0; padding:0}
body{background:var(--bg); color:var(--txt);
  font:14px/1.45 Calibri,"Segoe UI",system-ui,sans-serif; min-height:100vh}
.faixa{position:fixed; left:0; top:0; bottom:0; width:8px; z-index:50;
  background:linear-gradient(178deg,var(--navy) 0%,var(--navy) 34%,#1878c8 42%,#1878c8 100%)}
a{color:inherit; text-decoration:none}

/* ---------- cabeçalho ---------- */
.topo{display:flex; align-items:center; justify-content:space-between;
  padding:14px 26px; border-bottom:2px solid var(--brand); background:var(--panel);
  box-shadow:0 1px 4px var(--sombra)}
.marca{display:flex; align-items:center; gap:14px}
.marca img{height:44px}
.marca b{font-size:19px; letter-spacing:-.3px} .marca b em{font-style:normal; color:var(--azul)}
.marca small{display:block; color:var(--mut); font-size:11px}
.acoes{display:flex; align-items:center; gap:16px; font-size:13px}
.acoes .quem{color:var(--mut)}
.lnk{background:var(--panel2); border:1px solid var(--border); color:var(--txt);
  border-radius:20px; padding:6px 14px; cursor:pointer; font:inherit}
.lnk:hover{border-color:var(--azul)}
main{max-width:1080px; margin:0 auto; padding:26px 26px 60px}
.flash{background:color-mix(in srgb,var(--brand) 12%,transparent);
  border:1px solid var(--brand); color:var(--brand); border-radius:10px;
  padding:10px 14px; margin-bottom:18px; font-weight:600}

/* ---------- login ---------- */
.loginwrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px}
.logincard{background:var(--panel); border:1px solid var(--border); border-radius:20px;
  box-shadow:0 10px 40px var(--sombra); padding:34px 34px 28px; width:360px; text-align:center}
.logincard img{height:60px; margin-bottom:14px}
.logincard h1{font-size:24px; margin-bottom:2px} .logincard h1 em{font-style:normal; color:var(--azul)}
.logincard .sub{color:var(--mut); font-size:12px; margin-bottom:22px}
.campo{text-align:left; margin-bottom:12px}
.campo label{display:block; font-size:11px; font-weight:700; color:var(--mut);
  text-transform:uppercase; letter-spacing:.5px; margin-bottom:4px}
.campo input{width:100%; background:var(--bg); border:1px solid var(--border);
  border-radius:10px; padding:10px 12px; font:inherit; color:var(--txt)}
.campo input:focus{outline:none; border-color:var(--azul)}
.btn{width:100%; background:var(--azul); color:#fff; border:none; border-radius:10px;
  padding:11px; font:700 14px Calibri,"Segoe UI",sans-serif; cursor:pointer; margin-top:6px}
.btn:hover{filter:brightness(1.06)}

/* ---------- portal (tiles) ---------- */
.area-tit{font-size:12px; font-weight:800; letter-spacing:.8px; text-transform:uppercase;
  color:var(--mut); margin:22px 0 10px; display:flex; align-items:center; gap:8px}
.tiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px}
.tile{background:var(--panel); border:1px solid var(--border); border-radius:16px;
  padding:18px; display:flex; gap:14px; align-items:center; transition:.15s;
  box-shadow:0 1px 3px var(--sombra)}
.tile:hover{border-color:var(--azul); transform:translateY(-2px)}
.tile .ic{width:46px; height:46px; border-radius:12px; flex:none; font-size:22px;
  display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb,var(--azul) 14%,transparent)}
.tile b{font-size:15px} .tile small{display:block; color:var(--mut); font-size:12px; margin-top:2px}
.vazio{color:var(--mut); background:var(--panel); border:1px dashed var(--border);
  border-radius:14px; padding:26px; text-align:center; margin-top:16px}

/* ---------- administração ---------- */
h2.tit{font-size:20px; margin-bottom:4px}
.dica{color:var(--mut); font-size:12px; margin-bottom:18px}
table{width:100%; border-collapse:collapse; background:var(--panel);
  border:1px solid var(--border); border-radius:12px; overflow:hidden; font-size:13px}
th{background:var(--panel2); color:var(--mut); text-align:left; padding:10px 12px; font-size:12px}
td{padding:10px 12px; border-top:1px solid var(--border)}
.pill{font-size:11px; font-weight:700; padding:2px 9px; border-radius:20px}
.pill.on{background:color-mix(in srgb,var(--green) 16%,transparent); color:var(--green)}
.pill.off{background:color-mix(in srgb,var(--mut) 18%,transparent); color:var(--mut)}
.pill.adm{background:color-mix(in srgb,var(--brand) 15%,transparent); color:var(--brand)}
.btn-sm{display:inline-block; background:var(--azul); color:#fff; border-radius:8px;
  padding:7px 14px; font-weight:700; font-size:12px; border:none; cursor:pointer}
.form-card{background:var(--panel); border:1px solid var(--border); border-radius:16px;
  padding:24px; max-width:620px}
.form-card .campo input[type=text],.form-card .campo input[type=email],
.form-card .campo input[type=password]{width:100%}
.check{display:flex; align-items:center; gap:9px; padding:7px 0; font-size:13.5px}
.grp{border:1px solid var(--border); border-radius:12px; padding:12px 14px; margin:10px 0}
.grp h4{font-size:12px; text-transform:uppercase; letter-spacing:.5px; color:var(--mut); margin-bottom:6px}
.row{display:flex; gap:14px} .row .campo{flex:1}