/**
 * BioNova LIS — Visual Polish Layer
 * Capa de refinamiento visual sobre styles.css.
 * Adaptado de LINQLAB LIS (demo-polish.css + command-center.css).
 * No modifica lógica ni estructura HTML. Solo overrides visuales.
 *
 * Cargado después de styles.css en index.html.
 * Usa las variables CSS de BioNova (--blue, --navy, --cyan, --green, --amber, --red).
 */

/* ══════════════════════════════════════════════════════════════════════════
   TIPOGRAFÍA BASE
══════════════════════════════════════════════════════════════════════════ */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.01em;
}

/* ══════════════════════════════════════════════════════════════════════════
   SIDEBAR — gradiente sutil, borde más claro
══════════════════════════════════════════════════════════════════════════ */
.sidebar {
  background: #0b232e !important;
  border-right-color: rgba(255,255,255,.07) !important;
  box-shadow: 4px 0 18px rgba(0,0,0,.18) !important;
}

/* Subtítulo del laboratorio */
.product-lockup span {
  color: #7a96a6 !important;
}

/* ── Nav buttons — transiciones suaves ──────────────────────────────────── */
.nav-button {
  border-radius: 9px !important;
  transition: background 0.13s ease, color 0.13s ease, border-color 0.13s ease, box-shadow 0.13s ease !important;
}

.nav-button:hover {
  background: #edf6f8 !important;
  border-color: #c6dfe8 !important;
  color: #0a2c3a !important;
}

.nav-button.is-active {
  background: linear-gradient(135deg, var(--blue), #169aaa) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 3px 12px rgba(14, 124, 134, 0.32) !important;
}

/* Ícono de navegación */
.nav-icon {
  background: #e4f2f5 !important;
  color: var(--blue) !important;
}

.nav-button:hover .nav-icon {
  background: #cce5ea !important;
  color: var(--blue) !important;
}

.nav-button.is-active .nav-icon {
  background: rgba(255, 255, 255, 0.22) !important;
  color: #fff !important;
}

/* Badge de navegación */
.nav-badge {
  background: rgba(14, 124, 134, 0.14) !important;
  color: var(--blue) !important;
}

.nav-button.is-active .nav-badge {
  background: rgba(255, 255, 255, 0.22) !important;
  color: #fff !important;
}

/* Botón de cierre de sesión en sidebar */
.sidebar .ghost-button {
  color: #4a6e7e !important;
  border-color: #cddde5 !important;
  background: #f0f7fa !important;
}

.sidebar .ghost-button:hover {
  background: rgba(220, 95, 95, 0.1) !important;
  color: #b91c1c !important;
  border-color: rgba(220, 95, 95, 0.3) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   TOPBAR — más refinado
══════════════════════════════════════════════════════════════════════════ */
.topbar {
  background: rgba(239, 244, 247, 0.97) !important;
  border-bottom-color: rgba(196, 218, 228, 0.7) !important;
}

.topbar h2 {
  font-weight: 900 !important;
  letter-spacing: -0.025em !important;
  color: #081c28 !important;
}

/* Scroll en todo el workspace (topbar incluido) */
.workspace {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
.workspace-scroll {
  overflow: visible !important;
  flex: none !important;
  min-height: 0 !important;
}
/* Sin backdrop-filter ya que el topbar scrollea con el contenido */
.topbar {
  backdrop-filter: none !important;
  background: rgba(244, 248, 250, 1) !important;
}

/* Acento teal en el título de la vista */
.topbar > div:first-child {
  border-left: 3px solid #0d5a65;
  padding-left: 14px;
}

/* ── Botón Nueva Orden — CTA principal ─────────────────────────────────── */
#newOrderBtn {
  background: #0d5a65 !important;
  border-color: transparent !important;
  border-radius: 9px !important;
  box-shadow: none !important;
  transition: background 0.15s ease, transform 0.1s ease !important;
}

#newOrderBtn:hover {
  background: #0a4a53 !important;
  transform: translateY(-1px) !important;
}

/* Search input */
#globalSearch {
  border-radius: 8px !important;
  border-color: #c4d8e4 !important;
}

#globalSearch:focus {
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 3px rgba(14, 124, 134, 0.13) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   METRIC TILES — mismo lenguaje visual que el launchpad
══════════════════════════════════════════════════════════════════════════ */
.metrics {
  gap: 9px !important;
}
.metric-tile {
  position: relative;
  overflow: hidden;
  border-radius: 11px;
  padding: 14px 16px 12px;
  min-height: 82px;
  cursor: pointer;
  transition: transform .13s;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
  border: none !important;
  box-shadow: none !important;
}
.metric-tile:hover { transform: translateY(-3px); }
.metric-tile:active { transform: scale(.97); }

.metric-tile strong {
  font-size: clamp(1.6rem, 2.4vw, 2.1rem) !important;
  font-weight: 700 !important;
  color: #fff !important;
  line-height: 1 !important;
  letter-spacing: -0.03em !important;
  position: relative; z-index: 1;
}
.metric-tile span {
  font-size: 10px !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,.75) !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
  position: relative; z-index: 1;
}
.metric-tile-wm {
  position: absolute;
  right: -8px; bottom: -10px;
  font-size: 58px;
  color: rgba(255,255,255,.1);
  pointer-events: none;
  line-height: 1;
  z-index: 0;
}

/* ── Admin metric cards — franja lateral de color ───────────────────────── */
.admin-metric-card {
  position: relative;
  overflow: hidden;
  border-color: #d4e4ec !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 3px rgba(8, 32, 51, 0.06) !important;
}

.admin-metric-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
  background: var(--blue);
  border-radius: 10px 0 0 10px;
}

.admin-metric-card strong {
  font-size: clamp(1.3rem, 2vw, 1.8rem) !important;
  font-weight: 900 !important;
  letter-spacing: -0.025em !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   PANELS — sombra sutil + radio mayor
══════════════════════════════════════════════════════════════════════════ */
.panel {
  border-color: #d4e4ec !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 4px rgba(8, 32, 51, 0.06) !important;
}

/* order-card y result-sheet */
.order-card,
.result-sheet {
  border-color: #d4e4ec !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 3px rgba(8, 32, 51, 0.05) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   TABLAS — cabecera sticky, hover suave, última fila sin borde
══════════════════════════════════════════════════════════════════════════ */
.data-table {
  border-color: #d4e4ec !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 3px rgba(8, 32, 51, 0.05) !important;
}

.data-table thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #e4f1f2 !important;
  border-bottom: 2px solid rgba(13,90,101,.18) !important;
  padding: 10px 12px !important;
  font-size: 0.70rem !important;
  font-weight: 800 !important;
  color: #0d5a65 !important;
  letter-spacing: 0.06em !important;
  white-space: nowrap !important;
}

.data-table tbody tr {
  transition: background 0.1s ease;
}

.data-table tbody tr:hover {
  background: #f0f8f8 !important;
}

.data-table tbody td {
  padding: 10px 12px !important;
  font-size: 0.87rem !important;
  border-bottom-color: #eaf2f5 !important;
  vertical-align: middle !important;
  color: #152533;
}

.data-table tbody tr:last-child td {
  border-bottom: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   STATUS BADGES — de sólido a suave (más moderno, más legible)
══════════════════════════════════════════════════════════════════════════ */

/* Estado por defecto: registrada */
.status {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  padding: 3px 9px !important;
  border-radius: 999px !important;
  color: #0d5a65 !important;
  background: rgba(13,90,101,.1) !important;
  border: 1px solid rgba(13,90,101,.22) !important;
}

/* Muestra tomada → azul (igual que metric tile) */
.status.sampled {
  color: #185fa5 !important;
  background: rgba(24,95,165,.1) !important;
  border-color: rgba(24,95,165,.22) !important;
}

/* Resultada → teal */
.status.resulted {
  color: #0d6e7c !important;
  background: rgba(13,110,124,.1) !important;
  border-color: rgba(13,110,124,.22) !important;
}

/* Validada → verde */
.status.validated {
  color: #1e6e3e !important;
  background: rgba(47,143,91,.1) !important;
  border-color: rgba(47,143,91,.22) !important;
}

/* Entregada → verde oscuro */
.status.delivered {
  color: #155a34 !important;
  background: rgba(21,90,52,.12) !important;
  border-color: rgba(21,90,52,.22) !important;
}

/* Rechazada / alerta crítica → rojo */
.status.rejected,
.status.critical_alert {
  color: #a53535 !important;
  background: rgba(165,53,53,.1) !important;
  border-color: rgba(165,53,53,.22) !important;
}

/* Notice — mantiene rojo pero suavizado */
.notice {
  background: rgba(220, 95, 95, 0.12) !important;
  color: #9b1c1c !important;
  border: 1px solid rgba(220, 95, 95, 0.25) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   BOTONES GHOST — más refinados
══════════════════════════════════════════════════════════════════════════ */
.ghost-button:not(.sidebar .ghost-button) {
  background: #edf4f7 !important;
  color: #1a3a4a !important;
  border: 1px solid #c4d8e2 !important;
  font-weight: 700 !important;
}

.ghost-button:not(.sidebar .ghost-button):hover {
  background: #dceef5 !important;
  color: #081c28 !important;
  border-color: #9dc2d2 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   AG-TABLE (analítica) — alineado con data-table
══════════════════════════════════════════════════════════════════════════ */
.ag-table th {
  background: #e4f1f2 !important;
  color: #0d5a65 !important;
  border-bottom: 2px solid rgba(13,90,101,.18) !important;
  font-size: .71rem !important;
  font-weight: 800 !important;
  letter-spacing: .06em !important;
}
.ag-table tbody tr:hover td { background: #f0f8f8 !important; }

/* ══════════════════════════════════════════════════════════════════════════
   MODALES — header teal oscuro + foco en inputs
══════════════════════════════════════════════════════════════════════════ */
dialog {
  border-radius: 14px !important;
  border: none !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.22), 0 4px 16px rgba(0,0,0,.12) !important;
  overflow: hidden !important;
  padding: 0 !important;
}
dialog::backdrop {
  background: rgba(8,32,51,.45) !important;
  backdrop-filter: blur(2px);
}

.modal-form {
  padding: 0 !important;
}
.modal-form header {
  background: #0d5a65 !important;
  padding: 16px 22px !important;
  border-bottom: none !important;
  border-radius: 0 !important;
  flex-shrink: 0;
}
.modal-form header h3,
.modal-form header .eyebrow {
  color: #fff !important;
}
.modal-form header p.eyebrow {
  color: rgba(255,255,255,.65) !important;
  font-size: .72rem !important;
  margin: 0 0 2px !important;
}
.modal-form header h3 {
  margin: 0 !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
}
.modal-form header .icon-button {
  color: rgba(255,255,255,.65) !important;
  background: transparent !important;
  border: none !important;
}
.modal-form header .icon-button:hover {
  color: #fff !important;
  background: rgba(255,255,255,.12) !important;
}

.modal-form .form-grid,
.modal-form > .form-grid {
  padding: 20px 22px !important;
}
.modal-form footer {
  padding: 14px 22px !important;
  border-top: 1px solid #eaf2f5 !important;
  background: #f8fbfc !important;
}
.modal-form footer button[type="submit"],
.modal-form footer button[value="default"] {
  background: #0d5a65 !important;
  border-color: transparent !important;
  color: #fff !important;
}
.modal-form footer button[type="submit"]:hover,
.modal-form footer button[value="default"]:hover {
  background: #0a4a53 !important;
}

/* ── result-dialog: header más limpio ───────────────────────────── */
.result-dialog-toolbar {
  background: #0d5a65 !important;
  color: #fff !important;
  border-bottom: none !important;
}
.result-dialog-toolbar strong { color: #fff !important; }
.result-dialog-toolbar .icon-button {
  color: rgba(255,255,255,.7) !important;
}
.result-dialog-toolbar .icon-button:hover {
  color: #fff !important;
  background: rgba(255,255,255,.12) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   INPUTS Y SELECTS — radio consistente + focus ring teal
══════════════════════════════════════════════════════════════════════════ */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select,
textarea {
  border-radius: 7px !important;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
select:focus,
textarea:focus {
  border-color: #0d5a65 !important;
  box-shadow: 0 0 0 3px rgba(13,90,101,.14) !important;
  outline: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   SCROLLBAR — más discreta
══════════════════════════════════════════════════════════════════════════ */
.workspace-scroll::-webkit-scrollbar { width: 6px !important; }
.workspace-scroll::-webkit-scrollbar-thumb {
  background: #b0ccd6 !important;
  border-radius: 999px !important;
  border: none !important;
}
.workspace-scroll::-webkit-scrollbar-track { background: transparent !important; }

nav::-webkit-scrollbar { width: 4px !important; }
nav::-webkit-scrollbar-thumb {
  background: #b0ccd6 !important;
  border: none !important;
  border-radius: 999px !important;
}
nav::-webkit-scrollbar-track { background: transparent !important; }

/* ══════════════════════════════════════════════════════════════════════════
   BÚSQUEDA GLOBAL — dropdown agrupado
══════════════════════════════════════════════════════════════════════════ */
.gsearch-wrapper {
  position: relative;
  display: inline-flex;
  flex-direction: column;
}

.gsearch-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 300px;
  max-width: 420px;
  background: #fff;
  border: 1px solid #ccdce8;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(8, 32, 51, 0.12);
  z-index: 1000;
  overflow: hidden;
}

.gsearch-dropdown.is-hidden { display: none; }

.gsearch-group {
  padding: 6px 0 4px;
  border-bottom: 1px solid #eef4f7;
}
.gsearch-group:last-child { border-bottom: none; }

.gsearch-group-label {
  display: block;
  padding: 2px 12px 4px;
  font-size: 0.63rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #8aa4b0;
}

.gsearch-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 12px;
  background: none;
  border: none;
  text-align: left;
  font-size: 0.83rem;
  color: #1a2e38;
  cursor: pointer;
  transition: background 0.1s;
}
.gsearch-item:hover { background: #eef7fa; }

.gsearch-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.gsearch-dot-patient { background: var(--blue); }
.gsearch-dot-order   { background: var(--amber); }
.gsearch-dot-exam    { background: var(--green); }

.gsearch-empty {
  padding: 10px 14px;
  font-size: 0.80rem;
  color: #8aa4b0;
  margin: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   ORDER TIMELINE — stepper horizontal de estados
══════════════════════════════════════════════════════════════════════════ */
.order-timeline {
  display: flex;
  align-items: flex-start;
  padding: 14px 16px 12px;
  margin: 0 0 4px;
  border: 1px solid #d4e4ec;
  border-radius: 10px;
  background: #f7fbfc;
  overflow-x: auto;
}

.otl-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 72px;
  gap: 4px;
}

.otl-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid #c4d8e4;
  background: #fff;
  transition: background 0.15s, border-color 0.15s;
  flex-shrink: 0;
}

.otl-done .otl-dot {
  background: var(--blue);
  border-color: var(--blue);
}

.otl-active .otl-dot {
  background: #fff;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(14, 124, 134, 0.18);
}

.otl-pending .otl-dot {
  background: #f0f6f9;
  border-color: #c4d8e4;
}

.otl-label {
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #3d6070;
  text-align: center;
  line-height: 1.2;
  white-space: nowrap;
}

.otl-pending .otl-label { color: #9ab4c0; }
.otl-done   .otl-label  { color: #0a5c6a; }
.otl-active .otl-label  { color: var(--blue); }

.otl-time {
  font-size: 0.62rem;
  color: #8aa4b0;
  text-align: center;
  line-height: 1.2;
  white-space: nowrap;
}

.otl-active .otl-time { color: var(--blue); font-weight: 700; }

/* Conector horizontal entre pasos */
.otl-line {
  flex: 1;
  height: 2px;
  background: #d4e4ec;
  margin-top: 4px; /* alinea con el centro del dot */
  align-self: flex-start;
  margin-top: 5px;
  min-width: 12px;
  border-radius: 1px;
}

.otl-line.otl-done { background: var(--blue); }

/* Nota de rechazo */
.otl-rejected-note {
  flex-shrink: 0;
  align-self: center;
  margin-left: 10px;
  font-size: 0.71rem;
  font-weight: 700;
  color: #9b1c1c;
  background: rgba(220, 95, 95, 0.10);
  border: 1px solid rgba(220, 95, 95, 0.22);
  border-radius: 6px;
  padding: 3px 9px;
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════════
   INGRESO DE RESULTADOS — hint de rango bajo el input
══════════════════════════════════════════════════════════════════════════ */
.result-input-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.result-input-wrap input {
  width: 100%;
}

.result-range-hint {
  font-size: 0.67rem;
  color: #8aa4b0;
  font-weight: 500;
  white-space: nowrap;
  line-height: 1.2;
  padding-left: 2px;
  pointer-events: none;
  user-select: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   QB REVIEW CARD — severidad, badges, blocker chips
══════════════════════════════════════════════════════════════════════════ */

/* Borde izquierdo de severidad en order-card */
.order-card.qb-card--critical {
  border-left: 3px solid var(--red) !important;
  background: rgba(220, 95, 95, 0.025) !important;
}

.order-card.qb-card--abnormal {
  border-left: 3px solid var(--amber) !important;
  background: rgba(246, 183, 60, 0.025) !important;
}

.order-card.qb-card--ok {
  border-left: 3px solid var(--green) !important;
  background: rgba(47, 143, 91, 0.025) !important;
}

/* Header de la card: identidad + badge de estado alineados */
.qb-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.qb-card-identity h4 {
  margin: 0 0 2px;
  font-size: 0.88rem;
  font-weight: 800;
  color: #0a1e2a;
}

.qb-card-identity p {
  margin: 0;
  font-size: 0.75rem;
  color: #6a8a98;
}

/* Badges de severidad dentro de tag-row */
.qb-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 0.70rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  border: 1px solid #d4e4ec;
  background: #eef5f8;
  color: #3d6070;
}

.qb-badge--red {
  background: rgba(220, 95, 95, 0.12);
  color: #9b1c1c;
  border-color: rgba(220, 95, 95, 0.30);
}

.qb-badge--amber {
  background: rgba(246, 183, 60, 0.13);
  color: #7a4f00;
  border-color: rgba(246, 183, 60, 0.32);
}

.qb-badge--green {
  background: rgba(47, 143, 91, 0.12);
  color: #155a34;
  border-color: rgba(47, 143, 91, 0.28);
}

.qb-badge--novakid {
  background: rgba(68, 179, 162, 0.12);
  color: #1a6e62;
  border-color: rgba(68, 179, 162, 0.28);
}

/* Blocker chips — pills rojos con la regla que bloqueó la autovalidación */
.auto-validation-blockers {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 6px 0 2px;
}

.qb-blocker-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 0.68rem;
  font-weight: 700;
  background: rgba(220, 95, 95, 0.10);
  color: #9b1c1c;
  border: 1px solid rgba(220, 95, 95, 0.24);
  cursor: help;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Botón Validar QB prominente cuando la orden es auto-elegible */
.qb-validate-btn {
  background: linear-gradient(135deg, var(--green), #2ca85e) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 7px !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 8px rgba(47, 143, 91, 0.30) !important;
  transition: box-shadow 0.15s ease, transform 0.1s ease !important;
}

.qb-validate-btn:hover {
  box-shadow: 0 4px 14px rgba(47, 143, 91, 0.42) !important;
  transform: translateY(-1px) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   PATIENT TRENDS — sparkline con banda de rango + palette BioNova
══════════════════════════════════════════════════════════════════════════ */

/* Override colores genéricos → palette BioNova */
.trend-chart-card.has-trend-up   { border-color: rgba(220,95,95,.40) !important; background: rgba(220,95,95,.04) !important; }
.trend-chart-card.has-trend-down { border-color: rgba(14,124,134,.30) !important; background: rgba(14,124,134,.04) !important; }

.spark-line                       { stroke: var(--blue) !important; }
.has-trend-up   .spark-line       { stroke: var(--red)   !important; }
.has-trend-down .spark-line       { stroke: var(--cyan)  !important; }

.spark-dot                        { fill: var(--blue) !important; stroke: #fff !important; }
.has-trend-up   .spark-dot        { fill: var(--red)   !important; }
.has-trend-down .spark-dot        { fill: var(--cyan)  !important; }

/* Dot fuera de rango: siempre rojo, overrides tendencia */
.spark-dot-out { fill: var(--red) !important; stroke: #fff !important; r: 4; }

/* Banda de rango de referencia */
.spark-range-band {
  fill: rgba(47, 143, 91, 0.12);
  stroke: rgba(47, 143, 91, 0.30);
  stroke-width: 0.5;
  stroke-dasharray: 3 3;
}

/* Último valor anotado en la sparkline */
.spark-last-val {
  fill: #3d6070;
  font-weight: 700;
}

/* Override trend badges al palette */
.trend-badge.trend-up   { background: rgba(220,95,95,.12) !important; color: #9b1c1c !important; }
.trend-badge.trend-down { background: rgba(14,124,134,.12) !important; color: #0a5c6a !important; }

/* Cards más ajustadas al estilo BioNova */
.trend-chart-card {
  border-radius: 10px !important;
  border-color: #d4e4ec !important;
  background: #fff !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   TAT DASHBOARD
══════════════════════════════════════════════════════════════════════════ */

/* KPI grid de 4 tarjetas */
.tat-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 14px 0 4px;
}

@media (max-width: 900px) { .tat-kpi-grid { grid-template-columns: repeat(2, 1fr); } }

.tat-kpi {
  border: 1px solid #d4e4ec;
  border-radius: 10px;
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: #fff;
}

.tat-kpi--total {
  border-color: rgba(14, 124, 134, 0.30);
  background: rgba(14, 124, 134, 0.04);
}

.tat-kpi-label {
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6a8a98;
}

.tat-kpi strong {
  font-size: 1.55rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
}

.tat-kpi small {
  font-size: 0.68rem;
  color: #8aa4b0;
}

/* Colores TAT */
.tat--green { color: #1a6e38 !important; }
.tat--amber { color: #7a4f00 !important; }
.tat--red   { color: #9b1c1c !important; }

/* Distribución en barras */
.tat-dist {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 4px 0;
}

.tat-dist-row {
  display: grid;
  grid-template-columns: 56px 1fr 64px;
  align-items: center;
  gap: 10px;
}

.tat-dist-label {
  font-size: 0.73rem;
  font-weight: 700;
  color: #3d6070;
  white-space: nowrap;
}

.tat-dist-bar-wrap {
  height: 10px;
  background: #eef4f7;
  border-radius: 99px;
  overflow: hidden;
}

.tat-dist-bar {
  height: 100%;
  border-radius: 99px;
  transition: width 0.4s ease;
  min-width: 2px;
}

.tat-dist-bar.tat--green { background: var(--green); }
.tat-dist-bar.tat--amber { background: var(--amber); }
.tat-dist-bar.tat--red   { background: var(--red); }

.tat-dist-count {
  font-size: 0.73rem;
  font-weight: 700;
  color: #3d6070;
  text-align: right;
  white-space: nowrap;
}

.tat-dist-count small { font-weight: 400; color: #8aa4b0; }

/* Tabla de TAT por orden */
.tat-table td.tat-total { font-size: 0.85rem; }

/* ══════════════════════════════════════════════════════════════════════════
   QB PANEL — KPI grid y panel de reglas del sistema
══════════════════════════════════════════════════════════════════════════ */

/* KPI grid 4 columnas */
.qb-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 16px 0 4px;
}

@media (max-width: 900px) {
  .qb-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}

.qb-kpi {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid #d4e4ec;
  padding: 18px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(8, 32, 51, 0.05);
  transition: box-shadow 0.15s ease, transform 0.1s ease;
}

.qb-kpi:hover {
  box-shadow: 0 3px 12px rgba(8, 32, 51, 0.09);
  transform: translateY(-1px);
}

/* Barra de acento superior por variante */
.qb-kpi::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 10px 10px 0 0;
}

.qb-kpi--blue::before  { background: var(--blue); }
.qb-kpi--red::before   { background: var(--red); }
.qb-kpi--orange::before { background: var(--amber); }
.qb-kpi--green::before { background: var(--green); }

/* Colores de fondo suave */
.qb-kpi--blue   { border-color: rgba(14, 124, 134, 0.22); background: rgba(14, 124, 134, 0.04); }
.qb-kpi--red    { border-color: rgba(220, 95, 95, 0.25);  background: rgba(220, 95, 95, 0.04); }
.qb-kpi--orange { border-color: rgba(246, 183, 60, 0.30); background: rgba(246, 183, 60, 0.05); }
.qb-kpi--green  { border-color: rgba(47, 143, 91, 0.25);  background: rgba(47, 143, 91, 0.04); }

.qb-kpi-val {
  font-size: clamp(1.7rem, 2.4vw, 2.2rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
}

.qb-kpi--blue   .qb-kpi-val { color: var(--blue); }
.qb-kpi--red    .qb-kpi-val { color: #c0392b; }
.qb-kpi--orange .qb-kpi-val { color: #8a5800; }
.qb-kpi--green  .qb-kpi-val { color: #1a6e38; }

.qb-kpi-label {
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #3d5f70;
}

.qb-kpi small {
  font-size: 0.71rem;
  color: #7a96a6;
  line-height: 1.3;
}

/* ── Stats bar (pestaña Reglas) ──────────────────────────────────────────── */
.qb-av-stats {
  display: flex;
  gap: 0;
  border: 1px solid #d4e4ec;
  border-radius: 9px;
  overflow: hidden;
  margin: 12px 0 18px;
  background: #f7fbfc;
}

.qb-av-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 8px;
  border-right: 1px solid #d4e4ec;
  gap: 2px;
}

.qb-av-stat:last-child { border-right: none; }

.qb-av-stat strong {
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #0a2c3a;
  line-height: 1;
}

.qb-av-stat span {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #5e7d8e;
  text-align: center;
}

/* ── Fixed rules section ─────────────────────────────────────────────────── */
.qb-fixed-rules {
  margin: 0 0 20px;
  border: 1px solid #d4e4ec;
  border-radius: 10px;
  overflow: hidden;
}

.qb-fixed-rules-title {
  margin: 0;
  padding: 9px 14px;
  font-size: 0.70rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #5e7d8e;
  background: #f0f7fa;
  border-bottom: 1px solid #d4e4ec;
}

.qb-fixed-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

@media (max-width: 900px) {
  .qb-fixed-grid { grid-template-columns: repeat(2, 1fr); }
}

.qb-fixed-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 13px;
  border-right: 1px solid #e8f0f3;
  border-bottom: 1px solid #e8f0f3;
}

.qb-fixed-card:nth-child(3n) { border-right: none; }
.qb-fixed-card:nth-last-child(-n+3) { border-bottom: none; }

.qb-fixed-card strong {
  font-size: 0.82rem;
  font-weight: 800;
  color: #1a2e38;
}

.qb-fixed-card small {
  font-size: 0.69rem;
  color: #6a8a98;
  line-height: 1.3;
}

.qb-fixed-icon {
  font-size: 0.9rem;
  line-height: 1;
}

.qb-fixed-red    { background: rgba(220, 95, 95, 0.04); }
.qb-fixed-orange { background: rgba(246, 183, 60, 0.05); }

.qb-fixed-novakid {
  background: rgba(68, 179, 162, 0.06) !important;
  border-color: rgba(68, 179, 162, 0.18) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   VISTA POR AREA DE TRABAJO
══════════════════════════════════════════════════════════════════════════ */

.tech-mode-toggle {
  display: flex;
  gap: .4rem;
  margin-bottom: 1rem;
}
.tech-mode-toggle button {
  padding: .35rem .85rem;
  border: 1.5px solid var(--border, #d4e4ec);
  border-radius: 6px;
  background: var(--soft, #f4f8fa);
  color: var(--navy);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.tech-mode-toggle button.is-active {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

.area-worklist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 1rem;
  align-items: start;
}
@media (max-width: 900px) { .area-worklist { grid-template-columns: 1fr; } }

.area-panel {
  background: var(--card, #fff);
  border: 1.5px solid var(--border, #d4e4ec);
  border-radius: 12px;
  padding: 1rem;
  border-left-width: 4px;
  border-left-color: var(--border, #d4e4ec);
}
.area-panel--red   { border-left-color: var(--red); }
.area-panel--blue  { border-left-color: var(--blue); }
.area-panel--amber { border-left-color: var(--amber); }
.area-panel--teal  { border-left-color: var(--cyan); }
.area-panel--green { border-left-color: var(--green); }
.area-panel--navy  { border-left-color: var(--navy); }
.area-panel--cyan  { border-left-color: var(--cyan); }

.area-panel-header {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .75rem;
}
.area-panel-icon { font-size: 1.4rem; line-height: 1; flex-shrink: 0; }
.area-panel-title { flex: 1; min-width: 0; }
.area-panel-title h3 {
  font-size: .92rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 .1rem;
}
.area-panel-title p { font-size: .76rem; color: var(--muted, #8aa4b0); margin: 0; }
.area-panel-header > .tag { margin-left: auto; flex-shrink: 0; }

.area-panel-rows { display: flex; flex-direction: column; gap: .35rem; }

.area-order-row {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  padding: .4rem .55rem;
  border-radius: 6px;
  background: var(--soft, #f4f8fa);
  cursor: pointer;
  transition: background .12s;
}
.area-order-row:hover { background: rgba(14,124,134,.08); }

.area-order-meta { flex-shrink: 0; min-width: 90px; }
.area-order-meta strong {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  color: var(--navy);
}
.area-order-meta span {
  display: block;
  font-size: .73rem;
  color: var(--muted, #8aa4b0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}

.area-order-chips { display: flex; flex-wrap: wrap; gap: .2rem; flex: 1; }
.area-test-chip {
  background: rgba(14,124,134,.10);
  color: var(--blue);
  border-radius: 4px;
  padding: .12rem .35rem;
  font-size: .71rem;
  font-weight: 600;
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════════
   TOAST DE ENTREGA DE RESULTADOS
══════════════════════════════════════════════════════════════════════════ */

.toast-delivery {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  min-width: 300px;
  max-width: 380px;
  padding: .75rem .85rem !important;
  background: #fff !important;
  border: 1.5px solid #b8e0c6 !important;
  border-left: 4px solid var(--green) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.12) !important;
  border-radius: 10px !important;
  cursor: default !important;
}

.toast-delivery-header {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
}

.toast-delivery-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-size: .75rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.toast-delivery-info {
  flex: 1;
  min-width: 0;
}
.toast-delivery-info strong {
  display: block;
  font-size: .82rem;
  font-weight: 700;
  color: var(--navy);
}
.toast-delivery-info span {
  font-size: .76rem;
  color: var(--muted, #8aa4b0);
}

.toast-delivery-close {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 1.1rem;
  color: var(--muted, #8aa4b0);
  line-height: 1;
  flex-shrink: 0;
  margin-top: -2px;
}
.toast-delivery-close:hover { color: var(--navy); }

.toast-delivery-actions {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
}

.toast-delivery-btn {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .3rem .7rem;
  border-radius: 6px;
  font-size: .78rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: opacity .12s;
}
.toast-delivery-btn:hover { opacity: .85; }
.toast-delivery-btn--wa    { background: #25d366; color: #fff; }
.toast-delivery-btn--email { background: var(--blue); color: #fff; }

/* ── Historial de notificaciones en resultSheet ── */
.delivery-history-block {
  margin-top: .25rem;
}

.delivery-history-rows {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin-top: .4rem;
}

.delivery-history-row {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  flex-wrap: wrap;
}

.delivery-history-time {
  font-size: .73rem;
  color: var(--muted, #8aa4b0);
  white-space: nowrap;
  flex-shrink: 0;
  padding-top: .15rem;
}

.delivery-history-channels {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
}

.delivery-ch-badge {
  font-size: .75rem;
  font-weight: 600;
  padding: .12rem .45rem;
  border-radius: 5px;
  background: var(--soft, #f4f8fa);
  color: var(--navy);
}
.delivery-ch-badge a {
  color: var(--blue);
  text-decoration: none;
  font-weight: 700;
}
.delivery-ch-badge a:hover { text-decoration: underline; }
.delivery-ch--enviado { background: rgba(47,143,91,.10); color: #1a5e35; }
.delivery-ch--fallido { background: rgba(220,95,95,.10); color: #7b2020; }

/* ══════════════════════════════════════════════════════════════════════════
   QB PLANTILLAS RÁPIDAS DE INTERPRETACIÓN
══════════════════════════════════════════════════════════════════════════ */

.qb-templates-bar {
  display: flex;
  justify-content: flex-end;
  margin-top: .35rem;
}

.qb-templates-toggle {
  font-size: .76rem !important;
  padding: .25rem .65rem !important;
  color: var(--blue) !important;
  border-color: rgba(14,124,134,.25) !important;
}
.qb-templates-toggle:hover { background: rgba(14,124,134,.06) !important; }

.qb-templates {
  margin-top: .5rem;
  border: 1px solid rgba(14,124,134,.2);
  border-radius: 8px;
  background: rgba(14,124,134,.03);
  padding: .6rem .7rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.qb-templates.is-hidden { display: none; }

.qb-template-group-label {
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--blue);
  margin: 0 0 .3rem;
}

.qb-template-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
}

.qb-template-chip {
  background: #fff;
  border: 1.5px solid rgba(14,124,134,.22);
  border-radius: 6px;
  padding: .22rem .55rem;
  font-size: .76rem;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
  white-space: nowrap;
  text-align: left;
}
.qb-template-chip:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

/* ══════════════════════════════════════════════════════════════════════════
   MEJORAS PRINT / PDF — visual-polish.css
   Aplican encima de styles.css @media print
══════════════════════════════════════════════════════════════════════════ */

@media print {

  /* 1 — Ribbon: forzar gradiente BioNova */
  .report-ribbon {
    height: 5px !important;
    background: linear-gradient(90deg, #12343b 0%, #0e7c86 55%, #44b3a2 100%) !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* 2 — Header: tinte muy sutil + línea teal inferior */
  .report-header {
    background: #f6fbfd !important;
    border-bottom: 2px solid #0e7c86 !important;
    padding: 6px 8px !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* 3 — Status badge en stamp: forzar color */
  .report-stamp-status {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* 4 — Patient block: forzar fondos */
  .report-patient-block {
    background: #f3f8fb !important;
    border: 1.5px solid #b8d4df !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .report-patient-block div {
    background: #fff !important;
    border-color: #d0e6ef !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .report-patient-block .is-full {
    background: linear-gradient(90deg, #daeef7 0%, #f0f9fd 65%, #fff 100%) !important;
    border-color: #9ecfe6 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* 5 — Encabezado de sección de examen: acento izquierdo + forzar fondo */
  .exam-section-header {
    background: #eef5f9 !important;
    border-left: 3.5px solid #0e7c86 !important;
    padding-left: 10px !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .is-test-validated > .exam-section-header {
    background: #ecf7f0 !important;
    border-left-color: #2f8f5b !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* 6 — Cabecera de tabla de resultados: forzar navy */
  .report-result-table th {
    background: #12343b !important;
    color: #fff !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* 7 — Filas alternas en tabla de resultados */
  .report-result-table tbody tr:nth-child(even) td {
    background: #f5f9fb !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* 8 — Notas clínicas */
  .report-notes {
    background: #fafcfe !important;
    border: 1px solid #d4e4ec !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* 9 — Bloque de interpretación QB */
  .qb-interpretation-block {
    background: #f7fffd !important;
    border-color: #b3dfd8 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* 10 — Bloque de verificación / QR */
  .report-verification {
    background: #f7fbfd !important;
    border: 1px solid #c8e0ec !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* 11 — Labels (span dentro de bloques de informe): azul BioNova */
  .report-patient-block span,
  .report-notes span,
  .report-footer span,
  .exam-section-header span {
    color: #0e7c86 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ══════════════════════════════════════════════════════════════
   RESULT PRINT BAR — barra sticky en vista completa (diálogo)
   ══════════════════════════════════════════════════════════════ */

.result-print-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 20px;
  background: rgba(255, 255, 255, .97);
  border-bottom: 1.5px solid var(--line, #d4e4ec);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.result-print-bar > span {
  font-size: .78rem;
  font-weight: 700;
  color: var(--navy, #12343b);
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  /* override label styles from report-patient-block span etc */
  text-transform: none !important;
}

.result-print-bar > div {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.result-print-bar button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 34px;
  padding: 0 14px;
  font-size: .8rem;
  font-weight: 700;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
}

/* PDF button — primary teal */
.result-print-bar button[data-action="result-server-pdf"] {
  background: var(--blue, #0e7c86);
  color: #fff;
  border: none;
}
.result-print-bar button[data-action="result-server-pdf"]:hover {
  background: var(--navy, #12343b);
}

/* Print button — ghost */
.result-print-bar button[data-action="print-clean"] {
  background: transparent;
  color: var(--navy, #12343b);
  border: 1.5px solid var(--line, #d4e4ec);
}
.result-print-bar button[data-action="print-clean"]:hover {
  background: var(--soft, #f0f7fa);
}

/* ══════════════════════════════════════════════════════════════
   QC — Carta Levey-Jennings: chart controls, stats bar, table
   ══════════════════════════════════════════════════════════════ */

.qc-chart-controls {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.qc-chart-ctrl-label {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--muted);
}

.qc-chart-ctrl-label select {
  min-width: 220px;
  font-size: .875rem;
}

/* Stats bar above L-J chart */
.qc-stats-bar {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: .875rem;
}

.qc-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: .5rem .875rem;
  min-width: 80px;
  flex: 1;
}

.qc-stat--ok   { border-color: #b3dfd8; background: #f0fdf9; }
.qc-stat--warn { border-color: #f8d48c; background: #fffbec; }
.qc-stat--bad  { border-color: #f0b9b9; background: #fff5f5; }

.qc-stat-val {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.1;
}

.qc-stat--ok   .qc-stat-val { color: #2f8f5b; }
.qc-stat--warn .qc-stat-val { color: #a06200; }
.qc-stat--bad  .qc-stat-val { color: #c0392b; }

.qc-stat-lbl {
  font-size: .7rem;
  color: var(--muted);
  margin-top: .2rem;
  text-align: center;
  line-height: 1.2;
}

/* L-J chart light container */
.qc-lj-chart {
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: #f8fafc;
}

.qc-lj-chart svg { display: block; }

/* Bottom 2-col grid (Westgard rules + history table) */
.qc-chart-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

@media (max-width: 720px) {
  .qc-chart-bottom { grid-template-columns: 1fr; }
  .qc-stats-bar .qc-stat { min-width: 70px; }
}

.qc-hist-scroll {
  overflow: auto;
  max-height: 260px;
}

/* Westgard badge helpers */
.qc-rule-ok     { color: #2f8f5b; font-weight: 600; }
.qc-rule-warn   { color: #e8930a; font-weight: 600; }
.qc-rule-reject { color: #dc5f5f; font-weight: 600; }

/* History table row highlighting */
.qc-row-reject td { background: #fff0f0 !important; }
.qc-row-warn   td { background: #fff9ee !important; }

/* ══════════════════════════════════════════════════════════════
   ANALYTICS — Dashboard de analítica de negocio
   ══════════════════════════════════════════════════════════════ */

.an-root {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Period selector */
.an-period-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.an-period-btns {
  display: flex;
  gap: .35rem;
}

.an-period-btn {
  padding: .35rem .85rem;
  font-size: .8rem;
  border-radius: 20px;
}

.an-period-btn.is-active {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}

.an-export-btn {
  margin-left: auto;
  font-size: .8rem;
  font-weight: 700;
  gap: .25rem;
}

/* KPI strip */
.an-kpi-strip {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 900px) {
  .an-kpi-strip { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .an-kpi-strip { grid-template-columns: repeat(2, 1fr); }
}

.an-kpi {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

.an-kpi--primary {
  background: linear-gradient(135deg, #12343b 0%, #0e7c86 100%);
  border-color: #0e7c86;
}

.an-kpi--primary .an-kpi-label { color: rgba(255,255,255,.7); }
.an-kpi--primary .an-kpi-value { color: #fff; }

.an-kpi--good  { border-left: 3px solid #2f8f5b; }
.an-kpi--mid   { border-left: 3px solid #f6b73c; }
.an-kpi--low   { border-left: 3px solid #dc5f5f; }

.an-kpi-label {
  font-size: .75rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .03em;
}

.an-kpi-value {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.1;
}

/* Revenue chart panel */
.an-chart-panel { padding: 1.25rem; }

/* 2-column grid for paired panels */
.an-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

@media (max-width: 800px) {
  .an-grid-2 { grid-template-columns: 1fr; }
}

/* Horizontal bar chart */
.an-hbars {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-top: .5rem;
}

.an-hbar-row {
  display: grid;
  grid-template-columns: 140px 1fr 80px;
  align-items: center;
  gap: .5rem;
  font-size: .82rem;
}

.an-hbar-label {
  color: var(--ink);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.an-hbar-track {
  height: 8px;
  background: var(--soft);
  border-radius: 4px;
  overflow: hidden;
}

.an-hbar-fill {
  height: 100%;
  background: var(--blue);
  border-radius: 4px;
  transition: width .3s ease;
}

.an-hbar-val {
  text-align: right;
  font-size: .78rem;
  color: var(--muted);
  font-weight: 600;
}

/* Donut chart */
.an-donut-wrap {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-top: .5rem;
}

.an-donut-svg {
  width: 120px;
  height: 120px;
  flex-shrink: 0;
}

.an-legend {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  flex: 1;
  min-width: 120px;
}

.an-legend-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .8rem;
}

.an-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.an-legend-name {
  flex: 1;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.an-legend-pct {
  font-weight: 700;
  color: var(--navy);
  min-width: 36px;
  text-align: right;
}

/* Hour distribution heatmap-style bar chart */
.an-hour-grid {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 70px;
  padding-bottom: 18px;
  position: relative;
}

.an-hour-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  gap: 2px;
}

.an-hour-bar {
  width: 100%;
  border-radius: 2px 2px 0 0;
  min-height: 2px;
  transition: background .2s;
}

.an-hour-col span {
  font-size: 8px;
  color: #94a3b8;
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════
   Doctor notifications — toast + history block
   ══════════════════════════════════════════════════════════════ */

/* Toast base */
.toast-doctor {
  background: var(--paper);
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,.15);
  padding: .875rem 1rem;
  min-width: 300px;
  max-width: 380px;
  animation: toastIn .25s ease;
  border-left: 4px solid var(--navy);
}

.toast-doctor.is-leaving { animation: toastOut .3s ease forwards; }

.toast-doctor--critical { border-left-color: #dc5f5f; }
.toast-doctor--ready    { border-left-color: #2f8f5b; }
.toast-doctor--has-critical { border-left-color: #e8930a; }

.toast-doctor-header {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  margin-bottom: .625rem;
}

.toast-doctor-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  flex-shrink: 0;
  background: #fff3cd;
}

.toast-doctor--critical .toast-doctor-icon { background: #fee2e2; }
.toast-doctor--ready    .toast-doctor-icon { background: #dcfce7; }

.toast-doctor-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .1rem;
}

.toast-doctor-info strong {
  font-size: .85rem;
  font-weight: 700;
  color: var(--navy);
}

.toast-doctor-info span {
  font-size: .78rem;
  color: var(--muted);
}

.toast-doctor-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
  padding: 0;
  flex-shrink: 0;
}

.toast-doctor-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

.toast-doctor-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .85rem;
  border-radius: 6px;
  font-size: .8rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.toast-doctor-btn--wa {
  background: #25d366;
  color: #fff;
}

.toast-doctor-btn--wa:hover { background: #1ebe5d; color: #fff; }

.toast-doctor-no-phone {
  font-size: .78rem;
  color: var(--muted);
  font-style: italic;
}

/* History block in result sheet */
.doctor-notif-block {
  background: #fdfbf6;
  border: 1px solid #e8dfc8;
  border-radius: 8px;
  padding: .75rem 1rem;
  margin-top: .75rem;
}

.doctor-notif-block > span {
  font-size: .75rem;
  font-weight: 700;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: .04em;
  display: block;
  margin-bottom: .5rem;
}

.doctor-notif-rows { display: flex; flex-direction: column; gap: .4rem; }

.doctor-notif-row {
  display: flex;
  align-items: center;
  gap: .625rem;
  flex-wrap: wrap;
  font-size: .8rem;
}

.doctor-notif-time { color: var(--muted); min-width: 110px; }

.doctor-notif-badge {
  display: inline-block;
  padding: .1rem .5rem;
  border-radius: 20px;
  font-size: .72rem;
  font-weight: 700;
  white-space: nowrap;
}

.doctor-notif-badge--critical { background: #fee2e2; color: #991b1b; }
.doctor-notif-badge--ready    { background: #dcfce7; color: #166534; }

.doctor-notif-detail { color: var(--ink); }
.doctor-notif-detail a { color: var(--blue); }

/* ── Agenda de citas ───────────────────────────────────────────────────────── */
.appt-root { padding: 1.5rem; }

.appt-tabs {
  display: flex;
  gap: .4rem;
  margin-bottom: 1.25rem;
  border-bottom: 2px solid var(--soft);
  padding-bottom: .5rem;
}
.appt-tab-btn {
  padding: .35rem .9rem;
  border-radius: 6px 6px 0 0;
  border: none;
  background: transparent;
  font-size: .82rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: color .15s, background .15s;
}
.appt-tab-btn:hover { color: var(--navy); background: var(--soft); }
.appt-tab-btn.is-active { color: var(--blue); background: #e8f5f3; }

.appt-tab-body { min-height: 300px; }

/* Today tab */
.appt-today-root {}
.appt-today-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.2rem;
}
.appt-today-date { font-size: 1.05rem; font-weight: 700; color: var(--navy); margin: 0 0 .15rem; text-transform: capitalize; }
.appt-today-sub  { font-size: .82rem; color: var(--muted); margin: 0; }
.appt-today-stats { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.appt-stat { padding: .2rem .65rem; border-radius: 20px; font-size: .75rem; font-weight: 700; }
.appt-stat--pending   { background: #fef9c3; color: #854d0e; }
.appt-stat--confirmed { background: #dbeafe; color: #1e3a8a; }
.appt-stat--arrived   { background: #d1fae5; color: #065f46; }
.appt-stat--converted { background: #ede9fe; color: #4c1d95; }

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

/* Full appointment card */
.appt-full-card {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: .75rem 1rem;
  align-items: start;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-left: 4px solid #e2e8f0;
  border-radius: 8px;
  padding: .85rem 1rem;
}
.appt-full-card--pending   { border-left-color: #f6b73c; }
.appt-full-card--confirmed { border-left-color: #3b82f6; }
.appt-full-card--arrived   { border-left-color: #10b981; }
.appt-full-card--cancelled { border-left-color: #dc5f5f; opacity: .6; }
.appt-full-card--converted { border-left-color: #8b5cf6; }

.appt-full-time { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding-top: .1rem; }
.appt-time-badge {
  font-size: 1.1rem; font-weight: 800; color: var(--navy);
  background: var(--soft); border-radius: 6px; padding: .2rem .4rem;
}
.appt-status-badge {
  font-size: .68rem; font-weight: 700; padding: .15rem .4rem;
  border-radius: 20px; white-space: nowrap; text-align: center;
}
.appt-status--pending   { background: #fef9c3; color: #854d0e; }
.appt-status--confirmed { background: #dbeafe; color: #1e3a8a; }
.appt-status--arrived   { background: #d1fae5; color: #065f46; }
.appt-status--cancelled { background: #fee2e2; color: #991b1b; }
.appt-status--converted { background: #ede9fe; color: #4c1d95; }

.appt-full-info { display: flex; flex-direction: column; gap: .2rem; }
.appt-patient { font-size: .95rem; font-weight: 700; color: var(--navy); margin: 0; }
.appt-meta { font-size: .78rem; color: var(--muted); margin: 0; }
.appt-tests-line { font-style: italic; }
.appt-order-ref { font-weight: 600; color: var(--blue); }

.appt-full-actions { display: flex; flex-direction: column; gap: .35rem; align-items: flex-end; }
.appt-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .3rem .7rem; border-radius: 6px; font-size: .75rem; font-weight: 700;
  cursor: pointer; border: 1px solid transparent; text-decoration: none; white-space: nowrap;
  transition: opacity .15s;
}
.appt-btn:hover { opacity: .85; }
.appt-btn--confirm { background: #dbeafe; color: #1e3a8a; }
.appt-btn--arrive  { background: #d1fae5; color: #065f46; }
.appt-btn--convert { background: var(--blue); color: #fff; }
.appt-btn--wa      { background: #dcfce7; color: #166534; }
.appt-btn--cancel  { background: transparent; color: var(--red); border-color: var(--red); }

/* Week tab */
.appt-week-root {}
.appt-week-nav {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1rem;
}
.appt-week-label { font-weight: 700; color: var(--navy); text-transform: capitalize; font-size: .9rem; }
.appt-week-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: .5rem;
  overflow-x: auto;
}
.appt-day-col {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.appt-day-col--today { border-color: var(--blue); background: #f0fdfa; }
.appt-day-header {
  display: flex; flex-direction: column; align-items: center; padding: .45rem .3rem;
  border-bottom: 1px solid #e2e8f0; background: var(--soft);
}
.appt-day-col--today .appt-day-header { background: #e8f5f3; }
.appt-day-name { font-size: .7rem; font-weight: 700; color: var(--muted); text-transform: uppercase; }
.appt-day-num  { font-size: 1.1rem; font-weight: 800; color: var(--navy); }
.appt-day-num--today { color: var(--blue); }
.appt-day-slots { padding: .4rem; display: flex; flex-direction: column; gap: .3rem; min-height: 60px; }
.appt-day-empty { font-size: .72rem; color: var(--muted); text-align: center; margin: .5rem 0; }

.appt-mini-card {
  border-radius: 4px; padding: .2rem .35rem; cursor: pointer;
  border-left: 3px solid #cbd5e1; background: #f8fafc;
}
.appt-mini-card--pending   { border-left-color: #f6b73c; background: #fffbeb; }
.appt-mini-card--confirmed { border-left-color: #3b82f6; background: #eff6ff; }
.appt-mini-card--arrived   { border-left-color: #10b981; background: #f0fdf4; }
.appt-mini-card--cancelled { border-left-color: #dc5f5f; opacity: .5; }
.appt-mini-card--converted { border-left-color: #8b5cf6; background: #f5f3ff; }
.appt-mini-time { display: block; font-size: .65rem; font-weight: 800; color: var(--navy); }
.appt-mini-name { display: block; font-size: .68rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* New appointment form */
.appt-new-root { max-width: 700px; }
.appt-form-title { font-size: 1rem; font-weight: 700; color: var(--navy); margin: 0 0 1rem; }
.appt-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem 1rem;
  margin-bottom: 1rem;
}
.appt-label { display: flex; flex-direction: column; gap: .3rem; font-size: .8rem; font-weight: 600; color: var(--navy); }
.appt-label--full { grid-column: 1 / -1; }
.appt-input {
  padding: .45rem .65rem; border: 1.5px solid #cbd5e1; border-radius: 6px;
  font-size: .85rem; color: var(--ink); background: #fff;
  transition: border-color .15s;
}
.appt-input:focus { outline: none; border-color: var(--blue); }
.appt-textarea { resize: vertical; min-height: 60px; }
.appt-form-footer { display: flex; justify-content: flex-end; gap: .5rem; }
.required-mark { color: var(--red); }

/* History tab */
.appt-history-root {}
.appt-hist-search {
  width: 100%; max-width: 420px; padding: .45rem .75rem;
  border: 1.5px solid #cbd5e1; border-radius: 6px; font-size: .85rem;
  margin-bottom: .75rem; display: block;
}
.appt-hist-list { display: flex; flex-direction: column; gap: .4rem; }
.appt-hist-row {
  display: grid;
  grid-template-columns: 100px 55px 1fr 1fr 90px 110px;
  align-items: center;
  gap: .5rem;
  padding: .5rem .75rem;
  border-radius: 6px;
  background: #fff;
  border: 1px solid #e2e8f0;
  font-size: .8rem;
}
.appt-hist-row--cancelled { opacity: .55; }
.appt-hist-date   { color: var(--muted); font-weight: 600; }
.appt-hist-time   { color: var(--navy); font-weight: 700; }
.appt-hist-patient{ font-weight: 700; color: var(--navy); }
.appt-hist-doctor { color: var(--muted); font-style: italic; }
.appt-hist-order  { font-size: .72rem; color: var(--blue); font-weight: 700; }

/* Empty state */
.appt-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1rem; padding: 3rem 1rem; color: var(--muted); text-align: center;
}
.appt-empty p { font-size: .9rem; margin: 0; }

/* ── Widget de citas en dashboard admin ────────────────────────────────────── */
.adm-appt-widget {}
.adm-appt-widget-link {
  cursor: pointer; border: none; background: var(--soft);
  font-size: .75rem; font-weight: 700; color: var(--navy);
  padding: .2rem .55rem; border-radius: 20px;
}
.adm-appt-widget-link:hover { background: #d1ede9; }

.adm-appt-pills { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .75rem; }
.adm-appt-pill {
  font-size: .72rem; font-weight: 700; padding: .18rem .55rem;
  border-radius: 20px;
}
.adm-appt-pill--pending   { background: #fef9c3; color: #854d0e; }
.adm-appt-pill--confirmed { background: #dbeafe; color: #1e3a8a; }
.adm-appt-pill--arrived   { background: #d1fae5; color: #065f46; }
.adm-appt-pill--converted { background: #ede9fe; color: #4c1d95; }
.adm-appt-pill--empty     { background: var(--soft); color: var(--muted); }

.adm-appt-upcoming { display: flex; flex-direction: column; gap: .3rem; }
.adm-appt-row {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: .5rem;
  padding: .3rem .45rem;
  border-radius: 5px;
  background: #f8fafc;
  font-size: .78rem;
}
.adm-appt-row-time  { font-weight: 800; color: var(--navy); }
.adm-appt-row-name  { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-appt-row-badge { font-size: .68rem; font-weight: 700; padding: .1rem .35rem; border-radius: 10px; white-space: nowrap; }
.adm-appt-row-badge--pending   { background: #fef9c3; color: #854d0e; }
.adm-appt-row-badge--confirmed { background: #dbeafe; color: #1e3a8a; }

/* ═══════════════════════════════════════════════════════
   Valores Críticos (tab dentro de Control de Calidad)
═══════════════════════════════════════════════════════ */
.crit-root { display: flex; flex-direction: column; gap: 1.5rem; }

.crit-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .75rem;
  padding: .75rem 1rem;
  background: var(--soft); border-radius: 8px;
}
.crit-header-stats { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.crit-stat { font-size: .82rem; color: var(--muted); }
.crit-stat strong { color: var(--navy); }
.crit-stat--on strong { color: var(--green); }

.crit-table { width: 100%; font-size: .83rem; }
.crit-table th { font-size: .73rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }

.crit-section-row td {
  background: #eef4f6; color: var(--navy);
  font-size: .73rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; padding: .45rem .75rem;
}

.crit-row { transition: background .15s; }
.crit-row:hover { background: #f5fafb; }
.crit-row--off { opacity: .55; }

.crit-name { font-weight: 600; color: var(--navy); max-width: 260px; }
.crit-unit { color: var(--muted); font-size: .78rem; }
.crit-input-cell { width: 100px; }
.crit-input {
  width: 90px; padding: .3rem .5rem;
  border: 1px solid var(--border); border-radius: 5px;
  font-size: .82rem; background: white; color: var(--ink);
  transition: border-color .15s;
}
.crit-input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 2px rgba(14,124,134,.12); }

.crit-toggle-cell { text-align: center; }
.crit-toggle { display: inline-flex; align-items: center; cursor: pointer; }
.crit-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.crit-toggle-track {
  width: 36px; height: 20px; border-radius: 10px;
  background: #cbd5e1; transition: background .2s;
  position: relative;
}
.crit-toggle-track::after {
  content: ""; position: absolute;
  width: 14px; height: 14px; border-radius: 50%;
  background: white; top: 3px; left: 3px;
  transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.crit-toggle input:checked ~ .crit-toggle-track { background: var(--green); }
.crit-toggle input:checked ~ .crit-toggle-track::after { transform: translateX(16px); }

.crit-action-cell { text-align: center; }
.crit-del-btn {
  background: none; border: 1px solid var(--red); color: var(--red);
  border-radius: 4px; padding: .2rem .45rem; font-size: .78rem;
  cursor: pointer; transition: background .15s, color .15s;
}
.crit-del-btn:hover { background: var(--red); color: white; }
.crit-base-tag {
  font-size: .68rem; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.crit-badge-custom {
  display: inline-block; margin-left: .4rem;
  font-size: .65rem; font-weight: 700; padding: .1rem .35rem;
  background: #ede9fe; color: #4c1d95; border-radius: 10px;
  text-transform: uppercase; letter-spacing: .03em;
}

.crit-add-form {
  background: #f8fafc; border: 1px dashed var(--border);
  border-radius: 8px; padding: 1rem 1.25rem;
}
.crit-add-title { font-weight: 700; color: var(--navy); margin-bottom: .75rem; }
.crit-add-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr auto;
  gap: .6rem; align-items: end;
}
.crit-add-label { display: flex; flex-direction: column; gap: .3rem; font-size: .8rem; color: var(--muted); font-weight: 600; }
.crit-add-input {
  padding: .35rem .55rem; border: 1px solid var(--border); border-radius: 5px;
  font-size: .83rem; background: white; color: var(--ink);
}
.crit-add-input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 2px rgba(14,124,134,.12); }
.crit-add-btn { align-self: end; white-space: nowrap; }
.crit-add-hint { font-size: .74rem; color: var(--muted); margin-top: .65rem; }

@media (max-width: 700px) {
  .crit-add-grid { grid-template-columns: 1fr 1fr; }
  .crit-add-btn  { grid-column: 1 / -1; }
  .crit-input    { width: 70px; }
}

/* ═══════════════════════════════════════════════════════
   Pruebas Referidas
═══════════════════════════════════════════════════════ */
.ref-root { display: flex; flex-direction: column; gap: 1.5rem; }

.ref-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; gap: .75rem;
}
.ref-title   { font-size: 1.1rem; font-weight: 800; color: var(--navy); margin: 0; }
.ref-subtitle { font-size: .82rem; color: var(--muted); margin: .15rem 0 0; }

.ref-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .75rem;
}
.ref-kpi {
  background: var(--soft); border-radius: 10px; padding: .9rem 1rem;
  display: flex; flex-direction: column; gap: .2rem;
}
.ref-kpi--sent     { background: #dbeafe; }
.ref-kpi--received { background: #d1fae5; }
.ref-kpi--alert    { background: #fee2e2; }
.ref-kpi-value  { font-size: 1.6rem; font-weight: 800; color: var(--navy); line-height: 1; }
.ref-kpi--alert .ref-kpi-value { color: var(--red); }
.ref-kpi-label  { font-size: .75rem; color: var(--muted); font-weight: 600; }

.ref-tabs {
  display: flex; gap: .5rem; border-bottom: 2px solid var(--border);
  padding-bottom: 0;
}
.ref-tab-btn {
  background: none; border: none; border-bottom: 3px solid transparent;
  padding: .5rem .9rem; font-size: .83rem; font-weight: 700; color: var(--muted);
  cursor: pointer; margin-bottom: -2px; transition: color .15s, border-color .15s;
}
.ref-tab-btn--active { color: var(--blue); border-bottom-color: var(--blue); }
.ref-tab-btn:hover:not(.ref-tab-btn--active) { color: var(--navy); }

.ref-table-wrap { overflow-x: auto; }
.ref-table { width: 100%; font-size: .82rem; }
.ref-table th { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }

.ref-row { transition: background .15s; }
.ref-row:hover { background: #f5fafb; }
.ref-row--overdue { background: #fff5f5; }
.ref-row--overdue:hover { background: #fee2e2; }

.ref-id { font-weight: 700; }
.ref-order-link { color: var(--blue); text-decoration: none; font-weight: 700; }
.ref-order-link:hover { text-decoration: underline; }
.ref-patient { max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ref-tests  { max-width: 200px; }
.ref-tests .tag { font-size: .7rem; }
.ref-lab    { font-weight: 600; color: var(--navy); white-space: nowrap; }
.ref-date, .ref-expected { white-space: nowrap; font-size: .8rem; }
.ref-expected--late { color: var(--red); font-weight: 700; }
.ref-late-tag {
  display: inline-block; font-size: .65rem; font-weight: 700;
  background: var(--red); color: white;
  padding: .1rem .3rem; border-radius: 4px; margin-left: .25rem;
}
.ref-days { text-align: center; font-weight: 600; color: var(--muted); }

.ref-status {
  display: inline-block; font-size: .72rem; font-weight: 700;
  padding: .18rem .5rem; border-radius: 20px; white-space: nowrap;
}
.ref-status--pending  { background: #fef9c3; color: #854d0e; }
.ref-status--sent     { background: #dbeafe; color: #1e3a8a; }
.ref-status--received { background: #d1fae5; color: #065f46; }
.ref-status--entered  { background: #ede9fe; color: #4c1d95; }

.ref-actions { display: flex; gap: .35rem; align-items: center; white-space: nowrap; }
.ref-btn {
  font-size: .75rem; padding: .22rem .55rem; white-space: nowrap;
}
.ref-btn--del { color: var(--red); border-color: var(--red); }
.ref-btn--del:hover { background: var(--red); color: white; }

.ref-empty {
  text-align: center; padding: 3rem 1rem; color: var(--muted);
  background: var(--soft); border-radius: 10px;
}

@media (max-width: 900px) {
  .ref-kpis { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════════════
   QB — Validación en lote
═══════════════════════════════════════════════════════ */
.qb-batch-root {
  display: flex; flex-direction: column; gap: 1.25rem;
  padding: .5rem 0;
}

.qb-batch-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; gap: .5rem;
}
.qb-batch-title   { font-size: 1.05rem; font-weight: 800; color: var(--navy); margin: 0; }
.qb-batch-subtitle { font-size: .82rem; color: var(--muted); margin: .15rem 0 0; }

.qb-batch-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .75rem;
  background: #f0f9ff; border: 1px solid #bae6fd;
  border-radius: 8px; padding: .7rem 1rem;
}
.qb-batch-select-all {
  display: flex; align-items: center; gap: .5rem;
  font-size: .85rem; font-weight: 600; color: var(--navy); cursor: pointer;
}
.qb-batch-select-all input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--blue); }
.qb-batch-actions { display: flex; align-items: center; gap: .75rem; }
.qb-batch-count { font-size: .82rem; font-weight: 700; color: var(--muted); }
.qb-batch-validate-btn:disabled { opacity: .45; cursor: not-allowed; }

.qb-batch-section { display: flex; flex-direction: column; gap: .5rem; }
.qb-batch-section-label {
  font-size: .72rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted);
  padding: .2rem 0;
  border-bottom: 1px solid var(--border);
}
.qb-batch-section-label--blocked { color: var(--amber); }

.qb-batch-list { display: flex; flex-direction: column; gap: .35rem; }

.qb-batch-row {
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem .85rem;
  background: white; border: 1px solid var(--border);
  border-radius: 8px; cursor: pointer;
  transition: background .12s, border-color .12s;
}
.qb-batch-row:hover:not(.qb-batch-row--blocked) { background: #f0f9ff; border-color: var(--blue); }
.qb-batch-row--checked { background: #eff6ff; border-color: var(--blue); }
.qb-batch-row--blocked { opacity: .75; cursor: default; background: #fafafa; }

.qb-batch-row input[type="checkbox"] {
  width: 16px; height: 16px; flex-shrink: 0;
  accent-color: var(--blue); cursor: pointer;
}
.qb-batch-row--blocked input[type="checkbox"] { cursor: not-allowed; }

.qb-batch-info {
  flex: 1; display: flex; align-items: center; flex-wrap: wrap; gap: .35rem .65rem;
  min-width: 0;
}
.qb-batch-id      { font-weight: 800; color: var(--navy); white-space: nowrap; }
.qb-batch-patient { font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.qb-batch-doc     { font-size: .77rem; color: var(--muted); white-space: nowrap; }
.qb-batch-badges  { display: flex; gap: .3rem; flex-wrap: wrap; }
.qb-batch-blockers { display: flex; gap: .3rem; flex-wrap: wrap; width: 100%; }

.qb-batch-review-link {
  font-size: .75rem; font-weight: 700; color: var(--blue);
  white-space: nowrap; cursor: pointer; padding: .15rem .4rem;
  border-radius: 4px; transition: background .12s;
  flex-shrink: 0;
}
.qb-batch-review-link:hover { background: #e0f2fe; }

.qb-batch-empty {
  text-align: center; padding: 3rem 1rem; color: var(--muted);
  background: var(--soft); border-radius: 10px;
}

@media (max-width: 700px) {
  .qb-batch-toolbar { flex-direction: column; align-items: flex-start; }
  .qb-batch-patient { max-width: 140px; }
}

/* ═══════════════════════════════════════════════════════
   Test Catalog — Sin plantilla / Quick Template
═══════════════════════════════════════════════════════ */

/* Badge en tarjeta normal */
.tc-badge-no-tpl {
  font-size: .65rem; font-weight: 700; padding: .1rem .35rem;
  background: #fef3c7; color: #92400e; border-radius: 10px;
  text-transform: uppercase; letter-spacing: .03em;
}
.tc-card--no-tpl { border-left: 3px solid var(--amber) !important; }

/* Botón "⚠ Sin plantilla (N)" en toolbar */
.tc-no-tpl-btn {
  background: #fef3c7; border: 1px solid #f6b73c; color: #92400e;
  border-radius: 6px; padding: .3rem .75rem; font-size: .8rem; font-weight: 700;
  cursor: pointer; transition: background .15s;
}
.tc-no-tpl-btn:hover { background: #fde68a; }

/* Botón "⚡ Plantilla rápida" en detalle */
.tc-quick-tpl-detail-btn {
  background: #fef3c7; border: 1px solid #f6b73c; color: #92400e;
  border-radius: 6px; padding: .3rem .85rem; font-size: .8rem; font-weight: 700;
  cursor: pointer; transition: background .15s;
}
.tc-quick-tpl-detail-btn:hover { background: var(--amber); color: white; }

/* Vista "Sin plantilla" */
.tc-no-tpl-title { font-weight: 800; color: var(--navy); font-size: .9rem; }
.tc-no-tpl-count {
  font-size: .78rem; font-weight: 700; background: var(--amber);
  color: white; padding: .15rem .5rem; border-radius: 20px;
}

.tc-notpl-banner {
  background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px;
  padding: .75rem 1rem; display: flex; align-items: center; gap: .75rem;
}
.tc-notpl-banner-text { display: flex; flex-wrap: wrap; gap: .25rem .6rem; align-items: baseline; font-size: .83rem; }
.tc-notpl-banner-text strong { color: #92400e; }
.tc-notpl-banner-text span { color: var(--muted); }

.tc-notpl-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .5rem;
  padding: .6rem .9rem; background: var(--soft); border-radius: 8px;
}
.tc-notpl-selectall {
  display: flex; align-items: center; gap: .5rem;
  font-size: .83rem; font-weight: 600; color: var(--navy); cursor: pointer;
}
.tc-notpl-selectall input { accent-color: var(--blue); width: 15px; height: 15px; }
.tc-notpl-actions { display: flex; align-items: center; gap: .65rem; }
.tc-notpl-selcount { font-size: .8rem; color: var(--muted); font-weight: 700; }
.tc-notpl-bulk-btn:disabled { opacity: .4; cursor: not-allowed; }

.tc-notpl-groups { display: flex; flex-direction: column; gap: 1.1rem; }

.tc-notpl-group-header {
  display: flex; align-items: center; gap: .6rem;
  padding: .35rem .5rem; border-bottom: 2px solid var(--border);
}
.tc-notpl-group-name { font-weight: 800; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--navy); }
.tc-notpl-group-count {
  font-size: .72rem; font-weight: 700;
  background: var(--soft); color: var(--muted);
  padding: .1rem .4rem; border-radius: 10px;
}

.tc-notpl-list { display: flex; flex-direction: column; gap: .25rem; }

.tc-notpl-row {
  display: flex; align-items: center; gap: .65rem;
  padding: .45rem .6rem; border-radius: 6px; border: 1px solid transparent;
  transition: background .12s;
}
.tc-notpl-row:hover { background: #f8fafc; border-color: var(--border); }
.tc-notpl-row--checked { background: #eff6ff; border-color: #bfdbfe; }

.tc-notpl-check input { accent-color: var(--blue); width: 15px; height: 15px; cursor: pointer; }
.tc-notpl-info { flex: 1; display: flex; align-items: center; gap: .65rem; min-width: 0; }
.tc-notpl-codigo { font-weight: 800; color: var(--muted); font-size: .78rem; white-space: nowrap; }
.tc-notpl-nombre { color: var(--navy); font-size: .83rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tc-notpl-single-btn {
  font-size: .75rem; padding: .2rem .55rem; white-space: nowrap;
  border-color: var(--amber); color: #92400e;
}
.tc-notpl-single-btn:hover { background: var(--amber); color: white; }

@media (max-width: 700px) {
  .tc-notpl-info { flex-direction: column; align-items: flex-start; gap: .15rem; }
  .tc-notpl-nombre { white-space: normal; }
}

/* ═══════════════════════════════════════════════════
   LAUNCHPAD — Panel de inicio post-login
   ═══════════════════════════════════════════════════ */
.lp-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: var(--bg, #f4f8fa);
  display: flex;
  opacity: 1; transition: opacity .22s;
}
.lp-overlay.is-hidden { display: none; }
.lp-overlay.lp-exit   { opacity: 0; pointer-events: none; }

.lp2-wrap {
  display: flex;
  width: 100%; height: 100%;
}

/* ── Panel izquierdo (identidad de rol) ── */
.lp2-left {
  width: 240px; flex-shrink: 0;
  background: #0b232e; position: relative; overflow: hidden;
  display: flex; flex-direction: column; padding: 20px 18px 16px;
}
.lp2-ring {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.055); pointer-events: none;
}
.lp2-r1 { width:220px; height:220px; top:-80px;  left:-80px; }
.lp2-r2 { width:130px; height:130px; top:-25px;  left:-25px; }
.lp2-r3 { width:200px; height:200px; bottom:-60px; right:-70px; }
.lp2-r4 { width:110px; height:110px; bottom:15px;  right:-20px; }
.lp2-r5 { width: 60px; height: 60px; bottom:60px;  right: 25px; }

.lp2-logo { display:flex; align-items:center; gap:9px; margin-bottom:22px; position:relative; z-index:1; }
.lp2-mark {
  width:34px; height:34px; border-radius:9px; background:#0e7c86;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:600; color:#fff; flex-shrink:0; letter-spacing:-.3px;
}
.lp2-bn  { font-size:13px; font-weight:500; color:#fff; line-height:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:110px; }
.lp2-bs  { font-size:9px; color:#5aaab2; margin-top:2px; }
.lp2-stars { margin-left:auto; display:flex; gap:3px; }
.lp2-stars i { font-size:10px; color:rgba(68,179,162,.28); }

.lp2-prof { text-align:center; margin-bottom:16px; position:relative; z-index:1; }
.lp2-aw {
  width:64px; height:64px; border-radius:50%;
  border:2.5px solid #0e7c86; padding:4px;
  margin:0 auto 10px; transition: border-color .3s;
}
.lp2-av {
  width:100%; height:100%; border-radius:50%;
  background:#0e7c86; display:flex; align-items:center; justify-content:center;
  font-size:17px; font-weight:500; color:#fff; transition: background .3s;
}
.lp2-grt { font-size:10px; color:#5aaab2; margin-bottom:2px; }
.lp2-nm  { font-size:13px; font-weight:500; color:#fff; line-height:1.3; margin-bottom:9px; }
.lp2-rc  {
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 10px; border-radius:999px;
  font-size:10px; font-weight:500;
  border: 0.5px solid rgba(68,179,162,.3);
}
.lp2-rc i { font-size:12px; }

.lp2-div { border:none; border-top:0.5px solid rgba(255,255,255,.07); margin:2px 0 14px; }

.lp2-sts { display:flex; flex-direction:column; gap:5px; margin-bottom:13px; position:relative; z-index:1; }
.lp2-st  {
  display:flex; align-items:center; gap:7px; padding:7px 9px;
  border-radius:8px; background:rgba(255,255,255,.04);
  border:0.5px solid rgba(255,255,255,.07);
}
.lp2-st.hot { background:rgba(220,95,95,.08); border-color:rgba(220,95,95,.2); }
.lp2-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.lp2-st span { font-size:10.5px; color:rgba(255,255,255,.62); line-height:1.3; }
.lp2-st span b { color:#fff; font-weight:500; }

.lp2-prog { margin-bottom:13px; position:relative; z-index:1; }
.lp2-ph  { display:flex; justify-content:space-between; margin-bottom:5px; }
.lp2-ph span { font-size:9px; color:rgba(255,255,255,.3); }
.lp2-pbar { height:3px; background:rgba(255,255,255,.07); border-radius:2px; overflow:hidden; }
.lp2-pfill { height:100%; background:#0e7c86; border-radius:2px; transition: width .5s; }

.lp2-foot {
  margin-top:auto; padding-top:12px;
  border-top:0.5px solid rgba(255,255,255,.06);
  display:flex; align-items:center; gap:6px; position:relative; z-index:1;
}
.lp2-adot { width:5px; height:5px; border-radius:50%; background:#2f8f5b; flex-shrink:0; }
.lp2-atxt { font-size:10px; color:rgba(255,255,255,.3); flex:1; }
.lp2-clk  { font-size:12px; font-weight:500; color:rgba(255,255,255,.5); font-variant-numeric:tabular-nums; }
.lp2-logout {
  margin-left:4px; padding:5px 8px; border-radius:7px; border:none; cursor:pointer;
  background:rgba(220,95,95,.12); color:rgba(220,95,95,.6);
  font-size:14px; line-height:1; display:flex; align-items:center;
  transition: background .15s, color .15s;
}
.lp2-logout:hover { background:rgba(220,95,95,.25); color:#dc5f5f; }

/* ── Panel derecho (misión y tiles) ── */
.lp2-right { flex:1; background:var(--surface-0, #fff); display:flex; flex-direction:column; overflow:hidden; }

.lp2-head { padding:13px 18px 12px; border-bottom:0.5px solid var(--border); }
.lp2-mt   { font-size:9px; font-weight:500; text-transform:uppercase; letter-spacing:.09em; color:var(--text-muted,#8fa3b0); display:flex; align-items:center; gap:5px; margin-bottom:3px; }
.lp2-mt i { font-size:11px; }
.lp2-mdate { font-size:13px; font-weight:500; color:var(--text-primary, #12343b); margin-bottom:2px; }
.lp2-mtxt  { font-size:11px; color:var(--text-secondary, #5a7080); line-height:1.4; }

.lp2-kpi  { display:flex; border-bottom:0.5px solid var(--border); }
.lp2-kv   { flex:1; text-align:center; padding:10px 8px; }
.lp2-kn   { font-size:22px; font-weight:600; color:var(--text-primary, #12343b); line-height:1; font-variant-numeric:tabular-nums; }
.lp2-kn.red { color:#b33f3f; }
.lp2-kl   { font-size:9.5px; color:var(--text-muted, #8fa3b0); margin-top:3px; font-weight:500; }
.lp2-kdiv { width:0.5px; background:var(--border); flex-shrink:0; }

.lp2-body { padding:14px 20px 24px; flex:1; overflow-y:auto; }

.lp2-pw { margin-bottom:10px; }
.lp2-hg { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:10px; }
.lp2-rg { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:10px; }
.lp2-sg { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }

/* ── Tiles ── */
.lp2-tile {
  position:relative; border-radius:11px; overflow:hidden;
  cursor:pointer; transition:transform .13s;
}
.lp2-tile:hover  { transform:translateY(-3px); }
.lp2-tile:active { transform:scale(.97); }

.lp2-tile::after {
  content:''; position:absolute; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.09); pointer-events:none;
}
.lp2-tile::before {
  content:''; position:absolute; border-radius:50%;
  border:1px solid rgba(255,255,255,.055); pointer-events:none;
}
.lp-pt::after  { width: 90px; height: 90px; right:-20px; top:50%; transform:translateY(-50%); }
.lp-pt::before { width: 54px; height: 54px; right: 18px; top:50%; transform:translateY(-50%); }
.lp-ht::after  { width:110px; height:110px; right:-26px; bottom:-26px; }
.lp-ht::before { width: 64px; height: 64px; right:  8px; bottom:  8px; }
.lp-rt::after  { width: 76px; height: 76px; right:-20px; bottom:-20px; }
.lp-rt::before { width: 45px; height: 45px; right:  7px; bottom:  7px; }

.lp2-twm {
  position:absolute; color:rgba(255,255,255,.07);
  pointer-events:none; line-height:1; z-index:0;
}
.lp-pt .lp2-twm { font-size:64px; right:-8px; top:50%; transform:translateY(-50%); }
.lp-ht .lp2-twm { font-size:68px; right:-8px; bottom:-10px; }
.lp-rt .lp2-twm { font-size:50px; right:-6px; bottom: -8px; }

.lp2-ti {
  position:relative; z-index:1; padding:14px;
  display:flex; flex-direction:column; justify-content:space-between;
}
.lp-pt .lp2-ti { flex-direction:row; align-items:center; gap:13px; padding:0 18px; min-height:66px; }
.lp-ht .lp2-ti { min-height:110px; padding:16px; }
.lp-rt .lp2-ti { min-height:84px; }

.lp2-ptop { display:flex; align-items:flex-start; justify-content:space-between; }
.lp2-pico { font-size:28px; color:rgba(255,255,255,.95); flex-shrink:0; }
.lp-pt .lp2-pico { font-size:24px; }
.lp-rt .lp2-pico { font-size:21px; }
.lp2-parr { font-size:13px; color:rgba(255,255,255,.38); }
.lp-pt .lp2-parr { font-size:16px; margin-left:auto; flex-shrink:0; }
.lp2-plbl { font-size:13px; font-weight:500; color:#fff; line-height:1.25; margin-bottom:1px; }
.lp-pt .lp2-plbl { font-size:14px; }
.lp-rt .lp2-plbl { font-size:11.5px; }
.lp2-psub { font-size:10px; color:rgba(255,255,255,.58); line-height:1.3; margin-top:2px; }

/* Colores de tiles */
.lp-tc-teal  { background:#0e7c86; }
.lp-tc-blue  { background:#185fa5; }
.lp-tc-green { background:#2f8f5b; }
.lp-tc-amber { background:#896100; }
.lp-tc-red   { background:#a53535; }
.lp-tc-slate { background:#385d6d; }
.lp-tc-cyan  { background:#1a7a6e; }
.lp-tc-ink   { background:#1a4554; }
.lp-tc-grape { background:#3d3878; }

.lp2-sg .lp-rt .lp2-ti { min-height:76px; }

/* ═══════════════════════════════════════════════════
   SIDEBAR TEAL — Continuidad con el launchpad
   ═══════════════════════════════════════════════════ */
#appShell .sidebar {
  background: #0b232e !important;
  border-right: 0.5px solid rgba(255,255,255,.07) !important;
  position: relative;
  overflow: hidden;
}
#appShell .sidebar::before {
  content: ''; position: absolute; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.04);
  width: 220px; height: 220px; bottom: -70px; right: -75px;
  pointer-events: none;
}
#appShell .sidebar::after {
  content: ''; position: absolute; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.03);
  width: 120px; height: 120px; bottom: -15px; right: -18px;
  pointer-events: none;
}
#appShell .sidebar-header {
  border-bottom: 0.5px solid rgba(255,255,255,.08) !important;
  background: transparent !important;
}
#appShell .product-lockup span {
  color: #fff !important;
  font-weight: 500;
}
#appShell .product-lockup img {
  filter: brightness(0) invert(1);
  opacity: .9;
}
#appShell .sidebar-toggle {
  color: rgba(255,255,255,.45) !important;
  background: transparent !important;
  border: none !important;
}
#appShell .sidebar-toggle:hover {
  color: #fff !important;
  background: rgba(255,255,255,.08) !important;
}

/* ── Tarjeta de usuario ── */
.sb-user-card {
  padding: 14px 16px 12px;
  border-bottom: 0.5px solid rgba(255,255,255,.07);
  text-align: center;
  position: relative; z-index: 1;
}
.sb-av-ring {
  width: 50px; height: 50px; border-radius: 50%;
  border: 2px solid #0e7c86; padding: 3px;
  margin: 0 auto 8px; transition: border-color .3s;
}
.sb-av {
  width: 100%; height: 100%; border-radius: 50%;
  background: rgba(14,124,134,.3); display: flex;
  align-items: center; justify-content: center;
  font-size: 14px; font-weight: 500; color: #44b3a2;
  transition: background .3s;
}
.sb-name {
  font-size: 12px; font-weight: 500; color: #fff;
  line-height: 1.35; margin-bottom: 7px;
}
.sb-name span { opacity: .65; }
.sb-role-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(14,124,134,.18);
  border: 0.5px solid rgba(68,179,162,.3);
  color: #44b3a2; font-size: 10px; font-weight: 500;
}
.sb-role-chip i { font-size: 11px; }

/* ── Botón regresar al launchpad ── */
.sb-lp-btn {
  display: flex; align-items: center; gap: 8px;
  width: calc(100% - 20px); margin: 10px 10px 4px;
  padding: 9px 12px; border-radius: 9px;
  background: rgba(14,124,134,.15);
  border: 0.5px solid rgba(14,124,134,.3);
  color: #44b3a2; font-size: 12px; font-weight: 500;
  cursor: pointer; transition: all .14s;
  position: relative; z-index: 1;
}
.sb-lp-btn:hover {
  background: rgba(14,124,134,.28);
  border-color: rgba(68,179,162,.5);
  color: #7dd3ca;
}
.sb-lp-btn i { font-size: 17px; flex-shrink: 0; }

/* ── Nav agrupado ── */
#mainNav {
  padding: 4px 0 8px;
  overflow-y: auto;
  flex: 1;
  position: relative; z-index: 1;
}
.sb-nav-group {
  margin-bottom: 2px;
}
.sb-nav-group-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.3);
  padding: 10px 16px 3px;
  pointer-events: none;
}
.sidebar-collapsed .sb-nav-group-label { display: none; }
.sidebar-collapsed .sb-nav-group { margin-bottom: 0; }
#appShell .nav-button {
  display: flex !important;
  align-items: center;
  gap: 10px;
  width: calc(100% - 16px);
  margin: 2px 8px;
  padding: 9px 11px;
  border-radius: 9px;
  background: transparent !important;
  border: 0.5px solid transparent !important;
  color: rgba(255,255,255,.5) !important;
  font-size: 12.5px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: all .13s;
  white-space: nowrap;
  overflow: hidden;
}
#appShell .nav-button i {
  font-size: 18px;
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}
#appShell .nav-button .nav-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#appShell .nav-button:hover {
  background: rgba(255,255,255,.07) !important;
  color: rgba(255,255,255,.9) !important;
  border-color: rgba(255,255,255,.06) !important;
}
#appShell .nav-button.is-active {
  background: rgba(14,124,134,.2) !important;
  color: #5ec8bf !important;
  border-color: rgba(14,124,134,.35) !important;
}
#appShell .nav-button.is-active i { color: #44b3a2; }
#appShell .nav-badge {
  margin-left: auto;
  background: #dc5f5f;
  color: #fff;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 999px;
  font-weight: 600;
  flex-shrink: 0;
}
#appShell .nav-icon { display: none; }

/* ── Cerrar sesión ── */
#appShell #logoutBtn {
  color: rgba(255,255,255,.35) !important;
  border-top: 0.5px solid rgba(255,255,255,.07) !important;
  font-size: 11px;
  position: relative; z-index: 1;
  background: transparent !important;
}
#appShell #logoutBtn:hover {
  color: rgba(255,255,255,.65) !important;
  background: rgba(255,255,255,.05) !important;
}

/* ── Estado colapsado ── */
.sidebar-collapsed .sb-user-card { padding: 10px 8px; }
.sidebar-collapsed .sb-name,
.sidebar-collapsed .sb-role-chip { display: none; }
.sidebar-collapsed .sb-lp-btn {
  width: calc(100% - 16px);
  margin: 8px 8px 4px;
  padding: 9px;
  justify-content: center;
}
.sidebar-collapsed .sb-lp-btn span { display: none; }
.sidebar-collapsed #appShell .nav-button,
.sidebar-collapsed .nav-button {
  width: calc(100% - 14px) !important;
  margin: 2px 7px;
  padding: 10px !important;
  justify-content: center;
  gap: 0;
}
.sidebar-collapsed .nav-label { display: none !important; }

/* ═══════════════════════════════════════════════════
   FASE 3 — ACABADOS FINALES
   ═══════════════════════════════════════════════════ */

/* ── Transición de vista ── */
@keyframes viewFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
#view.view-enter {
  animation: viewFadeIn .2s ease-out both;
}

/* ── Empty states con ícono ── */
.empty-state-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  color: #8aa4b0;
  gap: 10px;
}
.empty-state-block i {
  font-size: 44px;
  opacity: .45;
  color: #0d5a65;
}
.empty-state-block p {
  font-size: .875rem;
  margin: 0;
  color: #8aa4b0;
}

.compact-empty-block {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  color: #8aa4b0;
  font-size: .83rem;
}
.compact-empty-block i {
  font-size: 18px;
  opacity: .55;
  flex-shrink: 0;
}

/* ── Scrollbars — extendido ── */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(13,90,101,.2) transparent;
}
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-thumb {
  background: rgba(13,90,101,.22);
  border-radius: 999px;
}
::-webkit-scrollbar-track { background: transparent; }

/* ── Print: header con acento teal ── */
@media print {
  .report-header {
    border-top: 3px solid #0d5a65 !important;
    padding-top: 8px !important;
  }
  .report-header h2,
  .report-header h3 {
    color: #0d5a65 !important;
  }
  thead th {
    background: #e4f1f2 !important;
    color: #0d5a65 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ═══════════════════════════════════════════════════════
   CONFIG. PRUEBAS — Tabs Parámetros | Precios | Historial
   ═══════════════════════════════════════════════════════ */

/* ── Pestaña bar ── */
.tc-tabs {
  display: flex;
  border-bottom: 2px solid #e4eef0;
  background: #f8fafb;
  flex-shrink: 0;
}
.tc-tab-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 16px;
  border: none; background: transparent;
  color: #6a8590; font-size: .81rem; font-weight: 700;
  cursor: pointer; border-bottom: 3px solid transparent;
  margin-bottom: -2px; transition: color .15s; position: relative;
  white-space: nowrap;
}
.tc-tab-btn.is-active  { color: #0d5a65; border-bottom-color: #0e7c86; background: #fff; }
.tc-tab-btn:hover:not(.is-active) { color: #12343b; background: #edf4f5; }
.tc-tab-btn.tc-tab-warn { color: #896100; }
.tc-tab-btn.tc-tab-warn.is-active { color: #896100; border-bottom-color: #f6b73c; }
.tc-tab-count {
  font-size: .7rem; font-weight: 800; padding: 1px 6px;
  background: rgba(14,124,134,.1); color: #0d5a65; border-radius: 10px;
}
.tc-tab-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #f6b73c;
  position: absolute; top: 9px; right: 8px;
}
.tc-tab-body { padding: 16px 18px; overflow-y: auto; flex: 1; }

/* ── Badge sin precio en el header ── */
.tcp-no-price-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 20px; font-size: .7rem; font-weight: 700;
  background: rgba(246,183,60,.12); color: #896100;
  border: 1px solid rgba(246,183,60,.28);
}
/* Badge en tarjeta de lista */
.tc-price-badge { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.tc-price-badge.has-price { background: #2f8f5b; }
.tc-price-badge.no-price  { background: #f6b73c; }
.tcp-no-price-txt { color: #896100; font-size: .75rem; }

/* ── Panel de Precios ── */
.tcp-panel { display: flex; flex-direction: column; gap: 16px; }
.tcp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
}
.tcp-card {
  background: #f8fafb; border: 1px solid #ddeaec;
  border-radius: 10px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 5px;
}
.tcp-card-primary { border-color: #0e7c86; background: #f0f9f9; }
.tcp-label {
  font-size: .7rem; font-weight: 800; color: #5a7a82;
  text-transform: uppercase; letter-spacing: .06em;
  display: flex; align-items: center; gap: 5px;
}
.tcp-input {
  border: 1px solid #cde0e3; border-radius: 7px;
  padding: 7px 10px; font-size: .95rem; font-weight: 600;
  color: #12343b; width: 100%; background: #fff;
}
.tcp-input:focus { border-color: #0e7c86; outline: none; box-shadow: 0 0 0 3px rgba(14,124,134,.1); }
.tcp-hint { font-size: .7rem; color: #8aabb0; margin-top: 2px; }
.tcp-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tcp-status { display: inline-flex; align-items: center; gap: 5px; font-size: .8rem; font-weight: 700; }
.tcp-status-warn { color: #896100; }
.tcp-status-ok   { color: #2f8f5b; }

/* ── Historial de precios dentro del tab ── */
.tcp-hist-wrap { margin-top: 4px; }
.tcp-hist-title {
  font-size: .75rem; font-weight: 800; color: #5a7a82;
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 8px; display: flex; align-items: center; gap: 6px;
}
.tcp-hist-row {
  display: grid;
  grid-template-columns: 130px 70px 1fr 80px;
  gap: 8px; padding: 6px 10px; border-radius: 7px;
  font-size: .78rem; align-items: center;
}
.tcp-hist-row:nth-child(even) { background: #f0f7f8; }
.tcp-hist-time  { color: #8aabb0; font-variant-numeric: tabular-nums; font-size: .73rem; }
.tcp-hist-field { color: #0d5a65; font-weight: 700; }
.tcp-hist-change { color: #12343b; font-weight: 500; }
.tcp-hist-by   { color: #8aabb0; font-size: .71rem; }

/* ── Historial (tab completo) ── */
.tc-history-panel { display: flex; flex-direction: column; gap: 18px; }
.tc-hist-section {}
.tc-hist-section-hd {
  font-size: .75rem; font-weight: 800; color: #5a7a82;
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 8px; display: flex; align-items: center; gap: 6px;
  padding-bottom: 6px; border-bottom: 1px solid #e4eef0;
}
.tc-cfg-log-row {
  display: grid;
  grid-template-columns: 130px 140px 1fr 80px;
  gap: 8px; padding: 6px 10px; border-radius: 7px; font-size: .78rem;
}
.tc-cfg-log-row:nth-child(even) { background: #f0f7f8; }
.tc-cfg-action { color: #0d5a65; font-weight: 700; font-size: .72rem; letter-spacing: .03em; }
.tc-cfg-detail { color: #38526b; }

/* ═══════════════════════════════════════════════════════
   COSTOS — Dashboard financiero con KPI bar
   ═══════════════════════════════════════════════════════ */

.costs-kpi-bar {
  display: flex; align-items: stretch; gap: 0;
  background: #f8fafb; border: 1px solid #ddeaec;
  border-radius: 12px; margin-bottom: 16px; overflow: hidden;
}
.costs-kpi {
  display: flex; flex-direction: column; gap: 2px;
  padding: 14px 20px; flex: 1;
}
.costs-kpi strong { font-size: 1.4rem; font-weight: 800; color: #12343b; line-height: 1; }
.costs-kpi span   { font-size: .68rem; color: #6a8590; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; margin-top: 3px; }
.costs-kpi-warn strong { color: #896100; }
.costs-kpi-ok  strong  { color: #2f8f5b; }
.costs-kpi-sep { width: 1px; background: #ddeaec; flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════
   LOGIN PAGE FACELIFT — fondo blanco + anillos teal + NovaKid
   ═══════════════════════════════════════════════════════ */

.login-view {
  grid-template-columns: 1fr 420px !important;
}

/* ── Panel izquierdo: blanco con cuadrícula teal ── */
.login-media {
  background:
    repeating-linear-gradient(90deg, rgba(14,124,134,.07) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(0deg,  rgba(14,124,134,.05) 0 1px, transparent 1px 80px),
    #ffffff !important;
  position: relative !important;
  overflow: hidden !important;
  padding: clamp(40px, 6vw, 80px) !important;
  gap: 0 !important;
  justify-content: flex-start !important;
}

/* Anillos decorativos teal (visibles sobre fondo blanco) */
.lv-rings { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.lv-r {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid rgba(14,124,134,.14);
}
.lv-r1 { width: 420px; height: 420px; bottom: -160px; right: -140px; border-color: rgba(14,124,134,.22); }
.lv-r2 { width: 620px; height: 620px; bottom: -250px; right: -220px; border-color: rgba(14,124,134,.13); }
.lv-r3 { width: 820px; height: 820px; bottom: -350px; right: -320px; border-color: rgba(14,124,134,.07); }
.lv-r4 { width:  80px; height:  80px; top:  60px; right:  70px; border-color: rgba(14,124,134,.18); }

/* Contenido del panel izquierdo */
.lv-content { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 20px; margin-top: 20px; }

/* Logo original — sin filtro */
.lv-logo { width: 220px !important; }

.login-media h1 {
  color: #12343b !important;
  font-size: clamp(2.4rem, 5vw, 4.2rem) !important;
  letter-spacing: -.02em !important;
  line-height: 1.05 !important;
  margin: 0 !important;
}

.login-media p {
  color: #38526b !important;
  font-size: 1rem !important;
  margin: 0 !important;
}

/* Pills de características */
.lv-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.lv-pills span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: .75rem;
  font-weight: 700;
  background: rgba(14,124,134,.08);
  border: 1px solid rgba(14,124,134,.2);
  color: #0d5a65;
  letter-spacing: .02em;
}
.lv-pills span i { font-size: 13px; }

/* NovaKid — esquina inferior derecha, fondo transparente real */
.lv-novakid {
  position: absolute !important;
  bottom: -10px !important;
  right: -20px !important;
  width: clamp(260px, 32%, 380px) !important;
  z-index: 2 !important;
  pointer-events: none !important;
  filter: drop-shadow(-4px 8px 18px rgba(11,35,46,.18)) drop-shadow(0 2px 6px rgba(14,124,134,.12)) !important;
}

/* ── Panel derecho (formulario) ── */
.login-panel {
  border-left: 3px solid #0e7c86 !important;
  padding: 48px 42px !important;
}

/* Badge BioNova en el top del panel */
.login-panel::before {
  content: "BioNova LIS";
  display: block;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #0e7c86;
  margin-bottom: 28px;
  padding: 6px 12px;
  background: rgba(14,124,134,.08);
  border-radius: 6px;
  width: fit-content;
}

/* ── Responsivo ── */
@media (max-width: 768px) {
  .login-view { grid-template-columns: 1fr !important; }
  .login-media { min-height: 240px !important; padding: 32px !important; }
  .lv-novakid { width: 200px !important; bottom: 0 !important; right: 0 !important; }
  .lv-r1, .lv-r2, .lv-r3 { display: none; }
}