/* =========================================================
   MEDIKRON THEME (DEPURADO)
   - Sin duplicados
   - Fix modal: 1 solo scroll en body (footer fijo)
   ========================================================= */

/* =========================
   0) TOKENS
   ========================= */
:root{
  --medikron:#28B5B5;
  --medikron-dark:#1b8f8f;
  --medikron-white:#ffffff;

  --pp-col-height: 440px; /* tablero hoy */
}

/* =========================
   1) UTILIDADES DE COLOR
   ========================= */
.bg-medikron{ background-color: var(--medikron) !important; }
.text-medikron{ color: var(--medikron) !important; }
.text-medikron-white{ color: var(--medikron-white) !important; }

/* =========================
   2) BOTONES — definición común: core/premium/buttons.css
   ========================= */






/* =========================
   3) DASHBOARD / CALENDARIO
   ========================= */
.dashboard-section{
  height: calc(100vh - 56px - 200px);
}
.dashboard-section .card-body-calendar{ padding: 1rem; }
.dashboard-section #calendar{
  height: 100%;
  width: 100%;
  border-radius: .25rem;
  background-color: #fff;
}
.dashboard-section .card-body-chart{
  display: flex;
  flex-direction: column;
}
.dashboard-section .card-body-chart h5{ margin-bottom: 1rem; }
.dashboard-section canvas{ width: 100%; height: 100%; }

.pagination .page-link{
  color: var(--medikron);
  border-color: var(--medikron);
}
.pagination .page-link:hover{
  background-color: var(--medikron);
  color: #fff;
}
.pagination .active .page-link{
  background-color: var(--medikron);
  border-color: var(--medikron);
  color:#fff;
}

/* FullCalendar: scroll interno del listado de eventos en celdas */
.fc .fc-daygrid-day-frame{
  display:flex;
  flex-direction:column;
  height:100%;
}
.fc .fc-daygrid-day-events{
  flex-grow:1;
  overflow-y:auto;
  max-height:90px;
  padding-right:2px;
}
.fc .fc-daygrid-more-link{ display:none !important; }

/* =========================
   4) TABS (GLOBAL)
   ========================= */
.nav-tabs .nav-link{
  border:none;
  transition: all .3s ease;
  background-color: transparent;
  color: var(--medikron);
  font-weight: 500;
  display:flex;
  align-items:center;
  gap:.4rem;
}
.nav-tabs .nav-link:hover{
  background-color:#e7f7f7;
  color: var(--medikron-dark);
}
.nav-tabs .nav-link.active{
  background-color: var(--medikron);
  color:#fff !important;
  border-bottom: 3px solid #0072a0;
  border-radius: .3rem .3rem 0 0;
}

/* Animaciones de panes */
.tab-pane{ animation-duration:.4s; animation-fill-mode:both; }
.tab-pane.active{ animation-name: slideIn; }
@keyframes slideIn{
  from{ opacity:0; transform: translateX(20px); }
  to{ opacity:1; transform: translateX(0); }
}
.tab-pane.smooth-transition{ animation: slideFade .4s ease forwards; }
@keyframes slideFade{
  from{ opacity:0; transform: translateY(10px); }
  to{ opacity:1; transform: translateY(0); }
}
.tab-pane.transition-fade{
  opacity:0;
  transform: translateY(20px);
  transition: opacity .4s ease, transform .4s ease;
}
.tab-pane.transition-fade.show{
  opacity:1;
  transform: translateY(0);
}

/* Tablas responsivas */
.table-responsive{ overflow-x:auto; }

/* =========================
   5) SCROLLS UTILITARIOS
   ========================= */
.tabla-scroll{ height:250px; overflow-y:auto; }
.agenda-scroll{ height:250px; overflow-y:auto; }

.badge-pill-xl{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:48px;
  width:100%;
  padding:.75rem 1rem;
  font-size:1rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* =========================
   6) EMPTY STATE
   ========================= */
.empty-state-box{
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  padding:14px;
  background:#fff;
  box-shadow: 0 .25rem .75rem rgba(0,0,0,.06);
  display:flex;
  align-items:flex-start;
  gap:12px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.empty-state-box:hover{
  transform: translateY(-1px);
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.08);
}
.empty-state-icon{
  width:42px;
  height:42px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  background: var(--medikron);
  flex:0 0 auto;
}
.empty-state-title{
  font-weight:700;
  color: var(--medikron);
  margin-bottom:2px;
}
.empty-state-msg{
  color:#6c757d;
  font-size:.875rem;
  margin:0;
}
.empty-state-badge{
  margin-left:auto;
  border:1px solid rgba(0,0,0,.08);
  background:#f8f9fa;
  color:#6c757d;
  border-radius:999px;
  padding:6px 10px;
  font-size:.75rem;
  white-space:nowrap;
}

/* =========================
   7) TIMELINE (MK)
   ========================= */
.mk-timeline{
  position:relative;
  margin:0;
  padding:0 0 0 2.25rem;
  list-style:none;
}
.mk-timeline::before{
  content:"";
  position:absolute;
  left:1.05rem;
  top:.25rem;
  bottom:.25rem;
  width:2px;
  background:#d7e0e2;
  border-radius:999px;
}
.mk-tl-item{ position:relative; margin:0 0 1.25rem 0; }
.mk-tl-dot{
  position:absolute;
  left:.73rem;
  top:.75rem;
  width:.75rem;
  height:.75rem;
  border-radius:999px;
  background:#007B8A;
  box-shadow: 0 0 0 4px rgba(0,123,138,.18);
}
.mk-tl-card{
  margin-left:.25rem;
  border:1px solid #e6eef0;
  border-radius:14px;
  overflow:hidden;
}

/* =========================
   8) TABLERO HOY (KANBAN)
   ========================= */
.pp-board{ align-items: stretch; }

.pp-board .pp-col.card{
  height: var(--pp-col-height) !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
  border-radius:16px;
}
.pp-board .pp-col.card .pp-col-header{
  flex:0 0 auto !important;
  background:#fff;
}
.pp-board .pp-col.card .pp-col-body{
  flex:1 1 auto !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  padding:.5rem !important;
  min-height:0 !important;
}
.pp-board .pp-col.card .pp-col-body::-webkit-scrollbar{ width:8px; }
.pp-board .pp-col.card .pp-col-body::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.22);
  border-radius:999px;
}
.pp-board .pp-col.card .pp-col-body::-webkit-scrollbar-track{
  background: rgba(0,0,0,.06);
  border-radius:999px;
}
.pp-board .pp-empty{
  padding:14px;
  border:1px dashed rgba(0,0,0,.15);
  border-radius:14px;
  text-align:center;
  color:#6c757d;
  background:#fff;
}
@media (min-width: 1200px){
  :root{ --pp-col-height: 460px; }
}

/* =========================
   9) TARJETAS DE CITA
   ========================= */
.cita-card{
  border-radius:1rem !important;
  transition: transform .12s ease, box-shadow .12s ease;
  border:1px solid rgba(0,0,0,.06) !important;
  background:#fff;
}
.cita-card:hover{
  transform: translateY(-1px);
  box-shadow: 0 .5rem 1.2rem rgba(0,0,0,.08) !important;
}
.cita-card .btn{ border-radius:999px !important; }

.btn-icon{
  width:36px;
  height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 !important;
}

/* =========================
   10) PACIENTES - UX PRO
   ========================= */
.med-card{ border-radius:14px; overflow:hidden; }

.med-table-wrap{
  height:420px;
  overflow-y:auto;
  overflow-x:auto;
}

thead.sticky-top th{
  z-index:5;
  background:#fff;
  box-shadow: 0 1px 0 rgba(0,0,0,.08);
}

.med-table tbody tr:hover{
  background: rgba(40,181,181,.06);
}

.med-avatar{
  width:38px;
  height:38px;
  border-radius:999px;
  background: rgba(40,181,181,.15);
  color: var(--medikron-dark);
  display:grid;
  place-items:center;
  font-weight:800;
}

.btn-action{
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px !important;
}

/* Timeline icon-only */
.timeline .timeline-icon{
  background: transparent !important;
  padding:0 !important;
  border-radius:0 !important;
  color: var(--medikron);
  font-size:1.1rem;
  width:auto !important;
  height:auto !important;
  line-height:normal !important;
}

/* =========================
   11) FIX: OFFCANVAS encima de MODAL (z-index)
   ========================= */
#offcanvasLabBatch,
#offcanvasResultadoPendiente{
  z-index: 1100 !important; /* > modal (1055) */
}
.offcanvas-backdrop{ z-index: 1090 !important; }

/* =========================================================
   12) MODAL REGISTRAR CONSULTA (BOOTSTRAP PURO)
   - modal-dialog-scrollable hace el scroll en .modal-body
   - footer queda fijo abajo automáticamente
   - tabs sticky dentro del modal-body
   ========================================================= */

/* NO fuerces overflow/height en .modal, .modal-dialog, .modal-content
   porque rompe el comportamiento nativo de Bootstrap */

/* Sticky tabs dentro del modal-body */
#modalRegistrarConsulta .mk-modal-tabs{
  position: sticky;
  top: 0;
  z-index: 10;
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,.08);
  padding-bottom: .5rem;
}

/* En esta modal, NO queremos scroll por pestaña (evita doble scroll) */
#modalRegistrarConsulta .modal-body .tab-pane{
  max-height: none !important;
  overflow: visible !important;
}

/* Un pequeño respiro visual */
#modalRegistrarConsulta .modal-body{
  padding-bottom: 1rem;
}

/* =========================================================
   12) sweetaler2 por encima de todo
   ========================================================= */

.swal2-container {
    z-index: 3000 !important;
  }

/* =========================================================
   13) Campos que se reflejan en el informe
   ========================================================= */

.input-informe,
.input-informe textarea,
textarea.input-informe,
.input-informe input {
  border: 2px solid #28B5B5 !important;
  background-color: #f0fbfb;
  transition: all 0.2s ease;
}

.input-informe:focus,
textarea.input-informe:focus {
  border-color: #1f9c9c !important;
  box-shadow: 0 0 0 2px rgba(40, 181, 181, 0.15);
}

/* Etiqueta visual opcional */
.label-informe::after {
  content: " • informe";
  font-size: 10px;
  color: #28B5B5;
  margin-left: 4px;
}

#tabsEvaluacionHCO .btn.active {
    background-color: var(--medikron, #27bfc2);
    color: #fff;
    border-color: var(--medikron, #27bfc2);
  }

  #tabsEvaluacionHCO .btn {
    border: 1px solid #dee2e6;
  }

/* =========================
   ORTODONCIA OVERLAY
========================= */
.pieza-anatomica-con-ortho{
  position: relative;
}

.pieza-ortho-slot{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 76px;
  height: 16px;
  pointer-events: none;
  z-index: 12;
}

.pieza-ortho-slot-superior{
  top: 48px;
}

.pieza-ortho-slot-inferior{
  top: 54px;
}

.ortho-bracket{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  transform: translate(-50%, -50%);
  border-radius: 3px;
  background: #2563eb;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 1px rgba(37, 99, 235, .35);
}

.ortho-rail{
  position: absolute;
  top: 50%;
  height: 3px;
  transform: translateY(-50%);
  border-radius: 999px;
}

.ortho-rail-left{
  left: 0;
  right: 50%;
  margin-right: 8px;
}

.ortho-rail-right{
  left: 50%;
  right: 0;
  margin-left: 8px;
}

.pieza-ortho-slot.estado-indicado .ortho-bracket,
.pieza-ortho-slot.estado-indicado .ortho-rail{
  background: #facc15;
}

.pieza-ortho-slot.estado-en_proceso .ortho-bracket,
.pieza-ortho-slot.estado-en_proceso .ortho-rail{
  background: #3b82f6;
}

.pieza-ortho-slot.estado-culminado .ortho-bracket,
.pieza-ortho-slot.estado-culminado .ortho-rail{
  background: #22c55e;
}

.pieza-ortho-slot.estado-retirado .ortho-bracket,
.pieza-ortho-slot.estado-retirado .ortho-rail{
  background: #94a3b8;
}

.ortho-legend{
  border-radius: 999px;
}
.ortho-legend.indicado{ background:#facc15; }
.ortho-legend.en_proceso{ background:#3b82f6; }
.ortho-legend.culminado{ background:#22c55e; }

/* =========================
   TRIAJE
========================= */

.triaje-kpi-icon {
  width: 48px;
  height: 48px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.45rem;
}

.triaje-search-wrap {
  position: relative;
  min-width: 280px;
}

.triaje-search-wrap i {
  position: absolute;
  top: 50%;
  left: .75rem;
  transform: translateY(-50%);
  color: #6c757d;
  z-index: 2;
}

.triaje-search-wrap input {
  padding-left: 2.2rem;
  border-radius: 999px;
  border: 0;
}

.triaje-table-body {
  max-height: 460px;
  overflow-y: auto;
}

#tabla-pacientes thead th {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #64748b;
  white-space: nowrap;
}

#tabla-pacientes tbody td {
  padding-top: .95rem;
  padding-bottom: .95rem;
}

.empty-state {
  text-align: center;
}

.empty-icon {
  width: 64px;
  height: 64px;
  border-radius: 24px;
  background: rgba(40, 181, 181, .13);
  color: var(--medikron);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin-bottom: .75rem;
}

/* =========================
   TRIAJE - FORM
========================= */

.triaje-patient-card {
  border-radius: 1rem;
  overflow: hidden;
}

.triaje-patient-avatar {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: rgba(255,255,255,.18);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
}

.triaje-section-title {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #64748b;
  font-weight: 700;
}

.triaje-field-card {
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 1rem;
  background: #fff;
  padding: 1rem;
  height: 100%;
}

.triaje-field-card:hover {
  background: rgba(40,181,181,.035);
}

.triaje-form-card {
  border-radius: 1rem;
  overflow: hidden;
}

.triaje-auto-box {
  border: 1px dashed rgba(40,181,181,.45);
  background: rgba(40,181,181,.06);
  border-radius: 1rem;
  padding: .75rem 1rem;
}

/* =========================
   PACIENTES - LISTA
========================= */

/* KPI reutilizando estilo de triaje */
.bg-medikron-soft {
  background: rgba(40, 181, 181, .13);
}

.triaje-kpi-icon {
  width: 48px;
  height: 48px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.45rem;
}

/* =========================
   BUSCADOR
========================= */

.med-search-wrap {
  position: relative;
  min-width: 300px;
}

.med-search-wrap i {
  position: absolute;
  top: 50%;
  left: .75rem;
  transform: translateY(-50%);
  color: #6c757d;
  z-index: 2;
}

.med-search-wrap input {
  padding-left: 2.2rem;
  border-radius: 999px;
  border: 0;
}

.med-search-clear {
  position: absolute;
  right: .4rem;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 999px;
  padding: .2rem .45rem;
}

/* =========================
   TABLA PACIENTES PRO
========================= */

.med-table tbody tr {
  transition: all .12s ease;
  cursor: pointer;
}

.med-table tbody tr:hover {
  background: rgba(40,181,181,.08);
  transform: scale(1.002);
}

.med-table td {
  vertical-align: middle;
}

/* Scroll mejorado */
.med-table-wrap {
  height: 420px;
  overflow-y: auto;
}

.med-table-wrap::-webkit-scrollbar {
  width: 8px;
}

.med-table-wrap::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.25);
  border-radius: 999px;
}

.med-table-wrap::-webkit-scrollbar-track {
  background: rgba(0,0,0,.05);
}

/* =========================
   AVATAR PACIENTE
========================= */

.med-avatar {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: rgba(40,181,181,.15);
  color: var(--medikron-dark);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: .85rem;
}

/* =========================
   LOADING AJAX
========================= */

#pacientes-fragment.loading {
  position: relative;
  pointer-events: none;
}

#pacientes-fragment.loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.65);
  backdrop-filter: blur(2px);
  z-index: 5;
}

/* =========================
   EMPTY STATE (si no usas el global)
========================= */

.triaje-empty-state {
  text-align: center;
}

.triaje-empty-icon {
  width: 64px;
  height: 64px;
  border-radius: 24px;
  background: rgba(40, 181, 181, .13);
  color: var(--medikron);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin-bottom: .75rem;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 768px) {
  .med-search-wrap {
    width: 100%;
    min-width: 100%;
  }

  .med-table-wrap {
    height: 520px;
  }
}

/* =========================
   PACIENTE DETALLE - DASHBOARD
========================= */

.patient-hero {
  border-radius: 1rem;
  overflow: hidden;
}

.patient-avatar-lg {
  width: 72px;
  height: 72px;
  border-radius: 24px;
  background: rgba(255,255,255,.18);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 2rem;
  font-weight: 800;
}

.patient-info-box {
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 1rem;
  padding: 1rem;
  background: #fff;
  height: 100%;
}

.patient-info-label {
  font-size: .75rem;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 700;
}

.patient-info-value {
  font-weight: 700;
  color: #1f2937;
}

.patient-kpi-icon {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-size: 1.35rem;
}

.patient-timeline-card {
  border-radius: 1rem;
  overflow: hidden;
}

.patient-action-card {
  border-radius: 1rem;
  border: 1px solid rgba(0,0,0,.06);
  background: #fff;
}

/* =========================
   CONSULTA ACTIVA - UI PRO
========================= */

.consulta-hero {
  border-radius: 1rem;
  overflow: hidden;
}

.consulta-avatar {
  width: 64px;
  height: 64px;
  border-radius: 22px;
  background: rgba(255,255,255,.18);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 1.8rem;
  font-weight: 800;
}

.consulta-info-card {
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 1rem;
  background: #fff;
  padding: 1rem;
  height: 100%;
}

.consulta-info-label {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #64748b;
  font-weight: 700;
}

.consulta-info-value {
  font-weight: 700;
  color: #1f2937;
}

.consulta-section-card {
  border-radius: 1rem;
  overflow: hidden;
}

.consulta-clinical-block {
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 1rem;
  background: #fff;
  padding: 1rem;
}

.consulta-action-group .btn {
  border-radius: 999px;
}

/* =========================
   CONSULTA ACTIVA - TIMELINE
========================= */

.consulta-timeline {
  padding-left: 2rem;
}

.consulta-timeline-head {
  background: #f8fbfc;
}

.consulta-timeline .mk-tl-card {
  background: #fff;
  border-radius: 1rem;
}

.consulta-timeline .accordion-button {
  font-weight: 600;
}

.consulta-timeline .accordion-button:not(.collapsed) {
  background: rgba(40,181,181,.08);
  color: var(--medikron-dark);
}

/* =========================
   CONSULTA ACTIVA - VITALES / GRÁFICAS
========================= */

.vital-chart-card {
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 1rem;
  background: #fff;
  overflow: hidden;
  height: 100%;
  box-shadow: 0 .25rem .75rem rgba(0,0,0,.04);
}

.vital-chart-head {
  width: 100%;
  border: 0;
  background: #fff;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  text-align: left;
}

.vital-chart-head:hover {
  background: rgba(40,181,181,.06);
}

.vital-chart-head span {
  font-weight: 700;
  color: #1f2937;
}

.vital-chart-head strong {
  font-size: .95rem;
  color: var(--medikron-dark);
  white-space: nowrap;
}

.vital-chart-body {
  border-top: 1px solid rgba(0,0,0,.06);
  padding: 1rem;
  background: #f8fafc;
}

/* =========================
   CONSULTA ACTIVA - MODAL CONSULTA
========================= */

.consulta-modal-header {
  min-height: 76px;
}

.consulta-modal-body {
  background: #f8fafc;
}

.consulta-modal-tabs {
  position: sticky;
  top: 0;
  z-index: 12;
  background: rgba(248,250,252,.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.consulta-tabs {
  gap: .5rem;
  padding-bottom: .75rem;
}

.consulta-tabs .nav-link {
  border-radius: 999px;
  color: var(--medikron-dark);
  background: #fff;
  border: 1px solid rgba(40,181,181,.22);
  white-space: nowrap;
  font-weight: 600;
  font-size: .875rem;
}

.consulta-tabs .nav-link:hover {
  background: rgba(40,181,181,.08);
  color: var(--medikron-dark);
}

.consulta-tabs .nav-link.active {
  background: var(--medikron);
  border-color: var(--medikron);
  color: #fff !important;
  box-shadow: 0 .35rem .8rem rgba(40,181,181,.22);
}

.consulta-modal-content {
  min-height: 420px;
}

.consulta-tab-panel {
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 1rem;
  padding: 1rem;
  box-shadow: 0 .25rem .75rem rgba(15,23,42,.04);
}

.consulta-modal-footer {
  border-top: 1px solid rgba(0,0,0,.08);
}

.consulta-modal-actions {
  margin-left: auto;
}

.consulta-modal-close {
  opacity: .85;
  transform: scale(1.05);
}

.consulta-modal-close:hover {
  opacity: 1;
}

/* =========================
   CONSULTA ACTIVA - FORM PARTIALS
========================= */

.consulta-form-section {
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 1rem;
  background: #fff;
  overflow: hidden;
  margin-bottom: 1rem;
}

.consulta-form-section-head {
  background: #f8fafc;
  padding: .9rem 1rem;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.consulta-form-section-body {
  padding: 1rem;
}

.consulta-form-title {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #64748b;
  font-weight: 800;
  margin-bottom: .15rem;
}

.consulta-form-subtitle {
  color: #6c757d;
  font-size: .85rem;
}

.consulta-field-card {
  border: 1px solid rgba(0,0,0,.06);
  border-radius: .9rem;
  background: #fff;
  padding: .85rem;
  height: 100%;
}

.consulta-field-card:hover {
  background: rgba(40,181,181,.035);
}

/* =========================
   CONSULTA ACTIVA - ESTUDIOS INDICADOS
========================= */

.study-category-card {
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 1rem;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 .25rem .75rem rgba(15,23,42,.04);
}

.study-category-head {
  padding: .9rem 1rem;
  background: #f8fafc;
  border-bottom: 1px solid rgba(0,0,0,.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.study-category-body {
  padding: .75rem;
  max-height: 300px;
  overflow-y: auto;
}

.study-category-body::-webkit-scrollbar {
  width: 8px;
}

.study-category-body::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.22);
  border-radius: 999px;
}

.study-check-item {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  padding: .55rem .65rem;
  border-radius: .75rem;
  cursor: pointer;
  transition: background .12s ease;
}

.study-check-item:hover {
  background: rgba(40,181,181,.07);
}

.study-check-label {
  font-size: .875rem;
  color: #1f2937;
  line-height: 1.25rem;
}

/* =========================
   CONSULTA ACTIVA - RESULTADOS
========================= */

.results-toolbar {
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 1rem;
  background: #fff;
  padding: 1rem;
  box-shadow: 0 .25rem .75rem rgba(15,23,42,.04);
}

.results-filter {
  min-width: 190px;
}

.result-card {
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 .25rem .75rem rgba(15,23,42,.04);
  overflow: hidden;
}

.result-card-head {
  padding: 1rem;
  background: #f8fafc;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.result-card-body {
  padding: 1rem;
}

.result-lab-table-wrap {
  border: 1px solid rgba(0,0,0,.06);
  border-radius: .9rem;
  overflow: auto;
  background: #fff;
}

.result-lab-table-wrap thead th {
  background: #f8fafc;
  position: sticky;
  top: 0;
  z-index: 2;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #64748b;
}

.result-study-card {
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 1rem;
  background: #f8fafc;
  padding: 1rem;
}

.result-interpretation {
  border: 1px solid rgba(0,0,0,.06);
  border-radius: .9rem;
  background: #fff;
  padding: .9rem;
}

/* =========================
   CONSULTA ACTIVA - RESULTADOS OVERLAYS
========================= */

#offcanvasLabBatch {
  width: min(1080px, 96vw);
}

#offcanvasLabBatch .offcanvas-header {
  border-bottom: 1px solid rgba(255,255,255,.18);
}

#offcanvasLabBatch .offcanvas-body {
  overflow-y: auto;
  background: #f8fafc;
}

#offcanvasLabBatch .mk-lab-topcard {
  border: 0;
  border-radius: 1rem;
  box-shadow: 0 .35rem 1rem rgba(15, 23, 42, .08);
  background: #ffffff;
}

#offcanvasLabBatch .mk-lab-table-wrap {
  border-radius: 1rem;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 .35rem 1rem rgba(15, 23, 42, .08);
}

#offcanvasLabBatch .mk-lab-table-scroll {
  max-height: calc(100vh - 290px);
  overflow: auto;
}

#offcanvasLabBatch .mk-lab-table-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #f8fafc;
  border-bottom: 1px solid #e5e7eb;
}

#offcanvasLabBatch table td,
#offcanvasLabBatch table th {
  vertical-align: middle;
}

#offcanvasLabBatch .table-sm td,
#offcanvasLabBatch .table-sm th {
  padding-top: .65rem;
  padding-bottom: .65rem;
}

#offcanvasLabBatch .mk-lab-foot {
  position: sticky;
  bottom: 0;
  z-index: 4;
  background: rgba(248,250,252,.96);
  backdrop-filter: blur(8px);
  border-top: 1px solid #e5e7eb;
}

#offcanvasLabBatch .mk-col-estudio { min-width: 220px; }
#offcanvasLabBatch .mk-col-fecha { min-width: 135px; width: 135px; }
#offcanvasLabBatch .mk-col-valor { min-width: 180px; width: 180px; }
#offcanvasLabBatch .mk-col-hallazgos { min-width: 260px; }
#offcanvasLabBatch .mk-col-conclusion { min-width: 260px; }

#modalResultadoPendiente .modal-content,
#modalAgregarResultadoExtra .modal-content {
  border-radius: 1rem;
}

#modalResultadoPendiente .modal-body,
#modalAgregarResultadoExtra .modal-body {
  background: #f8fafc;
}

/* =========================
   CONSULTA ACTIVA - TRATAMIENTOS
========================= */

.treatment-list {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.treatment-item {
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 1rem;
  background: #fff;
  padding: .9rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  box-shadow: 0 .25rem .75rem rgba(15,23,42,.04);
}

.treatment-item:hover {
  background: rgba(40,181,181,.03);
}

.treatment-item-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
}

.treatment-item-title {
  font-weight: 700;
  color: #1f2937;
}

.treatment-item-actions .btn {
  padding: .25rem .5rem;
  border-radius: 999px;
}

.treatment-item textarea {
  resize: none;
}

.treatment-add-box {
  border: 2px dashed rgba(40,181,181,.35);
  border-radius: 1rem;
  padding: 1rem;
  text-align: center;
  background: rgba(40,181,181,.05);
  cursor: pointer;
  transition: all .15s ease;
}

.treatment-add-box:hover {
  background: rgba(40,181,181,.1);
}