/*
  Ultraclini 2.0 — Design System 57
  Camada visual profissional — sem regras de negócio.
  Objetivo: transformar o conjunto de telas em um produto visualmente coerente,
  premium e clínico, preservando a funcionalidade existente.
*/
:root{
  --uc-ink:#171612;
  --uc-ink-2:#23221c;
  --uc-ink-3:#35332b;
  --uc-gold:#B08D3F;
  --uc-gold-2:#C6A55A;
  --uc-gold-soft:#F2E9D5;
  --uc-cream:#F4F2EC;
  --uc-surface:#FFFFFF;
  --uc-surface-2:#FBFAF7;
  --uc-surface-3:#F7F5F0;
  --uc-line:#E5E1D8;
  --uc-line-strong:#D0CABE;
  --uc-muted:#777268;
  --uc-muted-2:#969188;
  --uc-green:#3C7052;
  --uc-green-soft:#EAF3ED;
  --uc-amber:#A7752E;
  --uc-amber-soft:#F6EDDF;
  --uc-red:#9C473D;
  --uc-red-soft:#F6E9E5;
  --uc-blue:#456F99;
  --uc-blue-soft:#EAF1F7;
  --uc-shadow-1:0 1px 2px rgba(23,22,18,.035),0 8px 26px rgba(23,22,18,.045);
  --uc-shadow-2:0 16px 44px rgba(23,22,18,.12);
  --uc-shadow-3:0 2px 7px rgba(23,22,18,.045);
  --uc-radius:16px;
  --uc-radius-sm:11px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--uc-cream)}
body{
  margin:0 !important;
  background:
    radial-gradient(circle at 86% 8%,rgba(176,141,63,.06),transparent 26%),
    radial-gradient(circle at 8% 34%,rgba(255,255,255,.72),transparent 24%),
    var(--uc-cream) !important;
  color:var(--uc-ink) !important;
  font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif !important;
  font-size:13px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* Marca d’água institucional — presente em todas as telas que usam o Design System.
   A imagem é transparente para não criar um bloco branco sobre o fundo. */
body::before{
  content:"";
  position:fixed;
  right:3vw;
  bottom:3vh;
  width:min(500px,36vw);
  height:min(500px,36vw);
  background:url('logo-marca-dagua.png') center/contain no-repeat;
  opacity:.105;
  pointer-events:none;
  z-index:0;
  mix-blend-mode:multiply;
}
::selection{background:rgba(176,141,63,.18);color:var(--uc-ink)}

/* ---------- Marca / cabeçalho global ---------- */
header{
  min-height:74px !important;
  height:auto !important;
  padding:8px 28px !important;
  display:flex !important;
  align-items:center !important;
  gap:16px !important;
  background:linear-gradient(180deg,#171612 0%,#12110E 100%) !important;
  border:0 !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
  box-shadow:0 8px 28px rgba(0,0,0,.10) !important;
  position:relative;
  z-index:20;
}
header::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent 0%,rgba(176,141,63,.65) 20%,rgba(198,165,90,.65) 50%,rgba(176,141,63,.65) 80%,transparent 100%);
  opacity:.7;
}
.brand-group{display:flex !important;align-items:center !important;gap:12px !important;min-width:0}
.logo-img{
  height:58px !important;
  width:auto !important;
  max-width:78px !important;
  object-fit:contain;
  display:block !important;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.22));
}
.logo{
  height:52px !important;
  width:auto !important;
  max-width:72px !important;
  object-fit:contain;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.20));
}
.brand-text{display:flex !important;flex-direction:column !important;justify-content:center !important;min-width:0}
.brand-text .name,.brand{
  font-family:'Fraunces',Georgia,serif !important;
  font-weight:500 !important;
  color:#F7F5EE !important;
  letter-spacing:.018em !important;
  line-height:1.05 !important;
}
.brand-text .name{font-size:19px !important}
.brand{font-size:19px !important}
.brand-text .tagline,.sub{
  margin-top:4px !important;
  color:#D0B36C !important;
  font-size:10.5px !important;
  letter-spacing:.08em !important;
  text-transform:uppercase;
  line-height:1.25 !important;
}
.header-date{color:#D7D2C7 !important;font-size:11px !important;letter-spacing:.03em}
#user-badge,#user{font-size:11px !important;color:#E8E3D8 !important}
#user-badge > *,#user > *{border-color:rgba(255,255,255,.13) !important}

/* ---------- Estrutura / área de trabalho ---------- */
main,.wrap,.layout{
  position:relative;
  z-index:1;
}
main{
  max-width:1240px !important;
  margin:0 auto !important;
  padding:26px 28px 64px !important;
}
.wrap{
  max-width:1160px !important;
  margin:0 auto !important;
  padding:24px 28px 64px !important;
}
.layout{
  max-width:1320px !important;
  margin:0 auto !important;
  display:flex !important;
  align-items:flex-start !important;
}
body > main:first-of-type,
.layout > main{min-height:calc(100vh - 74px)}

/* ---------- Navegação ---------- */
.sidebar{
  width:218px !important;
  flex:0 0 218px !important;
  position:sticky !important;
  top:18px !important;
  padding:24px 14px 80px 10px !important;
}
.sidebar::before{
  content:"ULTRACLINI 2.0";
  display:block;
  margin:0 12px 12px;
  font-size:9px;
  font-weight:800;
  letter-spacing:.15em;
  color:#A7A198;
}
.sidebar a{
  display:flex !important;
  align-items:center !important;
  min-height:38px !important;
  padding:8px 12px !important;
  margin:3px 0 !important;
  border:1px solid transparent !important;
  border-radius:11px !important;
  background:transparent !important;
  color:#716D64 !important;
  font-size:12px !important;
  font-weight:650 !important;
  text-decoration:none !important;
  transition:all .18s ease !important;
}
.sidebar a:hover{background:rgba(242,233,213,.72) !important;color:#6C5421 !important;border-color:#E4D6B5 !important;transform:translateX(2px)}
.sidebar a.ativo,.sidebar a.active,.sidebar a[aria-current="page"]{
  background:var(--uc-gold-soft) !important;
  color:#5E4A1E !important;
  border-color:#E3D3AE !important;
  box-shadow:0 5px 16px rgba(176,141,63,.09) !important;
}

/* ---------- Títulos / hierarquia ---------- */
h1,h2,h3,h4,.title,.section-title{
  color:var(--uc-ink) !important;
  font-family:'Fraunces',Georgia,serif !important;
  letter-spacing:-.015em !important;
}
h1,.title{font-weight:500 !important}
h1{font-size:28px !important;line-height:1.15 !important;margin:0 0 16px !important}
h2{font-size:21px !important;font-weight:500 !important}
h3{font-size:16px !important}
.desc,.subtitulo,.meta,.muted,.helper,.hint,.small,.list-meta{color:var(--uc-muted) !important}
.section-label{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  margin:28px 0 11px 2px !important;
  color:#777167 !important;
  font-size:9.5px !important;
  font-weight:800 !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
}
.section-label::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,var(--uc-line-strong),transparent)}

/* ---------- Superfícies ---------- */
.card,.panel,.section,.box,.journey-card,.fact,.results,.selected-patient,.resumo-tile,.tile,.result-row,.item{
  border-color:var(--uc-line) !important;
}
.card,.panel,.section,.box,.journey-card{
  background:rgba(255,255,255,.94) !important;
  border:1px solid var(--uc-line) !important;
  border-radius:var(--uc-radius) !important;
  box-shadow:var(--uc-shadow-1) !important;
}
.card{margin-bottom:18px !important}
.card:hover{box-shadow:0 10px 30px rgba(23,22,18,.055) !important}
.card h2{color:var(--uc-ink-3) !important}
.tile{
  background:linear-gradient(180deg,#fff 0%,#FBFAF7 100%) !important;
  border-radius:15px !important;
  box-shadow:var(--uc-shadow-3) !important;
}
.tile:hover,.result-row:hover,.resumo-tile:hover{border-color:#D1BC88 !important;box-shadow:0 12px 30px rgba(23,22,18,.07) !important}

/* ---------- Página inicial ---------- */
.layout > main{max-width:none !important;flex:1 !important;padding-left:8px !important}
.layout > main > h1{font-size:34px !important;margin-top:6px !important}
.layout > main > h1::after{content:"";display:block;width:54px;height:3px;background:linear-gradient(90deg,var(--uc-gold),transparent);border-radius:10px;margin-top:10px}
a.tile.tile-lg{
  min-height:154px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  padding:26px 20px !important;
  text-align:left !important;
}
a.tile.tile-lg .icon{font-size:26px !important;margin-bottom:14px !important}
a.tile.tile-lg .title{font-size:19px !important;margin-bottom:7px !important}
a.tile .desc{max-width:34ch}
details.folder{
  background:rgba(255,255,255,.92) !important;
  border:1px solid var(--uc-line) !important;
  border-radius:15px !important;
  box-shadow:var(--uc-shadow-3) !important;
}
details.folder[open]{border-color:#D3C095 !important;box-shadow:0 12px 30px rgba(23,22,18,.06) !important}
details.folder summary{
  padding:17px 20px !important;
  font-size:16px !important;
  color:var(--uc-ink-3) !important;
}
details.folder summary .icon{font-size:20px !important}
details.folder summary .count{background:var(--uc-surface-3) !important;color:#6D675D !important;border:1px solid var(--uc-line) !important}

/* ---------- Controles ---------- */
input,select,textarea{
  color:var(--uc-ink) !important;
  background:#fff !important;
  border:1px solid var(--uc-line-strong) !important;
  border-radius:11px !important;
  min-height:42px;
  font-family:'Inter',sans-serif !important;
  box-shadow:inset 0 1px 1px rgba(23,22,18,.018);
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease,transform .16s ease !important;
}
input::placeholder,textarea::placeholder{color:#A6A097 !important}
input:focus,select:focus,textarea:focus{
  outline:none !important;
  border-color:#B89347 !important;
  box-shadow:0 0 0 3px rgba(176,141,63,.12),0 3px 10px rgba(23,22,18,.035) !important;
}
label,.field label{color:#625E55 !important;font-weight:650 !important;letter-spacing:.005em}
button,.btn,input[type="button"],input[type="submit"],a.btn{
  min-height:40px;
  border-radius:10px !important;
  font-family:'Inter',sans-serif !important;
  font-size:11.5px !important;
  font-weight:700 !important;
  letter-spacing:.005em !important;
  transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease,background .14s ease,color .14s ease,opacity .14s ease !important;
}
button:hover,.btn:hover,input[type="button"]:hover,input[type="submit"]:hover,a.btn:hover{transform:translateY(-1px)}
button:active,.btn:active,a.btn:active{transform:translateY(0)}
button:focus-visible,.btn:focus-visible,a.btn:focus-visible{outline:3px solid rgba(176,141,63,.16) !important;outline-offset:2px}
.primary,.btn-primary,.btn-black{background:var(--uc-ink) !important;color:#fff !important;border:1px solid var(--uc-ink) !important;box-shadow:0 7px 16px rgba(23,22,18,.12) !important}
.primary:hover,.btn-primary:hover,.btn-black:hover{background:#25231D !important}
.secondary,.btn-secondary,.outline{background:#fff !important;color:#2D2B25 !important;border:1px solid var(--uc-line-strong) !important;box-shadow:none !important}
.ghost{background:transparent !important;color:#666157 !important;border-color:transparent !important;box-shadow:none !important}
.btn-green{background:var(--uc-green) !important;border-color:var(--uc-green) !important;color:#fff !important}
.btn-amber{background:var(--uc-amber) !important;border-color:var(--uc-amber) !important;color:#fff !important}
.btn-delete{color:var(--uc-red) !important}

/* ---------- Pesquisa ---------- */
.search-bar,.search{
  display:flex !important;
  align-items:center;
  gap:10px !important;
  background:rgba(255,255,255,.86) !important;
  border:1px solid var(--uc-line) !important;
  border-radius:14px !important;
  padding:8px !important;
  box-shadow:var(--uc-shadow-3) !important;
}
.search-bar input,.search input{border:0 !important;box-shadow:none !important;background:transparent !important;flex:1}
.search-bar input:focus,.search input:focus{box-shadow:none !important}

/* ---------- Status ---------- */
.badge,.status,.tag,.chip,.pill,.ortho-status-badge{
  border-radius:999px !important;
  font-weight:750 !important;
  letter-spacing:.01em !important;
}
.status-green,.badge.green,.chip.green,.pill.green{background:var(--uc-green-soft) !important;color:var(--uc-green) !important;border:1px solid #D4E6DB !important}
.status-amber,.badge.amber,.chip.amber,.pill.amber{background:var(--uc-amber-soft) !important;color:var(--uc-amber) !important;border:1px solid #EBD9BA !important}
.status-red,.badge.red,.chip.red,.pill.red{background:var(--uc-red-soft) !important;color:var(--uc-red) !important;border:1px solid #ECD4CF !important}
.status-blue,.badge.blue,.chip.blue,.pill.blue{background:var(--uc-blue-soft) !important;color:var(--uc-blue) !important;border:1px solid #D7E3ED !important}

/* ---------- Tabelas / listas ---------- */
table{border-collapse:separate !important;border-spacing:0 !important;width:100% !important;border:1px solid var(--uc-line) !important;border-radius:14px !important;overflow:hidden !important;background:#fff}
thead th{background:#F5F3EE !important;color:#716B61 !important;text-transform:uppercase !important;letter-spacing:.07em !important;font-size:9px !important;font-weight:800 !important;border-bottom:1px solid var(--uc-line-strong) !important;padding:11px 12px !important}
tbody td{border-bottom:1px solid #EFEAE1 !important;padding:11px 12px !important;vertical-align:middle}
tbody tr:last-child td{border-bottom:0 !important}
tbody tr:hover td{background:#FCFAF5 !important}
.result-row{background:#fff !important;border:1px solid var(--uc-line) !important;border-radius:12px !important;padding:11px 13px !important}

/* ---------- Agenda ---------- */
.toolbar{
  max-width:1240px !important;
  margin:14px auto 0 !important;
  padding:10px 14px !important;
  background:rgba(255,255,255,.9) !important;
  border:1px solid var(--uc-line) !important;
  border-radius:15px !important;
  box-shadow:var(--uc-shadow-3) !important;
}
.toolbar button{background:#fff !important;border:1px solid var(--uc-line-strong) !important;color:#403D35 !important}
.toolbar .data-titulo{font-family:'Fraunces',Georgia,serif !important;font-size:16px !important;color:var(--uc-ink) !important}
.legenda{color:#7D776D !important}
.grid-semana,.grid-mes{border:1px solid var(--uc-line) !important;border-radius:15px !important;box-shadow:var(--uc-shadow-3) !important}
.dia-header,.mes-cabecalho{background:#F3F1EB !important;border-color:var(--uc-line) !important}
.dia-header .dia-nome,.mes-cabecalho span{font-family:'Inter',sans-serif !important;font-size:9.5px !important;text-transform:uppercase;letter-spacing:.08em;font-weight:800}
.dia-header .dia-data{color:#8C877D !important}
.dia-col,.mes-dia{border-color:#ECE8E0 !important}
.dia-col.dia-destacado,.mes-dia.hoje{background:linear-gradient(180deg,#F5EEDD,#F9F5EA) !important;box-shadow:inset 0 0 0 1px #D4BC80 !important}
.appt-item{border-radius:9px !important;box-shadow:0 3px 9px rgba(0,0,0,.10);padding:7px 9px !important}
.btn-add-dia{border-radius:9px !important;background:#FBFAF7 !important}

/* ---------- Indicadores / dashboard ---------- */
.resumo-tile,.total-box,.ortho-kpi,.ortho-filter{
  background:linear-gradient(180deg,#fff 0%,#FBFAF7 100%) !important;
  border:1px solid var(--uc-line) !important;
  border-radius:14px !important;
  box-shadow:var(--uc-shadow-3) !important;
}
.resumo-tile.ativo,.ortho-filter.active{border-color:#C3A761 !important;box-shadow:0 0 0 2px rgba(176,141,63,.11),0 10px 24px rgba(23,22,18,.06) !important}
.resumo-tile .num,.ortho-kpi .kvalue,.ortho-filter .fvalue{font-family:'Fraunces',Georgia,serif !important;font-weight:500 !important;color:var(--uc-ink) !important}

/* ---------- Ortodontia: tirar a sensação de protótipo ---------- */
.ortho-portfolio-head{padding-top:4px !important;margin-bottom:14px !important}
.ortho-portfolio-head h2{font-size:26px !important;font-weight:500 !important}
.ortho-portfolio-note{max-width:900px !important;color:#7B756B !important;line-height:1.55 !important}
.ortho-portfolio-grid{gap:10px !important}
.ortho-filter{min-height:92px !important;padding:13px 12px !important;text-align:left !important}
.ortho-filter .flabel{font-size:9px !important;letter-spacing:.10em !important;color:#827C72 !important}
.ortho-filter .fvalue{font-size:26px !important;margin-top:8px !important}
.ortho-portfolio-row{border:1px solid var(--uc-line) !important;border-radius:14px !important;padding:14px 16px !important;box-shadow:var(--uc-shadow-3) !important}
.ortho-portfolio-row:hover{border-color:#D0BD90 !important;box-shadow:0 10px 26px rgba(23,22,18,.06) !important}
.ortho-portfolio-name{font-size:14px !important}
.ortho-mini-btn{border-radius:9px !important;background:#fff !important}
.ortho-mini-btn.whatsapp{background:#3B815F !important;border-color:#3B815F !important}
.ortho-action{border-radius:9px !important}

/* ---------- Abas / filtros ---------- */
.tab,.filtro-btn,.toggle-btn,.tipo-btn,.tipo-pessoa-btn{
  border:1px solid var(--uc-line) !important;
  background:#fff !important;
  border-radius:10px !important;
  color:#686258 !important;
}
.tab.active,.filtro-btn.ativo,.toggle-btn.ativo,.tipo-btn.ativo,.tipo-pessoa-btn.ativo{
  background:var(--uc-ink) !important;
  color:#fff !important;
  border-color:var(--uc-ink) !important;
  box-shadow:0 7px 16px rgba(23,22,18,.10) !important;
}

/* ---------- Alertas ---------- */
.config-warning{border-radius:11px !important;box-shadow:none !important}
.notice,.status-msg,.error-note{border-radius:11px !important}
.empty,.empty-msg{color:#8C867C !important}

/* ---------- Modais ---------- */
.modal-overlay,.modal-overlay.show,.overlay{background:rgba(19,18,14,.62) !important;backdrop-filter:blur(6px) !important}
.modal,.modal-content,.modal-card,.modal-dialog,.recepcao-modal{
  background:rgba(255,255,255,.985) !important;
  border:1px solid rgba(229,225,216,.96) !important;
  border-radius:18px !important;
  box-shadow:var(--uc-shadow-2) !important;
}
.modal h2,.modal-content h2,.modal-card h2,.modal-dialog h2{font-size:20px !important}
.modal-header{border-bottom:1px solid var(--uc-line) !important}
.modal-footer{border-top:1px solid var(--uc-line) !important}
.btn-close-x,.recepcao-modal-close{color:#777167 !important}

/* ---------- Microinterações ---------- */
a,button,input,select,textarea{ -webkit-tap-highlight-color:transparent }
a:not(.btn):not(.tile):not(.sidebar a){color:inherit}
button:not(:disabled):hover{filter:brightness(1.015)}
button:not(:disabled):active{filter:brightness(.99)}

/* ---------- Responsividade ---------- */
@media (max-width:980px){
  .layout{max-width:none !important}
  .sidebar{display:none !important}
  .layout > main{padding-left:24px !important}
  .ortho-portfolio-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
}
@media (max-width:760px){
  header{padding:8px 16px !important;min-height:66px !important}
  .logo-img{height:50px !important;max-width:68px !important}
  .logo{height:46px !important;max-width:64px !important}
  .brand-text .name,.brand{font-size:16px !important}
  .brand-text .tagline,.sub{font-size:9px !important}
  main,.wrap,.layout > main{padding:20px 16px 48px !important}
  h1{font-size:24px !important}
  .toolbar{margin:10px 12px 0 !important;padding:8px !important}
  .ortho-portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  body::after{width:240px;height:240px;opacity:.018}
}
@media (max-width:520px){
  .ortho-portfolio-grid{grid-template-columns:1fr 1fr !important}
  .ortho-portfolio-row{grid-template-columns:1fr !important}
  .ortho-portfolio-actions{justify-content:flex-start !important}
  table{font-size:11px !important}
  thead th,tbody td{padding:9px 8px !important}
}

/* ---------- Impressão ---------- */
@media print{
  header{box-shadow:none !important;position:static !important}
  body{background:#fff !important}
  body::after{display:none !important}
  .sidebar{display:none !important}
  .no-print{display:none !important}
}