/* Tema profesional: líneas rectas, aspecto sobrio, mejor celular */
:root{--p:#0d5c68;--p2:#127a89;--pd:#0e2f38;--soft:#e8f1f3;--ink:#16252b;--mut:#5e7177;--line:#d9e2e5;--bg:#f3f5f7;--r:4px;--sh:0 1px 2px rgba(14,47,56,.05)}
body{background:var(--bg);font-size:14px}
#side{background:#0e2f38;width:228px;padding:0}
.brand{padding:16px 16px 14px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:8px}
.brand .logo{border-radius:4px;background:#127a89;width:38px;height:38px;font-size:0}
.brand .logo::after{content:"";width:20px;height:20px;background:#fff;display:block;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 3c-3 0-4 3-4 5 0 3 2 4 2 8 0 3 1 5 2 5s1-4 3-4 2 4 3 4 2-2 2-5c0-4 2-5 2-8 0-2-1-5-4-5-2 0-3 1-5 1S9 3 7 3z'/%3E%3C/svg%3E") center/contain no-repeat;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 3c-3 0-4 3-4 5 0 3 2 4 2 8 0 3 1 5 2 5s1-4 3-4 2 4 3 4 2-2 2-5c0-4 2-5 2-8 0-2-1-5-4-5-2 0-3 1-5 1S9 3 7 3z'/%3E%3C/svg%3E") center/contain no-repeat}
#nav{padding:4px 10px}
#nav a{border-radius:3px;padding:9px 12px;gap:11px;font-weight:600;color:#b9d3d8;border-left:3px solid transparent}
#nav a .ic,#tabbar a .ic{width:18px;height:18px;flex:none;font-size:0}
#nav a:hover{background:rgba(255,255,255,.06)}
#nav a.on{background:rgba(255,255,255,.1);color:#fff;border-left-color:#4fc3d1}
#nav .bd{border-radius:3px}
#nav .sep{padding:14px 12px 5px}
.side-foot{padding:12px 16px;border-top:1px solid rgba(255,255,255,.08)}
#main{margin-left:228px}
#top{background:#fff;border-bottom:1px solid var(--line);padding:9px 20px;backdrop-filter:none}
.search input{border-radius:4px;background:#f3f5f7}
#gres{border-radius:4px}
#sucSel{border-radius:4px}
#me{display:flex;align-items:center;gap:8px;padding-left:10px;border-left:1px solid var(--line)}
.me-t{display:flex;flex-direction:column;line-height:1.2;text-align:right}.me-t b{font-size:13px}.me-t small{color:var(--mut);font-size:11px}
.icon-btn{border-radius:4px;border:1px solid var(--line);display:grid;place-items:center;width:36px;height:36px;font-size:0}.icon-btn .ic{width:18px;height:18px}
.menu-btn .ic{width:20px;height:20px}
.card{border-radius:4px;border:1px solid var(--line);box-shadow:var(--sh)}
.card.flat{background:#fafcfc}
.btn{border-radius:4px;padding:9px 16px;font-weight:600;letter-spacing:.01em}
.btn.sm{padding:6px 12px}
.btn.ghost{background:#fff}
.chip{border-radius:3px;font-weight:600;padding:2px 8px}
.av{border-radius:4px;background:var(--soft);color:var(--p)}
.av.lg{width:54px;height:54px;font-size:18px}
input.i,select.i,textarea.i{border-radius:4px}
.kpi .n{font-size:24px;font-weight:700;letter-spacing:-.01em}
.kpi .l{text-transform:uppercase;letter-spacing:.05em;font-size:10.5px}
h1{font-size:21px;font-weight:700}
th{background:#f7f9fa;font-size:11px}
.tabs{border-bottom:1px solid var(--line);margin:0 0 14px;padding:0}
.tabs a{padding:11px 16px;font-weight:600}
.mbox{border-radius:6px}
.mclose{font-size:24px}
.seg{border-radius:4px;background:#e6ecee}.seg button{border-radius:3px}
.seg.scroll{overflow-x:auto;max-width:100%}
.pal button{border-radius:3px}
#toast{border-radius:4px}
.ev{border-radius:3px}
.kcol{border-radius:4px;background:#eaeff1}.kcard{border-radius:4px;box-shadow:none;border:1px solid var(--line)}
.msg{border-radius:6px}.wa-in input{border-radius:4px}.qr button{border-radius:3px}
.wa-wrap{border-radius:4px;border:1px solid var(--line);box-shadow:none}
.cardx{border-radius:8px}
.paper{border-radius:2px}
.bar{height:7px;border-radius:2px}.bar i{border-radius:2px}
.grid.g6{grid-template-columns:repeat(6,minmax(0,1fr))}
.wr{color:var(--warn)}
/* alertas clínicas */
.alertbox{border-left:5px solid var(--line)}
.alertbox.rojo{border-left-color:var(--bad);background:#fff7f6}
.alertbox.amar{border-left-color:var(--warn);background:#fffbf1}
.alertbox.ok{border-left-color:var(--ok)}
.alist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 18px;margin-top:10px}
.alist .al{display:flex;gap:8px;align-items:baseline;font-size:13px;flex-wrap:wrap}
.dl{display:grid;grid-template-columns:110px 1fr;gap:7px 10px;margin-top:10px;font-size:13px}
.dl dt{color:var(--mut)}.dl dd{font-weight:600;word-break:break-word}
.chk{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
.chk label{display:flex;gap:8px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:4px;font-weight:600;font-size:13px;background:#fff}
.plist{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px;margin-top:14px}
.pit{border:1px solid var(--line);border-radius:4px;padding:12px;background:#fff}
.pit-h{display:flex;justify-content:space-between;gap:8px}
/* odontograma que cabe en pantalla */
.odo{overflow:visible;padding:4px 0}
.odo-side{display:flex;justify-content:space-between;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--mut);max-width:780px;margin:0 auto 4px}
.arch{min-width:0;width:100%;max-width:780px;margin:0 auto;gap:1px}
.arch .gap{width:8px;flex:none;border-left:2px solid var(--line);margin:0 3px;height:60px;align-self:center}
.tooth{flex:1 1 0;min-width:0;max-width:48px;width:auto}
.tooth svg{width:100%;height:auto;aspect-ratio:1}
.arch.child .tooth{max-width:60px}
.midline{height:12px;max-width:780px;margin:0 auto;border-bottom:1px dashed var(--line)}
.tooth.big{max-width:none;width:130px;gap:0}.tooth.big svg{width:130px;height:130px}
.tooth.big .lbl{display:none}
.tooth.sel .out{stroke:#ff7a59!important;stroke-width:3.4!important}
/* entrada */
body.locked #app{display:none}
#login{position:fixed;inset:0;z-index:300;background:linear-gradient(135deg,#0e2f38,#14515d);overflow:auto;display:flex;align-items:flex-start;justify-content:center;padding:28px 16px}
#login[hidden]{display:none}
.lgbox{background:#fff;border-radius:6px;padding:26px;width:100%;max-width:520px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.lg-brand{display:flex;gap:12px;align-items:center;padding-bottom:14px;border-bottom:1px solid var(--line)}
.lg-brand .logo{background:var(--p);color:#fff;width:42px;height:42px;display:grid;place-items:center;border-radius:4px}.lg-brand .logo svg{width:22px;height:22px}
.lg-brand b{display:block;font-size:17px}.lg-brand small{color:var(--mut)}
.lg-g{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--mut);margin:14px 0 6px;font-weight:700}
.lg-list{display:grid;gap:6px}
.lg-u{display:flex;gap:12px;align-items:center;text-align:left;padding:10px 12px;border:1px solid var(--line);border-radius:4px;background:#fff;width:100%}
.lg-u:hover{border-color:var(--p2);background:var(--soft)}
.lg-u b{display:block;font-size:14px}.lg-u small{color:var(--mut);font-size:12px}
.pin{text-align:center;font-size:26px;letter-spacing:.6em;padding:12px}
/* celular */
@media (max-width:980px){
  .menu-btn{display:grid}
  #side{width:268px;box-shadow:none}
  #top{padding:8px 12px;gap:8px}
  .me-t{display:none}#me{border:0;padding:0}
  .grid.g6{grid-template-columns:repeat(2,minmax(0,1fr))}
  #tabbar{border-top:1px solid var(--line);box-shadow:0 -2px 10px rgba(14,47,56,.06)}
  #tabbar a{padding:7px 0 5px;font-size:10.5px}
  #tabbar a .ic{width:22px;height:22px}
  #tabbar a.on{color:var(--p);box-shadow:inset 0 2px 0 var(--p)}
  #tabbar .bd{border-radius:3px}
}
@media (max-width:760px){
  .hm{display:none}
  .alist{grid-template-columns:1fr}
  .dl{grid-template-columns:96px 1fr}
  #modal{align-items:flex-end;padding:0}
  .mbox,.mbox.wide{border-radius:10px 10px 0 0;max-height:92vh;max-width:none;padding:18px 16px 24px}
  .btn{padding:11px 16px}.btn.sm{padding:8px 12px}
  input.i,select.i,textarea.i{font-size:16px;padding:11px}
  .card{padding:14px}
  #view{padding:12px 12px 88px}
  .ph{margin-bottom:12px}
  .tabs a{padding:10px 12px;font-size:13px}
  .kpi .n{font-size:21px}
  .arch .gap{height:44px;margin:0 2px}
  .tooth .lbl{font-size:8.5px;height:11px}
  .odo-side{font-size:9px}
  .tooth.big{width:112px}.tooth.big svg{width:112px;height:112px}
  .pal{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;margin-left:-4px;margin-right:-4px;padding-left:4px}.pal button{flex:none}
  .plist{grid-template-columns:1fr}
  .lgbox{padding:20px 16px}
  .phone{width:100%;max-width:300px}
  .row.sb{gap:8px}
  .wa-wrap{height:calc(100vh - 170px)}
  .ev-li .chip{align-self:flex-start}
}
@media (max-width:560px){.grid.g6{grid-template-columns:repeat(2,minmax(0,1fr))}.kpi .l{font-size:10px}}
.grid>*,.row>*,.col>*{min-width:0}
@media (max-width:980px){.g4,.g3,.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g21{grid-template-columns:minmax(0,1fr)}.dayhead .seg{max-width:100%;overflow-x:auto}}
@media (max-width:560px){.g3,.g2{grid-template-columns:minmax(0,1fr)}.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.dayhead>b{min-width:0!important;flex:1 1 130px}
@media (max-width:980px){#main{margin-left:0}}

.menu-btn{display:none}
@media (max-width:980px){.menu-btn{display:grid}}
.side-foot .btn.ghost{background:transparent;color:#cfe9ec;border-color:rgba(255,255,255,.28)}
/* asistente */
#asBtn{position:fixed;right:18px;bottom:18px;z-index:60;display:flex;align-items:center;gap:8px;background:var(--p);color:#fff;padding:12px 16px;border-radius:4px;font-weight:700;box-shadow:0 6px 20px rgba(14,47,56,.3)}
#asBtn[hidden],#asPanel[hidden]{display:none}
#asBtn:hover{background:var(--p2)}
#asPanel{position:fixed;right:18px;bottom:76px;z-index:61;width:380px;max-width:calc(100vw - 24px);height:540px;max-height:calc(100vh - 100px);background:#fff;border:1px solid var(--line);border-radius:6px;box-shadow:0 12px 40px rgba(14,47,56,.28);display:flex;flex-direction:column;overflow:hidden}
.as-h{display:flex;justify-content:space-between;align-items:center;background:var(--pd);color:#fff;padding:11px 14px}
.as-h b{display:block}.as-h small{opacity:.75;font-size:11px}.as-h button{color:#fff;font-size:24px;width:30px;height:30px}
#asMsgs{flex:1;overflow:auto;padding:12px;display:flex;flex-direction:column;gap:8px;background:#f6f8f9}
.as-m{max-width:88%;padding:9px 12px;border-radius:6px;font-size:13.5px;line-height:1.45}
.as-m.u{align-self:flex-end;background:var(--p);color:#fff}
.as-m.b{align-self:flex-start;background:#fff;border:1px solid var(--line)}
.as-ol{margin:6px 0 2px 18px}.as-ol li{margin:3px 0}
.as-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.as-acts button{background:var(--soft);color:var(--p);border:1px solid #c8dde1;border-radius:3px;padding:6px 10px;font-weight:700;font-size:12.5px;text-align:left}
.as-acts button:hover{background:#d8e9ec}
#asChips{display:flex;gap:6px;overflow-x:auto;padding:8px 10px;border-top:1px solid var(--line);background:#fff;scrollbar-width:none}
#asChips button{flex:none;background:#fff;border:1px solid var(--line);border-radius:3px;padding:5px 10px;font-size:12px;font-weight:600;color:var(--pd)}
.as-in{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line);background:#fff}
.as-in input{flex:1;border:1px solid var(--line);border-radius:4px;padding:10px 12px;outline:none;font-size:14px}
.as-in input:focus{border-color:var(--p2)}
body.locked #asBtn,body.locked #asPanel{display:none}
@media (max-width:980px){#asBtn{bottom:74px;right:12px;padding:11px 13px}#asBtn span{display:none}#asPanel{right:0;left:0;bottom:0;width:auto;max-width:none;height:78vh;max-height:none;border-radius:10px 10px 0 0}.as-in input{font-size:16px}}