/*
 * 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;
	}
}

/* castillo: modales con aire, título en serif y la × arriba a la derecha */
@layer components {
	.c-modal { padding: 0; border: 0; box-shadow: 0 1.5rem 4rem -1rem rgb(0 0 0 / 0.4); }
	.c-modal__content, .c-modal > .c-modal__header, .c-modal .c-modal__body { padding-inline: var(--space-l); }
	.c-modal__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-s); padding-block: var(--space-m) var(--space-xs); }
	.c-modal__header :is(h2, h3) { font-size: var(--step-3); }
	.c-modal__body { padding-block-end: var(--space-l); }
	.c-share { display: grid; gap: var(--space-xs); }
	.c-share label { font-size: var(--step--1); font-weight: 600; }
	.c-share .c-form__control { inline-size: 100%; }
	.c-share__links a { display: inline-flex; align-items: center; gap: 0.4em; padding: 0.4em 1em; border: 1px solid var(--color-rule); border-radius: var(--radius-pill); font-size: var(--step--1); text-decoration: none; }
	.c-share__links a:hover { border-color: var(--color-accent); background: var(--color-band); }
	.c-share__links .c-icon:not([data-icon="email"]) { display: none; }
}