/* ==========================================================================
   CooperApp · Estilo C «Bento» — pantalla: documentos
   --------------------------------------------------------------------------
   Solo lo que es exclusivo de esta pantalla. Todo lo que sirva para más de
   una va en components.css. Prohibido escribir colores, radios o sombras
   literales: se consumen con var(--token) de tokens.css.
   ========================================================================== */

/* ---- Contenedor de modal dinámico -----------------------------------------
   El servidor manda `<div id="…" class="modal-container"></div>` vacío y lo
   rellena `htmx.ajax(...)`; el propio JS de la plantilla añade `.active`
   cuando el contenido ya ha llegado. Sin esta regla el modal se queda
   siempre visible (vacío primero, con contenido después) en vez de aparecer
   solo cuando toca.
   Candidato a components.css: el mismo patrón (`class="modal-container"` +
   `.active` por JS) lo usan también los modales de marco lógico, que no son
   de esta pantalla — lo anoto en el informe para que se consolide allí. */

/* ---- Documentos: resumen --------------------------------------------------
   Reutiliza `.kpis`/`.stats-card` de components.css (icon-primary/success/
   warning/info ya existen); solo falta el tono para «sin vincular», que no
   tiene equivalente en el vocabulario común. */
.stats-icon.icon-neutro{background:var(--neutro-bg);color:var(--neutro)}

.documentos-resumen-pie{margin-bottom:var(--esp-4)}

/* ---- Documentos: zona de subida -------------------------------------------
   El campo de fichero real es un overlay transparente sobre la zona
   visible: así se puede arrastrar Y seleccionar por teclado (con foco
   visible en toda la zona), a diferencia del `display:none` del CSS
   anterior, que dejaba el control inalcanzable sin ratón. */
.subida-zona{
  position:relative;
  border:2px dashed var(--borde-2);
  border-radius:var(--r-s);
  padding:var(--esp-6) var(--esp-5);
  text-align:center;
  background:var(--sup);
  transition:border-color var(--micro),background var(--micro);
}
.subida-zona:hover{border-color:var(--acento)}
.subida-zona:focus-within{outline:2px solid var(--acento);outline-offset:2px}
.subida-zona.dragover{border-color:var(--acento);border-style:solid;background:var(--acento-suave)}
.subida-zona.has-file{border-color:var(--ok);border-style:solid;background:var(--ok-bg)}
.subida-zona-contenido{display:flex;flex-direction:column;align-items:center;gap:var(--esp-2)}
.subida-ic{
  width:44px;height:44px;border-radius:var(--r-s);display:grid;place-items:center;
  background:var(--acento-suave);color:var(--acento);font-size:var(--t-l);flex:none;
}
.subida-zona.has-file .subida-ic{background:var(--ok-bg);color:var(--ok)}
.subida-texto{font-size:var(--t-s);color:var(--texto-2);max-width:44ch;word-break:break-word}
.subida-input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;margin:0}

/* ---- Documentos: tabla -----------------------------------------------------
   Nombre de fichero + descripción apiladas, y una fila de icono + nombre
   que se reutiliza también en las fuentes de verificación. */
.doc-name-wrapper{display:flex;flex-direction:column;gap:2px;min-width:0}
.doc-filename{font-weight:var(--peso-medio);color:var(--texto)}
.doc-description{font-size:var(--t-s);color:var(--texto-3)}

/* ---- Vista previa de documento --------------------------------------------
   Fondo hundido (--sup-3) en vez del negro fijo del CSS anterior: así una
   imagen con transparencia se ve igual de bien en modo claro y en oscuro. */
.preview-imagen{
  display:flex;align-items:center;justify-content:center;
  padding:var(--esp-5);background:var(--sup-3);
}
.preview-imagen img{max-width:100%;max-height:60vh;object-fit:contain;border-radius:var(--r-xs)}
.preview-pdf{height:60vh}
.preview-pdf iframe{width:100%;height:100%;border:none;display:block}

/* ---- Informes --------------------------------------------------------------
   Cada tipo de informe generable es una celda bento con su descripción y un
   botón que ocupa todo el ancho, empujado abajo aunque la descripción sea
   de una o dos líneas. */
.avisos-informes{margin-bottom:var(--esp-5)}
.informes-generar{margin-bottom:var(--esp-6)}

.informe-cel{display:flex;flex-direction:column;gap:var(--esp-3)}
.informe-desc{color:var(--texto-2);font-size:var(--t-s);line-height:1.5;flex:1}

.informe-pack-body{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
  gap:var(--esp-4);
}
.informe-pack-texto{flex:1 1 320px}

/* ---- Fuentes de verificación ------------------------------------------------
   Separación entre los bloques del modal (objetivo, resumen, formulario,
   lista): un único margen entre hermanos en vez de repetir la clase en cada
   bloque. */
.verification-modal .modal-body > * + *{margin-top:var(--esp-5)}

.vs-source-nombre{
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-weight:var(--peso-medio);color:var(--texto);
}
.vs-source-meta{margin-top:var(--esp-2)}
.vs-source--validado{border-color:var(--ok-borde)}
.source-description{font-size:var(--t-s);color:var(--texto-3);margin-top:var(--esp-2)}