/* dlg.css — el diálogo (Dialog). Con tokens. Los efectos son estados de DOS clases
   que pone el JS:  dlg--fx-<efecto>  (cómo es «fuera»)  y  dlg--in  (ya dentro). */

.dlg {
	position: fixed;
	z-index: 1000;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
	visibility: hidden;
	pointer-events: none;
}

/* Se ve mientras está abierto Y mientras termina de irse (dlg--closing la quita el
   JS al acabar el efecto de cierre, en el mismo instante en que retira el efecto:
   así no hay un fotograma con la caja a la vista y sin efecto). */
.dlg--open,
.dlg--closing { visibility: visible; }
.dlg--open { pointer-events: auto; }

.dlg__veil {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	opacity: 0;
	background: var(--dlg-veil, rgba(0, 0, 0, 0.45));
	-webkit-transition: opacity 0.35s;
	transition: opacity 0.35s;
}

.dlg--open .dlg__veil { opacity: 1; }

.dlg__box {
	position: relative;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
	width: 92vw;
	max-width: var(--dlg-width, 420px);
	max-height: 88vh;
	color: var(--dlg-text, #1f2333);
	border-radius: var(--dlg-radius, 14px);
	background: var(--dlg-bg, #ffffff);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
	-webkit-transition: opacity 0.3s, -webkit-transform 0.45s cubic-bezier(0.2, 1, 0.3, 1), -webkit-clip-path 0.5s cubic-bezier(0.5, 1, 0.2, 1);
	transition: opacity 0.3s, transform 0.45s cubic-bezier(0.2, 1, 0.3, 1), clip-path 0.5s cubic-bezier(0.5, 1, 0.2, 1);
}

/* a pantalla completa (un editor, un visor) */
.dlg--full .dlg__box {
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	border-radius: 0;
	box-shadow: none;
}

.dlg__stage { position: relative; -webkit-flex: 1; flex: 1; min-width: 0; min-height: 0; }

/* Mientras se coloca el estado de partida de un efecto, nada se anima (Dialog.prep) */
.dlg--prep .dlg__box,
.dlg--prep .dlg__box > * {
	-webkit-transition: none !important;
	transition: none !important;
}

/* fade: aparece y crece un poco */
.dlg--fx-fade .dlg__box { opacity: 0; -webkit-transform: scale3d(0.96, 0.96, 1); transform: scale3d(0.96, 0.96, 1); }
.dlg--fx-fade.dlg--in .dlg__box { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }

/* slide: sube desde abajo */
.dlg--fx-slide .dlg__box { opacity: 0; -webkit-transform: translate3d(0, 40px, 0); transform: translate3d(0, 40px, 0); }
.dlg--fx-slide.dlg--in .dlg__box { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

/* grow: la caja nace del origen (el recorte lo lleva el JS) y se FUNDE con él:
   al abrir aparece enseguida, mientras crece; al cerrar se desvanece en la segunda
   mitad del camino, para llegar al origen ya transparente (si no, quedaba un
   instante un rectángulo blanco encima de él). Su contenido entra después. */
.dlg--fx-grow .dlg__box {
	opacity: 0;
	-webkit-transition: opacity 0.25s 0.25s, -webkit-clip-path 0.5s cubic-bezier(0.5, 1, 0.2, 1);
	transition: opacity 0.25s 0.25s, clip-path 0.5s cubic-bezier(0.5, 1, 0.2, 1);
}

.dlg--fx-grow.dlg--in .dlg__box {
	opacity: 1;
	-webkit-transition: opacity 0.2s, -webkit-clip-path 0.5s cubic-bezier(0.5, 1, 0.2, 1);
	transition: opacity 0.2s, clip-path 0.5s cubic-bezier(0.5, 1, 0.2, 1);
}

.dlg--fx-grow .dlg__box > * { opacity: 0; -webkit-transition: opacity 0.15s; transition: opacity 0.15s; }
.dlg--fx-grow.dlg--in .dlg__box > * { opacity: 1; -webkit-transition: opacity 0.35s 0.18s; transition: opacity 0.35s 0.18s; }

/* zoom: la caja entera crece desde el origen (el transform de partida lo pone el JS) */
.dlg--fx-zoom .dlg__box { opacity: 0; }
.dlg--fx-zoom.dlg--in .dlg__box { opacity: 1; }

/* morph: la superficie aparece mientras la foto vuela */
.dlg--fx-morph .dlg__box { opacity: 0; }
.dlg--fx-morph.dlg--in .dlg__box { opacity: 1; -webkit-transition: opacity 0.45s; transition: opacity 0.45s; }

/* la copia que vuela y la foto grande que la releva (las crea el JS) */
.dlg__clone,
.dlg__media {
	position: fixed;
	z-index: 2;
	top: 0;
	left: 0;
	opacity: 0;
	pointer-events: none;
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
}

.dlg__clone--fly {
	-webkit-transition: -webkit-transform var(--dlg-fly, 0.6s) cubic-bezier(0.5, 1, 0.2, 1), -webkit-clip-path var(--dlg-fly, 0.6s) cubic-bezier(0.5, 1, 0.2, 1);
	transition: transform var(--dlg-fly, 0.6s) cubic-bezier(0.5, 1, 0.2, 1), clip-path var(--dlg-fly, 0.6s) cubic-bezier(0.5, 1, 0.2, 1);
}

.dlg__media { -webkit-transition: opacity 0.2s; transition: opacity 0.2s; }

/* la foto cuando NO vuela: dentro del escenario, entera y centrada */
.dlg__inline {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Filas que suben una detrás de otra al abrir (el retardo de cada una lo pone el JS).
   `backwards`: al acabar no queda ningún transform puesto. */
.dlg--in [data-dialog-row] {
	-webkit-animation: dlgRowUp 1s cubic-bezier(0.2, 1, 0.3, 1) backwards;
	animation: dlgRowUp 1s cubic-bezier(0.2, 1, 0.3, 1) backwards;
}

@-webkit-keyframes dlgRowUp { from { opacity: 0; -webkit-transform: translate3d(0, 30px, 0); } }
@keyframes dlgRowUp { from { opacity: 0; -webkit-transform: translate3d(0, 30px, 0); transform: translate3d(0, 30px, 0); } }

@media (prefers-reduced-motion: reduce) {
	.dlg__box, .dlg__veil, .dlg__clone--fly, .dlg__media, .dlg__box > * { -webkit-transition-duration: 0.01s !important; transition-duration: 0.01s !important; -webkit-transition-delay: 0s !important; transition-delay: 0s !important; }
	.dlg--in [data-dialog-row] { -webkit-animation-duration: 0.01s; animation-duration: 0.01s; -webkit-animation-delay: 0s !important; animation-delay: 0s !important; }
}