/*GENERAL*/
body{
    background-color: #f4f6fb;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

p{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: large;
}

span{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: larger;
}

button{
    background-color: #273953;
    color: white;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: large;
    font-weight: bold;
}
/*-----------------*/


:root {
    --color-green: #001fa8;
    --color-red: #4173fe;
    --color-button: #fdffff;
    --color-black: #000;
}
.switch-button {
    display: inline-block;
}
.switch-button .switch-button__checkbox {
    display: none;
}
.switch-button .switch-button__label {
    background-color: var(--color-red);
    width: 5rem;
    height: 3rem;
    border-radius: 3rem;
    display: inline-block;
    position: relative;
}
.switch-button .switch-button__label:before {
    transition: .2s;
    display: block;
    position: absolute;
    width: 3rem;
    height: 3rem;
    background-color: var(--color-button);
    content: '';
    border-radius: 50%;
    box-shadow: inset 0px 0px 0px 1px var(--color-black);
}
.switch-button .switch-button__checkbox:checked + .switch-button__label {
    background-color: var(--color-green);
}
.switch-button .switch-button__checkbox:checked + .switch-button__label:before {
    transform: translateX(2rem);
}

.etiqueta-no{
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select:none;
    user-select:none;
    width: 100%;
    height: 100%;
}


/*PLANES*/
.planes{
    width: 100%;
    display: grid;
    gap: 1.5em;
    justify-items: center;
    align-items: center;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(250px,1fr)
        );
    grid-template-rows: auto;
}

.box{
    border-radius: 5%;
    border-style: solid;
    border-color: #000;
    width: auto;
    padding: 0.5em;
    background-color: #e8edf6;
}

.box:hover{
    cursor:pointer;
}

.box-scolor{
    border-radius: 3%;
    border-style: solid;
    border-color: #273953;
    width: auto;
    padding: 0.5em;
}

.box-title{
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    font-size: 40px;
    font-weight: bold;
}
.box-body{
    width: 100%;
    margin: 0.5em 0;
    display: flex;
    justify-items:center ;
    flex-direction: column;
    padding: 0 0.5em;
}

.box-body-desc{
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    font-size: medium;
    margin: 0;
}
.center{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    width: 100%;

}

.box-body-precio{
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    font-size: 30px;
    font-weight:bold;
    font-style: italic;
    padding: 0.5em 0;
}


.box-span{
    border-radius: 5%;
    border-style: solid;
    border-color: #e8edf6;
    background-color: #2a4262;
    color: white;
    padding: 0.3em;
    text-align: center;
    width: 50%;
    justify-self: center;
    position: relative;
    left: 25%;
}

.box-selected{
    border-color: white;
    background-color: #2f4d75;
    
    color: white;
}
/*-------------------*/

.title_2{
    font-size: 30px;
    font-weight: bold;
}


#dnotas{
    height: 5em;
}

/*TABLA*/
table{
    width: 100%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: large;
}

th,td{
    border-bottom: 1px solid #365b8a;
}

th{
    background-color: #273953;
    color: white;
}

td{
    padding: 0.3em 0;
}

tbody{
    background-color: #cddaea;
    text-align: center;

}

tr:hover {
    background-color: #365b8a;
    color:white;
}

/*---------------------------*/

/*ALINEAMIENTOS*/
.izquierda{
    text-align: start;
}

.centrar{
    text-align: center;
}

.derecha{
    text-align: end;
}
/*---------------------------*/

/*TIPO LETRA*/
.t-bold{
font-weight: bold;
}

.t-italic{
font-style: italic;
}

.t-normal{
font-style: normal;
}
/*-------------------------*/
/*ANIMACION BOTON COPIAR*/
#copybanco {
    border: none;
    cursor: pointer;
    transition: transform 0.3s ease-in-out; /* Añadir una transición al cambio de escala */
}

#copybanco:hover {
    transform: scale(1.1); /* Escalar ligeramente al pasar el ratón sobre el botón */
}

#icono-copy {
    transition: opacity 0.3s ease-in-out; /* Añadir una transición a la opacidad */
}

#copybanco.clicked #icono-copy {
    opacity: 0; /* Hacer que el icono desaparezca al hacer clic */
}

#copybanco.clicked::after {
    content: '\2713'; /* Código Unicode para el símbolo de marca de verificación */
    font-family: 'Arial', sans-serif;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0; /* Comienza invisible */
    transition: opacity 0.3s ease-in-out; /* Añadir una transición a la opacidad */
}

#copybanco.clicked:hover::after {
    opacity: 1; /* Hacer que el símbolo de marca de verificación aparezca al pasar el ratón sobre el botón */
}

#copybanco2 {
    border: none;
    cursor: pointer;
    transition: transform 0.3s ease-in-out; /* Añadir una transición al cambio de escala */
}

#copybanco2:hover {
    transform: scale(1.1); /* Escalar ligeramente al pasar el ratón sobre el botón */
}

#icono-copy2 {
    transition: opacity 0.3s ease-in-out; /* Añadir una transición a la opacidad */
}

#copybanco2.clicked #icono-copy {
    opacity: 0; /* Hacer que el icono desaparezca al hacer clic */
}

#copybanco2.clicked::after {
    content: '\2713'; /* Código Unicode para el símbolo de marca de verificación */
    font-family: 'Arial', sans-serif;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0; /* Comienza invisible */
    transition: opacity 0.3s ease-in-out; /* Añadir una transición a la opacidad */
}

#copybanco2.clicked:hover::after {
    opacity: 1; /* Hacer que el símbolo de marca de verificación aparezca al pasar el ratón sobre el botón */
}

/*------------------------*/

/*APARICION DE BOTON CONTRATAR*/
#btnContratar {
    /* Otras propiedades de estilo aquí */
    padding: 0.5em;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 20px;
    font-weight: bold;
    /*opacity: 0;*/ /* Inicialmente transparente */
    transition: opacity 0.5s ease-in-out; /* Añadir transición de 0.5 segundos con efecto ease-in-out */
}

#btnContratar.visible {
    opacity: 1; /* Hacer visible con la transición */
}
/*-----------------------*/

#loading_anim{
    display: none;
}