/* ============================================================
   VMED — Portal del Paciente
   Capa propia SOBRE el sistema visual COCORA (cocora.css).
   Aquí solo van los componentes que COCORA no tiene: subida de
   archivos, resultados de laboratorio y gráficos de evolución.
   Nada de esto redefine tokens de COCORA: los consume.
   ============================================================ */

:root {
  /* Superficie sólida para el gráfico. Los paneles de COCORA son
     translúcidos y Chart.js necesita un color real para el anillo
     que separa los marcadores de la línea. */
  --grafico-fondo: #0b1220;
  --grafico-serie: var(--cyan2);
  --grafico-rejilla: rgba(125, 211, 252, .1);

  /* Situación de un analito. Nunca van solas: siempre acompañadas
     del texto (Alto / Bajo / Normal), para no depender del color. */
  --sit-normal: var(--green);
  --sit-alto: var(--rojo);
  --sit-bajo: var(--ambar);
}

/* ===================== USUARIO EN LA BARRA SUPERIOR ===================== */

/* La ficha del usuario y su salida, apiladas. Cerrar sesión va justo debajo
   del nombre: es donde se busca, y así no compite con «Subir examen». */
.usuario-bloque {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
}

.usuario-bloque .usuario-chip { padding: 4px 11px; }

.salir {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 2px 8px;
  border: 0;
  background: none;
  color: var(--dim);
  font-family: var(--fuente);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .4px;
  cursor: pointer;
  border-radius: 6px;
  transition: color .15s, background .15s;
}

.salir:hover { color: var(--rojo); background: rgba(248, 113, 113, .1); }
.salir svg { width: 12px; height: 12px; flex-shrink: 0; }

@media (max-width: 900px) {
  /* Sin el nombre visible, el texto largo no cabe: queda solo el icono. */
  .salir span,
  .usuario-bloque .salir { font-size: 0; gap: 0; }
  .salir svg { width: 14px; height: 14px; }
}

/* ===================== SUBIDA DE ARCHIVOS ===================== */

.dropzone {
  display: block;
  border: 1.5px dashed var(--border2);
  border-radius: var(--radio);
  background: rgba(4, 7, 14, .45);
  padding: 34px 18px;
  text-align: center;
  cursor: pointer;
  transition: border-color .16s, background .16s;
}

.dropzone:hover,
.dropzone.activa {
  border-color: var(--cyan);
  background: rgba(6, 182, 212, .07);
}

.dropzone .icono {
  font-size: 30px;
  line-height: 1;
  display: block;
  margin-bottom: 9px;
}

.dropzone .titulo {
  display: block;
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: 14px;
}

.dropzone .ayuda {
  display: block;
  color: var(--dim);
  font-size: 11.5px;
  margin-top: 5px;
}

/* Fila de archivo, tanto en la subida como en la ficha del examen. */
.archivo {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 13px;
  border: 1px solid var(--border);
  border-radius: var(--radio-sm);
  background: var(--panel2);
}

.archivo .icono { font-size: 18px; flex-shrink: 0; }
.archivo .cuerpo { flex: 1; min-width: 0; }
.archivo .nombre { font-size: 12.5px; font-weight: 600; word-break: break-all; }
.archivo .meta { font-size: 11px; color: var(--dim); }

.lista-archivos { display: flex; flex-direction: column; gap: 9px; }

/* ===================== VISOR DE CÁMARA ===================== */

.camara-fondo {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(4, 7, 14, .82);
  backdrop-filter: blur(6px);
}

.camara-fondo[hidden] { display: none; }

.camara-caja {
  width: 100%;
  max-width: 820px;
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: 0 26px 70px -18px rgba(0, 0, 0, .8);
}

.camara-cab,
.camara-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  flex-wrap: wrap;
}

.camara-cab { border-bottom: 1px solid var(--border); }
.camara-cab b { font-family: var(--fuente-display); font-size: 15px; }
.camara-pie { border-top: 1px solid var(--border); }

/* Fondo negro: el documento se juzga por su propia luz, no por la del panel. */
.camara-vista {
  background: #000;
  display: grid;
  place-items: center;
  max-height: 62vh;
}

.camara-vista video {
  width: 100%;
  max-height: 62vh;
  object-fit: contain;
  display: block;
}

/* ===================== RESULTADOS DE LABORATORIO ===================== */

/* El valor medido es el dato protagonista de la tabla. */
.valor-medido {
  font-family: var(--fuente-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.unidad { color: var(--dim); font-size: 11.5px; }

.referencia { color: var(--muted); font-family: var(--fuente-mono); font-size: 11.5px; }

/* Variación entre mediciones: dirección, no juicio. Para unos analitos
   subir es malo y para otros no, así que el color se reserva para la
   insignia Alto/Bajo, que sí sabe interpretarlo. */
.variacion {
  font-family: var(--fuente-mono);
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

/* Lista lateral de parámetros en la pantalla de métricas. */
.analito {
  display: block;
  padding: 9px 11px;
  border: 1px solid transparent;
  border-radius: var(--radio-sm);
  color: var(--text);
  transition: background .16s;
}

.analito:hover { background: rgba(125, 211, 252, .06); color: var(--text); }

.analito.activo {
  background: linear-gradient(90deg, rgba(34, 197, 94, .14), rgba(6, 182, 212, .07));
  border-color: var(--border);
  box-shadow: inset 2px 0 0 var(--cyan2);
}

.analito .fila { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.analito .nombre { font-size: 12.5px; font-weight: 600; }
.analito .meta { font-size: 11px; color: var(--dim); }
.analito .valor { font-family: var(--fuente-mono); font-size: 12.5px; font-weight: 600; }

/* Con 40+ parámetros la lista tiene que desplazarse. En tema oscuro la barra
   nativa es casi invisible, así que se pinta: sin ella la fila cortada al pie
   parece un error de dibujo en vez de "hay más abajo". */
.lista-analitos {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: 520px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(125, 211, 252, .22) transparent;
  padding-right: 4px;
}

.lista-analitos::-webkit-scrollbar { width: 8px; }
.lista-analitos::-webkit-scrollbar-track { background: transparent; }

.lista-analitos::-webkit-scrollbar-thumb {
  background: rgba(125, 211, 252, .22);
  border-radius: 999px;
}

.lista-analitos::-webkit-scrollbar-thumb:hover { background: rgba(125, 211, 252, .35); }

/* ===================== GRÁFICO DE EVOLUCIÓN ===================== */

.grafico-caja {
  position: relative;
  height: 320px;
  background: var(--grafico-fondo);
  border: 1px solid var(--border);
  border-radius: var(--radio-sm);
  padding: 10px;
}

/* Clave de la banda de referencia. Es una superficie, no una serie:
   por eso la muestra es un rectángulo neutro y no un color de marca. */
.clave-rango {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  color: var(--muted);
}

.clave-rango i {
  width: 20px;
  height: 11px;
  border-radius: 3px;
  background: rgba(125, 211, 252, .09);
  border: 1px solid var(--border);
}

/* Cifra principal de la serie seleccionada. */
.cifra {
  font-family: var(--fuente-display);
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.5px;
}

.cifra-unidad { color: var(--dim); font-size: 15px; font-weight: 600; margin-left: 5px; }

/* ===================== ANÁLISIS IA ===================== */

.ia-resumen { font-size: 13.5px; line-height: 1.6; color: var(--text); }

.ia-detectado {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px 18px;
  font-size: 12px;
  color: var(--dim);
  padding-top: 14px;
  border-top: 1px solid var(--border);
  margin-top: 16px;
}

.ia-detectado b { color: var(--muted); font-weight: 600; }

.ia-hallazgos { margin: 6px 0 0; padding-left: 18px; }
.ia-hallazgos li { margin-bottom: 3px; }

/* ===================== AJUSTES MENORES ===================== */

/* Enlaces dentro de tablas: el subrayado en cada celda ensucia la grilla. */
table.tabla a { color: var(--sky); }
table.tabla a:hover { color: var(--cyan2); text-decoration: underline; }

.encabezado-pagina { margin-bottom: 18px; }