/* ============================================================
   visor.css — la columna del documento, a la derecha.
   ============================================================ */

:root { --ancho-visor: 620px; }

/* Cuando el visor está abierto, el programa se estrecha para dejarle
   sitio, en vez de quedarse debajo. */
body.con-visor #aplicacion { padding-right: var(--ancho-visor); }
body.visor-arrastrando { user-select: none; cursor: col-resize; }

#visor-lateral {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: var(--ancho-visor);
  background: var(--papel);
  border-left: 1px solid var(--linea);
  box-shadow: -6px 0 24px rgba(10, 25, 45, .10);
  display: flex; flex-direction: column;
  z-index: 40;
}

/* El borde izquierdo se arrastra para ensanchar o estrechar. */
.visor-tirador {
  position: absolute; top: 0; left: -4px; bottom: 0; width: 9px;
  cursor: col-resize; z-index: 1;
}
.visor-tirador:hover { background: rgba(31, 78, 121, .12); }

.visor-cabecera {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; border-bottom: 1px solid var(--linea);
  background: #f7f9fc;
}
.visor-nombre {
  font-size: 13px; font-weight: 600; min-width: 0; flex: 1 1 160px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.visor-botones { display: flex; align-items: center; gap: 5px; }
.visor-botones .boton { padding: 5px 10px; font-size: 13px; }
.visor-zoom {
  font-size: 12px; color: var(--tinta-suave); min-width: 46px; text-align: center;
}

/* Las acciones del documento que se está viendo (17-sep-2026, fila 25):
   solo salen cuando quien abre el visor las trae (por ahora, "Por
   clasificar"). Mismos botones que la tarjeta de la lista, reutilizados
   tal cual: aquí solo se les hace sitio. */
.visor-acciones {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 8px 14px; border-bottom: 1px solid var(--linea);
}

/* El documento se sube y se baja aquí dentro. No se encoge para caber
   entero: se abre al ancho de la columna. */
.visor-cuerpo { flex: 1; overflow: auto; background: #eef1f5; }
.visor-cuerpo iframe { display: block; width: 100%; height: 100%; border: 0; }
.visor-cuerpo img { display: block; }
.visor-cuerpo .explica { padding: 18px; margin: 0; }

@media (max-width: 900px) {
  /* En pantalla estrecha no hay sitio para dos columnas: el visor
     ocupa toda la ventana y el programa se queda detrás. */
  body.con-visor #aplicacion { padding-right: 0; }
  #visor-lateral { width: 100%; }
  .visor-tirador { display: none; }
}