/* Importar la fuente Inter desde Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');

/* Estilos para la fuente Inter y el diseño general del bloque de hora y clima */
.container-clima {
    font-family: 'Inter', sans-serif; /* Aplicar la fuente Inter */
    background-color: #ffffff; /* Fondo blanco para la tarjeta */
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* Sombra suave y profesional */
    padding: 15px 20px; /* Padding interno adecuado */
    max-width: 100%; /* Ocupa todo el ancho disponible dentro de su padre */
    height: auto; /* Altura automática, no fija para que el contenido quepa */
    overflow: hidden; /* Oculta el contenido que se desborde */
    display: flex; /* Usa flexbox para el diseño interno */
    flex-direction: column; /* Apila elementos verticalmente en la tarjeta */
    align-items: center; /* Centra horizontalmente el contenido */
    justify-content: center;
    position: relative;
    margin-bottom: 20px; /* Margen inferior para separarlo de otros elementos */
    text-align: center; /* Centrar todo el texto por defecto */
}

/* Contenedor flex para hora/ubicación y clima-info */
.flex-container-clima {
    display: flex;
    justify-content: space-between; /* Distribuye el espacio entre los dos elementos */
    align-items: center; /* Alinea verticalmente al centro */
    width: 100%; /* Ocupa todo el ancho del .container-clima */
    flex-wrap: wrap; /* Permite que los elementos se envuelvan en pantallas pequeñas */
}

.flex-item-hora-ubicacion,
.flex-item-clima-info {
    flex: 1; /* Permite que ambos elementos crezcan y se encojan */
    min-width: 120px; /* Ancho mínimo para cada columna */
    padding: 5px; /* Pequeño padding interno */
    box-sizing: border-box;
}

.flex-item-hora-ubicacion {
    text-align: left; /* Alinea la hora y ubicación a la izquierda */
}

.flex-item-clima-info {
    text-align: right; /* Alinea la información del clima a la derecha */
}


/* Estilos para los elementos dentro del contenedor de clima para que quepan */
#hora-actual {
    font-size: 1.8em; /* Tamaño de fuente ajustado para la hora */
    font-weight: 700; /* Más audaz */
    color: #2c3e50; /* Azul oscuro profesional */
    line-height: 1.2;
    margin-bottom: 5px;
}
#ubicacion-actual {
    font-size: 0.9em; /* Tamaño de fuente ajustado para la ubicación */
    color: #6c757d; /* Gris medio profesional */
    line-height: 1.2;
    margin-bottom: 15px; /* Más espacio debajo de la ubicación */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex; /* Para alinear el icono con el texto */
    align-items: center;
    /* justify-content: center;  No centrar en flex-item, ya que queremos alineación a la izquierda */
    gap: 5px; /* Espacio entre el icono y el texto */
}
#ubicacion-actual i {
    color: #2ecc71; /* Icono verde vibrante */
}
#clima-info {
    font-size: 1.6em; /* Tamaño de fuente ajustado para la info del clima */
    line-height: 1.2;
    display: flex;
    flex-direction: column; /* Apila icono y temperatura */
    align-items: flex-end; /* Alinea el icono y la temperatura a la derecha */
    justify-content: center;
    /* text-align: center; No centrar en flex-item, ya que queremos alineación a la derecha */
    min-width: 100px;
    color: #2c3e50; /* Color de texto para la temperatura */
}
#clima-info img {
    vertical-align: middle;
    margin-bottom: 5px; /* Margen más pequeño */
    width: 50px; /* Tamaño del icono */
    height: 50px; /* Tamaño del icono */
    /* Filtros base para todos los iconos */
    filter: contrast(1.5) saturate(1.3);
    /* Fondo circular para mejor contraste */
    background: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    padding: 3px;
    /* Sombra para mejorar la visibilidad */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Estilos específicos para diferentes tipos de iconos del clima */
/* Iconos de nubes - hacer MUCHO más oscuros */
#clima-info img[src*="02"], /* Few clouds */
#clima-info img[src*="03"], /* Scattered clouds */
#clima-info img[src*="04"] { /* Broken clouds */
    filter: brightness(0.2) contrast(2) saturate(0.5) invert(0.3);
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid rgba(0, 0, 0, 0.3);
}

/* Alternativa más drástica para nubes - aplicar inversión parcial */
#clima-info img[src*="02n"], /* Few clouds night */
#clima-info img[src*="03n"], /* Scattered clouds night */
#clima-info img[src*="04n"] { /* Broken clouds night */
    filter: brightness(0.1) contrast(3) invert(0.8);
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid rgba(0, 0, 0, 0.4);
}

/* Iconos de lluvia - mantener más naturales */
#clima-info img[src*="09"], /* Shower rain */
#clima-info img[src*="10"] { /* Rain */
    filter: brightness(0.8) contrast(1.2) saturate(1.1);
    background: rgba(0, 0, 0, 0.08);
}

/* Iconos de sol - mantener brillantes */
#clima-info img[src*="01"] { /* Clear sky */
    filter: brightness(1.1) contrast(1.1) saturate(1.3);
    background: rgba(255, 255, 0, 0.05);
}

/* El mensaje de error se posiciona absolutamente para no afectar la altura del contenedor */
.mensaje-error {
    color: #dc3545; /* Rojo de Bootstrap para errores */
    font-weight: 600;
    font-size: 0.75em;
    position: absolute;
    bottom: 5px;
    left: 0;
    right: 0;
    text-align: center;
    padding: 0 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 5px;
    margin: 0 10px;
}

/* Asegura que el body no tenga estilos de flexbox que puedan interferir con tu diseño principal */
body {
    display: block;
    min-height: auto;
    align-items: initial;
    justify-content: initial;
    padding: 0;
}


@media (max-width: 480px) {
    .flex-container-clima {
        flex-direction: column; /* Apilar elementos en pantallas pequeñas */
        align-items: center;
    }
    .flex-item-hora-ubicacion,
    .flex-item-clima-info {
        text-align: center; /* Centrar texto en pantallas pequeñas */
        width: 100%; /* Ocupar todo el ancho */
        padding: 5px 0;
    }
    #hora-actual {
        font-size: 1.5em;
    }
    #clima-info {
        font-size: 1.4em;
        align-items: center; /* Centrar icono y temperatura */
    }
    #clima-info img {
        width: 40px;
        height: 40px;
        /* Mantener los mismos filtros base en responsive */
        filter: contrast(1.5) saturate(1.3);
        background: rgba(0, 0, 0, 0.2);
        border-radius: 50%;
        padding: 3px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    }
}