@layer reset, base, components, utilities, site, states;

@layer utilities {
	/* FUENTES */
	.fs-6 {
		font-size: 0.6rem;
	}
	.fs-7 {
		font-size: 0.7rem;
	}
	.fs-9 {
		font-size: 0.9rem;
	}
	.fs1 {
		font-size: 1rem;
	}
	.fs1-5 {
		font-size: 1.5rem;
	}
	.fs2 {
		font-size: 2rem;
	}
	.fs3-5 {
		font-size: 3.5rem;
	}
	.h1 {
		padding-bottom: 1rem;
		font-size: 2.5rem;
	}
	.h2 {
		font-size: 2.5rem;
	}
	.h3 {
		font-size: 2rem;
	}
	.h4 {
		font-size: 1.7rem;
	}
	.h5 {
		font-size: 1.4rem;
	}
	.h6 {
		font-size: 1.1rem;
	}
	.title1 {
		font-size: 1rem;
		font-weight: bold;
	}
	.min-title {
		font-size: 0.7rem;
		font-weight: bold;
	}

	/* ------------------------- UTILITARIOS */

	/* FONT-WEIGHT */
	.font-normal {
		font-weight: normal;
	}
	.f-bold {
		font-weight: bold;
	}

	/* TEXT-ALIGN */
	.text-left {
		text-align: left;
	}
	.text-center {
		text-align: center;
	}
	.text-right {
		text-align: right;
	}

	/* FLEX */
	.flex-column {
		display: flex;
		flex-flow: column nowrap;
	}
	.flex-row-w {
		display: flex;
		flex-flow: row wrap;
	}
	.flex-row {
		display: flex;
		flex-flow: row nowrap;
	}
	.flex-align-c {
		align-items: center;
	}
	.flex-align-s {
		align-items: flex-start;
	}
	.flex-align-st {
		align-items: stretch;
	}
	.flex-just-sb {
		justify-content: space-between;
	}
	.flex-just-sa {
		justify-content: space-around;
	}
	.flex-just-s {
		justify-content: flex-start;
	}
	.flex-just-c {
		justify-content: center;
	}

	/* GRID */
	.grid-g1 {
		gap: 1rem;
	}
	.grid-g4 {
		gap: 4rem;
	}

	/* BG */
	.bg-white {
		background-color: var(--surface);
	}
	.bg0-4 {
		background-color: var(--color0-4);
	}
	.bg1-1 {
		background-color: var(--color1-1);
		color: var(--brand-primary-contrast);
	}
	.bg1-2 {
		background-color: var(--color1-2);
	}
	.bg1-3 {
		background-color: var(--color1-3);
		color: var(--brand-accent-contrast);
	}

	/* ENLACES */
	.text-black {
		color: black;
	}
	.text-white,
	.link-white {
		color: var(--text-inverse);
	}
	.text0-1 {
		color: var(--color0-1);
	}
	.link0-2 {
		color: var(--color0-2);
	}
	.link1-1 {
		color: var(--brand-text);
	}
	.text1-2,
	.link1-2 {
		color: var(--color1-2);
	}
	.link1-3 {
		color: var(--brand-accent-text);
	}
	.text5-1,
	.link5-1 {
		color: var(--color5-1);
	}

	.link0-2:hover,
	.link0-2:focus,
	.link0-2:active,
	.link1-1:hover,
	.link1-1:focus,
	.link1-1:active,
	.link1-3:hover,
	.link1-3:focus,
	.link1-3:active,
	.link-white:hover,
	.link-white:focus,
	.link-white:active {
		opacity: 0.75;
	}

	/* MARGENES */
	.mgn1 {
		margin: 1rem;
	}
	.mgnH-25 > *:not(:last-child) {
		margin-right: 0.25rem;
	}
	.mgnH-5 > *:not(:last-child) {
		margin-right: 0.5rem;
	}
	.mgnH1 > *:not(:last-child) {
		margin-right: 1rem;
	}
	.mgnV-25 > *:not(:last-child) {
		margin-bottom: 0.25rem;
	}
	.mgnV-5 > *:not(:last-child) {
		margin-bottom: 0.5rem;
	}
	.mgnV1 > *:not(:last-child) {
		margin-bottom: 1rem;
	}
	.mgnLRa {
		margin-left: auto;
		margin-right: auto;
	}

	.mgnL-25 {
		margin-left: 0.25rem;
	}
	.mgnL-5 {
		margin-left: 0.5rem;
	}
	.mgnR-25 {
		margin-right: 0.25rem;
	}
	.mgnR-5 {
		margin-right: 0.5rem;
	}
	.mgnT-25 {
		margin-top: 0.25rem;
	}
	.mgnT-5 {
		margin-top: 0.5rem;
	}
	.mgnT1 {
		margin-top: 1rem;
	}
	.mgnT2 {
		margin-top: 2rem;
	}
	.mgnB-25 {
		margin-bottom: 0.25rem;
	}
	.mgnB-5 {
		margin-bottom: 0.5rem;
	}
	.mgnB1 {
		margin-bottom: 1rem;
	}
	.mgnB2 {
		margin-bottom: 2rem;
	}
	.mgnTB-5 {
		margin-top: 0.5rem;
		margin-bottom: 0.5rem;
	}
	.mgnTB1 {
		margin-top: 1rem;
		margin-bottom: 1rem;
	}

	/* RELLENOS */
	.pdn0 {
		padding: 0;
	}
	.pdn-25 {
		padding: 0.25rem;
	}
	.pdn-5 {
		padding: 0.5rem;
	}
	.pdn1 {
		padding: 1rem;
	}
	.pdn2 {
		padding: 2rem;
	}
	.pdnT1 {
		padding-top: 1rem;
	}
	.pdnT2 {
		padding-top: 2rem;
	}

	.pdnB-1 {
		padding-bottom: 0.1rem;
	}
	.pdnB1 {
		padding-bottom: 1rem;
	}
	.pdnB2 {
		padding-bottom: 2rem;
	}
	.pdnL1 {
		padding-left: 1rem;
	}
	.pdnR-25 {
		padding-right: 0.25rem;
	}
	.pdnR3 {
		padding-right: 3rem;
	}
	.pdnTB-25 {
		padding-top: 0.25rem;
		padding-bottom: 0.25rem;
	}
	.pdnTB-5 {
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
	}
	.pdnTB1 {
		padding-top: 1rem;
		padding-bottom: 1rem;
	}
	.pdnLR-25 {
		padding-left: 0.25rem;
		padding-right: 0.25rem;
	}
	.pdnLR-5 {
		padding-left: 0.5rem;
		padding-right: 0.5rem;
	}
	.pdnLR1 {
		padding-left: 1rem;
		padding-right: 1rem;
	}

	/* ANCHOS */
	.maxw100p {
		max-width: 100%;
	}
	.minw20p {
		min-width: 20%;
	}

	.wA {
		width: auto;
	}
	.w-75 {
		width: 0.75rem;
	}
	.w1 {
		width: 1rem;
	}
	.w1-5 {
		width: 1.5rem;
	}
	.w2 {
		width: 2rem;
	}
	.w2-5 {
		width: 2.5rem;
	}
	.w3 {
		width: 3rem;
	}
	.w4 {
		width: 4rem;
	}
	.w5 {
		width: 5rem;
	}
	.w10 {
		width: 10rem;
	}
	.w15 {
		width: 15rem;
	}
	.w20 {
		width: 20rem;
	}

	.w20p {
		width: 20%;
	}
	.w40p {
		width: 40%;
	}
	.w50p {
		width: 50%;
	}
	.w60p {
		width: 60%;
	}
	.w80p {
		width: 80%;
	}
	.w100p {
		width: 100%;
	}

	/* ALTOS */
	.ht1-5 {
		height: 1.5rem;
	}
	.ht2-5 {
		height: 2.5rem;
	}
	.ht100p {
		height: 100%;
	}

	.min-h-screen {
		min-height: 100dvh;
	}

	/* TRANSICIONES */

	/* BORDER RADIUS */
	.br-5 {
		border-radius: 0.5rem;
	}
	.br1 {
		border-radius: 1rem;
	}
	.br-full {
		border-radius: 100%;
	}

	/* BORDES */
	.bor0-3 {
		border: 1px solid var(--color0-3);
	}
	.borT0-3 {
		border-top: 1px solid var(--color0-3);
	}

	.borB0-2 {
		border-bottom: 1px solid var(--color0-2);
	}

	/* SHADOW */
	.bs0-3 {
		box-shadow: 0 0 0.25rem 0.05rem var(--color0-3);
	}

	/* POSICIONES */
	.top1-25 {
		top: 1.25rem;
	}
	.-left2 {
		left: -2rem;
	}
	.left1 {
		left: 1rem;
	}
	.-right1-5 {
		right: -1.5rem;
	}
	.-right2 {
		right: -2rem;
	}
	.right1 {
		right: 1rem;
	}

	/* OTROS */
	.imgBlack {
		filter: brightness(0) saturate(100%);
	}
	.imgWhite {
		filter: brightness(0%) saturate(100%) invert(100%);
	}
	.imgColor1-1 {
		filter: invert(81%) sepia(39%) saturate(6729%) hue-rotate(115deg) brightness(99%) contrast(102%);
	}
	.imgColor1-2 {
		filter: invert(49%) sepia(84%) saturate(6081%) hue-rotate(200deg) brightness(99%) contrast(101%);
	}
	.imgColor0-1 {
		filter: invert(32%) sepia(0%) saturate(0%) hue-rotate(159deg) brightness(96%) contrast(87%);
	}
	.imgColor0-2 {
		filter: invert(56%) sepia(0%) saturate(0%) hue-rotate(159deg) brightness(96%) contrast(88%);
	}
	.imgColor0-3 {
		filter: invert(56%) sepia(6%) saturate(0%) hue-rotate(143deg) brightness(96%) contrast(80%);
	}
	.imgColor0-4 {
		filter: invert(99%) sepia(1%) saturate(276%) hue-rotate(9deg) brightness(113%) contrast(95%);
	}
	.imgColor5-1 {
		filter: invert(71%) sepia(18%) saturate(6152%) hue-rotate(312deg) brightness(81%) contrast(102%);
	}
	.icono-interfaz[class*='imgColor'] {
		filter: none;
	}
	.icono-interfaz.imgColor1-1 {
		color: var(--color1-1);
	}
	.icono-interfaz.imgColor1-2 {
		color: var(--color1-2);
	}
	.icono-interfaz.imgColor0-1 {
		color: var(--color0-1);
	}
	.icono-interfaz.imgColor0-2,
	.icono-interfaz.imgColor0-3 {
		color: var(--color0-2);
	}
	.icono-interfaz.imgColor0-4 {
		color: var(--color0-4);
	}
	.icono-interfaz.imgColor5-1 {
		color: var(--color5-1);
	}
	.word-nowrap {
		white-space: nowrap;
	}
	.rltv {
		position: relative;
	}
	.ofH {
		overflow: hidden;
	}

	/* ABSOLUTOS */
	.abs {
		position: absolute;
	}
	.absTR1 {
		position: absolute;
		top: 1rem;
		right: 1rem;
	}
}