/* Variables de colores SENA y ambientales */
:root {
    --sena-green: #00995D;
    --sena-dark: #003B29;
    --sena-light: #E8F5F0;
    --sena-accent: #66B366;
    --earth-brown: #8B4513;
    --nature-beige: #F5F5DC;
}

/* Tipografía */
body {
    font-family: 'Inter', sans-serif;
    background-color: #f8f9fa;
    color: #333;
}

/* Colores principales SENA */
.bg-sena {
    background-color: var(--sena-green) !important;
}

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

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

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

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

.border-sena {
    border-color: var(--sena-green) !important;
}

/* Navegación lateral */
.nav-link-hover {
    transition: all 0.3s ease;
}

.nav-link-hover:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px;
    margin: 0 10px;
}

.nav-link.active {
    background-color: var(--sena-green) !important;
    border-radius: 8px;
    margin: 0 10px;
}

.active-icon {
    color: #fff !important;
    opacity: 1 !important;
}

.active-text {
    color: #fff !important;
    font-weight: bold;
}

tr * {
    text-align: center !important;
}

.ui-autocomplete {
    max-height: 200px;
    /* Altura máxima del menú desplegable */
    overflow-y: auto;
    /* Activa scroll vertical si excede los 200px */
    overflow-x: hidden;
    /* Oculta cualquier desbordamiento horizontal */
    z-index: 1051 !important;
    /* Se asegura de que esté por encima de otros elementos, como modales */
    background-color: white;
    /* Fondo blanco del menú */
    border: 1px solid #ced4da;
    /* Borde gris claro, como los formularios de Bootstrap */
    border-radius: 0.25rem;
    /* Esquinas redondeadas para un aspecto moderno */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* Sombra sutil para levantar visualmente la lista */
}

/* Estilos para el botón de Excel */
.custom-excel-btn {
    background-color: var(--sena-green) !important;
    border-color: var(--sena-green) !important;
    color: white !important;
    margin-bottom: 1rem !important;
    margin-left: 12px !important;
    padding: 0.25rem 0.5rem !important;
    font-size: 0.875rem !important;
    border-radius: 0.2rem !important;
}

.custom-excel-btn:hover {
    background-color: var(--sena-dark) !important;
    border-color: var(--sena-dark) !important;
    opacity: 0.9;
}

.button-under-logo {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 12px;
    font-size: 14px;
    color: #fff;
    background-color: #6c757d;
    /* color gris inicial (btn-outline-secondary) */
    border: none;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.button-under-logo:hover {
    background-color: #5bc0de;
    /* azul claro */
    color: white;
    text-decoration: none;
}

.bodychangepassword {
    background-color: #f8f9fc;
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-custom {
    border-radius: 10px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.card-header-custom {
    background-color: #2e7d32;
    /* Verde oscuro */
    color: white;
    border-radius: 10px 10px 0 0;
    padding: 1rem 2rem;
    text-align: center;
}

.form-control {
    border-radius: 8px;
}
.change-btn {
    background-color: #2e7d32;
    border-color: #2e7d32;
    border-radius: 8px;
}

.change-btn:hover {
    background-color: #256429;
    border-color: #256429;
}

.text-gray-900 {
    color: #256429 !important;
}

.sena-logo {
    width: 100%;
    padding: 2rem;
}

.form-section {
    padding: 2rem;
}

@media (max-width: 768px) {
    .sena-logo {
        display: none;
    }
}

.help-container { position: fixed; bottom: 2%; right: 1%; }
.help-message { 
    position: absolute; 
    bottom: 115%; 
    right: 0; 
    width: 250px; 
    background: white; 
    color: var(--sena-green); 
    padding: 10px; 
    border-radius: 5px; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    opacity: 0; 
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s; 
}
.help-message a {
    color: #80caff;
    text-decoration: underline;
}


.help-container:hover .help-message { 
    opacity: 1; 
    visibility: visible;
}

dialog::backdrop {
    background: rgba(0, 0, 0, 0.7);
}

/* Sidebar sin scroll - ocupa toda la altura disponible */
.sidenav {
    height: 100vh !important;
    margin: 2px !important;
    top: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.sidenav .sidenav-header {
    flex-shrink: 0;
}
.sidenav .navbar-collapse {
    flex: 1 1 auto !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    background: transparent !important;
}

.sidenav .navbar-nav {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
}

/* Estilos opcionales para el scrollbar del nav si es necesario */
.sidenav .navbar-nav::-webkit-scrollbar {
    width: 5px;
}

.sidenav .navbar-nav::-webkit-scrollbar-track {
    background: transparent;
}

.sidenav .navbar-nav::-webkit-scrollbar-thumb {
    background: rgba(46, 125, 50, 0.3);
    border-radius: 10px;
}

.sidenav .navbar-nav::-webkit-scrollbar-thumb:hover {
    background: rgba(46, 125, 50, 0.5);
}

.nav-customized {
    border-radius: 0px 0px 20px 20px; 
}