:root {
    /* Fondo principal: (gris oscuro casi negro) */
    --color-bunker: #0d1117;
    /* Fondo muted */
    --color-bunker-muted: #151b23;
    /* Bordes */
    --color-mako: #3d444d;
    /* Texto principal: (blanco suave) */
    --color-zumthor: #e6edf3;
    /* Texto secundario: (gris claro para subtítulos y párrafos) */
    --color-gray-chateau-400: #b4bcc5;
    --color-gray-chateau-500: #9ba3b0;
    /* Color primario (acento): (azul, botones y enlaces) */
    --color-azure-radiance: #2f81f7;
    /* Color secundario: (verde naturaleza para resaltar vegetación en mapa) */
    --color-salem: #2eb94d;
    /* Resaltado / Hover: (amarillo dorado para eventos detectados) */
    --color-cream-can: #f0c75e;
    /* Errores / alertas: (rojo vivo, contrastante) */
    --color-sunset-orange: #f85149;
}

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
    position: relative;
    min-height: 100%;
}

body {
    background: var(--color-bunker);
    margin-bottom: 60px;
}

.w-max-1200 {
    max-width: 1200px;
    margin: 0 auto;
}

/*Mantener footer en la parte inferior*/
.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
    line-height: 59px;
}

.border-default {
    border: 1px solid var(--color-mako) !important;
}

.bg-bunker {
    background: var(--color-bunker) !important;
}

.bg-bunker-muted {
    background: var(--color-bunker-muted) !important;
}

.form-select {
    background: var(--color-bunker-muted) !important;
    color: var(--color-zumthor) !important;
    border: 1px solid var(--color-mako) !important;
}

.form-label {
    color: var(--color-zumthor) !important;
}

.bg-zumthor {
    background: var(--color-zumthor) !important;
}

.bg-azure-radiance {
    background: var(--color-azure-radiance) !important;
}

.bg-salem {
    background: var(--color-salem) !important;
}

.bg-cream-can {
    background: var(--color-cream-can) !important;
}

.bg-sunset-orange {
    background: var(--color-sunset-orange) !important;
}

.text-zumthor {
    color: var(--color-zumthor) !important;
}

.text-gray-chateau-400 {
    color: var(--color-gray-chateau-400) !important;
}

.text-gray-chateau {
    color: var(--color-gray-chateau-500) !important;
}

.text-azure-radiance {
    color: var(--color-azure-radiance) !important;
}

.text-salem {
    color: var(--color-salem) !important;
}

.text-cream-can {
    color: var(--color-cream-can) !important;
}

.text-sunset-orange {
    color: var(--color-sunset-orange) !important;
}

/* Boton solid */
.btn-azure-radiance {
    color: white;
    background-color: var(--color-azure-radiance);
}

    .btn-azure-radiance:hover {
        color: white;
        transform: scale(1.05)
    }


/* Estilos NavBar */

.nav-personalizado li a:hover {
    background: var(--cg-600);
    color: white !important;
}

/*Creacion de Especie Plantas*/

/* Para cargar imagen y visualizar*/

.form-file {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 20px;
    margin-bottom: 20px;
}

.form-file__action {
    width: 100%;
}

.form-file__h4 {
    position: absolute;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
    background-color: rgba(191, 195, 198, 0.2);
    border: 2px dashed rgb(191, 195, 198);
}

    .form-file__h4 h4 {
        color: rgb(150, 150, 150);
        text-align: center;
    }

.form-file__result {
    cursor: pointer;
    overflow: hidden;
    position: relative;
    width: 100%;
    max-width: 400px;
    height: 300px;
    border-radius: 8px;
    z-index: 10;
}

    .form-file__result::after {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .form-file__result img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 50;
    }

.form-file__result--active {
    background-color: rgba(97, 138, 201, 0.314);
    border: 3px dashed #618ac9;
}

/*Efecto de zoom a imagenes con el hover*/

.zoomable-image {
    position: relative;
    overflow: hidden;
}

    .zoomable-image img {
        transition: transform 0.3s ease;
        transform-origin: center center; /* Establece el punto de origen en el centro */
    }

    .zoomable-image:hover img {
        transform: scale(2.0); /* Ajusta el valor para controlar el nivel de zoom */
    }

/* Estilos del scroll dark */


* {
    scrollbar-width: auto; /* thin | auto */
    scrollbar-color: #aeb2b1 #2a2c2c; /* thumb | track */
}