body, html {
    font-family: Arial, sans-serif;
    background-color: #f2f2f2; /* Color de fondo gris claro */
    color: #333; /* Color de texto gris oscuro */
    margin: 0;
    padding: 0;
    height: 100%;
}

body.dark-mode {
    background-color: #121212;
    color: #ffffff;
}



header {
    text-align: center;
    background-color: whitesmoke; /* Color de fondo azul */
    color: d4d4d4;
    padding: 20px;
    padding: 20px 0;
    margin-bottom: 20px;
    height: 100%;
    
}


button {
    padding: 10px;
    background-color: black; /* Color de fondo azul */
    color: white;
    border: 1px solid #ccc;
    border-radius: 10px;
    cursor: pointer;
}



/* Estilos para el modo oscuro */
.darkMode header{
    background-color: black; /* Fondo gris oscuro */
    

    
}

.darkMode header h1 {
    color: #fff; /* Texto blanco en modo oscuro */
}


#fechaDiv {
    font-size: 18px; /* Tamaño de fuente ajustado */
    text-align: center;
    padding: 10px; /* Mayor espacio interno */
    background-color: #1a1a1a; /* Fondo más oscuro para un aspecto elegante */
    color: #f2f2f2; /* Texto en color claro para contraste */
    border-radius: 8px; /* Bordes más redondeados */
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3); /* Sombra más suave y profunda */
    width: 120px; /* Ancho ligeramente mayor */
    margin: auto;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Tipografía más moderna */
    border: 1px solid #444; /* Borde sutil para definir el área */
}



 /*  estilos api */
 
  #obtenerDatos {
    margin-top: 15px;
    font-size: 2vh;
    background-color: green;
  }

 


/* Estilos para las cotizaciones de la API */
#resultadoApi {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px; /* Espacio entre las tarjetas */
    margin-top: 20px; /* Espaciado superior para el resultado */
    padding: 0 10px;
    
}

/* Tarjetas para cada cotización */
#resultadoApi > div {
    background-color: #fff; /* Fondo blanco para las tarjetas */
    border: 1px solid #ddd; /* Borde suave */
    border-radius: 8px; /* Bordes redondeados */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
    padding: 15px; /* Espaciado interno */
    max-width: 100%;
    text-align: center; /* Centrar texto */
    transition: transform 0.3s ease; /* Transición suave para el efecto hover */
    flex: 1 1 calc(50% - 15px); /* Dos tarjetas por fila en pantallas grandes */
    display: flex;
    flex-direction: column; /* Asegura que los elementos dentro se organicen en columna */
    justify-content: space-between; /* Para que la actualización quede abajo */
}

#resultadoApi > div:hover {
    transform: translateY(-5px); /* Efecto de elevación al pasar el mouse */
}

/* Encabezados y textos dentro de las tarjetas */
#resultadoApi h2 {
    margin: 0; /* Sin margen */
    font-size: 1.5em; /* Tamaño de fuente mayor para los encabezados */
    color: #2196F3; /* Color del texto azul */
}

#resultadoApi h3 {
    margin: 0; /* Margen superior e inferior */
    font-size: 1.2em; /* Tamaño de fuente para subtítulos */
    color: black; /* Color de texto oscuro */
    font-weight: bold;
}

#resultadoApi p {
    font-size: 1em; /* Tamaño de fuente para el texto */
    color: #222; /* Color de texto gris */
    margin: 5px 0; /* Espaciado entre párrafos */
    font-weight: bold;
}

/* Asegurando que el texto de actualización esté siempre al final */
#resultadoApi .actualizacion {
    margin-top: auto; /* Empuja la actualización al final */
    font-size: 0.9em; /* Tamaño de fuente más pequeño */
    color: #666; /* Color de texto gris más claro */
}

/* Mensaje de error */
#resultadoApi > .error {
    color: red; /* Color rojo para mensajes de error */
    font-weight: bold; /* Negrita para resaltar errores */
    text-align: center; /* Centrando el texto del error */
    margin-top: 20px; /* Margen superior */
}

/* Media query para pantallas de más de 1000px */
@media (min-width: 1000px) {
    #resultadoApi > div {
        flex: 1 1 calc(50% - 15px); /* Dos tarjetas por fila */
    }
}