/* ========================================================================================= */
/* CALYPER.CSS. Estilo de colores y comportamientos del sistem,a Calyper                     */
/* Juan Carlos y Juan Andrés Jerez                                                           */
/* ========================================================================================= */
.mb-5, .my-5 {
	margin-bottom: 0rem !important;
	margin-top: 1rem !important;
}
.row {
    --bs-gutter-x: 0 !important; /* o el valor que prefieras */
}

.content { /* Solo habilita el contenido activo */
	display: none;
	padding: 20px;
	border: 2px solid #ccc;
	border-radius: 20px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	transition: display 0.5s ease-in-out; /* Transición más intensa */
}

.custom-container { /* Solo habilita el contenido activo */
	border-radius: 15px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	padding: 10px;
	transition: display 0.5s ease-in-out; /* Transición más intensa */
}

.content.active {
    display: block;
}

/* Mejoarmiento del estilo del NAVBAR... */
	/* Estilos básicos del navbar */
	.navbar-dark {
		background-color: #004600;
	}

	/* Color del texto normal */
	.navbar-dark .navbar-nav .nav-link {
		color: rgba(255, 255, 255, 0.85) !important;  /* Blanco con ligera transparencia */
	}

	/* Color al pasar el mouse */
	.navbar-dark .navbar-nav .nav-link:hover {
		color: #ffd700 !important;  /* Dorado brillante */
	}

	/* Estilo para el item activo */
	.navbar-dark .navbar-nav .nav-item.active .nav-link,
	.navbar-dark .navbar-nav .nav-link.active {
		color: #ffd700 !important;
	}

	/* Estilos para el dropdown */
	.navbar-dark .dropdown-menu {
		background-color: #004600;
	}

	.navbar-dark .dropdown-item {
		color: rgba(255, 255, 255, 0.85);
	}

	.navbar-dark .dropdown-item:hover {
		background-color: #003500;
		color: #ffd700;
	}



/* Formato del pié de la página*/
	.footer-custom {
		position: fixed;
		bottom: 0;
		width: 100%;
		padding: 2px 0; /* Reduce el padding */
		font-size: 0.8rem; /* Reduce el tamaño de la fuente */
		height: 30px; /* Ajusta la altura del footer */
		line-height: 5px; /* Alinea el texto verticalmente */
		background-color: #004600;
	}

/* Colores de los encabezados h1, h2, h3, h4, h5 */
	.h1, .h2, .h3, .h4, .h5 {color: green;}

/* Colores de los Spinners Opción 1 - Verde Suave */
    .spinner {
        border: 4px solid #e8f5e9;
        border-top: 4px solid #4CAF50;
    }
    .loading-spinner {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1000;
    }
    .overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 999;
    }

/* Estilo para todos los botones de SweetAlert ****************************************************/
    .swal-button {
        background-color: #006400 !important; /* Verde oscuro */
        color: white !important;
    }
    .swal-button:hover {
        background-color: #005000 !important; /* Un tono más oscuro para el hover */
    }
    /* Si también quieres personalizar el botón cuando está activo/presionado */
    .swal-button:active {
        background-color: #004000 !important;
    }

/* Estilos para el hover de los botones success, warning y secondary ****************************************************/
    /* Transición suave para todos los cambios */
    .btn-success.hover-effect,
    .btn-warning.hover-effect,
    .btn-secondary.hover-effect {
        transition: all 0.3s ease;
    }
    /* Estilo cuando el ratón pasa sobre el botón success */
    .btn-success.hover-effect:hover {
        background-color: #1e7e34; /* Verde más oscuro */
        color: #ffeb3b;            /* Texto amarillo brillante */
        border-color: #1e7e34;     /* Borde amarillo brillante */
        transform: scale(1.025);     /* Aumentar el tamaño ligeramente */
        box-shadow: 5px 5px 5px rgba(0, 255, 0, 0.2); /* Sombra más intensa */
    }
    /* Estilo cuando el botón success es presionado */
    .btn-success.hover-effect:active {
        transform: scale(.95);    /* Reducir ligeramente el tamaño */
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); /* Sombra más sutil */
    }
    /* Estilo cuando el ratón pasa sobre el botón btn-warning */
    .btn-warning.hover-effect:hover {
        background-color: #ffcc00; /* Amarillo más claro */
        color: #333;              /* Texto gris oscuro */
        border-color: #ffcc00;    /* Borde amarillo claro */
        transform: scale(1.025);    /* Aumentar el tamaño ligeramente */
        box-shadow: 5px 5px 5px rgba(255, 204, 0, 0.4); /* Sombra amarilla intensa */
    }
    /* Estilo cuando el botón btn-warning es presionado */
    .btn-warning.hover-effect:active {
        transform: scale(.95);    /* Reducir ligeramente el tamaño */
        box-shadow: 0 5px 10px rgba(255, 204, 0, 0.3); /* Sombra amarilla sutil */
    }
	
    /* Estilo cuando el ratón pasa sobre el botón btn-secondary  */
    .btn-secondary.hover-effect:hover {
        background-color: #6c757d; /* Gris oscuro */
        color: #ffeb3b;           /* Texto blanco */
        border-color: #6c757d;    /* Borde gris oscuro */
        transform: scale(1.025);    /* Aumentar el tamaño ligeramente */
        box-shadow: 5px 5px 5px rgba(213, 218, 223, 0.281); /* Sombra gris intensa */
    }
    /* Estilo cuando el botón btn-secondary es presionado */
    .btn-secondary.hover-effect:active {
        transform: scale(.95);    /* Reducir ligeramente el tamaño */
        box-shadow: 0 5px 10px rgba(108, 117, 125, 0.3); /* Sombra gris sutil */
    }

/* Estilo de los botones que permite ejecutar las peticiones al servidor........... */
    /* Estilo cuando el botón está habilitado */
    .btn.custom-btn {
        background-color: #ddaf32 !important;  /* Naranjo */
        color: darkgreen !important;           /* Verde */
        border: 2px solid #28a745 !important;  /* Borde verde */
        transition: background-color 0.3s, border-color 0.3s;  /* Transición suave */
    }

    .btn.custom-btn:disabled {
        background-color: transparent !important;  /* Fondo transparente */
        color: #6c757d !important;                /* Color de texto gris */
        border: 2px solid #6c757d !important;     /* Borde gris */
        cursor: not-allowed;                      /* Cambiar el cursor cuando está deshabilitado */
    }

    .btn.custom-btn:hover {
        background-color: darkgreen !important;  /* Verde oscuro */
        color: #ddaf32 !important;              /* Color de Naranjo */
        border-color: #218838 !important;       /* Borde verde oscuro */
    }

    .btn.custom-btn:disabled:hover {
        background-color: transparent !important;  /* Mantener fondo transparente cuando está deshabilitado */
        border-color: #6c757d !important;         /* Mantener el borde gris */
        cursor: not-allowed;                      /* Mantener cursor no permitido */
    }


/* Estilos para el acordeón compacto ************************************************/
.accordion-button {
    background-color: darkgreen;
    border: 2px solid darkgreen;
    color: white;
    padding: 0.35rem 1.25rem;  /* Reducido de 0.5rem a 0.35rem */
    font-size: 0.9rem;
    min-height: 35px;          /* Agregar altura mínima */
    height: 35px;              /* Altura fija reducida */
}

.accordion-button:not(.collapsed) {
    background-color: darkgreen;
    border: 2px solid darkgreen;
    color: white;
}

.accordion-button:hover {
    background-color: #b7950b;
    border: 2px solid darkgreen;
    color: white;
}

.accordion-button:not(.collapsed):active {
    background-color: darkgreen;
    border: 2px solid darkgreen;
    color: rgb(1, 116, 17);
}

.accordion-button:not(.collapsed):focus {
    background-color: darkgreen;
    border: 2px solid darkgreen;
    color: white;
}

.accordion-body {
    background-color: #e8f5e9;
    color: darkolivegreen;
    padding: 0.75rem;
}

.accordion-body .row {
    margin: 0;
}

.accordion-body .d-flex {
    margin: 0;
}

.accordion-body .btn,
.accordion-body .custom-file-label {
    padding: 0.25rem 0.75rem;
    height: 32px;
    line-height: 24px;
}


/* Estilos para el logo de Openfields ****************************************************/
.logo-hover {
    transition: transform 0.3s ease, filter 0.3s ease;
}

.logo-hover:hover {
    transform: scale(1.05);
    border-color: #6c757d;    /* Borde gris oscuro */
    background: #002500; /* Usando el mismo verde del navbar */
    box-shadow: 5px 5px 5px rgba(213, 218, 223, 0.281); /* Sombra gris intensa */
    border-radius: 5px;
    cursor: pointer;
}

/* Deshabilitar el tooltip nativo para los logos */
.logo-hover[title] {
    title: none;
}

img.logo-hover {
    pointer-events: auto;
}

/* Estilos para el tooltip personalizado del logo */
.logo-container {
    display: inline-block;
}

.logo-tooltip {
    visibility: hidden;
    position: absolute;
    bottom: 125%;
    right: 0;
    background-color: rgb(255, 255, 255);
    color: rgb(1, 116, 17);
    font-weight: bold;
    font-size: 14px;
    padding: 5px 5px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 1000;
    border: 2px solid rgb(1, 116, 17);
}

.logo-container:hover .logo-tooltip {
    visibility: visible;
    opacity: 1;
}



/**20240622171844*/