/* 2026-10-12 (Jorge): visor de fotos con rotar y ampliar (Shared/Ui/VisorImagen.razor + js/visor-imagen.js) */
.visor-img { display: flex; flex-direction: column; gap: 8px; width: 100%; min-width: 0; }
.visor-img-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; }
.visor-img-barra button { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px; border: 1px solid #C9D3E6; border-radius: 10px; background: #fff; color: #0B2A5B; font-size: 13px; font-weight: 700; cursor: pointer; }
.visor-img-barra button:hover { background: #EEF2FA; }
.visor-img-barra button i { font-size: 1.05rem; }
.visor-img-pct { min-width: 48px; text-align: center; font-size: 13px; font-weight: 700; color: #64748B; }
.visor-img-lienzo { position: relative; overflow: hidden; width: 100%; background: #0F172A; border-radius: 10px; touch-action: none; user-select: none; -webkit-user-select: none; cursor: zoom-in; }
.visor-img-lienzo.ampliada { cursor: grab; }
.visor-img-lienzo.ampliada:active { cursor: grabbing; }
.visor-img-lienzo img { position: absolute; left: 50%; top: 50%; max-width: none !important; max-height: none !important; transform-origin: center center; visibility: hidden; border-radius: 0 !important; box-shadow: none !important; pointer-events: none; }
.visor-img-ayuda { text-align: center; font-size: 12px; color: #64748B; }
@media (max-width: 600px) { .visor-img-barra button span { display: none; } .visor-img-barra button { padding: 6px 11px; } }
html.modo-oscuro .visor-img-barra button { background: #1E293B; border-color: #334155; color: #E2E8F0; }
html.modo-oscuro .visor-img-barra button:hover { background: #334155; }
html.modo-oscuro .visor-img-pct, html.modo-oscuro .visor-img-ayuda { color: #94A3B8; }
/* dentro del visor del chat (fondo oscuro siempre) */
.chat-visor .visor-img { width: min(1100px, 96vw); }
.chat-visor .visor-img-barra button { background: #1E293B; border-color: #334155; color: #E2E8F0; }
.chat-visor .visor-img-pct, .chat-visor .visor-img-ayuda { color: #CBD5E1; }
/* ventana del visor al dar clic en una foto o enlace marcado con data-visor-foto */
.visor-foto-fondo { position: fixed; inset: 0; z-index: 3000; background: rgba(2,6,23,.78); display: flex; align-items: center; justify-content: center; padding: 12px; }
.visor-foto-caja { background: #fff; color: #0B2A5B; border-radius: 16px; padding: 14px 16px 12px; width: min(1000px, 100%); max-height: 96vh; overflow-y: auto; box-shadow: 0 30px 80px rgba(0,0,0,.5); display: flex; flex-direction: column; gap: 8px; }
.visor-foto-cab { display: flex; align-items: center; gap: 10px; }
.visor-foto-tit { flex: 1; min-width: 0; font-size: 16px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.visor-foto-cerrar { flex: none; width: 38px; height: 38px; border: 0; border-radius: 10px; background: transparent; color: inherit; font-size: 26px; line-height: 1; cursor: pointer; }
.visor-foto-cerrar:hover { background: rgba(100,116,139,.18); }
.visor-foto-pdf { width: 100%; height: 78vh; border: 0; border-radius: 10px; background: #fff; }
[data-visor-foto] { cursor: zoom-in; }
a[data-visor-foto] { cursor: pointer; }
html.modo-oscuro .visor-foto-caja { background: #1E293B; color: #E2E8F0; }