* {
    box-sizing: border-box;
}

/* === Contenedor General === */
.observacion-content {
    max-width: 1200px;
    margin: 10px auto;
    padding: 20px;
    font-family: Arial, sans-serif;
    background-color: #ffffff;
    border-radius: 0px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

/* === Título Principal === */
h1 {
    text-align: left;
    color: white;
    font-size: 1.9rem;
    margin-bottom: 20px;
    padding: 20px;
    background: linear-gradient(90deg, #54b435, #28a745);
    border-radius: 3px;
    margin-top: 0px;
    margin-bottom: 20px;
}

h3 {
    text-align: left;
    color: #54B435;
    font-size: 1.5rem;
    margin-bottom: 20px;
}

/* === Encabezado de la Observación === */
.observacion-header {
    display: flex;
    flex-direction: row;
    gap: 20px;
    /* Espaciado entre elementos */
    margin-bottom: 20px;
    align-items: stretch; /* Asegura que ambos hijos tengan la misma altura */
    /*align-items: flex-end;*/
    /* Alinea los elementos al borde inferior */
}

.observacion-imagen {
    flex: 1 1 60%;
    /* Ocupa la mitad del espacio disponible */
    max-width: 50%;
    /* Asegura que no se expanda más del 50% */
    display: flex; /* Flex para centrar contenido */
    justify-content: center;
    align-items: center;
}

.observacion-imagen img {
    width: 100%;
    max-height: 100%; /* Se adapta a la altura disponible */
    object-fit: cover; /* Corta la imagen para ajustarla si es necesario */
    border-radius: 3px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* === Tarjeta de Especie Relacionada === */
.ficha-especie-observacion {
    flex: 1 1 40%;
    /* Ocupa la otra mitad del espacio */
    max-width: 50%;
    /* Asegura que no se expanda más del 50% */
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 3px;
    border: 1px solid #e7e7e7;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    font-size: 1rem;
    line-height: 1.6;
    color: #333;
    display: flex; /* Flex para alinear verticalmente */
    flex-direction: column; /* Contenido en columna */
    justify-content: center; /* Centra el contenido verticalmente */
}

.ficha-especie-observacion ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ficha-especie-observacion li {
    margin-bottom: 10px;
}

.ficha-especie-observacion a {
    display: inline-block;
    padding: 10px 20px;
    background: #54B435;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    margin-top: 10px;
}

.ficha-especie-observacion a:hover {
    background: #28a745;
}

/* === Contenido de la Observación === */
.observacion-contenido {
    margin-top: 20px;
    font-size: 1rem;
    line-height: 1.6;
    color: #e7e7e7;
}

/* === Detalles de la Observación === */
.observacion-detalles {
    margin-top: 20px;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 1px;
    border: 1px solid #e7e7e7;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    font-size: 1rem;
    line-height: 1.6;
    color: #333;
}

/* === Galería === */
.observacion-galeria {
    margin-top: 20px;
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 1px;
    border: 1px solid #e7e7e7;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    font-size: 1rem;
    line-height: 1.6;
    color: #333;
}

.galeria-imagenes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

.galeria-imagenes a {
    display: block;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.galeria-imagenes a:hover {
    transform: scale(1.05);
}

.galeria-imagenes img {
    width: 100%;
    border-radius: 8px;
}

/* === Mapa Interactivo === */
.observacion-mapa {
    margin-top: 20px;
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 1px;
    border: 1px solid #e7e7e7;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    font-size: 1rem;
    line-height: 1.6;
    color: #333;
    min-height: 400px; /* Define una altura mínima mayor */
    height: 400px; /* Define una altura fija si prefieres */
}

#mapa-observacion {
    width: 100%;
    height: auto; /* Ajusta la altura del mapa */
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* === Botón Volver === */
.boton {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
}

.boton a {
    display: inline-block;
    padding: 10px 10px;
    background: #54B435;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.boton a:hover {
    background: #28a745;
}

/* === Responsivo === */

@media (max-width: 768px) {

    .observacion-content {
        margin-top: 20px;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important; /* Elimina todo el padding si es necesario */
        box-sizing: border-box !important;
        box-shadow: 0 0 0px rgba(0, 0, 0, 0.1);
    }

    h1 {
        text-align: center;
        color: white;
        font-size: 1.5rem;
        padding: 5px;
    }

    .observacion-header {
        flex-direction: column !important;
        gap: 10px !important;
        align-items: center !important;
        /*border: 2px dashed red;  Solo para depuración */
    }

    .observacion-imagen,
    .ficha-especie-observacion {
        flex: none;
        /* Los elementos se apilan */
        max-width: 100%;
        /* Garantiza que no se desborden */
        /* border: 2px dashed red; Solo para depuración */
    }

    .observacion-imagen img {
        width: 100%;
        /* Asegura que la imagen ocupe todo el ancho */
        height: auto;
        /* Mantiene la proporción de la imagen */
    }

    .galeria-imagenes {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    }

    .observacion-mapa {
        min-height: 400px; /* Define una altura mínima mayor */
        height: 500px; /* Define una altura fija si prefieres */
    }
    #mapa-observacion {
        height: auto;
    }
}