/*
 * c-modal — lo mínimo: el <dialog> ya se centra y se dibuja encima de todo.
 * Acá solo: un ancho que no se salga de la pantalla, un backdrop que se note
 * y que la página de atrás no se desplace. Lo visual lo pone cada theme.
 * JS: js/c-modal.js
 */
@layer components {
	.c-modal {
		/* el reset pone margin: 0 a todo; el <dialog> modal se centra con margin: auto */
		margin: auto;
		max-inline-size: min(40rem, 100vw - 2rem);
		max-block-size: calc(100dvh - 2rem);
		overflow: auto;
		background: var(--color-surface, Canvas);
		color: var(--color-fg, CanvasText);
	}
	.c-modal::backdrop {
		background: var(--color-backdrop, rgb(0 0 0 / 0.5));
	}
	html:has(.c-modal[open]) {
		overflow: hidden;
	}
	/* caMediaPanel (js/ca-media-panel.js): el panel que usa el core para
	   formularios (login, registro, comentarios, conjuntos) y el visor */
	.c-modal--panel { max-inline-size: min(48rem, 100vw - 2rem); }
	/* con el visor de alta resolución adentro: toda la pantalla (el visor
	   necesita un contenedor con tamaño) */
	.c-modal--panel:has(#caMediaOverlayContent) {
		inline-size: calc(100vw - 2rem);
		block-size: calc(100dvh - 2rem);
		max-inline-size: none;
		overflow: hidden;
	}
	.c-modal--panel:has(#caMediaOverlayContent) :is(#caMediaPanelContentArea, #caMediaOverlayContent) { block-size: 100%; }
	/* compartir (pageHeader.tmpl/shareModal.php): enlace + botón de copiar (c-copy) y enlaces */
	.c-share__links { display: flex; flex-wrap: wrap; gap: var(--space-s, 1rem); margin: var(--space-s, 1rem) 0 0; padding: 0; list-style: none; }
	.c-modal[aria-busy="true"] [data-modal-content] {
		min-block-size: 4rem;
		opacity: 0.5;
	}
}