:root {
  --brand:#0b6b61;
  --brand-dark:#084c45;
  --brand-soft:#e7f4f1;
  --accent:#f59e0b;
  --danger:#dc2626;
  --danger-soft:#fee2e2;
  --warning:#b45309;
  --warning-soft:#fff7ed;
  --success:#027a48;
  --success-soft:#ecfdf3;
  --neutral-soft:#eef2ff;
  --text:#0f172a;
  --muted:#667085;
  --border:#e5e7eb;
  --bg:#f6f8fb;
  --card:#ffffff;
  --sidebar:#ffffff;
  --shadow:0 10px 30px rgba(15,23,42,.06);
  --radius:18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Roboto',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--text);
  background:var(--bg);
}
a{color:inherit}
img{max-width:100%}
button,input,select,textarea{font:inherit}
input,select,textarea{
  width:100%;
  border:1px solid var(--border);
  background:#fff;
  color:var(--text);
  border-radius:12px;
  padding:11px 14px;
  outline:none;
}
input:focus,select:focus,textarea:focus{border-color:rgba(11,107,97,.4); box-shadow:0 0 0 4px rgba(11,107,97,.08)}
textarea{min-height:120px; resize:vertical}
label{display:block; font-size:13px; font-weight:500; color:#475467; margin:0 0 8px}
small, .muted{color:var(--muted)}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--brand); color:#fff; border:1px solid var(--brand);
  border-radius:12px; padding:11px 16px; text-decoration:none; cursor:pointer;
  font-weight:600; transition:.15s ease;
}
.btn:hover{transform:translateY(-1px); box-shadow:0 8px 20px rgba(11,107,97,.16)}
.btn--ghost{background:#fff;color:var(--text);border-color:var(--border)}
.btn--ghost:hover{box-shadow:none;background:#f8fafc}
.btn--danger{background:#fff;color:#b42318;border-color:#fecaca}
.btn--danger:hover{background:#fff5f5;box-shadow:none}
.btn--small{padding:8px 12px;border-radius:10px;font-size:14px}
.btn--block{width:100%}
.btn--pill{border-radius:999px}

.alert{padding:14px 16px; border-radius:14px; border:1px solid transparent; margin-bottom:18px}
.alert--success{background:var(--success-soft); color:var(--success); border-color:#a6f4c5}
.alert--info{background:#eff6ff; color:#1d4ed8; border-color:#bfdbfe}
.alert--danger{background:#fef2f2; color:#b42318; border-color:#fecaca}
.alert--warning{background:#fffbeb; color:#b45309; border-color:#fde68a}

.app-shell{display:flex; min-height:100vh}
.sidebar{
  width:232px; background:var(--sidebar); border-right:1px solid var(--border);
  padding:22px 14px 18px; display:flex; flex-direction:column; gap:18px;
}
.sidebar__logo{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  padding:6px 6px 16px;
  border-bottom:1px solid #edf2f7;
}
.sidebar__logo img{width:145px; height:auto; display:block}
.sidebar__logo > div{width:100%}
.sidebar__title{font-size:18px; font-weight:700; line-height:1.2; margin:0}
.sidebar__subtitle{margin:5px 0 0; color:var(--muted); font-size:12px; line-height:1.4; max-width:175px}
.sidebar__section{padding:0 8px}
.sidebar__section-title{font-size:11px; font-weight:700; letter-spacing:.12em; color:#98a2b3; text-transform:uppercase; margin:0 0 10px}
.sidebar__nav{display:flex; flex-direction:column; gap:4px}
.sidebar__link{display:flex; align-items:center; gap:10px; text-decoration:none; padding:11px 12px; border-radius:12px; color:#0f172a; font-weight:500}
.sidebar__link:hover{background:#f3f8f7}
.sidebar__link.is-active{background:var(--brand-soft); color:var(--brand-dark)}
.sidebar__icon{width:18px; text-align:center; opacity:.86}
.sidebar__footer{margin-top:auto; border-top:1px solid #edf2f7; padding-top:16px}
.sidebar__user{display:flex; align-items:center; gap:12px}
.sidebar__avatar{width:42px; height:42px; border-radius:999px; background:var(--brand); color:#fff; font-weight:700; display:grid; place-items:center}
.sidebar__user-name{font-weight:700}
.sidebar__user-role{color:var(--muted); font-size:13px}

.main-area{flex:1; min-width:0}
.main-header{
  background:#fff; border-bottom:1px solid var(--border); padding:28px 30px 22px;
  display:flex; justify-content:space-between; gap:20px; align-items:flex-start;
}
.main-header__title h1{margin:0; font-size:34px; line-height:1.1}
.main-header__title p{margin:8px 0 0; color:var(--muted); font-size:15px}
.main-header__actions{display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:flex-end}
.main-date{padding:10px 12px; border:1px solid var(--border); border-radius:12px; color:var(--muted); background:#fff; font-weight:500}
.main-content{padding:28px 30px 36px}

.grid{display:grid; gap:22px}
.grid-2{grid-template-columns:1.15fr .85fr}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-sidebar{grid-template-columns:380px minmax(0,1fr)}
.stack{display:flex; flex-direction:column; gap:22px}

.card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:22px}
.card__header{display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:18px}
.card__title{margin:0; font-size:17px; font-weight:700}
.card__subtitle{margin:6px 0 0; color:var(--muted); font-size:14px}
.card--compact{padding:18px}

.stat-card{display:flex; align-items:center; gap:14px; min-height:120px}
.stat-card__icon{width:46px; height:46px; border-radius:14px; display:grid; place-items:center; background:var(--brand-soft); color:var(--brand); font-size:22px}
.stat-card--warning .stat-card__icon{background:#fff7ed; color:#c2410c}
.stat-card--danger .stat-card__icon{background:#fef2f2; color:#dc2626}
.stat-card__label{color:#667085; font-size:14px; margin:0 0 6px}
.stat-card__value{font-size:42px; font-weight:700; line-height:1}
.stat-card__meta{margin-top:6px; color:#98a2b3; font-size:13px}

.table-wrap{overflow:auto}
.table{width:100%; border-collapse:separate; border-spacing:0}
.table th,.table td{padding:15px 14px; border-bottom:1px solid #edf2f7; vertical-align:top; text-align:left}
.table thead th{font-size:13px; font-weight:700; color:#344054; background:#f8fafc}
.table tbody tr:hover{background:#fcfcfd}
.table tbody tr:last-child td{border-bottom:none}
.table--clean tbody tr:hover{background:transparent}

.badge{display:inline-flex; align-items:center; justify-content:center; padding:5px 10px; border-radius:999px; font-size:12px; font-weight:700; line-height:1}
.badge--success{background:var(--success-soft); color:var(--success)}
.badge--warning{background:#fff7ed; color:#c2410c}
.badge--danger{background:#fef2f2; color:#b42318}
.badge--neutral{background:#eef2ff; color:#475467}
.badge--brand{background:var(--brand-soft); color:var(--brand-dark)}

.listing{display:flex; flex-direction:column; gap:0}
.listing__item{display:flex; gap:16px; justify-content:space-between; align-items:flex-start; padding:16px 0; border-bottom:1px solid #edf2f7}
.listing__item:last-child{border-bottom:none; padding-bottom:0}
.listing__item:first-child{padding-top:0}
.listing__title{font-weight:700; margin:0 0 6px}
.listing__meta{color:var(--muted); font-size:13px; margin:0}
.listing__side{text-align:right; min-width:120px}

.form-grid{display:grid; gap:16px}
.form-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.form-grid--3{grid-template-columns:110px 1fr 1fr}
.inline-actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.toolbar{display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.tabs{display:flex; gap:8px; flex-wrap:wrap}
.tabs a{padding:10px 14px; border-radius:12px; border:1px solid var(--border); text-decoration:none; color:var(--text); background:#fff; font-weight:600}
.tabs a.active{background:var(--brand); color:#fff; border-color:var(--brand)}
.searchbar{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.searchbar input,.searchbar select{max-width:320px}

.empty-state{padding:28px 20px; text-align:center; color:var(--muted)}
.footer-note{color:#98a2b3; font-size:14px}
.panel-note{padding:14px 16px; border-radius:14px; background:#f8fafc; color:#475467; border:1px dashed #d0d5dd; font-size:14px}
.code-lite{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; background:#f8fafc; border-radius:10px; padding:2px 6px; font-size:12px}


/* Login dividido no estilo do sistema de estoque */
.login-page{min-height:100vh;background:#f5f7fb}
.login-split{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr}
.login-hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#0c7a70 0%,#0a6b62 100%);color:#fff;display:flex;align-items:center}
.login-hero::before,.login-hero::after{content:"";position:absolute;border-radius:999px;border:56px solid rgba(255,255,255,.10);pointer-events:none}
.login-hero::before{width:420px;height:420px;top:-170px;right:-120px}
.login-hero::after{width:360px;height:360px;left:-160px;bottom:-160px}
.login-hero__inner{position:relative;z-index:1;width:min(560px,100%);margin-left:clamp(32px,6vw,56px);margin-right:24px}
.login-hero__logo{width:min(290px,72%);height:auto;display:block;margin-bottom:58px;filter:brightness(0) invert(1)}
.login-hero__copy h1{margin:0 0 18px;font-size:clamp(36px,4.2vw,58px);line-height:1.02;font-weight:800;letter-spacing:-.03em}
.login-hero__copy p{max-width:520px;margin:0;font-size:18px;line-height:1.6;color:rgba(255,255,255,.88)}
.login-panel{background:#fff;display:flex;align-items:center;justify-content:center;padding:32px}
.login-panel__inner{width:min(370px,100%)}
.login-kicker{margin-bottom:14px;color:var(--brand);font-size:12px;font-weight:800;letter-spacing:.18em}
.login-panel h2{margin:0 0 10px;font-size:clamp(34px,3vw,48px);line-height:1.08}
.login-panel__text{margin:0 0 24px;color:var(--muted);font-size:17px}
.login-form label{margin-top:16px;margin-bottom:8px;font-size:14px;font-weight:700;color:var(--text)}
.login-form input{height:52px;padding:14px 16px;border-radius:12px;background:#eef3ff;border:1px solid #dbe3f2}
.login-form input:focus{outline:none;border-color:#9fc4bf;box-shadow:0 0 0 4px rgba(11,107,97,.10)}
.login-submit{width:100%;margin-top:16px;height:52px;border-radius:12px;font-size:18px;font-weight:700}
.login-foot{margin-top:34px;color:#98a2b3;font-size:12px}
@media(max-width:980px){.login-split{grid-template-columns:1fr}.login-hero{min-height:280px;padding:40px 0}.login-hero__inner{width:auto;margin:0 24px}.login-hero__logo{width:min(240px,70%);margin-bottom:28px}.login-panel{padding:28px 20px 36px}}

.patient-shell{min-height:100vh; display:flex; flex-direction:column}
.patient-topbar{background:#fff; border-bottom:1px solid var(--border); padding:18px 24px}
.patient-topbar__inner{max-width:1120px; margin:0 auto; display:flex; justify-content:space-between; gap:16px; align-items:center}
.brand-inline{display:flex; align-items:center; gap:12px; text-decoration:none}
.brand-inline img{height:44px; width:auto}
.brand-inline__title{font-weight:700; font-size:20px}
.brand-inline__subtitle{color:var(--muted); font-size:14px}
.patient-main{width:min(1120px, 92vw); margin:0 auto; padding:28px 0 36px}
.patient-hero{display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-bottom:22px}
.patient-hero h1{margin:0; font-size:32px}
.patient-hero p{margin:8px 0 0; color:var(--muted)}

.modal{position:fixed; inset:0; background:rgba(2,6,23,.55); display:none; align-items:center; justify-content:center; z-index:50; padding:18px}
.modal.open{display:flex}
.modal__inner{background:#fff; border-radius:18px; box-shadow:var(--shadow); width:min(720px,96vw); max-height:92vh; overflow:auto; padding:22px}
.modal__head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px}
.closebtn{border:none; background:#fff; border:1px solid var(--border); padding:8px 12px; border-radius:10px; cursor:pointer; font-weight:600}

@media (max-width: 1200px){
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-2,.grid-sidebar{grid-template-columns:1fr}
}
@media (max-width: 900px){
  .app-shell{display:block}
  .sidebar{width:auto; border-right:none; border-bottom:1px solid var(--border)}
  .main-header,.main-content{padding:22px 18px}
  .main-header{display:block}
  .main-header__actions{margin-top:14px; justify-content:flex-start}
  .form-grid--2,.form-grid--3{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .grid-4,.grid-3{grid-template-columns:1fr}
  .stat-card__value{font-size:34px}
  .sidebar__title{font-size:18px}
  .patient-topbar,.patient-main{padding-left:16px; padding-right:16px}
}