/* styles.css */
body {
    font-family: Arial, sans-serif;
    display: block;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #50dc96;
    margin: 0 auto;
}


.info-box {
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    
}

.info-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.info-item i {
    font-size: 24px;
    margin-right: 10px;
    color: #00796b;
}

.info-item span {
    font-size: 16px;
    color: #333;
}

.formestilo{
    background-color: #eee;
    margin: 0 auto;
    width: 400px;
    padding: 20px;
}


.inputestilo{
    border: solid 0;
    border-radius: 3px;
}

.inputestilo[type=text], .inputestilo[type=password]{
    padding: 10px;
    font-size: 18px;
    outline: none;
    width: 370px;
}
.inputestilo[type=submit]{
    background-color: #1E69E3;
    color: white;
    padding: 8px;
    border: none;
    width: 200px;
}
.center{
    text-align: center;
}

.opcion{
    padding: 5px 0;
}



.seleccionado{
    background-color: rgb(33, 90, 143);
    border-radius: 4px;
    color: white;
    padding: 10px;
}

.cerrar-sesion{
    float: right;
    margin: 5px;
    display: inline;
    color: #1E69E3;
    text-decoration: none;
    color: rgb(227, 109, 30);
    text-decoration: none;
    
}


/* styles.css */
body2 {
    font-family: Arial, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50vh;
    background-color: #50dc96;
    margin: 0 auto;
}


.weather-box {
    background-color: #e0f7fa;
    border: 2px solid #00796b;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    
    
}

.weather-box i {
    font-size: 50px;
    color: #00796b;
}

.weather-box h2 {
    margin: 10px 0 0;
    font-size: 24px;
    color: #004d40;
}

.button {
    border: none;
    padding: 10px ;
    font-size: 16px;
    border-radius: 10px;
    cursor: pointer;
    
}
.buttonn {
    border: none;
    padding: 10px ;
    font-size: 16px;
    border-radius: 10px;
    cursor: pointer;
}
.color:active {
    color: #1cb916;
	position:relative;
	top:1px;
}
.color:active  {
    display: block;
}

.color2:active {
    color: #794500;
	position:relative;
	top:1px;
}
.color2:active  {
    display: block;
}


.textoddd 
{
  font: bold 35px/1 arial;
  text-transform: uppercase;
  color: 'green';
  text-shadow: 0  2px 0 #00796b,
               0  4px 0 #00796b,
               0  6px 0 #00796b, 
               0  8px 0 #00796b, 
               0 10px 0 #00796b,
               0 12px 0 #00796b;
} 


.button2 {
    background-color: #00796b;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
}

.button2:hover {
    background-color: #004d40;
}

.button2:hover + .tooltip-oculto{
    display: block;
}


.tooltip-oculto {
    display: none;
    position: left;
    width: 200px; /* Ancho de la imagen */
    height: auto; /* Mantiene la proporci贸n de la imagen */
    transform: translateX(58%);

    background-color: #e95a22;
    color: rgb(5, 5, 5);
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 14px;
    white-space: nowrap;
    z-index: 1;

    
}



.espaciado {
    margin: 20px;
    
}

.salto-linea {
    content: "";
    display: block;
}