/* Refinamento visual v1.5 — aproxima o sistema do protótipo.
   Carregado depois dos outros estilos: para desfazer, remova a linha deste arquivo em index.html.
   Tudo usa as variáveis de cor (tema claro/escuro e cor de destaque continuam funcionando). */
:root {
  --bg: #eef0fa;
  --line: #e9ecf6;
  --shadow: 0 1px 2px #3a3f6a0a, 0 12px 36px #4b509412;
  --radius: 22px;
}
.dark {
  --bg: #1c2030;
  --line: #3a4056;
  --shadow: 0 1px 2px #0003, 0 12px 36px #0003;
}
body {
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01";
}
h1 { letter-spacing: -1.2px; }
h2 { letter-spacing: -0.6px; }
h3 { font-size: 17px; letter-spacing: -0.2px; }

/* Cartões */
.card {
  border-radius: var(--radius);
  padding: 26px;
}
.card-title { margin-bottom: 22px; }
.card-title h2 { font-size: 22px; }

/* Menu lateral */
.sidebar {
  border-radius: 28px;
  box-shadow: var(--shadow);
}
.nav-item { color: var(--ink); }
.nav-item .icon { color: #5b6285; }
.nav-item.active .icon { color: #7a62b8; }
.nav-item:hover { background: var(--soft); }
.brand .icon { color: #8e7ad0; }

/* Barra superior */
.topbar { height: 48px; margin-bottom: 22px; }
.topbar-brand { font-size: 13px; }

/* Botões */
.btn {
  border-radius: 14px;
  min-height: 44px;
  padding: 10px 18px;
  font-size: 14px;
  border-color: #e2e6f3;
}
.btn.primary {
  border-radius: 999px;
  padding: 11px 24px;
  font-weight: 600;
  font-size: 15px;
  box-shadow: 0 6px 18px #5d8ee82a;
}
.btn.primary:hover { box-shadow: 0 10px 24px #5d8ee83a; }
.btn.small { min-height: 36px; border-radius: 12px; font-size: 13px; }
.iconbtn { border-radius: 14px; }

/* Campos */
input, select, textarea {
  border-radius: 14px;
  border-color: #e0e4f2;
  min-height: 46px;
  padding: 11px 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--soft);
}
.dark input, .dark select, .dark textarea { border-color: #454b63; }
.search input { padding-left: 42px; }
.search .icon { top: 14px; left: 14px; }

/* Selos de situação (pílulas com ícone) */
.badge {
  border-radius: 12px;
  padding: 7px 13px;
  font-size: 12.5px;
  font-weight: 500;
  gap: 7px;
}
.badge .icon { width: 15px; height: 15px; }
.badge.lilac { background: var(--soft); color: #7a62b8; }
.badge.green { background: #e6f5ee; color: #2f7d63; }
.badge.blue { background: var(--blue); color: var(--blueink); }

/* Tabelas */
th {
  padding: 15px 14px;
  font-size: 12.5px;
  font-weight: 500;
  background: color-mix(in srgb, var(--bg) 60%, var(--surface));
}
th:first-child { border-radius: 14px 0 0 14px; }
th:last-child { border-radius: 0 14px 14px 0; }
td { padding: 18px 14px; border-bottom-color: var(--line); }
tbody tr:last-child td { border-bottom: 0; }
td small { font-size: 12.5px; }
tbody tr.clickable:hover td { background: color-mix(in srgb, var(--soft) 45%, transparent); }
tbody tr.clickable:hover td:first-child { border-radius: 14px 0 0 14px; }
tbody tr.clickable:hover td:last-child { border-radius: 0 14px 14px 0; }

/* Avatares com anel suave */
.avatar {
  background: linear-gradient(145deg, var(--soft), var(--blue));
  box-shadow: inset 0 0 0 2px var(--surface), 0 0 0 1px var(--line);
}

/* Listas e abas */
.patient, .list-item { border-radius: 14px; }
.tab { border-radius: 999px; padding: 10px 18px; }
.tab.active { background: var(--soft); color: #7a62b8; }
.tabs.under .tab { border-radius: 0; }

/* Ícones em bolha */
.bubble-icon { background: var(--soft); color: #7a62b8; }

/* Barra de progresso */
.progress { height: 10px; background: var(--soft); }
.progress i { background: linear-gradient(90deg, #b9a8e8, var(--accent)); }

/* Janelas e avisos */
.modal { border-radius: 28px; padding: 32px; }
.notice { border-radius: 14px; }
.details-grid { border-radius: 18px; }
.file-drop { border-radius: 18px; }

/* Assistente (Lumiar) um pouco mais presente */
.lumi-face { width: 46px; height: 46px; }
.lumi-bar { border-radius: 28px; }

@media (max-width: 650px) {
  .card { padding: 20px; border-radius: 20px; }
  .btn.primary { padding: 10px 18px; font-size: 14px; }
}