/**
 * =============================================================================
 * 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)
   ============================================================================= */
/* Solo el formulario, centrado. Fondo de la plataforma (Moodle compartido sin empresa); con empresa, su degradado
   (marca.php). */
.pagelayout-login {
    background: radial-gradient(1100px 620px at 12% 8%, rgba(56, 189, 248, 0.22), transparent 62%),
        linear-gradient(135deg, #0b1f3a 0%, #12305e 55%, #1d4ed8 100%) !important;
    background-attachment: fixed !important;
    min-height: 100vh;
}

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

/* Sin la franja blanca del pie ni su botón «?»: el fondo llega hasta abajo. Los scripts que van en el pie siguen
   cargando (solo se oculta). */
.pagelayout-login #page-footer {
    display: none !important;
}

.pagelayout-login .cs-acceso,
.pagelayout-login #page-content.cs-acceso {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1rem !important;
    /* Sin el recuadro blanco de las demás páginas: se ve el fondo de la empresa. */
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
}

.pagelayout-login .cs-acceso-centro {
    width: 100%;
    max-width: 440px;
}

.pagelayout-login .loginform h1 {
    text-align: center;
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
}

.pagelayout-login .loginform h1 + p.text-muted {
    text-align: center;
}

/* Logo de la empresa arriba del formulario. */
.pagelayout-login .cs-acceso-logo {
    width: 96px;
    height: 96px;
    margin: 0 auto 1.1rem;
    border-radius: 22px;
    background: #fff center / 78% no-repeat;
    border: 1px solid #eef2f7;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.16);
}

.pagelayout-login .cs-acceso-iniciales {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 800;
    color: #ffffff;
    background: var(--cs-acceso-color, #1d4ed8);
}

.pagelayout-login .toast-wrapper:not(:has(.toast)) {
    display: none !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;
}

/* =============================================================================
   ADMINISTRAR CATEGORÍAS DE CURSOS Y CURSOS (course/management.php)
   Paneles con cabecera gris, filas con borde, botones con borde oscuro y título grande (Montserrat).
   Solo estilos: lo que cada persona puede ver y hacer no cambia. Los acentos usan el color de la empresa.
   ============================================================================= */
html body#page-course-management {
    --cs-g-titulo: var(--robin-titulo, #0d2c4b);
    --cs-g-acento: var(--robin-primario, #0f6cbf);
    --cs-g-acento-texto: var(--robin-texto-primario, #ffffff);
    --cs-g-borde: #dee2e6;
    --cs-g-cabecera: #f5f5f5;
    --cs-g-icono: #495057;
    --cs-g-fuente: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}
html body#page-course-management #region-main,
html body#page-course-management #region-main .card,
html body#page-course-management #region-main .btn,
html body#page-course-management #region-main .form-select,
html body#page-course-management #region-main .form-control,
html body#page-course-management #region-main .dropdown-menu {
    font-family: var(--cs-g-fuente) !important;
}

/* Título de la página */
html body#page-course-management #region-main h2 {
    font-family: var(--cs-g-fuente) !important;
    font-size: 2rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: var(--cs-g-titulo) !important;
    margin: 1.25rem 0 1rem !important;
}

/* Buscador y vista (Categorías de cursos y cursos) */
html body#page-course-management #action_bar .form-select,
html body#page-course-management #action_bar select {
    height: 48px !important;
    border: 1px solid #ced4da !important;
    border-radius: 4px !important;
    font-size: 0.95rem !important;
    color: #1d2125 !important;
    background-color: #fff !important;
}
html body#page-course-management #action_bar .simplesearchform .form-control,
html body#page-course-management #action_bar .simplesearchform input[type="text"] {
    height: 48px !important;
    border: 1px solid #ced4da !important;
    border-right: 0 !important;
    border-radius: 4px 0 0 4px !important;
    font-size: 0.95rem !important;
    box-shadow: none !important;
}
html body#page-course-management #action_bar .simplesearchform .btn {
    height: 48px !important;
    min-width: 48px !important;
    border-radius: 0 4px 4px 0 !important;
    background: var(--cs-g-titulo) !important;
    border-color: var(--cs-g-titulo) !important;
    color: #fff !important;
}
html body#page-course-management #action_bar .simplesearchform .btn .icon { color: #fff !important; }

/* Fondo blanco y separación entre los paneles */
html body#page-course-management #region-main { background: #fff !important; }
html body#page-course-management #course-category-listings > #category-listing,
html body#page-course-management #course-category-listings > #course-listing,
html body#page-course-management #course-category-listings > #course-detail {
    padding-left: 0.85rem !important;
    padding-right: 0.85rem !important;
    /* El tema enmarcaba además cada columna: queda solo el panel. */
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}
/* El tema marcaba la categoría elegida con una barra que bajaba también por sus subcategorías. */
html body#page-course-management #course-category-listings .listitem::before {
    content: none !important;
    display: none !important;
}

/* Paneles */
html body#page-course-management #course-category-listings .card {
    border: 1px solid var(--cs-g-borde) !important;
    border-radius: 3px !important;
    box-shadow: none !important;
    background: #fff !important;
    overflow: hidden;
}
html body#page-course-management #course-category-listings .card > .card-header,
html body#page-course-management #course-category-listings .course-detail > .card-header {
    background: var(--cs-g-cabecera) !important;
    border-bottom: 1px solid var(--cs-g-borde) !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0.5rem 0.75rem !important;
    font-family: var(--cs-g-fuente) !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: var(--cs-g-titulo) !important;
}
html body#page-course-management #course-category-listings .course-detail > .card-header h3 {
    font-family: var(--cs-g-fuente) !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: var(--cs-g-titulo) !important;
    margin: 0 !important;
}
html body#page-course-management #course-category-listings .card-body {
    padding: 1.25rem 1.5rem !important;
    background: #fff !important;
}

/* Botones de cada panel (Crear nueva categoría, Crear nuevo curso…), centrados */
html body#page-course-management #course-category-listings .listing-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0.35rem 0.6rem !important;
    margin-bottom: 1.25rem !important;
    padding-bottom: 0 !important;
    border: 0 !important;
}
html body#page-course-management #course-category-listings .listing-actions .btn,
html body#page-course-management #course-category-listings .bulk-actions .btn,
html body#page-course-management #course-category-listings .bulk-actions input[type="submit"] {
    background: #fff !important;
    color: #1d2125 !important;
    border: 1px solid #343a40 !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    padding: 0.55rem 1rem !important;
    width: auto !important;
    min-height: 0 !important;
}
html body#page-course-management #course-category-listings .listing-actions .btn:hover,
html body#page-course-management #course-category-listings .bulk-actions .btn:hover,
html body#page-course-management #course-category-listings .bulk-actions input[type="submit"]:hover {
    background: #f1f3f5 !important;
}
html body#page-course-management #course-category-listings .listing-actions .dropdown-toggle:not(.btn),
html body#page-course-management #course-category-listings .listing-actions .action-menu a:not(.btn) {
    color: var(--cs-g-titulo) !important;
    font-size: 0.95rem !important;
    text-decoration: none !important;
}

/* Listas de categorías y cursos: filas con borde */
html body#page-course-management #course-category-listings .list-group {
    border: 1px solid var(--cs-g-borde) !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
}
html body#page-course-management #course-category-listings .list-group { border-bottom: 0 !important; }
html body#page-course-management #course-category-listings .list-group .list-group { border: 0 !important; }
/* Cada fila (también las subcategorías) con su propio borde: la fila es el primer div del elemento. */
html body#page-course-management #course-category-listings .listitem {
    background: #fff !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--cs-g-titulo) !important;
}
html body#page-course-management #course-category-listings .listitem > div:first-child {
    background: #fff !important;
    border: 0 !important;
    border-bottom: 1px solid var(--cs-g-borde) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0.8rem 0.9rem 0.8rem 1.4rem !important;
}
html body#page-course-management #course-category-listings .listitem .listitem > div:first-child { padding-left: 2.8rem !important; }
html body#page-course-management #course-category-listings .listitem .listitem .listitem > div:first-child { padding-left: 4.2rem !important; }
html body#page-course-management #course-category-listings .listitem > div:first-child:hover { background: #fafbfc !important; }
/* La categoría o el curso seleccionado: barra a la izquierda de su fila */
html body#page-course-management #course-category-listings .listitem[data-selected="1"] > div:first-child {
    box-shadow: inset 4px 0 0 var(--cs-g-acento) !important;
    background: #fff !important;
}
html body#page-course-management #course-category-listings .listitem .categoryname,
html body#page-course-management #course-category-listings .listitem .coursename {
    color: var(--cs-g-titulo) !important;
    font-family: var(--cs-g-fuente) !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    line-height: 1.6 !important;
}
html body#page-course-management #course-category-listings .listitem .categoryname:hover,
html body#page-course-management #course-category-listings .listitem .coursename:hover {
    color: var(--cs-g-acento) !important;
}
/* Ocultas: en gris */
html body#page-course-management #course-category-listings .listitem[data-visible="0"] > div .categoryname,
html body#page-course-management #course-category-listings .listitem[data-visible="0"] > div .coursename {
    color: #8a94a6 !important;
}
html body#page-course-management #course-category-listings .listitem .tree-icon,
html body#page-course-management #course-category-listings .listitem .drag-handle .icon {
    color: var(--cs-g-icono) !important;
}

/* Iconos de acción en gris, sin fondo */
html body#page-course-management #course-category-listings .item-actions .action-menu-item > a,
html body#page-course-management #course-category-listings .item-actions > a,
html body#page-course-management #course-category-listings .item-actions a.btn-link,
html body#page-course-management #course-category-listings .item-actions .action-menu-trigger a {
    color: var(--cs-g-icono) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 4px !important;
}
html body#page-course-management #course-category-listings .item-actions .action-menu-item > a:hover,
html body#page-course-management #course-category-listings .item-actions > a:hover,
html body#page-course-management #course-category-listings .item-actions a.btn-link:hover {
    background: #eef1f4 !important;
    color: #1d2125 !important;
}
html body#page-course-management #course-category-listings .item-actions .icon { color: inherit !important; }
/* Solo «Ocultar» o «Mostrar», según esté visible u oculta (el tema mostraba los dos a la vez) */
html body#page-course-management #course-category-listings .listitem[data-visible="1"] > div .item-actions .action-show,
html body#page-course-management #course-category-listings .listitem[data-visible="1"] > div .item-actions .action-menu-item:has(> .action-show),
html body#page-course-management #course-category-listings .listitem[data-visible="0"] > div .item-actions .action-hide,
html body#page-course-management #course-category-listings .listitem[data-visible="0"] > div .item-actions .action-menu-item:has(> .action-hide) {
    display: none !important;
}

/* Número de cursos: texto con su ícono, sin burbuja */
html body#page-course-management #course-category-listings .course-count {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 0 0 0.5rem !important;
    min-width: 3.2rem !important;
    color: var(--cs-g-icono) !important;
    font-weight: 500 !important;
    font-size: 0.9rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
}
html body#page-course-management #course-category-listings .course-count .icon { color: var(--cs-g-icono) !important; }

/* Acciones masivas (Ordenando, Mover a…): compactas y en una sola línea */
html body#page-course-management #course-category-listings .bulk-actions {
    background: transparent !important;
    border: 0 !important;
    border-top: 1px solid var(--cs-g-borde) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-top: 1.25rem !important;
    padding: 1rem 0 0 !important;
}
html body#page-course-management #course-category-listings .bulk-actions .pair-key,
html body#page-course-management #course-category-listings .bulk-actions .pair-key span {
    color: var(--cs-g-titulo) !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}
html body#page-course-management #course-category-listings .detail-pair .pair-value > div,
html body#page-course-management #course-category-listings .detail-pair .pair-value > div > div {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0.5rem !important;
}
html body#page-course-management #course-category-listings .detail-pair .pair-value select,
html body#page-course-management #course-category-listings .detail-pair .pair-value .form-select,
html body#page-course-management #course-category-listings .detail-pair .pair-value > div select {
    flex: 0 1 auto !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    border: 1px solid #ced4da !important;
    border-radius: 4px !important;
    padding: 0.45rem 2.25rem 0.45rem 0.7rem !important;
    font-size: 0.85rem !important;
    box-shadow: none !important;
}

/* Paginación */
html body#page-course-management #course-category-listings .pagination { gap: 0 !important; margin: 0 0 1rem !important; justify-content: flex-end !important; }
html body#page-course-management #course-category-listings .pagination .page-link {
    color: var(--cs-g-titulo) !important;
    background: #fff !important;
    border: 1px solid var(--cs-g-borde) !important;
    border-radius: 0 !important;
    margin-left: -1px !important;
    padding: 0.45rem 0.85rem !important;
    font-size: 0.9rem !important;
    box-shadow: none !important;
}
html body#page-course-management #course-category-listings .pagination .page-item:first-child .page-link { border-radius: 4px 0 0 4px !important; }
html body#page-course-management #course-category-listings .pagination .page-item:last-child .page-link { border-radius: 0 4px 4px 0 !important; }
html body#page-course-management #course-category-listings .pagination .page-item.active .page-link {
    background: var(--cs-g-acento) !important;
    border-color: var(--cs-g-acento) !important;
    color: var(--cs-g-acento-texto) !important;
}
html body#page-course-management #course-category-listings .listing-pagination-totals { color: #6a737b !important; font-size: 0.85rem !important; text-align: center !important; }

/* Detalle del curso seleccionado */
html body#page-course-management #course-category-listings .course-detail .detail-pair .pair-key { color: var(--cs-g-titulo) !important; font-weight: 600 !important; }

@media (max-width: 767.98px) {
    html body#page-course-management #region-main h2 { font-size: 1.5rem !important; }
    html body#page-course-management #course-category-listings .card > .card-header { font-size: 1.2rem !important; }
    html body#page-course-management #course-category-listings .card-body { padding: 1rem !important; }
}

/* ---------- Lección de CourseStudio en modo de edición: Editar aquí / Editor completo / Historial ---------- */
.cs-leccion-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 0 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid #dbe4fb;
    border-radius: 14px;
    background: #f5f8ff;
}
.cs-leccion-barra.cs-leccion-editando { border-color: #f59e0b; background: #fffbeb; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15); }
.cs-leccion-info { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.cs-leccion-info strong { font-size: 0.92rem; color: #0f172a; }
.cs-leccion-estado { font-size: 0.82rem; color: #475569; }
.cs-leccion-estado.cs-leccion-ok { color: #047857; font-weight: 600; }
.cs-leccion-estado.cs-leccion-error { color: #b91c1c; font-weight: 600; }
.cs-leccion-estado.cs-leccion-editando { color: #92400e; }
.cs-leccion-acciones { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.cs-leccion-acciones .btn { border-radius: 999px; white-space: nowrap; }
.cs-leccion-acciones [hidden] { display: none !important; }

/* Gestión de cursos y categorías: Moodle desactiva «Ordenar» (con «Categorías seleccionadas») y «Mover» hasta que se
   marca una categoría o un curso; el tema los pintaba como activos y parecía que no funcionaban. */
#course-category-listings select:disabled,
#course-category-listings .custom-select:disabled,
#course-category-listings .form-select:disabled,
#course-category-listings input[type="submit"]:disabled,
#course-category-listings .btn:disabled {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
    background-color: #f1f5f9 !important;
    color: #64748b !important;
    box-shadow: none !important;
}
/* Qué marcar para activarlos. */
#course-category-listings #category-listing .detail-pair:has(select:disabled) > .pair-key::after,
#course-category-listings #course-listing .detail-pair:has(select:disabled) > .pair-key::after {
    content: "Marca primero la casilla de una categoría.";
    display: block;
    font-weight: 400;
    font-size: 0.8em;
    color: #64748b;
}
#course-category-listings #course-listing .detail-pair:has(select:disabled) > .pair-key::after {
    content: "Marca primero la casilla de un curso.";
}

/* Recursos de aprendizaje en Moodle: ventana para editar sus enlaces (no los textos de la página). */
.cs-enlaces-fondo { position: fixed; inset: 0; z-index: 2000; background: rgba(15, 23, 42, 0.45); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.cs-enlaces-ventana { background: #fff; border-radius: 16px; width: min(860px, 100%); max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 24px 60px rgba(15, 23, 42, 0.3); }
.cs-enlaces-cabecera, .cs-enlaces-pie { display: flex; align-items: center; gap: 0.5rem; padding: 0.85rem 1.25rem; }
.cs-enlaces-cabecera { justify-content: space-between; border-bottom: 1px solid #e2e8f0; }
.cs-enlaces-pie { justify-content: flex-end; border-top: 1px solid #e2e8f0; }
.cs-enlaces-aviso { margin-right: auto; font-size: 0.85rem; color: #475569; }
.cs-enlaces-cuerpo { overflow-y: auto; padding: 1rem 1.25rem; display: grid; gap: 1.1rem; }
.cs-enlaces-categoria h3 { font-size: 0.95rem; font-weight: 700; color: #0f172a; margin: 0 0 0.5rem; }
.cs-enlaces-lista { display: grid; gap: 0.5rem; margin-bottom: 0.5rem; }
.cs-enlace-fila { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr) minmax(0, 1.4fr) auto; gap: 0.4rem; align-items: center; }
@media (max-width: 767.98px) { .cs-enlace-fila { grid-template-columns: 1fr; } }