/*
 * Visor de imágenes y apartado de apoyo.
 * El visor tiene su propia superficie oscura en los dos temas, porque una imagen radiológica se lee sobre negro y un fondo claro alrededor engaña al ojo sobre el brillo real.
 * Se carga en último lugar, tras la hoja de impresión, que solo rige al imprimir; por eso sus reglas responsivas y de impresión viven aquí mismo, junto al componente que ajustan.
 */

:root {
  /* Colores de la capa de mediciones, los mismos que usa el PNG que se descarga. */
  --visor-medida: #fde047;
  --visor-nota: #5eead4;
  --visor-pendiente: #f9a8d4;
  --visor-fondo: #05080d;
  --visor-rotulo: rgba(5, 8, 13, 0.72);
}

/* La sección DICOM usa el mismo contenedor que el catálogo, los signos y las demás vistas (.vista con --max), para que el ancho no cambie al pasar de una a otra. */

/* El atributo hidden debe ganar a las reglas de display de los bloques del visor y del apoyo. */
.visor [hidden], .vista-apoyo [hidden] { display: none !important; }

.visor-privacidad { display: flex; gap: 0.5rem; align-items: flex-start; margin-top: 0.8rem; font-size: 0.86rem; color: var(--tinta-2); }
.visor-privacidad .ico { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 0.15rem; color: var(--exito); }

/* ---------- Barra de herramientas ---------- */
.visor {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-md);
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: border-color var(--mov-normal);
}
.visor.visor-soltando { border-color: var(--marca-400); box-shadow: 0 0 0 4px var(--anillo); }

.visor-barra { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.visor-grupo {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem;
  padding: 0.25rem;
  border: 1px solid var(--borde-2);
  border-radius: var(--r-md);
  background: var(--superficie-2);
}
.visor-boton {
  display: inline-flex; align-items: center; gap: 0.35rem;
  min-height: 36px; min-width: 36px;
  padding: 0.35rem 0.6rem;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--tinta-2);
  font: 600 0.82rem/1 inherit;
  font-family: inherit;
  cursor: pointer;
  justify-content: center;
  transition: background var(--mov-rapida), color var(--mov-rapida), border-color var(--mov-rapida);
}
.visor-boton .ico { width: 18px; height: 18px; }
.visor-boton:hover:not(:disabled) { background: var(--superficie); color: var(--tinta); border-color: var(--borde); }
.visor-boton[aria-pressed="true"] {
  background: color-mix(in srgb, var(--marca-500) 14%, transparent);
  color: var(--marca-tinta);
  border-color: color-mix(in srgb, var(--marca-500) 45%, transparent);
}
.visor-boton:disabled, .visor-selector:disabled { opacity: 0.45; cursor: not-allowed; }
.visor-boton-destacado { background: var(--marca-grad); color: #fff; }
.visor-boton-destacado:hover:not(:disabled) { background: var(--marca-grad); color: #fff; filter: brightness(1.06); }
.visor-cifra { font-variant-numeric: tabular-nums; font-weight: 800; letter-spacing: -0.02em; }
.visor-etiqueta-campo { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--tinta-3); padding: 0 0.2rem 0 0.35rem; }
.visor-selector {
  min-height: 36px;
  border: 1px solid var(--borde);
  border-radius: var(--r-sm);
  background: var(--superficie);
  color: var(--tinta);
  font: inherit;
  font-size: 0.82rem;
  padding: 0.2rem 0.4rem;
}
.visor-corte { min-width: 7.5em; text-align: center; font-size: 0.8rem; font-weight: 700; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.visor-casilla { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; color: var(--tinta-2); padding: 0 0.4rem; cursor: pointer; }
.visor-casilla input { width: 16px; height: 16px; accent-color: var(--marca-500); }

/* ---------- Ayuda ---------- */
.visor-ayuda {
  border: 1px solid var(--borde);
  border-left: 3px solid var(--info);
  border-radius: var(--r-md);
  background: var(--info-suave);
  padding: 0.9rem 1rem;
  display: grid;
  gap: 0.6rem;
  font-size: 0.88rem;
  color: var(--tinta);
}
.visor-ayuda-cabecera { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.visor-ayuda h2 { font-size: 1.02rem; font-weight: 800; color: var(--info); }
.visor-ayuda h2:focus { outline: none; }
.visor-cerrar-ayuda { position: static; flex: 0 0 auto; }
.visor-atajos { width: 100%; border-collapse: collapse; font-size: 0.85rem; background: var(--superficie); }
.visor-atajos th, .visor-atajos td { text-align: left; padding: 0.35rem 0.6rem; border-bottom: 1px solid var(--borde-2); }
.visor-atajos td:first-child { width: 12rem; white-space: nowrap; }
.visor-atajos th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--tinta-3); }
.visor-atajos kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--borde);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: var(--superficie-2);
  font: 700 0.8rem/1.4 ui-monospace, "Cascadia Mono", Consolas, monospace;
  text-align: center;
}

/* ---------- Paneles ---------- */
.visor-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 0.75rem; }
.visor-paneles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem; min-width: 0; }
.visor-paneles.comparando { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.visor-panel {
  position: relative;
  height: min(72vh, 760px);
  min-height: 320px;
  border-radius: var(--r-md);
  background: var(--visor-fondo);
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  border: 2px solid transparent;
  cursor: grab;
}
.visor-paneles.comparando .visor-panel.activo { border-color: var(--marca-400); }
.visor-panel:focus-visible { outline: 3px solid var(--marca-400); outline-offset: 2px; }
.visor-panel.visor-arrastrando-vista { cursor: grabbing; }
.visor-panel[data-herramienta="ventana"] { cursor: ns-resize; }
.visor-panel[data-herramienta="distancia"],
.visor-panel[data-herramienta="angulo"],
.visor-panel[data-herramienta="cobb"],
.visor-panel[data-herramienta="calibrar"],
.visor-panel[data-herramienta="flecha"],
.visor-panel[data-herramienta="elipse"] { cursor: crosshair; }
.visor-panel[data-herramienta="texto"] { cursor: text; }
.visor-lienzo, .visor-capa { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.visor-capa { pointer-events: none; overflow: visible; }

/* Trazos de la capa vectorial. El halo oscuro va debajo de cada trazo para que se lea sobre cualquier gris. */
.visor-halo { fill: none; stroke: rgba(0, 0, 0, 0.85); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
polygon.visor-halo { fill: rgba(0, 0, 0, 0.85); }
.visor-trazo { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.visor-trazo-medida { stroke: var(--visor-medida); color: var(--visor-medida); }
.visor-trazo-nota { stroke: var(--visor-nota); color: var(--visor-nota); }
.visor-trazo-pendiente { stroke: var(--visor-pendiente); color: var(--visor-pendiente); }
.visor-relleno { fill: currentColor; }
.visor-discontinua { stroke-dasharray: 6 5; }
.visor-etiqueta {
  font: 600 13px system-ui, -apple-system, "Segoe UI", sans-serif;
  dominant-baseline: middle;
  fill: currentColor;
  stroke: rgba(0, 0, 0, 0.85);
  stroke-width: 4px;
  paint-order: stroke;
}

.visor-rotulo {
  position: absolute;
  left: 0.5rem;
  max-width: calc(100% - 1rem);
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  background: var(--visor-rotulo);
  color: #e8eef6;
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.visor-rotulo:empty { display: none; }
.visor-rotulo-nombre { top: 0.5rem; font-weight: 700; }
.visor-rotulo-datos { bottom: 0.5rem; }

.visor-vacio {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.5rem;
  text-align: center;
  color: #c3cfdd;
  font-size: 0.9rem;
  border: 2px dashed rgba(195, 207, 221, 0.28);
  border-radius: var(--r-md);
  margin: 0.75rem;
  cursor: default;
}
.visor-vacio > .ico { width: 44px; height: 44px; color: #7cc7e8; stroke-width: 1.6; }
.visor-vacio p { max-width: 34rem; }
.visor-vacio strong { color: #ffffff; }
.visor-vacio .boton-enlace { color: #7cd3e6; border-color: rgba(124, 211, 230, 0.45); background: rgba(124, 211, 230, 0.1); }
.visor-soltando .visor-vacio { border-color: var(--marca-400); }

/* ---------- Lateral ---------- */
.visor-lateral {
  display: flex; flex-direction: column; gap: 0.6rem;
  min-width: 0;
  font-size: 0.86rem;
}
.visor-pista {
  padding: 0.65rem 0.8rem;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--marca-500) 9%, var(--superficie));
  border: 1px solid color-mix(in srgb, var(--marca-500) 25%, transparent);
  color: var(--tinta);
  line-height: 1.5;
}
.visor-aviso { color: var(--tinta-2); min-height: 1.2em; font-size: 0.82rem; }
.visor-aviso:empty { display: none; }
.visor-lateral-titulo { font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--tinta-3); margin-top: 0.3rem; }
.visor-lateral-cabecera { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.visor-calibracion-estado { color: var(--tinta-2); line-height: 1.5; }
.visor-formulario {
  display: grid; gap: 0.45rem;
  padding: 0.75rem;
  border: 1px solid var(--borde);
  border-left: 3px solid var(--alerta);
  border-radius: var(--r-md);
  background: var(--alerta-suave);
}
.visor-formulario label { font-weight: 700; font-size: 0.82rem; color: var(--tinta); }
.visor-formulario input {
  min-height: 38px;
  border: 1px solid var(--borde);
  border-radius: var(--r-sm);
  padding: 0.35rem 0.6rem;
  font: inherit;
  background: var(--superficie);
  color: var(--tinta);
}
.visor-formulario-acciones { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.visor-formulario-acciones .boton-enlace { margin-top: 0; }

.visor-lista { list-style: none; display: grid; gap: 0.35rem; }
.visor-lista-fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.2rem 0.5rem;
  padding: 0.4rem 0.4rem 0.4rem 0.65rem;
  border: 1px solid var(--borde);
  border-radius: var(--r-sm);
  background: var(--superficie-2);
  cursor: pointer;
}
.visor-lista-fila.actual { border-color: color-mix(in srgb, var(--marca-500) 40%, var(--borde)); }
.visor-lista-nombre { font-weight: 600; color: var(--tinta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.visor-lista-valor { font-weight: 800; color: var(--marca-tinta); font-variant-numeric: tabular-nums; }
.visor-lista-valor { grid-column: 2; grid-row: 1; }
.visor-lista-corte { grid-column: 1 / 3; grid-row: 2; font-size: 0.74rem; color: var(--tinta-3); }
/* El botón de borrar ocupa su propia columna a la derecha, con o sin la línea del corte debajo. */
.visor-lista-fila .visor-boton-mini { grid-column: 3; grid-row: 1 / span 2; }
.visor-lista-vacia { color: var(--tinta-3); font-size: 0.82rem; }
.visor-boton-mini {
  min-width: 30px; min-height: 30px;
  border: 1px solid var(--borde);
  border-radius: var(--r-sm);
  background: var(--superficie);
  color: var(--tinta-2);
  font: 700 0.8rem/1 inherit;
  font-family: inherit;
  cursor: pointer;
}
.visor-boton-mini:hover:not(:disabled) { color: var(--peligro); border-color: var(--peligro); }
.visor-boton-mini:disabled { opacity: 0.45; cursor: not-allowed; }
.visor-boton-texto { padding: 0.3rem 0.6rem; align-self: flex-start; }

/* ---------- Botón del visor en las fichas ---------- */
.modal-visor { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.75rem; margin: 0.2rem 0 0.4rem; }
.modal-visor .boton-enlace { margin-top: 0; }
.modal-visor-nota { font-size: 0.8rem; color: var(--tinta-3); }

/* ============================================================
   Apoyo
   ============================================================ */
.apoyo-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; align-items: start; }
.apoyo-bloque {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-sm);
  padding: 1.4rem 1.5rem;
  display: flex; flex-direction: column; gap: 0.75rem;
}
.apoyo-bloque h2 { display: flex; align-items: center; gap: 0.5rem; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em; }
.apoyo-bloque h2 .ico { width: 22px; height: 22px; color: var(--marca-tinta); }
.apoyo-bloque p { color: var(--tinta-2); }
.apoyo-lista { display: grid; gap: 0.35rem; padding-left: 1.2rem; color: var(--tinta-2); }
.apoyo-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.apoyo-boton { margin-top: 0.2rem; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; justify-self: start; }
.apoyo-boton-secundario { margin-top: 0.2rem; text-decoration: none; }
.apoyo-nota { font-size: 0.8rem; color: var(--tinta-3) !important; }
.apoyo-formulario { display: grid; gap: 0.45rem; }
.apoyo-formulario label { font-weight: 700; font-size: 0.85rem; color: var(--tinta); margin-top: 0.35rem; }
.apoyo-formulario select,
.apoyo-formulario textarea,
.apoyo-formulario input {
  width: 100%;
  border: 1.5px solid var(--borde);
  border-radius: var(--r-sm);
  padding: 0.55rem 0.7rem;
  font: inherit;
  font-size: 0.92rem;
  background: var(--superficie-2);
  color: var(--tinta);
}
.apoyo-formulario textarea { resize: vertical; min-height: 8rem; line-height: 1.5; }
.apoyo-formulario select:focus-visible,
.apoyo-formulario textarea:focus-visible,
.apoyo-formulario input:focus-visible { border-color: var(--marca-400); }
.apoyo-formulario .boton-primario { justify-self: start; margin-top: 0.6rem; }
.apoyo-aviso { font-size: 0.85rem; color: var(--exito) !important; min-height: 1.2em; }
.apoyo-aviso.apoyo-aviso-error { color: var(--peligro) !important; }
.apoyo-prioritaria { border-top: 1px solid var(--borde-2); padding-top: 0.75rem; }

/* Enlace discreto del pie hacia el apartado de apoyo. */
.pie-apoyo { margin-bottom: 0.5rem !important; }
.pie-apoyo a { color: var(--marca-tinta); font-weight: 600; text-decoration: none; }
.pie-apoyo a:hover { text-decoration: underline; }

/* ---------- Pantallas estrechas ---------- */
@media (max-width: 960px) {
  .visor-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .apoyo-rejilla { grid-template-columns: minmax(0, 1fr); }
}

/* El teléfono en horizontal, bajo y ancho, se trata como el vertical: Barra en iconos y menús. */
@media (max-width: 640px), (max-height: 500px) {
  .visor { padding: 0.5rem; border-radius: var(--r-md); }
  /* En el teléfono la barra se queda en iconos: El texto pasa a ser solo para el lector de pantalla y los botones conservan su nombre accesible.
     Los grupos se reparten en varias filas en lugar de desplazarse de lado, para que ninguna herramienta quede escondida fuera de la pantalla. */
  .visor-barra { gap: 0.35rem; }
  .visor-grupo { gap: 0.1rem; padding: 0.15rem; }
  .visor-boton { padding: 0.3rem 0.45rem; }
  .visor-texto {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  .visor-boton-destacado .visor-texto { position: static; width: auto; height: auto; margin: 0; clip-path: none; }
  .visor-etiqueta-campo { display: none; }
  .visor-casilla { font-size: 0.74rem; max-width: 9rem; }
  .visor-panel { height: 58vh; min-height: 260px; }
  .visor-paneles.comparando { grid-template-columns: minmax(0, 1fr); }
  .visor-paneles.comparando .visor-panel { height: 40vh; min-height: 200px; }
  .apoyo-bloque { padding: 1.1rem 1rem; }
}

@media (pointer: coarse) {
  .visor-boton, .visor-selector { min-height: 44px; min-width: 44px; }
  .visor-boton-mini { min-width: 44px; min-height: 44px; }
}

/* ---------- Impresión ----------
   Al imprimir el visor queda la imagen con sus anotaciones, sin la barra ni los formularios, y del apoyo solo el texto. */
@media print {
  .visor-barra, .visor-ayuda, .visor-formulario, .visor-boton-mini, .visor-vacio, .visor-privacidad,
  .apoyo-formulario, .apoyo-acciones, .apoyo-prioritaria, .pie-apoyo, .modal-visor { display: none !important; }
  .visor { border: none; box-shadow: none; padding: 0; }
  .visor-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .visor-panel { height: 60vh; break-inside: avoid; }
  .visor-lista-fila { background: none; break-inside: avoid; }
}