:root {

	/* Tipografias */
	--font-1: 'Archivo', sans-serif;
	--font-2: 'Poppins', sans-serif;

	/* Font size */
	--body-size: 14px;
	--h1-size: 1.5rem;
	--h2-size: 1.5rem;
	--h3-size: 1.5rem;
	--h4-size: 1.35rem;
	--h5-size: 1.15rem;
	--h6-size: 1rem;

	/* Colores */

	/* Black to white */
	--color-black: #000000;
	--color-gray-900: #242424;
	--color-gray-700: #8e8e8e;
	--color-gray-500: #cccccc;
	--color-gray-300: #e9e9e9;
	--color-gray-100: #f4f4f4;
	--color-gray-50: #f8f8f8;
	--color-white: #ffffff;

	/* Red */
	--color-red-500: #fb4141;

	/* Borders */
	--border-radius: 1rem;
	--border-color: var(--color-gray-300);

	/* Shadow */
	--box-shadow: 0 1rem 2rem 0 rgb(0 0 0 / 10%);

	/* Filters */
	--filter-black: invert(0);
	--filter-white: invert(1);
}

/* Colors */
.c-white { color: var(--color-white); }
.c-black { color: var(--color-black); }
.c-gray { color: var(--color-gray-700); }

/* Background colors */
.bg-gray { background-color: var(--color-gray-100); }
.bg-white { background-color: var(--color-white); }
.bg-black { background-color: var(--color-black); }

/* Filters */
.f-white { filter: var(--filter-white); }
.f-gray { filter: var(--filter-gray-700); }

/* Tipografía */
.ff-1 { font-family: var(--font-1) !important; }
.ff-2 { font-family: var(--font-2) !important; }

/* Fonts styles */
html { font-size: var(--body-size); font-family: var(--font-1); color: var(--color-black); line-height: 1.5; }
h1, .h1 { font-size: var(--h1-size); font-family: var(--font-2); font-weight: bold; line-height: 1.25; }
h2, .h2 { font-size: var(--h2-size); font-family: var(--font-2); font-weight: bold; line-height: 1.25; }
h3, .h3 { font-size: var(--h3-size); font-family: var(--font-2); font-weight: bold; line-height: 1.35; }
h4, .h4 { font-size: var(--h4-size); font-family: var(--font-2); font-weight: bold; font-size: 1.35rem; line-height: 1.4; }
h5, .h5 { font-size: var(--h5-size); font-family: var(--font-2); font-weight: bold; font-size: 1.15rem; line-height: 1.4; }
h6, .h6 { font-size: var(--h6-size); font-family: var(--font-2); font-weight: bold; font-size: 1rem; line-height: 1.5; }

space { width: 100%; height: 1rem; display: block; }
space[h="1"] { height: .5rem; }
space[h="2"] { height: 1rem; }
space[h="3"] { height: 1.5rem; }
space[h="4"] { height: 2rem; }
space[h="5"] { height: 2.5rem; }
space[h="6"] { height: 3rem; }
hr { background-color: var(--border-color); opacity: 1; }

/* Others */
.d-none { display: none !important; }
.ov-hidden { overflow: hidden; }
.border-0 { border: 0 !important; }
.tt-up { text-transform: uppercase; }
.lh-1 { line-height: 1; }
::placeholder { opacity: 0.75; font-weight: normal; }
::-webkit-scrollbar { display: none; }
.link { text-decoration: underline; color: inherit; }
.link:hover { cursor: pointer; text-decoration: underline; }
ol, ul, li { margin: 0; padding: 0; list-style: none; }
.bold { font-weight: bold; }
.circle { border-radius: 50%; }
.disabled { pointer-events: none; }
.disabled:hover { cursor: not-allowed; }
*:focus { outline: none; }

/* Font weights */
.fw-n { font-weight: normal !important; }
.fw-b { font-weight: bold !important; }

/* Position */
.pos-r { position: relative !important; }
.pos-a { position: absolute !important; }

/* Text aligns */
.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }

/* Opacity */
.op-10 { opacity: 1; }
.op-8 { opacity: .8; }
.op-7 { opacity: .7; }
.op-5 { opacity: .5; }

/* Widths */
.w-100 { width: 100% !important; }
.w-90 { width: 90% !important; }
.w-80 { width: 80% !important; }
.w-75 { width: 75% !important; }
.w-50 { width: 50% !important; }
.w-25 { width: 25% !important; }
.w-20 { width: 20% !important; }

/* Botones */
.btn { font-weight: bold; text-decoration: none; border-radius: calc(var(--border-radius) * .75); font-size: .85rem; padding: .85rem; display: inline-flex; align-items: center; justify-content: center; line-height: 1.5rem; user-select: none; position: relative; text-align: center; overflow: hidden; font-family: var(--font-2); gap: .5rem; transition: .3s ease all; box-shadow: 0 0 0 0; }
.btn i { font-size: 1rem; }
.btn:hover { cursor: pointer; }
.btn.sm { padding: .5rem; font-size: .85rem !important; }
.btn.btn-primary-black { background-color: var(--color-black); color: var(--color-white); text-transform: uppercase; letter-spacing: .2rem; }
.btn.btn-primary-black.sm { letter-spacing: .1rem; }
.btn.btn-primary-black:hover { background-color: var(--color-gray-900); box-shadow: 0 0 0 .5rem rgba(0,0,0,.2); }
.btn.btn-primary-white { background-color: var(--color-white); color: var(--color-black); text-transform: uppercase; letter-spacing: .2rem; }
.btn.btn-primary-white.sm { letter-spacing: .1rem; }
.btn.btn-primary-white:hover { background-color: var(--color-gray-100); box-shadow: 0 0 0 .5rem rgba(255,255,255,.4); }
.btn.btn-secondary { border: 1px solid var(--border-color); background-color: transparent; color: inherit; text-transform: none; letter-spacing: .1rem; }
.btn.btn-secondary:hover { background-color: var(--color-gray-100); }
.btn.btn-link { padding: 0; text-transform: none; letter-spacing: 0; font-size: 1rem; color: inherit; border-radius: 0; }
.btn.btn-link:hover { color: var(--color-gray-700); }
.btn.btn-option { justify-content: space-between; }
.btn.btn-option i { visibility: hidden; }
.btn.btn-option.active i { visibility: visible; }

/* Tabs */
.tabs { border: 1px solid var(--border-color); border-radius: var(--border-radius); display: flex; flex-direction: row; justify-content: space-between; text-align: center; overflow: hidden; }
.tabs li { border-right: 1px solid var(--border-color); padding: .5rem; display: flex; align-items: center; justify-content: center; gap: .5rem; font-family: var(--font-2); font-weight: bold; color: inherit; flex-grow: 1; }
.tabs li * { opacity: .4; }
.tabs li:last-child { border-right: 0; }
.tabs li.active * { opacity: 1; }
.tabs li:not(.active):hover { background-color: var(--color-gray-100); cursor: pointer; }
.dark .tabs { border-color: var(--border-color); }
.dark .tabs li { border-color: var(--border-color); }
.dark .tabs li:not(.active):hover { background-color: color(srgb 1 1 1 / 0.2); }

/* Menú navegación */
nav { min-height: 10rem; display: flex; align-items: center; justify-content: center; position: relative; }
nav ul { display: flex; flex-direction: row; background-color: var(--color-gray-50); border-radius: var(--border-radius); color: var(--color-black); }
nav ul li { display: flex; flex-direction: column; align-items: center; width: 25%; padding: .75rem 1rem; cursor: pointer; }
nav ul li i { font-size: 1.5rem; }
nav ul li span+i { font-size: .5rem; opacity: 0; }
nav ul li.active { font-weight: bold; }
nav ul li.active span+i { opacity: 1; }

/* Forms */
.feedback-error { font-weight: bold; margin: 0 0 .5rem 0; color: var(--color-red-500); line-height: 1.2; text-align: left; display: flex; align-items: center; justify-content: center; gap: .25rem; animation: fade-in 1s cubic-bezier(0.22, 1, 0.36, 1) both; }
.input-container+.feedback-error { margin: .5rem 0 0 0; }
.label { font-size: .9rem; margin-bottom: .5rem; }
.input-container.type-text { width: 100%; background-color: var(--color-gray-100); position: relative; overflow: hidden; text-align: left; min-height: 3rem; border: 1px solid var(--border-color); border-radius: calc(var(--border-radius) * 0.75); display: flex; padding: 0 .75rem; justify-content: start; gap: .75rem; }
.input-container.type-text input, .input-container.type-text textarea { color: inherit; border: 0; padding: 0; line-height: 3rem; display: block; background-color: transparent; border-radius: 0; font-size: 1.1rem; flex-grow: 1; }
.input-container.type-text:active { }
.input-container.type-text label { display: inline-flex; align-items: center; color: var(--color-gray-700); font-size: 1.25rem; }
.input-container.type-text label .icon { height: 1.75rem; }
.input-container.type-text textarea { line-height: 1.25; height: auto; padding-top: .75rem; }
.input-container.type-text textarea:focus { outline: none !important; }
.input-container.type-text::placeholder { opacity: 1 !important; color: var(--color-gray-500) !important; }
.input-container.type-text.error { border-color: var(--color-red-500); }
.input-container.type-select select { border: 0; height: 3rem; padding: 0 1.5rem 0 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/icons/chevron-down.svg'); background-size: 1rem; background-position: calc(100%) center; background-repeat: no-repeat; font-weight: bold; color: var(--color-black); background-color: transparent; }
.input-container.type-text.disabled { box-shadow: 0 0 0 1px #c9d8ff; }
.input-container.type-checkbox { position: relative; display: flex; align-items: start; justify-content: center; }
.input-container.type-checkbox label { position: relative; padding-left: .5rem; display: inline-flex; align-items: center; justify-content: center; text-align: left; }
.input-container.type-checkbox input { cursor: pointer; position: relative; top: .1em; transform: scale(1.2); }

/* Animaciones */
@keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } }
.fade-in { animation: fade-in 1s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes fade-out { 0% { opacity: 1; } 100% { opacity: 0; } }
.fade-out { animation: fade-out 1s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes fade-in-down { 0% { opacity: 0; transform: translateY(-2rem); } 100% { opacity: 1; transform: translateY(0); } }
.fade-in-down { animation: fade-in-down 1s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes fade-in-up { 0% { opacity: 0; transform: translateY(2rem); } 100% { opacity: 1; transform: translateY(0); } }
.fade-in-up { animation: fade-in-up 1s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes move-up-down { 0% { transform: translateY(2rem); } 60% { transform: translateY(-2rem); } 100% { transform: translateY(2rem); } }
.move-up-down { animation: fade-in-up 1s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes fade-in-zoom { 0% { opacity: 0; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1); } }
.fade-in-zoom { animation: fade-in-zoom 1s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes fade-pulse { 0% { opacity: 0.5; } 50% { opacity: 0.8; } 100% { opacity: 0.5; } }
.fade-pulse { animation: fade-pulse 1s ease-in-out infinite; }
@keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.rotate { animation: rotate 1s linear infinite; }

/* Popups */
.popup { z-index: 8; position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: none; visibility: hidden; align-items: center; padding: 1.5rem; }
.popup .filter { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: #00000099; animation: fade-in 1s cubic-bezier(0.22, 1, 0.36, 1) both; }
.popup.visible { display: flex; visibility: visible; opacity: 1; }
.popup .container { width: 100%; }
.popup .popup-box { background-color: var(--color-white); position: relative; padding: 1rem; width: 100%; text-align: center; border-radius: var(--border-radius); max-height: 100%; overflow: scroll; animation: fade-in 1s cubic-bezier(0.22, 1, 0.36, 1) both; }
.popup .popup-box ul.list-errors li:before { content: "-"; padding-right: .25rem; }
.popup .btn-close { position: absolute; right: .5rem; }

/* Activa solo el que coincide con el estado de la page */
[page_state='1'] [state]:not([state='1']) { display: none; }
[page_state='2'] [state]:not([state='2']) { display: none; }
[page_state='3'] [state]:not([state='3']) { display: none; }
[page_state='4'] [state]:not([state='4']) { display: none; }