/**
 * Resumen y traza de una orden de laboratorio. Prefijo `lro-`.
 *
 * Clases DEDICADAS a este componente: se monta sobre un modal que el propio JS crea
 * y que puede convivir con cualquier pantalla del módulo, así que no reutiliza clases
 * de la vista anfitriona (recepción, lista de espera, resultados) ni las pisa.
 */

.lro-body {
  max-height: 72vh;
  overflow-y: auto;
  background: #f8f9fa;
}

/* ── Cabecera ───────────────────────────────────────────────────────────── */
.lro-cabecera {
  background: #fff;
  border: 1px solid #e3e6ef;
  border-radius: 6px;
  padding: 14px 16px;
  margin-bottom: 14px;
}

.lro-cabecera__titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 15px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eef0f6;
}

.lro-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
}

.lro-tabla-datos {
  width: 100%;
  font-size: 13px;
}

.lro-tabla-datos th {
  width: 38%;
  color: #6c757d;
  font-weight: 500;
  padding: 3px 8px 3px 0;
  vertical-align: top;
}

.lro-tabla-datos td {
  padding: 3px 0;
  color: #2d3748;
}

.lro-observaciones {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed #e3e6ef;
  font-size: 12.5px;
  color: #4a5568;
}

/* ── Secciones ──────────────────────────────────────────────────────────── */
.lro-seccion {
  background: #fff;
  border: 1px solid #e3e6ef;
  border-radius: 6px;
  padding: 14px 16px;
  margin-bottom: 14px;
}

.lro-seccion__titulo {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #6c757d;
  margin: 0 0 12px;
}

.lro-vacio {
  font-size: 13px;
  color: #868e96;
  margin: 0;
  font-style: italic;
}

/* ── Exámenes ───────────────────────────────────────────────────────────── */
.lro-examenes {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lro-examenes li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid #f1f3f7;
  font-size: 13px;
}

.lro-examenes li:last-child {
  border-bottom: 0;
}

.lro-examen__nombre {
  flex: 1 1 60%;
  color: #2d3748;
}

.lro-examen__estado {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 11px;
  white-space: nowrap;
  background: #eceff4;
  color: #4a5568;
}

.lro-examen__motivo {
  flex: 1 1 100%;
  font-size: 12px;
  color: #c0392b;
}

/* Un color por estado del examen. */
.lro-estado--pendiente   { background: #fff3cd; color: #856404; }
.lro-estado--en_proceso  { background: #d1ecf1; color: #0c5460; }
.lro-estado--cargado     { background: #d4edda; color: #155724; }
.lro-estado--en_revision { background: #e2e3f3; color: #383d7c; }
.lro-estado--observado   { background: #ffe0cc; color: #8a4b1a; }
.lro-estado--aprobado    { background: #cfead6; color: #14532d; }
.lro-estado--rechazado   { background: #f8d7da; color: #721c24; }

/* ── Línea de tiempo ────────────────────────────────────────────────────── */
.lro-timeline {
  list-style: none;
  margin: 0;
  padding: 0 0 0 6px;
  position: relative;
}

/* Riel vertical: va detrás de los puntos. */
.lro-timeline::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: #e3e6ef;
}

.lro-timeline__item {
  position: relative;
  display: flex;
  gap: 12px;
  padding: 0 0 16px 0;
}

.lro-timeline__item:last-child {
  padding-bottom: 0;
}

.lro-timeline__punto {
  position: relative;
  z-index: 1;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 10px;
  box-shadow: 0 0 0 3px #fff;
}

.lro-timeline__cuerpo {
  flex: 1 1 auto;
  padding-top: 1px;
}

.lro-timeline__fecha {
  font-size: 11px;
  color: #868e96;
  letter-spacing: 0.2px;
}

.lro-timeline__titulo {
  font-size: 13.5px;
  font-weight: 600;
  color: #2d3748;
  margin-top: 1px;
}

.lro-timeline__detalle {
  font-size: 12.5px;
  color: #4a5568;
  margin-top: 3px;
  line-height: 1.45;
}

.lro-timeline__usuario {
  font-size: 11.5px;
  color: #6c757d;
  margin-top: 4px;
}

.lro-timeline__usuario .fa-user {
  font-size: 9px;
  margin-right: 3px;
}

/* Colores de los hitos. */
.lro-azul  { background: #3f6ad8; }
.lro-verde { background: #3ac47d; }
.lro-ambar { background: #f7b924; }
.lro-rojo  { background: #d92550; }
.lro-gris  { background: #adb5bd; }

.lro-aviso {
  font-size: 12.5px;
  padding: 10px 12px;
  margin-bottom: 14px;
}

/* ── Pantallas chicas ───────────────────────────────────────────────────── */
@media (max-width: 576px) {
  .lro-cabecera__titulo {
    flex-direction: column;
    align-items: flex-start;
  }

  .lro-tabla-datos th {
    width: 45%;
  }

  .lro-examen__nombre {
    flex: 1 1 100%;
  }
}