@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");

:root {
    --body-font: "Poppins", sans-serif;
    --max-width-global: 1200px;
    --padding-tablet: 0 25px;
    --padding-mobil: 0 10px;
    --menu-logo-transition: all 0.5s ease-out;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    height: 100%;    
    background-color: rgb(202, 213, 236);
    font-family: var(--body-font);
    color: rgb(4, 43, 127);
}

button {
    font-family: var(--body-font);
    background-color: rgb(210, 224, 255);
    color: rgb(2, 17, 49);
    
    padding: 5px 10px;
    margin: 5px;
    border-radius: 5px;
    border: 1px solid rgb(105, 113, 131);
    cursor: pointer;
}
button:hover{
    background-color: rgb(186, 201, 234);
}

fieldset{
    border: none;
    margin: 10px 0;
}
input{
    border: none;
    border-radius: 5px;
    padding: 10px;
    margin: 5px; 
}
/****************************************/
.container {
    max-width: var(--max-width-global);
    margin: 0px auto;
    height: 100%;
}

@media all and (max-width: 1250px) and (min-width: 0px) {
    .container {
        padding: var(--padding-tablet);
        transition: var(--menu-logo-transition);
    }
}

@media all and (max-width: 600px) and (min-width: 0px) {
    .container {
        padding: var(--padding-mobil);
        transition: var(--menu-logo-transition);
    }
}

/********************************************* */
.logo{
    margin-top: 10px;
    text-align: center;
}

/********************************************* */
.login{
    margin-top: 100px;
    text-align: center;
}

.login p{
    font-size: 25px;
    font-weight: 800;
}

.login button{
    
}
/********************************************* */
.menu{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center; 
}
@media (max-width: 768px) {
    .menu {
        flex-direction: column; /* Cambia a vertical */
        align-items: center; /* Alinea elementos al ancho del contenedor */
    }
}
/**********************************************/
.info{
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center; 
}
.info p{
    margin: 0;
    margin-right: 5px;
}
.info button{
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid rgb(117, 117, 117);
    background-color: transparent;
    padding: 0;
    margin: 0 5px;
    text-decoration: solid;
}

.info button:hover{
    color: rgb(180, 180, 180);
}
/***********************************************/
.titulo{
    text-align: center;
}
/***********************************************/

.landings{
    text-align: center;
}

.landings-item{
    background-color: rgb(178, 191, 219);
    padding: 5px 10px;
    margin: 15px;
    border-radius: 5px;
    border: 1px solid rgb(105, 113, 131);
}

.landings-item .label{
    font-size: 13px;
}

.landing_de{
    margin-top: 10px;
}
/****************************************************/

.comerciales{
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center; 
    flex-wrap: wrap;
}

.boton-link{
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid rgb(112, 125, 156);
    background-color: transparent;
    padding: 0;
    margin: 0 0px;
    text-decoration: solid;
    font-size: 10px;
    color: rgb(95, 108, 138);
}

.boton-link-extra{
    font-size: 13px;
    margin-top: 10px;
    color: rgb(57, 66, 87);
    font-weight: 500;
}

.boton-link:hover{
    background-color: transparent;
    color: rgb(22, 30, 44);
}

@media all and (max-width: 600px) and (min-width: 0px) {
    .boton-lista{
        display: none;
    }
}

.submenu{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center; 
    flex-wrap: wrap;
    gap: 10px;
    margin: -20px 0 0 0;
}
/****************************************************/
table {
    width: 100%;
    background-color: rgb(178, 191, 219);
  }
table,th {
    border: 1px solid;
  }


  /***************************************** */
  .leads{
    display: flex;
    justify-content: center;
  }
  .form-container{
    width: 600px;
  }
  .form-lead{
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }