:root{
  --bg:#F4F7FC;
  --card:#ffffff;
  --text:#0F172A;
  --muted:#64748B;
  --line:#E7EEF7;

  --primary:#1E5EFF;
  --primary2:#164AE2;

  --nav:#173B6C;
  --nav2:#1D4A86;

  --shadow: 0 18px 45px rgba(15,23,42,.08);
  --shadow2: 0 10px 25px rgba(15,23,42,.06);

  --r-lg:18px;
  --r-md:14px;
  --r-sm:12px;
  --sidebar-w: 290px;

  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:
    radial-gradient(900px 500px at 15% -10%, rgba(30,94,255,.12), transparent 55%),
    radial-gradient(900px 500px at 85% -15%, rgba(26,162,255,.10), transparent 60%),
    var(--bg);
}

a{color:inherit;text-decoration:none}
code{background:rgba(2,6,23,.06); padding:2px 6px; border-radius:8px}

.layout{
  display:grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height:100vh;
}

/* Sidebar */
.sidebar{
  position:sticky; top:0; height:100vh;
  padding:18px 14px;
  background: linear-gradient(180deg, var(--nav), var(--nav2));
  color:#EAF2FF;
  border-right: 1px solid rgba(255,255,255,.08);
}

.brand{display:flex; gap:12px; align-items:center; padding:10px}
.brand-mark{
  width:44px;height:44px;border-radius:16px;
  display:grid;place-items:center;
  background: rgba(255,255,255,.14);
  box-shadow: 0 12px 22px rgba(0,0,0,.18);
}
.brand-title{font-weight:900; letter-spacing:-.02em}
.brand-sub{font-size:12px; opacity:.82; margin-top:3px}

.clinic-switch{
  margin:12px 10px 14px;
  padding:12px;
  border-radius: var(--r-lg);
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 14px 28px rgba(0,0,0,.18);
}
.clinic-label{display:block;font-size:12px;opacity:.88;margin-bottom:8px}
.clinic-select{
  width:100%;
  padding:10px 12px;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.12);
  color:#fff;
  outline:none;
  font-weight:800;
}
.clinic-select option{color:#0F172A}
.clinic-hint{margin-top:8px;font-size:12px;opacity:.82}

.nav{display:flex;flex-direction:column;gap:6px;padding:0 10px}
.nav-link{
  display:flex; gap:10px; align-items:center;
  padding:10px 10px;
  border-radius: 14px;
  border:1px solid transparent;
  color:#EAF2FF;
  transition: background .12s ease, transform .08s ease;
}
.nav-link:hover{background: rgba(255,255,255,.10)}
.nav-link.is-active{
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.18);
}
.nav-ico{width:28px;height:28px;display:grid;place-items:center}
.nav-txt{font-weight:900;font-size:14px}

.sidebar-footer{
  position:absolute; left:14px; right:14px; bottom:12px;
  padding:10px;
}
.muted{font-size:12px;opacity:.82;margin-top:10px;padding-left:10px}

/* Main */
.main{padding:22px 18px 96px}
.container{max-width:1180px;margin:0 auto}

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:18px;
}
.top-left{display:flex; flex-direction:column; gap:8px}
.chip{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  border:1px solid var(--line);
  box-shadow: var(--shadow2);
  font-size:12px; font-weight:900; color:#0B1220;
}
.chip .dot{width:8px;height:8px;border-radius:999px;background:var(--primary)}
.chip .sep{opacity:.55}

.title{margin:0;font-size:28px;font-weight:950;letter-spacing:-.03em}
.subtitle{margin:0;color:var(--muted);font-weight:650}

.top-right{display:flex;align-items:center;gap:10px}
.icon-btn{
  width:42px;height:42px;border-radius:16px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.85);
  box-shadow: var(--shadow2);
  display:grid; place-items:center;
  cursor:pointer; position:relative;
}
.icon-btn .badge{
  position:absolute; top:9px; right:10px;
  width:9px;height:9px;border-radius:99px;
  background:#EF4444;
  border:2px solid #fff;
}
.avatar{
  width:42px;height:42px;border-radius:999px;
  border:1px solid var(--line);
  background: linear-gradient(135deg, rgba(30,94,255,.25), rgba(26,162,255,.18));
  box-shadow: var(--shadow2);
}

.grid{display:grid;grid-template-columns: 1.2fr .8fr; gap:14px}
.card{
  background: rgba(255,255,255,.86);
  border:1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding:16px;
}
.card-h{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.card h3{margin:0;font-size:14px; letter-spacing:-.01em}
.mt8{margin-top:8px}
.m0{margin:0}

.pill{
  display:inline-flex; align-items:center;
  padding:6px 10px; border-radius:999px;
  background: rgba(26,162,255,.14);
  border:1px solid rgba(26,162,255,.22);
  color:#075985;
  font-weight:950; font-size:12px;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 12px;
  border-radius: 14px;
  font-weight:950;
  cursor:pointer;
  border:1px solid var(--line);
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow2);
  transition: transform .08s ease;
}
.btn:hover{transform: translateY(-1px)}
.btn-primary{
  background: linear-gradient(135deg, var(--primary), var(--primary2));
  color:#fff; border-color: rgba(30,94,255,.25);
}
.btn-soft{background: rgba(255,255,255,.75)}

.next-card{
  display:flex; gap:12px; align-items:center;
  padding:14px;
  border-radius: var(--r-lg);
  border:1px dashed rgba(30,94,255,.25);
  background: rgba(30,94,255,.06);
  margin-top:12px;
}
.next-ico{
  width:38px;height:38px;border-radius:16px;
  display:grid;place-items:center;
  background: rgba(255,255,255,.88);
  border:1px solid rgba(30,94,255,.20);
  box-shadow: var(--shadow2);
}
.next-title{font-weight:950}
.next-desc{margin-top:4px;color:var(--muted);font-weight:700;font-size:13px}

.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}

.mini-grid{
  margin-top:14px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
.mini{
  border:1px solid var(--line);
  background: rgba(255,255,255,.88);
  border-radius: 16px;
  padding:12px;
  box-shadow: var(--shadow2);
}
.mini-k{font-size:12px;color:var(--muted);font-weight:850}
.mini-v{margin-top:4px;font-weight:950}

.kpis{display:grid;grid-template-columns: 1fr 1fr; gap:14px; margin-top:12px}
.kpi{
  padding:14px;
  border-radius: var(--r-lg);
  border:1px solid var(--line);
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow2);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.kpi-n{font-size:28px;font-weight:950;letter-spacing:-.03em}
.kpi-l{font-size:12px;color:var(--muted);font-weight:900;margin-top:2px}
.kpi-ico{
  width:40px;height:40px;border-radius:16px;
  display:grid;place-items:center;
  border:1px solid var(--line);
  background: rgba(30,94,255,.06);
  color: var(--primary);
}

.mt16{margin-top:16px}

.list{margin:10px 0 0; padding-left:18px; color:#0B1220}
.list li{margin:8px 0; line-height:1.5}

/* Auth */
.auth-body{display:grid; place-items:center; min-height:100vh}
.auth-wrap{width:min(520px, 92vw)}
.auth-card{
  background: rgba(255,255,255,.88);
  border:1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 18px;
}
.auth-brand{display:flex; gap:12px; align-items:center}
.alert{
  margin-top:12px;
  padding:10px 12px;
  border-radius: 14px;
  border:1px solid rgba(239,68,68,.25);
  background: rgba(239,68,68,.08);
  color:#991B1B;
  font-weight:850;
}
.auth-title{margin:14px 0 0; font-size:24px; font-weight:950}
.auth-sub{margin:8px 0 0; color:var(--muted); font-weight:700}
.auth-form{margin-top:14px; display:grid; gap:12px}
.field span{display:block; font-size:12px; color:var(--muted); font-weight:900; margin-bottom:6px}
.field input{
  width:100%;
  padding:12px 12px;
  border-radius: 14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.95);
  outline:none;
  font-weight:800;
}
.field input:focus{border-color: rgba(30,94,255,.35); box-shadow: 0 0 0 4px rgba(30,94,255,.10)}
.hint{margin-top:10px; color:var(--muted); font-size:12px; font-weight:700}


/* ===========================
   Bootnav + Drawer (Mais)
   =========================== */

/* desktop: nunca aparece */
.bottom-nav{ display:none; }
.mnav-overlay{ display:none; }
.mnav-drawer{ display:none; }

@media (max-width: 980px){
  /* layout vira 1 coluna */
  .layout{grid-template-columns: 1fr}
  .sidebar{display:none}
  .grid{grid-template-columns: 1fr}
  .main{padding-bottom: 112px}

  /* bottom nav */
  .bottom-nav{
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 9000;
    display: flex;
    gap: 6px;
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.86);
    border: 1px solid var(--line);
    border-radius: 22px;
    box-shadow: var(--shadow);
    backdrop-filter: blur(10px);
  }
  .bottom-link{
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 6px;
    border-radius: 16px;
    border: 1px solid transparent;
    background: transparent;
    text-decoration: none;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
  }
  .bottom-btn{
    appearance: none;
    border: 0;
    cursor: pointer;
    font: inherit;
  }
  .bottom-link.is-active{
    background: rgba(30,94,255,.10);
    border-color: rgba(30,94,255,.18);
  }
  .bottom-ico{ color: var(--primary); display:grid; place-items:center; }
  .bottom-txt{ font-size:12px; font-weight:950; color:#1F2937; }

  /* overlay */
  .mnav-overlay{
    display:block;
    position: fixed;
    inset: 0;
    z-index: 9500;
    background: rgba(15,23,42,.45);
    backdrop-filter: blur(10px);
  }
  .mnav-overlay[hidden]{ display:none; }

  /* ✅ drawer lateral REAL (não modal) */
  .mnav-drawer{
    display:flex;
    flex-direction: column;

    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;

    width: min(92vw, 420px);
    z-index: 9600;

    background: rgba(255,255,255,.98);
    border-left: 1px solid var(--line);

    /* arredonda só o lado interno */
    border-radius: 22px 0 0 22px;

    box-shadow: -18px 0 45px rgba(15,23,42,.18);
    overflow: hidden;
  }
  .mnav-drawer[hidden]{ display:none; }

  .mnav-top{
    flex: 0 0 auto;
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 14px 10px;
    border-bottom: 1px solid var(--line);
    background: rgba(255,255,255,.96);
  }

  .mnav-brand{ display:flex; align-items:center; gap:10px; min-width:0; }
  .mnav-mark{
    width: 36px; height: 36px;
    display:grid; place-items:center;
    border-radius: 12px;
    background: rgba(0,0,0,.05);
  }
  .mnav-title{ font-weight: 950; letter-spacing: -.02em; }
  .mnav-sub{ font-size: 12px; opacity: .7; }

  .mnav-close{
    width: 40px; height: 40px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.92);
    cursor: pointer;
  }

  /* ✅ scroll interno */
  .mnav-body{
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px 14px 14px;
  }

  .mnav-footer{
    flex: 0 0 auto;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: rgba(255,255,255,.96);
    font-size: 12px;
    opacity: .75;
  }

  .mnav-clinic{
    padding: 8px 0 12px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 12px;
  }
  .mnav-clinic-label{ display:block; font-size:12px; opacity:.75; margin-bottom:6px; }
  .mnav-clinic-select{
    width:100%;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.95);
    outline: none;
    font-weight: 900;
  }
  .mnav-clinic-hint{ margin-top:6px; font-size:12px; opacity:.7; }

  .mnav-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 4px 0 14px;
  }
  .mnav-card{
    display:flex; align-items:center; gap:10px;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.92);
    box-shadow: var(--shadow2);
    text-decoration:none;
    color: inherit;
    min-height: 60px;
  }
  .mnav-card-ico{
    width: 34px; height: 34px;
    border-radius: 12px;
    display:grid; place-items:center;
    background: rgba(0,0,0,.05);
    flex: 0 0 auto;
  }
  .mnav-card-txt{
    font-weight: 950;
    font-size: 14px;
    line-height: 1.15;
  }
  .mnav-card.is-active{
    outline: 2px solid rgba(30,94,255,.20);
  }

  .mnav-sections{
    border-top: 1px solid var(--line);
    padding-top: 12px;
  }
  .mnav-row{
    display:flex; align-items:center; gap:10px;
    padding: 12px 12px;
    border-radius: 14px;
    text-decoration:none;
    color: inherit;
  }
  .mnav-row:hover{ background: rgba(0,0,0,.04); }
  .mnav-row-ico{
    width: 34px; height: 34px;
    border-radius: 12px;
    display:grid; place-items:center;
    background: rgba(0,0,0,.05);
    flex: 0 0 auto;
  }
  .mnav-row-end{ margin-left:auto; opacity:.55; display:grid; place-items:center; }
  .mnav-row.is-danger{ color: rgb(185,28,28); }
  .mnav-row.is-danger .mnav-row-ico{ background: rgba(220,38,38,.10); }
}