@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css');
:root{
 --bg:#050816;
 --sidebar:#0a1024;
 --card:#0e1733;
 --card2:#0b1330;
 --text:#e8f1ff;
 --muted:#9fb3c8;
 --primary:#2dd4bf;
 --blue:#38bdf8;
 --border:rgba(255,255,255,.08);
}
[data-theme="light"]{
 --bg:#f4f7fb;--sidebar:#ffffff;--card:#ffffff;--card2:#ffffff;--text:#0f172a;--muted:#64748b;--border:rgba(0,0,0,.08);
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,Arial;background:linear-gradient(180deg,#050816,#050816);color:var(--text)}
.app{display:flex;min-height:100vh}
.sidebar{width:260px;background:linear-gradient(180deg,#070c1f,#050816);padding:18px;display:flex;flex-direction:column;border-right:1px solid var(--border)}
.brand{font-weight:800;margin-bottom:18px;font-size:18px;display:flex;align-items:center;gap:10px}
.nav-title{font-size:11px;color:#6b7aa8;margin:12px 8px}
.nav a{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:14px;color:var(--muted);text-decoration:none;margin-bottom:6px;font-weight:600}
.nav a i{width:20px;text-align:center}
.nav a.active{background:linear-gradient(90deg,rgba(56,189,248,.15),rgba(45,212,191,.15));color:#fff;border:1px solid rgba(56,189,248,.25)}
.nav a:hover{background:rgba(255,255,255,.05);color:#fff}
.main{flex:1;padding:24px}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.badge{padding:6px 12px;border-radius:999px;background:rgba(45,212,191,.15);color:#2dd4bf;font-size:12px;font-weight:700;border:1px solid rgba(45,212,191,.3)}
.grid{display:grid;grid-template-columns:2.2fr 1fr;gap:20px}
.card{
 background:linear-gradient(180deg,#0b1330,#0a1028);
 border-radius:20px;
 padding:20px;
 border:1px solid var(--border);
 box-shadow:0 10px 40px rgba(0,0,0,.25);
}
.card h2{margin:0}

.card h3 {
    margin-bottom: 20px;
}

.kpi{font-size:32px;color:var(--primary);font-weight:800}
.muted{color:var(--muted);font-size:12px}
.list .item{
 display:flex;justify-content:space-between;align-items:center;
 background:linear-gradient(180deg,#0c1430,#0a1028);
 border-radius:14px;padding:14px;margin-bottom:10px;
 border:1px solid rgba(255,255,255,.05)
}

.tag{padding:4px 10px;border-radius:999px;font-size:11px;font-weight:700}
.tag.ok{background:rgba(34,197,94,.15);color:#22c55e;border:1px solid rgba(34,197,94,.4)}
.tag.soon{background:rgba(59,130,246,.15);color:#60a5fa;border:1px solid rgba(59,130,246,.4)}
.footer{margin-top:auto}
button{border:0;border-radius:12px;padding:10px;cursor:pointer}

.section-title{font-weight:800;margin-bottom:10px}
.card-soft{
 background:linear-gradient(180deg,#0b1330,#0a1028);
 border-radius:18px;padding:16px;border:1px solid var(--border)
}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.stat-box{background:#060b1c;border-radius:14px;padding:12px;border:1px solid rgba(255,255,255,.05)}
.stat-label{font-size:10px;color:#7c8bbd;text-transform:uppercase;font-weight:700}
.stat-value{font-weight:800}

/* AGENDAMENTOS */

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

.appointment-card{
 background:linear-gradient(180deg,#0c1430,#0a1028);
 border-radius:20px;
 padding:20px;
 border:1px solid rgba(255,255,255,.08);
 box-shadow:0 10px 40px rgba(0,0,0,.25);
 display:flex;
 flex-direction:column;
 min-height:190px;
}

.appointment-header{
 display:flex;
 justify-content:space-between;
 align-items:flex-start;
 margin-bottom:10px;
}

.appointment-icon{
 width:44px;
 height:44px;
 border-radius:12px;
 background:rgba(56,189,248,.1);
 display:flex;
 align-items:center;
 justify-content:center;
 color:#38bdf8;
 font-size:18px;
 border:1px solid rgba(56,189,248,.25);
}

.appointment-status{
 padding:6px 12px;
 border-radius:999px;
 font-size:11px;
 font-weight:800;
}

.appointment-status.ok{
 background:rgba(34,197,94,.15);
 color:#22c55e;
 border:1px solid rgba(34,197,94,.4);
}

.appointment-status.soon{
 background:rgba(59,130,246,.15);
 color:#60a5fa;
 border:1px solid rgba(59,130,246,.4);
}

.appointment-title{
 font-weight:800;
 margin-bottom:8px;
}

.appointment-line{
 display:flex;
 align-items:center;
 gap:8px;
 font-size:12px;
 color:#9fb3c8;
 margin-bottom:4px;
}

.appointment-line i{
 color:#2dd4bf;
}

.appointment-footer{
 display:flex;
 justify-content:space-between;
 align-items:center;
 border-top:1px solid rgba(255,255,255,.06);
 padding-top:10px;
 margin-top:10px;
 font-size:11px;
 color:#7c8bbd;
}

.appointment-action{
 color:#7c8bbd;
 text-decoration:none;
}

.appointment-action:hover{
 color:#fff;
}

/* NOVO AGENDAMENTO */

.appointment-new{
 border:1px dashed rgba(255,255,255,.15);
 border-radius:20px;
 min-height:190px;
 display:flex;
 flex-direction:column;
 align-items:center;
 justify-content:center;
 color:#7c8bbd;
 text-decoration:none;
 background:rgba(255,255,255,.02);
 transition:.2s;
}

.appointment-new:hover{
 border-color:rgba(45,212,191,.5);
 color:#2dd4bf;
 background:rgba(45,212,191,.05);
}

.appointment-new-plus{
 width:48px;
 height:48px;
 border-radius:50%;
 background:rgba(255,255,255,.08);
 display:flex;
 align-items:center;
 justify-content:center;
 font-size:24px;
 margin-bottom:10px;
 transition:.2s;
}

.appointment-new:hover .appointment-new-plus{
 background:rgba(45,212,191,.2);
 color:#2dd4bf;
}

/* HISTÓRICO DE DOSES */

.dose-list{
 display:flex;
 flex-direction:column;
 gap:10px;
 max-height:420px;
 overflow:auto;
 padding-right:4px;
}

.dose-item{
 display:flex;
 justify-content:space-between;
 align-items:center;
 background:linear-gradient(180deg,#0c1430,#0a1028);
 border-radius:14px;
 padding:14px 16px;
 border:1px solid rgba(255,255,255,.05);
}

.dose-left{
 display:flex;
 flex-direction:column;
 gap:4px;
}

.dose-date{
 font-weight:700;
}

.dose-sub{
 font-size:11px;
 color:#7c8bbd;
}

.dose-right{
 color:#2dd4bf;
 font-weight:800;
}

/* Porcentagem Composição Corporal */
.fat-progress{
 --size:120px;
 --thickness:10px;
 width:var(--size);
 height:var(--size);
 border-radius:50%;
 background:
   conic-gradient(
     #2dd4bf calc(var(--p) * 1%),
     rgba(45,212,191,.18) 0
   );
 display:flex;
 align-items:center;
 justify-content:center;
}

.fat-progress-inner{
 width:calc(100% - var(--thickness)*2);
 height:calc(100% - var(--thickness)*2);
 border-radius:50%;
 background:linear-gradient(180deg,#0b1330,#0a1028);
 display:flex;
 align-items:center;
 justify-content:center;
 font-weight:800;
 color:#2dd4bf;
 font-size:20px;
}

/* Canvas */
#weightChart{
 max-height:300px !important;
}

/* Toggle Dark / Light */

.topbar-actions{
 display:flex;
 align-items:center;
 gap:12px;
}

.theme-toggle{
 width:38px;
 height:38px;
 border-radius:50%;
 border:1px solid var(--border);
 background:linear-gradient(180deg,#0b1330,#0a1028);
 color:var(--text);
 display:flex;
 align-items:center;
 justify-content:center;
 cursor:pointer;
 transition:.3s;
}

.theme-toggle:hover{
 transform:rotate(15deg) scale(1.05);
 border-color:rgba(45,212,191,.5);
 color:#2dd4bf;
}

/* Ícone muda conforme tema */
[data-theme="light"] .theme-toggle i{
 color:#f59e0b;
}

/* BOTÃO SAIR */

.logout-btn{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 16px;
  color:#cbd5f5;
  text-decoration:none;
  font-weight:700;
  font-size:14px;

  transition:all .25s ease;
}

.logout-btn i{
  font-size:16px;
}

/* Hover vermelho igual imagem */
.logout-btn:hover{
  color:#ef4444;
}

.logout-btn:hover i{
  color:#ef4444;
}