/* =====================================================================
   DENTALIS · Interfaz
   Misma familia visual que el demo del odontograma: tinta profunda,
   hueso como acento, colores saturados solo para lo clínico.
   ===================================================================== */

:root{
  --ink:#0A0D12; --ink2:#0F131A;
  --panel:#141821; --panel2:#1A1F2A;
  --line:#232B38; --line2:#2E3746;
  --bone:#EDE9E0; --muted:#7F8896; --muted2:#5A6372;
  --ok:#10B981; --mal:#E5484D; --espera:#F5A524; --info:#3B82F6;
  --radius:10px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{height:100%}
body{
  min-height:100dvh; background:var(--ink); color:var(--bone);
  font:14px/1.5 'Archivo',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--line2);border-radius:6px}

/* ---------- estructura ---------- */
.shell{display:grid;grid-template-columns:210px 1fr;min-height:100dvh}
.nav{
  background:var(--ink2);border-right:1px solid var(--line);
  padding:18px 12px;display:flex;flex-direction:column;gap:4px;
  position:sticky;top:0;height:100dvh;
}
.nav .brand{
  font-weight:800;font-size:16px;letter-spacing:-.02em;
  padding:4px 10px 16px;
}
.nav nav{display:flex;flex-direction:column;gap:2px;flex:1}
.nav nav a{
  padding:8px 11px;border-radius:8px;font-size:13px;color:var(--muted);
  text-decoration:none;transition:.12s;
}
.nav nav a:hover{color:var(--bone);background:var(--panel)}
.nav nav a.on{color:var(--bone);background:var(--panel2);font-weight:600}
.who{border-top:1px solid var(--line);padding:12px 10px 2px}
.who .nm{font-size:12.5px;font-weight:600}
.who .rl{font-size:11px;color:var(--muted2);margin-bottom:8px}
.who button{
  background:none;border:none;color:var(--muted2);font-size:11.5px;
  cursor:pointer;padding:0;
}
.who button:hover{color:var(--mal)}

.main{padding:22px 26px 70px;min-width:0}

/* ---------- cabeceras ---------- */
.cab{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.cab h1{font-size:21px;font-weight:700;letter-spacing:-.015em}
.cab .sub{font-size:12px;color:var(--muted);margin-top:3px}
.cab .fecha{font-size:12.5px;color:var(--muted2);text-transform:capitalize}
.acciones-cab{display:flex;gap:7px;flex-wrap:wrap}
h2{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted2);
   font-weight:600;margin:0 0 12px}
.mut{color:var(--muted2);font-weight:400}
.chico{font-size:11px}

/* ---------- alertas ---------- */
.alerta{border-radius:8px;padding:10px 14px;margin-bottom:14px;font-size:13px;
  border:1px solid var(--line2);background:var(--panel2)}
.alerta.grave{border-color:#5c2b30;background:#241417;color:#F1A8AC}
.alerta.bien{border-color:#1d4d3e;background:#10201B;color:#8FE3C4}

/* ---------- métricas ---------- */
.metricas{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:20px}
.metricas .m{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:13px 15px}
.metricas .lb{display:block;font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted2);font-weight:600}
.metricas .vl{display:block;font-size:24px;font-weight:700;margin-top:2px;font-variant-numeric:tabular-nums}

/* ---------- tarjetas y formularios ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;margin-bottom:14px}
.dos-col{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
label{display:block;font-size:11px;color:var(--muted);margin:10px 0 4px;font-weight:600}
input,select,textarea{
  width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:7px;
  padding:8px 10px;font-size:13px;outline:none;color:var(--bone);
}
input:focus,select:focus,textarea:focus{border-color:var(--line2)}
input::placeholder,textarea::placeholder{color:var(--muted2)}
textarea{resize:vertical}
.fila-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fila-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.check{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--bone);
  font-weight:400;margin:10px 0 0;cursor:pointer}
.check input{width:auto}
.checks{display:flex;gap:18px;flex-wrap:wrap}
.pie-form{display:flex;align-items:center;gap:12px;margin-top:16px}
.guardado{color:var(--ok);font-size:12.5px;font-weight:600}

/* ---------- botones ---------- */
.btn{
  display:inline-flex;align-items:center;gap:7px;
  background:transparent;color:var(--bone);border:1px solid var(--line2);
  border-radius:8px;padding:8px 14px;font-weight:600;font-size:12.5px;
  cursor:pointer;text-decoration:none;transition:.13s;
}
.btn:hover{background:var(--panel2)}
.btn.primario{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.btn.primario:hover{background:#fff}
.btn.fantasma{border-color:transparent;color:var(--muted)}
.btn.fantasma:hover{color:var(--bone);background:var(--panel2)}
.btn .pill{background:var(--ink);color:var(--bone);border-radius:99px;
  font-size:10.5px;padding:1px 7px;font-variant-numeric:tabular-nums}
.btn.primario .pill{background:rgba(0,0,0,.15);color:var(--ink)}

/* ---------- tablas ---------- */
.tabla{width:100%;border-collapse:collapse;font-size:13px}
.tabla th{font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted2);
  text-align:left;padding:0 12px 8px 0;border-bottom:1px solid var(--line);font-weight:600}
.tabla td{padding:10px 12px 10px 0;border-bottom:1px solid var(--line);vertical-align:top}
.tabla tr:hover td{background:rgba(255,255,255,.015)}
.tabla.enlazada tbody tr{cursor:pointer}
.tabla a{text-decoration:none;font-weight:600}
.tabla a:hover{text-decoration:underline}
.folio{font-family:ui-monospace,Menlo,monospace;font-size:12px;color:var(--muted);white-space:nowrap}

/* ---------- chips de estado ---------- */
.chip{display:inline-block;padding:2px 9px;border-radius:99px;font-size:10.5px;font-weight:600;
  text-transform:capitalize;white-space:nowrap}
.chip.programada{background:#1A2230;color:#7FA6E8}
.chip.confirmada,.chip.aceptado{background:#10201B;color:var(--ok)}
.chip.en_sala,.chip.atendiendo{background:#241E10;color:var(--espera)}
.chip.completada{background:var(--panel2);color:var(--muted)}
.chip.no_asistio,.chip.cancelada{background:#241417;color:var(--mal)}

/* ---------- búsqueda y paginación ---------- */
.busqueda{display:flex;gap:8px;margin-bottom:16px;max-width:560px}
.busqueda input{flex:1}
.paginas{display:flex;gap:5px;margin-top:16px;flex-wrap:wrap}
.paginas a,.paginas .on{
  min-width:32px;text-align:center;padding:5px 9px;border-radius:7px;font-size:12.5px;
  text-decoration:none;color:var(--muted);border:1px solid var(--line)}
.paginas a:hover{color:var(--bone);border-color:var(--line2)}
.paginas .on{background:var(--bone);color:var(--ink);border-color:var(--bone);font-weight:700}

/* ---------- vacíos y errores ---------- */
.vacio{text-align:center;padding:70px 20px;color:var(--muted)}
.vacio.chico{padding:38px 20px}
.vacio .cod{font-size:44px;font-weight:800;color:var(--line2);margin-bottom:8px}
.vacio p{margin-bottom:16px}

/* ---------- acceso y activación ---------- */
body.centrado{display:grid;place-items:center;padding:20px}
.acceso{
  width:min(390px,100%);background:var(--panel);border:1px solid var(--line);
  border-radius:14px;padding:28px;
}
.acceso .marca{font-weight:800;font-size:18px;letter-spacing:-.02em;margin-bottom:14px}
.acceso h1{font-size:18px;font-weight:600;margin-bottom:6px}
.acceso .ayuda{font-size:12.5px;color:var(--muted);margin-bottom:16px}
.acceso label{margin-top:12px}
.acceso button[type=submit]{
  width:100%;margin-top:18px;background:var(--bone);color:var(--ink);border:none;
  border-radius:8px;padding:11px;font-weight:700;font-size:14px;cursor:pointer;
}
.acceso button[type=submit]:hover{background:#fff}
.acceso .pie{font-size:11.5px;color:var(--muted2);margin-top:14px;text-align:center}
.serial-input{
  font-family:ui-monospace,Menlo,monospace;font-weight:700;font-size:16px;
  letter-spacing:2px;text-align:center;text-transform:uppercase;
}

/* ---------- aviso flotante (toast) ---------- */
.toast{
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(80px);
  background:var(--panel2);border:1px solid var(--line2);color:var(--bone);
  border-radius:10px;padding:11px 18px;font-size:13px;z-index:99;
  transition:transform .25s ease;box-shadow:0 10px 30px rgba(0,0,0,.4);
}
.toast.visible{transform:translateX(-50%) translateY(0)}
.toast.mal{border-color:#5c2b30;background:#241417;color:#F1A8AC}

/* ---------- responsivo ---------- */
@media (max-width:900px){
  .shell{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .nav{position:static;height:auto;flex-direction:row;align-items:center;
    padding:10px 12px;overflow-x:auto;gap:8px}
  .nav .brand{padding:0 8px 0 0;font-size:15px}
  .nav nav{flex-direction:row;gap:2px}
  .nav nav a{white-space:nowrap;padding:7px 10px}
  .who{border-top:none;border-left:1px solid var(--line);padding:0 0 0 12px;
    display:flex;align-items:center;gap:10px}
  .who .rl{margin:0}
  .main{padding:16px 14px 60px}
  .dos-col{grid-template-columns:1fr}
  .metricas{grid-template-columns:1fr 1fr}
  .fila-3{grid-template-columns:1fr}
  .fila-2{grid-template-columns:1fr}
  .oculta-m{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}