/* ===== Tema claro (por defecto) ===== */
:root {
    /* Paleta basada en la imagen */
    --bs-danger: #FE4B53; /* primer color */
    --bs-secondary: #88299D; /* segundo color */
    --bs-primary: #29D2CE; /* tercero */
    --bs-success: #66D21F; /* cuarto */
    --bs-warning: #F6B717; /* quinto */
    --bs-info: #2672CD; /* combinación complementaria */
    --bs-light: #DBDBDB;
    --bs-whatsapp: #25D366;
    /* Tipografía y cuerpo */
    --bs-body-font-family: "Segoe UI", Arial, sans-serif;
    --bs-body-font-size: 1rem;
    --bs-body-line-height: 1.6;
    --bs-body-bg: #ffffff;
    --bs-body-color: #212529;
    /* Bordes */
    --bs-border-radius: 1rem;
}

.btn {
    border-radius: 12px;
}

/* ===== Font Size Classes ===== */
.font-small {
    font-size: 0.875rem !important; /* 14px */
}

.font-small h1 { font-size: 1.75rem !important; }
.font-small h2 { font-size: 1.5rem !important; }
.font-small h3 { font-size: 1.25rem !important; }
.font-small h4 { font-size: 1.125rem !important; }
.font-small h5 { font-size: 1rem !important; }
.font-small h6 { font-size: 0.875rem !important; }
.font-small .btn { font-size: 0.75rem !important; padding: 0.375rem 0.75rem !important; }
.font-small .form-control { font-size: 0.875rem !important; }
.font-small .card-title { font-size: 1.125rem !important; }
.font-small .card-text { font-size: 0.875rem !important; }

.font-medium {
    font-size: 1rem !important; /* 16px - default */
}

.font-medium h1 { font-size: 2rem !important; }
.font-medium h2 { font-size: 1.75rem !important; }
.font-medium h3 { font-size: 1.5rem !important; }
.font-medium h4 { font-size: 1.25rem !important; }
.font-medium h5 { font-size: 1.125rem !important; }
.font-medium h6 { font-size: 1rem !important; }
.font-medium .btn { font-size: 0.875rem !important; padding: 0.5rem 1rem !important; }
.font-medium .form-control { font-size: 1rem !important; }
.font-medium .card-title { font-size: 1.25rem !important; }
.font-medium .card-text { font-size: 1rem !important; }

.font-large {
    font-size: 1.125rem !important; /* 18px */
}

.font-large h1 { font-size: 2.25rem !important; }
.font-large h2 { font-size: 2rem !important; }
.font-large h3 { font-size: 1.75rem !important; }
.font-large h4 { font-size: 1.5rem !important; }
.font-large h5 { font-size: 1.25rem !important; }
.font-large h6 { font-size: 1.125rem !important; }
.font-large .btn { font-size: 1rem !important; padding: 0.625rem 1.25rem !important; }
.font-large .form-control { font-size: 1.125rem !important; }
.font-large .card-title { font-size: 1.5rem !important; }
.font-large .card-text { font-size: 1.125rem !important; }

.font-extra-large {
    font-size: 1.25rem !important; /* 20px */
}

.font-extra-large h1 { font-size: 2.5rem !important; }
.font-extra-large h2 { font-size: 2.25rem !important; }
.font-extra-large h3 { font-size: 2rem !important; }
.font-extra-large h4 { font-size: 1.75rem !important; }
.font-extra-large h5 { font-size: 1.5rem !important; }
.font-extra-large h6 { font-size: 1.25rem !important; }
.font-extra-large .btn { font-size: 1.125rem !important; padding: 0.75rem 1.5rem !important; }
.font-extra-large .form-control { font-size: 1.25rem !important; }
.font-extra-large .card-title { font-size: 1.75rem !important; }
.font-extra-large .card-text { font-size: 1.25rem !important; }

/* Apply font size to specific elements for better control */
body.font-small,
body.font-medium,
body.font-large,
body.font-extra-large {
    transition: font-size 0.3s ease;
}

/* Smooth transitions for all text elements when font size changes */
body.font-small *,
body.font-medium *,
body.font-large *,
body.font-extra-large * {
    transition: font-size 0.2s ease;
}

/* Prevent layout shift during font size transitions */
.preferences-container {
    transition: all 0.3s ease;
}

.preferences-container.font-small,
.preferences-container.font-medium,
.preferences-container.font-large,
.preferences-container.font-extra-large {
    transition: font-size 0.2s ease;
}

/* ===== Tema oscuro ===== */
[data-bs-theme="dark"] {
    --bs-body-bg: #12203D;
    --bs-body-color: #E0E0E0;
    --bs-danger: #FE4B53;
    --bs-secondary: #88299D;
    --bs-primary: #24A9A6;
    --bs-success: #5AB71D;
    --bs-warning: #F6B717;
    --bs-info: #2BB1E0;
    --bs-light: #ADADAD;
    --bs-whatsapp: #25D366;
}

    [data-bs-theme="dark"] .course-card .card-footer {
        background-color: #121E38 !important;
        color: #e1e1e3; /* Ajusta el color del texto si es necesario */
        border-top: none;
    }

/* ===== escala de grises ===== */
[data-bs-theme="grayscale"] {
    --bs-body-bg: #fff;
    --bs-body-color: #000;
    --bs-primary: #ebebed;
    --bs-secondary: #ebebed;
    --bs-success: #ebebed;
    --bs-danger: #ebebed;
    --bs-warning: #ebebed;
    --bs-info: #ebebed;
    --bs-light: #ebebed;
    --bs-whatsapp: #25D366;
}

    [data-bs-theme="grayscale"] .btn {
        border: 1px solid black !important; /* Borde fino negro */
        color: black !important;
    }

    /* ===== escala de grises hover ===== */
    [data-bs-theme="grayscale"] .btn-primary:hover,
    [data-bs-theme="grayscale"] .btn-outline-primary:hover,
    [data-bs-theme="grayscale"] .btn-secondary:hover,
    [data-bs-theme="grayscale"] .btn-outline-secondary:hover,
    [data-bs-theme="grayscale"] .btn-success:hover,
    [data-bs-theme="grayscale"] .btn-outline-success:hover,
    [data-bs-theme="grayscale"] .btn-danger:hover,
    [data-bs-theme="grayscale"] .btn-outline-danger:hover,
    [data-bs-theme="grayscale"] .btn-warning:hover,
    [data-bs-theme="grayscale"] .btn-outline-warning:hover,
    [data-bs-theme="grayscale"] .btn-info:hover,
    [data-bs-theme="grayscale"] .btn-outline-info:hover,
    [data-bs-theme="grayscale"] .btn-light:hover,
    [data-bs-theme="grayscale"] .btn-outline-light:hover {
        background-color: #d9d9db !important; /* Mantiene el fondo */
        color: #000 !important; /* Mantiene el color del texto */
        box-shadow: 0 4px 8px rgba(0,0,0,0.4); /* Sombra más visible */
        transform: translateY(-2px); /* Efecto de "levantar" el botón */
        filter: none; /* Evita que Bootstrap oscurezca el botón */
        transition: all 0.3s ease; /* Suaviza la transición */
    }
    /* Elimina borde/outline de Bootstrap en hover/focus/active dentro del tema grayscale */
    [data-bs-theme="grayscale"] .btn:focus,
    [data-bs-theme="grayscale"] .btn:hover,
    [data-bs-theme="grayscale"] .btn:active {
        outline: none !important;
        box-shadow: 0 4px 8px rgba(0,0,0,0.3) !important; /* Mantén solo la sombra gris */
        border: 1px solid black !important; /* Mantiene el borde negro */
    }

    [data-bs-theme="grayscale"] .btn-outline-danger,
    [data-bs-theme="grayscale"] .btn-outline-info,
    [data-bs-theme="grayscale"] .btn-outline-primary,
    [data-bs-theme="grayscale"] .btn-outline-secondary,
    [data-bs-theme="grayscale"] .btn-outline-success,
    [data-bs-theme="grayscale"] .btn-outline-light,
    [data-bs-theme="grayscale"] .btn-outline-warning {
        border: 1px solid black;
        background-color: #ebebed;
        color: #000;
    }

/* success disabled #B0D685 */

/* ===== Botones ===== */
/* Regla global para TODOS los botones deshabilitados */
.btn:disabled,
.btn.disabled {
    pointer-events: auto; /* permite mostrar el cursor */
    cursor: not-allowed; /* muestra el ícono de prohibido */
}

    /* Anula cualquier efecto hover para TODOS los deshabilitados */
    .btn:disabled:hover,
    .btn.disabled:hover {
        background-color: inherit; /* mantiene el color actual */
        color: #fff; /* mantiene el texto */
        box-shadow: none; /* quita sombras */
    }
    
    /*Aqui inician los botones*/
.btn-primary {
    background-color: var(--bs-primary); /*Agarra el color de la variable primary, fondo */
    border-color: var(--bs-primary); /*borde*/
    color: #fff; /*texto*/
}

    .btn-primary:disabled {
        background-color: var(--bs-primary);
        color: #fff;
        opacity: 60% !important;
        cursor: not-allowed;
        pointer-events: auto; /*Cambiar el cursor a pesar de estar deshabilitado*/
    }

    .btn-primary:hover,
    .btn-outline-primary:hover {
        background-color: #007C85 !important;
        border-color: #007C85;
    }

.btn-secondary {
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
    color: #fff;
}

    .btn-secondary:disabled {
        background-color: var(--bs-secondary);
        color: #fff;
        opacity: 0.65 !important;
        cursor: not-allowed;
        user-select: none;
    }

    .btn-secondary:hover, .btn-outline-secondary:hover {
        background-color: #5849C0 !important;
        border-color: #5849C0;
        color: #fff;
    }

.btn-success {
    background-color: var(--bs-success);
    border-color: var(--bs-success);
    color: #fff;
}

    .btn-success:disabled {
        background-color: var(--bs-success);
        color: #fff;
        border-color: var(--bs-success);
        opacity: 0.65 !important;
        cursor: not-allowed;
    }

    .btn-success:hover,
    .btn-outline-success:hover {
        background-color: var(--bs-success) !important;
        border-color: var(--bs-success);
        color: #fff;
    }

.btn-danger {
    background-color: var(--bs-danger);
    border-color: var(--bs-danger);
    color: #fff;
}

    .btn-danger:disabled {
        background-color: var(--bs-danger);
        color: #fff;
        opacity: 0.65 !important;
        cursor: not-allowed !important;
    }

    .btn-danger:hover, .btn-outline-danger:hover {
        background-color: #E04F56 !important;
        border-color: #E04F56;
    }

.btn-warning {
    background-color: var(--bs-warning);
    border-color: var(--bs-warning);
    color: #fff;
}

    .btn-warning:disabled {
        background-color: var(--bs-warning);
        color: #fff;
        opacity: 0.65 !important;
        cursor: not-allowed !important;
    }

/* ===== Checkboxes globales (visibilidad mejorada) ===== */
/* Estado por defecto: gris medio-oscuro (más visible) */
input[type="checkbox"].form-check-input {
    background-color: #3f3f3f; /* más claro para que se vea */
    border-color: #111111; /* borde mucho más oscuro para contraste */
    border-width: 2px; /* refuerza visibilidad del borde */
    accent-color: #111111; /* navegadores modernos */
}

/* Hover y foco: borde aún más marcado */
input[type="checkbox"].form-check-input:hover,
input[type="checkbox"].form-check-input:focus {
    border-color: #000000;
    box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.35);
}

/* Estado seleccionado: negro */
input[type="checkbox"].form-check-input:checked {
    background-color: #000000; /* negro */
    border-color: #000000;
    accent-color: #000000; /* navegadores modernos */
}

/* En tablas, aseguramos el contraste sobre filas grises */
.table input[type="checkbox"].form-check-input {
    background-color: #3f3f3f;
    border-color: #111111;
}

.table input[type="checkbox"].form-check-input:checked {
    background-color: #000000;
    border-color: #000000;
}

    .btn-warning:hover,
    .btn-outline-warning:hover {
        background-color: #E6C500 !important;
        border-color: #E6C500;
    }

.btn-info {
    background-color: var(--bs-info);
    border-color: var(--bs-info);
    color: #fff;
}

    .btn-info:disabled {
        background-color: var(--bs-info);
        color: #fff;
        opacity: 0.65 !important;
        cursor: not-allowed !important;
    }

    .btn-info:hover,
    .btn-outline-info:hover {
        background-color: #2196C1 !important;
        border-color: #2196C1;
    }

.btn-light {
    background-color: var(--bs-light);
    border-color: var(--bs-light);
    color: #000;
}

    .btn-light:disabled {
        background-color: var(--bs-light);
        color: #000;
        opacity: 0.65 !important;
        cursor: not-allowed !important;
    }

    .btn-light:hover {
        background-color: #969696 !important;
        border-color: #000;
        color: #000;
    }

.btn-whatsapp {
    background-color: #25D366; /* Verde WhatsApp */
    border-color: #25D366;
    color: #fff; /* Texto siempre blanco */
    font-weight: 600;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

    .btn-whatsapp:disabled {
        background-color: var(--bs-whatsapp);
        color: #fff;
        opacity: 0.65 !important;
        cursor: not-allowed !important;
    }

    .btn-whatsapp:hover,
    .btn-outline-whatsapp:hover {
        background-color: #1DA851; /* Versión más oscura */
        border-color: #1DA851;
        color: #fff;
    }

.btn-outline-whatsapp {
    color: var(--bs-whatsapp);
    border-color: var(--bs-whatsapp);
}

    .btn-outline-whatsapp:disabled,
    .btn-outline-whatsapp.disabled,
    .btn-outline-whatsapp:disabled:hover,
    .btn-outline-whatsapp.disabled:hover {
        border-color: var(--bs-whatsapp) !important;
        background-color: inherit !important;
        color: var(--bs-whatsapp) !important;
        box-shadow: none !important;
    }

/* Botones outline */
.btn-outline-primary {
    color: var(--bs-primary);
    border-color: var(--bs-primary);
}

    .btn-outline-primary:disabled,
    .btn-outline-primary.disabled,
    .btn-outline-primary:disabled:hover,
    .btn-outline-primary.disabled:hover {
        border-color: var(--bs-primary) !important;
        background-color: inherit !important;
        color: var(--bs-primary) !important;
        box-shadow: none !important;
    }

.btn-outline-secondary {
    color: var(--bs-secondary);
    border-color: var(--bs-secondary);
}

    .btn-outline-secondary:disabled,
    .btn-outline-secondary.disabled,
    .btn-outline-secondary:disabled:hover,
    .btn-outline-secondary.disabled:hover {
        border-color: var(--bs-secondary) !important;
        background-color: inherit !important;
        color: var(--bs-secondary) !important;
        box-shadow: none !important;
    }

.btn-outline-success {
    color: var(--bs-success);
    border-color: var(--bs-success);
}

    /* Corrige el borde de los botones outline cuando están deshabilitados */
    .btn-outline-success:disabled,
    .btn-outline-success.disabled,
    .btn-outline-success:disabled:hover,
    .btn-outline-success.disabled:hover {
        border-color: var(--bs-success) !important;
        background-color: inherit !important;
        color: var(--bs-success) !important;
        box-shadow: none !important;
    }

.btn-outline-warning {
    color: var(--bs-warning);
    border-color: var(--bs-warning);
}

    .btn-outline-warning:disabled,
    .btn-outline-warning.disabled,
    .btn-outline-warning:disabled:hover,
    .btn-outline-warning.disabled:hover {
        border-color: var(--bs-warning) !important;
        background-color: inherit !important;
        color: var(--bs-warning) !important;
        box-shadow: none !important;
    }

.btn-outline-danger {
    color: var(--bs-danger);
    border-color: var(--bs-danger);
}

    .btn-outline-danger:disabled,
    .btn-outline-danger.disabled,
    .btn-outline-danger:disabled:hover,
    .btn-outline-danger.disabled:hover {
        border-color: var(--bs-danger) !important;
        background-color: inherit !important;
        color: var(--bs-danger) !important;
        box-shadow: none !important;
    }

.btn-outline-info {
    color: var(--bs-info);
    border-color: var(--bs-info);
}

    .btn-outline-info:disabled,
    .btn-outline-info.disabled,
    .btn-outline-info:disabled:hover,
    .btn-outline-info.disabled:hover {
        border-color: var(--bs-info) !important;
        background-color: inherit !important;
        color: var(--bs-info) !important;
        box-shadow: none !important;
    }

.btn-outline-light {
    color: #F2F2F2;
    border-color: #F2F2F2;
}

    .btn-outline-light:disabled,
    .btn-outline-light.disabled,
    .btn-outline-light:disabled:hover,
    .btn-outline-light.disabled:hover {
        border-color: var(--bs-light) !important;
        background-color: inherit !important;
        color: var(--bs-light) !important;
        box-shadow: none !important;
    }

    .btn-outline-light:hover {
        background-color: #f8f9fa;
        color: #000;
        border-color: #f8f9fa;
    }

.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-outline-success:hover,
.btn-outline-info:hover,
.btn-outline-warning:hover,
.btn-outline-danger:hover {
    color: white;
}

/* ===== Navbar ===== */
.navbar {
    background-color: #111; /* color oscuro inicial */
    font-size: 1rem;
    padding: 1rem 1.5rem; /* tamaño inicial */
    position: fixed; /* navbar fijo */
    top: 0;
    width: 100%;
    z-index: 1030;
    transition: background-color 0.6s ease-in-out, padding 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.5s ease-in-out;
}

    .navbar .nav-link {
        color: #fff;
        transition: color 0.4s ease-in-out;
    }

        .navbar .nav-link:hover {
            color: var(--bs-info);
        }

    .navbar.shrink {
        background-color: #fff; /* color al hacer scroll */
        padding: 0.5rem 1.5rem; /* navbar más pequeño */
        box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    }

        .navbar.shrink .nav-link {
            color: #fff;
        }



/* Padding para que el contenido no quede debajo del navbar */
body {
    padding-top: 100px; /* altura inicial navbar */
    transition: padding-top 0.5s ease-in-out;
}

    body.navbar-shrink-padding {
        padding-top: 60px; /* altura navbar shrink */
    }

/* Clases para navbar con bg primaria o secundaria (opcional) */
.navbar.bg-primary {
    background-color: var(--bs-primary) !important;
}

.navbar.bg-secondary {
    background-color: var(--bs-secondary) !important;
}


/* ===== Links generales ===== */
a {
    color: #68686A;
    text-decoration: none;
}

    a:hover {
        color: #003366;
    }

/* ===== Tablas ===== */
.table {
    border-radius: var(--bs-border-radius);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

    .table thead {
        background-color: var(--bs-primary);
        color: #000;
    }

    .table tbody tr:nth-child(even) {
        background-color: #f9f9f9;
    }

    .table tbody tr:hover {
        background-color: #f1f1f1;
    }


/* ===== Tablas en escala de grises ===== */
[data-bs-theme="grayscale"] .table {
    border-radius: var(--bs-border-radius);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    color: #000 !important;
}

    [data-bs-theme="grayscale"] .table thead {
        background-color: #d9d9d9 !important;
        color: #000 !important;
    }

    [data-bs-theme="grayscale"] .table tbody tr:nth-child(even) {
        background-color: #f2f2f2 !important;
    }

    [data-bs-theme="grayscale"] .table tbody tr:hover {
        background-color: #e6e6e6 !important;
    }

/* ==== Card ==== */
.course-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .course-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
    }

.card-header {
    border-bottom: none;
}

.benefits-section .card {
    transition: transform 0.3s ease;
}

    .benefits-section .card:hover {
        transform: translateY(-10px);
    }

/* ==== Course view ==== */
.course-item {
    transition: opacity 0.3s ease;
}

.course-info small {
    font-size: 0.85rem;
}

.course-header {
    background: transparent !important;
    border: 1px solid #dee2e6;
}

.course-title {
    color: #495057;
    font-weight: 600;
}

.course-description {
    font-size: 1.1rem;
    line-height: 1.6;
}

.detail-item {
    font-size: 0.95rem;
}

/* ==== hero section ==== */
.hero-section {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.program-section {
    border: 1px solid #e9ecef;
}

/*==== modules ====*/
.module-item {
    border: 1px solid #e9ecef !important;
    transition: all 0.2s ease;
}

    .module-item:hover {
        border-color: #007bff !important;
        box-shadow: 0 2px 4px rgba(0,123,255,0.1);
    }

.module-title {
    color: #495057;
    font-weight: 600;
}

.module-description {
    font-size: 0.95rem;
    line-height: 1.5;
}

.module-content {
    flex: 1;
}

.module-actions {
    flex-shrink: 0;
}

.modules-container {
    animation: fadeIn 0.3s ease-in;
}

.module-header {
    cursor: pointer;
    transition: background-color 0.2s ease;
}

    .module-header:hover {
        background-color: #f8f9fa;
    }

/*====course view student ====*/
.collapse-indicator .bi {
    transition: transform 0.2s ease;
}

.resource-item, .assessment-item, .forum-item, .participant-item {
    border: 1px solid #e9ecef !important;
    transition: all 0.2s ease;
}

    .resource-item:hover, .assessment-item:hover, .forum-item:hover, .participant-item:hover {
        border-color: #007bff !important;
        box-shadow: 0 2px 4px rgba(0,123,255,0.1);
    }

/*====student====*/
.student-info {
    border: 1px solid #e9ecef;
}

/*====Teacher====*/
.teacher-section {
    border: 1px solid #e9ecef;
}

.teacher-avatar-container {
    position: relative;
}

.teacher-avatar-img {
    transition: opacity 0.3s ease;
}

.teacher-avatar {
    font-size: 1.2rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: transform 0.2s ease;
}

    .teacher-avatar:hover {
        transform: scale(1.05);
    }

.teacher-details h6 {
    color: #495057;
}

/* ==== Info-group section ==== */
.info-group {
    padding: 10px;
    border-left: 3px solid #007bff;
    background-color: #f8f9fa;
    border-radius: 0 5px 5px 0;
}

    .info-group label {
        font-size: 0.9rem;
        margin-bottom: 2px;
    }

    .info-group p {
        font-size: 1rem;
        color: #333;
    }

.info-item {
    padding: 2px 0;
}

/* Estilos para la imagen de perfil */
.profile-image-container {
    margin-bottom: 1rem;
    position: relative;
    display: inline-block;
}

.profile-image-wrapper {
    position: relative;
    display: inline-block;
}

.profile-image {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #007bff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: #f8f9fa;
}

    .profile-image:hover {
        transform: scale(1.05);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
    }

.profile-image-placeholder {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 4px solid #6c757d;
    background-color: #f8f9fa;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    color: #6c757d;
    transition: all 0.3s ease;
}

    .profile-image-placeholder i {
        font-size: 4rem;
        margin-bottom: 0.5rem;
    }

    .profile-image-placeholder p {
        font-size: 0.8rem;
        margin: 0;
        text-align: center;
    }

.profile-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

/* Indicador de que la imagen se está cargando desde la nube */
.profile-image[src*="storage.googleapis.com"]::before {
    content: "";
    position: absolute;
    top: -2px;
    right: -2px;
    width: 20px;
    height: 20px;
    background: linear-gradient(45deg, #4285f4, #34a853);
    border-radius: 50%;
    border: 2px solid white;
}

.placeholder-image {
    border: 2px dashed #ced4da;
}

/* Clase para ocultar elementos */
.hidden {
    display: none !important;
}
/*style de upsert de course details teacher*/
.page-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.form-section {
    position: relative;
}

.section-title {
    font-weight: 600;
    border-bottom: 2px solid #e9ecef;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}

.form-control-lg {
    font-size: 1rem;
    padding: 0.75rem 1rem;
}

.content-editor {
    min-height: 200px;
    resize: vertical;
    font-family: 'Courier New', monospace;
}

.editor-toolbar {
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 0.5rem;
}

.management-item .bg-light {
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

    .management-item .bg-light:hover {
        border-color: #dee2e6;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

.help-item {
    border-left: 3px solid #dee2e6;
    padding-left: 0.75rem;
}

.form-actions {
    background: #f8f9fa;
    margin: 0 -1.5rem -1.5rem -1.5rem;
    padding: 1.5rem;
    border-radius: 0 0 0.375rem 0.375rem;
}

.is-invalid {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.is-valid {
    border-color: #198754;
    box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.25);
}

/* Estilos para los modales */
.modal-lg {
    max-width: 800px;
}

.assessment-item, .forum-item, .resource-item, .video-item {
    transition: all 0.3s ease;
}

    .assessment-item:hover, .forum-item:hover, .resource-item:hover, .video-item:hover {
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

.form-check-input:checked + .form-check-label {
    opacity: 0.9;
}

.evaluation-list, .forum-list, .resource-list, .video-list {
    max-height: 400px;
    overflow-y: auto;
}

.file-icon i, .video-icon i {
    display: block;
    text-align: center;
}

.btn-group-vertical .btn {
    margin-bottom: 2px;
}

    .btn-group-vertical .btn:last-child {
        margin-bottom: 0;
    }

/* ==== Assesment section ==== */
.result-stat {
    border-right: 1px solid #dee2e6;
}

    .result-stat:last-child {
        border-right: none;
    }

.question-review {
    background-color: #fafafa;
}

.option-review {
    transition: all 0.2s ease;
}

/* Para la página de recursos */
.button-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr); /* 7 columnas */
    gap: 0.75rem; /* espacio entre botones */
    justify-items: center; /* centrar cada botón */
    margin: 1rem auto;
    max-width: 90%; /* opcional para controlar el ancho */
}

    .button-grid .btn {
        width: 100%; /* que cada botón ocupe su celda */
    }

/* ==== Forum Post Cards ==== */
.forum-post-card {
    transition: border-color 0.3s ease;
}

.forum-post-card:hover {
    border-color: var(--bs-secondary) !important; 
}

.forum-replies-container {
    transition: border-left-color 0.3s ease;
}

.forum-post-card:hover + .forum-replies-container,
.forum-replies-container:hover {
    border-left-color: var(--bs-secondary) !important;
}

/* ===== STEAM SOLUTIONS FRONTEND ==== */
.e-learning {
    font-size: 28px;
    font-weight: bold;
    background: linear-gradient(to right, #2A6DFF, #0047AB);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: 1px;
}

.steam {
    font-size: 36px;
    font-weight: bold;
    letter-spacing: 2px;
    display: flex;
}

    .steam span {
        margin: 0 2px;
    }

.s {
    color: #00CED1;
}

.t {
    color: #FF8C00;
}

.e {
    color: #32CD32;
}

.a {
    color: #9932CC;
}

.m {
    color: #FFD700;
}

/* ===== Publicaciones ===== */

/* Contenedor principal del slide */
.publication-slide {
    height: 500px; /* altura fija en pantallas grandes */
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
}

/* Imagen ajustada al espacio */
.publication-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.9);
    transition: filter 0.4s ease-in-out, transform 0.4s ease-in-out;
}

.publication-slide:hover .publication-img {
    filter: brightness(0.6);
    transform: scale(1.03);
}

/* Overlay centrado */
.publication-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.publication-slide:hover .publication-overlay {
    opacity: 1;
}

/* Controles de navegación */
.custom-carousel-control {
    background: rgba(0, 0, 0, 0.4);
    border: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    transition: background 0.3s ease;
}

    .custom-carousel-control i {
        color: #fff;
        font-size: 1.5rem;
    }

    .custom-carousel-control:hover {
        background: rgba(0, 0, 0, 0.7);
    }

/* Indicadores circulares */
.indicator-btn {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #0d6efd;
    background-color: transparent;
    transition: all 0.3s ease;
}

    .indicator-btn.active,
    .indicator-btn:hover {
        background-color: #0d6efd;
    }

/* ===== Responsividad ===== */

/* Tablets */
@media (max-width: 992px) {
    .publication-slide {
        height: 400px;
    }
}

/* Celulares */
@media (max-width: 768px) {
    .publication-slide {
        height: 300px;
    }

    .publication-overlay a {
        font-size: 0.9rem;
        padding: 0.6rem 1.4rem;
    }
}

/* Pantallas muy pequeñas */
@media (max-width: 480px) {
    .publication-slide {
        height: 240px;
    }

    .publication-overlay a {
        font-size: 0.8rem;
        padding: 0.5rem 1.2rem;
    }
}