/**
 * Visualizador (modal) de vista previa — pestañas, zoom y descarga (HU-1, HU-3, HU-4, HU-5).
 */

.edictos-preview-viewer-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(20, 20, 20, 0.55);
	padding: 1.5rem;
	animation: edictos-preview-viewer-fade-in 0.15s ease-out;
}

.edictos-preview-viewer-overlay[hidden] {
	display: none;
}

@keyframes edictos-preview-viewer-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

.edictos-preview-viewer {
	display: flex;
	flex-direction: column;
	width: min(720px, 100%);
	max-height: 90vh;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
	overflow: hidden;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

.edictos-preview-viewer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.25rem;
	border-bottom: 1px solid #eaeaea;
}

.edictos-preview-viewer__title {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 700;
	color: #1a1a1a;
}

.edictos-preview-viewer__close {
	border: none;
	background: transparent;
	font-size: 1.5rem;
	line-height: 1;
	color: #6b6b6b;
	cursor: pointer;
	padding: 0.25rem 0.5rem;
	border-radius: 4px;
	transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.edictos-preview-viewer__close:hover {
	background-color: #f2f2f2;
	color: #1a1a1a;
}

.edictos-preview-viewer__tabs {
	display: flex;
	gap: 0.25rem;
	padding: 0 1.25rem;
	border-bottom: 1px solid #eaeaea;
	overflow-x: auto;
}

.edictos-preview-viewer__tabs[hidden] {
	display: none;
}

.edictos-preview-viewer__tab {
	border: none;
	background: transparent;
	padding: 0.75rem 0.9rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: #6b6b6b;
	cursor: pointer;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
	transition: color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.edictos-preview-viewer__tab:hover {
	color: #0d447d;
}

.edictos-preview-viewer__tab--active {
	color: #0d447d;
	border-bottom-color: #0d447d;
}

.edictos-preview-viewer__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.65rem 1.25rem;
	background: #fafafa;
	border-bottom: 1px solid #eaeaea;
}

.edictos-preview-viewer__toolbar[hidden] {
	display: none;
}

/* Aclaración visible solo en la pestaña "Cómo se vería en Prensa Libre" (fuera del área
   exportable — no sale en las descargas): la ubicación mostrada es ilustrativa. */
.edictos-preview-viewer__nota {
	margin: 0;
	padding: 0.45rem 1.25rem;
	font-size: 0.78rem;
	color: #6b6b6b;
	background: #fffbe8;
	border-bottom: 1px solid #f0e6b8;
}

.edictos-preview-viewer__nota[hidden] {
	display: none;
}

.edictos-preview-viewer__zoom,
.edictos-preview-viewer__downloads {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.edictos-preview-viewer__zoom-btn,
.edictos-preview-viewer__download-btn {
	border: 1px solid #d8d8d8;
	background: #fff;
	color: #1a1a1a;
	font-size: 0.8rem;
	font-weight: 600;
	padding: 0.35rem 0.6rem;
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.edictos-preview-viewer__zoom-btn:hover,
.edictos-preview-viewer__download-btn:hover {
	background-color: #eef4fb;
	border-color: #0d447d;
}

.edictos-preview-viewer__zoom-reset {
	font-weight: 500;
}

.edictos-preview-viewer__zoom-level {
	min-width: 3.2em;
	text-align: center;
	font-size: 0.8rem;
	color: #4a4a4a;
}

.edictos-preview-viewer__downloads-label {
	font-size: 0.8rem;
	color: #6b6b6b;
	margin-right: 0.15rem;
}

/* OJO: NO usar "display:flex; justify-content:center" aquí (como estaba antes). Con zoom
   aplicado por CSS transform, el contenido puede volverse más ancho que el visor — y
   centrarlo con flexbox hace que ese desborde se reparta simétrico a ambos lados, pero el
   navegador solo deja hacer scroll hacia el lado "positivo" (derecha/abajo), nunca hacia el
   lado donde se centró de más (izquierda/arriba). Confirmado en pruebas: con flexbox,
   "scrollWidth" del visor quedaba IGUAL a "clientWidth" pese a que el contenido sí se veía
   más ancho — es decir, el navegador ni siquiera registraba ese desborde como algo con
   scroll. Resultado real: la esquina superior izquierda de la maqueta (donde está el
   nombre "Prensa Libre") quedaba inalcanzable con zoom, sin importar cuánto se moviera la
   barra de navegación — justo lo que reportó la clienta. Centrar con "margin:0 auto" en un
   elemento de bloque no tiene este problema: si el contenido no cabe, los márgenes "auto"
   simplemente se vuelven 0 (se pega a la izquierda) en vez de forzar un centrado
   imposible de scrollear — así el 100% del contenido zoomeado queda alcanzable. */
.edictos-preview-viewer__stage {
	flex: 1;
	overflow: auto;
	padding: 1.5rem;
	background: #f2f2f2;
}

/* transform-origin en "top left" (no "top center"): así el zoom crece siempre hacia la
   derecha/abajo y la esquina superior izquierda (donde está "Prensa Libre") se queda fija
   en su lugar sin importar el nivel de zoom — alcanzable con scroll (0,0) siempre. Con
   origen centrado, la esquina se movía hacia la izquierda al hacer zoom, un punto que el
   scroll ya no puede alcanzar (scrollLeft no puede ser negativo). */
.edictos-preview-viewer__zoom-wrapper {
	transform-origin: top left;
	transition: transform 0.1s ease-out;
	width: fit-content;
	margin: 0 auto;
}

.edictos-preview-viewer__export-target {
	background: #fff;
}

/* Los botones nunca parten su texto en varias líneas ("Volver al 100%" se veía en 3
   renglones en celular) — si no caben, el grupo completo baja de línea (flex-wrap). */
.edictos-preview-viewer__zoom-btn,
.edictos-preview-viewer__download-btn {
	white-space: nowrap;
}

/* ── Celular: el visualizador se usa mucho desde el teléfono — todo debe caber al ancho
   de la pantalla, sin cortes ni scroll horizontal sorpresa. El recuadro se encoge al
   ancho disponible y, como su tipografía/padding son proporcionales al ancho (unidades
   cqw), se ve como una miniatura fiel — igual que dentro de la maqueta; el zoom y el
   pellizco siguen disponibles para leer en detalle. ───────────────────────────────── */
@media (max-width: 600px) {
	.edictos-preview-viewer-overlay {
		padding: 0;
	}

	.edictos-preview-viewer {
		width: 100%;
		height: 100%;
		max-height: 100%;
		border-radius: 0;
	}

	.edictos-preview-viewer__header {
		padding: 0.75rem 1rem;
	}

	.edictos-preview-viewer__title {
		font-size: 0.95rem;
	}

	/* Las pestañas se cortaban ("Cómo se ver…") y había que adivinar el scroll lateral:
	   ahora comparten el ancho y el texto largo baja de renglón dentro de su pestaña. */
	.edictos-preview-viewer__tabs {
		flex-wrap: wrap;
		padding: 0 0.5rem;
	}

	.edictos-preview-viewer__tab {
		flex: 1 1 auto;
		white-space: normal;
		text-align: center;
		padding: 0.6rem 0.5rem;
	}

	.edictos-preview-viewer__toolbar {
		justify-content: flex-start;
		padding: 0.5rem 0.75rem;
		gap: 0.5rem;
	}

	.edictos-preview-viewer__zoom,
	.edictos-preview-viewer__downloads {
		flex-wrap: wrap;
	}

	/* Botones un poco más compactos: la barra ocupa menos alto y el edicto (lo que el
	   cliente vino a ver) recibe más pantalla. */
	.edictos-preview-viewer__zoom-btn,
	.edictos-preview-viewer__download-btn {
		font-size: 0.75rem;
		padding: 0.3rem 0.5rem;
	}

	.edictos-preview-viewer__nota {
		padding: 0.45rem 0.75rem;
	}

	.edictos-preview-viewer__stage {
		padding: 0.75rem;
	}

	/* El recuadro al ancho de la pantalla (antes quedaba en sus px fijos de escritorio y
	   se cortaba a la derecha). Gana sobre los width fijos de .edictos-preview-box--{tamaño}
	   por especificidad y orden de carga. La maqueta de hoja de prensa ya era width:100%. */
	.edictos-preview-viewer__zoom-wrapper {
		width: 100%;
	}

	.edictos-preview-viewer__export-target .edictos-preview-box {
		width: 100%;
	}
}