/* =====================================================
   SISTEMA DE DISEÑO: LABORATORIO CLÍNICO
   Tema: "Precisión Analítica"

   Inspirado en equipos de laboratorio reales:
   - Pantallas LED cyan de analizadores automáticos
   - Retículas de microscopio y hemocitómetros
   - Superficies de acero inoxidable
   - Precisión de instrumentos de medición
   ===================================================== */

/* ===== IMPORTAR FUENTES ===== */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@400;500;600;700&family=Roboto+Mono:wght@400;500&display=swap');

/* ===== VARIABLES CSS (TOKENS DE DISEÑO) ===== */
:root {
  /* Colores primarios del laboratorio */
  --lab-cyan: #0891b2;          /* Pantallas LED de analizadores */
  --lab-indigo: #6366f1;        /* Reactivos, precisión científica */
  --lab-surface: #f8fafc;       /* Blanco clínico */
  --lab-steel: #475569;         /* Gris acero de equipos */
  --lab-accent: #f43f5e;        /* Rosa reactivo - alertas */
  --lab-data: #0f172a;          /* Negro datos - máxima legibilidad */

  /* Colores secundarios */
  --lab-cyan-light: #06b6d4;
  --lab-cyan-dark: #0e7490;
  --lab-steel-light: #64748b;
  --lab-steel-lighter: #94a3b8;
  --lab-surface-darker: #e2e8f0;
  --lab-border: #cbd5e0;

  /* Tipografía */
  --font-display: 'IBM Plex Mono', monospace;  /* Códigos, IDs */
  --font-body: 'Inter', -apple-system, system-ui, sans-serif;
  --font-data: 'Roboto Mono', monospace;       /* Tablas numéricas */

  /* Espaciado (grid de 8px - precisión) */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;

  /* Bordes y radios */
  --border-width: 1px;
  --border-emphasis: 4px;        /* Portaobjetos */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;

  /* Sombras sutiles (limpieza clínica) */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.08);
}

/* ===== CONTENEDOR PRINCIPAL ===== */
.lab-container {
  max-width: 1200px;
  margin: 0 auto;
  font-family: var(--font-body);
  background-color: var(--lab-surface);
  color: var(--lab-data);
  line-height: 1.5;
}

/* ===== ENCABEZADO DE SECCIÓN (con borde de portaobjetos) ===== */
.lab-section-header {
  background: linear-gradient(to right, var(--lab-cyan), var(--lab-cyan-dark));
  color: white;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  border-left: var(--border-emphasis) solid var(--lab-accent);
  margin-bottom: var(--space-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: var(--shadow-md);
}

.lab-section-title {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0;
}

.lab-section-subtitle {
  font-family: var(--font-display);
  font-size: 11px;
  opacity: 0.9;
  margin: 0;
}

/* ===== SECCIONES DE CONTENIDO ===== */
.lab-section {
  background-color: white;
  border: var(--border-width) solid var(--lab-border);
  border-left: var(--border-emphasis) solid var(--lab-cyan);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
  box-shadow: var(--shadow-sm);
}

.lab-section-compact {
  background-color: white;
  border: var(--border-width) solid var(--lab-border);
  border-left: 3px solid var(--lab-cyan-light);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-sm);
}

/* ===== FORMULARIOS Y CAMPOS ===== */
.lab-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.lab-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

/* Labels con indicador de precisión */
.lab-label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  color: var(--lab-steel);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Indicador de campo crítico (campo visual del microscopio) */
.lab-label.critical::before {
  content: '◉';
  color: var(--lab-cyan);
  font-size: 8px;
}

/* Inputs con precisión */
.lab-input,
.lab-select {
  font-family: var(--font-body);
  font-size: 13px;
  padding: 8px 12px;
  border: var(--border-width) solid var(--lab-border);
  border-radius: var(--radius-sm);
  background-color: white;
  color: var(--lab-data);
  transition: all 0.2s ease;
}

/* Inputs numéricos con fuente monoespaciada */
.lab-input[type="number"],
.lab-input.numeric {
  font-family: var(--font-data);
  text-align: right;
}

/* Códigos e identificadores */
.lab-input.code {
  font-family: var(--font-display);
  letter-spacing: 0.5px;
}

/* Focus con indicador de precisión */
.lab-input:focus,
.lab-select:focus {
  outline: none;
  border-color: var(--lab-cyan);
  box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.1);
  background-color: var(--lab-surface);
}

/* Indicador de precisión numérica (animado) */
.lab-input.numeric:focus::before {
  content: '┃┃┃';
  position: absolute;
  left: -20px;
  color: var(--lab-cyan);
  font-size: 12px;
  animation: precision-pulse 1.5s ease-in-out infinite;
}

@keyframes precision-pulse {
  0%, 100% { opacity: 0.5; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-2px); }
}

/* ===== TABLAS DE DATOS (retícula de microscopio) ===== */
.lab-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background-color: white;
  border: var(--border-width) solid var(--lab-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  font-family: var(--font-body);
}

.lab-table thead {
  background: linear-gradient(135deg, var(--lab-steel) 0%, var(--lab-steel-light) 100%);
}

.lab-table th {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: white;
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  border-bottom: 2px solid var(--lab-cyan);
}

.lab-table td {
  font-size: 12px;
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--lab-surface-darker);
  color: var(--lab-data);
}

/* Celdas numéricas */
.lab-table td.numeric {
  font-family: var(--font-data);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Celdas de código */
.lab-table td.code {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.3px;
}

/* Hover con efecto de retícula */
.lab-table tbody tr {
  position: relative;
  transition: background-color 0.15s ease;
}

.lab-table tbody tr:hover {
  background-color: rgba(8, 145, 178, 0.03);
}

.lab-table tbody tr:hover::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 100%;
  background: var(--lab-cyan);
}

/* Última fila sin borde */
.lab-table tbody tr:last-child td {
  border-bottom: none;
}

/* ===== TABS MODERNOS (sin imágenes) ===== */
.lab-tabs {
  display: flex;
  gap: var(--space-xs);
  border-bottom: 2px solid var(--lab-border);
  margin-bottom: var(--space-md);
}

.lab-tab {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: var(--space-sm) var(--space-md);
  background: none;
  border: none;
  color: var(--lab-steel-light);
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
}

.lab-tab:hover {
  color: var(--lab-cyan);
}

.lab-tab.active {
  color: var(--lab-cyan);
}

.lab-tab.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(to right, var(--lab-cyan), var(--lab-indigo));
}

/* ===== BOTONES DE ACCIÓN ===== */
.lab-btn {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  padding: var(--space-sm) var(--space-md);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

.lab-btn-primary {
  background: linear-gradient(135deg, var(--lab-cyan), var(--lab-cyan-dark));
  color: white;
}

.lab-btn-primary:hover {
  background: linear-gradient(135deg, var(--lab-cyan-dark), var(--lab-cyan));
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.lab-btn-secondary {
  background: white;
  color: var(--lab-steel);
  border: var(--border-width) solid var(--lab-border);
}

.lab-btn-secondary:hover {
  border-color: var(--lab-cyan);
  color: var(--lab-cyan);
}

.lab-btn-action {
  background: var(--lab-accent);
  color: white;
}

.lab-btn-action:hover {
  background: #dc2626;
  box-shadow: var(--shadow-md);
}

/* ===== BADGES Y ESTADOS ===== */
.lab-badge {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border-radius: 12px;
  display: inline-block;
}

.lab-badge-active {
  background-color: rgba(8, 145, 178, 0.1);
  color: var(--lab-cyan-dark);
  border: 1px solid var(--lab-cyan);
}

.lab-badge-inactive {
  background-color: rgba(71, 85, 105, 0.1);
  color: var(--lab-steel);
  border: 1px solid var(--lab-steel-lighter);
}

.lab-badge-alert {
  background-color: rgba(244, 63, 94, 0.1);
  color: #dc2626;
  border: 1px solid var(--lab-accent);
}

/* ===== UTILIDADES ===== */
.lab-text-mono {
  font-family: var(--font-display);
}

.lab-text-data {
  font-family: var(--font-data);
}

.lab-text-muted {
  color: var(--lab-steel-light);
}

.lab-text-emphasis {
  color: var(--lab-cyan);
  font-weight: 600;
}

/* Separador visual (línea de retícula) */
.lab-divider {
  height: 1px;
  background: linear-gradient(to right,
    transparent,
    var(--lab-border) 20%,
    var(--lab-border) 80%,
    transparent
  );
  margin: var(--space-md) 0;
}

/* ===== ANIMACIÓN DE ESCANEO DE ANALIZADOR ===== */
@keyframes analyzer-scan {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}

.lab-table.scanning::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right,
    transparent,
    var(--lab-cyan) 50%,
    transparent
  );
  box-shadow: 0 0 8px var(--lab-cyan);
  animation: analyzer-scan 2s ease-in-out;
}

/* ===== ADAPTACIÓN DE CLASES EXISTENTES ===== */
/* Mapeo de clases antiguas a nuevo sistema */
.osc-container {
  composes: lab-container;
}

.osc-section {
  composes: lab-section;
}

.osc-section-compact {
  composes: lab-section-compact;
}

.osc-info-label {
  composes: lab-label;
}

.osc-input {
  composes: lab-input;
}

.osc-detalle-table {
  composes: lab-table;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .lab-form-grid {
    grid-template-columns: 1fr;
  }

  .lab-section-header {
    flex-direction: column;
    gap: var(--space-xs);
  }

  .lab-table {
    font-size: 11px;
  }

  .lab-table th,
  .lab-table td {
    padding: var(--space-xs) var(--space-sm);
  }
}

/* ===== LISTA DE DIAGNÓSTICOS MEJORADA ===== */
.diagnostics-list {
  background-color: white;
  border: 1px solid var(--lab-border, #cbd5e0);
  border-left: 4px solid var(--lab-cyan, #0891b2);
  border-radius: 6px;
  padding: 12px;
  max-height: 200px;
  overflow-y: auto;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
}

.diagnostics-list-item {
  padding: 10px 12px;
  margin-bottom: 8px;
  background-color: #f8fafc;
  border-left: 3px solid #06b6d4;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.5;
  transition: all 0.2s ease;
  cursor: default;
}

.diagnostics-list-item:hover {
  background-color: rgba(8, 145, 178, 0.05);
  border-left-color: var(--lab-cyan, #0891b2);
  transform: translateX(2px);
  box-shadow: 0 2px 4px rgba(8, 145, 178, 0.08);
}

.diagnostics-list-item:last-child {
  margin-bottom: 0;
}

/* Código del diagnóstico */
.diagnostics-code {
  font-family: var(--font-display, 'IBM Plex Mono', monospace);
  font-weight: 600;
  color: var(--lab-cyan-dark, #0e7490);
  margin-right: 8px;
  font-size: 11px;
  display: inline-block;
}

/* Descripción del diagnóstico */
.diagnostics-description {
  color: var(--lab-data, #0f172a);
  display: inline;
}

/* Lista vacía */
.diagnostics-list-empty {
  padding: 20px;
  text-align: center;
  color: var(--lab-steel-light, #64748b);
  font-style: italic;
  font-size: 12px;
}

/* Scrollbar personalizado para la lista */
.diagnostics-list::-webkit-scrollbar {
  width: 6px;
}

.diagnostics-list::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 3px;
}

.diagnostics-list::-webkit-scrollbar-thumb {
  background: var(--lab-cyan-light, #06b6d4);
  border-radius: 3px;
}

.diagnostics-list::-webkit-scrollbar-thumb:hover {
  background: var(--lab-cyan, #0891b2);
}

/* ===== LAYOUTS DE TABLAS ===== */
.lab-table-layout {
  width: 100%;
  border-collapse: collapse;
}

.lab-table-fixed {
  width: 100%;
  table-layout: fixed;
}

/* ===== COLUMNAS DE TABLA (anchos específicos) ===== */
.lab-col-3 { width: 3%; }
.lab-col-7 { width: 7%; }
.lab-col-8 { width: 8%; }
.lab-col-10 { width: 10%; }
.lab-col-14 { width: 14%; }
.lab-col-15 { width: 15%; }
.lab-col-16 { width: 16%; }
.lab-col-20 { width: 20%; }
.lab-col-22 { width: 22%; }
.lab-col-25 { width: 25%; }
.lab-col-35 { width: 35%; }
.lab-col-42 { width: 42%; }
.lab-col-45 { width: 45%; }
.lab-col-55 { width: 55%; }

/* ===== PADDING DE CELDAS ===== */
.lab-cell-pad-right {
  padding-right: 8px;
}

.lab-cell-pad-right-10 {
  padding-right: 10px;
}

.lab-cell-pad-top {
  padding-top: 8px;
}

.lab-cell-valign-bottom {
  vertical-align: bottom;
  padding-bottom: 2px;
}

/* ===== CONTENEDORES CON SCROLL ===== */
.lab-scroll-container {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 520px;
  border: 1px solid var(--lab-border);
  border-radius: var(--radius-md);
}

/* ===== CAMPOS DE SOLO LECTURA ===== */
.lab-input-readonly {
  display: block;
  font-size: 13px;
  padding: 8px;
  background: var(--lab-surface);
  border-radius: 4px;
  border: 1px solid var(--lab-border);
  font-weight: normal;
}

.lab-input-readonly.code {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--lab-data);
  background: var(--lab-surface);
  border: 1px solid var(--lab-cyan);
}

.lab-input-readonly.data {
  font-family: var(--font-data);
  font-size: 10px;
}

/* ===== LABELS EN MODALES ===== */
.lab-modal-label {
  font-weight: bold;
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  color: var(--lab-data);
}

/* ===== INPUTS EN MODALES ===== */
.lab-modal-input {
  width: 100%;
  padding: 6px;
  border: 1px solid var(--lab-border);
  border-radius: 4px;
  font-size: 13px;
  background: white;
}

.lab-modal-input.readonly {
  font-weight: bold;
  background: var(--lab-surface);
}

/* ===== ANCHOS ESPECÍFICOS DE CONTENEDORES ===== */
.lab-width-1100 {
  width: 1100px;
  max-width: 1100px;
}

.lab-width-950 {
  width: 950px;
}

.lab-width-500 {
  width: 500px;
}

.lab-width-480 {
  width: 480px;
}

/* ===== ALINEACIÓN DE TEXTO ===== */
.lab-text-center {
  text-align: center;
}

.lab-text-left {
  text-align: left;
}

/* ===== PADDING DE CONTENEDORES ===== */
.lab-pad-5-20 {
  padding: 5px 20px;
}

.lab-pad-10 {
  padding: 10px;
}

/* ===== ESTILOS DE ENCABEZADO PRINCIPAL ===== */
.lab-main-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--lab-data);
  font-family: var(--font-body);
}

/* ===== ESTILOS PARA CHECKBOXES CENTRADOS ===== */
.lab-checkbox-container {
  padding-top: 8px;
  text-align: center;
}

/* ===== DIVISORES Y SEPARADORES ===== */
.lab-border-top {
  border-top: 1px solid var(--lab-border);
}

/* ===== IMPRESIÓN ===== */
@media print {
  .lab-section-header {
    background: var(--lab-steel) !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .lab-table thead {
    background: var(--lab-steel-light) !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .lab-btn {
    display: none;
  }

  .diagnostics-list {
    max-height: none;
    overflow: visible;
  }
}