:root {
	--scan-ink: #18302f;
	--scan-muted: #60706d;
	--scan-paper: #f4f0e8;
	--scan-surface: #fffdf8;
	--scan-line: #d7ddd5;
	--scan-accent: #d96d45;
	--scan-accent-dark: #a94b2e;
	--scan-green: #2d7562;
	--scan-shadow: 0 1px 2px rgba(24, 48, 47, 0.04), 0 14px 36px rgba(24, 48, 47, 0.08);
	--scan-radius: 16px;
	--color-fondo: #f4f0e8;
	--color-panel: #fffdf8;
	--color-borde: #d7ddd5;
	--color-texto: #18302f;
	--color-texto-suave: #60706d;
	--color-acento: #d96d45;
	--color-acento-hover: #a94b2e;
}

body {
	background: var(--scan-paper);
}

.scan-app,
.scan-app * {
	box-sizing: border-box;
}

.scan-app button,
.scan-app input {
	font: inherit;
}

.scan-app button {
	cursor: pointer;
}

.scan-app {
	width: min(980px, calc(100% - 32px));
	margin: 0 auto;
	padding: 28px 0 48px;
}

.scan-intro { margin-bottom: 16px; }
.scan-intro h2 { margin-bottom: 4px; font-size: clamp(1.15rem, 2.2vw, 1.6rem); font-weight: 700; }
.scan-intro .scan-subtitle { font-size: .88rem; line-height: 1.4; }

.section-kicker {
	margin: 0 0 9px;
	font: 700 0.72rem/1.2 Arial, sans-serif;
	letter-spacing: 0.14em;
	color: var(--scan-accent-dark);
}

.scan-app h1,
.scan-app h2,
.scan-app p { margin-top: 0; }
.scan-app h2 { margin-bottom: 7px; font-size: clamp(1.25rem, 2.2vw, 1.65rem); font-weight: 600; }
.scan-subtitle { margin-bottom: 0; color: var(--scan-muted); font: 1rem/1.5 Arial, sans-serif; }

.capture-panel {
	background: var(--scan-surface);
	border: 1px solid var(--scan-line);
	box-shadow: var(--scan-shadow);
	border-radius: var(--scan-radius);
}

.connection-panel { display: grid; gap: 14px; margin-bottom: 24px; padding: 18px 20px; background: var(--scan-surface); border: 1px solid var(--scan-line); box-shadow: var(--scan-shadow); border-radius: var(--scan-radius); }
.connection-panel[hidden] { display: none; }
.connection-panel--movil { justify-items: center; text-align: center; }
.qr-box { display: grid; place-items: center; width: var(--qr-lado, 156px); min-height: var(--qr-lado, 156px); padding: 8px; background: #fff; border: 1px solid var(--scan-line); border-radius: 12px; }
.qr-box svg, .qr-box img { display: block; width: 100%; height: auto; background: #ffffff; }
.pc-pairing { display: grid; justify-items: center; gap: 16px; }
.estado-cards { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.estado-card { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--scan-line); background: var(--scan-surface); border-radius: 999px; }
.estado-card__punto { width: 10px; height: 10px; border-radius: 50%; background: var(--scan-line); flex-shrink: 0; }
.estado-card__texto { display: grid; text-align: left; line-height: 1.25; }
.estado-card__titulo { font: 700 0.8rem Arial, sans-serif; color: var(--scan-muted); }
.estado-card[data-activo="true"] .estado-card__punto { background: var(--scan-green); }
.estado-card[data-activo="true"] .estado-card__titulo { color: var(--scan-ink); }
/* Móvil emparejado (pedido explícito del usuario, 2026-09-23): el QR se sustituye por un recuadro
   gris del mismo tamaño y posición, con las dos tarjetas de estado superpuestas encima. */
/* Tarjetas (sin emparejar) y botón "Desconectar" (emparejado) ocupan el mismo hueco bajo el recuadro
   con la misma altura, para que el recuadro no se mueva al cambiar de estado. */
.qr-marco { position: relative; display: grid; justify-items: center; gap: 16px; }
.qr-marco .estado-cards, .qr-marco #boton-desconectar-pc { min-height: 40px; align-items: center; }
.qr-marco #boton-desconectar-pc[hidden] { display: none; }
.qr-marco[data-emparejado="true"] .qr-box { background: #e3e3df; }
.qr-marco[data-emparejado="true"] .qr-box > * { display: none; }
.qr-marco[data-emparejado="true"] .estado-cards { position: absolute; top: 0; left: 50%; transform: translateX(-50%); box-sizing: border-box; width: var(--qr-lado, 156px); height: var(--qr-lado, 156px); padding: 10px; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 8px; }
.qr-marco[data-emparejado="true"] .estado-card { padding: 7px 10px; border-radius: 12px; }
.qr-marco[data-emparejado="true"] .estado-card__titulo { font-size: .75rem; }
.queue-list { display: grid; gap: 8px; width: 100%; justify-items: start; }
.queue-list:empty { display: none; }
.queue-list__historial-titulo { width: 100%; margin: 4px 0 0; font: 700 .72rem Arial, sans-serif; letter-spacing: .04em; color: var(--scan-muted); text-align: left; }
.queue-list__historial-titulo[hidden] { display: none; }

/* Tarjeta larga y estrecha compartida por #cola-capturas, #cola-movil y #cola-pc (ver
   nucleo.tarjetaCola) -- ancho completo en móvil, limitado en pantallas grandes para no verse
   enorme (pedido explícito del usuario, 2026-09-19). */
.queue-card { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 420px; padding: 8px 10px; border: 1px solid var(--scan-line); border-radius: 10px; background: #fff; box-shadow: 0 1px 2px rgba(24, 48, 47, .05); }
.queue-card__miniatura { width: 40px; height: 40px; flex: none; object-fit: cover; border: 1px solid var(--scan-line); border-radius: 6px; background: var(--scan-surface-alt, #f2f2f2); }
.queue-card__miniatura--icono { display: grid; place-items: center; font: 700 .62rem Arial, sans-serif; color: var(--scan-muted); }
.queue-card__info { flex: 1; min-width: 0; display: grid; gap: 2px; }
.queue-card__nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 .78rem Arial, sans-serif; color: var(--scan-ink); }
.queue-card__meta { font: .68rem Arial, sans-serif; color: var(--scan-muted); }
.queue-card__estado { font: .68rem Arial, sans-serif; color: var(--scan-muted); }
/* Color de fondo por estado, no solo del texto (pedido explícito del usuario, 2026-09-19): verde
   suave al descargarse, rojo suave si hay un problema de subida o si se acerca el último día de
   gracia sin haberse descargado (ver nucleo.estadoDocumento). */
.queue-card--descargado { background: #e7f3ee; border-color: var(--scan-green); }
.queue-card--descargado .queue-card__estado { color: var(--scan-green); }
.queue-card--error, .queue-card--por-caducar { background: #fbebe9; border-color: #b3261e; }
.queue-card--error .queue-card__estado, .queue-card--por-caducar .queue-card__estado { color: #b3261e; }
.queue-card--clicable { cursor: pointer; }
.queue-card--clicable:hover, .queue-card--clicable:focus-visible { filter: brightness(0.97); }
/* Signo de advertencia clicable de una tarjeta "por-caducar" (ver nucleo.tarjetaCola/mostrarAvisoCaducidad
   en cola-movil.js/cola-pc.js) -- solo el icono, el aviso completo se muestra en un popup al pulsarlo. */
.queue-card__aviso { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid #b3261e; background: #fff; color: #b3261e; font-size: .9rem; line-height: 1; cursor: pointer; }
.queue-card__aviso:hover, .queue-card__aviso:focus-visible { background: #fbebe9; }
.queue-card__reintentar { margin-top: 4px; min-height: 28px; padding: 4px 10px; font-size: .68rem; }
/* Barra de progreso indeterminada (no hay eventos de progreso reales de la subida, ver
   enviarAlServidor en captura.js) -- solo comunica "sigue en curso", no un porcentaje. */
.queue-card__barra { margin-top: 4px; height: 3px; border-radius: 2px; overflow: hidden; background: var(--scan-line); }
.queue-card__barra-relleno { height: 100%; width: 35%; border-radius: 2px; background: var(--scan-ink); animation: queue-card-progreso 1.1s ease-in-out infinite; }
@keyframes queue-card-progreso {
	0% { transform: translateX(-100%); }
	100% { transform: translateX(285%); }
}

.doc-preview-overlay { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 20px; background: rgba(14, 26, 25, .72); }
.doc-preview-overlay[hidden] { display: none; }
.doc-preview-overlay__caja { position: relative; display: grid; justify-items: center; gap: 8px; max-width: min(92vw, 520px); max-height: 90vh; padding: 20px; background: var(--scan-surface); border: 1px solid var(--scan-line); }
.doc-preview-overlay__cerrar { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border: 1px solid var(--scan-line); background: transparent; color: var(--scan-ink); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.doc-preview-overlay__caja img { display: block; max-width: 100%; max-height: 70vh; object-fit: contain; border: 1px solid var(--scan-line); background: #fff; }
.doc-preview-overlay__nombre { margin: 0; font: 700 .85rem Arial, sans-serif; color: var(--scan-ink); word-break: break-word; text-align: center; }
.doc-preview-overlay__estado { margin: 0; font: .8rem Arial, sans-serif; color: var(--scan-muted); }
.doc-preview-overlay__estado:empty { display: none; }

.formato-modal { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 20px; background: rgba(14, 26, 25, .72); }
.formato-modal[hidden] { display: none; }
.formato-modal__caja { display: grid; gap: 10px; width: 100%; max-width: 380px; padding: 22px 20px; background: var(--scan-surface); border: 1px solid var(--scan-line); }
.formato-modal__titulo { margin: 0 0 4px; font: 700 1rem Arial, sans-serif; color: var(--scan-ink); text-align: center; }
.formato-modal__opcion { display: grid; gap: 3px; justify-items: start; text-align: left; width: 100%; padding: 12px 14px; }
.formato-modal__opcion strong { font: 700 0.85rem Arial, sans-serif; color: var(--scan-ink); }
.formato-modal__opcion span { font: 400 0.74rem/1.35 Arial, sans-serif; color: var(--scan-muted); }
.formato-modal__cancelar { margin-top: 2px; border: none; background: transparent; color: var(--scan-muted); font: 700 0.78rem Arial, sans-serif; text-decoration: underline; justify-self: center; padding: 6px; }

.grupo-pdf { display: grid; gap: 10px; justify-items: center; text-align: center; padding-top: 18px; border-top: 1px solid var(--scan-line); margin-top: 4px; }
.grupo-pdf[hidden] { display: none; }
.grupo-pdf__contador { margin: 0; font: 700 0.8rem Arial, sans-serif; color: var(--scan-ink); }
.grupo-pdf__acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

.qr-scanner-box { position: relative; width: 100%; max-width: 360px; aspect-ratio: 1 / 1; overflow: hidden; background: #0e1a19; }
.qr-scanner-box video { display: block; width: 100%; height: 100%; object-fit: cover; }
.qr-scanner-box__marco { position: absolute; inset: 14%; border: 2px solid #fff; box-shadow: 0 0 0 9999px rgba(14, 26, 25, .38); }

/* Interfaz móvil simplificada (2026-09-23, prueba real con alguien que no conocía la app y se
   perdió): una instrucción corta por pantalla, dos botones grandes y poco más. */
#movil-emparejar, #movil-conectado { display: grid; gap: 14px; justify-items: center; width: 100%; }
#movil-emparejar[hidden], #movil-conectado[hidden] { display: none; }
.paso-titulo { margin: 0; font: 700 1.05rem/1.35 Arial, sans-serif; color: var(--scan-ink); text-align: center; }
.scan-app .enlace-button { border: none; background: transparent; padding: 8px; color: var(--scan-muted); font: 700 .82rem Arial, sans-serif; text-decoration: underline; }
.enlace-button[hidden] { display: none; }
.estado-pill { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 6px 14px; border-radius: 999px; background: #e7f3ee; color: var(--scan-green); font: 700 .82rem Arial, sans-serif; }
.estado-pill::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.estado-movil-fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.estado-movil-fila .secondary-button { min-height: 32px; padding: 5px 12px; }
.estado-movil-fila .secondary-button[hidden] { display: none; }
.estado-pill[data-conectado="false"] { background: #eef0ec; color: var(--scan-muted); }
.acciones-escaneo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; max-width: 420px; }
.scan-app .tile-button { display: grid; justify-items: center; gap: 6px; padding: 22px 10px; border: none; border-radius: 10px; background: var(--scan-accent); color: #fff; font: 700 1.05rem Arial, sans-serif; }
.tile-button:hover { background: var(--scan-accent-dark); }
.tile-button__icono { font-size: 2rem; line-height: 1; }
.captura-barra { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.captura-barra .enlace-button { padding-left: 0; text-decoration: none; color: var(--scan-ink); }
.captura-barra__titulo { font: 700 .95rem Arial, sans-serif; color: var(--scan-ink); }

.capture-panel { padding: clamp(16px, 3vw, 28px); }

.capture-stage { position: relative; display: grid; place-items: center; min-height: min(52vh, 440px); overflow: hidden; background: #dce2da; }
.capture-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, rgba(255,255,255,.26), transparent 48%); }
.capture-empty { display: grid; place-items: center; gap: 9px; color: var(--scan-muted); font: 0.9rem Arial, sans-serif; text-align: center; cursor: pointer; }
.capture-empty[hidden] { display: none; }
.capture-empty__mark { display: grid; place-items: center; width: 52px; height: 52px; border: 1px dashed var(--scan-muted); border-radius: 50%; font-size: 1.7rem; font-weight: 400; }
#previsualizacion { display: block; width: 100%; height: 100%; max-height: 72vh; object-fit: contain; }
#previsualizacion[hidden] { display: none; }
.resize-frame { position: absolute; z-index: 2; border: 2px solid #fff; box-shadow: 0 0 0 9999px rgba(24, 48, 47, .34), 0 0 0 1px rgba(24,48,47,.3); touch-action: none; cursor: move; }
.resize-frame--recorte { border-color: var(--scan-accent); }
.resize-frame__label { position: absolute; top: 9px; left: 10px; padding: 4px 6px; color: var(--scan-ink); background: #fff; font: 700 0.65rem Arial, sans-serif; pointer-events: none; }
.resize-frame__handle { position: absolute; touch-action: none; }
.resize-frame__handle--nw, .resize-frame__handle--ne, .resize-frame__handle--sw, .resize-frame__handle--se { width: 30px; height: 30px; }
.resize-frame__handle--nw::after, .resize-frame__handle--ne::after, .resize-frame__handle--sw::after, .resize-frame__handle--se::after { content: ""; position: absolute; width: 18px; height: 18px; border-color: var(--scan-accent); border-style: solid; }
.resize-frame__handle--nw { top: -15px; left: -15px; cursor: nwse-resize; }
.resize-frame__handle--nw::after { top: 6px; left: 6px; border-width: 4px 0 0 4px; }
.resize-frame__handle--ne { top: -15px; right: -15px; cursor: nesw-resize; }
.resize-frame__handle--ne::after { top: 6px; right: 6px; border-width: 4px 4px 0 0; }
.resize-frame__handle--sw { bottom: -15px; left: -15px; cursor: nesw-resize; }
.resize-frame__handle--sw::after { bottom: 6px; left: 6px; border-width: 0 0 4px 4px; }
.resize-frame__handle--se { bottom: -15px; right: -15px; cursor: nwse-resize; }
.resize-frame__handle--se::after { bottom: 6px; right: 6px; border-width: 0 4px 4px 0; }
.resize-frame__handle--n, .resize-frame__handle--s { left: 50%; width: 56px; height: 22px; transform: translateX(-50%); cursor: ns-resize; }
.resize-frame__handle--n { top: -11px; }
.resize-frame__handle--s { bottom: -11px; }
.resize-frame__handle--e, .resize-frame__handle--w { top: 50%; width: 22px; height: 56px; transform: translateY(-50%); cursor: ew-resize; }
.resize-frame__handle--e { right: -11px; }
.resize-frame__handle--w { left: -11px; }
.resize-frame__handle--n::after, .resize-frame__handle--s::after { content: ""; position: absolute; left: 50%; top: 50%; width: 26px; height: 4px; background: var(--scan-accent); transform: translate(-50%, -50%); border-radius: 2px; }
.resize-frame__handle--e::after, .resize-frame__handle--w::after { content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 26px; background: var(--scan-accent); transform: translate(-50%, -50%); border-radius: 2px; }

.capture-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding-top: 18px; }
.file-button, .primary-button, .secondary-button { min-height: 40px; border-radius: 8px; padding: 9px 14px; font: 700 0.8rem Arial, sans-serif; }
.file-button { display: inline-flex; align-items: center; gap: 9px; border: 1px solid var(--scan-ink); color: var(--scan-ink); background: transparent; }
.file-button[hidden] { display: none; }
.file-button__icon { font-size: 1.25rem; }
.primary-button { border: 1px solid var(--scan-accent); color: #fff; background: var(--scan-accent); }
.primary-button:hover:not(:disabled) { background: var(--scan-accent-dark); }
.secondary-button { border: 1px solid var(--scan-line); color: var(--scan-ink); background: transparent; }
.scan-app button:disabled { cursor: not-allowed; opacity: .45; }
.capture-hint, .capture-error { margin: 14px 0 0; font: .82rem/1.4 Arial, sans-serif; color: var(--scan-muted); }
.capture-error { color: #a33c31; }
.capture-hint:empty { display: none; }

/* La cola en vivo del panel de captura (#cola-capturas) reutiliza .queue-list/.queue-card (ver
   arriba) -- separada del resto solo por el padding-top, para no pegarse al bloque de arriba. */
#cola-capturas { padding-top: 18px; }

@media (max-width: 680px) {
	/* En móvil sobra todo lo que no sea el paso actual: intro, subtítulo y modo ayuda fuera. */
	.scan-intro, .app-header__subtitulo, #modo-ayuda-toggle { display: none; }
	.scan-app { width: min(100% - 22px, 580px); padding-top: 16px; }
	.connection-panel { padding: 14px 16px; gap: 10px; margin-bottom: 16px; }
	.capture-stage { min-height: 360px; }
	.pc-pairing { --qr-lado: 142px; }
}

@media (orientation: landscape) and (max-height: 500px) {
	.scan-app { padding-top: 14px; padding-bottom: 20px; }
	.scan-intro { margin-bottom: 10px; }
	.capture-panel { padding: 12px 16px; }
	.capture-stage { min-height: min(58vh, 220px); max-height: min(58vh, 220px); }
	.capture-controls { padding-top: 10px; gap: 8px; }
	.capture-hint { margin-top: 8px; }
	.qr-scanner-box { max-height: 46vh; }
}