@font-face {
    font-family: "Nutmeg Black";
    src: url("../Nutmeg-Black.otf");
}
@font-face {
    font-family: "Nutmeg Regular";
    src: url("../Nutmeg-Regular.otf");
}
p, a {
    font-family: "Nutmeg Regular"; 
}
h1, h2, h3, h4, h5, h6 {
    font-family: "Nutmeg Regular"; 
}

/* Layout principal */
body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.encabezado {
    color: #414f56 !important;
}

/* .indicaciones {
    color: #414f56 !important;
    font-size: 1rem;
    font-family: "Nutmeg Regular"; 
    margin-top: -10px;
    margin-bottom: 20px;
} */
.indicaciones {
    width: 100%;
    max-width: none;
    margin: 0 0 1.5rem 0;
    font-size: 1rem;
    border-radius: 12px;
    padding: 1.2rem 1rem;
    text-align: left;
    color: #414f56 !important;
}
.abc-list {
    list-style: none; /* Quita los números */
    padding-left: 0;
    margin-bottom: 0.7em;
}
.abc-list li {
    margin-bottom: 0.4em;
    line-height: 1.4;
    position: relative;
    padding-left: 1.2em;
}
.abc-list li::before {
    position: absolute;
    left: 0;
    font-weight: bold;
    font-size: 1.2em;
    line-height: 1;
    top: 0;
}
.abc-list strong {
    color: #415057;
}
.indicaciones p {
    margin-bottom: 0.6em;
}
@media (max-width: 767.98px) {
    .indicaciones {
        width: 100%;
        font-size: 0.95rem;
        padding: 0.8rem 0.5rem;
        text-align: center;
    }
    .abc-list {
        padding-left: 0;
    }
}

.main-wrapper {
    display: flex;
    flex: 1; /* Esto hace que ocupe todo el espacio disponible */
}

/* Centrado perfecto del navbar */
.navbar .container-fluid {
    display: flex;
    justify-content: center;
}

.navbar img {
    max-height: 70px;
    width: auto;
    object-fit: contain;
}

/* Sidebar más estrecho si es necesario */
@media (min-width: 992px) {
    .sidebar {
        width: 240px;
        background: #414f56 !important; /* Color de fondo del sidebar */
        flex-shrink: 0;
        border: none;
        color: white;
        min-height: 100%; /* Cambiado para que no fuerce altura extra */
    }
    
    .main-content {
        flex: 1;
        background-color: #fafafa;
    }
}

@media (max-width: 991.98px) {
    .main-content {
        width: 100%;
        background-color: #fafafa;
    }
}

/* Estilos para el sidebar */
.sidebar {
    background: #414f56;
    padding: 0;
}

/* Header del sidebar más compacto */
.sidebar-header {
    background: #414f56;
    color: #fb8635;
    padding: 1.2rem 1rem; /* Reducido de 1.5rem */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 6px; /* Reducido de 8px */
}

.sidebar-header h6 {
    color: #fb8635;
    font-weight: 600;
    margin: 0;
    font-size: 0.9rem; /* Reducido ligeramente */
}

/* Sección "Cursos" */
.sidebar-section {
    margin-bottom: 8px; /* Espacio después de la sección Cursos */
    color: #fb8635;
    background: #414f56;
}


.sidebar-section h6 {
    color: #fb8635;
    font-weight: bold;
    margin: 0;
    padding: 1rem;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Contenedor de navegación con padding */
.sidebar .nav {
    padding: 0 6px; /* Espaciado lateral */
}

/* Espaciado entre elementos más compacto */
.sidebar .nav-item {
    margin-bottom: 6px; /* Reducido de 8px a 6px */
}

/* Enlaces del sidebar - NO SELECCIONADOS */
.sidebar .nav-link {
    color: #414f56 !important; /* Texto gris oscuro */
    padding: 0.75rem 1rem; /* Reducido el padding vertical */
    border-radius: 6px; /* Bordes redondeados */
    transition: all 0.3s ease;
    background: #f3f2f7 !important; /* Fondo gris claro */
    margin: 0;
    font-weight: 700; /* Negritas */
    text-decoration: none;
    border: none; /* Removemos el border-bottom */
    font-size: 11px; /* Arial 11 */
    font-family: Arial, sans-serif; /* Fuente Arial */
    line-height: 1.3; /* Altura de línea más compacta */
    text-transform: none; /* Respeta mayúsculas y minúsculas */
}

.sidebar .nav-link:hover {
    background: #e9ecef !important; /* Gris un poco más oscuro en hover */
    color: #414f56 !important;
    transform: translateX(5px);
}

/* Enlaces del sidebar - SELECCIONADO - CORREGIDO */
.sidebar .nav-link.active,
.sidebar .nav-link.active:hover,
.sidebar .nav-link.active:focus {
    background: #414f56 !important; /* Fondo gris claro igual que los demás */
    color: #fb8635 !important; /* Solo el texto en naranja */
    border-left: 4px solid #fb8635; /* Borde izquierdo naranja */
    font-weight: 700 !important; /* Negritas */
    text-decoration: none;
    transform: none;
    font-size: 11px; /* Arial 11 */
    font-family: Arial, sans-serif; /* Fuente Arial */
    line-height: 1.3;
    text-transform: none; /* Respeta mayúsculas y minúsculas */
}

/* Bootstrap overrides específicos */
.sidebar .nav-link:not(.active):hover {
    color: #414f56 !important;
}

/* Offcanvas para móvil */
.offcanvas {
    background: #414f56;
    color: white;
}

.offcanvas-header {
    background: #414f56;
    color: #fb8635;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1.5rem 1rem;
}

.offcanvas-title {
    color: #fb8635;
    font-weight: 600;
    font-size: 0.95rem;
}

.offcanvas-body {
    padding: 0;
}

.btn-close {
    filter: invert(1);
}

/* Estilos para los elementos de navegación móvil */
.offcanvas .sidebar-section {
    background: #414f56;
    margin-bottom: 8px;
}

.offcanvas .nav-item {
    margin-bottom: 6px; /* Reducido también en móvil */
}

/* Para móvil también */
.offcanvas .nav-link {
    color: #414f56 !important; /* Texto gris oscuro */
    background: #f3f2f7 !important; /* Fondo gris claro */
    padding: 0.75rem 1rem; /* Reducido el padding */
    border-radius: 6px; /* Bordes redondeados */
    text-decoration: none;
    border: none;
    font-size: 0.8rem; /* Tamaño de fuente más pequeño */
    line-height: 1.3;
}

.offcanvas .nav-link:hover {
    background: #e9ecef !important; /* Gris un poco más oscuro en hover */
    color: #414f56 !important;
}

/* Enlaces móvil - SELECCIONADO */
.offcanvas .nav-link.active,
.offcanvas .nav-link.active:hover,
.offcanvas .nav-link.active:focus {
    background: #414f56 !important; /* Fondo gris oscuro */
    color: #fb8635 !important; /* Solo el texto en naranja */
    border-left: 4px solid #fb8635;
    font-weight: 600 !important;
    text-decoration: none;
    font-size: 0.8rem;
    line-height: 1.3;
}

/* Responsivo para móviles */
@media (max-width: 768px) {
    .navbar img {
        max-height: 50px;
    }
    
    .navbar .me-2,
    .navbar .me-md-3 {
        margin-right: 0.5rem !important;
    }
}

/* Footer - CORREGIDO */
footer {
    background: white;
    border-top: 1px solid #e9ecef;
    margin-top: auto;
}

/* Botón para abrir menú móvil */
.btn-primary {
    background-color: #fb8635;
    border-color: #fb8635;
}

.btn-primary:hover {
    background-color: #fcba8b;
    border-color: #fcba8b;
}

/* Contenido principal - CORREGIDO */
.main-content {
    background-color: #fafafa;
}

/* Animaciones suaves */
.sidebar .nav-link:not(.active),
.offcanvas .nav-link:not(.active) {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Estados de hover mejorados */
.sidebar .nav-item:hover .nav-link:not(.active) {
    box-shadow: inset 4px 0 0 #fb8635;
}

/* Fecha del curso en el sidebar */
.course-date {
    font-family: Arial, sans-serif;
    font-size: 10px;
    font-weight: 400; /* Normal, no bold para diferenciarlo del título */
    color: #666 !important; /* Color más suave para la fecha */
    margin-top: 2px;
    line-height: 1.2;
}

/* Para el sidebar activo */
.sidebar .nav-link.active .course-date,
.sidebar .nav-link.active:hover .course-date,
.sidebar .nav-link.active:focus .course-date {
    color: rgba(251, 134, 53, 0.8) !important; /* Naranja más suave cuando está activo */
}

/* Para móvil */
.offcanvas .nav-link .course-date {
    color: #666 !important;
}

.offcanvas .nav-link.active .course-date,
.offcanvas .nav-link.active:hover .course-date,
.offcanvas .nav-link.active:focus .course-date {
    color: rgba(251, 134, 53, 0.8) !important;
}

/* Ajuste del padding del nav-link para acomodar la fecha */
.sidebar .nav-link,
.offcanvas .nav-link {
    padding: 0.6rem 1rem; /* Ligeramente más padding vertical */
}

/* Quitar subrayado del enlace "Cursos" en el header del sidebar */
.sidebar-header a {
    text-decoration: none !important;
    color: inherit;
}

.sidebar-header a:hover {
    text-decoration: none !important;
    color: inherit;
}

/* También para el estado visitado */
.sidebar-header a:visited {
    text-decoration: none !important;
    color: inherit;
}

/* Para el offcanvas móvil también */
.offcanvas-header a {
    text-decoration: none !important;
    color: inherit;
}

.offcanvas-header a:hover,
.offcanvas-header a:visited {
    text-decoration: none !important;
    color: inherit;
}