/***** RE EDITADO EL 26-04-2025 *****/


/***** INPUT *****/

input[type="text"] {
  transition: border 0.3s ease-in-out;
  border-radius:15px;
  color:#4931cf;
}

input[type="text"]:focus {
    border-color: red;
    box-shadow: 0 3px 3px rgba(229, 103, 23, 0.075)inset, 0 0 8px rgba(255,144,0,1);
    outline: 0 none;
}

input[type="password"]{
  transition: border 0.3s ease-in-out;
  border-radius:15px;
  color:#4931cf;
} 

input[type="password"]:focus {
    border-color: red;
    box-shadow: 0 3px 3px rgba(229, 103, 23, 0.075)inset, 0 0 8px rgba(255,144,0,1);
    outline: 0 none;
}

input[type="number"] {
  transition: border 0.3s ease-in-out;
  border-radius:15px;
  color:#4931cf;
}

input[type="number"]:focus {
    border-color: red;
    box-shadow: 0 3px 3px rgba(229, 103, 23, 0.075)inset, 0 0 8px rgba(255,144,0,1);
    outline: 0 none;
}

input[type="tel"] {
  transition: border 0.3s ease-in-out;
  border-radius:15px;
  color:#4931cf;
}

input[type="tel"]:focus {
    border-color: red;
    box-shadow: 0 3px 3px rgba(229, 103, 23, 0.075)inset, 0 0 8px rgba(255,144,0,1);
    outline: 0 none;
}

input[type="email"] {
  transition: border 0.3s ease-in-out;
  border-radius:15px;
  color:#4931cf;
}

input[type="email"]:focus {
    border-color: red;
    box-shadow: 0 3px 3px rgba(229, 103, 23, 0.075)inset, 0 0 8px rgba(255,144,0,1);
    outline: 0 none;
}

input[type="currency"] {
  transition: border 0.3s ease-in-out;
  border-radius:15px;
  color:#4931cf;
}

input[type="currency"]:focus {
    border-color: red;
    box-shadow: 0 3px 3px rgba(229, 103, 23, 0.075)inset, 0 0 8px rgba(255,144,0,1);
    outline: 0 none;
}

input[type="date"] {
  transition: border 0.3s ease-in-out;
  border-radius:15px;
  color:#4931cf;
}

input[type="date"]:focus {
    border-color: red;
    box-shadow: 0 3px 3px rgba(229, 103, 23, 0.075)inset, 0 0 8px rgba(255,144,0,1);
    outline: 0 none;
}



/***** textarea *****/
 textarea {
  transition: border 0.3s ease-in-out;
  border-radius:15px;
  color:#4931cf;
}

    textarea:focus {
    border-color: red;
    box-shadow: 0 3px 3px rgba(229, 103, 23, 0.075)inset, 0 0 8px rgba(255,144,0,1);
    outline: 0 none;
}
   

/***** CHECK *****/

.content-input input,
.content-select select{
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}
 
.content-input input{
	visibility: hidden;
	position: absolute;
	right: 0;
}

.content-input{
	position: relative;
	margin-bottom: 30px;
	padding:5px 0 5px 60px; /* Damos un padding de 60px para posicionar 
        el elemento <i> en este espacio*/
	display: block;
}
 
/* Estas reglas se aplicarán a todos las elementos i 
después de cualquier input*/
.content-input input + i{
       background: #f0f0f0;
       border:2px solid rgba(0,0,0,0.2);
       position: absolute; 
       left: 0;
       top: 0;
}
 
/* Estas reglas se aplicarán a todos los i despues 
de un input de tipo checkbox*/
.content-input input[type=checkbox ] + i{
	width: 47px;
	height: 25px;
	border-radius: 15px;
}
/*
Creamos el círculo que aparece encima de los checkbox
con la etqieta before. Importante aunque no haya contenido
debemos poner definir este valor.
*/
.content-input input[type=checkbox] + i:before{
	content: ''; /* No hay contenido */
	width: 20px;
	height: 20px;
	background: #fff;
	border-radius: 50%;
	position: absolute;
	z-index: 1;
	left: 0px;
	top: 0px;
	-webkit-box-shadow: 3px 0 3px 0 rgba(0,0,0,0.2);
	box-shadow: 3px 0 3px 0 rgba(0,0,0,0.2);
}

.content-input input[type=checkbox]:checked + i:before{
	left: 22px;
	-webkit-box-shadow: -3px 0 3px 0 rgba(0,0,0,0.2);
	box-shadow: 3px 0 -3px 0 rgba(0,0,0,0.2);
}
 
.content-input input[type=checkbox]:checked + i{
 background: #b3cfff;
}
.content-input input[type=checkbox] + i:after{
	content: 'ON';
	position: absolute;
	font-size: 10px;
	color: rgba(255,255,255,0.6);
	top: 8px;
	left: 4px;
	opacity: 0 /* Ocultamos este elemento */;
	transition: all 0.25s ease 0.25s;
}
 
/* Cuando esté checkeado cambiamos la opacidad a 1 y lo mostramos */
.content-input input[type=checkbox]:checked + i:after{
 opacity: 1;
}

/***** SELECT *****/

.content-input input,
.content-select select{
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}


 



.content-select select:focus {
      border-color: red;
      box-shadow: 
        0 3px 3px rgba(229, 103, 23, 0.075) inset,
        0 0 8px rgba(255, 144, 0, 1);
      outline: 0 none;
      color: #4931cf;
    }

.tooltip-container {
  margin: 0 auto;
  display: inline-block;
}

/* EMPIEZA AQUÍ */

.tooltip-container {
  position: relative;
  cursor: pointer;
}

.tooltip-one {
  padding: 18px 32px;
  background: #fff;
  position: absolute;
  width: 220px;
  border-radius: 20px;
  text-align: center;
  filter: drop-shadow(0 3px 5px #ccc);
  line-height: 1.5;
  display: none;
  bottom: 40px;
  right: 50%;
  margin-right: -110px;
  color:black; 
}

.tooltip-one:after {
  content: "";
  position: absolute;
  bottom: -9px;
  left: 50%;
  margin-left: -9px;
  width: 18px;
  height: 18px;
  background: white;
  transform: rotate(45deg);
}

.tooltip-trigger:hover + .tooltip-one {
  display: block;
}

/************ Radio Button ******************/
.content-input input[type=radio] + i{
	height: 30px;
	width: 30px;
	border-radius: 100%;
	left: 15px;
}

.content-input input[type=radio] + i:before{
	content: '';
	display: block;
	height: 18px;
	width: 18px;
	background: red;
	border-radius: 100%;
	position: absolute;
	z-index: 1;
	top: 4px;
	left: 4px;
	background:#2AC176;
	transition: all 0.25s ease;
	transform: scale(0);
	opacity: 0; /* Lo ocultamos*/
}
.content-input:hover i{
	background: #B1E8CD;
}

.content-input input[type=radio]:checked + i:before{
	transform: scale(1);
	opacity: 1;
}