/* ==========================================================
   VARIABLES — modo claro (default)
   ========================================================== */
:root {
    --civika-blue: #121b28;
    --civika-blue-dark: #ffffff;
    --civika-header-bg: #ffffff;
    --civika-sidebar-blue: #1d4992;   /* azul ejecutivo del sidebar en modo claro */

    /* Tokens semánticos que usan TODOS tus componentes */
    --bg-page: #f4f6fa;
    --bg-surface: #ffffff;
    --bg-surface-soft: #ffffff;
    --text-primary: #121b28;
    --text-muted: #5b6577;
    --border-color: #ffffff;
}

/* ==========================================================
   VARIABLES — modo oscuro
   Usa los mismos tokens que ya trae Tabler (--tblr-*), para que
   tus componentes combinen exacto con el resto de la librería.
   ========================================================== */
[data-bs-theme="dark"] {
    --civika-header-bg: var(--tblr-body-bg, #1a2234);

    --bg-page: var(--tblr-body-bg, #1a2234);
    --bg-surface: var(--tblr-secondary-bg, #202a3c);
    --bg-surface-soft: #26334a;
    --text-primary: var(--tblr-body-color, #dce1e7);
    --text-muted: var(--tblr-secondary-color, #8590a5);
    --border-color: var(--tblr-border-color, #2d3846);
}

body {
    background: var(--bg-page);
    color: var(--text-primary);
}

/* ==========================================================
   Sidebar — azul ejecutivo en claro, gris-oscuro nativo de
   Tabler en oscuro (no se toca, deja que bg-dark haga su trabajo)
   ========================================================== */
.navbar-vertical.bg-dark {
    background-color: var(--civika-sidebar-blue) !important;
}

[data-bs-theme="dark"] .navbar-vertical.bg-dark {
    background-color: var(--tblr-dark-bg, #1a2234) !important;
}


/* ==========================================================
   Header superior con temática Cívika
   ========================================================== */
.navbar-civika {
    background-color: var(--bg-page) !important;
    border-bottom: 1px solid var(--civika-sidebar-blue) !important;
    width: 100%;
    position: relative;
    z-index:1000;

}

[data-bs-theme="dark"] .navbar-civika {
    background-color: var(--bg-page) !important;
    border-bottom-color: var(--border-color) !important;
}

.navbar-civika .container-fluid {
    padding-top: .6rem;
    padding-bottom: .6rem;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    margin-left: auto;
}


/* ==========================================================
   Botones de marca
   ========================================================== */
.bg-civika-primary {
    background-color: var(--civika-blue) !important;
    color: #ffffff;
}

.btn-civika {
    background-color: var(--civika-blue);
    color: #ffffff;
    border-radius: 20px;
    padding: 6px 24px;
    border: none;
}

.btn-civika:hover {
    background-color: var(--civika-blue-dark);
    color: #ffffff;
}

.btn-cancelar {
    background-color: #5a6268;
    color: #ffffff;
    border-radius: 20px;
    padding: 6px 20px;
}

.btn-login-topbar {
    background: var(--civika-blue);
    color: #ffffff !important;
    border-radius: 20px;
    padding: 6px 22px;
    font-weight: 600;
    font-size: .85rem;
    text-decoration: none;
    white-space: nowrap;
}

.btn-login-topbar:hover {
    background: #0c1420;
    color: #ffffff !important;
}

.btn-detail {
    background: var(--civika-blue);
    color: #ffffff;
    border: none;
    font-size: .8rem;
    font-weight: 600;
    padding: .45rem 1.1rem;
    border-radius: 6px;
    text-decoration: none;
    display: inline-block;
}

.btn-detail:hover {
    background: #0c1420;
    color: #ffffff;
}


/* ==========================================================
   Toggle claro / oscuro
   ========================================================== */
.theme-toggle-btn {
    background: none;
    border: none;
    color: var(--civika-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    transition: background-color .15s ease;
}

[data-bs-theme="dark"] .theme-toggle-btn {
    color: var(--text-primary);
}

.theme-toggle-btn:hover {
    background-color: var(--bg-surface-soft);
}

.theme-toggle-btn svg {
    width: 20px;
    height: 20px;
}

.theme-toggle-btn .icon-sun { display: none; }
[data-bs-theme="dark"] .theme-toggle-btn .icon-moon { display: none; }
[data-bs-theme="dark"] .theme-toggle-btn .icon-sun { display: block; }


/* ==========================================================
   Tarjeta de Login
   ========================================================== */
.card-login-civika {
    border-radius: 8px;
    box-shadow: 0 4px 15px #e3d7d7;
    border: none;
    overflow: hidden;
}


/* ==========================================================
   Colapso del menú lateral en móvil
   ========================================================== */
@media (max-width: 767.98px) {
    .navbar-vertical.navbar-expand-md .navbar-collapse {
        background-color: #0077c8;
        padding: 1rem;
        border-radius: 0 0 8px 8px;
    }
}

footer, .footer {
    background-color: var(--bg-surface-soft) !important;
    color: var(--text-primary) !important;
}


/* ==========================================================
   Galería de Cursos — todo referencia tokens, cero color fijo
   ========================================================== */
.page-header-title {
    color: var(--text-primary);
    font-weight: 700;
}

/* Barra de filtros */
.filters-bar {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.75rem;
}

.filters-bar .filter-group {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.filters-bar label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 0;
}

.filters-bar select {
    min-width: 90px;
}

.badge-total {
    margin-left: auto;
    background: var(--civika-blue);
    color: #ffffff;
    font-weight: 600;
    font-size: .85rem;
    padding: .55rem 1rem;
    border-radius: 8px;
    white-space: nowrap;
}

/* Tarjeta de curso */
.course-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(18, 27, 40, 0.05);
    transition: box-shadow .15s ease, transform .15s ease;
}

.course-card:hover {
    box-shadow: 0 6px 18px rgba(18, 27, 40, 0.1);
    transform: translateY(-1px);
}

.course-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
}

.badge-area {
    background: var(--bg-surface-soft);
    color: var(--text-primary);
    font-weight: 600;
    font-size: .72rem;
    padding: .35rem .65rem;
    border-radius: 6px;
}

.course-meta strong {
    color: var(--text-primary);
}

.course-desc {
    color: var(--text-muted);
    line-height: 1.55;
}

.course-desc strong {
    color: var(--text-primary);
}

.course-footer {
    border-top: 1px solid var(--border-color);
    margin-top: 1.1rem;
    padding-top: .9rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.course-thumb {
    max-height: 200px;
    width: 100%;
    object-fit: cover;
}

/* Contador de visitas */
.visitas-card {
    max-width: 350px;
    background: var(--bg-surface-soft);
}

.visitas-card .visitas-label {
    color: var(--text-primary);
}

.visitas-card .visitas-badge {
    background: var(--civika-blue);
    color: #ffffff;
}


/* ==========================================================
   Espaciado del contenido (evita que el título quede pegado
   al borde de la pantalla, en desktop y con sidebar colapsado)
   ========================================================== */
.page-wrapper .page-body {
    padding-top: 1.5rem;
}

.page-wrapper .page-body .container-xl {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

@media (max-width: 767.98px) {
    .page-wrapper .page-body .container-xl {
        padding-left: 1.1rem;
        padding-right: 1.1rem;
    }
}


/* ==========================================================
   Sidebar colapsado (modo hamburguesa) — usado en el login
   El toggler queda visible y el menú permanece oculto hasta
   que el usuario lo abre manualmente.
   ========================================================== */
@media (min-width: 992px) {
    .page-auth .navbar-vertical {
        width: 70px;
        min-width: 70px;
        transition: width .2s ease;
    }

    .page-auth .navbar-vertical .navbar-brand {
        display: none;
    }

    .page-auth .navbar-vertical .navbar-collapse:not(.show) {
        display: none !important;
    }

    .page-auth .navbar-vertical .navbar-toggler {
        display: inline-flex !important;
        margin: 0;
    }

    /* Cuando el usuario abre el menú manualmente, el sidebar
       recupera su ancho normal y vuelve a mostrar el logo */
    .page-auth .navbar-vertical:has(.navbar-collapse.show) {
        width: inherit;
        min-width: 260px;
    }

    .page-auth .navbar-vertical:has(.navbar-collapse.show) .navbar-brand {
        display: block;
    }
}


/* ==========================================================
   Notificaciones (header)
   ========================================================== */
.notif-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #1d4992;
    border: 2px solid var(--civika-header-bg);
}
/* Ocultar el sobrante del listón fuera de la tarjeta */
.card.overflow-hidden {
    overflow: hidden !important;
}
/* ==========================================================
   Estilos personalizados para enlaces e items del Sidebar
   ========================================================== */

/* 1. Texto e íconos en blanco por defecto */
.navbar-vertical.bg-dark .nav-link {
    color: rgba(255, 255, 255, 0.85) !important;
    transition: all 0.2s ease-in-out;
}

.navbar-vertical.bg-dark .nav-link .icon {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* 2. Estado Hover y Activo (Seleccionado): 
   Fondo azul claro/celeste, texto e ícono en azul corporativo */
.navbar-vertical.bg-dark .nav-link:hover,
.navbar-vertical.bg-dark .nav-item.active .nav-link,
.navbar-vertical.bg-dark .nav-link.active {
    background-color: #e8f1ff !important; /* Fondo azul claro */
    color: var(--civika-sidebar-blue) !important; /* Texto en azul del sidebar (#1d4992) */
    font-weight: 600;
    border-radius: 6px; /* Esquinas ligeramente redondeadas para el seleccionador */
}

/* Cambia también el color del SVG al estar seleccionado o hover */
.navbar-vertical.bg-dark .nav-link:hover .icon,
.navbar-vertical.bg-dark .nav-item.active .nav-link .icon,
.navbar-vertical.bg-dark .nav-link.active .icon {
    color: var(--civika-sidebar-blue) !important;
}
/* ==========================================================
   MÓDULO: CARRUSEL HEADLINE FULL WIDTH
   ========================================================== */

/* Elimina márgenes superiores en la página principal para pegar el carrusel al header */
.page-wrapper .page-body.home-page-body {
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Envoltorio que fuerza el 100% del ancho disponible */
.carousel-fullwidth-wrapper {
    width: 100%;
    margin-top: 0;
    overflow: hidden;
}

/* Control de altura y ajuste de la imagen */
.hero-carousel-img {
    width: 100%;
    height: 580px; /* Puedes ajustar la altura deseada (ej. 350px a 420px) */
    object-fit: cover; /* Evita que la imagen se distorsione al adaptarse al ancho completo */
    object-position: center;
}

/* Estilo semi-transparente elegante para el texto sobre el carrusel */
.bg-dark-glass {
    background: rgba(18, 27, 40, 0.75);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

/* Adaptación responsiva para pantallas pequeñas */
@media (max-width: 767.98px) {
    .hero-carousel-img {
        height: 240px;
    }
}