/* OdontoDoc — Stable UI (clean SaaS) */
:root{
  --bg:#f6f8fb;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --line:rgba(148,163,184,.22);

  --primary:#2563eb;
  --primary-600:#1d4ed8;

  --r-lg:18px;
  --r-md:14px;
  --r-sm:12px;

  --shadow:0 12px 28px rgba(2,6,23,.10);
  --shadow-soft:0 10px 22px rgba(2,6,23,.08);

  --sb-w:288px;
  --sb-collapsed:84px;

  /* Light sidebar (Simples Dental-like) */
  --sb-bg:#ffffff;
  --sb-line:rgba(148,163,184,.22);
  --sb-text:#334155;
  --sb-strong:#0f172a;
  --sb-muted:#64748b;
  --sb-active-bg:rgba(37,99,235,.10);
  --sb-active-border:rgba(37,99,235,.35);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden; /* evita barra horizontal fantasma */
}

/* App layout */
.app-shell{
  display:grid;
  grid-template-columns: var(--sb-w) 1fr;
  min-height:100vh;
}
.app-main{ min-width:0; padding:18px 18px 28px; }
.app-inner{ width:100%; max-width: 1180px; margin: 0 auto; }

/* Cabeçalho sempre acessível (principalmente em notebook pequeno) */
.app-header{
  position: sticky;
  top: 0;
  z-index: 20;
  margin: 0 0 14px;
  padding: 10px 0;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(148,163,184,.18);
}
.app-view{ min-width:0; }

@media (max-width: 960px){
  .app-shell{ grid-template-columns: 1fr; }
  .app-main{ padding:14px 14px 22px; }
  .app-inner{ max-width: 100%; }
  #sidebar{
    position: fixed;
    inset: 0 auto 0 0;
    width: min(86vw, 320px);
    transform: translateX(-105%);
    transition: transform .18s ease;
    z-index: 60;
    box-shadow: 0 24px 70px rgba(2,6,23,.35);
  }
  body.sb-open #sidebar{ transform: translateX(0); }
  .sb-overlay{
    display:none;
    position: fixed;
    inset:0;
    background: rgba(2,6,23,.45);
    z-index: 50;
  }
  body.sb-open .sb-overlay{ display:block; }
}

/* Ritmo de espaçamento mais consistente */
.grid{ gap: 14px; }
@media (max-width: 520px){
  .grid{ gap: 12px; }
  .card{ padding: 14px; }
  .kpi-card{ padding: 13px; }
}

/* Tabelas: se ficar apertado, rola só a tabela (não o layout todo) */
.table{ display:block; overflow-x:auto; -webkit-overflow-scrolling: touch; }
.table thead, .table tbody, .table tr{ width:100%; }
.table th, .table td{ white-space: nowrap; }

/* Render smoothing (no flash) */
.app-view.rendering{ opacity:0; transform: translateY(2px); }
.app-view{ opacity:1; transform:none; transition: opacity .12s ease, transform .12s ease; }

/* Sidebar */
.app-sidebar{
  background:var(--sb-bg);
  border-right:1px solid var(--sb-line);
  padding:14px 12px;
}
.app-sidebar.is-collapsed{ width: var(--sb-collapsed); }

.sb-brand{
  display:flex; align-items:center; gap:10px;
  padding: 6px 4px 12px;
  border-bottom: 1px solid var(--sb-line);
}
.sb-logo{
  width:42px; height:42px;
  border-radius: 16px;
  background: rgba(37,99,235,.10);
  border:1px solid rgba(37,99,235,.20);
  display:flex; align-items:center; justify-content:center;
  color: var(--primary-600);
}
.sb-name{ color: var(--sb-strong); font-weight: 950; letter-spacing:-.02em; line-height:1; }
.sb-email{
  margin-top:4px;
  color: var(--sb-muted);
  font-size: 12px;
  max-width: 190px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.sb-toggle{
  margin-left:auto;
  width:34px; height:34px;
  border-radius:12px;
  border:1px solid var(--sb-line);
  background: rgba(2,6,23,.02);
  color: var(--sb-text);
  cursor:pointer;
  transition: 140ms ease;
}
.sb-toggle:hover{ background: rgba(2,6,23,.05); transform: translateY(-1px); }

.sb-nav{ padding: 12px 4px; display:grid; gap:6px; }
.sb-divider{ height:1px; background: var(--sb-line); margin: 10px 6px; }

.sb-item{
  display:grid;
  grid-template-columns: 24px 1fr;
  gap:10px;
  align-items:center;
  width:100%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--sb-text);
  cursor:pointer;
  text-align:left;
  font-weight: 750;
  font-size: 13.5px;
  transition: 140ms ease;
}
.sb-item:hover{
  background: rgba(2,6,23,.03);
  border-color: rgba(148,163,184,.18);
  color: var(--sb-strong);
}
.sb-item.is-active{
  background: var(--sb-active-bg);
  color: var(--sb-strong);
  border-color: var(--sb-active-border);
  font-weight: 900;
}
.sb-item.is-danger{ color:#b91c1c; }
.sb-item.is-danger:hover{
  background: rgba(239,68,68,.16);
  border-color: rgba(239,68,68,.2);
  color:#991b1b;
}
.sb-item svg{ display:block; }

.app-sidebar.is-collapsed .sb-text{ display:none; }
.app-sidebar.is-collapsed .sb-email{ display:none; }
.app-sidebar.is-collapsed .sb-name{ display:none; }
.app-sidebar.is-collapsed .sb-item{
  grid-template-columns: 1fr;
  justify-items:center;
  padding: 12px 10px;
}

/* Header (premium/simétrico) */
.hdr.hdr-grid{
  display:grid;
  grid-template-columns: 1fr minmax(220px, 520px) 1fr;
  align-items:center;
  gap: 12px;
}
.hdr-left{ display:flex; align-items:center; gap:10px; min-width:0; }
.hdr-txt{ min-width:0; }
.hdr-title{ font-size: 18px; font-weight: 950; letter-spacing:-.02em; line-height:1.15; }
.hdr-sub{ font-size: 12.5px; color: var(--muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hdr-center{ display:flex; justify-content:center; min-width:0; }
.hdr-right{ display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap; align-items:center; min-width:0; }
.hdr-pill{
  border:1px solid var(--line);
  background:#fff;
  padding: 9px 12px;
  border-radius: 999px;
  font-weight: 950;
  font-size: 12px;
  color:#334155;
  max-width: 520px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hdr-pill-btn{
  cursor:pointer;
  transition: 140ms ease;
}
.hdr-pill-btn:hover{ background: rgba(2,6,23,.03); transform: translateY(-1px); }

@media (max-width: 980px){
  .hdr.hdr-grid{ grid-template-columns: 1fr; }
  .hdr-center{ justify-content:flex-start; }
  .hdr-right{ justify-content:flex-start; }
  .hdr-pill{ width: 100%; }
}

/* Cards & grids */
.card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
  padding: 16px;
}
.card.strong{ box-shadow: var(--shadow); }
.grid{ display:grid; gap:14px; }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-2{ grid-template-columns: 1.2fr .8fr; }
@media (max-width: 1100px){
  .grid-3, .grid-2{ grid-template-columns: 1fr; }
}

/* Buttons */
.btn{
  border: 1px solid var(--line);
  background:#fff;
  color: var(--text);
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 900;
  cursor:pointer;
  transition: 140ms ease;
}
.btn:hover{ background: rgba(2,6,23,.03); transform: translateY(-1px); }
.btn-primary{
  background: var(--primary);
  border-color: var(--primary);
  color:#fff;
  box-shadow: 0 10px 18px rgba(37,99,235,.20);
}
.btn-primary:hover{ filter: brightness(.98); }
.btn-ghost{
  background: transparent;
  border-color: transparent;
}
.btn-ghost:hover{ background: rgba(2,6,23,.03); transform:none; }
/* Buttons with icons */
.btn.with-ico{ display:inline-flex; align-items:center; gap:8px; }
.btn.with-ico svg{ width:18px; height:18px; }


/* Typography helpers */
.h1{ font-size: 24px; font-weight: 950; letter-spacing:-.02em; margin:0; }
.h2{ font-size: 16px; font-weight: 950; letter-spacing:-.02em; margin:0; }
.small{ color: var(--muted); font-size: 13px; }
.muted{ color: var(--muted); }

/* Forms */
.field label{
  display:block;
  font-weight: 900;
  font-size: 12.5px;
  margin-bottom: 6px;
}
input, select, textarea{
  width:100%;
  border: 1px solid rgba(148,163,184,.32);
  border-radius: 12px;
  padding: 10px 12px;
  font: inherit;
  background:#fff;
}
textarea{ min-height: 90px; resize: vertical; }
input:focus, select:focus, textarea:focus{
  outline:none;
  border-color: rgba(37,99,235,.55);
  box-shadow: 0 0 0 4px rgba(37,99,235,.12);
}
.row-actions{ display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap; }

/* Table */
.table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow:hidden;
  background:#fff;
}
.table th{
  text-align:left;
  padding: 10px 12px;
  font-size: 12px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #64748b;
  background: #f8fafc;
  border-bottom: 1px solid var(--line);
}
.table td{
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.table tr:last-child td{ border-bottom:none; }
.tsub{ color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.icon-btn{
  width: 34px; height: 34px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background:#fff;
  cursor:pointer;
  transition: 140ms ease;
}
.icon-btn:hover{ background: rgba(2,6,23,.03); transform: translateY(-1px); }
.icon-row{ display:flex; gap:8px; justify-content:flex-end; }

/* Badges */
.badge{
  display:inline-flex; align-items:center; gap:8px;
  font-size: 12px;
  font-weight: 950;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(2,6,23,.02);
}
.badge.ok{ border-color: rgba(34,197,94,.25); background: rgba(34,197,94,.10); color:#166534; }
.badge.warn{ border-color: rgba(245,158,11,.28); background: rgba(245,158,11,.12); color:#92400e; }
.badge.bad{ border-color: rgba(239,68,68,.26); background: rgba(239,68,68,.10); color:#991b1b; }


/* Dialog (modal) */
dialog{
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 70px rgba(2,6,23,.35);
  padding: 0;
  width: min(720px, calc(100% - 24px));
}
dialog.dlg-xl{ width: min(980px, calc(100% - 24px)); }
dialog::backdrop{ background: rgba(2,6,23,.45); }
.dlg-head{
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  display:flex;
  justify-content: space-between;
  align-items:flex-start;
  gap: 10px;
}
.dlg-body{ padding: 14px 16px; }
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-grid .span2{ grid-column: span 2; }
@media (max-width: 520px){
  .form-grid{ grid-template-columns: 1fr; }
  .form-grid .span2{ grid-column: auto; }
}


/* ================================
   Dashboard — Simples Dental-like
================================== */
.kpi-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; }
@media (max-width: 1100px){ .kpi-grid{ grid-template-columns: 1fr; } }

.kpi-card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 10px 20px rgba(2,6,23,.06);
  padding: 16px;
  display:flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.kpi-num{
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1;
  margin-bottom: 6px;
}
.kpi-label{
  font-size: 14px;
  font-weight: 850;
  margin-bottom: 4px;
}
.kpi-meta{ font-size: 12px; color: var(--muted); }
.kpi-pill{
  border: 1px solid var(--line);
  background: rgba(2,6,23,.02);
  color: #334155;
  font-size: 12px;
  font-weight: 850;
  padding: 6px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.kpi-pill.blue{ border-color: rgba(37,99,235,.22); background: rgba(37,99,235,.10); color: var(--primary-600); }
.kpi-pill.orange{ border-color: rgba(245,158,11,.26); background: rgba(245,158,11,.12); color: #92400e; }
.kpi-pill.green{ border-color: rgba(34,197,94,.24); background: rgba(34,197,94,.10); color: #166534; }
.kpi-pill.gray{ border-color: rgba(148,163,184,.28); background: rgba(148,163,184,.12); color: #334155; }

.panel{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.panel-hd{
  padding: 14px 16px;
  border-bottom: 1px solid rgba(148,163,184,.18);
  display:flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}
.panel-title{ font-size: 15px; font-weight: 900; letter-spacing: -.01em; }
.panel-sub{ font-size: 12px; color: var(--muted); margin-top: 2px; }

.panel-bd{ padding: 8px 0; }

.list-row{
  display:grid;
  grid-template-columns: 78px 1fr auto;
  gap: 12px;
  padding: 12px 16px;
  align-items: center;
  border-bottom: 1px solid rgba(148,163,184,.14);
}
.list-row:last-child{ border-bottom: none; }
.list-row:hover{ background: rgba(2,6,23,.02); }

.lr-time{ font-weight: 900; color: #0f172a; }
.lr-main{ min-width: 0; }
.lr-name{
  font-weight: 900;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lr-notes{
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.empty{
  padding: 16px;
  color: var(--muted);
}

/* ===========================
   v0.2 — Simples Dental-like polish
   foco: tipografia mais leve, espaços, listas mais "software"
=========================== */
:root{
  --shadow: 0 10px 24px rgba(2,6,23,.08);
  --shadow-soft: 0 8px 18px rgba(2,6,23,.06);
}

body{
  font-size: 14.5px;
  line-height: 1.45;
  letter-spacing: 0;
}

/* Tipografia menos "robusta" */
.h1, .page-title{ font-weight: 800; }
.kpi-num{ font-weight: 800; }
.kpi-label{ font-weight: 700; }
.btn{ font-weight: 700; }
.sidebar a, .menu-item{ font-weight: 650; }

/* Dashboard */
.kpi-card{
  padding: 14px 14px;
  box-shadow: var(--shadow-soft);
}
.kpi-pill{
  font-weight: 750;
  padding: 6px 10px;
  border-radius: 999px;
}
.dash-note{
  color: var(--muted);
  font-size: 12.5px;
  margin-top: 8px;
}

/* Painéis mais clean */
.panel{ box-shadow: var(--shadow); }
.panel-hd{
  padding: 14px 16px;
  border-bottom: 1px solid rgba(148,163,184,.16);
}
.panel-title{ font-weight: 800; }
.panel-sub{ color: var(--muted); }

/* Lista em estilo "linha" */
.panel-bd{ padding: 0; }
.list-row{
  padding: 12px 16px;
  border-bottom: 1px solid rgba(148,163,184,.12);
}
.list-row:last-child{ border-bottom: 0; }
.lr-time{
  font-weight: 750;
  color: #0f172a;
}
.lr-name{
  font-weight: 750;
  letter-spacing: -.01em;
}
.lr-notes{
  color: var(--muted);
  font-size: 12.5px;
  margin-top: 2px;
}
.empty{
  padding: 16px;
  color: var(--muted);
}

/* Top actions com menos "peso" */
.header-actions .btn{
  padding: 10px 12px;
}


/* Sidebar sections */
.sb-section{padding:10px 12px 6px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);} 


/* Stub pages */
.stub-wrap{ max-width: 1160px; }
.stub-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; margin-top:14px; }
.stub-card{ background:#fff; border:1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-soft); padding:16px; }
.stub-icon{ width:40px; height:40px; border-radius: 14px; background: rgba(37,99,235,.08); display:flex; align-items:center; justify-content:center; font-size:18px; margin-bottom:10px; }
.stub-ttl{ font-weight: 900; letter-spacing: -.01em; }
.stub-txt{ color: var(--muted); font-size: 13px; margin-top: 4px; line-height: 1.35; }
@media (max-width: 1100px){ .stub-grid{ grid-template-columns: 1fr; } }


/* Agenda */
.ag-grid{ display:grid; grid-template-columns: 360px 1fr; gap: 14px; align-items: start; }
@media (max-width: 1100px){ .ag-grid{ grid-template-columns: 1fr; } }
.ag-cal-wrap{ padding: 12px 16px 10px; }
.ag-cal-head{ display:grid; grid-template-columns: repeat(7,1fr); gap:6px; }
.ag-cal-dow{ text-align:center; font-size: 11px; font-weight: 800; color: var(--muted); }
.ag-cal-grid{ display:grid; grid-template-columns: repeat(7,1fr); gap:6px; margin-top: 6px; }
.ag-cal-cell{ height: 44px; border-radius: 12px; border:1px solid rgba(148,163,184,.18); background:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; transition: 140ms ease; }
.ag-cal-cell:hover{ background: rgba(2,6,23,.03); transform: translateY(-1px); }
.ag-cal-cell.is-empty{ border-style:dashed; background: transparent; cursor: default; transform:none; }
.ag-cal-day{ font-weight: 800; color:#0f172a; }
.ag-cal-cell.is-today{ border-color: rgba(37,99,235,.30); background: rgba(37,99,235,.06); }
.ag-cal-cell.is-selected{ border-color: rgba(37,99,235,.55); box-shadow: 0 0 0 4px rgba(37,99,235,.12); }
.ag-cal-legend{ padding: 0 16px 14px; display:flex; gap: 10px; flex-wrap: wrap; }


/* Patients table toolbar + pills (SaaS) */
.table-toolbar{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.tb-search{
  flex:1 1 360px;
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--line);
  background:#fff;
  border-radius: 14px;
  padding: 10px 12px;
  min-width: 0;
  overflow: visible;
}
.tb-search input{
  border:none;
  outline:none;
  width:100%;
  font-size: 14px;
  background: transparent;
  color: var(--text);
}
.tb-right{ display:flex; gap:10px; align-items:center; }
.tb-select{
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--line);
  background:#fff;
  border-radius: 14px;
  padding: 10px 12px;
}
.tb-select select{
  border:none;
  outline:none;
  background: transparent;
  font-weight: 800;
  color: var(--text);
}
.tb-ico{
  color: #64748b;
  display:inline-flex;
  align-items:center;
}
.pillbar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  padding: 6px 0;
}
.pill{
  border:1px solid var(--line);
  background:#fff;
  color: #334155;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 900;
  cursor:pointer;
  transition: 140ms ease;
}
.pill:hover{ background: rgba(2,6,23,.03); transform: translateY(-1px); }
.pill.active{
  background: rgba(37,99,235,.10);
  border-color: rgba(37,99,235,.35);
  color: #1d4ed8;
}

/* Chips (seleções rápidas) */
.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--line);
  background:#fff;
  color:#0f172a;
  padding: 8px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 13px;
}
.chip-x{
  border:none;
  background: rgba(2,6,23,.06);
  color:#0f172a;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  line-height: 1;
}
.chip-x:hover{ background: rgba(239,68,68,.16); color:#b91c1c; }

/* Pacientes — garantir que nada fique "preso" fora da tela
   Em telas largas, cada card rola internamente (mantém cabeçalhos sempre visíveis).
   Em telas menores, a página rola normalmente. */
.patients-grid{ align-items: start; }
/* Permite que os cards encolham dentro do grid (evita a coluna direita “sumir” com sidebar aberta) */
.patients-grid > *{ min-width:0; }
.patients-grid .panel{ display:flex; flex-direction:column; min-height:0; }
.patients-grid .panel-scroll{ padding:14px 16px; overflow:auto; min-height:0; }
@media (min-width: 1101px){
  .patients-grid .panel-scroll{ max-height: calc(100vh - 210px); }
}

/* Em notebook/zoom, evite "cortar" a coluna direita: vira 1 coluna um pouco antes */
/* Como a sidebar reduz a área útil, usamos um breakpoint mais “cedo” para notebook/zoom */
@media (max-width: 1520px){
  .patients-grid{ grid-template-columns: 1fr; }
}

/* Seleção de paciente pela linha (feedback visual) */
.patients-grid tbody tr{ cursor:pointer; }
.patients-grid tbody tr:hover{ background: rgba(2,6,23,.02); }
.patients-grid tbody tr.is-selected-row{ background: rgba(37,99,235,.06); }

/* Dentro do wrapper de tabela, mantenha a tabela como tabela (evita cortes/"sumidos") */
.od-table-wrap .table{ display: table; overflow: visible; }

/* Inline input+button */
.inline{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:10px;
  align-items:end;
}

/* Icon buttons improvements */
.icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#0f172a;
}
.icon-btn svg{ width:18px; height:18px; }
.icon-btn.danger{ color:#b91c1c; }
.icon-btn.danger:hover{ background: rgba(239,68,68,.10); }
.table td:last-child{ text-align:right; }

/* Prontuário — filtros + linha/tabela */
.tb-field{
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--line);
  background:#fff;
  border-radius: 14px;
  padding: 10px 12px;
}
.tb-field input[type="date"],
.tb-field select{
  border:none;
  outline:none;
  background: transparent;
  font-weight: 800;
  color: var(--text);
  font-size: 13px;
}
.tb-field input[type="date"]{ font-weight: 900; }

.lr-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(2,6,23,.02);
  font-size: 12px;
  font-weight: 950;
  color: #334155;
}
.lr-badge.blue{ border-color: rgba(37,99,235,.30); background: rgba(37,99,235,.08); color:#1d4ed8; }
.lr-badge.green{ border-color: rgba(34,197,94,.26); background: rgba(34,197,94,.10); color:#166534; }
.lr-badge.purple{ border-color: rgba(147,51,234,.25); background: rgba(147,51,234,.08); color:#6d28d9; }

/* ===== Odontograma (modal) ===== */
body.modal-open{ overflow:hidden; }
.od-modal{
  position: fixed;
  inset: 0;
  background: rgba(2,6,23,.55);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 10px;
  z-index: 60;
}
.od-modal.is-open{ display:flex; }
.od-modal-card{
  width: calc(100vw - 20px);
  height: calc(100vh - 20px);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 30px 70px rgba(2,6,23,.25);
  display: flex;
  flex-direction: column;
}
.od-modal-hd{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.od-modal-bd{
  flex: 1;
  min-height: 0;
  display:grid;
  grid-template-columns: 1fr 340px;
  gap: 14px;
  padding: 14px 16px 18px;
  overflow: hidden;
}
@media (max-width: 980px){
  .od-modal-bd{ grid-template-columns: 1fr; }
}

.od-legend{
  display:flex;
  flex-wrap:wrap;
  gap: 8px 12px;
  margin-bottom: 12px;
}
.od-leg{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(2,6,23,.02);
  font-size: 12px;
}
.od-arch{ padding: 12px; border: 1px solid var(--line); border-radius: 18px; background: rgba(2,6,23,.02); }
.od-tooth-grid{ display:grid; grid-template-columns: repeat(16, minmax(40px,1fr)); gap: 8px; }
@media (max-width: 980px){
  .od-tooth-grid{ grid-template-columns: repeat(8, minmax(40px,1fr)); }
}
.od-tooth{
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 14px;
  padding: 8px 6px;
  cursor: pointer;
  display:flex;
  flex-direction: column;
  align-items:center;
  gap: 6px;
  transition: transform .08s ease, box-shadow .08s ease, border-color .08s ease;
}
.od-tooth:hover{ transform: translateY(-1px); box-shadow: 0 10px 20px rgba(2,6,23,.08); }
.od-tooth .num{ font-weight: 950; font-size: 12px; color:#334155; }
.od-tooth .mark{
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid rgba(2,6,23,.10);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 950;
  color: #0f172a;
  background: rgba(2,6,23,.04);
}
.od-tooth.is-active{ border-color: rgba(37,99,235,.35); box-shadow: 0 10px 22px rgba(37,99,235,.10); }
.od-tooth.is-sel{ outline: 3px solid rgba(147,51,234,.25); }
.od-side{ position: sticky; top: 12px; align-self:start; }

.lr-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
}

.pr-meta{
  display:grid;
  grid-template-columns: 1fr 180px 140px;
  gap:10px;
}
@media (max-width: 980px){
  .pr-meta{ grid-template-columns: 1fr; }
}

/* ===== Documentos (toolbar + preview + PDF) ===== */
.doc-shell{ display:grid; gap: 14px; }

.doc-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap:wrap;
}
.doc-toolbar .left{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.doc-toolbar .right{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

.doc-patient{
  display:flex;
  align-items:center;
  gap:8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 12px;
  color: var(--muted);
}
.doc-patient b{ color: var(--text); }

.doc-grid{
  display:grid;
  grid-template-columns: 330px 1fr;
  gap: 14px;
  /* manter cards com a mesma altura */
  align-items:stretch;
}
@media (max-width: 1020px){
  .doc-grid{ grid-template-columns: 1fr; }
}

.doc-side{
  padding: 12px;
  /* faz o card "Medicamentos" acompanhar a altura do painel principal */
  display:flex;
  flex-direction:column;
  min-height: 0;
}
.doc-side .side-title{ font-weight: 900; letter-spacing:-.01em; }
.doc-side .side-sub{ font-size: 12px; color: var(--muted); margin-top: 2px; }

/* Receituário — coluna esquerda no formato do mock (Busca / Categoria / Medicamento / Novo) */
.doc-stack{
  margin-top: 12px;
  display:flex;
  flex-direction:column;
  gap: 10px;
  flex: 1;
  min-height: 0;
}
.doc-ctl-label{
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #0f172a;
  margin-bottom: 6px;
}
.doc-ctl-input{
  padding: 14px 12px;
  border-radius: 14px;
  font-weight: 900;
}
/* mantém o botão de novo medicamento no rodapé do card */
.doc-stack #btnAdd{ margin-top: auto; }
/* mantém o botão de novo CID no rodapé do card (Atestados) */
.doc-stack #btnAddCid{ margin-top: auto; }
/* mantém o botão de novo exame no rodapé do card (Exames) */
.doc-stack #btnAddExam{ margin-top: auto; }

.doc-search{
  display:flex;
  gap:8px;
  margin-top: 12px;
}
.doc-search input{ width:100%; }

.doc-list{
  margin-top: 12px;
  display:grid;
  gap: 8px;
  /* ocupa o espaço disponível e rola internamente */
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 2px;
}

/* mantém o botão de novo medicamento sempre no rodapé do card */
.doc-side #btnAdd{ margin-top: auto; }
.doc-item{
  width:100%;
  text-align:left;
  border:1px solid var(--line);
  background:#fff;
  border-radius: 12px;
  padding: 10px 10px;
  cursor:pointer;
  transition: .15s ease;
}
.doc-item:hover{ background: rgba(2,6,23,.02); transform: translateY(-1px); }
.doc-item.is-active{ border-color: rgba(37,99,235,.35); background: rgba(37,99,235,.06); }
.doc-item .t{ font-weight: 900; letter-spacing:-.01em; }
.doc-item .d{ font-size: 12px; color: var(--muted); margin-top: 2px; }

.doc-main{ padding: 12px; }
.doc-split{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 980px){
  .doc-split{ grid-template-columns: 1fr; }
}

.doc-card{ border:1px solid var(--line); background:#fff; border-radius: 16px; }
.doc-card .hd{ padding: 12px 12px; border-bottom: 1px solid var(--line); display:flex; align-items:center; justify-content:space-between; }
.doc-card .hd .ttl{ font-weight: 900; letter-spacing:-.01em; }
.doc-card .bd{ padding: 12px; }

.doc-editor textarea{ min-height: 240px; resize: vertical; }

.preview{
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
}
.preview .muted{ color: var(--muted); }
.preview h3{ margin:0 0 8px; font-size: 14px; font-weight: 900; }
.preview .box{ border:1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.preview ul{ margin: 8px 0 0 18px; }

.btn-link{
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 900;
  cursor:pointer;
}

/* ===== v0.3.7 additions (Perfil uploads) ===== */
.uploader{ display:grid; gap:8px; }
.u-title{ font-weight: 950; letter-spacing:-.01em; }
.u-box{
  height: 140px;
  border-radius: 16px;
  border: 1px dashed rgba(148,163,184,.45);
  background: rgba(2,6,23,.02);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.u-box img{ max-height: 140px; max-width: 100%; object-fit: contain; }
.u-ph{ color:#64748b; font-weight: 900; font-size: 13px; }

.panel{ background:#fff; border:1px solid rgba(148,163,184,.25); border-radius:18px; box-shadow: 0 12px 28px rgba(2,6,23,.08); }
.panel-hd{ padding:16px; border-bottom:1px solid rgba(148,163,184,.20); display:flex; justify-content:space-between; align-items:flex-end; gap:12px; flex-wrap:wrap; }
.panel-bd{ padding:16px; }
.panel-actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* ===== v0.3.8 additions (Financeiro toolbar + list rows) ===== */
.table-wrap{ overflow:auto; }
.list-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,.22);
  background:#fff;
  box-shadow: 0 8px 18px rgba(2,6,23,.05);
}
.lr-title{ font-weight: 950; letter-spacing:-.01em; }
.lr-sub{ color:#64748b; font-size: 12.5px; margin-top: 2px; }
.lr-right{ font-weight: 950; }
.input-ic{ position:relative; }
.input-ic .ic{
  position:absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color:#94a3b8;
  display:flex;
}
.input-ic input{
  padding-left: 40px;
  height: 40px;
  border-radius: 12px;
}

/* ===== v0.3.8.5 — Sidebar styles (SimplesDental-like) ===== */
/* Se a sidebar estiver "toda azul e sublinhada", é porque o navegador está usando o estilo padrão de <a>.
   Cole este bloco NO FINAL do css/app.css. */

.sd-sidebar{
  position: sticky;
  top: 0;
  height: 100vh;
  background: #ffffff;
  border-right: 1px solid rgba(148,163,184,.22);
  padding: 16px 14px;
  display:flex;
  flex-direction:column;
  gap: 12px;
}

.sd-sb-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
}

.sd-brand{
  display:flex;
  align-items:center;
  gap: 10px;
}

.sd-brand-ic{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(37,99,235,.08);
  color: #2563eb;
  border: 1px solid rgba(37,99,235,.18);
}

.sd-brand-name{
  font-weight: 950;
  letter-spacing: -.02em;
  font-size: 16px;
  color: #0f172a;
}

.sd-brand-sub{
  font-size: 12px;
  color: #64748b;
  margin-top: 2px;
  max-width: 180px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.sd-sb-collapse.btn-icon{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,.25);
  background: #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#0f172a;
}
.sd-sb-collapse.btn-icon:hover{
  box-shadow: 0 10px 18px rgba(2,6,23,.08);
}

.sd-nav{
  display:flex;
  flex-direction:column;
  gap: 6px;
  padding-top: 6px;
}

.sd-section{
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .08em;
  color: #94a3b8;
  padding: 10px 12px 4px;
}

.sd-sep{
  height: 1px;
  background: rgba(148,163,184,.22);
  margin: 10px 0;
}

.sd-item{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  color: #0f172a;
  text-decoration: none !important;
  border: 1px solid transparent;
  font-weight: 800;
  letter-spacing: -.01em;
}

.sd-item .sd-ic{
  width: 22px;
  height: 22px;
  display:flex;
  align-items:center;
  justify-content:center;
  color: #334155;
  flex: 0 0 auto;
}

.sd-item .sd-tx{
  font-size: 14px;
}

.sd-item:hover{
  background: rgba(37,99,235,.06);
  border-color: rgba(37,99,235,.15);
}

.sd-item.active{
  background: rgba(37,99,235,.10);
  border-color: rgba(37,99,235,.25);
  color: #0f172a;
}

.sd-item.is-logout{
  color: #ef4444;
}

.sd-item.is-logout .sd-ic{
  color: #ef4444;
}

/* Collapsed mode (se você já usa) */
body.sb-collapsed .sd-sidebar{ width: 84px; }
body.sb-collapsed .sd-brand-sub{ display:none; }
body.sb-collapsed .sd-brand-name{ display:none; }
body.sb-collapsed .sd-section{ display:none; }
body.sb-collapsed .sd-item .sd-tx{ display:none; }
body.sb-collapsed .sd-item{ justify-content:center; padding: 10px; }

/* ===== FIX SCROLL (0.3.8.x) ===== */
html, body { height: 100%; }
body { overflow-y: auto; }

/* Garante que a sidebar não "roube" o scroll do site */
.sd-sidebar { height: 100vh; overflow: auto; }

/* Se existir um wrapper principal, não pode travar overflow */
.app, .layout, .main, #app, #main { overflow: visible !important; }

/* O conteúdo principal deve rolar no BODY, não em um scroll interno invisível */
#view, .panel, .panel-bd { overflow: visible !important; height: auto !important; }

/* Evita scroll “preso” quando o mouse passa pela sidebar */
.sd-sidebar * { overscroll-behavior: contain; }

/* ==========================
   v0.4.1 — UX refinements
   foco: respiro, consistência e notebook pequeno
========================== */

/* Header melhor no mobile */
@media (max-width: 720px){
  .hdr-right{ width:100%; justify-content:space-between; }
  .hdr-pill{ flex:1 1 auto; }
  .hdr-title{ font-size: 16px; }
}

/* Ajustes para telas baixas (ex.: 1366x768) */
@media (max-height: 820px){
  .app-main{ padding-top: 12px; }
  .app-header{ padding: 8px 0; }
}

/* Respiro mais compacto no celular */
@media (max-width: 520px){
  .grid{ gap:12px; }
  .card{ padding:14px; }
  .kpi-card{ padding: 12px 12px; }
}

/* Tabelas sem estourar largura (evita barra horizontal do navegador) */
.table{ max-width: 100%; }
.table{ display:block; overflow-x:auto; -webkit-overflow-scrolling: touch; }



/* ===== v0.5.2 Pacientes + Sidebar UX (SAFE / scoped) ===== */
/* Sidebar: topo sempre visível; só o menu rola */
.sd-sidebar{ overflow:hidden; }
.sd-sb-top{
  position: sticky;
  top: 0;
  z-index: 5;
  background: #ffffff;
  padding-bottom: 10px;
  /* mantém alinhamento com padding do aside */
}
.sd-nav{
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding-right: 2px;
}
/* Evita barra horizontal fantasma */
html, body { overflow-x: hidden; }


/* ===== v0.5.2 — Design System SCOPED (Pacientes) ===== */
.od-page{
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 18px;
}
@media (max-width: 720px){
  .od-page{ padding: 14px 14px; }
}
.od-grid-2{
  display:grid;
  gap: 14px;
  grid-template-columns: 1.05fr .95fr;
  align-items:start;
}
@media (max-width: 1100px){
  .od-grid-2{ grid-template-columns: 1fr; }
}
.od-card{
  background:#fff;
  border:1px solid rgba(148,163,184,.22);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 10px 22px rgba(2,6,23,.06);
}
.od-card + .od-card{ margin-top: 14px; }

.od-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}
.od-title{
  font-size: 18px;
  font-weight: 950;
  letter-spacing: -.02em;
  color:#0f172a;
}
.od-sub{
  font-size: 12px;
  color:#64748b;
  margin-top: 2px;
}

.od-form{
  display:grid;
  gap: 12px;
}
.od-form .field label{ font-weight: 800; color:#0f172a; }
.od-form input, .od-form select, .od-form textarea{
  width:100%;
}
.od-actions{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  align-items:center;
}
.od-actions .btn{ margin:0; }

.od-table-wrap{
  width:100%;
  overflow:auto;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,.18);
}
.od-table-wrap table{ width:100%; border-collapse: collapse; }
.od-table-wrap th, .od-table-wrap td{ padding: 10px 10px; vertical-align: top; }
.od-table-wrap thead th{
  font-size: 12px;
  color:#64748b;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: rgba(2,6,23,.02);
}
.od-table-wrap tbody tr:hover{ background: rgba(37,99,235,.04); }

.od-chiprow{ display:flex; gap: 8px; flex-wrap:wrap; }

/* =====================
   Prontuário — UX crítica (texto longo + histórico)
   Escopo: .od-pr
   ===================== */

/* v1.0.5 — Prontuário: cards de ação + modais (padrão OdontoDoc) */
.od-pr .pr-shell{
  display:flex;
  flex-direction: column;
  gap: 14px;
}

.od-pr .pr-actions-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 980px){
  .od-pr .pr-actions-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .od-pr .pr-actions-grid{ grid-template-columns: 1fr; }
}

.od-pr .pr-action-card{
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  padding: 16px;
  display:flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  aspect-ratio: 1 / 1;
  box-shadow: 0 18px 40px rgba(2,6,23,.06);
}

.od-pr .pr-action-top{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 10px;
}
.od-pr .pr-action-ico{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(2,6,23,.02);
  display:flex;
  align-items:center;
  justify-content:center;
}
.od-pr .pr-action-title{ font-weight: 950; letter-spacing: .2px; }
.od-pr .pr-action-sub{ font-size: 12px; color: rgba(2,6,23,.65); margin-top: 4px; line-height: 1.25; }

.od-pr .pr-history-card{
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  padding: 16px;
  box-shadow: 0 18px 40px rgba(2,6,23,.06);

  display:flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
}
.od-pr .pr-history-mini{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(2,6,23,.08);
  background: rgba(2,6,23,.02);
  font-size: 12px;
  color: rgba(2,6,23,.72);
}


.od-pr .pr-history-body{
  flex: 1;
  display:flex;
  align-items: center;
}

.od-pr .pr-hist-modal-list{
  display:grid;
  gap: 10px;
}

.od-pr .pr-hist-item{
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px 12px;
  background: #fff;
}

.od-pr .pr-hist-item.is-canceled{
  border: 1px dashed rgba(220,38,38,.55);
  background: rgba(220,38,38,.04);
}
.od-pr .pr-hist-item.is-canceled .pr-hist-text{
  color: #dc2626;
  text-decoration: line-through;
}
.od-pr .pr-hist-head{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 10px;
}
.od-pr .pr-hist-meta{
  font-size: 12px;
  color: rgba(2,6,23,.68);
  margin-top: 4px;
}
.od-pr .pr-hist-text{
  margin-top: 8px;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.45;
}

/* v1.0.12 — Procedimentos: cards + biblioteca em modal (padrão OdontoDoc) */
.od-proc .proc-shell{
  display:flex;
  flex-direction: column;
  gap: 14px;
}

.od-proc .proc-actions-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 980px){
  .od-proc .proc-actions-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .od-proc .proc-actions-grid{ grid-template-columns: 1fr; }
}

.od-proc .proc-action-card{
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  padding: 16px;
  display:flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  aspect-ratio: 1 / 1;
  box-shadow: 0 18px 40px rgba(2,6,23,.06);
  min-width: 0;
}

.od-proc .proc-action-top{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 10px;
}
.od-proc .proc-action-ico{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(2,6,23,.02);
  display:flex;
  align-items:center;
  justify-content:center;
}
.od-proc .proc-action-title{ font-weight: 950; letter-spacing: .2px; }
.od-proc .proc-action-sub{ font-size: 12px; color: rgba(2,6,23,.65); margin-top: 4px; line-height: 1.25; }

/* ferramentas: card quadrado, mas com conteúdo mais "horizontal" */
.od-proc .proc-tools{ aspect-ratio: 1 / 1; }
.od-proc .proc-tools-row{
  margin-top: 10px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap:wrap;
}

/* v1.0.13 — Estoque: cards + biblioteca em modal (padrão OdontoDoc) */
.od-stock .stock-shell{
  display:flex;
  flex-direction: column;
  gap: 14px;
}

.od-stock .stock-actions-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 980px){
  .od-stock .stock-actions-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .od-stock .stock-actions-grid{ grid-template-columns: 1fr; }
}

.od-stock .stock-action-card{
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  padding: 16px;
  display:flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  aspect-ratio: 1 / 1;
  box-shadow: 0 18px 40px rgba(2,6,23,.06);
  min-width: 0;
}

.od-stock .stock-action-top{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 10px;
}
.od-stock .stock-action-ico{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(2,6,23,.02);
  display:flex;
  align-items:center;
  justify-content:center;
}
.od-stock .stock-action-title{ font-weight: 950; letter-spacing: .2px; }
.od-stock .stock-action-sub{ font-size: 12px; color: rgba(2,6,23,.65); margin-top: 4px; line-height: 1.25; }

.od-stock .stock-tools{ aspect-ratio: 1 / 1; }
.od-stock .stock-tools-row{
  margin-top: 10px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap:wrap;
}


.od-pr .od-pr-grid{ gap: 14px; }

.od-pr .od-pr-textarea{
  min-height: 150px;
  resize: vertical;
  line-height: 1.35;
  padding: 12px 12px;
}

.od-pr .od-pr-history{ position: relative; }

.od-pr .od-pr-toolbar{
  position: sticky;
  top: 0;
  z-index: 2;
  padding-top: 6px;
  background: linear-gradient(to bottom, rgba(255,255,255,.98), rgba(255,255,255,.92));
  backdrop-filter: blur(4px);
}

.od-pr .od-pr-row{
  display: grid;
  grid-template-columns: 170px 1fr auto;
  gap: 10px;
  align-items: start;
}

@media (max-width: 900px){
  .od-pr .od-pr-row{ grid-template-columns: 1fr; }
  .od-pr .od-pr-actions{ justify-content: flex-start; }
  .od-pr .od-pr-time{ opacity: .85; }
}

.od-pr .od-pr-time{
  font-size: 12px;
  color: rgba(2,6,23,.68);
  padding-top: 6px;
}

.od-pr .od-pr-main{ min-width: 0; }
.od-pr .od-pr-title{ display:flex; gap: 8px; align-items:center; flex-wrap:wrap; }

.od-pr .od-pr-text{
  margin-top: 6px;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.od-pr .od-pr-row.is-expanded .od-pr-text{
  display: block;
  -webkit-line-clamp: initial;
  overflow: visible;
}

.od-pr .od-pr-toggle{
  margin-top: 8px;
  border: none;
  background: transparent;
  padding: 0;
  font-size: 12px;
  cursor: pointer;
  color: rgba(37,99,235,.95);
}

.od-pr .od-pr-toggle:hover{ text-decoration: underline; }



/* v0.5.7.1 — Prontuário: histórico imutável + cancelamento */
.od-pr .od-pr-history-full{ grid-column: 1 / -1; }

.od-pr .od-pr-row.is-canceled{
  border: 1px dashed rgba(220,38,38,.55) !important;
  background: rgba(220,38,38,.04);
}
.od-pr .od-pr-row.is-canceled .od-pr-text{
  color: #dc2626;
  text-decoration: line-through;
}
.od-pr .od-pr-row.is-canceled .lr-meta{
  color: rgba(185,28,28,.90);
}

/* v0.5.7.1 — Anamnese (checks em grade) */
.od-an-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 10px;
}
@media (max-width: 900px){
  .od-an-grid{ grid-template-columns: 1fr; }
}
.od-an-chk{
  display:flex;
  gap:8px;
  align-items:flex-start;
  font-size: 13px;
  color:#0f172a;
}
.od-an-chk input{ margin-top: 2px; }
.od-an-yn{
  display:flex;
  gap:12px;
  align-items:center;
  font-size:13px;
  color:#0f172a;
}
.od-an-yn label{ display:inline-flex; gap:6px; align-items:center; }


/* ==== ODONTODOC v0.5.3 — ONBOARDING ==== */
.onb{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:linear-gradient(180deg,#f8fafc,#ffffff);}
.onb-card{width:min(720px,100%);background:#fff;border-radius:16px;padding:22px;box-shadow:0 10px 30px rgba(0,0,0,.06);}
.onb-badge{display:inline-block;font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#2563eb;background:#eff6ff;padding:6px 10px;border-radius:999px;margin-bottom:10px;}
.onb-title{font-size:26px;font-weight:800;margin:0 0 6px;}
.onb-sub{color:#4b5563;margin:0 0 16px;line-height:1.45;}
.onb-steps{display:grid;gap:10px;margin:14px 0 16px;}
.onb-step{display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid #eef2f7;border-radius:12px;background:#fbfdff;}
.onb-step-n{width:28px;height:28px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:#2563eb;color:#fff;font-weight:800;font-size:13px;}
.onb-step-t{font-weight:700;margin-bottom:2px;}
.onb-step-d{color:#6b7280;font-size:13px;line-height:1.35;}
.onb-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;}
.onb-foot{margin-top:12px;color:#6b7280;font-size:12px;}

/* ==== v0.5.4 (patch) — Sidebar collapse UX (SAFE) ==== */
/* 1) Quando recolher, o layout deve usar a largura colapsada (sem "buraco" em branco) */
body.sb-collapsed{ --sb-w: var(--sb-collapsed); }

/* 2) Manter o botão/“seta” sempre visível ao recolher */
.sd-sidebar{ position: relative; }
body.sb-collapsed .sd-sidebar{ overflow: visible; }
body.sb-collapsed .sd-sb-collapse.btn-icon{
  position: absolute;
  right: -18px; /* meio pra fora da sidebar, mas ainda clicável */
  top: 16px;
  z-index: 30;
  box-shadow: 0 12px 24px rgba(2,6,23,.12);
}
/* seta aponta para o lado certo ao expandir */
body.sb-collapsed .sd-sb-collapse.btn-icon svg{ transform: rotate(180deg); }


/* Agenda: separador de semana */
.ag-week-sep{padding:10px 8px 6px 8px;}
.ag-week-date{font-weight:800;color:#0f172a;font-size:12px;}


/* v0.5.6+ — Pacientes: novos campos (categoria/retornos) */
.form-sep{ grid-column: 1 / -1; height:1px; background: rgba(2,6,23,.08); margin: 10px 0; border-radius: 999px; }
.form-hint{ font-size: 12px; color: var(--muted); margin-top: 6px; }

.catbar{ display:flex; flex-wrap: wrap; gap:8px; }
.catopt{
  display:flex; align-items:center; gap:8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(2,6,23,.10);
  background: #fff;
  cursor: pointer;
  font-weight: 750;
  font-size: 12.5px;
  transition: 140ms ease;
}
.catopt:hover{ transform: translateY(-1px); box-shadow: 0 10px 18px rgba(2,6,23,.06); }
.catopt.active{ border-color: rgba(2,6,23,.28); box-shadow: 0 12px 22px rgba(2,6,23,.08); }
.catdot{ width:10px; height:10px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(2,6,23,.18); }
.inline-2{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }



/* OD-ANAMNESE */



/* OD-ANAMNESE (layout na tela) */
.od-an-section{ margin-top:14px; }
.od-an-title{ font-size:12px; font-weight:700; letter-spacing:.02em; color:#0f172a; margin:0 0 8px; }
.od-an-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:10px 14px;
}
@media (max-width: 900px){ .od-an-grid{ grid-template-columns: 1fr; } }
/* Cada item: checkbox alinhado + texto colado, sem quebrar torto */
.od-an-item{
  display:grid;
  grid-template-columns: 18px 1fr;
  gap:10px;
  align-items:start;
}
.od-an-item input[type="checkbox"]{ margin-top:2px; }
.od-an-item span{ line-height:1.25; }

/* Gestante: campo "Quantas semanas?" ao lado */
.od-an-item-gest{
  grid-template-columns: 18px 1fr minmax(140px, 220px);
  align-items: center;
}
.od-an-item-gest .od-an-label{ line-height:1.25; }
.od-an-item-gest .od-an-extra{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.od-an-item-gest .od-an-extra-title{
  font-size:11px;
  color: var(--muted);
  font-weight:800;
}
.od-an-item-gest .od-an-extra input{ height:36px; }
@media (max-width: 520px){
  .od-an-item-gest{ grid-template-columns: 18px 1fr; }
  .od-an-item-gest .od-an-extra{ grid-column: 2; }
}



/* Odontograma: lista compacta + destaque */
.odonto-print-list{ column-count:2; column-gap:18px; }
.odonto-print-list li{ break-inside:avoid; }
.od-prob{ color:#b91c1c; }


.od-odont-wrap{ min-height: 0; overflow: auto; padding-right: 4px; }

/* ===== Modais de formulário (padrão “tela sobreposta”, com scroll vertical) ===== */
.od-modal-card.od-form-modal{
  width: min(1100px, calc(100vw - 20px));
  height: min(88vh, calc(100vh - 20px));
}
.od-modal-bd.od-form-modal-bd{
  display: block;
  overflow: auto;
  padding: 14px 16px 18px;
}
.od-modal-ft{
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  display:flex;
  justify-content:flex-end;
  gap: 10px;
  background:#fff;
}


/* Financeiro — filtro por data (chips + intervalo) */
.chip-group{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.btn-chip{
  padding: 8px 10px;
  border-radius: 999px;
  font-weight: 950;
  line-height: 1;
}
.btn-chip.is-active{
  background: rgba(37,99,235,.10);
  border-color: rgba(37,99,235,.35);
  color: var(--primary-600);
}
.fin-datebar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  margin-top: 10px;
}
.fin-dateinputs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.fin-dateinputs input[type="date"]{
  height: 40px;
  border-radius: 12px;
  min-width: 160px;
}

/* =========================
   Arquivos do Paciente (Prontuário)
   ========================= */
.pr-files-mini{
  border: 1px dashed rgba(148,163,184,.7);
  border-radius: 14px;
  padding: 10px 12px;
  color: #334155;
  background: rgba(255,255,255,.7);
}

.od-dropzone{
  border: 2px dashed rgba(148,163,184,.8);
  border-radius: 18px;
  padding: 14px 14px;
  background: rgba(255,255,255,.75);
  cursor: pointer;
  user-select: none;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.od-dropzone:hover{
  transform: translateY(-1px);
}
.od-dropzone.is-over{
  border-color: rgba(59,130,246,.9);
  background: rgba(59,130,246,.06);
}

.od-file-picked{
  padding: 8px 2px;
  color: #475569;
}

.od-files-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}

.od-file-card{
  display: flex;
  gap: 12px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(226,232,240,.9);
  background: rgba(255,255,255,.85);
  box-shadow: 0 6px 18px rgba(15,23,42,.06);
}

.od-file-thumb{
  width: 76px;
  height: 76px;
  border-radius: 16px;
  border: 1px solid rgba(226,232,240,.9);
  background: rgba(248,250,252,.9);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.od-file-thumb-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.od-file-thumb-ico{
  color: #0f172a;
  opacity: .85;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.od-file-info{
  flex: 1;
  min-width: 0;
}
.od-file-name{
  font-weight: 900;
  font-size: 14px;
  color: #0f172a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.od-file-sub{
  margin-top: 2px;
  font-size: 12px;
  color: #64748b;
}
.od-file-desc{
  margin-top: 6px;
  font-size: 12px;
  color: #334155;
}
.od-file-actions{
  margin-top: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.od-file-viewer{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.od-file-zoom{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(226,232,240,.9);
  background: rgba(255,255,255,.85);
}
.od-file-canvas{
  border-radius: 18px;
  border: 1px solid rgba(226,232,240,.9);
  background: rgba(255,255,255,.85);
  padding: 10px;
  max-height: 72vh;
  overflow: auto;
}
.od-view-img{
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  transition: transform .1s ease;
}
.od-view-iframe{
  width: 100%;
  height: 70vh;
  border: 0;
  border-radius: 14px;
  background: #fff;
}


/* ==== SPRINT B — AUTH (login/cadastro/recuperar/lock) ==== */
.auth-mode .app-shell{ grid-template-columns: 1fr; }
.auth-mode .app-sidebar{ display:none; }
.auth-mode .sb-overlay{ display:none; }
.auth-mode .app-main{ min-height:100vh; }

.auth-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:28px;
  background:
    radial-gradient(1200px circle at 20% -10%, rgba(37,99,235,.18), transparent 55%),
    radial-gradient(900px circle at 100% 0%, rgba(14,116,144,.16), transparent 48%),
    linear-gradient(180deg,#f8fafc,#ffffff);
}
.auth-card{width:min(560px,100%); background:#fff; border-radius:22px; padding:26px;
  box-shadow:0 24px 70px rgba(2,6,23,.10);
  border:1px solid rgba(148,163,184,.22);
}
.auth-brand{display:flex; gap:14px; align-items:center; margin-bottom:16px;}
.auth-brand-txt{min-width:0;}
.auth-logo{width:56px; height:56px; border-radius:18px; overflow:hidden; display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.85);
  border:1px solid rgba(148,163,184,.25);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 14px 28px rgba(2,6,23,.10);
}
.auth-logo img{width:100%; height:100%; display:block; object-fit:cover;}
.auth-title{font-weight:950; font-size:18px; margin:0; letter-spacing:-.02em;}
.auth-sub{color:#64748b; font-size:13px; line-height:1.35; max-width: 44ch;}
.auth-h1{font-size:26px; font-weight:950; margin:10px 0 12px; letter-spacing:-.02em;}
.auth-form{display:grid; gap:12px;}
.auth-actions{display:flex; gap:10px; justify-content:space-between; align-items:center; margin-top:4px;}
.auth-links{display:flex; gap:8px; align-items:center; justify-content:center; color:#64748b; font-size:13px; margin-top:10px;}
.auth-links .link{color:#2563eb; font-weight:800; text-decoration:none;}
.auth-foot{margin-top:14px; display:flex; justify-content:center;}

.grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
@media (max-width:560px){ .grid2{grid-template-columns:1fr;} .auth-actions{flex-direction:column-reverse; align-items:stretch;} }

.input-row{display:flex; gap:8px; align-items:center;}
.input-row input{flex:1;}
.recovery-code{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace; font-weight:900; font-size:20px; letter-spacing:.14em; padding:12px 14px; border-radius:14px; background:#0b1220; color:#e2e8f0; text-align:center; user-select:all;}

/* ==== TOAST ==== */
.toast-root{position:fixed; right:16px; top:16px; z-index:9999; display:flex; flex-direction:column; gap:10px; pointer-events:none;}
.toast{pointer-events:none; display:flex; gap:10px; align-items:center; min-width:260px; max-width:min(440px, calc(100vw - 32px)); padding:12px 12px; border-radius:14px; background:#0b1220; color:#e2e8f0; box-shadow:0 14px 40px rgba(0,0,0,.18); opacity:0; transform:translateY(-6px); transition: all .18s ease;}
.toast.show{opacity:1; transform:translateY(0);}
.toast .toast-dot{width:10px; height:10px; border-radius:999px; background:#94a3b8;}
.toast.toast-ok .toast-dot{background:#22c55e;}
.toast.toast-err .toast-dot{background:#ef4444;}
.toast.toast-warn .toast-dot{background:#f59e0b;}
.toast-msg{font-size:13px; line-height:1.25;}