/* NIDI · NIDI Web › paso C (fotos-web.js): fotos y archivos del expediente — rejilla de miniaturas, visor a pantalla
   completa con las marcas del médico, fotos congeladas de una nota firmada e identificación de quien firma. Tinta y marfil con
   las variables de nidi.css (claro y oscuro salen solos). Columnas con minmax(0, …) para que nada ensanche la página
   (lección 32); cada imagen llena una caja de proporción fija con object-fit: contain y las marcas encima con «meet». */

.nc-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 14px; margin-top: 12px; }
.nc-rejilla-nota { grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr)); }
.nc-mini { display: flex; flex-direction: column; gap: 6px; padding: 0; border: 0; background: none; text-align: left; cursor: zoom-in; min-width: 0; color: var(--tinta); font: inherit; }
.nc-mini:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; border-radius: 12px; }
.nc-mini .nc-imagen { aspect-ratio: 3 / 4; }
.nc-imagen.es-falta, .nc-imagen[aria-busy] { min-height: 90px; }
.nc-mini-id .nc-imagen { aspect-ratio: 85.6 / 54; }
.nc-mini-nombre { font-size: 16px; font-weight: 550; overflow-wrap: anywhere; }
.nc-mini-retirada { font-size: 16px; color: var(--rojo); overflow-wrap: anywhere; }
.nc-mini.es-retirada .nc-imagen { opacity: 0.5; }

.nc-imagen { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; min-width: 0; border-radius: 12px; overflow: hidden; background: var(--piedra); border: 1px solid var(--borde); }
.nc-imagen.es-falta { background: var(--fondo); border-style: dashed; }
.nc-marco { position: absolute; inset: 0; }
.nc-marco img { display: block; width: 100%; height: 100%; object-fit: contain; }
.nc-marcas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.nc-cargando, .nc-falta { padding: 12px; font-size: 16px; color: var(--tenue); text-align: center; overflow-wrap: anywhere; }

.nc-aviso { margin: 0 0 12px; }
.nc-archivos { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 12px; }
.nc-archivos li { min-width: 0; overflow-wrap: anywhere; }
.nc-botones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.boton.nc-boton-archivo { white-space: normal; max-width: 100%; text-align: left; }

.nc-nota-fotos { margin-top: 22px; }
.nc-identificacion { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 12px; margin: 10px 0; }

/* Visor a pantalla completa. */
.nc-sin-scroll { overflow: hidden; }
.nc-visor { position: fixed; inset: 0; z-index: 60; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 10px; padding: 14px; background: color-mix(in srgb, #0b0d10 96%, transparent); color: #f5f1e8; }
.nc-visor-barra { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; min-width: 0; }
.nc-visor-titulo { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.nc-visor-titulo span { font-size: 16px; opacity: 0.8; }
.nc-visor-botones { display: flex; flex-wrap: wrap; gap: 8px; }
/* Sobre el fondo oscuro del visor, los botones de contorno van claros en los dos temas (y no cambian de color al pasar el mouse). */
.nc-visor .boton.boton-linea, .nc-visor .boton.boton-linea:hover { color: #f5f1e8; border-color: rgba(245, 241, 232, 0.55); background: transparent; }
.nc-visor .boton.boton-linea:hover { background: rgba(245, 241, 232, 0.12); }
.nc-visor-cuerpo { display: flex; align-items: center; justify-content: center; min-height: 0; }
.nc-visor-cuerpo { position: relative; }
.nc-visor-cuerpo .nc-imagen { background: transparent; border: 0; height: 100%; }
.nc-visor-pie { margin: 0; font-size: 16px; opacity: 0.8; text-align: center; }

@media print {
  .nc-mini { cursor: default; }
  .nc-rejilla-nota { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nc-visor { display: none; }
}
.db2-identificacion .nc-identificacion { width: min(100%, 520px); }
.nb-fotos { margin: 4px 0 14px; }

/* Imprimir fotos para cirugía: la tarjeta de la pestaña Fotos, la casilla de cada foto y las hojas (ocultas en pantalla; al imprimir
   solo se ven ellas: letter, con el @page de plataforma.css). */
.nc-celda { display: grid; gap: 8px; min-width: 0; align-content: start; }
.nc-incluir, .nc-con-marcas { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 16px; cursor: pointer; }
.nc-incluir input, .nc-con-marcas input { width: 22px; height: 22px; flex: none; }
.nc-imprimir-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 12px; }
.nc-comparar label { font-size: 16px; font-weight: 500; }
.nc-comparar select { width: auto; min-width: 230px; min-height: 44px; max-width: 100%; }
#nc-hojas { display: none; }
@media print {
  body.nc-imprimiendo > *:not(#nc-hojas) { display: none !important; }
  body.nc-imprimiendo #nc-hojas { display: block; color: #000; background: #fff; }
  .nc-hoja { break-after: page; page-break-after: always; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 8mm; min-height: 240mm; }
  .nc-hoja:last-child { break-after: auto; page-break-after: auto; }
  .nc-hoja-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 1px solid #000; padding-bottom: 3mm; font-size: 12pt; }
  .nc-hoja-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 6mm; }
  .nc-hoja-pares { display: grid; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 6mm; }
  .nc-hoja-par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6mm; }
  .nc-hoja-celda { margin: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 2mm; min-height: 0; }
  .nc-hoja-imagen { position: relative; min-height: 0; }
  .nc-hoja-imagen .nc-marco { position: absolute; inset: 0; }
  .nc-hoja-imagen img { width: 100%; height: 100%; object-fit: contain; display: block; }
  .nc-hoja-pie { display: flex; flex-wrap: wrap; justify-content: center; gap: 1mm 4mm; font-size: 10pt; text-align: center; }
  .nc-hoja-nota { font-style: italic; }
  .nc-hoja-cierre { margin: 0; font-size: 8.5pt; color: #444; }
}