/* 
-- nom: tal.css --
-- llibreria: loT --
-- grup: UI --
-- autor: A.Moseguí / TT22 --
-- versió: 26.1.0 --
-- descripció: Component Tal — alert (host + finestra). Mirall conceptual de SweetAlert2. --
-- dependència: init.css + th-core.css + state.css + zindex.css + type.css --
*/

/* =============================================
   VARIABLES LOCALS  (--tal-*)
   els "números màgics" del component, en un sol lloc
   ============================================= */
:root {
	--tal-width: 32em;          /* amplada de la finestra */
	--tal-padding: 0 0 1.25em;  /* coixí intern (només a baix) */
	--tal-font-size: 1rem;      /* mida base — referència dels em */
	--tal-icon-size: 64px;      /* costat de la icona */
	--tal-loader-size: 32px;    /* diàmetre del loader */
	--tal-spin-dur: 1.5s;       /* durada d'una volta del loader */
	--tal-full-measure: 50rem;  /* mesura de lectura de la variant full.
	                               En rem i no en em: els em d'un max-width es
	                               compten contra la lletra del propi element, i
	                               el títol i el cos no la tenen igual. */
}

/* =============================================
   bloqueig de scroll de la pàgina  (= body.swal2-shown)
   el JS posa/treu data-body al <body> en obrir/tancar
   ============================================= */
body[data-body] {
	overflow: hidden;
}

/* =============================================
   .tal-host — overlay / container  (= .swal2-container)
   ============================================= */
.tal-host {
	/* capa + centrat */
	display: grid;
	place-items: safe center;
	position: fixed;
	inset: 0;
	height: 100%;
	z-index: var(--z-modal);

	/* coixí */
	padding: var(--sp-lg);

	/* scroll */
	overflow-x: hidden;

	/* backdrop */
	background: var(--trp-dark-half);
}

/* =============================================
   .tal — finestra d'alert  (= .swal2-popup)
   ============================================= */
.tal {
	/* layout */
	display: none;
	position: relative;
	grid-template-columns: minmax(0, 100%);

	/* mida */
	width: var(--tal-width);
	max-width: 100%;
	padding: var(--tal-padding);

	/* forma */
	border-radius: var(--rd-md);

	/* estil */
	background: var(--cl-light);
	color: var(--cl-dark);

	/* tipografia */
	font-family: inherit;
	font-size: var(--tal-font-size);
	text-align: center;
	overflow-wrap: break-word;
}

/* =============================================
   .tal--size-full — variant a pantalla completa  (= Tal.full / Tal.fullAsk)
   ============================================= */
.tal--size-full {
	/* mida: tot l'espai que dona el host (que ja hi posa el marge) */
	width: 100%;
	height: 100%;

	/* scroll: amb la finestra plena, el desplaçament és seu i no del host */
	overflow-y: auto;
}

/* mesura de lectura: el text no s'estén a tota l'amplada; queda en columna centrada */
.tal--size-full .tal__title,
.tal--size-full .tal__text {
	max-width: var(--tal-full-measure);
	margin-inline: auto;
}

/* =============================================
   STATES
   ============================================= */
/* focus — amaga l'anell de focus de la caixa sencera */
.tal:focus {
	outline: none;
}

/* loading — bloqueja l'scroll mentre carrega */
.tal[aria-busy="true"] {
	overflow-y: hidden;
}

/* obrir / tancar */
.tal[data-state="open"] {
	animation: tal-show var(--motion-dur-md) var(--motion-ease-std);
}
.tal[data-state="close"] {
	animation: tal-hide var(--motion-dur-sm) var(--motion-ease-std) forwards;
}

/* =============================================
   FILLS  (elements interns de .tal)
   ============================================= */
/* tal__title — títol  (= .swal2-title) */
.tal__title {
	/* tipografia */
	font-size: var(--step-fix-2);
	font-weight: var(--fw-700);
	text-transform: none;

	/* espaiat */
	padding: var(--sp-lg) var(--sp-xl) 0;
}

/* tal__text — cos del missatge  (= .swal2-html-container) */
.tal__text {
	font-size: var(--step-fix-1_25);
	padding: var(--sp-xl) var(--sp-xl) var(--sp-lg);
}

/* tal__actions — contenidor dels botons  (= .swal2-actions) */
.tal__actions {
	/* layout flex */
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;

	/* espaiat */
	margin-top: var(--sp-xl);
}

/* tal__button — base compartida dels botons  (= .swal2-styled) */
.tal__button {
	/* espaiat */
	margin: var(--sp-lg);
	padding: var(--sp-lg) var(--sp-xl);

	/* tipografia */
	font-size: var(--step-fix-1);
	font-weight: var(--fw-700);
	color: var(--cl-light);

	/* forma */
	border-radius: var(--rd-sm);

	/* cursor */
	cursor: pointer;
}
.tal__button:hover  { box-shadow: var(--state-hover-relief-shadow); }
.tal__button:active { box-shadow: var(--state-active-relief-shadow); }

/* variants — només el color de fons  (= .swal2-confirm / .swal2-deny / .swal2-cancel) */
.tal__button--confirm { background-color: var(--cl-confirm); }
.tal__button--deny    { background-color: var(--cl-deny); }
.tal__button--cancel  { background-color: var(--cl-cancel); }

/* tal__loader — spinner de càrrega  (= .swal2-loader) */
.tal__loader {
	display: none;   /* ocult; el JS el mostra en loading */

	/* mida */
	width: var(--tal-loader-size);
	height: var(--tal-loader-size);

	/* espaiat (igual que el botó → la fila no salta) */
	margin: var(--sp-lg);

	/* anell partit: dos costats amb color, dos transparents */
	border-width: var(--bw-lg);
	border-style: solid;
	border-color: var(--cl-info) transparent var(--cl-info) transparent;
	border-radius: 100%;

	/* gir */
	animation: tal-spin var(--tal-spin-dur) linear infinite;
}

/* loading (aria-busy): el loader substitueix els botons */
.tal[aria-busy="true"] .tal__button { display: none; }
.tal[aria-busy="true"] .tal__loader { display: block; }

/* tal__icon — caixa de la icona  (imatge via màscara) */
.tal__icon {
	/* mida */
	width: var(--tal-icon-size);
	height: var(--tal-icon-size);

	/* centrat + espaiat */
	margin: var(--sp-2xl) auto var(--sp-lg);

	/* màscara: posició/mida/repeat (la imatge i el color, als variants) */
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/* variants — imatge (màscara) + color  (= .swal2-success / -error / -warning / -info / -question) */
.tal__icon--success {
	-webkit-mask-image: url(https://font.tt22.cat/icon/exit/icon-exit-cercle-1-o-bn-pst-64x64.svg);
	mask-image: url(https://font.tt22.cat/icon/exit/icon-exit-cercle-1-o-bn-pst-64x64.svg);
	background-color: var(--cl-success);
}
.tal__icon--error {
	-webkit-mask-image: url(https://font.tt22.cat/icon/error/icon-error-cercle-1-o-bn-pst-64x64.svg);
	mask-image: url(https://font.tt22.cat/icon/error/icon-error-cercle-1-o-bn-pst-64x64.svg);
	background-color: var(--cl-error);
}
.tal__icon--warning {
	-webkit-mask-image: url(https://font.tt22.cat/icon/perill/icon-perill-2-o-bn-pst-64x64.svg);
	mask-image: url(https://font.tt22.cat/icon/perill/icon-perill-2-o-bn-pst-64x64.svg);
	background-color: var(--cl-warning);
}
.tal__icon--info {
	-webkit-mask-image: url(https://font.tt22.cat/icon/info/icon-info-cercle-1-o-bn-pst-64x64.svg);
	mask-image: url(https://font.tt22.cat/icon/info/icon-info-cercle-1-o-bn-pst-64x64.svg);
	background-color: var(--cl-info);
}
.tal__icon--question {
	-webkit-mask-image: url(https://font.tt22.cat/icon/pregunta/icon-pregunta-cercle-1-o-bn-pst-64x64.svg);
	mask-image: url(https://font.tt22.cat/icon/pregunta/icon-pregunta-cercle-1-o-bn-pst-64x64.svg);
	background-color: var(--cl-question);
}

/* tal__mark — imatge semàntica plena  (<div> amb background-image, = .swal2-image) */
.tal__mark {
	/* mida: tota l'amplada de l'alert; l'alçada la fixa l'aspect-ratio del variant */
	width: 100%;
	margin: var(--sp-2xl) 0 var(--sp-xl);

	/* imatge sencera (no màscara): la imatge i la proporció van als variants */
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}

/* variants — imatge sencera + proporció per valor semàntic */
.tal__mark--error {
	background-image: url(https://font.tt22.cat/mark/nyap/nyap-1-1659x563.webp);
	aspect-ratio: 3 / 1;
}

/* =============================================
   ANIMACIONS  (keyframes — mirall de swal2)
   ============================================= */
@keyframes tal-show {
	from { transform: scale(.8); }
	to   { transform: scale(1); }
}

@keyframes tal-hide {
	from { transform: scale(1);  opacity: 1; }
	to   { transform: scale(.8); opacity: 0; }
}

@keyframes tal-spin {
	from { transform: rotate(0); }
	to   { transform: rotate(360deg); }
}