/**
 * =============================================================================
 * SISTEMA DE ESTILOS VISUALES PROFESIONALES - FORMA DE TRABAJO ROBIN
 * Moodle 5.x - Clean Enterprise SaaS Design System
 * =============================================================================
 */

/* =============================================================================
   1. RESET TIPOGRÁFICO Y BASE (BAJAR EL VOLUMEN DE LAS LETRAS)
   ============================================================================= */
:root {
    --robin-font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --bs-body-color: #0f172a !important;
    --bs-link-color: #0f172a !important;
    --bs-link-hover-color: #000000 !important;
    --bs-heading-color: #0f172a !important;
    --robin-primary: #0f172a;
    --robin-primary-hover: #000000;
    --robin-primary-light: #f1f5f9;
    --robin-border: #e2e8f0;
    --robin-border-focus: #3b82f6;
    --robin-bg-page: #f8fafc;
    --robin-bg-surface: #ffffff;
    --robin-text-main: #0f172a;
    --robin-text-muted: #475569;
    --robin-text-secondary: #334155;
}

body, html, #page, #page-wrapper, .main-inner {
    font-family: var(--robin-font-sans) !important;
    font-size: 0.875rem !important; /* 14px legible y profesional */
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: #0f172a !important;
    background-color: var(--robin-bg-page) !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* REGLA GENERAL: TODOS LOS ENLACES DE TODO MOODLE EN NEGRO (EXCLUYENDO BOTONES) */
a:not(.btn),
a:not(.btn):visited,
a:not(.btn):link,
.btn-link,
.nav-link,
.dropdown-item,
.aalink,
.instancename {
    color: #0f172a !important;
    text-decoration: none !important;
}

a:not(.btn):hover,
a:not(.btn):focus,
.btn-link:hover,
.nav-link:hover,
.dropdown-item:hover,
.aalink:hover {
    color: #000000 !important;
    text-decoration: underline !important;
}

/* =============================================================================
   SISTEMA DE BOTONES PROFESIONALES DE ALTO CONTRASTE (ESTÁNDARES MUNDIALES)
   ============================================================================= */
/* 1. Botones Primarios (Acciones Principales: Calificar, Guardar, etc.) */
.btn-primary,
a.btn-primary,
a.btn.btn-primary,
button.btn-primary,
input[type="submit"].btn-primary,
input[type="button"].btn-primary,
.btn-dark,
a.btn-dark,
button.btn-dark,
.btn-primary:visited,
.btn-primary:link,
a.btn-primary:visited,
a.btn-primary:link,
a.btn.btn-primary:visited,
a.btn.btn-primary:link {
    background-color: #0f172a !important;
    border: 1px solid #0f172a !important;
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    padding: 0.5rem 1.25rem !important;
    font-size: 0.875rem !important;
    line-height: 1.4 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    transition: all 0.15s ease-in-out !important;
}

.btn-primary *,
a.btn-primary *,
a.btn.btn-primary *,
button.btn-primary *,
.btn-dark * {
    color: #ffffff !important;
    fill: #ffffff !important;
}

.btn-primary:hover,
.btn-primary:focus,
a.btn-primary:hover,
a.btn-primary:focus,
a.btn.btn-primary:hover,
a.btn.btn-primary:focus,
button.btn-primary:hover,
button.btn-primary:focus,
input[type="submit"].btn-primary:hover,
input[type="button"].btn-primary:hover,
.btn-dark:hover,
a.btn-dark:hover {
    background-color: #1e293b !important;
    border-color: #1e293b !important;
    color: #ffffff !important;
    text-decoration: none !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

/* 2. Botones Secundarios y Default (Ver todos los envíos, Cancelar, etc.) */
.btn-secondary,
a.btn-secondary,
a.btn.btn-secondary,
button.btn-secondary,
input[type="submit"].btn-secondary,
input[type="button"].btn-secondary,
.btn-outline-secondary,
a.btn-outline-secondary,
.btn-default,
a.btn-default,
button.btn-default,
.btn-secondary:visited,
.btn-secondary:link,
a.btn-secondary:visited,
a.btn-secondary:link,
a.btn.btn-secondary:visited,
a.btn.btn-secondary:link {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    border-radius: 8px !important;
    padding: 0.5rem 1.25rem !important;
    font-size: 0.875rem !important;
    line-height: 1.4 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    transition: all 0.15s ease-in-out !important;
}

.btn-secondary *,
a.btn-secondary *,
a.btn.btn-secondary *,
button.btn-secondary * {
    color: #0f172a !important;
    fill: #0f172a !important;
}

.btn-secondary:hover,
.btn-secondary:focus,
a.btn-secondary:hover,
a.btn-secondary:focus,
a.btn.btn-secondary:hover,
a.btn.btn-secondary:focus,
button.btn-secondary:hover,
button.btn-secondary:focus,
input[type="submit"].btn-secondary:hover {
    background-color: #f8fafc !important;
    border-color: #94a3b8 !important;
    color: #000000 !important;
    text-decoration: none !important;
}

/* 3. Navegación Terciaria en Tareas y Actividades */
.tertiary-navigation {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 1.5rem !important;
    margin-top: 0.75rem !important;
}

.tertiary-navigation .d-flex {
    gap: 0.75rem !important;
    flex-wrap: wrap !important;
}

/* Reducción equilibrada de jerarquía de encabezados */
h1, .h1 {
    font-size: 1.35rem !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    letter-spacing: -0.015em !important;
    margin-bottom: 0.75rem !important;
}

h2, .h2 {
    font-size: 1.15rem !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    letter-spacing: -0.01em !important;
    margin-bottom: 0.6rem !important;
}

h3, .h3 {
    font-size: 1.02rem !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    margin-bottom: 0.5rem !important;
}

h4, .h4, h5, .h5, h6, .h6 {
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    color: #334155 !important;
    margin-bottom: 0.4rem !important;
}

/* Todos los enlaces dentro de encabezados heredan el color negro/oscuro */
h1 a, .h1 a,
h2 a, .h2 a,
h3 a, .h3 a,
h4 a, .h4 a,
h5 a, .h5 a,
h6 a, .h6 a {
    color: inherit !important;
    text-decoration: none !important;
}

h1 a:hover, .h1 a:hover,
h2 a:hover, .h2 a:hover,
h3 a:hover, .h3 a:hover,
h4 a:hover, .h4 a:hover,
h5 a:hover, .h5 a:hover,
h6 a:hover, .h6 a:hover {
    color: #0f172a !important;
    text-decoration: none !important;
}

p, li, td, th {
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
}

small, .text-muted {
    font-size: 0.78rem !important;
    color: var(--robin-text-muted) !important;
    font-weight: 400 !important;
}

/* =============================================================================
   2. NAVBAR SUPERIOR (CONTRASTE PERFECTO, CAMPANA Y MENSAJES 100% VISIBLES)
   ============================================================================= */
.navbar.fixed-top {
    background-color: #ffffff !important;
    background-image: none !important;
    border-bottom: 1px solid var(--robin-border) !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03) !important;
    min-height: 56px !important;
    padding: 0.35rem 1.5rem !important;
}

.navbar-brand {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    letter-spacing: -0.02em !important;
    margin-right: 1.5rem !important;
}

.navbar-brand .site-name {
    color: #0f172a !important;
}

/* Links de navegación principal */
.primary-navigation .navigation .nav-link {
    color: #475569 !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    padding: 0.45rem 0.85rem !important;
    border-radius: 6px !important;
    margin: 0 0.15rem !important;
    transition: all 0.15s ease !important;
}

.primary-navigation .navigation .nav-link:hover {
    color: #0f172a !important;
    background-color: #f1f5f9 !important;
}

.primary-navigation .navigation .nav-link.active,
.primary-navigation .navigation .nav-link[aria-current="true"] {
    color: var(--robin-primary) !important;
    background-color: var(--robin-primary-light) !important;
    font-weight: 600 !important;
}

/* ICONOS DE NOTIFICACIONES (CAMPANA) Y MENSAJES (BURBUJA) - TOTALMENTE VISIBLES */
.navbar .popover-region .nav-link,
.navbar .popover-region-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 8px !important;
    color: #475569 !important;
    position: relative !important;
    transition: all 0.15s ease !important;
}

.navbar .popover-region .nav-link:hover,
.navbar .popover-region-toggle:hover {
    color: #0f172a !important;
    background-color: #f1f5f9 !important;
}

.navbar .popover-region .icon,
.navbar .popover-region-toggle .icon,
.navbar .popover-region-toggle i,
.navbar .popover-region-toggle svg,
.popover-region-notifications .icon,
.popover-region-messages .icon {
    color: #475569 !important;
    fill: #475569 !important;
    font-size: 1.15rem !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    transition: color 0.15s ease, fill 0.15s ease !important;
}

.navbar .popover-region .nav-link:hover .icon,
.navbar .popover-region-toggle:hover .icon,
.navbar .popover-region-toggle:hover i,
.navbar .popover-region-toggle:hover svg {
    color: #0f172a !important;
    fill: #0f172a !important;
}

/* Badge de contador de notificaciones */
.navbar .popover-region .count-container {
    background-color: #ef4444 !important;
    color: #ffffff !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    min-width: 16px !important;
    height: 16px !important;
    line-height: 14px !important;
    border-radius: 9999px !important;
    padding: 1px 4px !important;
    position: absolute !important;
    top: 3px !important;
    right: 1px !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
}

/* Switch Modo de Edición */
.navbar .editmode-switch-form {
    display: flex !important;
    align-items: center !important;
    margin-right: 0.75rem !important;
}

.navbar .editmode-switch-form .form-check-label,
.navbar .editmode-switch-form label {
    color: #475569 !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    margin-right: 0.5rem !important;
    margin-bottom: 0 !important;
}

.navbar .editmode-switch-form .custom-control-input:checked ~ .custom-control-label::before,
.navbar .editmode-switch-form .form-check-input:checked {
    background-color: var(--robin-primary) !important;
    border-color: var(--robin-primary) !important;
}

/* Separador vertical de la barra */
.navbar .divider {
    border-left: 1px solid var(--robin-border) !important;
    height: 20px !important;
    margin: 0 0.6rem !important;
}

/* Menú de Usuario / Avatar */
.navbar .userinitials {
    background-color: #e0e7ff !important;
    color: #3730a3 !important;
    font-weight: 600 !important;
    font-size: 0.82rem !important;
    border: 1px solid #c7d2fe !important;
    box-shadow: none !important;
}

/* =============================================================================
   3. CONTENEDOR PRINCIPAL Y ESTRUCTURA DE PÁGINA (ESPACIOSO Y MODERNO)
   ============================================================================= */
#page.drawers .main-inner {
    max-width: 1300px !important;
    width: 94% !important;
    margin: 1.25rem auto !important;
    background-color: var(--robin-bg-surface) !important;
    border-radius: 12px !important;
    border: 1px solid var(--robin-border) !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.03) !important;
    padding: 1.75rem 2rem !important;
}

.limitedwidth {
    max-width: 100% !important;
}

/* =============================================================================
   4. FORMULARIOS DE MOODLE (ACORDEONES Y SECCIONES REFINADAS)
   ============================================================================= */
/* Acordeones limpios para configuración y edición */
.mform fieldset {
    border: 1px solid var(--robin-border) !important;
    border-radius: 8px !important;
    margin-bottom: 0.85rem !important;
    background-color: #ffffff !important;
    overflow: hidden !important;
}

.mform fieldset legend a,
.mform .fheader {
    font-size: 0.92rem !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    padding: 0.65rem 1rem !important;
    background-color: #f8fafc !important;
    border-bottom: 1px solid var(--robin-border) !important;
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
    transition: background-color 0.15s ease !important;
}

.mform fieldset legend a:hover {
    background-color: #f1f5f9 !important;
    color: var(--robin-primary) !important;
}

/* Quitar el fondo azul feo del círculo de flecha nativo */
.mform .fheader .icon,
.mform fieldset legend .icon {
    font-size: 0.75rem !important;
    color: #64748b !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-right: 0.6rem !important;
    width: auto !important;
    height: auto !important;
}

/* Etiquetas y campos de formulario */
.mform .form-label,
.form-item .form-label {
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    color: #475569 !important;
    margin-bottom: 0.25rem !important;
}

.mform .form-control,
.form-control {
    font-size: 0.85rem !important;
    font-weight: 400 !important;
    border-radius: 6px !important;
    border: 1px solid #cbd5e1 !important;
    padding: 0.45rem 0.75rem !important;
    color: #1e293b !important;
    background-color: #ffffff !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.mform .form-select,
.form-select {
    font-size: 0.85rem !important;
    font-weight: 400 !important;
    border-radius: 6px !important;
    border: 1px solid #cbd5e1 !important;
    /* Preserva el espacio a la derecha (2.25rem) para la flecha svg desplegable */
    padding: 0.45rem 2.25rem 0.45rem 0.75rem !important;
    color: #1e293b !important;
    background-color: #ffffff !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

/* Selectores de fecha y hora nativos de Moodle (evita texto solapado y asegura fluidez responsiva) */
.fdate_selector,
.fdate_time_selector {
    display: inline-flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
}

.fdate_selector .form-select,
.fdate_time_selector .form-select,
.fdate_selector select,
.fdate_time_selector select {
    width: auto !important;
    display: inline-block !important;
    padding: 0.4rem 2rem 0.4rem 0.65rem !important;
    margin-right: 0.25rem !important;
    margin-bottom: 0.25rem !important;
}

.mform .form-control:focus,
.mform .form-select:focus,
.form-control:focus,
.form-select:focus {
    border-color: var(--robin-border-focus) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
    outline: none !important;
}

/* Área de subida de archivos (Filepicker drag & drop) */
.filemanager-container,
.filepicker-filelist {
    border: 1.5px dashed #cbd5e1 !important;
    border-radius: 8px !important;
    background-color: #f8fafc !important;
    padding: 1.25rem !important;
    transition: border-color 0.15s ease, background-color 0.15s ease !important;
}

.filemanager-container:hover {
    border-color: var(--robin-primary) !important;
    background-color: #f0f7ff !important;
}

.dndupload-message {
    font-size: 0.82rem !important;
    color: #64748b !important;
    font-weight: 400 !important;
}

/* Botones de acción (Guardar cambios y Cancelar) */
.fitem.fitem_actionbuttons {
    padding-top: 1.25rem !important;
    border-top: 1px solid var(--robin-border) !important;
    margin-top: 1.5rem !important;
}

.btn {
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    border-radius: 6px !important;
    padding: 0.45rem 1.15rem !important;
    transition: all 0.15s ease !important;
}

.btn-primary,
input[type="submit"].btn-primary {
    background-color: var(--robin-primary) !important;
    border-color: var(--robin-primary) !important;
    color: #ffffff !important;
    box-shadow: 0 1px 2px 0 rgba(37, 99, 235, 0.2) !important;
}

.btn-primary:hover,
input[type="submit"].btn-primary:hover {
    background-color: var(--robin-primary-hover) !important;
    border-color: var(--robin-primary-hover) !important;
    box-shadow: 0 2px 4px 0 rgba(37, 99, 235, 0.25) !important;
}

.btn-secondary,
input[type="submit"].btn-secondary {
    background-color: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
}

.btn-secondary:hover,
input[type="submit"].btn-secondary:hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
    border-color: #94a3b8 !important;
}

/* =============================================================================
   5. TARJETAS Y COMPONENTES VISUALES
   ============================================================================= */
.card, .dashboard-card {
    border-radius: 10px !important;
    border: 1px solid var(--robin-border) !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.03) !important;
    background-color: #ffffff !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.card:hover {
    box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.06) !important;
}

.card-header {
    background-color: #ffffff !important;
    border-bottom: 1px solid var(--robin-border) !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    padding: 0.75rem 1rem !important;
}

/* Badges / Etiquetas */
.badge {
    border-radius: 6px !important;
    padding: 0.3em 0.65em !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
}

/* =============================================================================
   6. PANTALLA DE INICIO DE SESIÓN ELEGANTE (LOGIN)
   ============================================================================= */
.pagelayout-login {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #090d16 100%) !important;
    min-height: 100vh;
}

.pagelayout-login #page {
    background: transparent !important;
}

.pagelayout-login .login-wrapper {
    max-width: 440px !important;
    margin: 3.5rem auto !important;
}

.pagelayout-login .login-container {
    background: #ffffff !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.3) !important;
    padding: 2.25rem !important;
    position: relative;
    overflow: hidden;
}

.pagelayout-login .login-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #2563eb, #38bdf8, #6366f1);
}

.pagelayout-login .login-heading {
    font-weight: 600 !important;
    font-size: 1.35rem !important;
    color: #0f172a !important;
    letter-spacing: -0.02em;
    margin-bottom: 0.4rem;
}

.pagelayout-login .form-control {
    border-radius: 8px !important;
    border: 1px solid #cbd5e1 !important;
    padding: 0.65rem 0.9rem !important;
    font-size: 0.875rem !important;
}

.pagelayout-login .btn-primary, #loginbtn {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 0.65rem 1.25rem !important;
    font-weight: 500 !important;
    font-size: 0.9rem !important;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25) !important;
}

/* =============================================================================
   7. PANEL LATERAL IZQUIERDO DE NAVEGACIÓN (COURSE INDEX DRAWER)
   - Armonía visual sobria, diseño SaaS educativo de élite.
   - Cero enlaces azules crudos o desordenados.
   - Textos nítidos en slate oscuro, jerarquía impecable y estados hover/activo pulidos.
   ============================================================================= */

/* Contenedor del Drawer Izquierdo */
.drawer-left,
#theme_boost-drawers-courseindex,
[data-region="fixed-drawer-left"] {
    background-color: #ffffff !important;
    border-right: 1px solid var(--robin-border) !important;
    box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 0.02) !important;
}

/* Cabecera del Drawer (Título del curso en el lateral) */
.drawerheader,
.drawer-left .drawerheader {
    border-bottom: 1px solid #f1f5f9 !important;
    padding: 0.85rem 1rem !important;
    background-color: #ffffff !important;
    min-height: 56px !important;
}

#courseindexdrawerheading,
#courseindexdrawerheading a,
#courseindexdrawerheading .courseindex-link {
    color: #0f172a !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    text-decoration: none !important;
    display: inline-block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

#courseindexdrawerheading a:hover,
#courseindexdrawerheading .courseindex-link:hover {
    color: #1e293b !important;
    text-decoration: none !important;
}

/* Botones de control del Drawer (Opciones y Cerrar) */
#courseindexdrawercontrols button,
.drawer-left [data-action="closedrawer"] {
    background: transparent !important;
    border: none !important;
    color: #64748b !important;
    border-radius: 8px !important;
    width: 32px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.15s ease !important;
}

#courseindexdrawercontrols button:hover,
.drawer-left [data-action="closedrawer"]:hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}

#courseindexdrawercontrols .icon,
.drawer-left [data-action="closedrawer"] .icon,
.drawer-left [data-action="closedrawer"] svg {
    color: #64748b !important;
    font-size: 0.9rem !important;
}

/* Contenedor del árbol de navegación */
.courseindex {
    padding: 0.75rem 0.5rem 2rem 0.5rem !important;
}

.courseindex .courseindex-section {
    margin-bottom: 0.35rem !important;
}

/* Título de Sección dentro del Drawer Izquierdo */
.courseindex .courseindex-item.courseindex-section-title {
    padding: 0.45rem 0.65rem !important;
    border-radius: 8px !important;
    margin-bottom: 2px !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
    align-items: center !important;
}

.courseindex .courseindex-item.courseindex-section-title:hover {
    background-color: #f8fafc !important;
}

/* Enlace del título de sección en el Drawer (Negro carbón sólido, Cero Azul) */
.courseindex .courseindex-item.courseindex-section-title a,
.courseindex .courseindex-item.courseindex-section-title .courseindex-link,
.courseindex .courseindex-item.courseindex-section-title span.text-truncate {
    color: #0f172a !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    text-decoration: none !important;
}

.courseindex .courseindex-item.courseindex-section-title:hover a,
.courseindex .courseindex-item.courseindex-section-title:hover .courseindex-link {
    color: #0f172a !important;
    text-decoration: none !important;
}

/* Flechas/Chevrons de colapsar la sección en el Drawer */
.courseindex .courseindex-item .courseindex-chevron {
    color: #94a3b8 !important;
    padding: 2px 4px !important;
    margin-right: 0.35rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    transition: color 0.15s ease !important;
}

.courseindex .courseindex-item .courseindex-chevron:hover {
    color: #0f172a !important;
}

.courseindex .courseindex-item .courseindex-chevron .icon,
.courseindex .courseindex-item .courseindex-chevron svg {
    font-size: 0.75rem !important;
    color: #94a3b8 !important;
}

/* Elementos de Actividades y Módulos dentro del Drawer (Hijos indentados) */
.courseindex .courseindex-sectioncontent {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0 !important;
}

.courseindex .courseindex-item {
    padding: 0.35rem 0.65rem 0.35rem 1.6rem !important;
    border-radius: 6px !important;
    margin: 2px 0 2px 0.25rem !important;
    transition: all 0.15s ease !important;
    display: flex !important;
    align-items: center !important;
    border-left: 2px solid transparent !important;
}

.courseindex .courseindex-item:hover {
    background-color: #f1f5f9 !important;
}

/* Enlaces de las actividades en el Drawer (Gris pizarra elegante y distinguible) */
.courseindex .courseindex-item .courseindex-link {
    color: #475569 !important;
    font-size: 0.82rem !important;
    font-weight: 450 !important;
    text-decoration: none !important;
    line-height: 1.35 !important;
}

.courseindex .courseindex-item:hover .courseindex-link {
    color: #0f172a !important;
    text-decoration: none !important;
}

/* Estado ACTIVO / SELECCIONADO en el Drawer (Elegante pastilla azul suave) */
.courseindex .courseindex-item.active,
.courseindex .courseindex-item.pageitem,
.courseindex .courseindex-item.current {
    background-color: #eff6ff !important;
    border-left: 3px solid #2563eb !important;
    padding-left: calc(1.6rem - 1px) !important;
}

.courseindex .courseindex-item.active .courseindex-link,
.courseindex .courseindex-item.pageitem .courseindex-link,
.courseindex .courseindex-item.current .courseindex-link {
    color: #1d4ed8 !important;
    font-weight: 600 !important;
}

/* Indicadores de completitud en el Drawer */
.courseindex .completioninfo {
    margin-right: 0.45rem !important;
}


/* =============================================================================
   8. VISTA PRINCIPAL DEL CURSO (SECCIONES Y TÍTULOS EN NEGRO SÓLIDO)
   - Títulos de sección en negro pizarra profundo (#0f172a), alta legibilidad y seriedad.
   - Chevron de colapsar refinado con fondo neutro (cero azul chillón).
   - Tarjetas de contenido con radio armonioso de 16px y bordes sutiles.
   ============================================================================= */

/* Tarjetas de Sección del Curso */
.course-section,
li.section.main,
.format-topics .course-section,
.format-weeks .course-section {
    background: #ffffff !important;
    border: 1px solid var(--robin-border) !important;
    border-radius: 16px !important;
    padding: 1.5rem 1.75rem !important;
    margin-bottom: 1.5rem !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.03), 0 4px 12px -2px rgba(0, 0, 0, 0.02) !important;
    list-style: none !important;
}

/* Cabecera de la Sección */
.course-section-header,
.section-header {
    border-bottom: 1px solid #f8fafc !important;
    padding-bottom: 0.65rem !important;
    margin-bottom: 0.85rem !important;
}

/* TÍTULOS DE SECCIÓN: NEGRO PROFUNDO (#0f172a) - CERO AZUL CHILLÓN */
.sectionname,
.sectionname a,
h2.sectionname,
h2.sectionname a,
h3.sectionname,
h3.sectionname a,
h4.sectionname,
h4.sectionname a,
.course-content-item.sectionname,
.course-content-item.sectionname a,
.course-section-header .sectionname,
.course-section-header .sectionname a {
    color: #0f172a !important;
    font-size: 1.22rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.015em !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
}

.sectionname a:hover,
h2.sectionname a:hover,
h3.sectionname a:hover,
h4.sectionname a:hover,
.course-section-header .sectionname a:hover {
    color: #1e293b !important;
    text-decoration: none !important;
}

/* Botón de Colapsar / Expandir Sección y Acordeones (Chevron minimalista e integrado, cero caja tosca) */
a[data-for="sectiontoggler"],
.section-header .icons-collapse-expand,
.ftoggler .btn-icon,
.ftoggler .icons-collapse-expand,
.ftoggler a.fheader,
.mform fieldset legend .btn,
.mform .fheader .icon {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    margin-right: 0.65rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #0f172a !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
    flex-shrink: 0 !important;
}

a[data-for="sectiontoggler"]:hover,
.section-header .icons-collapse-expand:hover,
.ftoggler a.fheader:hover {
    color: #000000 !important;
    background: transparent !important;
}

a[data-for="sectiontoggler"] .icon,
a[data-for="sectiontoggler"] svg,
.ftoggler .icon,
.ftoggler svg,
.icons-collapse-expand .icon,
.icons-collapse-expand svg {
    color: #0f172a !important;
    fill: #0f172a !important;
    font-size: 0.95rem !important;
    transition: transform 0.2s ease !important;
}

/* Botón y Enlaces "Colapsar todo / Expandir todo" */
.collapsible-actions,
.collapsible-actions a,
.collapseexpand,
[data-action="expand-all"],
[data-action="collapse-all"] {
    color: #64748b !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: color 0.15s ease !important;
}

.collapsible-actions a:hover,
.collapseexpand:hover,
[data-action="expand-all"]:hover,
[data-action="collapse-all"]:hover {
    color: #0f172a !important;
    text-decoration: underline !important;
}

/* Resumen / Descripción de la Sección */
.section .summary,
.summarytext,
.section-summary {
    color: #334155 !important;
    font-size: 0.88rem !important;
    line-height: 1.6 !important;
    margin: 0.75rem 0 1.25rem 0 !important;
    padding-bottom: 0.75rem !important;
    border-bottom: 1px solid #f1f5f9 !important;
}


/* =============================================================================
   9. LISTA DE ACTIVIDADES Y RECURSOS DEL CURSO (ACTIVITY CARDS)
   - Tarjetas refinadas con sutil elevación en hover.
   - Títulos en negro pizarra con hover a azul profesional.
   - Textos descriptivos en slate secundario.
   ============================================================================= */

/* Tarjeta individual de la actividad */
.activity-item {
    background: #ffffff !important;
    border: 1px solid #f1f5f9 !important;
    border-radius: 12px !important;
    padding: 0.85rem 1.15rem !important;
    margin-bottom: 0.65rem !important;
    transition: all 0.15s ease !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

.activity-item:hover {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
    transform: translateY(-1px) !important;
}

/* Título del recurso o actividad (Negro pizarra, con hover a azul corporativo) */
.activity-item a.aalink,
.activityname a,
.instancename,
.activity-item .activity-title a {
    color: #0f172a !important;
    font-size: 0.92rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    letter-spacing: -0.01em !important;
    transition: color 0.15s ease !important;
}

.activity-item a.aalink:hover,
.activityname a:hover,
.activity-item .activity-title a:hover {
    color: var(--robin-primary) !important;
    text-decoration: none !important;
}

/* Descripción / texto posterior de la actividad */
.activity-item .contentafterlink,
.activity-description,
.activity-item .activity-altcontent {
    color: #64748b !important;
    font-size: 0.84rem !important;
    line-height: 1.5 !important;
    margin-top: 0.35rem !important;
}

/* Contenedor del icono de la actividad */
.activityiconcontainer {
    border-radius: 10px !important;
    width: 38px !important;
    height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}


/* =============================================================================
   10. PESTAÑAS DE NAVEGACIÓN SECUNDARIA DEL CURSO (TABS)
   ============================================================================= */
.secondary-navigation {
    margin-bottom: 1.25rem !important;
}

.secondary-navigation .navigation .nav-tabs {
    border-bottom: 1px solid var(--robin-border) !important;
    gap: 0.5rem !important;
}

.secondary-navigation .navigation .nav-link {
    color: #64748b !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    border: none !important;
    border-bottom: 2.5px solid transparent !important;
    background: transparent !important;
    padding: 0.6rem 0.9rem !important;
    border-radius: 0 !important;
    transition: all 0.15s ease !important;
}

.secondary-navigation .navigation .nav-link:hover {
    color: #0f172a !important;
    border-bottom-color: #cbd5e1 !important;
    background: transparent !important;
}

.secondary-navigation .navigation .nav-link.active,
.secondary-navigation .navigation .nav-link[aria-current="true"] {
    color: #0f172a !important;
    font-weight: 700 !important;
    border-bottom-color: #2563eb !important;
    background: transparent !important;
}

/* =============================================================================
   11. PÁGINA DE ADMINISTRACIÓN DEL SITIO (SITE ADMINISTRATION DIRECTORY)
   - Armonía y consistencia cromática: TODOS los títulos de categoría son NEGROS (#0f172a).
   - Fin de la mezcla aleatoria donde unos títulos eran negros y otros azules.
   - Enlaces de opciones en gris pizarra legible (#334155), con hover en pastilla interactiva (#eff6ff).
   ============================================================================= */

/* Contenedor principal de pestañas administrativas */
.tab-content {
    background: #ffffff !important;
    border-radius: 12px !important;
    padding: 0.5rem 0.25rem !important;
}

/* Títulos y Encabezados de Categoría en la Columna Izquierda (TODOS EN NEGRO SÓLIDO) */
.tab-pane .col-sm-3 h4,
.tab-pane .col-sm-3 h4 a,
.tab-pane .col-sm-3 h3,
.tab-pane .col-sm-3 h3 a,
.tab-pane .col-sm-3 a {
    color: #0f172a !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.015em !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    display: inline-block !important;
    margin-bottom: 0.5rem !important;
}

.tab-pane .col-sm-3 h4 a:hover,
.tab-pane .col-sm-3 a:hover {
    color: #1e293b !important;
    text-decoration: none !important;
}

/* Enlaces de configuración y opciones en la Columna Derecha (Gris pizarra sobrio) */
.tab-pane .col-sm-9 ul.list-unstyled,
.tab-pane .col ul.list-unstyled {
    margin-bottom: 0.5rem !important;
}

.tab-pane .col-sm-9 ul.list-unstyled li,
.tab-pane .col ul.list-unstyled li {
    margin-bottom: 0.25rem !important;
    line-height: 1.4 !important;
}

.tab-pane .col-sm-9 ul.list-unstyled li a,
.tab-pane .col ul.list-unstyled li a {
    color: #334155 !important;
    font-size: 0.86rem !important;
    font-weight: 450 !important;
    text-decoration: none !important;
    padding: 0.2rem 0.55rem !important;
    margin-left: -0.55rem !important;
    border-radius: 6px !important;
    display: inline-block !important;
    transition: all 0.15s ease !important;
}

.tab-pane .col-sm-9 ul.list-unstyled li a:hover,
.tab-pane .col ul.list-unstyled li a:hover {
    background-color: #eff6ff !important;
    color: #1d4ed8 !important;
    text-decoration: none !important;
}

/* Divisores horizontales entre bloques de opciones */
.tab-pane hr {
    border: none !important;
    border-top: 1px solid #f1f5f9 !important;
    margin: 1.25rem 0 !important;
    opacity: 1 !important;
}

/* Buscador de administración */
.adminsearchform .form-control,
[data-region="header-actions-container"] .form-control {
    border-radius: 8px !important;
    font-size: 0.85rem !important;
}

/* =============================================================================
   12. ELIMINACIÓN TOTAL DE PÍLDORAS DE MIGAS DE PAN Y ENCABEZADOS REDUNDANTES
   - Ocultar píldoras de breadcrumbs y títulos duplicados en cursos, secciones y tareas.
   - En el curso principal sólo queda la tarjeta inicial (Hero Banner).
   - En las tareas y actividades la vista empieza limpia directamente desde su contenido y título.
   - En las secciones la vista empieza directamente desde la tarjeta de la sección.
   ============================================================================= */

.breadcrumb,
#page-navbar,
nav[aria-label="breadcrumb"],
nav[aria-label="Breadcrumb"],
nav[aria-label="Migas de pan"],
.page-context-header,
#page-header .page-header-headings,
#page-header .page-context-header,
#page-header .page-header-image {
    display: none !important;
}

/* En el curso principal y vistas de sección: sólo debe verse la tarjeta inicial */
.pagelayout-course #page-header,
body#page-course-view-topics #page-header,
body#page-course-view-weeks #page-header {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
}

/* En las tareas, foros, lecciones y cuestionarios: */
.pagelayout-incourse #page-header,
body[id^="page-mod-"] #page-header {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
}