/* Painel Anna Leal — estilos compartilhados (admin.html e area.html) */
:root{
  --plum:#2B1622; --plum-2:#43263A; --blush:#F3DCD4; --blush-2:#EBC7BB; --rose:#B7705F;
  --bg:#F8F2EF; --card:#FFFFFF; --ink:#2B1622; --muted:#735F68; --line:rgba(43,22,34,.12);
  --ok:#2F7D5B; --warn:#B7791F; --bad:#B23B3B;
  --serif:'Gloock', Georgia, serif; --sans:'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){ --bg:#1A0E15; --card:#2B1622; --ink:#F6E9E4; --muted:#CDB3BC; --line:rgba(246,233,228,.13); }
}
:root[data-theme="dark"]{ --bg:#1A0E15; --card:#2B1622; --ink:#F6E9E4; --muted:#CDB3BC; --line:rgba(246,233,228,.13); }
*,*::before,*::after{box-sizing:inherit}
html,body{margin:0}
body{background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased; min-height:100vh}
h1,h2,h3{font-family:var(--serif); font-weight:400; margin:0; line-height:1.15}
a{color:inherit}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--rose); outline-offset:2px}
[hidden]{display:none !important}

/* Login */
.login{min-height:100vh; display:grid; place-items:center; padding:24px; background:var(--plum)}
.login-box{background:var(--card); width:min(400px,100%); padding:36px 30px; border-radius:16px}
.login-box .logo{display:flex; align-items:center; gap:10px; margin-bottom:24px}
.login-box .logo svg{width:28px; height:28px}
.login-box h1{font-size:28px; margin-bottom:6px}
.login-box p{color:var(--muted); margin:0 0 22px}
.link{background:none; border:0; padding:0; color:var(--rose); cursor:pointer; text-decoration:underline; font-size:14px}

/* Formulários */
.f{display:flex; flex-direction:column; gap:5px; font-size:13px; font-weight:600; color:var(--muted); margin-bottom:12px}
.f input,.f select,.f textarea{font-size:15px; font-weight:400; color:var(--ink); padding:11px 12px; border-radius:8px; border:1px solid var(--line); background:var(--bg); width:100%}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:0 14px}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:0 14px}
.msg{min-height:1.3em; font-size:14px; margin:6px 0}
.msg.err{color:var(--bad)} .msg.ok{color:var(--ok)}

/* Botões */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 18px; border-radius:999px; border:1px solid transparent; font-weight:600; font-size:14px; cursor:pointer; text-decoration:none; background:var(--plum); color:var(--blush)}
.btn:hover{background:var(--plum-2)}
.btn:disabled{opacity:.55; cursor:default}
.btn.full{width:100%; padding:13px}
.btn.light{background:transparent; color:var(--ink); border-color:var(--line)}
.btn.light:hover{background:var(--line)}
.btn.sm{padding:6px 12px; font-size:13px}
.btn.danger{background:transparent; color:var(--bad); border-color:color-mix(in srgb, var(--bad) 40%, transparent)}

/* Layout do app */
.app{display:grid; grid-template-columns:240px 1fr; min-height:100vh}
.side{background:var(--plum); color:var(--blush); padding:22px 16px; display:flex; flex-direction:column; gap:4px; position:sticky; top:0; height:100vh}
.side .brand{display:flex; gap:10px; align-items:center; padding:0 8px 22px}
.side .brand b{font-family:var(--serif); font-weight:400; font-size:20px; color:#fff; display:block; line-height:1.1}
.side .brand small{font-size:12px; opacity:.7}
.side .brand svg{width:24px; height:24px; flex:none}
.side nav{display:flex; flex-direction:column; gap:2px}
.side nav button{background:none; border:0; text-align:left; color:var(--blush); padding:10px 12px; border-radius:8px; cursor:pointer; opacity:.8; font-size:15px}
.side nav button:hover{opacity:1; background:rgba(243,220,212,.08)}
.side nav button.on{opacity:1; background:rgba(243,220,212,.15); color:#fff}
.side .who{margin-top:auto; font-size:13px; opacity:.8; padding:12px 8px 0; border-top:1px solid rgba(243,220,212,.15)}
.side .who button{margin-top:8px; background:none; border:1px solid rgba(243,220,212,.3); color:var(--blush); border-radius:999px; padding:6px 12px; cursor:pointer; font-size:13px}
.main{padding:30px clamp(16px,3vw,40px) 60px; min-width:0}
.top{display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:24px}
.top h2{font-size:32px}
.top p{margin:4px 0 0; color:var(--muted)}
.mtop{display:none}

/* Cards e tabelas */
.card{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:20px}
.card + .card{margin-top:16px}
.card h3{font-size:21px; margin-bottom:12px}
.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:18px}
.kpi{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:18px}
.kpi small{color:var(--muted); font-size:13px}
.kpi b{display:block; font-family:var(--serif); font-weight:400; font-size:28px; margin-top:4px}
.two{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.tbl{overflow-x:auto}
table{width:100%; border-collapse:collapse; font-size:14px}
th{text-align:left; font-weight:600; color:var(--muted); font-size:12.5px; padding:10px 10px; border-bottom:1px solid var(--line); white-space:nowrap}
td{padding:11px 10px; border-bottom:1px solid var(--line); vertical-align:middle}
tr:last-child td{border-bottom:0}
td .acts{display:flex; gap:6px; flex-wrap:wrap}
.pill{display:inline-block; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:600; background:var(--line)}
.pill.ok{background:color-mix(in srgb,var(--ok) 16%,transparent); color:var(--ok)}
.pill.warn{background:color-mix(in srgb,var(--warn) 18%,transparent); color:var(--warn)}
.pill.bad{background:color-mix(in srgb,var(--bad) 15%,transparent); color:var(--bad)}
.empty{color:var(--muted); padding:22px 4px; text-align:center}
.list-item{display:flex; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid var(--line)}
.list-item:last-child{border-bottom:0}
.list-item small{color:var(--muted); display:block}
.toolbar{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:14px}
.toolbar input,.toolbar select{padding:9px 12px; border-radius:8px; border:1px solid var(--line); background:var(--card)}

/* Modal */
.modal{position:fixed; inset:0; background:rgba(26,14,21,.55); display:grid; place-items:center; padding:20px; z-index:50}
.modal-box{background:var(--card); border-radius:14px; width:min(640px,100%); max-height:90vh; overflow:auto; padding:26px}
.modal-box.wide{width:min(860px,100%)}
.modal-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; gap:12px}
.modal-head h3{font-size:24px}
.x{background:none; border:0; font-size:26px; cursor:pointer; color:var(--muted); line-height:1}
.tabs{display:flex; gap:6px; border-bottom:1px solid var(--line); margin-bottom:16px}
.tabs button{background:none; border:0; padding:10px 12px; cursor:pointer; color:var(--muted); border-bottom:2px solid transparent; margin-bottom:-1px}
.tabs button.on{color:var(--ink); border-color:var(--rose)}

/* Toast */
.toast{position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); background:var(--plum); color:var(--blush); padding:12px 20px; border-radius:999px; z-index:60; font-size:14px; box-shadow:0 12px 30px -12px rgba(0,0,0,.5)}

/* Progresso */
.bar{height:8px; background:var(--line); border-radius:9px; overflow:hidden}
.bar i{display:block; height:100%; background:var(--rose); border-radius:9px}

/* Responsivo */
@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .side{position:fixed; inset:0 auto 0 0; width:260px; z-index:40; transform:translateX(-100%); transition:transform .25s; padding-top:calc(22px + env(safe-area-inset-top,0px))}
  .side.open{transform:none}
  .mtop{display:flex; position:sticky; top:0; z-index:30; background:var(--plum); color:var(--blush); padding:12px 16px; padding-top:calc(12px + env(safe-area-inset-top,0px)); align-items:center; justify-content:space-between}
  .mtop b{font-family:var(--serif); font-weight:400; font-size:19px; color:#fff}
  .mtop button{background:none; border:1px solid rgba(243,220,212,.35); color:var(--blush); border-radius:999px; padding:6px 14px; cursor:pointer}
  .kpis{grid-template-columns:1fr 1fr}
  .two,.grid3{grid-template-columns:1fr}
}
@media (max-width:520px){ .grid2{grid-template-columns:1fr} .kpis{grid-template-columns:1fr 1fr} .kpi b{font-size:22px} }