.edictos-preview-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.65rem 1.25rem;
	font-size: 0.95rem;
	font-weight: 600;
	color: #fff;
	background-color: #0d447d;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.15s ease-in-out;
}

.edictos-preview-btn:hover,
.edictos-preview-btn:focus {
	background-color: #001931;
}

.edictos-preview-btn--cargando {
	opacity: 0.75;
	cursor: wait;
}

/* Campo File Upload oculto (calculadora 240, sección "Documentos") donde
 * preview-inject.js adjunta automáticamente el PDF del diseño final — el cliente nunca
 * debe verlo ni interactuar con él, solo existe para que CCB lo incluya en el pedido como
 * si fuera un archivo más. display:none (no visibility/opacity) porque no necesita layout
 * ni offsetParent, a diferencia del textarea nativo del editor enriquecido. */
.edictos-auto-pdf-field {
	display: none;
}

/* Mismo feedback que el botón de "Ver vista previa": mientras se genera y adjunta el PDF
 * en segundo plano antes de avanzar de página, el botón "Siguiente" se ve ocupado en vez
 * de parecer que el clic no hizo nada. */
.edictos-preview-next-cargando {
	opacity: 0.75;
	cursor: wait;
	pointer-events: none;
}

.edictos-preview-result {
	margin-top: 1rem;
}

/* La barra + la caja enriquecida se insertan directo encima del textarea nativo de CCB, que
   queda oculto (ver .edictos-preview-editor__native-textarea abajo) pero sigue existiendo en
   el DOM y sincronizado — así CCB (Vue) y nuestra propia captura de datos siguen viendo los
   cambios igual que si el cliente escribiera ahí directamente. Barra de ancho completo estilo
   editor de texto real (Google Docs/Word): botones de formato a la izquierda, contador de
   caracteres en vivo a la derecha. */
/* El contenedor nativo de CCB (.ccb-field__input-wrapper) es un flex row sin wrap — sin
   esto la barra y la caja enriquecida quedan AL LADO del textarea en vez de encima. */
.ccb-field__input-wrapper:has( > .edictos-preview-editor__toolbar ) {
	flex-wrap: wrap;
}

/* Ocultos desde el primer render, ANTES de que corra el JS que arma la caja enriquecida —
   mismo motivo que ya oculta "# Publicaciones" por CSS puro (ver más abajo): sin esto, el
   cliente alcanza a ver el textarea nativo de CCB en su aspecto normal por un instante y
   recién después se reemplaza por la caja enriquecida, un parpadeo molesto reportado en
   pruebas manuales ("los componentes... hacen como parpadeo y después cambian, como el
   editor"). No es display:none: eso pondría offsetParent en null y rompería la detección
   de "cuál de los 4 textareas (uno por tamaño) es el visible" en preview-inject.js, que
   depende de offsetParent !== null. La clase .edictos-preview-editor__native-textarea que
   agrega el JS después es redundante con esta regla, pero se deja por si el selector de acá
   cambiara de alcance en el futuro. */
.ccb-field.ccb-text-field textarea,
.edictos-preview-editor__native-textarea {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}

/* Esqueleto gris (barra de herramientas + caja de texto) mientras CCB todavía no montó el
   campo de este paso — pedido explícito del cliente: nada de mensaje de texto ni timer,
   que se sienta la forma real del editor que está por aparecer (reporte 2026-08-01, ver
   mostrarCargandoEditorSiHaceFalta() en preview-inject.js). Medidas iguales a
   .edictos-preview-editor__toolbar/__surface reales para que el reemplazo no salte de
   tamaño. Animación de pulso sutil para que se note "vivo", no trabado. */
.edictos-cargando-editor {
	/* width:100% explícito: el padre (layout propio de CCB) no siempre estira los hijos al
	   ancho completo por defecto — confirmado en pruebas que sin esto el contenedor
	   colapsaba a 0px de ancho y el esqueleto quedaba invisible. */
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: 0.5rem;
	margin-top: 0.75rem;
}

.edictos-cargando-editor__barra,
.edictos-cargando-editor__caja {
	background-color: #e8e8e8;
	border-radius: 4px;
	animation: edictos-cargando-pulso 1.2s ease-in-out infinite;
}

.edictos-cargando-editor__barra {
	height: 2.25rem;
}

.edictos-cargando-editor__caja {
	height: 9rem; /* mismo min-height que .edictos-preview-editor__surface real */
}

@keyframes edictos-cargando-pulso {
	0%, 100% {
		opacity: 0.6;
	}
	50% {
		opacity: 1;
	}
}

/* Mismo esqueleto gris, reutilizado para el paso 4 (Resumen): tapa el bloque nativo de
   CCB (desglose de opciones + total) hasta que ya tiene el desglose de IVA/Timbre y la
   vista previa del edicto insertados — así el cliente nunca ve el estado colapsado ni
   el total "a medias" (ver ocultarResumenMientrasCarga()/revelarResumenSiListo() en
   preview-inject.js). display:none (no visibility) para que el bloque real no ocupe
   espacio mientras el esqueleto está en su lugar. */
.edictos-resumen-oculto {
	display: none !important;
}

.edictos-preview-editor__toolbar {
	order: -1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex: 1 0 100%;
	box-sizing: border-box;
	padding: 0.35rem 0.5rem;
	margin-bottom: 0.35rem;
	background-color: #fff;
	border: 1px solid #e2e2e2;
	border-radius: 4px;
}

.edictos-preview-editor__botones {
	display: flex;
	align-items: center;
	gap: 0.35rem;
}

.edictos-preview-editor__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.85rem;
	height: 1.85rem;
	padding: 0 0.4rem;
	font-size: 0.9rem;
	font-weight: 700;
	line-height: 1;
	border: 1px solid #d8d8d8;
	background: #fff;
	border-radius: 3px;
	cursor: pointer;
	transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.edictos-preview-editor__btn:hover,
.edictos-preview-editor__btn:focus {
	background-color: #eef4fb;
	border-color: #0d447d;
}

/* Botón resaltado cuando su formato aplica a la línea/selección actual (negrita, subrayado
   o la alineación activa) — mismo comportamiento que cualquier editor tipo Word/Docs. */
.edictos-preview-editor__btn--activo {
	background-color: #dbe7f5;
	border-color: #0d447d;
	color: #0d447d;
}

/* Separador visual entre los grupos de la barra (formato | alineación | portapapeles). */
.edictos-preview-editor__sep {
	width: 1px;
	height: 1.15rem;
	background-color: #d8d8d8;
	margin: 0 0.1rem;
}

/* Selector de tamaño de letra: menú propio (no <select> nativo, ver el comentario en
   preview-inject.js sobre por qué un <select> rompería la selección de texto) — mismo
   look & feel que el resto de los botones de la barra, con un pequeño menú flotante debajo. */
.edictos-preview-editor__tamano-wrap {
	position: relative;
}

.edictos-preview-editor__btn--tamano {
	gap: 0.2rem;
	min-width: 2.4rem;
	font-weight: 600;
}

.edictos-preview-editor__tamano-menu {
	position: absolute;
	top: calc( 100% + 0.25rem );
	left: 0;
	z-index: 10;
	display: flex;
	flex-direction: column;
	width: 4rem;
	max-height: 14rem;
	overflow-y: auto;
	padding: 0.25rem;
	background: #fff;
	border: 1px solid #d8d8d8;
	border-radius: 4px;
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.15 );
}

/* Sin esto el atributo [hidden] no alcanza a esconder el menú: una regla de autor con
   "display: flex" (la de arriba) le gana en cascada al "display: none" del user-agent para
   [hidden], aunque tengan la misma especificidad — mismo bug ya documentado más abajo para
   .edictos-preview-editor__error[hidden]. Sin el override, el menú queda visible siempre y
   el botón de tamaño "se abre solo y no se puede cerrar". */
.edictos-preview-editor__tamano-menu[hidden] {
	display: none;
}

.edictos-preview-editor__tamano-opcion {
	padding: 0.35rem 0.5rem;
	font-size: 0.85rem;
	text-align: left;
	color: #1a1a1a;
	background: none;
	border: none;
	border-radius: 3px;
	cursor: pointer;
}

.edictos-preview-editor__tamano-opcion:hover,
.edictos-preview-editor__tamano-opcion:focus {
	background-color: #eef4fb;
}

.edictos-preview-editor__tamano-opcion--activa {
	font-weight: 700;
	color: #0d447d;
	background-color: #dbe7f5;
}

.edictos-preview-editor__contador {
	font-size: 0.8rem;
	color: #6b6b6b;
	white-space: nowrap;
}

.edictos-preview-editor__contador--excedido {
	color: #b3261e;
	font-weight: 700;
}

/* Mensaje de error del límite de palabras: mismo tratamiento !important que la barra y la
   caja de arriba, necesario por la misma razón (el [data-v-hash] scoped de CCB sobre los
   hijos de .ccb-field__input-wrapper gana por especificidad contra una clase simple
   nuestra). display:none explícito en [hidden] por la misma lección ya documentada del bug
   de las pestañas del visualizador (una regla de display puede pisar el atributo si no se
   declara junto). */
.edictos-preview-editor__error {
	order: 2 !important;
	flex: 1 0 100% !important;
	box-sizing: border-box;
	margin-top: 0.35rem;
	font-size: 0.8rem;
	font-weight: 600;
	color: #b3261e;
}

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

/* Caja enriquecida (contenteditable): pedido explícito de que se vea "como Word" mientras se
   escribe (negrita/subrayado reales, sin marcadores de texto visibles) y que se pueda ver
   mucho más texto que las ~2 líneas que mostraba el textarea nativo de CCB. */
.edictos-preview-editor__surface {
	/* !important: el `[data-v-hash]` scoped de CCB sobre los hijos de
	   .ccb-field__input-wrapper gana por especificidad contra esta clase simple (mismo
	   patrón ya documentado para .edictos-preview-editor__toolbar en otras reglas de CCB). */
	order: -1 !important;
	flex: 1 0 100% !important;
	box-sizing: border-box;
	min-height: 9rem;
	max-height: 20rem;
	overflow-y: auto;
	padding: 0.6rem 0.75rem;
	font-family: inherit;
	font-size: 0.95rem;
	line-height: 1.5;
	color: #1a1a1a;
	background-color: #fff;
	border: 1px solid #d8d8d8;
	border-radius: 4px;
	white-space: pre-wrap;
	word-wrap: break-word;
	/* El edicto publicado va justificado (igual que en el papel) — la caja lo muestra así
	   desde el principio para que lo que se escribe coincida con la vista previa. Las
	   alineaciones explícitas por línea (botones de la barra) se aplican como estilo
	   inline sobre cada línea y ganan sobre este predeterminado. */
	text-align: justify;
}

.edictos-preview-editor__surface:focus {
	outline: none;
	border-color: #0d447d;
	box-shadow: 0 0 0 2px rgba( 13, 68, 125, 0.15 );
}

.edictos-preview-loading,
.edictos-preview-empty,
.edictos-preview-error,
.edictos-preview-custom-design {
	margin: 0;
	padding: 0.85rem 1rem;
	border-radius: 4px;
	font-size: 0.9rem;
	background-color: #f7f7f7;
	color: #4a4a4a;
}

.edictos-preview-error {
	background-color: #fdecea;
	color: #b3261e;
}

/* Confirmado con muestreo de píxeles (PyMuPDF) contra
   docs-local/resources/visual/EDIC CONV SAB 04-07-2026.pdf (fondo real: rgb(252,243,198) =
   #fcf3c6) y con zoom contra docs-local/resources/edictos-reales-calendario/*.png: el
   edicto SÍ tiene un borde negro fino (fácil de pasar por alto a simple vista, confirmado
   ampliando la imagen). El toggle del visualizador permite pasar a blanco. La caja se
   posiciona relative para poder anclar el label fuera (esquina). */
.edictos-preview-box {
	position: relative;
	max-width: 480px;
	background: #fcf3c6;
	border: 1px solid #000;
	/* container: habilita las unidades cqw de los hijos (tipografía/padding proporcionales
	   al ancho del recuadro — ver el comentario grande de proporciones más abajo). El
	   padding vive en el __frame (hijo) y no acá, porque un elemento no puede usar sus
	   propias unidades de contenedor. */
	container-type: inline-size;
}

.edictos-preview-box--fondo-blanco {
	background: #ffffff;
}

/* Pedido explícito: el recuadro debe verse "limpio", igual en la pestaña "Mi edicto" que
   dentro de la maqueta de hoja de prensa — sin ninguna etiqueta de nuestra UI encima ni
   pegada a la caja. La info de tamaño ya la sabe el cliente (la eligió en el paso 1). */
.edictos-preview-box__label {
	display: none;
}

.edictos-preview-box__frame {
	/* Padding proporcional al ancho del recuadro (3.886cqw = los 13.6px de siempre cuando
	   el recuadro mide 350px): dentro de la maqueta de hoja de prensa el recuadro es mucho
	   más chico y un padding fijo en rem se comería el espacio. */
	padding: 0.85rem;
	padding: 3.886cqw;
	/* Tipografía calibrada contra ejemplos reales de Prensa Libre (con zoom contra
	   docs-local/resources/edictos-reales-calendario/): sans-serif humanista tipo
	   Myriad Pro/Calibri (el PDF fuente es un .indd) — no serif de libro. Fallback a
	   fuentes disponibles en la mayoría de sistemas, sin poder embeber la fuente real. */
	font-family: 'Myriad Pro', Calibri, 'Segoe UI', Arial, sans-serif;
	line-height: 1.25;
	text-align: justify;
}

.edictos-preview-box__text {
	margin: 0;
	word-break: break-word;
}

.edictos-preview-box__text > div {
	text-align: justify;
}

.edictos-preview-box__linea--derecha {
	text-align: right !important;
}

/* Alineaciones explícitas elegidas por el cliente en el editor (marcadores [i]/[c]/[d]).
   Mismo tratamiento !important que --derecha: ganan sobre el justify predeterminado. */
.edictos-preview-box__linea--izquierda {
	text-align: left !important;
}

.edictos-preview-box__linea--centro {
	text-align: center !important;
}

/* Pedido explícito: en un edicto real, el tamaño contratado (2x1, 2x2, etc.) es un espacio
   fijo en el periódico — la caja no debe encogerse a un cuadrado con textos cortos ("hola")
   ni crecer sin límite con textos largos, y debe verse del MISMO tamaño en la pestaña
   "Mi edicto" que dentro de la maqueta de "Cómo se vería en Prensa Libre" (antes solo se
   fijaba la proporción con "aspect-ratio" sin ancho fijo, así que en "Mi edicto" — sin la
   imagen de fondo que le da escala a la maqueta — el navegador la encogía a un tamaño
   minúsculo). Se fija un ancho explícito (350px, mismo para los 3 tamaños) + la proporción
   real medida con una grilla de referencia sobre
   docs-local/resources/img_edictos_hoja_prensa_completa/{2_1,2_2}.jpg — 2x1 y 2x2
   comparten el mismo ancho real en el papel (confirmado por la clienta: ambos son anuncios
   de "2 columnas", 2x2 es igual de ancho pero bastante más alto), así que la única
   diferencia entre ambos es la altura. Dentro de la maqueta de hoja de prensa, el ancho
   fijo de acá se anula (".edictos-hoja-prensa-real__overlay .edictos-preview-box" más abajo
   fuerza 100%/100%), así que este ancho de 350px solo aplica a "Mi edicto". Si el texto no
   alcanza a llenar la caja queda espacio en blanco (como en el papel real); si se pasa del
   límite de caracteres del tamaño (ya validado por CCB en el paso 2) hace scroll en vez de
   desbordar el layout. */
/* Medidas DEFINITIVAS (2026-08-01), tomadas de la ficha de tarifas oficial del periódico
   (medida en pulgadas, ancho × alto) — reemplazan las mediciones anteriores por píxel
   sobre PDFs de ejemplo (2026-07-13), que resultaron no coincidir con la tarifa real
   (ej.: 1/2 página medía casi cuadrada cuando en realidad es ancho completo de página a
   media altura, e igual de alta que 1/4 página — confirmado por la relación real
   1/2 = 2 × 1/4 de ancho con el mismo alto):
   - 2x1  = 2.02" × 0.75", ratio 2.693
   - 2x2  = 2.02" × 1.64", ratio 1.232
   - 1/4  = 5.20" × 6.08", ratio 0.855
   - 1/2  = 10.49" × 6.08", ratio 1.725
   Escala única de 173.27px/pulgada (anclada a 2x1/2x2 = 350px, sin cambios en esos dos
   tamaños) para que los 4 formatos guarden su proporción real entre sí:
   350 / 350 / 901 / 1818 px de ancho.
   El texto ocupa todo el ancho pagado (sin max-width interno) y la tipografía se
   auto-ajusta al espacio si hace falta (autoFitEdicto en preview-viewer.js). */
/* El alto se AJUSTA al texto (pedido 2026-07-21: "en un anuncio no hay espacio en
   blanco — siempre ajustar al alto del texto"), con TOPE en el alto real del tamaño
   contratado (ancho / ratio de la tarifa oficial). Si el texto pasa del tope, la
   letra se reduce sola (ajustarTipografia) — igual que el tipógrafo real. Reemplaza el
   aspect-ratio fijo anterior (2026-07-13), que dejaba un vacío grande con textos cortos. */
.edictos-preview-box--2x1 {
	width: 350px;
	max-width: 100%;
	max-height: 130px; /* 350 / 2.693 */
	overflow: auto;
}

/* Tipografía PROPORCIONAL al ancho del recuadro (unidades cqw, 1cqw = 1% del ancho del
   contenedor .edictos-preview-box) — dentro de la maqueta de hoja de prensa escala hacia
   abajo con el recuadro y el texto se ve chiquito COMO EN EL PAPEL REAL (pedido
   explícito: "aunque se mire chiquito el texto tiene que respetar el tamaño de letra,
   por eso existe el zoom"). El rem previo queda como fallback para navegadores sin
   container queries.

   Tamaño BASE recalibrado el 2026-07-21 contra el edicto de Nacionalidad real de la
   edición 2026-07-01 (2x2 impreso SIN reducción del tipógrafo): la letra estándar del
   periódico mete ~44 caracteres por línea en 2 columnas — antes nuestra base metía ~66
   (letra 1.5x más chica) y quedaba un vacío grande abajo del recuadro. Ahora la base es
   la letra estándar real (4.8cqw × 350px ≈ 16.8px en 2 columnas, mismo tamaño físico de
   letra en los 4 tamaños de anuncio) y, si el texto no cabe, el auto-ajuste
   (ajustarTipografia en preview-viewer.js) la reduce — exactamente lo que hace el
   tipógrafo real con los anuncios muy cargados. */
.edictos-preview-box--2x1 .edictos-preview-box__frame {
	font-size: 1.05rem;
	font-size: 4.8cqw;
}

.edictos-preview-box--2x2 {
	width: 350px;
	max-width: 100%;
	max-height: 284px; /* 350 / 1.232 */
	overflow: auto;
}

.edictos-preview-box--2x2 .edictos-preview-box__frame {
	font-size: 1.05rem;
	font-size: 4.8cqw;
}

.edictos-preview-box--cuarto_pagina {
	width: 901px;
	max-width: 100%;
	max-height: 1054px; /* 901 / 0.855 */
	overflow: auto;
}

.edictos-preview-box--cuarto_pagina .edictos-preview-box__frame {
	/* misma letra física que 2 columnas: 4.8cqw × (350/901) ajustado por px/ancho real */
	font-size: 1.07rem;
	font-size: 1.87cqw;
}

.edictos-preview-box--media_pagina {
	width: 1818px;
	max-width: 100%;
	max-height: 1054px; /* 1818 / 1.725 — mismo alto que 1/4 página (misma altura real) */
	overflow: auto;
}

.edictos-preview-box--media_pagina .edictos-preview-box__frame {
	/* misma letra física que 2 columnas: 4.8cqw × (350/1818) ajustado por px/ancho real */
	font-size: 1.07rem;
	font-size: 0.92cqw;
}

@media (max-width: 480px) {
	.edictos-preview-box {
		max-width: 100%;
	}
}

/* Cost Calculator Builder no expone ningún control de espaciado por sección (revisado en
   Fields/Layout/Theme del builder y en Configuraciones del calculador) — el hueco entre el
   título de sección y el primer campo es la suma fija de dos paddings del propio CCB
   (.ccb-section__header padding-bottom + .ccb-section__content padding-top = 40px).
   Se recorta aquí porque no hay otra vía sin tocar el plugin de CCB. !important es
   necesario: la regla de CCB trae un atributo scoped [data-v-hash] de Vue que la hace más
   específica que cualquier selector de clases nuestro, y ese hash cambia con cada build
   del plugin (no se puede igualar de forma estable). */
.ccb-section__header {
	padding-bottom: 8px !important;
}

.ccb-section__content {
	padding-top: 8px !important;
}

/* Pedido explícito: "# Publicaciones" se auto-completa según el tipo elegido y no debe
   comportarse como un combobox editable, sino leerse como texto informativo plano.
   Se probó la ruta 100% nativa (condición "Select option and disable" en Condiciones)
   pero CCB solo aplica el "disable" de forma confiable para la primera regla vinculada a
   este campo — verificado en vivo: con "Asambleas (2 publicaciones)" y "Cambio de
   nombre/Remate/... (3 publicaciones)" el valor se autocompleta bien pero el campo queda
   editable, sin la clase ".ccb-field-disabled" de CCB. Por eso el bloqueo real (no solo
   el estilo) se aplica con nuestra propia clase ".edictos-publicaciones-bloqueado" desde
   preview-inject.js, sin depender de si CCB decidió deshabilitarlo o no. */
.edictos-publicaciones-bloqueado {
	opacity: 1 !important;
	pointer-events: none;
}

.edictos-publicaciones-bloqueado .ccb-dropdown__input {
	border: none !important;
	background: transparent !important;
	padding: 0 !important;
	cursor: default !important;
}

.edictos-publicaciones-bloqueado .ccb-dropdown__icon {
	display: none !important;
}

/* También se anula el propio estilo "deshabilitado" de CCB por si en algún caso sí llega
   a aplicar su clase (ej. la primera regla, donde si funciona) — incluso ahí se prefiere
   la apariencia de texto plano de arriba en vez de la caja gris con opacity:0.5 de CCB. */
.ccb-field-disabled {
	opacity: 1 !important;
}

.ccb-field-disabled .ccb-dropdown__input {
	border: none !important;
	background: transparent !important;
	padding: 0 !important;
	cursor: default !important;
}

.ccb-field-disabled .ccb-dropdown__icon {
	display: none !important;
}

/* Pedido explícito: "# Publicaciones" no debe aparecer en absoluto mientras no se haya
   elegido un tipo de edicto (antes de eso no tiene ningún valor útil que mostrar). Se
   oculta por CSS desde el primer render (sin !important, para que el JS de
   preview-inject.js pueda mostrarlo después con un display inline) — si se ocultara solo
   por JS, alcanzaría a verse un instante antes de que el script corra, un parpadeo molesto
   ya reportado. El campo "Tipos de Edicto" tiene exactamente dos ".ccb-dropdown-field"
   contiguos (tipo y # Publicaciones); ":has()" selecciona el segundo sin depender de un ID
   fijo, que no está disponible en el HTML ya renderizado (solo existe en el builder). */
.ccb-field-cell:has( .ccb-dropdown-field ) + .ccb-field-cell:has( .ccb-dropdown-field ) {
	display: none;
}

/* Pregunta "¿es un edicto personalizado?" (1/4 y 1/2 página): se muestra u oculta con
   display inline por JS (edictos-inject.js), no con el atributo [hidden] — mismo criterio
   ya adoptado en el resto del archivo tras el bug real de un display:flex de autor ganándole
   en cascada al [hidden] del user-agent. */
.edictos-personalizado-pregunta {
	flex: 1 0 100%;
	box-sizing: border-box;
	margin-top: 0.5rem;
	padding: 0.75rem 1rem;
	background-color: #fff8e1;
	border: 1px solid #f0d78c;
	border-radius: 4px;
}

/* Interruptor tipo "switch" (checkbox real escondido + pastilla dibujada al lado) —
   pedido explícito en vez de un botón de confirmar: el cliente lo deja marcado o no, sin
   que pase nada todavía, y es el "Siguiente" del formulario el que decide a dónde ir según
   su estado (ver el interceptor de ".next-btn" en preview-inject.js). */
.edictos-personalizado-toggle {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	cursor: pointer;
}

.edictos-personalizado-toggle__input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.edictos-personalizado-toggle__slider {
	position: relative;
	flex: 0 0 auto;
	width: 2.75rem;
	height: 1.5rem;
	background-color: #c7c7c7;
	border-radius: 1rem;
	transition: background-color 0.15s ease-in-out;
}

.edictos-personalizado-toggle__slider::before {
	content: '';
	position: absolute;
	top: 0.15rem;
	left: 0.15rem;
	width: 1.2rem;
	height: 1.2rem;
	background-color: #fff;
	border-radius: 50%;
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.3 );
	transition: transform 0.15s ease-in-out;
}

.edictos-personalizado-toggle__input:checked + .edictos-personalizado-toggle__slider {
	background-color: #0d447d;
}

.edictos-personalizado-toggle__input:checked + .edictos-personalizado-toggle__slider::before {
	transform: translateX( 1.25rem );
}

.edictos-personalizado-toggle__input:focus-visible + .edictos-personalizado-toggle__slider {
	outline: 2px solid #0d447d;
	outline-offset: 2px;
}

.edictos-personalizado-toggle__texto {
	font-weight: 600;
}

/* Panel que reemplaza a la calculadora completa cuando el cliente confirma que su edicto
   de 1/4 o 1/2 página es personalizado — bloquea el pedido online (pedido explícito) y lo
   dirige a cotizar por WhatsApp. */
.edictos-personalizado-panel {
	padding: 2rem 1.5rem;
	background-color: #fff;
	border: 1px solid #e2e2e2;
	border-radius: 4px;
	text-align: center;
}

.edictos-personalizado-panel__mensaje {
	margin: 0 0 1.25rem;
	font-size: 1.05rem;
	color: #1a1a1a;
}

.edictos-personalizado-panel__btn {
	display: inline-block;
	padding: 0.85rem 1.75rem;
	font-weight: 700;
	color: #fff;
	background-color: #25d366;
	text-decoration: none;
	border-radius: 4px;
	transition: background-color 0.15s ease-in-out;
}

.edictos-personalizado-panel__btn:hover {
	background-color: #1ebe5b;
}

/* Botón real (no un link de texto suelto) — pedido explícito tras pruebas manuales donde
   un link subrayado chiquito se confundía visualmente con el botón de WhatsApp de arriba,
   como si ambos hicieran lo mismo. Mismo tamaño/forma que .edictos-personalizado-panel__btn
   pero en gris, para que se lean como dos acciones CLARAMENTE distintas una al lado de la
   otra, no una principal y un link perdido debajo. */
.edictos-personalizado-panel__volver {
	display: block;
	margin: 0.75rem auto 0;
	padding: 0.85rem 1.75rem;
	font-size: 1rem;
	font-weight: 700;
	color: #1a1a1a;
	background-color: #e2e2e2;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.15s ease-in-out;
}

.edictos-personalizado-panel__volver:hover {
	background-color: #cfcfcf;
}

/* Bug real de Cost Calculator Builder en el paso "Resumen" (no de este plugin): cada fila
   .ccb-summary-item es un grid de 2 columnas (nombre del campo / valor). Cuando el valor es
   un texto muy largo — nuestro editor de edicto permite bastante más texto que un campo
   corto típico — el grid le quita casi todo el ancho a la columna del NOMBRE, que queda en
   ~0px; como .ccb-summary-title tiene overflow-wrap:anywhere, con una columna de 0px el
   navegador parte el texto letra por letra en vertical ("1/4 de Página" ilegible). Pasa con
   cualquier valor largo, no solo con el edicto (confirmado en pruebas manuales). Se le
   devuelve un ancho mínimo a la columna del nombre y se le quita el overflow-wrap:anywhere
   (que le permitía "encogerse" hasta una sola letra), sin tocar ningún archivo de CCB. */
.ccb-summary-item {
	grid-template-columns: minmax( 140px, max-content ) 1fr !important;
	column-gap: 1rem;
}

.ccb-summary-item__title,
.ccb-summary-title {
	overflow-wrap: normal !important;
	word-break: normal !important;
}

/* Botón que reemplaza el texto plano del edicto en la fila del Resumen (ver
   mostrarVistaPreviaEnResumen() en preview-inject.js) — antes se insertaba ahí la caja de
   vista previa completa, que con edictos largos desarmaba el layout de todo el paso. Ahora
   solo abre el modal EdictosPreviewViewer, así la fila se queda de una sola línea sin
   importar cuán largo sea el edicto. */
.edictos-resumen-ver-btn {
	display: inline-block;
	padding: 0.5rem 1rem;
	font-size: 0.9rem;
	font-weight: 600;
	color: #fff;
	background-color: #0d447d;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.15s ease-in-out;
}

.edictos-resumen-ver-btn:hover,
.edictos-resumen-ver-btn:focus {
	background-color: #001931;
}

/* Tarjeta "Pago pendiente" DENTRO de "¡Gracias por su pedido!" (ver
   mostrarBotonPagarSiHaceFalta()/mostrarBotonPagar() en preview-inject.js) — pedido
   explícito tras pruebas reales: un banner flotante aparte (arriba o abajo de la página)
   se sentía desconectado del pedido, el cliente pensaba que ya había terminado sin pagar.
   Ahora vive como parte del mismo cuadro de confirmación, justo antes del botón nativo
   "Volver al Edicto". El color del botón usa la variable de acento de la propia
   calculadora (con un azul de respaldo) para que se vea como parte nativa de la UI, no
   un parche visual aparte. */
.edictos-pagobi-cta {
	margin: 4px 0 20px;
	padding: 18px 20px;
	background-color: #fff8e8;
	border: 1px solid #f0d585;
	border-radius: 10px;
	text-align: center;
}

.edictos-pagobi-cta__badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 12px;
	margin-bottom: 10px;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #8a5800;
	background-color: #ffe6a8;
	border-radius: 999px;
}

.edictos-pagobi-cta__texto {
	margin: 0 0 14px;
	color: #4a4a4a;
	font-size: 0.92rem;
	line-height: 1.4;
}

.edictos-pagobi-cta__boton {
	display: inline-block;
	padding: 11px 28px;
	font-size: 0.95rem;
	font-weight: 600;
	color: #fff;
	background-color: var(--ccb-accent-color, #0d447d);
	border: none;
	border-radius: var(--ccb-button-border-radius, 6px);
	cursor: pointer;
	text-decoration: none;
	transition: opacity 0.15s ease-in-out;
}

.edictos-pagobi-cta__boton:hover,
.edictos-pagobi-cta__boton:focus {
	opacity: 0.88;
	color: #fff;
}

/* Variante sin botón (ver mostrarAvisoErrorPago() en preview-inject.js): no se pudo
   generar el link de pago, no hay url que ofrecer — tono más de alerta (rojizo) que la
   variante normal (ámbar), porque acá el cliente no puede resolverlo solo, hay que
   contactarlo. */
.edictos-pagobi-cta--error {
	background-color: #fdecea;
	border-color: #f3b8b0;
}

.edictos-pagobi-cta__badge--error {
	color: #7a1f16;
	background-color: #f8c9c2;
}

/* Esqueleto de la tarjeta ENTERA "¡Ya casi terminamos!" (ver
   gestionarCargaTarjetaGraciasSiHaceFalta() en preview-inject.js) — se muestra mientras se
   consulta si el pedido tiene pago pendiente, ocultando ícono/título/Order ID/botones
   nativos, para que toda la tarjeta se sienta como una sola unidad cargando en vez de que
   el título aparezca primero (como si ya hubiera terminado) y el bloque de pago aparezca
   suelto después. Mismo patrón de pulso gris que .edictos-cargando-editor, reutilizando la
   misma animación edictos-cargando-pulso. */
.edictos-thank-you-esqueleto {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 20px 0;
}

.edictos-thank-you-esqueleto__circulo,
.edictos-thank-you-esqueleto__linea {
	background-color: #e8e8e8;
	animation: edictos-cargando-pulso 1.2s ease-in-out infinite;
}

.edictos-thank-you-esqueleto__circulo {
	width: 64px;
	height: 64px;
	border-radius: 50%;
}

.edictos-thank-you-esqueleto__linea {
	display: block;
	border-radius: 4px;
}

.edictos-thank-you-esqueleto__linea--titulo {
	width: 220px;
	height: 1.3rem;
}

.edictos-thank-you-esqueleto__linea--texto {
	width: 320px;
	max-width: 90%;
	height: 1rem;
}

.edictos-thank-you-esqueleto__texto {
	margin: 4px 0 0;
	color: #8a8a8a;
	font-size: 0.85rem;
	font-style: italic;
}

/* Respaldo únicamente: si CCB cambia la estructura de ThankYouPage.vue y
   ".thank-you-page__actions" ya no existe, el bloque se ancla fijo arriba en vez de
   perderse en algún punto aleatorio del body. */
.edictos-pagobi-cta--flotante {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	z-index: 99999;
	margin: 0;
	border-radius: 0;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Desglose de IVA (12%) y Timbre (5%) insertado justo antes de la fila "Precio Final"
   (antes "Total") del paso "Resumen" — pedido explícito: mostrar cada apartado en vez de
   un solo total a secas. */
.edictos-desglose-impuestos {
	padding: 0.5rem 0;
	border-top: 1px solid #e2e2e2;
}

.edictos-desglose-impuestos__fila {
	display: flex;
	justify-content: space-between;
	padding: 0.25rem 0;
	font-size: 0.9rem;
	color: #4a4a4a;
}