/* Font Rajdhani & Rubik */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
/* Font Montserrat & Roboto */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
/* Font Poppins & Lato */
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
/* Font Archivo & Inter */
@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

:root {
   --primary-font: 'Lato', sans-serif;
	--secondary-font: 'Rubik', sans-serif;
	--back-color: #DFDFDF;
	--font-color: #191414;
	--error-color: #FF3030;
   --primary-color: #EB2553;
	--font-size: 14px;
	/* Config form-control */
	--input-back: #FFF;
   --input-before: var(--primary-color);
   --input-color: #323232;
	--input-height: 45px;
	--input-radio: 10px;
   --input-size: 18px;
	--input-weight: 500;
	/* Config Button */
	--btn-height: 45px;
	--btn-size: 18px;
	--btn-weight: 600;
	--btn-radio: 10px;
	--btn-color: white;
	--btn-back: linear-gradient(to right bottom, #13D175 20%, #0FB43D);
	--btn-font: var(--primary-font);
}

/* ============================================
               Globales
   ============================================ */
html {height: 100%;}
html>body,
html>body>#mainContent {
   min-height: 100%;
}
*, *::before, *::after {
   box-sizing: border-box;
   color: inherit;
}
body {
   text-align: right;
   display: flex;
   flex-direction: column;
   position:relative;
   width: 100%;
   font-family: var(--primary-font);
   font-weight: 400;
   color: var(--font-color);
}
#mainContent {
   display: flex;
   flex-direction: column;
   flex:1;
   background-image: url(../img/background.png);
   background-color: var(--back-color);
   background-size: cover;
   background-position: center top;
   width: 100%;
   max-width: 450px;
   margin: 0 auto;
   .page-content {
      flex: 1;
      width: 100%;
      padding: 0 15px;
   }
}
img {
   max-width: 100%;
   height: auto;
}
a {
   text-decoration: underline;
   color: var(--primary-color);
}
b {font-weight: 600;}
input[type="number"],
input[type="number"]:active,
input[type="number"]:focus,
input[type="number"]:hover {
   border: none;
   border-radius: 0;
   outline: none;
   box-shadow: none;
}

/* ============================================
               Utilidades
   ============================================ */
.text-center {text-align: center;}
.h-100 {height: 100%;}
.h-250 {height: 250px;}
.no-wrap {flex-wrap: nowrap;}
.d-flex {display: flex !important;}
.flex-1 {flex: 1;}
.mb-1 {margin-bottom: 10px !important;}
.mb-2 {margin-bottom: 20px !important;}
.mb-3 {margin-bottom: 30px !important;}
.mb-4 {margin-bottom: 40px !important;}
.mb-5 {margin-bottom: 50px !important;}
.mb-6 {margin-bottom: 60px !important;}

/* ============================================
               Main
=============================================== */
#header {
   margin: 20px auto 0;
   .brand {
      max-width: 100%;
   }
}
#main {
   background-color: #fff;
   border-radius: 10px;
   padding: 20px 30px;
   margin-bottom: 20px;
   .title {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 20px;
      color: #000;
   }
   .form-inputs {
      display: flex;
      align-items: center;
      gap: 15px;
      margin-bottom: 10px;
      overflow: hidden;
      border: solid 1px var(--primary-color);
      font-size: var(--input-size);
      height: var(--input-height);
      background: var(--input-back);
      border-radius: var(--input-radio);
      font-weight: var(--input-weight);
      .before-element {
         padding: 10px;
         display: flex;
         align-items: center;
         justify-content: center;
         height: 100%;
         color: var(--btn-color);
         background: var(--primary-color);
      }
      .form-control {
         line-height: 1;
         font-size: var(--input-size);
         color: var(--input-color);
         font-weight: inherit;
         background-color: transparent;
         height: 100%;
         border: none;
      }
   }
   .btn {
      display: flex;
      justify-content: center;
      align-items: center;
      text-transform: uppercase;
      width: 100%;
      text-decoration: none;
      font-size: var(--btn-size);
      font-weight: var(--btn-weight);
      min-height: var(--btn-height);
      border-radius: var(--btn-radio);
      background: var(--btn-back);
      font-family: var(--btn-font);
      margin: 30px auto;
      color: white;
      &:focus {color: #fff;}
      &:hover {color: #fff;}
   }
   .text {
      font-size: 13px;
   }
   .info-label {
      font-size: 13px;
      font-weight: bold;
      & p {margin: 0;}
   }
   .info-reglas {
      font-size: 10px;
      margin-bottom: 20px;
   }
   .custom__checkbox {
      display: flex;
      align-items: center;
      gap: 10px;
      color: #000;
      font-size: 12px;
      font-weight: bold;
      .checkbox {
         position: relative;
         width: 20px;
         height: 20px;
         flex-shrink: 0;
         color: #fff;
         #tyc {
            position: absolute;
            left: 0;
            top: 0;
            z-index: 1;
            width: 100%;
            height: 100%;
            cursor: pointer;
            &:checked {opacity: 0;}
         }
         .custom-checkbox {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%; 
            height: 100%; 
            cursor: pointer;
            font-size: 13px;
            background-color: var(--primary-color);
            border: solid 1px rgb(0 0 0 / .3);
            border-radius: 3px;
         }
      }
   }
}
.legales {
   color: #fff;
   text-align: center;
   font-size: 12px;
   padding: 0 30px;
   margin-bottom: 20px;
}
#footer {
   .featured {
      width: 100%;
   }
}

/* ============================================
               Internas
   ============================================ */
.message {
   margin: 0 auto;
   font-weight: 600;
   font-size: 17px;
   margin-top: 30px;
}
body.request-pin {
   #form-pin .form-inputs {
      height: var(--input-height);
      border: none;
      border-radius: none;
      max-width: 200px;
      margin-left: auto;
      margin-right: auto;
      .number {
         border: solid 1px var(--primary-color);
         border-radius: var(--input-radio);
         text-align: center;
         font-size: 24px;
         width: 100%;
         height: 100%;
      }
   }
}

/* ============================================
               Error
=============================================== */
body.signup .campo_error {
   .form-inputs {
      position: relative;
      &::after {
         content: '!';
         position: absolute;
         display: flex;
         justify-content: center;
         align-items: center;
         color: #fff;
         right: 10px;
         top: calc(50% - 8px);
         width: 16px;
         height: 16px;
         font-size: 13px;
         border-radius: 50%;
         background-color: var(--primary-color);
      }
   }
}
.error-content {
   text-align: center;
   color: var(--error-color);
   font-weight: 400;
   margin-bottom: 15px;
   font-size: 12px;
   &>* {
      display: block;
      margin: 0;
   }
   &.error-msg, #error__message {
      margin: 0;
      font-weight: 400;
      font-size: 12px;
   }
}

/* 	================================
       Terminos y condiciones
==================================== */
#modal.gradient {
	position: fixed;
	left: 0;
	top: 0;
	display: none;
	justify-content: center;
	align-items: center;
	background-color: rgb(0 0 0 / .5);
	width: 100%;
	height: 100%;
	overflow: hidden;
	backdrop-filter: blur(2px);
	.card {
		background-color: white;
		color: black;
		width: calc(100% - 80px);
		max-width: 400px;
		box-shadow:0 0 10px rgb(0 0 0 / .3);
		border-radius: 15px;
		font-size: 14px;
		padding: 10px 20px 30px;
      .legales {color: #000;}
		.close-container {
			display: flex;
			justify-content: end;
			.close {
				font-size:40px;
				background: none;
				border: none;
				display: flex;
				justify-content: center;
				align-items: center;
				line-height: 1;
				width: 30px;
				height: 30px;
			}
		}
	}
}