/* ============ Vigía Dental — prototipo local ============ */
:root{
  --paper:#F4F6F2;
  --surface:#FFFFFF;
  --surface-2:#EBEFE8;
  --ink:#16241F;
  --soft:#5A6A63;
  --teal:#0E3B32;
  --teal-mid:#2F6F5E;
  --green:#4C9A72;
  --amber:#E0A63C;
  --red:#C24B3F;
  --line:rgba(22,36,31,.12);
  --line-soft:rgba(22,36,31,.07);
  --shadow:0 1px 2px rgba(22,36,31,.05), 0 8px 24px rgba(22,36,31,.07);
  --shadow-lg:0 4px 12px rgba(22,36,31,.10), 0 24px 60px rgba(22,36,31,.16);
  --r:14px;
  --r-sm:9px;
  --sb-w:236px;
  --sb-w-min:64px;
}
[data-theme="dark"]{
  --paper:#0F1714;
  --surface:#17211D;
  --surface-2:#1E2A25;
  --ink:#E8EEEA;
  --soft:#93A49C;
  --teal:#123F35;
  --teal-mid:#63A98F;
  --line:rgba(232,238,234,.13);
  --line-soft:rgba(232,238,234,.07);
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
  --shadow-lg:0 4px 12px rgba(0,0,0,.4), 0 24px 60px rgba(0,0,0,.5);
}
*{box-sizing:border-box;}
html,body{margin:0; height:100%;}
body{
  background:var(--paper); color:var(--ink);
  font-family:'Inter',sans-serif; font-size:14.5px;
  -webkit-font-smoothing:antialiased;
  transition:background .3s,color .3s;
}
h1,h2,h3{font-family:'Fraunces',serif; font-weight:500; margin:0;}
.mono{font-family:'IBM Plex Mono',monospace; letter-spacing:.06em;}
.hidden{display:none !important;}
button{font-family:inherit; cursor:pointer;}
input,select,textarea{font-family:inherit;}
:focus-visible{outline:2px solid var(--teal-mid); outline-offset:2px;}

/* ---------- Gate (selector de perfil) ---------- */
.gate{
  min-height:100dvh; display:flex; align-items:center; justify-content:center;
  padding:24px;
  background:
    radial-gradient(1000px 500px at 85% -10%, rgba(76,154,114,.18), transparent 60%),
    radial-gradient(800px 500px at -10% 110%, rgba(14,59,50,.14), transparent 55%),
    var(--paper);
}
.gate-card{
  width:100%; max-width:520px; background:var(--surface);
  border:1px solid var(--line-soft); border-radius:20px;
  padding:40px 36px; box-shadow:var(--shadow-lg);
}
.gate-brand{display:flex; align-items:center; gap:10px; font-family:'Fraunces',serif; font-size:20px; font-weight:600;}
.dot{width:10px;height:10px;border-radius:50%;background:var(--green); flex:none; box-shadow:0 0 0 4px rgba(76,154,114,.18);}
.gate-tag{font-size:10.5px; color:var(--teal-mid); margin:14px 0 4px;}
.gate-card h1{font-size:26px; line-height:1.15; margin:6px 0 8px;}
.gate-sub{color:var(--soft); font-size:14px; line-height:1.55; margin:0 0 22px;}
.gate-roles{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
@media (max-width:480px){ .gate-roles{grid-template-columns:1fr;} }
.role-btn{
  text-align:left; background:var(--surface-2); border:1px solid var(--line-soft);
  border-radius:var(--r); padding:16px 16px 14px;
  transition:transform .15s, border-color .15s, box-shadow .15s; color:var(--ink);
}
.role-btn:hover{transform:translateY(-2px); border-color:var(--teal-mid); box-shadow:var(--shadow);}
.role-btn .r-ico{font-size:22px; display:block; margin-bottom:8px;}
.role-btn .r-name{font-weight:600; font-size:14.5px; display:block;}
.role-btn .r-desc{font-size:12px; color:var(--soft); display:block; margin-top:3px; line-height:1.4;}
.gate-foot{font-size:11.5px; color:var(--soft); margin:22px 0 0; text-align:center;}
.r-lock{font-size:11px; opacity:.75;}
.gate-card.login-mode{max-width:400px;}
#gate-login .field input{background:var(--surface-2);}
.pass-wrap{position:relative;}
.pass-wrap input{padding-right:44px !important; width:100%;}
.eye-btn{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  background:none; border:none; color:var(--soft); padding:6px;
  display:flex; align-items:center; border-radius:8px;
  transition:color .15s;
}
.eye-btn:hover{color:var(--teal-mid);}
.btn-block{width:100%; margin-top:8px;}
.perm-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:0 16px;
  background:var(--surface-2); border:1px solid var(--line-soft);
  border-radius:var(--r-sm); padding:10px 14px 14px;
}
@media (max-width:560px){ .perm-grid{grid-template-columns:1fr;} }

/* ---------- App shell ---------- */
.app{display:flex; min-height:100dvh;}
.sidebar{
  width:var(--sb-w); flex:none; background:var(--surface);
  border-right:1px solid var(--line-soft);
  display:flex; flex-direction:column;
  position:sticky; top:0; height:100dvh;
  transition:width .25s ease;
  z-index:30;
}
.app.sb-min .sidebar{width:var(--sb-w-min);}
.app.sb-min .sb-label, .app.sb-min .sb-brand-name{display:none;}
.sb-brand{
  display:flex; align-items:center; gap:10px; padding:18px 16px 14px;
  font-family:'Fraunces',serif; font-size:17px; font-weight:600;
  border-bottom:1px solid var(--line-soft); position:relative;
}
.sb-collapse{
  margin-left:auto; background:none; border:1px solid var(--line-soft); border-radius:8px;
  width:26px;height:26px; color:var(--soft); font-size:14px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:transform .25s;
}
.app.sb-min .sb-collapse{transform:rotate(180deg); position:absolute; right:-13px; top:20px; background:var(--surface); z-index:5;}
.sb-nav{flex:1; padding:12px 10px; display:flex; flex-direction:column; gap:3px; overflow-y:auto;}
.sb-item{
  display:flex; align-items:center; gap:12px; width:100%;
  padding:10px 12px; border-radius:10px; border:none; background:none;
  color:var(--soft); font-size:13.5px; font-weight:500; text-align:left;
  transition:background .15s,color .15s; white-space:nowrap;
}
.sb-item:hover{background:var(--surface-2); color:var(--ink);}
.sb-item.active{background:var(--teal); color:#fff;}
[data-theme="dark"] .sb-item.active{background:var(--green); color:#08120E;}
.sb-ico{width:20px; text-align:center; font-size:15px; flex:none;}
.sb-badge{
  margin-left:auto; background:var(--red); color:#fff; font-size:10px; font-weight:700;
  min-width:17px; height:17px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  padding:0 5px;
}
.app.sb-min .sb-badge{display:none;}
.sb-foot{padding:10px; border-top:1px solid var(--line-soft); display:flex; flex-direction:column; gap:2px;}

.main{flex:1; min-width:0; display:flex; flex-direction:column;}
.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:14px;
  padding:12px 22px;
  background:color-mix(in srgb, var(--paper) 80%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.tb-menu{display:none; background:none; border:none; font-size:20px; color:var(--ink); padding:4px;}
.tb-title{font-family:'Fraunces',serif; font-size:19px; font-weight:600;}
.tb-right{margin-left:auto; display:flex; align-items:center; gap:10px;}
.role-chip{
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.05em;
  background:var(--surface); border:1px solid var(--line); border-radius:999px;
  padding:6px 12px; color:var(--teal-mid);
}
.content{flex:1; padding:26px 22px 90px; max-width:1080px; width:100%; margin:0 auto;}
@media (min-width:900px){ .content{padding-bottom:40px;} }

/* Bottom bar (móvil) */
.bottombar{
  display:none; position:fixed; bottom:0; left:0; right:0; z-index:25;
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter:blur(12px);
  border-top:1px solid var(--line-soft);
  padding:6px 8px calc(6px + env(safe-area-inset-bottom));
  justify-content:space-around;
}
.bb-item{
  background:none; border:none; color:var(--soft);
  display:flex; flex-direction:column; align-items:center; gap:2px;
  font-size:10px; font-weight:600; padding:6px 10px; border-radius:10px; position:relative;
}
.bb-item .bb-ico{font-size:18px;}
.bb-item.active{color:var(--teal-mid);}
.bb-item.active::after{content:""; position:absolute; top:0; width:18px; height:3px; border-radius:2px; background:var(--teal-mid);}
@media (max-width:900px){
  .sidebar{position:fixed; left:0; transform:translateX(-100%); transition:transform .25s; box-shadow:var(--shadow-lg);}
  .app.sb-open .sidebar{transform:translateX(0);}
  .app.sb-min .sidebar{width:var(--sb-w);}
  .app.sb-min .sb-label,.app.sb-min .sb-brand-name{display:inline;}
  .sb-collapse{display:none;}
  .tb-menu{display:block;}
  .bottombar{display:flex;}
}
.scrim{position:fixed; inset:0; background:rgba(10,18,15,.45); z-index:28;}

/* ---------- Componentes ---------- */
.grid{display:grid; gap:16px;}
.g2{grid-template-columns:1fr 1fr;}
.g3{grid-template-columns:repeat(3,1fr);}
.g4{grid-template-columns:repeat(4,1fr);}
@media (max-width:860px){ .g3,.g4{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .g2,.g3,.g4{grid-template-columns:1fr;} }

.card{
  background:var(--surface); border:1px solid var(--line-soft);
  border-radius:var(--r); padding:20px; box-shadow:var(--shadow);
}
.card h3{font-size:16px; margin-bottom:4px;}
.card .sub{color:var(--soft); font-size:12.5px; margin:0;}

.stat{display:flex; flex-direction:column; gap:4px;}
.stat .k{font-family:'Fraunces',serif; font-size:30px; font-weight:600; line-height:1;}
.stat .l{font-size:12px; color:var(--soft); font-weight:500;}
.stat .trend{font-size:11px; font-family:'IBM Plex Mono',monospace;}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid var(--line); border-radius:999px;
  padding:10px 20px; font-size:13.5px; font-weight:600;
  background:var(--surface); color:var(--ink);
  transition:background .15s,color .15s,transform .1s,border-color .15s;
  text-decoration:none;
}
.btn:hover{border-color:var(--teal-mid);}
.btn:active{transform:scale(.97);}
.btn-primary{background:var(--teal); border-color:var(--teal); color:#fff;}
.btn-primary:hover{background:var(--teal-mid); border-color:var(--teal-mid);}
[data-theme="dark"] .btn-primary{background:var(--green); border-color:var(--green); color:#08120E;}
.btn-ghost{border-color:transparent; background:transparent; color:var(--teal-mid);}
.btn-sm{padding:7px 14px; font-size:12.5px;}
.btn-danger{color:var(--red); border-color:var(--red);}
.btn:disabled{opacity:.45; cursor:not-allowed;}

.pill{
  display:inline-flex; align-items:center; gap:6px;
  font-family:'IBM Plex Mono',monospace; font-size:11px;
  padding:4px 11px; border-radius:999px; white-space:nowrap;
}
.pill .d{width:7px;height:7px;border-radius:50%; flex:none;}
.p-ok{background:rgba(76,154,114,.14); color:#2E6E4C;}
.p-watch{background:rgba(224,166,60,.16); color:#8A6112;}
.p-alert{background:rgba(194,75,63,.14); color:#B0453A;}
.p-neutral{background:var(--surface-2); color:var(--soft);}
[data-theme="dark"] .p-ok{color:#7CC79E;} [data-theme="dark"] .p-watch{color:#E8BE6B;} [data-theme="dark"] .p-alert{color:#E28A7F;}

.table-wrap{overflow-x:auto; border:1px solid var(--line-soft); border-radius:var(--r); background:var(--surface); box-shadow:var(--shadow);}
table.tbl{width:100%; border-collapse:collapse; min-width:640px;}
.tbl th{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:.07em;
  color:var(--soft); text-align:left; padding:12px 14px; border-bottom:1px solid var(--line);
  background:var(--surface-2);
}
.tbl td{padding:12px 14px; font-size:13px; border-bottom:1px solid var(--line-soft); vertical-align:middle;}
.tbl tbody tr{cursor:pointer; transition:background .12s;}
.tbl tbody tr:hover{background:var(--surface-2);}
.tbl tbody tr:last-child td{border-bottom:none;}

.filters{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; align-items:center;}
.chip{
  border:1px solid var(--line); background:var(--surface); color:var(--soft);
  border-radius:999px; padding:7px 15px; font-size:12.5px; font-weight:600;
  transition:all .15s;
}
.chip:hover{border-color:var(--teal-mid);}
.chip.on{background:var(--teal); border-color:var(--teal); color:#fff;}
[data-theme="dark"] .chip.on{background:var(--green); border-color:var(--green); color:#08120E;}
.search{
  flex:1; min-width:160px; max-width:280px;
  border:1px solid var(--line); border-radius:999px; padding:8px 16px;
  background:var(--surface); color:var(--ink); font-size:13px;
}

/* ---------- Wizard ---------- */
.steps{display:flex; gap:6px; margin-bottom:24px;}
.step-seg{flex:1; height:5px; border-radius:3px; background:var(--surface-2); overflow:hidden; position:relative;}
.step-seg.done::after, .step-seg.now::after{
  content:""; position:absolute; inset:0; background:var(--teal-mid); border-radius:3px;
}
.step-seg.now::after{animation:pulseSeg 1.6s ease-in-out infinite;}
@keyframes pulseSeg{0%,100%{opacity:1;}50%{opacity:.55;}}
.wiz-head{margin-bottom:18px;}
.wiz-head .stage{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--teal-mid); letter-spacing:.1em; text-transform:uppercase;}
.wiz-head h2{font-size:23px; margin-top:6px;}
.wiz-head p{color:var(--soft); font-size:13.5px; line-height:1.55; margin:8px 0 0; max-width:56ch;}
.wiz-actions{display:flex; gap:10px; margin-top:24px; flex-wrap:wrap;}

.field{margin-bottom:14px;}
.field label{display:block; font-size:12px; color:var(--soft); font-weight:600; margin-bottom:6px;}
.field input,.field select,.field textarea{
  width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--surface); color:var(--ink); font-size:14px;
}

.consent-box{
  background:var(--surface-2); border:1px dashed var(--line); border-radius:var(--r);
  padding:18px; font-size:13px; line-height:1.6; color:var(--soft);
}
.check-row{display:flex; gap:10px; align-items:flex-start; margin-top:14px; font-size:13.5px; cursor:pointer;}
.check-row input{width:17px;height:17px; margin-top:1px; accent-color:var(--teal-mid);}

.shots{display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
@media (max-width:560px){ .shots{grid-template-columns:1fr;} }
.shot{
  border:2px dashed var(--line); border-radius:var(--r); aspect-ratio:4/3;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  color:var(--soft); font-size:12px; font-weight:600; cursor:pointer;
  background:var(--surface-2); overflow:hidden; position:relative;
  transition:border-color .15s;
}
.shot:hover{border-color:var(--teal-mid);}
.shot img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.shot .ok-tag{
  position:absolute; bottom:6px; right:6px; background:var(--green); color:#fff;
  font-size:10px; font-weight:700; padding:3px 8px; border-radius:999px;
}
.shot .shot-ico{font-size:24px;}

.analyzing{text-align:center; padding:30px 0;}
.analyzing .scan-msg{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--teal-mid); min-height:18px;}
.progress{height:6px; background:var(--surface-2); border-radius:3px; overflow:hidden; margin:18px auto; max-width:340px;}
.progress i{display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--teal-mid),var(--green)); border-radius:3px; transition:width .35s ease;}

/* Odontograma */
.odonto-panel{background:var(--teal); border-radius:var(--r); padding:20px;}
.odonto-panel .op-head{display:flex; justify-content:space-between; color:#EAF2EE; font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:8px;}
.odonto-panel svg{width:100%; height:auto; display:block;}
.legend{display:flex; gap:16px; margin-top:12px; flex-wrap:wrap;}
.legend span{font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:#CFE0D9; display:flex; align-items:center; gap:6px;}
.legend .sw{width:9px;height:9px;border-radius:2px;}

.result-hero{display:flex; align-items:center; gap:18px; padding:20px; border-radius:var(--r); margin-bottom:16px;}
.result-hero .rh-ico{font-size:34px;}
.result-hero h3{font-size:20px; margin:0;}
.result-hero p{margin:4px 0 0; font-size:13.5px; line-height:1.5;}
.rh-ok{background:rgba(76,154,114,.13); border:1px solid rgba(76,154,114,.4);}
.rh-watch{background:rgba(224,166,60,.13); border:1px solid rgba(224,166,60,.45);}
.rh-alert{background:rgba(194,75,63,.12); border:1px solid rgba(194,75,63,.4);}

.finding{display:flex; justify-content:space-between; align-items:center; padding:11px 0; border-bottom:1px solid var(--line-soft); font-size:13.5px;}
.finding:last-child{border-bottom:none;}
.finding .f-name{font-weight:600;}
.finding .f-conf{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--soft);}

/* Timeline derivación */
.tline{list-style:none; margin:0; padding:0;}
.tline li{display:flex; gap:12px; padding:0 0 18px; position:relative;}
.tline li::before{content:""; position:absolute; left:7px; top:18px; bottom:0; width:2px; background:var(--line-soft);}
.tline li:last-child::before{display:none;}
.tline .tl-dot{width:16px;height:16px;border-radius:50%; flex:none; margin-top:2px; border:3px solid var(--surface); box-shadow:0 0 0 1px var(--line);}
.tline .tl-body b{font-size:13.5px; display:block;}
.tline .tl-body span{font-size:12px; color:var(--soft);}

/* Barras del tablero */
.bar-row{display:flex; align-items:center; gap:10px; margin-bottom:10px; font-size:12.5px;}
.bar-row .br-label{width:150px; flex:none; color:var(--soft); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.bar-row .br-track{flex:1; height:22px; border-radius:6px; background:var(--surface-2); display:flex; overflow:hidden;}
.bar-row .br-track i{height:100%; transition:width .6s ease;}
.bar-row .br-n{width:34px; text-align:right; font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--soft);}

.donut-wrap{display:flex; align-items:center; gap:22px; flex-wrap:wrap;}
.donut-legend div{display:flex; align-items:center; gap:8px; font-size:12.5px; margin-bottom:6px; color:var(--soft);}
.donut-legend .sw{width:10px;height:10px;border-radius:3px;}

/* ---------- Modal / drawer ---------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(10,18,15,.5); z-index:60;
  display:flex; align-items:flex-end; justify-content:center; padding:0;
}
@media (min-width:700px){ .modal-overlay{align-items:center; padding:30px;} }
.modal-card{
  background:var(--paper); width:100%; max-width:680px; max-height:92dvh; overflow-y:auto;
  border-radius:20px 20px 0 0; padding:24px; box-shadow:var(--shadow-lg);
  animation:slideUp .25s ease;
}
@media (min-width:700px){ .modal-card{border-radius:20px;} }
@keyframes slideUp{from{transform:translateY(24px); opacity:0;} to{transform:none; opacity:1;}}
.modal-head{display:flex; align-items:flex-start; gap:12px; margin-bottom:16px;}
.modal-head h3{font-size:19px; flex:1;}
.modal-x{background:none; border:none; font-size:20px; color:var(--soft); padding:2px 6px;}

/* Toasts */
.toast-wrap{position:fixed; bottom:84px; left:50%; transform:translateX(-50%); z-index:80; display:flex; flex-direction:column; gap:8px; align-items:center;}
@media (min-width:900px){ .toast-wrap{bottom:24px;} }
.toast{
  background:var(--ink); color:var(--paper); font-size:13px; font-weight:500;
  padding:11px 20px; border-radius:999px; box-shadow:var(--shadow-lg);
  animation:slideUp .25s ease;
}
[data-theme="dark"] .toast{background:#E8EEEA; color:#0F1714;}

.empty{
  text-align:center; padding:48px 20px; color:var(--soft);
}
.empty .e-ico{font-size:34px; display:block; margin-bottom:10px;}
.section-title{font-size:18px; margin:26px 0 12px;}
.muted{color:var(--soft); font-size:12.5px;}
.mt{margin-top:16px;} .mb{margin-bottom:16px;}
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.spread{justify-content:space-between;}