/* Las zonas de AD.
 *
 * Regla primera: un hueco vacio NO deja agujero. Todo marco (y el envase
 * seccion-ficha de un widget) nace oculto; publicidad.js lo revela con
 * .zzc-ad-lleno cuando el tag puso contenido de verdad.
 *
 * Todo centrado y con propiedades logicas: el arabe (RTL) usa exactamente las
 * mismas reglas. El overlay del interstitial y de la salida lo pinta EL TAG
 * (v3): aqui no hay overlay propio, o se verian dos.
 */

.zzc-ad-marco,
.zzc-ad-envase { display: none; }

.zzc-ad-marco.zzc-ad-lleno { display: block; margin: 22px auto; text-align: center; }
.zzc-ad-envase.zzc-ad-lleno { display: block; }

/* el envase de widget es una .zz-ficha del tema: dentro, el marco no repite margen */
.zzc-ad-envase .zzc-ad-marco.zzc-ad-lleno { margin: 0 auto; }

.zzc-ad-rotulo {
	display: block;
	margin-block-end: 6px;
	font-family: var(--zz-mono, ui-monospace, monospace);
	font-size: 9px;
	font-weight: 500;
	letter-spacing: var(--zz-tracking-rotulo, .14em);
	text-transform: uppercase;
	color: var(--zz-rotulo-txt, #7D6E65); /* el token AA: tinta-3 sobre crema da 3,07:1 */
}

/* sobre el rojo (tiras fuera de ficha), el rotulo usa el token AA del tema */
.zz-sobre .zzc-ad-rotulo { color: var(--zz-sobre-rojo-rot, rgba(250, 246, 239, .84)); }

.zzc-ad-hueco { display: flex; justify-content: center; }
.zzc-ad-hueco iframe,
.zzc-ad-hueco img { max-width: 100%; height: auto; }

/* la tarjeta del directorio: una ficha mas de la rejilla, con su marco */
.zzc-ad-ficha { display: none; }
.zzc-ad-ficha:has(.zzc-ad-lleno) { display: flex; align-items: center; justify-content: center; padding: 18px; }

/* el ancla de las zonas pantalla/salida: el tag arma el disparo desde ella.
   NO display:none -- un ancla fuera del render podria no contar como visible
   para el tag; un punto de 1px sin pintar basta y no estorba a nadie */
.zzc-ad-ancla {
	position: fixed;
	inset-block-end: 0;
	inset-inline-start: 0;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}