/* Panel de PC en dos columnas y "escenario" con imagen (pedido explícito del usuario, 2026-09-23).
   - PC: columna izquierda (1/3) con todo lo de conexión/QR; derecha (2/3) con la imagen
     assets/img/escanear-documento.jpg y la cola de documentos superpuesta.
   - Móvil: el mismo escenario, debajo de los botones Foto/Documento.
   La imagen va en color sin documentos y atenuada en gris de fondo en cuanto hay alguno
   (data-hay-documentos, ver cola-pc.js/cola-movil.js). El aviso rojo sale solo sin documentos
   (y en el PC, además, solo con el móvil emparejado: data-emparejado, ver conexion.js). */

@media (min-width: 681px) {
	.scan-app { width: min(1180px, calc(100% - 32px)); }
}

.panel-pc { display: grid; grid-template-columns: minmax(280px, 1fr) 2fr; gap: 20px; min-height: min(72vh, 600px); margin-bottom: 24px; }
.panel-pc[hidden] { display: none; }
.panel-pc__conexion { display: grid; align-content: center; justify-items: center; gap: 22px; padding: 28px 22px; background: var(--scan-surface); border: 1px solid var(--scan-line); border-radius: var(--scan-radius); box-shadow: var(--scan-shadow); text-align: center; }
.carpeta-destino { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 4px; width: 100%; padding-top: 14px; border-top: 1px solid var(--scan-line); font: .82rem/1.4 Arial, sans-serif; color: var(--scan-muted); text-align: center; }
.carpeta-destino[hidden] { display: none; }
/* ".scan-app button { font: inherit }" pisaba la fuente de estos botones (salían en serif). */
.scan-app .primary-button, .scan-app .secondary-button { font: 700 .8rem Arial, sans-serif; }

.escenario { position: relative; isolation: isolate; overflow: hidden; width: 100%; border-radius: var(--scan-radius); background: #eceae4; box-shadow: var(--scan-shadow); }
.escenario__imagen { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; transition: filter .5s ease, opacity .5s ease, transform .6s ease; }
.escenario[data-hay-documentos="true"] .escenario__imagen { filter: grayscale(1); opacity: .16; transform: scale(1.03); }

.escenario__aviso { display: none; position: absolute; left: 50%; bottom: 24px; z-index: 1; align-items: center; gap: 9px; max-width: calc(100% - 32px); margin: 0; padding: 10px 18px; border-radius: 999px; background: rgba(255, 255, 255, .9); backdrop-filter: blur(6px); box-shadow: 0 6px 20px rgba(24, 48, 47, .14); color: #c62828; font: 700 .95rem/1.3 Arial, sans-serif; transform: translateX(-50%); white-space: nowrap; }
.escenario__aviso::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: currentColor; animation: escenario-latido 1.8s ease-in-out infinite; }
.escenario--pc[data-emparejado="true"][data-hay-documentos="false"] .escenario__aviso,
.escenario--movil[data-hay-documentos="false"] .escenario__aviso { display: inline-flex; }
@keyframes escenario-latido {
	0%, 100% { opacity: 1; }
	50% { opacity: .3; }
}

.escenario__contenido { position: relative; display: grid; align-content: start; gap: 10px; padding: 20px; }
.escenario__contenido .queue-list { justify-items: stretch; }
.escenario__contenido .queue-card { max-width: none; background: rgba(255, 255, 255, .94); text-align: left; }
.escenario__contenido .queue-card--descargado { background: rgba(231, 243, 238, .94); }
.escenario__contenido .queue-card--error, .escenario__contenido .queue-card--por-caducar { background: rgba(251, 235, 233, .94); }
.escenario__contenido .capture-hint { justify-self: center; margin: 0; padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, .9); color: var(--scan-ink); }
.escenario__acciones { display: flex; flex-wrap: wrap; justify-content: center; }

/* PC: la columna tiene alto fijo y la cola se desplaza dentro, en rejilla de tarjetas. */
.escenario--pc { min-height: 420px; }
.escenario--pc .escenario__contenido { position: absolute; inset: 0; overflow-y: auto; padding: 24px; }
.escenario--pc[data-hay-documentos="false"] .escenario__contenido { align-content: end; padding-bottom: 28px; }
.escenario--pc[data-emparejado="true"] #mensaje-vacio-descargas { display: none; }
.escenario--pc .queue-list { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

/* Móvil: el escenario crece con la cola (sin scroll interno); vacío mantiene la proporción de la foto. */
.escenario--movil { max-width: 420px; }
.escenario--movil[data-hay-documentos="false"] { aspect-ratio: 16 / 10; }
.escenario--movil .escenario__contenido { padding: 14px; }
.escenario--movil .escenario__aviso { left: 12px; right: 12px; bottom: 14px; justify-content: center; max-width: none; padding: 8px 12px; font-size: .82rem; white-space: normal; text-align: center; transform: none; }

@media (max-width: 860px) {
	.panel-pc { grid-template-columns: 1fr; }
	.escenario--pc { min-height: 340px; }
}