/* ==========================================================================
   1. DISCOVERY CENTER - MOODLE 4.5 LOGIN LAYOUT (MOOVE)
   ========================================================================== */
#page.drawers .main-inner {
    background: transparent;
    padding: 0px !important;
}

/* ==========================================================================
   2. PIE DEL FORMULARIO DE LOGIN (IDIOMA Y COOKIES EN FUENTE PEQUEÑA)
   ========================================================================== */

body#page-login-index .login-form-footer,
body#page-login-index .login-form-footer *,
body#page-login-index #page-footer,
body#page-login-index #page-footer *,
body#page-login-index a[href*="cookies"],
body#page-login-index .login-container a,
body#page-login-index .login-container button,
body#page-login-index .login-container .dropdown-toggle {
    font-size: 11px !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
}

body#page-login-index .login-form-footer,
body#page-login-index #page-footer {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0.75rem !important;
    margin-top: 1.25rem !important;
    width: 100% !important;
}

body#page-login-index a[href*="cookies"] {
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    text-decoration: none !important;
}

body#page-login-index a[href*="cookies"] i,
body#page-login-index a[href*="cookies"] .fa,
body#page-login-index a[href*="cookies"] .icon,
body#page-login-index .login-form-footer i,
body#page-login-index .login-form-footer .icon {
    font-size: 11px !important;
    width: auto !important;
    height: auto !important;
    margin-right: 3px !important;
}

body#page-login-index .login-form-footer .dropdown-toggle,
body#page-login-index .login-form-footer select,
body#page-login-index .login-form-footer a,
body#page-login-index .login-form-footer div {
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* ==========================================================================
   3. FOOTER MINIMALISTA CENTRADO - DISCOVERY CENTER (MOOVE)
   ========================================================================== */

/* Ocultar elementos innecesarios */
#page-footer .column-center,
#page-footer .column-right,
#page-footer .copyright,
#page-footer .footer-content-debugging,
#page-footer [data-region="footer-container-popover"],
#page-footer .footer-content-popover,
#page-footer .footer-title,
#page-footer .supportemail,
#page-footer .logininfo,
#page-footer .tool_dataprivacy,
#page-footer .tool_usertours-resettourcontainer,
#page-footer .mobilelink,
#page-footer .mobile-app-download,
#page-footer .appdownload {
    display: none !important;
}

/* Contenedor principal del pie */
#page-footer {
    background-color: #101d24 !important;
    padding: 3.5rem 1rem 2.5rem 1rem !important;
}

#page-footer .moove-container-fluid.footer-columns {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    max-width: 800px !important;
    margin: 0 auto !important;
}

/* Logo Superior */
#page-footer .moove-container-fluid.footer-columns::before {
    content: "" !important;
    display: block !important;
    width: 280px !important;
    height: 75px !important;
    background-image: url('images/logo_DC_full-Bco-color.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    margin: 0 auto 1.5rem auto !important;
    order: 1 !important;
}

#page-footer .moove-container-fluid.footer-columns>.row {
    order: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
}

/* Columna izquierda */
#page-footer .column-left {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 0 !important;
    gap: 12px !important;
}

/* Eslogan arriba de los íconos */
#page-footer .column-left::after {
    content: "Acompañamos el aprendizaje y desarrollo de tus hijos día a día." !important;
    display: block !important;
    width: 100% !important;
    color: #29b6f6 !important;
    font-size: 1.1rem !important;
    font-weight: 400 !important;
    margin-bottom: 1rem !important;
    order: 1 !important;
}

/* Redes sociales y contacto */
#page-footer .contact,
#page-footer .socialnetworks {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    order: 2 !important;
}

#page-footer .contact ul,
#page-footer .socialnetworks ul {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    gap: 16px !important;
}

#page-footer .column-left li {
    display: inline-flex !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

#page-footer .socialnetworks a,
#page-footer .contact a {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    font-size: 1.6rem !important;
    line-height: 1 !important;
}

/* Copyright inferior */
#page-footer .moove-container-fluid.footer-columns::after {
    content: "© Todos los derechos reservados." !important;
    display: block !important;
    color: #7a8b94 !important;
    font-size: 0.9rem !important;
    margin-top: 1.8rem !important;
    order: 3 !important;
}


/* ==========================================================================
   4. BLOQUE TUTOREADOS (MENTEES / HIJOS) - TARJETA 100% CLICKEABLE
   ========================================================================== */

.block_mentees .content ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 10px 0 0 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
}

/* Tarjeta principal contenedor */
.block_mentees .content ul li,
[data-block="mentees"] li {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 12px !important;
    padding: 16px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    margin: 0 !important;
    width: 100% !important;
    position: relative !important;
    /* CRUCIAL para que el enlace interior la tome como referencia */
}

.block_mentees .content ul li:hover {
    border-color: #64748B !important;
    box-shadow: 0 4px 8px #0f6cbf24 !important;
    background-color: #F8FAFC !important;
}

/* Badge amarillo arriba */
.student-grade-tag {
    background-color: #ffc107 !important;
    color: #000 !important;
    padding: 4px 12px !important;
    border-radius: 12px !important;
    font-weight: bold !important;
    font-size: 0.85rem !important;
    display: inline-block !important;
    margin-bottom: 8px !important;
    z-index: 2 !important;
    /* Para que quede por encima del área clickeable */
}

.student-grade-tag.is-hidden {
    display: none !important;
}

/* Contenedor wrapper interno */
.mentee-card-wrapper {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    position: relative !important;
    z-index: 2 !important;
    /* Mantiene el contenido visible y separado del pseudo-enlace */
}

.mentee-left-group {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-grow: 1 !important;
}

/* TRUCO CLAVE: Estiramos el enlace de Moodle para que cubra ABSOLUTAMENTE toda la tarjeta */
.block_mentees .content ul li a[href*="/user/"] {
    position: static !important;
    /* Anulamos el comportamiento anterior */
    color: #0d3b66 !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-size: 1.1rem !important;
    font-weight: bold !important;
}

/* Este pseudo-elemento cubre toda la tarjeta <li> y la hace clickeable */
.block_mentees .content ul li::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
    cursor: pointer !important;
}

/* Asegurar tamaño de la foto del alumno */
.block_mentees .content ul li img.userpicture,
.block_mentees .content ul li a[href*="/user/"] img {
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    object-fit: cover !important;
    display: inline-block !important;
}

/* Botón de flecha circular a la derecha */
.block_mentees .content ul li .mentee-card-wrapper a.custom-arrow-btn,
.block_mentees .content ul li a.custom-arrow-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 50% !important;
    background-color: #E9F4FB !important;
    color: #59A9DD !important;
    margin-left: 12px !important;
    font-weight: bold !important;
    text-decoration: none !important;
    font-size: 1rem !important;
    flex-shrink: 0 !important;
    transition: background-color 0.2s ease, transform 0.2s ease !important;
    transform: translateX(-16px) !important;
}

.block_mentees .content ul li:hover a.custom-arrow-btn {
    background-color: #59A9DD !important;
    color: #ffffff !important;
    transform: translateX(0px) !important;
    text-decoration: none !important;
}

.student-icon-badge {
    position: relative;
    /* Degradado base para imitar la iluminación del icono */
    background: linear-gradient(135deg, #4EA1DE 0%, #2B82BA 100%);
    color: #FFFFFF;
    width: 48px;
    height: 48px;
    /* Esquina superior izquierda asimétrica (12px), el resto redondeado (50%) */
    border-radius: 12px 50% 50% 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0 6px 16px rgba(43, 130, 186, 0.3);
    overflow: hidden;
}


.student-icon-badge {
    position: relative;
    color: #FFFFFF;
    width: 48px;
    height: 48px;
    border-radius: 6px 16px 16px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0 4px 8px rgb(26 122 184 / 43%);
    overflow: hidden;
    background: #2B82BA;
    background: linear-gradient(37deg, rgba(43, 130, 186, 1) 51%, rgba(43, 141, 186, 1) 51%);
}

.student-icon-badge i {
    color: #FFFFFF;
    z-index: 1;
    /* Asegura que el icono esté por encima del brillo */
}

/* ==========================================================================
   5. BLOQUE TIMELINE (TAREAS) - LIMPIO Y UNIFICADO
   ========================================================================== */

/* Contenedor principal de la tarjeta */
.custom-timeline-card {
    background-color: #ffffff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.custom-timeline-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

/* Bordes generales por prioridad */
.custom-timeline-card.border-urgent {
    border-color: #fca5a5;
}

.custom-timeline-card.border-warning {
    border-color: #fde68a;
}

.custom-timeline-card.border-normal {
    border-color: #a7f3d0;
}

/* Encabezado meta (Grado, Materia, Fecha, Badge de urgencia) */
.custom-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0px;
    margin-bottom: 16px;
    gap: 16px;
    flex-wrap: wrap;
}

.custom-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}


/* -- HEader info de la card --*/
.timeline-section-name {
    font-weight: 600;
    color: #2B82BA;
    margin-right: 8px;
    text-transform: uppercase;
}

.timeline-separator {
    color: #CBD5;
}

.timeline-calendar-emoji {
    font-size: 18px;
    margin-left: 8px;
    margin-right: 8px;
}

.timeline-label-entrega {
    font-weight: 500;
    color: #64748B;
}

.timeline-date-text {
    font-weight: 600;
    color: #334155;
}

.timeline-time-text {
    display: none;
}


/* Badges de contexto (Grado y Materia) */
.grade-label {
    font-weight: 700;
    font-size: 0.8rem;
    color: #1e293b;
    background-color: #f1f5f9;
    padding: 3px 10px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

.course-name-slot {
    font-weight: 600;
    font-size: 0.8rem;
    color: #0369a1;
    background-color: #e0f2fe;
    padding: 3px 10px;
    border-radius: 6px;
    border: 1px solid #bae6fd;
}

/* Fecha y hora de entrega */
.custom-card-date {
    font-size: 0.85rem;
    font-weight: 500;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Badges de estado/urgencia (Urgente, Próximo, Normal) */
.custom-card-badge,
.badge-urgent,
.badge-warning,
.badge-normal {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 160px;
    letter-spacing: 0.3px;
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}

.badge-urgent,
.custom-card-badge.badge-urgent {
    background-color: #FFDBDF;
    color: #DC3545;
}

.badge-warning,
.custom-card-badge.badge-warning {
    background-color: #FFF4CD;
    color: #F3B254;
}

.badge-normal,
.custom-card-badge.badge-normal {
    background-color: #D1E8DD;
    color: #1A8755;
}

/* Cuerpo de la tarjeta */
.custom-card-body {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f8fafc;
    padding: 8px 16px;
    border-radius: 8px;
    gap: 12px;
}

/* Indicadores de prioridad con borde lateral en el cuerpo */
.custom-card-body.border-left-urgent {
    border: 1px solid #E2E8F0;
    border-left: 4px solid #ef4444;
}

.custom-card-body.border-left-warning {
    border: 1px solid #E2E8F0;
    border-left: 4px solid #F3B254;
}

.custom-card-body.border-left-normal {
    border: 1px solid #E2E8F0;
    border-left: 4px solid #10b981;
}

.custom-card-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Título de la actividad / tarea */
.custom-title-slot a {
    font-weight: 700;
    font-size: 0.95rem;
    color: #0f6cbf !important;
    text-decoration: none !important;
    display: block;
}

.custom-title-slot a:hover {
    color: #0284c7 !important;
    text-decoration: underline !important;
}

.custom-card-status {
    font-size: 0.82rem;
    color: #64748b;
}

.custom-section-title {
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 2px;
    background-color: #e2e8f0;
    border-radius: 6px;
    padding: 2px 16px;
    text-align: center;
    color: #334155;
}


.btn-outline-secondary {
    color: #2b82ba;
    border-color: #2b82ba;
    border-radius: 6px;
}

.btn-outline-secondary:hover {
    color: #fff;
    background-color: #2b82ba;
}

/* ==========================================================
   TARJETA CLICKEABLE EN BLOQUE DE TAREAS (TIMELINE)
   ========================================================== */


#page-my-index .custom-card-body:hover,
#page-my-index [data-region="event-list-item"]:hover {
    cursor: pointer !important;
    background-color: #f1f5f9 !important;
    /* Un tono sutil al pasar el mouse */
    transition: background-color 0.2s ease !important;
}



/* ==========================================
   ESTILOS UI/UX: CABECERA DE TAREAS Y ACTIVIDADES
   ========================================== */

.activityiconcontainer {
    display: none
}

.task-header-wrapper {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.task-title-row {
    display: flex;
    align-items: center;
    padding-left: 10px;
}

/* Ajuste del icono nativo dentro de la cabecera */
.task-header-wrapper .activityiconcontainer,
.task-header-wrapper .page-header-image,
.task-header-wrapper img.activityicon {
    width: 32px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 12px !important;
    border-radius: 8px !important;
}

.task-main-title {
    font-size: 26px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
}

.task-meta-category {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #64748b !important;
    margin-left: 54px !important;
    /* Alineado perfectamente respetando el ancho del icono */
}



/* ==========================================================
   ESTILOS TAREAS PROFESOR
   ========================================================== */
/* ==========================================================
   UI STYLES: TARJETAS DE ACTIVIDADES DOCENTES (ESTILO NATIVO)
   ========================================================== */
.teacher-activities-wrapper {
    max-height: 400px;
    overflow-y: auto;
    padding-right: 4px;
    padding-bottom: 0px;
}

.teacher-activities-wrapper::-webkit-scrollbar {
    width: 6px;
}

.teacher-activities-wrapper::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 3px;
}

/* Tarjeta individual idéntica a tus componentes de Moodle */
.teacher-activity-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: .75rem;
    margin-bottom: 0.85rem;
    position: relative;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    transition: all 0.2s ease;
}

.teacher-activity-card:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    border-color: #cbd5e1;
}


/* Ficha superior con el nombre del curso (Estilo insignia) */
.teacher-activity-meta {
    display: flex;
    align-items: center;
    justify-content: left;
    margin-bottom: 0.35rem;
    padding-left: 0.5rem;
}

.teacher-course-badge {
    background-color: #f1f5f9;
    color: #475569;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 0.2rem 0.6rem;
    border-radius: 0.35rem;
    text-transform: uppercase;
    border: 1px solid #e2e8f0;
}

/* Cuerpo de la tarjeta */
.teacher-activity-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 0.5rem;
}

.teacher-activity-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #2B82BA;
    text-decoration: none !important;
    display: block;
    margin-bottom: 0.1rem;
    text-transform: uppercase;
}
.teacher-activity-title i{
    color: #F3B254 !important;
    font-size: 16px;
    background: #FAE1B8;
    padding: 8px;
    border-radius: 100px;
    height: 32px;
    width: 32px;
    text-align: center;

}

.teacher-activity-title:hover {
    color: #0d6efd;
}

.teacher-activity-desc {
    font-size: 0.8rem;
    color: #64748b;
    margin: 0;
    text-align: left;
}

/* Botón circular con flecha idéntico al de tu dashboard */
.teacher-activity-action {
    background-color: #f0fdf4;
    color: #0284c7;
    border: 1px solid #bae6fd;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background 0.2s;
    flex-shrink: 0;
    margin-left: 1rem;
}

.teacher-activity-action:hover {
    background-color: #0ea5e9;
    color: #ffffff;
}



/* ==========================================================
   ESTILOS PARA BOTÓN DE REGRESO Y TÍTULOS INYECTADOS
   ========================================================== */

/* Botón "Regresar al Tablero" */
.btn-regresar-tablero {
    display: inline-flex !important;
    align-items: center !important;
    color: #0F3278 !important;
    border: 0px;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    margin-bottom: 16px !important;
    transition: all 0.2s ease !important;
    margin-left: 16px;
}

.btn-regresar-tablero:hover {
    background-color: #2B82BA !important;
    color: #ffffff !important;
    border-color: #0F3278 !important;
    text-decoration: none !important;
}

/* Título inyectado para recursos que no lo muestran por defecto (como URLs) */
.custom-activity-title {
    font-weight: 600 !important;
    color: #0F3278 !important;
    font-size: 1.4rem !important;
    margin-top: 10px !important;
    margin-bottom: 1rem !important;
    margin-left: 16px;
}

/* ==========================================================================
   6A. AVISOS PERSONALIZADOS POR JS (CUSTOM NEWS CARDS)
   ========================================================================== */

#custom-course-news-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
}



a.custom-news-card {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px !important;
    background-color: #ffffff !important;
    border: 1px solid #C2D4F0 !important;
    border-radius: 14px !important;
    text-decoration: none !important;
    color: inherit !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease-in-out !important;
    min-height: 118px !important;
    height: auto !important;
}


a.custom-news-card:hover {
    border-color: #64748B !important;
    box-shadow: 0 4px 8px #0f6cbf24 !important;
    background-color: #F8FAFC !important;
}

a.custom-news-card:hover .custom-news-arrow {
    background-color: #59A9DD !important;
    color: #ffffff !important;
    transform: translateX(0px) !important;
}

.custom-news-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    flex: 1 !important;
    min-width: 0 !important;
}

.custom-news-badge-wrapper {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    color: #10b981 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    position: relative;
}


.custom-news-title {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    line-height: 1.3 !important;
    display: block !important;
}


/* a.custom-news-card:hover .custom-news-title {color: #59A9DD !important;}*/

.custom-news-snippet {
    font-size: 0.85rem !important;
    color: #64748b !important;
    line-height: 1.3 !important;
    display: block !important;
}

.custom-news-arrow,
.custom-arrow-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 50% !important;
    background-color: #E9F4FB !important;
    color: #59A9DD !important;
    margin-left: 12px !important;
    font-weight: bold !important;
    transition: background-color 0.2s ease, transform 0.2s ease !important;
    transform: translateX(-16px) !important;
}


/* ==========================================================================
   6B. AVISOS GENERALES NATIVOS DE MOODLE (BLOCK_NEWS_ITEMS)
   ========================================================================== */
/* ==========================================================
   ESTILO PARA EL MENSAJE DE "SIN AVISOS" EN EL BLOQUE
   ========================================================== */
.block_news_items .card-text {
    
}
.block_news_items .content ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

/* Tarjeta contenedora principal */
.block_news_items .content ul li {
    background-color: #ffffff !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: 14px !important;
    padding: 16px !important;
    box-shadow: 0 2px 6px 1px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.25s ease !important;
    margin: 0 !important;
    display: block !important;
    clear: both !important;
    overflow: hidden !important;
    min-height: 90px !important;
    height: auto !important;
}


.block_news_items .content ul li:hover {
    border-color: #64748B !important;
    box-shadow: 0 4px 8px #0f6cbf24 !important;
    background-color: #F8FAFC !important;
}


/* Imagen flotada a la izquierda */
.block_news_items .content ul li img {
    float: left !important;
    width: 100px !important;
    height: 100px !important;
    min-width: 76px !important;
    object-fit: cover !important;
    border-radius: 10px !important;
    margin: 0 16px 0 0 !important;
    display: block !important;
}

.block_news_items .content ul li .announcement-card-content {
    padding-top: 24px;
}

/* Título de aviso */
.block_news_items .content ul li a[href*="discuss.php"],
.block_news_items .content ul li .name {
    display: block !important;
    font-size: 0.98rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    text-decoration: none !important;
    line-height: 1.35 !important;
    margin-bottom: 0px !important;
    overflow: hidden !important;
}

.block_news_items .content ul li a[href*="discuss.php"] span {
    color: #64748b !important;
    font-size: 0.78rem !important;
    font-weight: 500 !important;
}

.block_news_items .content ul li a[href*="discuss.php"]:hover {
    color: #10b981 !important;
}

/* Fecha y meta */
.block_news_items .content ul li .info,
.block_news_items .content ul li .date,
.block_news_items .content ul li .time {
    display: block !important;
    font-size: 0.78rem !important;
    font-weight: 500 !important;
    color: #64748b !important;
    line-height: 1.3 !important;
    overflow: hidden !important;
}

/* Ocultar footer nativo de noticias */
.block_news_items .footer {
    display: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}


/* Estilo limpio para la fecha formateada por JS */
.block_news_items .date,
.block_news_items .time,
.block_news_items .info .time {
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    color: #64748b !important;
    display: block !important;
    margin-top: 2px !important;
}


.block_news_items .content ul li a[href*="discuss.php"] {
    position: relative;
}

li.post.custom-announcement-card a.announcement-card-link>.custom-news-arrow {
    position: absolute !important;
    right: 0px !important;
    top: 34px !important;
    /*transform: translateY(-50%) !important;*/
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background-color: #E9F4FB !important;
    color: #59A9DD !important;
}

.block_news_items .content ul li:hover .custom-news-arrow {
    background-color: #59A9DD !important;
    color: #ffffff !important;
    transform: translateX(0px) !important;
}


/* ==========================================================================
   7. DASHBOARD GRID DIRECTO (ESTRUCTURA PERSONALIZADA)
   ========================================================================== */

/* Contenedor principal idéntico a tu modelo `.dashboard` */
#region-main div.custom-dashboard-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;

}

#region-main div.custom-dashboard-grid #maincontent {
    display: none !important;
}

#region-main div.custom-dashboard-grid .add_block_button {
    flex: stretch;
}

 
    /* BLOQUE AVISOS GENERALES */
#region-main div.custom-dashboard-grid>section[data-block="news_items"]{
    order: 1;
    flex: 1 1 calc(50% - 10px) !important;
    max-width: calc(50% - 10px) !important;
    min-height: 250px !important;
}

    /* BLOQUE AVISOS DE MIS CURSOS */
#region-main div.custom-dashboard-grid>section[data-block="html"] {
    order: 2;
    flex: 1 1 calc(50% - 10px) !important;
    max-width: calc(50% - 10px) !important;
    min-height: 250px !important;
}

    /* BLOQUE TAREAS */
#region-main div.custom-dashboard-grid>section[data-block="timeline"] {
    order: 3;
    flex: 1 1 100% !important;
    min-height: 300px !important;
}

    /* BLOQUE RESUMEN CLASE */
#region-main div.custom-dashboard-grid>section.block-resumen-semanal {
    order: 4;
}

    /* BLOQUE CALENDARIO */
#region-main div.custom-dashboard-grid>section[data-block="calendar_month"] {
    order: 5;
    flex: 1 1 100% !important;
    max-width: 100% !important;
    min-height: 500px !important;
}

     /* BLOQUE MENTEES */
#region-main div.custom-dashboard-grid>section[data-block="mentees"]{
    order: 6;
    flex: 1 1 calc(50% - 10px) !important;
    min-height: 300px !important;
}
     /* BLOQUE MIS cursos */
#region-main div.custom-dashboard-grid>section[data-block="myoverview"] {
    order: 7;
    flex: 1 1 calc(50% - 10px) !important;
    min-height: 300px !important;
}






/* =============================================================
   BLOQUE DE RESUMEN SEMANAL A 100% DE ANCHO EN EL TABLERO
   ============================================================*/

/* Forzamos que la sección del bloque de Moodle ocupe siempre el 100% del ancho del tablero */
#region-main div.custom-dashboard-grid>section.block_html:has(.weekly-summary-container) {
    /*flex: 1 1 100% !important;*/
    flex: 1 1 calc(50% - 10px) !important;
    max-width: 100% !important;
    max-height: 370px;

}

/* Cuadrícula interna de las tarjetas basada en Flexbox */
.weekly-summary-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 15px;
}

/* Si hay una sola tarjeta, toma el 100% */
.weekly-folder-card-link {
    flex: 0 0 100%;
    text-decoration: none !important;
    display: block;
}

/* Si hay 2 o más tarjetas, cada una toma el 50% (menos el espacio del gap) */
.weekly-summary-container:has(.weekly-folder-card-link:nth-child(2)) .weekly-folder-card-link {
    flex: 0 0 calc(50% - 7.5px);
}

/* Estructura visual de la tarjeta */
.weekly-folder-card-item {
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    background: #fff;
    padding: 20px;
    transition: all 0.25s ease-in-out;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    height: 100%;
    box-sizing: border-box;
}

.weekly-folder-card-link:hover .weekly-folder-card-item {
    border-color: #94a3b8;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.weekly-badge {
    display: inline-block;
    background-color: #e2e8f0;
    color: #475569;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.weekly-card-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.weekly-card-text-content {
    flex: 1;
}

.weekly-card-title {
    font-size: 17px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 6px 0;
    line-height: 1.3;
}

.weekly-card-desc {
    font-size: 13px;
    color: #64748b;
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.weekly-arrow-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    background-color: #f1f5f9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0ea5e9;
    font-size: 18px;
    font-weight: bold;
    transition: all 0.2s ease;
}

.weekly-folder-card-link:hover .weekly-arrow-btn {
    background-color: #0ea5e9;
    color: #fff;
}

.weekly-card-icon {
    width: 32px;
    height: 32px;
    text-align: center;
    color: #EA8805;
    background: #FDF4E6;
    border-radius: 100%;
    margin: 0px;
    padding: 4px;
}

.weekly-card-icon svg {
    width: 20px;
    height: 20px;
}



/* ==========================================================================
   ESTRUCTURA BASE DE LAS TARJETAS (BLOCKS)
   ========================================================================== */

#page-my-index .block,
#page-my-index [data-block] {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
    padding: 24px 16px !important;
    margin-bottom: 0 !important;
    /* El gap del grid maneja la separación */
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Altura flexible para evitar que se amontonen o corten mal el contenido */
#page-my-index .block {
    min-height: 320px !important;
    height: auto !important;
}

/* Alturas específicas opcionales para mantener orden */
#page-my-index [data-block="timeline"] {
    min-height: 400px !important;
}

#page-my-index [data-block="calendar_month"] {
    min-height: 400px !important;
}

#page-my-index [data-block="myoverview"],
#page-my-index [data-block="mentees"] {
    min-height: 350px !important;
}

/* ==========================================================================
   ALTURAS PERSONALIZADAS PARA BLOQUES ESPECÍFICOS
   ========================================================================== */

#page-my-index [data-block="timeline"] {
    max-height: 580px !important;
    min-height: 420px !important;
}

#page-my-index [data-block="calendar_month"] {
    max-height: fit-content !important;
    min-height: 400px !important;
}

#page-my-index [data-block="myoverview"],
#page-my-index [data-block="mentees"] {
    max-height: 350px !important;
    min-height: 350px !important;
}

/* ==========================================================================
   ESTRUCTURA INTERNA: WRAPPERS Y CARD BODY
   ========================================================================== */

.dashboard-card .dashboard-card-img {
    border-radius: 12px 12px 0 0;
}

.block .block-cards .dashboard-card-footer.menu {
    border-radius: 12px;
}

.block .block-cards .dashboard-card-footer.menu .btn.btn-link.btn-icon {
    background-color: #2B82BA;

}

#page-my-index .block .card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

#page-my-index .block .card-body {
    background: transparent !important;
    padding: 4px 16px 0px 16px !important;
    margin: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* ==========================================================================
   TÍTULOS, ENCABEZADOS Y LÍNEA DECORATIVA
   ========================================================================== */

#page-my-index .block .card-title,
#page-my-index .block h5,
#page-my-index .block h3,
#page-my-index [data-block] h2,
#page-my-index [data-block] h3,
#page-my-index [data-block="timeline"] .card-body>div:first-child {
    flex-shrink: 0 !important;
    z-index: 5 !important;
    margin-top: 0 !important;
    margin-bottom: 24px !important;
    padding-bottom: 6px !important;
    position: relative !important;
    color: #0A2355;
}

#page-my-index [data-block="timeline"] .card-body>div:first-child {
    margin-bottom: 0px !important;
}

#page-my-index [data-block] h3:before {
    content: '';
    width: 32px;
    height: 3px;
    background-color: #FFD123;
    position: absolute;
    left: 0;
    bottom: -2px;
}

/* 6. CONTENEDOR DE CONTENIDO (LISTA DE TAREAS / AVISOS): Ocupa el resto y hace el scroll */
#page-my-index .block .card-text,
#page-my-index .block .content,
#page-my-index [data-block="timeline"] .card-body>div:nth-child(2),
#page-my-index [data-block="timeline"] .card-body>.tab-content {
    flex: 1 1 auto !important;
    /* Toma exactamente el alto restante de los 340px */
    overflow-y: auto !important;
    /* Único elemento que genera scroll interno */
    overflow-x: hidden !important;
    min-height: 0 !important;
    /* Vital para que flexbox calcule bien los límites */
    padding: 0 !important;
    margin: 0 !important;
}






/* ==========================================================================
   8. CORRECCIÓN DE FILTROS Y CURSOS
   ========================================================================== */

/* Alineación Horizontal de Filtros (Línea de tiempo y Cursos) */


#page-my-index .block_myoverview .g-0,
#page-my-index .block_myoverview [data-region="filter-container"] {
    display: none !important;
}


/* Alineación Horizontal de Filtros (Línea de tiempo y Cursos) */
#page-my-index .block_timeline .g-0 {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    width: 100% !important;
    gap: 8px !important;

}

#page-my-index .block_timeline .g-0>div,
#page-my-index .block_timeline [data-region="day-filter"],
#page-my-index .block_timeline [data-region="view-selector"] {
    display: inline-flex !important;
    flex-direction: row !important;
    width: auto !important;
    max-width: 100% !important;
    margin-bottom: 0 !important;
}

#page-my-index .block_timeline .dropdown,
#page-my-index .block_timeline .btn {
    display: inline-flex !important;
    width: auto !important;
}

#page-my-index .block_timeline [class*="nav-search"],
#page-my-index .block_timeline .input-group {
    flex: 1 1 200px !important;
    width: auto !important;
}

/* ==========================================================================
   00. CALENDARIO
   ========================================================================== */

#region-main .maincalendar .calendarwrapper td>div {
    height: 5.5em;
    overflow: hidden;
}

.maincalendar .calendarmonth td.today .day-number-circle {
    background-color: #2B82BA;
}

/* ==========================================================================
   CURSOS myoverview
   ========================================================================== */

/* Contenedor principal en cuadrícula adaptativa */
#page-my-index .block_myoverview [data-region="card-deck"],
#page-my-index .block_myoverview .card-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
    gap: 16px !important;
    width: 100% !important;
}

/* Forzar a que las columnas colindantes ocupen el espacio equitativamente */
#page-my-index .block_myoverview [data-region="card-deck"]>.col,
#page-my-index .block_myoverview .card-grid>.col,
#page-my-index .block_myoverview [data-region="paged-content-page"] .col {
    flex: unset !important;
    max-width: 100% !important;
    width: 100% !important;
    border: 1px solid #CBD5E1;
    border-radius: 12px;
}

/* Asegurar que las tarjetas interiores aprovechen todo el espacio de su celda */
#page-my-index .block_myoverview .dashboard-card,
#page-my-index .block_myoverview .card {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
}

#page.drawers div[role="main"] {
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 16px;
    border-radius: 6px;
}

#region-main {
    border-radius: 12px;
}

/* Estilo global para los títulos de los cursos en tarjetas */
.dashboard-card .coursename,
.card .coursename,
a.coursename {
    font-size: .91rem !important;
    font-weight: 600 !important;
    color: #59A9DD !important;
    text-decoration: none !important;
    display: inline-block;
    margin-top: 8px;
    text-transform: uppercase;
}

/* Efecto al pasar el cursor por encima */
a.coursename:hover {
    color: #2B82BA !important;
    text-decoration: underline !important;
}

/* Color para la estrella cuando el curso está destacado o marcado */
a.coursename .fa-star,
.dashboard-card .coursename .fa-star,
[data-region="favourite-icon"] .fa-star {
    color: #FFD123 !important;
    /* Cambia este código hexadecimal por el color que prefieras (ej. #FFC107 para dorado, #ff4d4d para rojo) */
}

/* Si quieres un color diferente o sutil cuando el curso NO está marcado como favorito */
a.coursename [data-region="is-favourite"]:not([aria-hidden="false"]) .fa-star {
    color: #b0bec5 !important;
    /* Color gris para cuando no está activo */
}




/* ========================================================== */
/* ROMPER EL GRID EN LA PÁGINA DE MIS CURSOS                  */
/* ========================================================== */
body.page-mycourses #region-main div[role="main"].custom-dashboard-grid {
    gap: 0 !important;
    padding: 0px;
    background-color: #f4f6f9;
}

body.page-mycourses div.custom-dashboard-grid {
    display: block !important;
    grid-template-columns: none !important;
    grid-template-areas: none !important;
}

body.page-mycourses div.custom-dashboard-grid #inst5,
body.page-mycourses div.custom-dashboard-grid [data-block="myoverview"] {
    grid-column: 1 / -1 !important;
    height: auto !important;
    max-height: 700px !important;
    width: 100% !important;
    max-width: 100% !important;
}


/* ==========================================
   4. HOMOLOGACIÓN GLOBAL DE UI (Sin afectar sub-cards)
   ========================================== */
.block_news_items,
.block_mentees,
.block_myoverview,
.block_timeline,
.block_calendar_month {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    padding: 16px !important;
    margin-bottom: 20px !important;
}

/* Homologación exclusiva de tarjetas internas */
.custom-announcement-card,
.custom-news-card,
.custom-timeline-card,
.block_mentees .content ul li,
.dashboard-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 16px !important;
    margin-bottom: 10px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.2s ease-in-out !important;
}

.custom-announcement-card:hover,
.custom-news-card:hover,
.custom-timeline-card:hover,
.block_mentees .content ul li:hover,
.dashboard-card:hover {
    border-color: #cbd5e1 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
}

/* Badges y Tags */
.custom-news-badge,
.course-label,
.grade-label,
.student-grade-tag,
.dashboard-card .badge,
.badge-secondary,
.course-name-slot {
    font-size: 11px !important;
    background-color: #f1f5f9 !important;
    color: #475569 !important;
    padding: 2px 8px !important;
    border-radius: 6px !important;
    font-weight: 500 !important;
    letter-spacing: 0.3px !important;
    display: inline-block !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: none !important;
    text-transform: uppercase !important;
}

/* Tipografía de Títulos */
.announcement-card-title,
.custom-news-title,
.custom-timeline-card .custom-title-slot a,
.block_mentees a,
.dashboard-card .dashboard-card-text {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: #1D5D87 !important;
    text-decoration: none !important;
}

/* Ocultar barra de control basura de MyOverview */
.block_myoverview [data-region="control-bar"],
.block_myoverview .myoverview-control-bar,
.block_myoverview .course-search {
    display: none !important;
}

/* Botón de Login Prominente */
#page-login-index #loginbtn,
.pagelayout-login button#loginbtn,
.login-form input[type="submit"],
.login-form button[type="submit"] {
    width: 100% !important;
    padding: 8px 16px !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.3s ease !important;
}

#page-login-index #loginbtn:hover,
.pagelayout-login button#loginbtn:hover,
.login-form input[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2) !important;
}

/* Ocultar la opción "Quitar de la vista" en los menús de las tarjetas de cursos */
.dropdown-item[data-action="hide-course"] {
    display: none !important;
}

/* Forzar la posición del menú desplegable de las tarjetas de cursos */
/* Estilo sólido y limpio para el menú desplegable de los cursos */
.dropdown-menu.show {
    margin-top: -35px !important;
    background: #fff !important;
    /* Anula cualquier degradado o transparencia previa */
    color: #0a2b70 !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

/* Asegurar que las opciones del menú mantengan el color correcto al abrirse */
/*.dropdown-menu.show .dropdown-item {color: #0a2b70 !important;}*/

.dropdown-menu.show .dropdown-item:hover {
    background-color: #2B82BA !important;
    color: #fff !important;
}


/* Ocultar el interruptor de edición y sus elementos asociados exclusivamente para los papás */
body.is-parent .editmode-switch-form,
body.is-parent input[name="setmode"] {
    display: none !important;
}

/* Opcional: Si quieres ocultar también el divisor vertical que lo acompaña */
body.is-parent .editmode-switch-form+.divider,
body.is-parent .divider:has(+ .editmode-switch-form) {
    display: none !important;
}

/* ==========================================
   ============ PAGINA DE INCIO ============ 
   ========================================== */
/* Convertir las discusiones del foro de avisos en la portada en un formato de tarjetas (cards) */


#page-site-index .course-section .section-item {
    background: #ffffff !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 6px 1px rgba(0, 0, 0, 0.04) !important;
    padding: 16px !important;
}

#page-site-index .forumpost {
    background: #ffffff !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 6px 1px rgba(0, 0, 0, 0.04) !important;
    padding: 16px !important;
    margin-bottom: 24px !important;
    transition: all 0.25s ease !important;
}

#page-site-index .forumpost:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
}

/* Estilizar la cabecera de cada tarjeta de aviso */
#page-site-index .forumpost .header {
    background: transparent !important;
    border-bottom: 1px solid #f3f4f6 !important;
    padding-bottom: 12px !important;
    margin-bottom: 12px !important;
}

#page-site-index .forumpost .header h3 {
    color: #1D5D87;
    font-size: 1.1rem;
}

#page-site-index .forumpost .header>div {
    color: #64748B;
}

#page-site-index .forumpost .header>div a {
    color: #59A9D9;
}

#page-site-index .forumpost .header>div time {
    color: #64748B;
}


/* Ajustar el tamaño de las imágenes dentro de los avisos para que no desborden la tarjeta */
#page-site-index .forumpost .content img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 8px !important;
    margin-top: 10px !important;
}

#page-site-index .author-groups-container {
    display: none;
}

/* --- Estilos personalizados para los títulos de actividades en la página de inicio --- */

.course-section-header h2,
#site-news-forum h2 {
    color: #0F3278;
    font-size: 1.4em;
    position: relative;
}

.course-section-header h2:before,
#site-news-forum h2:before {
    content: '';
    width: 32px;
    height: 3px;
    background-color: #FFD123;
    position: absolute;
    left: 0;
    bottom: -3px;
}

/* Contenedor general del título de la actividad */
body.path-site .activity-item .activitytitle,
body.path-site .activity-name-area {
    margin-bottom: 0.35rem;
}

/* Enlace y texto principal del título de la actividad */
body.path-site .activity-item .activityname a.aalink,
body.path-site .activity-item span.instancename {
    font-size: 1.15rem;
    font-weight: 600;
    color: #2B82BA !important;
    /* Tono oscuro elegante, puedes cambiarlo */
    transition: color 0.2s ease;
}

/* Efecto al pasar el cursor sobre el título de la actividad */
body.path-site .activity-item .activityname a.aalink:hover {
    color: #3182ce !important;
    /* Azul más claro o institucional al hacer hover */
    text-decoration: underline !important;
}


/* --- Forzar alineación de icono junto al título y descripción abajo (Alta Prioridad) --- */

/* 1. Contenedor general del elemento de actividad en columna */
body.path-site .activity-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

/* 2. Forzar que la zona del nombre (icono + título) se ponga en horizontal */
body.path-site .activity-item .activity-name-area,
body.path-site .activity-item div[data-region="activity-card"] .activity-grid {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: 100% !important;
    margin-bottom: 0.25rem !important;
}

/* 3. Estilo del icono para que se mantenga visible y a la izquierda */
body.path-site .activity-item .activity-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 24px !important;
    width: 32px;
    height: 32px !important;
    max-height: 60px;
    margin-right: 0.75rem !important;
    flex-shrink: 0 !important;
    background: #F8FAFC;
    padding: 4px;
}

body.path-site .activity-item .activity-icon img,
body.path-site .activity-item .activity-icon svg {
    width: 28px !important;
    height: 28px !important;
    border-radius: 4px;
}

/* 4. Título de la actividad al lado del icono */
body.path-site .activity-item .activitytitle {
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
}

/* 5. Empujar la descripción y metadatos hacia abajo, debajo del título y con margen */
body.path-site .activity-item .contentafter,
body.path-site .activity-item .description,
body.path-site .activity-item .activity-description,
body.path-site .activity-item .text-muted,
body.path-site .activity-item p {
    display: block !important;
    width: 100% !important;
    margin-top: 0rem !important;
    margin-left: 0.1rem !important;
    color: #334155;
    font-size: 1em;
    border: 0px;
    padding-top: 0px;
}

/* --- Eliminar el margen izquierdo (indented) en la página de inicio --- */
body.path-site .section .activity.indented .activity-item,
body.path-site .activity-item.indented,
body.path-site .activity-item {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* Asegurar que la grilla interna de la actividad comience desde el borde izquierdo */
body.path-site .activity-item .activity-grid,
body.path-site .activity-item .activity-name-area {
    margin-left: 0 !important;
    padding-left: 0 !important;
    width: 100%;
}


body.path-site .activity-item .activity-afterlink {
    grid-area: afterlink;
    margin-top: .1rem;
    padding-top: .5rem;
    border-top: 0px solid #dee2e6;
    color: #64748B;
}

body.path-site .activity-item .activity-afterlink span {
    color: #64748B;
}


/* --- Ocultar el botón "Todos los cursos" en el bloque de cursos de la portada --- */
body.path-site #frontpage-course-list .paging.paging-morelink,
body.path-site .frontpage-course-list-enrolled .paging-morelink {
    display: none !important;
}

/* ==========================================================
   GALERÍA DE MINIATURAS EN FOROS (TEMA MOOVE) - SEGURO
   ========================================================== */

body:not(#page-site-index) .author-groups-container {
    display: none !important;
}

/* Ocultar de forma segura la barra superior de filtros y configuraciones en los foros */
body#page-mod-forum-discuss .discussionname+div[data-content="forum-discussion"]>div.d-flex.flex-column.flex-sm-row,
body#page-mod-forum-discuss .discussionname~div>div.d-flex.flex-column.flex-sm-row.mb-1 {
    display: none !important;
}

/* 1. Contenedores de contenido y adjuntos en bloque debajo del texto */
body:not(#page-site-index) .post-content-container,
body:not(#page-site-index) .forumpost .text,
body:not(#page-site-index) .forumpost .attachedimages {
    display: block !important;
    margin-top: 12px !important;
    padding: 1rem;
}

body:not(#page-site-index) .forum-post-container .forumpost {
    background: #ffffff !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 6px 1px rgba(0, 0, 0, 0.04) !important;
    padding: 0px 0 24px 0 !important;
    margin-bottom: 24px !important;
    transition: all 0.25s ease !important;
}

body:not(#page-site-index) .forum-post-container {
    width: 90%;
    margin: 1rem auto;
}

body:not(#page-site-index) .forumpost header {
    background: #0F324A;
    background: linear-gradient(90deg, rgba(15, 50, 74, 1) 25%, rgba(43, 130, 186, 1) 100%);
    padding: 16px;
    border-radius: 14px 14px 0 0;
}

body:not(#page-site-index) .forumpost header .rounded-circle {
    border: 3px solid white;
    box-shadow: 2px 2px 8px #0000006b;
}

/* 2. Estilo de miniatura aplicado ÚNICAMENTE dentro del texto y adjuntos (respeta el avatar) */
body:not(#page-site-index) .forumpost .text img,
body:not(#page-site-index) .forumpost .attachedimages img,
body:not(#page-site-index) .post-content-container img {
    display: inline-block !important;
    width: 130px !important;
    height: 130px !important;
    min-width: 130px !important;
    min-height: 130px !important;
    max-width: 130px !important;
    max-height: 130px !important;
    object-fit: cover !important;
    background-color: #ffffff !important;
    padding: 3px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
    margin: 0 10px 10px 0 !important;
    vertical-align: top !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
    cursor: pointer !important;
}


/* Forzar tamaño completo y legible en las imágenes dentro de la vista de discusión de foros */
body#page-mod-forum-discuss .forumpost img,
body#page-mod-forum-discuss .forum-post-container img,
body.path-mod-forum .forum-post-container img {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: contain !important;
    display: block !important;
    margin: 15px auto !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
    padding: 0 !important;
    background: transparent !important;
}

/* 3. Efecto hover elegante al pasar el cursor por las miniaturas */
body:not(#page-site-index) .forumpost .text img:hover,
body:not(#page-site-index) .forumpost .attachedimages img:hover,
body:not(#page-site-index) .post-content-container img:hover {
    transform: translateY(-3px) !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.12), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}


body:not(#page-site-index) .forumpost h3[data-region-content="forum-post-core-subject"],
body:not(#page-site-index) .forumpost .forum-post-core-subject {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #FFF !important;
    line-height: 1.4 !important;
    margin-bottom: 2px !important;
    letter-spacing: -0.01em !important;
    text-transform: uppercase;
}

body:not(#page-site-index) .forumpost h3+div {
    color: #FFF;
}

body:not(#page-site-index) .forumpost h3+div a {
    color: #59A9DD !important;
}

/* ==========================================================
   ESTILOS DE MINIATURA DENTRO DEL EDITOR TINYMCE (MOODLE)
   ========================================================== */

/* Forzar tamaño de miniatura y recorte dentro del iframe del editor TinyMCE */
.mce-content-body img,
body#tinymce.mce-content-body img,
.tox-edit-area iframe img {
    width: 130px !important;
    height: 130px !important;
    min-width: 130px !important;
    min-height: 130px !important;
    max-width: 130px !important;
    max-height: 130px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
    display: inline-block !important;
    margin: 5px !important;
}


/* Ajustar imágenes en foros de la página de inicio */
.path-mod-forum .forum-post img,
.block_recentlyaccesseditems img,
.forumpost img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    /* Opcional si quieres suavizar los bordes */
}

/* ==========================================================
   NEUTRALIZADOR DE LIGHTBOX EN PORTADA (#page-site-index)
   ========================================================== */

/* Evita que contenedores de lightbox oculten o alteren la parrilla del sitio */
#page-site-index .lightbox-overlay,
#page-site-index .venoBox,
#page-site-index [data-lightbox] {
    /* Forzar que no bloqueen el flujo normal si se quedan colgados */
    pointer-events: auto !important;
}

/* Asegurar que los enlaces de las actividades respondan al clic nativo y no sean interceptados */
#page-site-index .activityname a.aalink {
    pointer-events: auto !important;
    position: relative !important;
    z-index: 10 !important;
}

/* Prevenir que imágenes envueltas en lightbox fuercen anchos extraños en la portada */
#page-site-index .course-content img,
#page-site-index .site-summary img {
    max-width: 100% !important;
    height: auto !important;
    cursor: default !important;
    /* Si quieres quitar el cursor de lupa del lightbox */
}

/* =============================================================
   ESTILOS DE TARJETAS TIPO "AVISOS" PARA RESUMEN SEMANAL
   ============================================================*/

.weekly-summary-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 8px;
}

.weekly-folder-card-link {
    text-decoration: none !important;
    display: block;
}

.weekly-folder-card-item {
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    background: #fff;
    padding: 16px;
    transition: all 0.25s ease-in-out;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

/* Efecto Hover general de toda la tarjeta (se eleva y cambia borde/sombra) */
.weekly-folder-card-link:hover .weekly-folder-card-item {
    border-color: #94a3b8;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

/* Badge superior del curso */
.weekly-badge {
    display: inline-block;

    font-size: 11px !important;
    background-color: #f1f5f9 !important;
    color: #475569 !important;
    padding: 2px 8px !important;
    border-radius: 6px !important;
    font-weight: 500 !important;
    letter-spacing: 0.3px !important;
    display: inline-block !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: none !important;
    text-transform: uppercase !important;
    margin-bottom: 8px;
}

/* Cuerpo de la tarjeta (Texto a la izquierda, Botón de flecha a la derecha) */
.weekly-card-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.weekly-card-text-content {
    flex: 1;
}

.weekly-card-title {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: #1D5D87 !important;
    text-decoration: none !important;
}

.weekly-card-desc {
    font-size: 13px;
    color: #64748b;
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Botón circular de la flecha */
.weekly-arrow-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    background-color: #E9F4FB;
    color: #59A9DD;
    margin-left: 12px;
    font-weight: bold;
    text-decoration: none;
    font-size: 1rem;
    flex-shrink: 0;
    transition: background-color 0.2s ease, transform 0.2s ease;
    transform: translateX(-16px);
}

/* Cambio de color del botón de flecha al hacer hover en la tarjeta */
.weekly-folder-card-link:hover .weekly-arrow-btn {
    background-color: #59A9DD !important;
    color: #ffffff !important;
    transform: translateX(0px) !important;
    text-decoration: none !important;
}


/* ==========================================================
   CSS: MINIATURAS Y TRUNCADO EN LA TABLA DE CALIFICACIONES
   ========================================================== */

#submissions .assignsubmission_onlinetext p,
.gradingtable .assignsubmission_onlinetext p,
#submissions .no-overflow p {
    margin-bottom: .4em;
}

/* Convierte las imágenes de los envíos de los alumnos en miniaturas ordenadas */

#submissions .assignsubmission_onlinetext img,
.gradingtable .assignsubmission_onlinetext img,
#submissions .no-overflow img {
    width: auto !important;
    max-width: 80px !important;
    height: auto !important;
    max-height: 100px !important;
    object-fit: contain !important;
    border-radius: 4px !important;
    border: 1px solid #ced4da !important;
    display: block !important;
    margin: 3px !important;
}

/* Evita que los iconos del sistema o lupas sufran alteraciones */
#submissions img.icon,
.gradingtable img.icon {
    width: auto !important;
    max-width: none !important;
    height: auto !important;
}

/* Limita la altura del contenedor de texto y activa el scroll interno */
#submissions .no-overflow,
.gradingtable .assignsubmission_onlinetext {
    max-height: 130px !important;
    overflow-y: auto !important;
    padding-right: 5px !important;
}

/* ==========================================================================
PÁGINA DE ENVIOS
   ========================================================================== */
/* 1. Contenedor de la tabla: activa el scroll horizontal aislado */
div.gradingtable {
    overflow-x: auto !important;
    overflow-y: visible !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* 2. Estructura de la tabla: fuerza el ancho para mostrar todas las columnas */
table#submissions {
    display: table !important;
    width: max-content !important;
    min-width: 100% !important;
    margin: 0 !important;
}

.path-mod-assign .gradingtable thead tr {
    top: 0;
}

/* 3. Cuerpo de la tabla (tbody): evita que las filas queden ocultas arriba */
table#submissions tbody {
    display: table-row-group !important;
    position: relative !important;
    top: 00px !important;
    /* Puedes ajustar este valor en píxeles según el espacio exacto que requiera tu tema */
}





/* ==========================================================================
   1. DISEÑO DE LA PÁGINA DE LOGIN (Dos columnas: Imagen + Formulario)
   ========================================================================== */
@media (min-width: 768px) {
    body#page-login-index {
        background-color: #ffffff !important;
    }

    body#page-login-index #page-wrapper {
        display: flex !important;
        flex-direction: row !important;
        min-height: 100vh !important;
        width: 100vw !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Columna Izquierda: Imagen institucional (50%) */
    body#page-login-index #page-wrapper::before {
        content: "" !important;
        width: 50vw !important;
        min-height: 100vh !important;
        background-image: url('images/login-dc-light.jpeg') !important;
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        display: block !important;
    }

    /* Columna Derecha: Formulario centrado (50%) */
    body#page-login-index #page {
        width: 50vw !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #ffffff !important;
        padding: 2rem !important;
        margin: 0 !important;
    }

    /* Ancho forzado de tarjeta (400px) */
    body#page-login-index #page-content,
    body#page-login-index #region-main-box,
    body#page-login-index #region-main,
    body#page-login-index .login-container,
    body#page-login-index .loginform,
    body#page-login-index .card,
    body#page-login-index .card-body {
        width: 100% !important;
        max-width: 400px !important;
        min-width: 360px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        box-shadow: none !important;
        border: none !important;
        background: transparent !important;
    }

    /* Input Group del password (botón del ojo integrado) */
    body#page-login-index .input-group {
        display: flex !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
    }

    body#page-login-index .input-group .form-control {
        flex: 1 1 auto !important;
        width: 1% !important;
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }

    body#page-login-index .input-group .input-group-append,
    body#page-login-index .input-group [data-password-toggle] {
        display: flex !important;
        margin-left: -1px !important;
    }

    body#page-login-index .input-group .input-group-append .btn,
    body#page-login-index .input-group [data-password-toggle] .btn {
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Botón principal de Iniciar Sesión */
    body#page-login-index #loginbtn,
    body#page-login-index .btn-primary {
        width: 100% !important;
        display: block !important;
        margin-top: 1rem !important;
        white-space: normal !important;
        background-color: #003366 !important;
        border-color: #002244 !important;
        color: #ffffff !important;
        border-radius: 6px !important;
        padding: 0.6rem 1rem !important;
        font-weight: 500 !important;
    }

    body#page-login-index #loginbtn:hover,
    body#page-login-index .btn-primary:hover {
        background-color: #002244 !important;
        border-color: #001122 !important;
    }
}


/* ==========================================================================
AJUSTE RESPONSIVO MÓVIL (max-width: 767.98px)
   ========================================================================== */
@media (max-width: 767.98px) {
     #region-main div.custom-dashboard-grid>section.block {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        min-height: 100px !important;
    }

    #region-main div[role="main"].custom-dashboard-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        width: 100% !important;
    }

    #page-my-index .block,
    #page-my-index [data-block] {
        width: 100% !important;
        max-width: 100% !important;
        grid-column: auto !important;
        grid-row: auto !important;
    }

    /* Ordenamiento secuencial en móviles */

    /*AVISOS GENERALES*/
    #page-my-index [data-block="news_items"],
    #page-my-index .block_news_items {
        order: 1 !important;
        height: auto;
        max-height: 580px !important;
        min-height: 100px !important;
    }

    /*AVISOS MIS GRUPOS*/
    #page-my-index [data-block="html"] {
        order: 2 !important;
        height: auto;
        max-height: 580px !important;
        min-height: 100px !important;
    }

    /*TAREAS*/
    #page-my-index [data-block="timeline"],
    #page-my-index .block_timeline {
        order: 3 !important;
        height: auto;
        max-height: 780px !important;
        min-height: 100px !important;
    }

    /*CALENDARIO*/
    #page-my-index [data-block="calendar_month"],
    #page-my-index .block_calendar_month {
        order: 4 !important;
        height: auto;
        max-height: 780px !important;
        min-height: 100px !important;
    }

    /*ALUMNOS*/
    #page-my-index [data-block="mentees"],
    #page-my-index .block_mentees {
        order: 7 !important;
        height: auto;
        max-height: 480px !important;
        min-height: 100px !important;
    }

    /*MIS GRUPOS*/
    #page-my-index [data-block="myoverview"],
    #page-my-index .block_myoverview {
        order: 6 !important;
        height: auto;
        max-height: 780px !important;
        min-height: 100px !important;
    }



    /*RESUMEN SEMANAL*/
    #page-my-index div.custom-dashboard-grid>section.block_html:has(.weekly-summary-container) {
        order: 5 !important;
    }


    body.pagelayout-login #page {
        background-image: url(images/login-dc-light.jpeg) !important;
        background-size: inherit;
        background-color: #1d2125c9 !important;
        background-blend-mode: luminosity;
    }

    /* ==== TAREAS ==== */
    #page-my-index .block_timeline div.p-0:first-child {
        display: none;
    }

    .block_news_items .content ul li .announcement-card-content {
        padding-top: 0px;
        transform: translate(0, 50%);
    }

    body:not(#page-site-index) .forum-post-container {
        width: 100% !important;
        margin: 1rem auto !important;
    }
    
    /* == TABLA PARTICIPANTES ==*/
    
        /* 1. Forzamos el formulario principal para que no permita fugas de elementos */
    #participantsform {
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    /* 2. Anulamos el "overflow: visible" de Moodle y activamos el scroll horizontal */
    #participantsform .no-overflow,
    .path-user-index .no-overflow,
    div[data-region="core_user/dynamic"] {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        max-width: 100% !important;
        width: 100% !important;
        display: block !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* 3. La tabla se ajusta para permitir el desplazamiento lateral sin romper la tarjeta */
    #participantsform table#participants,
    #participants {
        width: max-content !important;
        min-width: 100% !important;
    }

    /* 4. Evitamos que el texto de las celdas se rompa o baje de línea */
    #participantsform table#participants th,
    #participantsform table#participants td,
    #participants th,
    #participants td {
        white-space: nowrap !important;
    }
}


/* ==== 480px ==== */
@media (max-width: 480px) {

    #page-login-index .login-container .loginform {
        padding: 8px !important;
        margin: 10vh 0 0 0;
    }

    /* ==== AVISOS ==== */
    li.post.custom-announcement-card a.announcement-card-link>.custom-news-arrow,
    .custom-news-arrow,
    .custom-arrow-btn,
    .block_mentees .content ul li .mentee-card-wrapper a.custom-arrow-btn,
    .block_mentees .content ul li a.custom-arrow-btn {
        display: none !important;
    }

    /* ==== TAREAS ==== */
    .custom-timeline-details {
        position: relative;
    }

    .timeline-section-name {
        position: relative;
        display: block;
        top: 0px;
        right: 0px;
    }

    .timeline-separator,
    .timeline-label-entrega {
        display: none !important;
    }

    .timeline-calendar-emoji {
        margin-left: 0px;
        margin-right: 8px;
    }

    .timeline-date-text {
        display: inline-block;
        width: 212px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: initial;
        vertical-align: middle;
    }

    .custom-card-body {
        flex-direction: column !important;
        align-items: baseline;
    }

    .custom-card-info {
        gap: 0;
    }

    .block_timeline .event-action {
        padding-left: 0 !important;
    }

    #page-my-index .block h5 {
        margin-bottom: 0px !important;
        padding-bottom: 0px !important;
    }

    /* ==== AVISOS DE MIS GRUPOS=== */
    .block_news_items .content ul li .announcement-card-content {
        padding-top: 0px;
        transform: translate(0, 10%);
    }

    .block_news_items .content ul li .announcement-card-content {
        padding-top: 8px;
    }
}