/*
    Rediseño Cursos Telat (RINT-284)
    Tokens del sistema de diseño, modo oscuro y ajustes de componentes.
    Se carga después de theme.css y custom.css para sobrescribirlos.
*/

/* ============ TOKENS (claro por defecto) ============ */
:root {
    color-scheme: light;
    /* Paleta del núcleo de diseño Telat (telat-core.css v2). Reglas de uso:
       - --ds-blue / --ds-orange (y --ds-ok, --ds-danger, --ds-warning) son tonos vivos para íconos, bordes e indicadores.
       - Como color de letra se usan las variantes -text; como relleno con texto encima, las -fill con su tinta --ds-on-*.
       - El naranja es acento, no estado: los avisos van en --ds-warning (dorado) y los errores en --ds-danger. */
    --ds-ink: #222221;
    --ds-ink-soft: #5B5F66;
    --ds-ink-faint: #6E737A;
    --ds-bg-a: #DCEAF6;
    --ds-bg-b: #FCE2D6;
    --ds-shell: #FBFBFD;
    --ds-surface: #FFFFFF;
    --ds-surface-2: #F1F3F7;
    --ds-blue: #3284C6;
    --ds-blue-text: #2A6DA6;
    --ds-blue-fill: #2E79B6;
    --ds-blue-soft: #E8F1F9;
    --ds-orange: #EB5B27;
    --ds-orange-text: #BE4419;
    --ds-orange-fill: #C94A1D;
    --ds-orange-soft: #FDEBE3;
    --ds-ok: #12875A;
    --ds-ok-text: #0F7A4A;
    --ds-ok-fill: #0F7A4A;
    --ds-ok-soft: #E7F5EE;
    --ds-on-ok: #FFFFFF;
    --ds-danger: #DC3B27;
    --ds-danger-text: #C0271A;
    --ds-danger-fill: #C0271A;
    --ds-danger-soft: #FCEAE7;
    --ds-on-danger: #FFFFFF;
    --ds-warning: #F0B429;
    --ds-warning-text: #8A5A00;
    --ds-warning-fill: #FECA66;
    --ds-warning-soft: #FEF4DF;
    --ds-on-warning: #222221; /* el dorado sólo admite tinta oscura */
    --ds-line: rgba(34, 34, 33, .10);
    --ds-line-soft: rgba(34, 34, 33, .06);
    --ds-band: #2E79B6;
    --ds-on-accent: #FFFFFF; /* tinta sobre --ds-blue-fill, --ds-orange-fill y --ds-band: fija en los dos temas */
    --ds-bar: linear-gradient(90deg, var(--ds-blue), var(--ds-orange));
    --ds-bar-v: linear-gradient(180deg, var(--ds-blue), var(--ds-orange));
    --ds-sh-1: 0 1px 2px rgba(34, 34, 33, .06);
    --ds-sh-2: 0 1px 2px rgba(34, 34, 33, .06), 0 10px 26px -14px rgba(34, 34, 33, .22);
    --ds-sh-3: 0 2px 4px rgba(34, 34, 33, .06), 0 1rem 3rem rgba(34, 34, 33, .08);
    --ds-r: 14px;
    --ds-r-sm: 9px;
    /* Tipografías de Telat: Poppins en títulos, Montserrat en texto y DM Sans en subtítulos, etiquetas y datos */
    --ds-f-d: 'Poppins', system-ui, -apple-system, sans-serif;
    --ds-f-b: 'Montserrat', system-ui, -apple-system, sans-serif;
    --ds-f-m: 'DM Sans', system-ui, -apple-system, sans-serif;
    --ds-f-code: ui-monospace, SFMono-Regular, Consolas, monospace; /* solo para código */

    /* Bootstrap apunta a los tokens */
    --bs-primary: var(--ds-blue);
    --bs-secondary: var(--ds-orange);
    --bs-success: var(--ds-ok);
    --bs-danger: var(--ds-danger);
    --bs-font-sans-serif: var(--ds-f-b);
    --bs-font-monospace: var(--ds-f-code);
    --bs-body-font-family: var(--ds-f-b);
    --bs-body-color: var(--ds-ink);
    --bs-body-bg: var(--ds-shell);
    --bs-gradient: var(--ds-bar);
}

/* Modo oscuro: sigue al sistema salvo que el usuario elija claro */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --ds-ink: #F3F4F6;
        --ds-ink-soft: #A7ABB3;
        --ds-ink-faint: #8C9098;
        --ds-bg-a: #132638;
        --ds-bg-b: #2E1A12;
        --ds-shell: #16181C;
        --ds-surface: #1E2126;
        --ds-surface-2: #24272D;
        --ds-blue: #62A8E0;
        --ds-blue-text: #62A8E0;
        --ds-blue-soft: #132C40;
        --ds-orange: #FF7A4A;
        --ds-orange-text: #FF7A4A;
        --ds-orange-soft: #3A2016;
        --ds-ok: #4ED8A0;
        --ds-ok-text: #4ED8A0;
        --ds-ok-fill: #4ED8A0;
        --ds-ok-soft: #123227;
        --ds-on-ok: #222221;
        --ds-danger: #FF8A75;
        --ds-danger-text: #FF8A75;
        --ds-danger-fill: #FF8A75;
        --ds-danger-soft: #3A1D18;
        --ds-on-danger: #222221;
        --ds-warning: #FECA66;
        --ds-warning-text: #FECA66;
        --ds-warning-soft: #33280F;
        --ds-line: rgba(255, 255, 255, .10);
        --ds-line-soft: rgba(255, 255, 255, .06);
        --ds-band: #1F2124;
        --ds-sh-1: 0 1px 2px rgba(0, 0, 0, .4);
        --ds-sh-2: 0 1px 2px rgba(0, 0, 0, .4), 0 14px 30px -16px rgba(0, 0, 0, .7);
        --ds-sh-3: 0 2px 6px rgba(0, 0, 0, .5), 0 1rem 3rem rgba(0, 0, 0, .35);
    }
}

/* Modo oscuro elegido con el interruptor */
:root[data-theme="dark"] {
    color-scheme: dark;
    --ds-ink: #F3F4F6;
    --ds-ink-soft: #A7ABB3;
    --ds-ink-faint: #8C9098;
    --ds-bg-a: #132638;
    --ds-bg-b: #2E1A12;
    --ds-shell: #16181C;
    --ds-surface: #1E2126;
    --ds-surface-2: #24272D;
    --ds-blue: #62A8E0;
    --ds-blue-text: #62A8E0;
    --ds-blue-soft: #132C40;
    --ds-orange: #FF7A4A;
    --ds-orange-text: #FF7A4A;
    --ds-orange-soft: #3A2016;
    --ds-ok: #4ED8A0;
    --ds-ok-text: #4ED8A0;
    --ds-ok-fill: #4ED8A0;
    --ds-ok-soft: #123227;
    --ds-on-ok: #222221;
    --ds-danger: #FF8A75;
    --ds-danger-text: #FF8A75;
    --ds-danger-fill: #FF8A75;
    --ds-danger-soft: #3A1D18;
    --ds-on-danger: #222221;
    --ds-warning: #FECA66;
    --ds-warning-text: #FECA66;
    --ds-warning-soft: #33280F;
    --ds-line: rgba(255, 255, 255, .10);
    --ds-line-soft: rgba(255, 255, 255, .06);
    --ds-band: #1F2124;
    --ds-sh-1: 0 1px 2px rgba(0, 0, 0, .4);
    --ds-sh-2: 0 1px 2px rgba(0, 0, 0, .4), 0 14px 30px -16px rgba(0, 0, 0, .7);
    --ds-sh-3: 0 2px 6px rgba(0, 0, 0, .5), 0 1rem 3rem rgba(0, 0, 0, .35);
}

/* ============ BASE ============ */
body {
    font-family: var(--ds-f-b);
    color: var(--ds-ink);
    background-color: var(--ds-shell);
    background-image:
        radial-gradient(1100px 620px at 8% -6%, color-mix(in srgb, var(--ds-bg-a) 85%, transparent), transparent 62%),
        radial-gradient(900px 620px at 100% 108%, color-mix(in srgb, var(--ds-bg-b) 85%, transparent), transparent 60%);
    background-attachment: fixed;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6,
.nav-heading, .widget-title, .modal-title, .card-title {
    font-family: var(--ds-f-d);
    color: var(--ds-ink);
    text-wrap: balance;
}

p, li, label, .lead, .control-label {
    color: inherit;
}

a {
    color: var(--ds-blue-text);
}

a:hover {
    color: var(--ds-orange-text);
}

.text-primary {
    color: var(--ds-blue-text) !important;
}

.text-secondary {
    color: var(--ds-orange-text) !important;
}

.text-warning {
    color: var(--ds-warning-text) !important;
}

.text-success {
    color: var(--ds-ok-text) !important;
}

.text-danger {
    color: var(--ds-danger-text) !important;
}

.text-dark, .text-body {
    color: var(--ds-ink) !important;
}

.text-muted {
    color: var(--ds-ink-soft) !important;
}

.bg-white, .bg-light {
    background-color: var(--ds-surface) !important;
}

.bg-secondary {
    background-color: var(--ds-surface-2) !important;
}

.bg-primary {
    background-color: var(--ds-band) !important;
}

/* El SVG de la curva usa currentColor */
.shape.bg-primary {
    color: var(--ds-band) !important;
}

.border, .border-top, .border-bottom, .border-start, .border-end, .border-light-gray {
    border-color: var(--ds-line) !important;
}

:focus-visible {
    outline: 2px solid var(--ds-blue);
    outline-offset: 2px;
}

code, kbd, pre, samp, .font-monospace {
    font-family: var(--ds-f-code);
}

/* ============ HEADER / NAVEGACIÓN ============ */
.header.navbar,
.navbar-sticky.navbar-stuck {
    background-color: var(--ds-surface) !important;
    border-bottom: 1px solid var(--ds-line);
    box-shadow: var(--ds-sh-1) !important;
}

.navbar-tool-label,
.navbar .nav-link {
    color: var(--ds-ink-soft);
}

.navbar .nav-link:hover,
.navbar .nav-item.active > .nav-link {
    color: var(--ds-ink);
}

/* Mismo peso que la regla de theme.css (borde gris #5e5e5e), que si no gana y se ve como una franja cálida */
.navbar-tool .navbar-tool-icon-box-img {
    border: 2px solid var(--ds-blue-soft);
}

.img-thumbnail {
    background-color: var(--ds-surface);
    border-color: var(--ds-line);
}

/* Avatar por defecto (sin foto o la foto no cargó): en modo oscuro se cambia por una versión oscura */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) img[src$="/avatar.jpg"] {
        content: url("../../img/avatar-oscuro.svg");
    }
}

:root[data-theme="dark"] img[src$="/avatar.jpg"] {
    content: url("../../img/avatar-oscuro.svg");
}

.offcanvas, .offcanvas-collapse .offcanvas-body {
    background-color: var(--ds-surface);
    color: var(--ds-ink);
}

/* Menú lateral de administración en escritorio: theme.css y ps-lg-0 dejan el panel sin relleno y el texto pegado al borde */
@media (min-width: 992px) {
    .sidebar .offcanvas-collapse .offcanvas-body {
        border: 1px solid var(--ds-line);
        border-radius: var(--ds-r-sm);
        box-shadow: var(--ds-sh-1);
    }

    .sidebar .offcanvas-body .widget {
        padding: 1.5rem 1.25rem 1.25rem;
        margin-bottom: 0 !important;
    }
}

.dropdown-menu {
    background-color: var(--ds-surface);
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-r-sm);
    box-shadow: var(--ds-sh-3);
}

.dropdown-item {
    color: var(--ds-ink-soft);
    border-radius: 8px;
}

.dropdown-item:hover, .dropdown-item:focus {
    background-color: var(--ds-surface-2);
    color: var(--ds-ink);
}

.dropdown-divider {
    border-color: var(--ds-line-soft);
}

/* theme.css fija el menú del encabezado en blanco (.navbar-expand-lg .dropdown-menu) */
.navbar .dropdown-menu {
    background-color: var(--ds-surface);
}

/* ============ INICIO DE SESIÓN ============ */
/* theme.css fija la tarjeta en blanco; con el token se adapta al modo oscuro */
.signin-form .signin-form-inner,
.signin-form::after {
    background-color: var(--ds-surface);
}

.signin-form .border-top {
    border-color: var(--ds-line) !important;
}

.signin-form .text-heading {
    color: var(--ds-ink-soft) !important;
}

.ds-login-sub {
    margin-bottom: .35rem;
    font-family: var(--ds-f-m);
    font-size: .8rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ds-orange-text);
}

/* En modo oscuro la imagen clara de fondo se cambia por el degradado del sistema */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) body.bg-body {
        background-color: var(--ds-shell) !important;
        background-image:
        radial-gradient(1100px 620px at 8% -6%, color-mix(in srgb, var(--ds-bg-a) 85%, transparent), transparent 62%),
        radial-gradient(900px 620px at 100% 108%, color-mix(in srgb, var(--ds-bg-b) 85%, transparent), transparent 60%) !important;
    }
}

:root[data-theme="dark"] body.bg-body {
    background-color: var(--ds-shell) !important;
    background-image:
        radial-gradient(1100px 620px at 8% -6%, color-mix(in srgb, var(--ds-bg-a) 85%, transparent), transparent 62%),
        radial-gradient(900px 620px at 100% 108%, color-mix(in srgb, var(--ds-bg-b) 85%, transparent), transparent 60%) !important;
}

.breadcrumb, .breadcrumb-item, .breadcrumb-item a {
    font-family: var(--ds-f-m);
    font-size: .75rem;
    color: var(--ds-ink-faint);
}

.breadcrumb-item.active {
    color: var(--ds-ink-soft);
}

/* Interruptor de modo oscuro */
.ds-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    border: 1px solid var(--ds-line);
    background: var(--ds-surface);
    color: var(--ds-ink-soft);
    border-radius: 100px;
    padding: .45rem .85rem;
    font-size: .8rem;
    font-weight: 600;
    box-shadow: var(--ds-sh-1);
    cursor: pointer;
    transition: border-color .2s, color .2s;
}

.ds-theme-toggle:hover {
    border-color: var(--ds-blue);
    color: var(--ds-ink);
}

.ds-theme-toggle .ds-icon-sun {
    display: none;
}

.ds-theme-toggle[aria-pressed="true"] .ds-icon-sun {
    display: inline-block;
}

.ds-theme-toggle[aria-pressed="true"] .ds-icon-moon {
    display: none;
}

/* ============ TARJETAS ============ */
.card {
    background-color: var(--ds-surface);
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-r);
    box-shadow: var(--ds-sh-1);
    color: var(--ds-ink);
}

.card.shadow, .shadow {
    box-shadow: var(--ds-sh-2) !important;
}

.card-header, .card-footer {
    background-color: var(--ds-surface) !important;
    border-color: var(--ds-line-soft);
}

.card-img-top {
    border-top-left-radius: calc(var(--ds-r) - 1px);
    border-top-right-radius: calc(var(--ds-r) - 1px);
}

/* Barra de acento que se llena de izquierda a derecha al pasar el mouse */
.ds-accent {
    position: relative;
    overflow: hidden;
    transition: transform .22s, box-shadow .22s;
}

.ds-accent::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 2;
    background: var(--ds-bar);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .45s ease;
}

.ds-accent:hover {
    transform: translateY(-3px);
    box-shadow: var(--ds-sh-2) !important;
}

.ds-accent:hover::before,
.ds-accent.is-current::before {
    transform: scaleX(1);
}

/* Variante vertical para filas de lista */
.ds-accent-row {
    position: relative;
    overflow: hidden;
    transition: transform .2s;
}

.ds-accent-row::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 3px;
    background: var(--ds-bar-v);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .4s ease;
}

.ds-accent-row:hover {
    transform: translateX(3px);
}

.ds-accent-row:hover::before,
.ds-accent-row.is-current::before {
    transform: scaleY(1);
}

/* Insignia de dos letras */
.ds-initials {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--ds-blue-fill);
    color: var(--ds-on-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ds-f-d);
    font-weight: 600;
    font-size: .8rem;
    text-transform: uppercase;
    flex: none;
}

.ds-initials.is-warm {
    background: var(--ds-orange-fill);
}

/* ============ BOTONES ============ */
.btn {
    font-family: var(--ds-f-b);
    font-weight: 600;
    border-radius: var(--ds-r-sm);
    transition: transform .16s, background-color .2s, border-color .2s, color .2s;
}

.btn:hover:not(:disabled) {
    transform: translateY(-1px);
}

/* Principal: azul */
.btn-primary,
.btn-primary:focus {
    background-color: var(--ds-blue-fill);
    border-color: var(--ds-blue-fill);
    color: var(--ds-on-accent);
}

.btn-primary:hover, .btn-primary:active, .btn-primary.active, .btn-primary.show {
    background-color: color-mix(in srgb, var(--ds-blue-fill) 88%, #000);
    border-color: color-mix(in srgb, var(--ds-blue-fill) 88%, #000);
    color: var(--ds-on-accent);
}

/* Secundario: naranja */
.btn-secondary,
.btn-secondary:focus {
    background-color: var(--ds-orange-fill);
    border-color: var(--ds-orange-fill);
    color: var(--ds-on-accent) !important;
}

.btn-secondary:hover, .btn-secondary:active, .btn-secondary.active, .btn-secondary.show {
    background-color: color-mix(in srgb, var(--ds-orange-fill) 88%, #000);
    border-color: color-mix(in srgb, var(--ds-orange-fill) 88%, #000);
    color: var(--ds-on-accent) !important;
}

.btn-info,
.btn-info:focus {
    background-color: var(--ds-blue-soft);
    border-color: transparent;
    color: var(--ds-blue-text) !important;
}

.btn-info:hover {
    background-color: var(--ds-blue-fill);
    border-color: var(--ds-blue-fill);
    color: var(--ds-on-accent) !important;
}

.btn-danger, .btn-danger:focus {
    background-color: var(--ds-danger-soft);
    border-color: transparent;
    color: var(--ds-danger-text);
}

.btn-danger:hover {
    background-color: var(--ds-danger-fill);
    border-color: var(--ds-danger-fill);
    color: var(--ds-on-danger);
}

.btn-success, .btn-success:focus {
    background-color: var(--ds-ok-soft);
    border-color: transparent;
    color: var(--ds-ok-text);
}

.btn-success:hover {
    background-color: var(--ds-ok-fill);
    border-color: var(--ds-ok-fill);
    color: var(--ds-on-ok);
}

.btn-light, .btn-white, .btn-gray, .btn-outline-gray, .btn-outline-primary {
    background-color: transparent;
    border-color: var(--ds-line);
    color: var(--ds-ink-soft);
}

.btn-light:disabled, .btn-light.disabled, .btn-white:disabled, .btn-white.disabled {
    background-color: transparent;
    border-color: var(--ds-line);
    color: var(--ds-ink-faint);
}

.btn-light:hover, .btn-white:hover, .btn-gray:hover, .btn-outline-gray:hover, .btn-outline-primary:hover {
    background-color: var(--ds-surface-2);
    border-color: var(--ds-blue);
    color: var(--ds-ink);
}

/* Botones claros sobre fondos azules (ej. barra del curso) */
.bg-primary .btn-light, .bg-primary .btn-white {
    background-color: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .5);
    color: #fff;
}

.bg-primary .btn-light:hover, .bg-primary .btn-white:hover,
.bg-primary .btn-light:focus, .bg-primary .btn-white:focus {
    background-color: #fff;
    border-color: #fff;
    color: var(--ds-blue-text);
}

/* Botón procesando (spinner) */
.btn.is-loading {
    pointer-events: none;
    cursor: progress;
    opacity: .85;
}

.btn .spinner-border-sm {
    width: .85rem;
    height: .85rem;
    border-width: .15em;
}

.btn:disabled, .btn.disabled {
    opacity: .45;
}

.btn-scroll-top {
    background-color: var(--ds-surface);
    border: 1px solid var(--ds-line);
    color: var(--ds-ink-soft);
    box-shadow: var(--ds-sh-2);
}

/* .bg-gradient vuelve a ser el brillo sutil de Bootstrap: --bs-gradient es la barra azul-naranja del diseño
   y sobre insignias o listas tapaba el color (ej. avance bajo en reportes con letra roja ilegible) */
.bg-gradient {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, 0)) !important;
}

/* ============ INSIGNIAS DE ESTADO ============ */
.badge {
    font-family: var(--ds-f-m);
    font-weight: 500;
    border-radius: 100px;
    padding: .3em .75em;
}

.badge.bg-success {
    background-color: var(--ds-ok-soft) !important;
    color: var(--ds-ok-text) !important;
}

.badge.bg-danger {
    background-color: var(--ds-danger-soft) !important;
    color: var(--ds-danger-text) !important;
}

.badge.bg-primary, .badge.bg-info {
    background-color: var(--ds-blue-soft) !important;
    color: var(--ds-blue-text) !important;
}

.badge.bg-secondary {
    background-color: var(--ds-orange-soft) !important;
    color: var(--ds-orange-text) !important;
}

.badge.bg-warning {
    background-color: var(--ds-warning-soft) !important;
    color: var(--ds-warning-text) !important;
}

.badge.bg-light, .badge.bg-gray {
    background-color: var(--ds-line-soft) !important;
    color: var(--ds-ink-faint) !important;
}

/* ============ PROGRESO ============ */
.progress {
    background-color: var(--ds-line-soft);
    border-radius: 100px;
    overflow: hidden;
    font-family: var(--ds-f-m);
}

.progress-bar {
    background: var(--ds-bar);
    border-radius: 100px;
    transition: width .5s cubic-bezier(.4, 0, .2, 1);
}

.progress-bar.bg-success {
    background: var(--ds-ok) !important;
}

.progress-bar.bg-light {
    background: var(--ds-line-soft) !important;
    color: var(--ds-ink-faint) !important;
}

/* ============ FORMULARIOS ============ */
.form-control, .form-select {
    background-color: var(--ds-surface);
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-r-sm);
    color: var(--ds-ink);
    font-family: var(--ds-f-b);
}

.form-control::placeholder {
    color: var(--ds-ink-faint);
}

.form-control:focus, .form-select:focus {
    background-color: var(--ds-surface);
    border-color: var(--ds-blue);
    color: var(--ds-ink);
    box-shadow: 0 0 0 3px var(--ds-blue-soft);
}

.form-control:disabled, .form-control[readonly], .form-select:disabled {
    background-color: var(--ds-surface-2);
    color: var(--ds-ink-soft);
}

.control-label, .form-label {
    color: var(--ds-ink-soft);
    font-weight: 500;
}

.form-check-input {
    background-color: var(--ds-surface);
    border-color: var(--ds-line);
}

.form-check-input:checked {
    background-color: var(--ds-ok);
    border-color: var(--ds-ok);
}

.form-check-input:focus {
    box-shadow: 0 0 0 3px var(--ds-blue-soft);
}

/* Slim Select */
.ss-main .ss-single-selected, .ss-main .ss-multi-selected, .ss-content {
    background-color: var(--ds-surface) !important;
    border-color: var(--ds-line) !important;
    border-radius: var(--ds-r-sm) !important;
    color: var(--ds-ink) !important;
}

.ss-main .ss-multi-selected .ss-values .ss-value {
    background-color: var(--ds-blue-soft) !important;
    color: var(--ds-blue-text) !important;
    font-family: var(--ds-f-m);
    border-radius: 100px !important;
}

.ss-content .ss-list .ss-option:hover,
.ss-content .ss-list .ss-option.ss-highlighted {
    background-color: var(--ds-blue-soft) !important;
    color: var(--ds-ink) !important;
}

/* slimselect.min.css fija en blanco la búsqueda y las opciones; con los tokens se adaptan al modo oscuro */
.ss-content .ss-search input {
    background-color: var(--ds-surface-2) !important;
    border-color: var(--ds-line) !important;
    color: var(--ds-ink) !important;
}

.ss-content .ss-search input::placeholder {
    color: var(--ds-ink-faint) !important;
}

.ss-content .ss-list .ss-option {
    color: var(--ds-ink);
}

/* Opciones ya elegidas (se muestran deshabilitadas en la lista) */
.ss-content .ss-list .ss-option.ss-disabled {
    background-color: transparent !important;
    color: var(--ds-ink-faint) !important;
}

.ss-content .ss-list .ss-option:not(.ss-disabled).ss-option-selected {
    background-color: var(--ds-blue-soft) !important;
    color: var(--ds-ink) !important;
}

.ss-content .ss-list .ss-option .ss-search-highlight {
    background-color: var(--ds-orange-soft) !important;
    color: var(--ds-ink) !important;
}

.ss-content .ss-list .ss-optgroup .ss-optgroup-label {
    color: var(--ds-ink-faint);
}

/* ============ TABLAS ============ */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--ds-ink);
    color: var(--ds-ink);
    border-color: var(--ds-line-soft);
}

.table > thead th {
    font-family: var(--ds-f-m);
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ds-ink-faint);
    border-bottom: 1px solid var(--ds-line) !important;
}

.table > tbody td {
    border-color: var(--ds-line-soft);
    vertical-align: middle;
}

/* Encabezado sobre fondo azul (ej. intentos del examen): texto blanco legible */
.table > thead.bg-primary th {
    color: var(--ds-on-accent);
    font-weight: 600;
    border-bottom-color: transparent !important;
}

/* Filas alternas: mismo color de texto que las demás, solo cambia el fondo */
.table-striped > tbody > tr:nth-of-type(odd) {
    --bs-table-accent-bg: var(--ds-surface-2);
    color: var(--ds-ink);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    color: var(--ds-ink);
}

.table-hover > tbody > tr:hover {
    --bs-table-accent-bg: var(--ds-blue-soft);
    color: var(--ds-ink);
}

.table-hover > tbody > tr:hover > * {
    color: var(--ds-ink);
}

.dataTables_wrapper,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    color: var(--ds-ink-soft);
}

.dataTables_wrapper .dataTables_info {
    font-family: var(--ds-f-m);
    font-size: .75rem;
}

.page-link {
    background-color: var(--ds-surface);
    border-color: var(--ds-line);
    color: var(--ds-ink-soft);
}

.page-item.active .page-link {
    background-color: var(--ds-ink);
    border-color: var(--ds-ink);
    color: var(--ds-surface);
}

.page-item.disabled .page-link {
    background-color: var(--ds-surface-2);
    color: var(--ds-ink-faint);
}

/* ============ PESTAÑAS ============ */
.nav-tabs {
    border-bottom: 1px solid var(--ds-line);
}

.nav-tabs .nav-link {
    color: var(--ds-ink-soft) !important;
    border: 0;
    border-bottom: 2px solid transparent;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    background-color: transparent !important;
    color: var(--ds-ink) !important;
    border-color: transparent transparent var(--ds-orange) !important;
    border-radius: 0;
    box-shadow: none;
}

/* Pestañas tipo chip (filtros de Mis cursos) */
.ds-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.ds-chip {
    border: 1px solid var(--ds-line);
    background: var(--ds-surface);
    color: var(--ds-ink-soft);
    border-radius: 100px;
    padding: .35rem .8rem;
    font-size: .8rem;
    cursor: pointer;
}

.ds-chip.active, .ds-chip[aria-pressed="true"] {
    background: var(--ds-ink);
    border-color: transparent;
    color: var(--ds-surface);
}

/* ============ MODALES Y ALERTAS ============ */
.modal-content {
    background-color: var(--ds-surface);
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-r);
    box-shadow: var(--ds-sh-3);
    color: var(--ds-ink);
}

.modal-header, .modal-footer {
    border-color: var(--ds-line-soft);
}

.modal-backdrop.show {
    background-color: var(--ds-ink);
    opacity: .3;
}

.alert {
    border: 0;
    border-left: 3px solid var(--ds-blue);
    border-radius: 0 var(--ds-r-sm) var(--ds-r-sm) 0;
    background-color: var(--ds-blue-soft);
    color: var(--ds-ink-soft);
}

.alert-success {
    border-left-color: var(--ds-ok);
    background-color: var(--ds-ok-soft);
}

.alert-danger {
    border-left-color: var(--ds-danger);
    background-color: var(--ds-danger-soft);
}

.alert-warning {
    border-left-color: var(--ds-warning);
    background-color: var(--ds-warning-soft);
}

/* ============ CARGA Y PIE ============ */
.page-loading {
    background-color: var(--ds-shell);
}

.page-loading-inner > span {
    font-family: var(--ds-f-m);
    color: var(--ds-ink-faint);
}

.page-spinner {
    border-color: var(--ds-blue);
    border-right-color: transparent;
}

.footer, .footer p {
    color: var(--ds-ink-faint);
    font-size: .8rem;
}

/* ============ INICIO: CATÁLOGO DE CURSOS ============ */
.ds-catalog-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 1rem;
}

.ds-catalog-title {
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 700;
    margin: 0;
}

.ds-catalog-summary {
    margin: .2rem 0 0;
    color: var(--ds-ink-soft);
}

.ds-catalog-due.is-warning {
    color: var(--ds-warning-text);
    font-weight: 600;
}

.ds-search {
    position: relative;
    margin-left: auto;
    min-width: 240px;
}

.ds-search > i {
    position: absolute;
    top: 50%;
    left: .85rem;
    transform: translateY(-50%);
    color: var(--ds-ink-faint);
    font-size: .85rem;
    pointer-events: none;
}

.ds-search .form-control {
    padding-left: 2.3rem;
    padding-right: 2.3rem;
}

/* Se oculta la X nativa para usar la propia */
.ds-search input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.ds-search-clear {
    position: absolute;
    top: 50%;
    right: .45rem;
    transform: translateY(-50%);
    width: 1.75rem;
    height: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ds-ink-faint);
    font-size: .85rem;
    cursor: pointer;
    transition: background-color .2s, color .2s;
}

.ds-search-clear:hover {
    background-color: var(--ds-surface-2);
    color: var(--ds-ink);
}

.ds-search-clear.d-none {
    display: none !important;
}

/* Buscadores sin .ds-search (ej. DataTables): buscador-limpiar.js los envuelve para poner la X */
.ds-search-auto {
    position: relative;
    display: inline-block;
}

.ds-search-auto input[type="search"] {
    padding-right: 2.3rem;
}

@media (max-width: 575.98px) {
    .ds-search {
        margin-left: 0;
        width: 100%;
    }
}

.ds-course {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: 1rem;
}

/* Portada a sangre dentro de la tarjeta */
.ds-course-cover {
    display: block;
    width: calc(100% + 2rem);
    max-width: none;
    margin: -1rem -1rem .25rem;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-top-left-radius: calc(var(--ds-r) - 1px);
    border-top-right-radius: calc(var(--ds-r) - 1px);
    background-color: var(--ds-surface-2);
}

.ds-course-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.ds-course-top .badge {
    margin-left: auto;
}

.ds-course-title {
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.35;
    margin: 0;
}

.ds-course-meta {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    font-family: var(--ds-f-m);
    font-size: .72rem;
    color: var(--ds-ink-faint);
}

.ds-course-note {
    margin: 0;
    font-family: var(--ds-f-m);
    font-size: .72rem;
    color: var(--ds-ink-faint);
}

.ds-course-note.is-warning {
    color: var(--ds-warning-text);
}

.ds-course-note.is-danger {
    color: var(--ds-danger-text);
}

.ds-course-actions {
    display: flex;
    justify-content: center;
    gap: .5rem;
    margin-top: auto;
    padding-top: .25rem;
}

/* Los botones se reparten el ancho: uno ocupa el 100%, dos la mitad cada uno */
.ds-course-actions > .btn {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    white-space: nowrap;
}

/* Barra de avance con <progress> */
.ds-progress {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: 6px;
    border: 0;
    border-radius: 100px;
    background-color: var(--ds-line-soft);
    overflow: hidden;
}

.ds-progress::-webkit-progress-bar {
    background-color: var(--ds-line-soft);
    border-radius: 100px;
}

.ds-progress::-webkit-progress-value {
    background: var(--ds-bar);
    border-radius: 100px;
}

.ds-progress::-moz-progress-bar {
    background: var(--ds-bar);
    border-radius: 100px;
}

.ds-progress.is-done::-webkit-progress-value {
    background: var(--ds-ok);
}

.ds-progress.is-done::-moz-progress-bar {
    background: var(--ds-ok);
}

/* ============ CURSO: AVANCE EN LA BARRA LATERAL ============ */
.ds-course-progress {
    margin: .25rem 0 1rem;
}

.ds-course-progress-label {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .4rem;
    font-family: var(--ds-f-m);
    font-size: .7rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ds-ink-faint);
}

/* Encabezado del índice: nombre del curso, certificado (curso terminado) y título de módulos */
.ds-course-side-kicker {
    display: block;
    font-family: var(--ds-f-m);
    font-size: .7rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ds-ink-faint);
}

.ds-course-side-title {
    margin: .15rem 0 .75rem;
    overflow-wrap: anywhere;
}

.ds-course-side-cert {
    display: block;
    width: 100%;
    margin: 0 0 1rem;
}

.ds-course-side-modulos {
    margin: 0 0 .5rem;
}

/* Índice lateral: módulos y pasos (temas/examen) como línea de avance */
.ds-toc {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.ds-toc-module {
    background-color: var(--ds-surface);
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-r-sm);
    overflow: hidden;
}

.ds-toc-module.is-current {
    border-color: var(--ds-blue);
    box-shadow: 0 0 0 1px var(--ds-blue);
}

.ds-toc-module-head {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    padding: .65rem .75rem;
    border: 0;
    background: transparent;
    color: var(--ds-ink);
    text-align: left;
    cursor: pointer;
}

.ds-toc-module-head:hover {
    background-color: var(--ds-surface-2);
}

.ds-toc-module-text {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
    flex: 1;
}

.ds-toc-module-name {
    font-family: var(--ds-f-d);
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.3;
}

.ds-toc-module.is-current .ds-toc-module-name {
    color: var(--ds-blue-text);
}

.ds-toc-module-meta {
    font-family: var(--ds-f-m);
    font-size: .68rem;
    color: var(--ds-ink-faint);
}

.ds-toc-chevron {
    color: var(--ds-ink-faint);
    font-size: .75rem;
    transition: transform .2s;
}

.ds-toc-module-head.collapsed .ds-toc-chevron {
    transform: rotate(-90deg);
}

/* Círculo de estado: número (pendiente), palomita (hecho), play (actual) */
.ds-toc-dot {
    position: relative;
    z-index: 1;
    flex: none;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--ds-surface);
    border: 1.5px solid var(--ds-line);
    color: var(--ds-ink-faint);
    font-family: var(--ds-f-m);
    font-size: .7rem;
}

.ds-toc-dot .fas {
    font-size: .65rem;
}

/* Número de tema "módulo.tema" (ej. 2.1): más compacto para que quepa en el círculo */
.ds-toc-steps .ds-toc-dot {
    font-size: .6rem;
    letter-spacing: -.03em;
}

.ds-toc-dot.is-done {
    background-color: var(--ds-ok-soft);
    border-color: var(--ds-ok-soft);
    color: var(--ds-ok-text);
}

.ds-toc-dot.is-current {
    background-color: var(--ds-blue-fill);
    border-color: var(--ds-blue-fill);
    color: var(--ds-on-accent);
}

/* cursos.js agrega text-success al tema actual cuando se registra como visto */
.ds-toc-dot.is-current.text-success {
    background-color: var(--ds-ok-fill);
    border-color: var(--ds-ok-fill);
    color: var(--ds-on-ok) !important;
}

.ds-toc-dot.is-warning {
    background-color: var(--ds-warning-soft);
    border-color: var(--ds-warning-soft);
    color: var(--ds-warning-text);
}

/* Pasos del módulo con línea vertical que los une */
.ds-toc-steps {
    list-style: none;
    margin: 0;
    padding: .25rem .5rem .6rem;
    border-top: 1px solid var(--ds-line-soft);
}

.ds-toc-step {
    position: relative;
}

.ds-toc-step::before {
    content: "";
    position: absolute;
    left: calc(.5rem + .8rem - 1px);
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: var(--ds-line-soft);
}

.ds-toc-step:first-child::before {
    top: 50%;
}

.ds-toc-step:last-child::before {
    bottom: 50%;
}

.ds-toc-step:only-child::before {
    display: none;
}

.ds-toc-step.is-done::before {
    background-color: var(--ds-ok-soft);
}

.ds-toc-step > a {
    position: relative;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .45rem .5rem;
    border-radius: 8px;
    color: var(--ds-ink-soft);
    text-decoration: none;
    font-size: .85rem;
    line-height: 1.3;
    transition: background-color .18s;
}

.ds-toc-step > a:hover {
    background-color: var(--ds-surface-2);
    color: var(--ds-ink);
}

.ds-toc-step-name {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ds-toc-step-kicker {
    font-family: var(--ds-f-m);
    font-size: .65rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ds-ink-faint);
}

.ds-toc-step.is-done > a {
    color: var(--ds-ink-faint);
}

.ds-toc-step.is-current > a {
    background-color: var(--ds-blue-soft);
    color: var(--ds-ink);
    font-weight: 600;
}

.ds-toc-step.is-next > a {
    color: var(--ds-ink);
}

.ds-toc-step.is-locked > a {
    cursor: not-allowed;
    opacity: .6;
}

/* Submódulo dentro del índice: título y sus pasos un poco más adentro */
.ds-toc-sub {
    list-style: none;
    padding: .35rem 0 .1rem;
}

.ds-toc-sub-head {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .2rem .5rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--ds-ink);
}

.ds-toc-sub-num {
    font-family: var(--ds-f-m);
    font-size: .65rem;
    padding: .1rem .4rem;
    border-radius: 100px;
    background-color: var(--ds-blue-soft);
    color: var(--ds-blue-text);
}

.ds-toc-sub-steps {
    margin-left: .9rem;
    padding: 0 0 0 .25rem;
    border-top: 0;
    border-left: 1px dashed var(--ds-line);
}

/* Mínimo para aprobar e intentos del examen */
.ds-exam-intentos {
    margin: 0;
    font-family: var(--ds-f-m);
    font-size: .75rem;
    color: var(--ds-ink-soft);
}

.ds-exam-intentos.is-agotado {
    margin-top: .4rem;
    color: var(--ds-danger-text);
    text-align: left; /* el aviso de bloqueo se lee mejor alineado a la izquierda que la insignia */
}

.ds-toc-tag {
    flex: none;
    font-family: var(--ds-f-m);
    font-size: .62rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: .15rem .5rem;
    border-radius: 100px;
    background-color: var(--ds-orange-soft);
    color: var(--ds-orange-text);
}

/* ============ ADMINISTRACIÓN DE CURSOS ============ */
.ds-admin-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--ds-line-soft);
}

/* Botón Volver a la izquierda del título */
.ds-admin-head-title {
    display: flex;
    align-items: center;
    gap: .4rem;
    min-width: 0;
}

/* Volver: solo el ícono, al inicio del título; al pasar el mouse la flecha se oscurece y se desplaza a la izquierda */
.ds-back {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    color: var(--ds-ink-faint);
    text-decoration: none;
    transition: color .2s;
}

.ds-back .fas {
    transition: transform .25s ease;
}

.ds-back:hover,
.ds-back:focus-visible {
    color: var(--ds-ink);
}

.ds-back:hover .fas,
.ds-back:focus-visible .fas {
    transform: translateX(-4px);
}

.ds-admin-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
}

/* Resumen */
.ds-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
    margin-bottom: 1rem;
}

.ds-metric {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: .8rem 1rem;
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-r-sm);
    background-color: var(--ds-surface);
}

.ds-metric strong {
    font-family: var(--ds-f-d);
    font-size: 1.4rem;
    color: var(--ds-ink);
}

.ds-metric span {
    font-size: .8rem;
    color: var(--ds-ink-faint);
}

@media (max-width: 767.98px) {
    .ds-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Buscador y filtros */
.ds-admin-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1rem;
}

.ds-admin-tools .ds-search {
    margin-left: 0;
    min-width: 0;
    flex: 0 1 18rem;
}

/* Filas tipo tarjeta */
.ds-admin-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.ds-admin-row {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .75rem 1rem;
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-r-sm);
    background-color: var(--ds-surface);
}

.ds-admin-row.d-none {
    display: none !important;
}

.ds-admin-row-text {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
    flex: 1;
}

.ds-admin-row-name {
    font-family: var(--ds-f-d);
    font-weight: 600;
    color: var(--ds-ink);
    text-decoration: none;
}

.ds-admin-row-name:hover {
    color: var(--ds-blue-text);
}

.ds-admin-row-meta {
    font-family: var(--ds-f-m);
    font-size: .72rem;
    color: var(--ds-ink-faint);
}

.ds-admin-row-actions {
    display: flex;
    gap: .4rem;
    flex: none;
}

@media (max-width: 767.98px) {
    .ds-admin-row {
        flex-wrap: wrap;
    }

    .ds-admin-row-actions {
        width: 100%;
    }

    .ds-admin-row-actions .btn {
        flex: 1;
    }
}

/* Imagen redonda del curso; si no hay imagen, iniciales */
.ds-avatar {
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--ds-surface-2);
}

.ds-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ds-avatar .ds-initials {
    width: 100%;
    height: 100%;
}

/* ============ DETALLE DEL CURSO (ADMIN) ============ */
.ds-detail-actions {
    display: flex;
    gap: .5rem;
}

.ds-detail-card {
    padding: 1rem 1.1rem;
    margin-bottom: .9rem;
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-r-sm);
    background-color: var(--ds-surface);
}

.ds-detail-summary {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.ds-detail-summary .ds-course-detail-cover {
    width: 11rem;
    flex: none;
}

.ds-detail-initials {
    width: 3.5rem;
    height: 3.5rem;
    font-size: 1.05rem;
}

.ds-detail-summary-text {
    min-width: 0;
    flex: 1;
}

.ds-detail-name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.ds-detail-name h2 {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
}

.ds-detail-meta {
    margin: .25rem 0 .75rem;
    font-family: var(--ds-f-m);
    font-size: .75rem;
    color: var(--ds-ink-faint);
}

@media (max-width: 575.98px) {
    .ds-detail-summary {
        flex-direction: column;
    }

    .ds-detail-summary .ds-course-detail-cover {
        width: 100%;
    }
}

/* Encabezado de sección con punto naranja */
.ds-kicker {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .65rem;
    font-family: var(--ds-f-m);
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ds-ink-faint);
}

.ds-kicker::before {
    content: "";
    width: .35rem;
    height: .35rem;
    border-radius: 50%;
    background-color: var(--ds-orange);
    flex: none;
}

/* Descripción: mismo ancho, letra y espaciado que en el editor, alineada a la izquierda */
.ds-detail-description,
.note-editor .note-editable {
    font-family: var(--ds-f-b);
    font-size: .95rem;
    line-height: 1.65;
    color: var(--ds-ink-soft);
}

.ds-detail-description,
.ds-detail-description * {
    text-align: left !important;
}

.ds-detail-description p:last-child {
    margin-bottom: 0;
}

/* Etiquetas */
.ds-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.ds-tag {
    display: inline-flex;
    align-items: center;
    padding: .25rem .65rem;
    border-radius: 100px;
    border: 1px solid transparent;
    background-color: var(--ds-line-soft);
    color: var(--ds-ink-soft);
    font-family: var(--ds-f-m);
    font-size: .72rem;
}

.ds-tag.is-blue {
    background-color: var(--ds-blue-soft);
    color: var(--ds-blue-text);
}

.ds-tag.d-none {
    display: none !important;
}

.ds-tag.is-more {
    background-color: transparent;
    border: 1px dashed var(--ds-line);
    color: var(--ds-ink-faint);
    cursor: pointer;
}

.ds-tag.is-more:hover {
    border-color: var(--ds-orange);
    color: var(--ds-orange-text);
}

/* ============ FORMULARIO DE CURSO ============ */
.ds-form-section .control-label {
    margin-bottom: .3rem;
}

/* Selector de tipo de curso */
.ds-segmented {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

#ayuda-tipo {
    font-size: .875rem;
}

/* Interruptor con texto */
.ds-switch {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding-left: 0;
}

.ds-switch .form-check-input {
    float: none;
    margin: 0;
    width: 2.5rem;
    height: 1.35rem;
    flex: none;
    cursor: pointer;
}

.ds-switch .form-check-label {
    color: var(--ds-ink-soft);
    cursor: pointer;
}

/* Zona de carga de archivos */
.ds-drop {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    min-height: 8.5rem;
    padding: 1rem;
    border: 1.5px dashed var(--ds-line);
    border-radius: var(--ds-r-sm);
    background-color: var(--ds-surface);
    text-align: center;
    cursor: pointer;
    transition: border-color .2s, background-color .2s;
}

.ds-drop:hover,
.ds-drop.is-dragover {
    border-color: var(--ds-blue);
    background-color: var(--ds-blue-soft);
}

.ds-drop.has-file {
    border-style: solid;
    border-color: var(--ds-ok);
}

/* El input cubre toda la zona para aceptar clic y arrastre */
.ds-drop input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.ds-drop-preview {
    width: 6rem;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: .35rem;
}

/* Miniatura de la primera página del PDF (sustituye al ícono) */
.ds-drop-pdf {
    width: 6.5rem;
    height: auto;
    margin-bottom: .35rem;
    border: 1px solid var(--ds-line);
    border-radius: 4px;
    background-color: #fff;
    box-shadow: var(--ds-sh-1);
}

.ds-drop.has-pdf-thumb .ds-drop-icon {
    display: none;
}

.ds-drop-icon {
    font-size: 1.75rem;
    color: var(--ds-danger-text);
    margin-bottom: .35rem;
}

.ds-drop-title {
    font-weight: 600;
    color: var(--ds-ink);
}

.ds-drop-hint,
.ds-drop-meta {
    font-family: var(--ds-f-m);
    font-size: .72rem;
    color: var(--ds-ink-faint);
    word-break: break-word;
}

.ds-drop.has-file .ds-drop-hint {
    color: var(--ds-ok-text);
}

/* Columnas de archivos: zonas de la misma altura y botón de vista previa alineado abajo */
.ds-file-col {
    display: flex;
    flex-direction: column;
}

.ds-file-col .ds-drop {
    flex: 1;
}

/* Vista previa: botón pequeño en la esquina de la zona, por encima del input de archivo */
.ds-drop-view {
    position: absolute;
    top: .5rem;
    right: .5rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .6rem;
    border: 1px solid var(--ds-line);
    border-radius: 100px;
    background-color: var(--ds-surface);
    color: var(--ds-ink-soft);
    font-size: .75rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--ds-sh-1);
    transition: border-color .2s, color .2s;
}

.ds-drop-view:hover,
.ds-drop-view:focus-visible {
    border-color: var(--ds-blue);
    color: var(--ds-blue-text);
}

.ds-drop-view.d-none {
    display: none !important;
}

/* Vista previa de la carátula o la plantilla */
.ds-preview-body {
    display: flex;
    justify-content: center;
    background-color: var(--ds-surface-2);
}

.ds-preview-img {
    display: block;
    max-width: 100%;
    max-height: 70vh;
    border-radius: var(--ds-r-sm);
}

.ds-preview-pdf {
    width: 100%;
    height: 75vh;
    border: 0;
    border-radius: var(--ds-r-sm);
    background-color: var(--ds-surface);
}

/* Archivo de tipo no permitido (ej. imagen arrastrada en la zona de PDF) */
.ds-drop.has-error {
    border-style: solid;
    border-color: var(--ds-danger);
    background-color: var(--ds-danger-soft);
}

.ds-drop.has-error .ds-drop-hint {
    text-decoration: line-through;
}

.ds-drop.has-error .ds-drop-meta {
    color: var(--ds-danger-text);
    font-weight: 600;
}

/* Eliminar separado al final */
.ds-detail-footer {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    padding-top: .9rem;
    border-top: 1px solid var(--ds-line-soft);
}

/* Detalle del curso: imagen rectangular con esquinas suaves */
.ds-course-detail-cover {
    width: 300px;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--ds-r-sm);
    border: 1px solid var(--ds-line);
    background-color: var(--ds-surface-2);
}

/* Paginación */
.ds-admin-pager {
    display: flex;
    flex-wrap: wrap; /* con muchos números de página los botones bajan en pantallas angostas */
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: 1rem;
}

.ds-admin-pager-info {
    font-family: var(--ds-f-m);
    font-size: .75rem;
    color: var(--ds-ink-faint);
}

.ds-admin-pager-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
}

/* Números de página entre «Anterior» y «Siguiente» (paginas-numeros.js), con el mismo botón */
.ds-admin-pager-numeros {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
}

.ds-admin-pager-numeros[hidden] {
    display: none;
}

.ds-admin-pager-numero {
    min-width: 2.1rem;
    font-variant-numeric: tabular-nums;
}

.ds-admin-pager-numero.is-current,
.ds-admin-pager-numero.is-current:hover {
    border-color: var(--ds-blue);
    background-color: var(--ds-blue-soft);
    color: var(--ds-blue-text);
    cursor: default;
    transform: none;
}

.ds-admin-pager-hueco {
    padding: 0 .1rem;
    color: var(--ds-ink-faint);
}

/* Modales de administración */
.ds-modal-title {
    font-family: var(--ds-f-d);
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
}

/* Campo numérico con texto al lado (ej. "1 de 5") */
.ds-input-suffix {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.ds-input-suffix .form-control {
    max-width: 5.5rem;
}

.ds-input-suffix span {
    color: var(--ds-ink-soft);
    white-space: nowrap;
}

/* ============ VIDEO DEL TEMA ============ */
/* Reproductor responsivo en 16:9 (aplica también a videos guardados con width/height fijos) */
.ds-tema-video iframe {
    display: block;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: var(--ds-r-sm);
    background-color: #000;
}

.ds-video-preview {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
}

.ds-video-preview .ds-tema-video {
    width: 18rem;
    max-width: 100%;
    flex: none;
}

.ds-video-meta {
    font-size: .85rem;
    color: var(--ds-ink-soft);
}

@media (max-width: 575.98px) {
    .ds-video-preview {
        flex-direction: column;
        align-items: flex-start;
    }

    .ds-video-preview .ds-tema-video {
        width: 100%;
    }
}

/* Acción secundaria de riesgo como enlace (ej. quitar archivo actual) */
.ds-link-danger {
    align-self: flex-start;
    margin-top: .4rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ds-danger-text);
    font-size: .8rem;
    cursor: pointer;
}

.ds-link-danger:hover {
    text-decoration: underline;
}

/* ============ MÓDULOS DEL CURSO (ADMIN) ============ */
.ds-modules-summary {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .75rem;
}

.ds-modules-summary strong {
    font-family: var(--ds-f-d);
    color: var(--ds-ink);
}

.ds-modules-hint {
    font-family: var(--ds-f-m);
    font-size: .72rem;
    color: var(--ds-ink-faint);
}

.ds-modules,
.ds-topics {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ds-modules {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    transition: opacity .2s;
}

.ds-modules.is-saving {
    opacity: .6;
    pointer-events: none;
}

.ds-module-row,
.ds-topic {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .7rem 1rem;
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-r-sm);
    background-color: var(--ds-surface);
}

.ds-module.is-dragging .ds-module-row {
    border-style: dashed;
    border-color: var(--ds-blue);
    opacity: .6;
}

/* Asa para arrastrar */
.ds-grab {
    flex: none;
    border: 0;
    background: transparent;
    color: var(--ds-ink-faint);
    font-size: 1rem;
    line-height: 1;
    padding: .25rem;
    cursor: grab;
    border-radius: 6px;
}

.ds-grab:hover,
.ds-grab:focus-visible {
    color: var(--ds-ink);
    background-color: var(--ds-surface-2);
}

.ds-grab:active {
    cursor: grabbing;
}

.ds-module-num,
.ds-topic-num {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-family: var(--ds-f-m);
}

.ds-module-num {
    width: 2rem;
    height: 2rem;
    background-color: var(--ds-blue-fill);
    color: var(--ds-on-accent);
    font-size: .8rem;
    font-weight: 600;
}

/* Temas anidados bajo su módulo */
.ds-topics {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    margin: .4rem 0 0 2.5rem;
}

.ds-topic {
    padding: .55rem .9rem;
    background-color: var(--ds-surface-2);
}

.ds-topic-num {
    width: 1.6rem;
    height: 1.6rem;
    background-color: var(--ds-blue-soft);
    color: var(--ds-blue-text);
    font-size: .7rem;
}

/* Submódulos anidados bajo su módulo (después de sus temas) */
.ds-submodules {
    margin: .4rem 0 0 2.5rem;
    gap: .4rem;
}

.ds-module.is-sub .ds-module-num {
    width: auto;
    min-width: 2rem;
    padding: 0 .4rem;
    border-radius: 100px;
    background-color: var(--ds-blue-soft);
    color: var(--ds-blue-text);
}

.ds-icon-btn {
    padding-left: .55rem;
    padding-right: .55rem;
}

@media (max-width: 767.98px) {
    .ds-module-row,
    .ds-topic {
        flex-wrap: wrap;
    }

    .ds-topics,
    .ds-submodules {
        margin-left: 1rem;
    }
}

/* ============ ACENTOS NARANJA ============
   El azul queda para navegación e información; el naranja marca las acciones que hacen avanzar
   (iniciar, siguiente, enviar) y los acentos de marca. */

/* Línea de marca (azul → naranja) bajo el header y bajo la barra azul del curso */
.header.navbar::after,
.ds-course-content > .bg-primary::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--ds-bar);
}

.ds-course-content > .bg-primary {
    position: relative;
}

/* Acciones de la barra azul (certificado, inicio, anterior/siguiente): ícono y texto en una línea */
.ds-course-bar-acciones .nav-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .5rem;
    white-space: nowrap;
}

/* En la vista del curso basta con la línea de la barra azul; se quita la del header */
body:has(.ds-course-layout) .header.navbar::after {
    display: none;
}

/* Examen: "Siguiente" y "Enviar respuestas" en naranja; "Anterior" queda neutro.
   Estos botones los genera cursos.js, por eso se seleccionan por id/contenedor */
#btn-next.btn-primary,
#div-responder .btn-primary {
    background-color: var(--ds-orange-fill);
    border-color: var(--ds-orange-fill);
    color: var(--ds-on-accent);
}

#btn-next.btn-primary:hover,
#div-responder .btn-primary:hover {
    background-color: color-mix(in srgb, var(--ds-orange-fill) 88%, #000);
    border-color: color-mix(in srgb, var(--ds-orange-fill) 88%, #000);
}

#btn-previous.btn-primary {
    background-color: transparent;
    border-color: var(--ds-line);
    color: var(--ds-ink-soft);
}

#btn-previous.btn-primary:hover {
    background-color: var(--ds-surface-2);
    border-color: var(--ds-blue);
    color: var(--ds-ink);
}

/* Índice: el paso que sigue lleva el círculo en naranja */
.ds-toc-step.is-next .ds-toc-dot {
    border-color: var(--ds-orange);
    color: var(--ds-orange-text);
}

/* Mis cursos: la pestaña activa con punto naranja */
.ds-chip[aria-pressed="true"]::before {
    content: "";
    display: inline-block;
    width: .4rem;
    height: .4rem;
    margin-right: .4rem;
    border-radius: 50%;
    background-color: var(--ds-orange);
    vertical-align: middle;
}

/* Botón de modo oscuro: hover en naranja */
.ds-theme-toggle:hover {
    border-color: var(--ds-orange);
    color: var(--ds-orange-text);
}

/* ============ EXAMEN: PREGUNTAS OBLIGATORIAS ============ */
.ds-required {
    color: var(--ds-danger-text);
    font-weight: 700;
    margin-left: .15rem;
}

/* "* Obligatoria" pequeño al final del enunciado de la pregunta */
.ds-required-note {
    margin-left: .4rem;
    font-family: var(--ds-f-b);
    font-size: .75rem;
    font-weight: 500;
    color: var(--ds-ink-faint);
    white-space: nowrap;
}

/* Avance del examen arriba de la pregunta */
.ds-exam-progress {
    margin-bottom: 1rem;
}

.ds-exam-progress-label {
    display: flex;
    justify-content: space-between;
    margin-bottom: .4rem;
    font-family: var(--ds-f-m);
    font-size: .75rem;
    color: var(--ds-ink-faint);
}

/* Círculos de preguntas (exam.js): estado de cada pregunta y salto directo */
.ds-exam-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
}

.ds-exam-chip {
    flex: none;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 1.5px solid var(--ds-line);
    background-color: var(--ds-surface);
    color: var(--ds-ink-soft);
    font-family: var(--ds-f-m);
    font-size: .75rem;
    cursor: pointer;
    transition: border-color .2s, background-color .2s, color .2s;
}

.ds-exam-chip:hover {
    border-color: var(--ds-orange);
    color: var(--ds-ink);
}

/* Respondida: solo contorno naranja (sin relleno) */
.ds-exam-chip.is-answered {
    border-color: var(--ds-orange);
    color: var(--ds-orange-text);
}

/* Faltante al enviar: contorno rojo */
.ds-exam-chip.is-missing {
    border-color: var(--ds-danger);
    color: var(--ds-danger-text);
}

/* Revisión del examen aprobado: correcta como respondida, incorrecta en rojo */
.ds-exam-chip.is-right {
    border-color: var(--ds-orange);
    color: var(--ds-orange-text);
}

.ds-exam-chip.is-wrong {
    border-color: var(--ds-danger);
    color: var(--ds-danger-text);
}

/* Pregunta actual: la única con relleno */
.ds-exam-chip.is-current {
    background-color: var(--ds-orange-fill);
    border-color: var(--ds-orange-fill);
    color: var(--ds-on-accent);
    font-weight: 600;
}

.ds-exam-chip.is-current.is-missing,
.ds-exam-chip.is-current.is-wrong {
    background-color: var(--ds-danger-fill);
    border-color: var(--ds-danger-fill);
    color: var(--ds-on-danger);
}

/* Muchas preguntas: un solo renglón con "…" */
.ds-exam-nav.is-paged {
    flex-wrap: nowrap;
}

.ds-exam-chip.is-collapsed {
    display: none;
}

.ds-exam-gap {
    flex: none;
    width: 1.25rem;
    text-align: center;
    color: var(--ds-ink-faint);
    font-family: var(--ds-f-m);
    letter-spacing: .05em;
}

.ds-exam-gap.is-missing {
    color: var(--ds-danger-text);
    font-weight: 700;
}

/* Pie del examen: círculos a la izquierda, Anterior/Siguiente a la derecha */
.ds-exam-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
}

/* Opciones de respuesta: círculo/casilla al inicio y toda la opción clicable */
.ds-exam-option {
    padding: 0;
    background-color: var(--ds-surface) !important;
    border: 1px solid var(--ds-line) !important;
    border-radius: var(--ds-r-sm) !important;
    transition: border-color .2s, background-color .2s;
}

.ds-exam-option-label {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    width: 100%;
    margin: 0;
    padding: .9rem 1rem;
    cursor: pointer;
    color: var(--ds-ink);
    font-weight: 500;
}

.ds-exam-option:hover {
    border-color: var(--ds-blue) !important;
}

.ds-exam-option-input.form-check-input {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    margin: .1rem 0 0;
    border: 2px solid var(--ds-ink-faint);
    background-color: var(--ds-surface);
    cursor: pointer;
}

.ds-exam-option-input.form-check-input:checked,
.ds-exam-option-input.form-check-input.bg-primary {
    border-color: var(--ds-blue);
    background-color: var(--ds-blue) !important;
}

.ds-exam-option-input.form-check-input:focus-visible {
    box-shadow: 0 0 0 3px var(--ds-blue-soft);
}

.ds-exam-option-input:disabled,
.ds-exam-option-input:disabled + .ds-exam-option-text {
    cursor: default;
}

.ds-exam-option-input:disabled {
    opacity: 1;
}

.ds-exam-option-text {
    line-height: 1.5;
}

/* Opción elegida */
.ds-exam-option:has(.ds-exam-option-input:checked),
.ds-exam-option.is-answered {
    border-color: var(--ds-blue) !important;
    background-color: var(--ds-blue-soft) !important;
}

/* Revisión del examen aprobado: elegida correcta en verde, elegida incorrecta en rojo */
.ds-exam-option.is-correct {
    border-color: var(--ds-ok) !important;
    background-color: var(--ds-ok-soft) !important;
}

.ds-exam-option.is-correct .ds-exam-option-input.form-check-input {
    border-color: var(--ds-ok);
    background-color: var(--ds-ok) !important;
}

.ds-exam-option.is-wrong {
    border-color: var(--ds-danger) !important;
    background-color: var(--ds-danger-soft) !important;
}

.ds-exam-option.is-wrong .ds-exam-option-input.form-check-input {
    border-color: var(--ds-danger);
    background-color: var(--ds-danger) !important;
}

/* Retroalimentación por pregunta */
.ds-exam-feedback {
    margin: 0 0 1rem;
    padding: .8rem 1rem;
    border-left: 3px solid var(--ds-ok);
    border-radius: 0 var(--ds-r-sm) var(--ds-r-sm) 0;
    background-color: var(--ds-ok-soft);
    color: var(--ds-ink-soft);
    font-size: .9rem;
    line-height: 1.55;
}

.ds-exam-feedback.is-wrong {
    border-left-color: var(--ds-danger);
    background-color: var(--ds-danger-soft);
}

.ds-exam-feedback-title {
    margin: 0;
}

.ds-exam-feedback-title strong {
    color: var(--ds-ok-text);
}

.ds-exam-feedback.is-wrong .ds-exam-feedback-title strong {
    color: var(--ds-danger-text);
}

.ds-exam-feedback-text {
    margin-top: .35rem;
}

.ds-exam-feedback-text p:last-child {
    margin-bottom: 0;
}

.ds-exam-required-msg {
    display: none;
    margin: .25rem 0 .75rem;
    color: var(--ds-danger-text);
    font-size: .85rem;
    font-weight: 500;
}

.ds-exam-question.is-missing .ds-exam-required-msg {
    display: block;
}

.ds-exam-question.is-missing .list-group-item {
    border-color: var(--ds-danger) !important;
}

/* Verdadero / Falso: las dos opciones lado a lado */
.ds-exam-options-vf {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

.ds-exam-options-vf .ds-exam-option {
    margin-bottom: 0 !important;
}

.ds-exam-options-vf .ds-exam-option-label {
    align-items: center;
    justify-content: center;
}

/* Escala de Likert: niveles en un renglón, el círculo arriba del texto */
.ds-exam-likert {
    display: flex;
    flex-wrap: nowrap;
    gap: .5rem;
}

.ds-exam-likert .ds-exam-option {
    flex: 1 1 0;
    min-width: 0;
    margin-bottom: 0 !important;
}

.ds-exam-likert .ds-exam-option-label {
    flex-direction: column;
    align-items: center;
    height: 100%;
    gap: .5rem;
    padding: .8rem .5rem;
    text-align: center;
    font-size: .85rem;
}

.ds-exam-likert .ds-exam-option-text {
    line-height: 1.3;
}

/* Ordenamiento: posición, texto y flechas para mover (exam.js) */
.ds-exam-order-hint {
    margin: 0 0 .6rem;
    color: var(--ds-ink-faint);
    font-size: .85rem;
}

.ds-exam-order {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}

.ds-exam-order-item {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .6rem .6rem .6rem 1rem;
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-r-sm);
    background-color: var(--ds-surface);
    color: var(--ds-ink);
    font-weight: 500;
    transition: border-color .2s, background-color .2s;
}

.ds-exam-order-item:focus-within {
    border-color: var(--ds-blue);
}

.ds-exam-order-item .ds-exam-option-text {
    flex: 1;
    min-width: 0;
}

.ds-exam-order-pos {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 6px;
    background-color: var(--ds-blue-soft);
    color: var(--ds-blue-text);
    font-family: var(--ds-f-m);
    font-size: .8rem;
}

.ds-exam-order-btns {
    flex: none;
    display: inline-flex;
    gap: .25rem;
}

.ds-exam-order-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid var(--ds-line);
    border-radius: 6px;
    background-color: var(--ds-surface);
    color: var(--ds-ink-soft);
    cursor: pointer;
    transition: border-color .2s, color .2s;
}

.ds-exam-order-btn:hover:not(:disabled) {
    border-color: var(--ds-blue);
    color: var(--ds-blue-text);
}

.ds-exam-order-btn:disabled {
    opacity: .35;
    cursor: default;
}

.ds-exam-order.is-locked .ds-exam-order-btns,
.ds-exam-order-hint:has(+ .ds-exam-order.is-locked) {
    display: none;
}

.ds-exam-order-item.is-correct {
    border-color: var(--ds-ok);
    background-color: var(--ds-ok-soft);
}

.ds-exam-order-item.is-correct .ds-exam-order-pos {
    background-color: var(--ds-ok-fill);
    color: var(--ds-on-ok);
}

.ds-exam-order-item.is-wrong {
    border-color: var(--ds-danger);
    background-color: var(--ds-danger-soft);
}

.ds-exam-order-item.is-wrong .ds-exam-order-pos {
    background-color: var(--ds-danger-fill);
    color: var(--ds-on-danger);
}

/* Relación de columnas: concepto -> lista con las parejas revueltas */
.ds-exam-match {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin: 0 0 1rem;
}

.ds-exam-match-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: .85rem;
    padding: .6rem .6rem .6rem 1rem;
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-r-sm);
    background-color: var(--ds-surface);
    transition: border-color .2s, background-color .2s;
}

.ds-exam-match-row:focus-within {
    border-color: var(--ds-blue);
}

.ds-exam-match-concept {
    margin: 0;
    color: var(--ds-ink);
    font-weight: 500;
    line-height: 1.4;
}

.ds-exam-match-arrow {
    color: var(--ds-ink-faint);
}

/* Respuesta arrastrable de la relación de columnas (exam.js) */
.ds-exam-match-card {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-height: 2.6rem;
    padding: .45rem .75rem;
    border: 1px solid var(--ds-line);
    border-radius: 6px;
    background-color: var(--ds-surface);
    box-shadow: 0 1px 2px rgba(31, 42, 68, .08);
    color: var(--ds-ink);
    font-weight: 500;
    line-height: 1.3;
    cursor: grab;
    touch-action: none;
    user-select: none;
    transition: border-color .15s, box-shadow .15s, opacity .15s;
}

.ds-exam-match-card:hover,
.ds-exam-match-card:focus-visible {
    border-color: var(--ds-blue);
    outline: none;
    box-shadow: 0 2px 6px rgba(50, 132, 198, .2);
}

.ds-exam-match-grip {
    color: var(--ds-ink-faint);
}

.ds-exam-match-card.is-dragging {
    opacity: .35;
}

.ds-exam-match-card.is-target {
    border-color: var(--ds-orange);
    border-style: dashed;
    background-color: var(--ds-orange-soft);
}

.ds-exam-match-card.is-ghost {
    position: fixed;
    z-index: 2000;
    pointer-events: none;
    border-color: var(--ds-blue);
    box-shadow: 0 8px 20px rgba(31, 42, 68, .25);
    cursor: grabbing;
}

.ds-exam-arrastrando,
.ds-exam-arrastrando * {
    cursor: grabbing !important;
}

.ds-exam-match.is-locked .ds-exam-match-card {
    border-color: transparent;
    background-color: transparent;
    box-shadow: none;
    cursor: default;
}

.ds-exam-match.is-locked .ds-exam-match-grip {
    display: none;
}

.ds-exam-match-row.is-correct {
    border-color: var(--ds-ok);
    background-color: var(--ds-ok-soft);
}

.ds-exam-match-row.is-wrong {
    border-color: var(--ds-danger);
    background-color: var(--ds-danger-soft);
}

/* Completar espacios: campos dentro del texto */
.ds-exam-blanks {
    margin: 0 0 1rem;
    color: var(--ds-ink);
    font-size: 1rem;
    line-height: 2.6;
}

.ds-exam-blank.form-control {
    display: inline-block;
    width: 10rem;
    max-width: 100%;
    margin: 0 .25rem;
    padding: .2rem .5rem;
    border-width: 0 0 2px;
    border-style: dashed;
    border-color: var(--ds-blue);
    border-radius: 4px 4px 0 0;
    background-color: var(--ds-blue-soft);
    vertical-align: baseline;
    line-height: 1.5;
}

.ds-exam-blank.form-control:focus {
    border-bottom-style: solid;
    box-shadow: none;
}

.ds-exam-blank.form-control:disabled {
    opacity: 1;
}

.ds-exam-blank.is-correct {
    border-color: var(--ds-ok);
    background-color: var(--ds-ok-soft);
}

.ds-exam-blank.is-wrong {
    border-color: var(--ds-danger);
    background-color: var(--ds-danger-soft);
}

.ds-exam-question.is-missing .ds-exam-match-row {
    border-color: var(--ds-danger);
}

/* Punto caliente en el examen: pin donde hizo clic el colaborador */
.ds-hotspot-pin {
    position: absolute;
    width: 1.1rem;
    height: 1.1rem;
    border: 2px solid #fff;
    border-radius: 50% 50% 50% 0;
    background-color: var(--ds-orange);
    box-shadow: var(--ds-sh-1);
    transform: translate(-50%, -100%) rotate(-45deg);
    pointer-events: none;
}

.ds-hotspot-pin[hidden] {
    display: none;
}

.ds-hotspot-pin.is-correct {
    background-color: var(--ds-ok);
}

.ds-hotspot-pin.is-wrong {
    background-color: var(--ds-danger);
}

.ds-exam-question .ds-hotspot {
    margin-bottom: 1rem;
}

.ds-exam-question .ds-hotspot-zone {
    pointer-events: none;
}

/* Archivo / respuesta abierta */
.ds-exam-open-text {
    margin-bottom: 1rem;
}

/* Ya enviado: se muestra el archivo y no el campo deshabilitado (reintentar lo vuelve a habilitar) */
.ds-exam-open-input:disabled,
.ds-exam-open-input:disabled + .ds-exam-order-hint {
    display: none;
}

.ds-exam-open-file {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .6rem;
    font-weight: 600;
}

.ds-exam-review {
    margin: 0 0 1rem;
    padding: .7rem 1rem;
    border-left: 3px solid var(--ds-orange);
    border-radius: 0 var(--ds-r-sm) var(--ds-r-sm) 0;
    background-color: var(--ds-surface-2);
    color: var(--ds-ink-soft);
    font-size: .9rem;
}

.ds-exam-review.is-done {
    border-left-color: var(--ds-blue);
}

.ds-exam-review strong {
    display: block;
    color: var(--ds-ink);
}

@media (max-width: 575.98px) {
    .ds-exam-match-row {
        grid-template-columns: minmax(0, 1fr);
        gap: .4rem;
    }

    .ds-exam-match-arrow {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .ds-exam-likert {
        flex-direction: column;
    }

    .ds-exam-likert .ds-exam-option-label {
        flex-direction: row;
        justify-content: flex-start;
        text-align: left;
    }
}

/* ============ CURSO: OCULTAR/MOSTRAR ÍNDICE HACIA EL LADO ============ */
.ds-course-sidebar {
    overflow: hidden;
    transition: width .35s ease, padding .35s ease, opacity .25s ease;
}

.ds-course-sidebar > nav {
    min-width: 15rem;
}

.ds-course-content {
    transition: width .35s ease;
}

.ds-course-sidebar.hidden {
    width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    opacity: 0;
}

/* Pantallas angostas (celular o ventana chica): el índice inicia oculto y el botón de las tres líneas
   lo abre flotando sobre el contenido (course-sidebar.js alterna .is-open) */
@media (max-width: 767.98px) {
    .ds-course-sidebar:not(.is-open) {
        display: none;
    }

    .ds-course-sidebar.is-open {
        position: absolute;
        top: var(--ds-peek-top, 0);
        left: calc(var(--bs-gutter-x, 1.5rem) * .5);
        z-index: 1030;
        width: min(20rem, 85vw) !important;
        max-height: calc(100vh - 2rem);
        overflow-y: auto;
        padding-left: .75rem !important;
        padding-right: .75rem !important;
        opacity: 1;
        background-color: var(--ds-surface) !important;
        border: 1px solid var(--ds-line);
        border-radius: 0 var(--ds-r) var(--ds-r) 0;
        box-shadow: var(--ds-sh-3);
        transition: none;
    }
}

/* Vista previa: con el índice oculto, al pasar el mouse por el botón se muestra flotando sobre el contenido */
.ds-course-layout {
    position: relative;
}

.ds-course-sidebar.hidden.is-peek {
    position: absolute;
    top: var(--ds-peek-top, 0);
    left: calc(var(--bs-gutter-x, 1.5rem) * .5);
    z-index: 1030;
    width: min(20rem, 85vw) !important;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    padding-left: .75rem !important;
    padding-right: .75rem !important;
    opacity: 1;
    background-color: var(--ds-surface) !important;
    border: 1px solid var(--ds-line);
    border-radius: 0 var(--ds-r) var(--ds-r) 0;
    box-shadow: var(--ds-sh-3);
}

/* Sin transición por un momento (al fijar el índice desde la vista previa) */
.ds-no-anim {
    transition: none !important;
}

/* Cierre de la vista previa: se encoge hacia el lado sin volver al flujo de la página */
.ds-course-sidebar.hidden.is-peek.is-peek-closing {
    width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    opacity: 0;
    border-width: 0;
}

.ds-empty {
    text-align: center;
    color: var(--ds-ink-soft);
    padding: 2rem 0;
}

/* ============ REPORTES ============ */
/* Certificado y acciones de fila: botones juntos en una fila, sin partirse */
.ds-cert-actions,
.ds-row-actions {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    white-space: nowrap;
}

.ds-cert-actions .btn,
.ds-row-actions .btn {
    margin: 0;
}

/* Tablas (DataTables) en pantallas angostas: la paginación pasa a otra línea en lugar de salirse */
@media (max-width: 575.98px) {
    .dataTables_wrapper .dataTables_paginate .pagination {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: .35rem;
    }
}

/* ============ CONSTRUCTOR DE EXAMEN (ADMIN) ============ */
.ds-exam-head-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Valor calculado con aspecto de campo, sin poder editarse */
.ds-output {
    display: block;
    background-color: var(--ds-surface-2);
    font-weight: 600;
    color: var(--ds-ink);
}

.ds-exam-data-foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    margin-top: 1rem;
}

.ds-detail-footer .ds-link-danger {
    align-self: center;
    margin-top: 0;
    font-size: .85rem;
}

/* Botón con aspecto de enlace (Expandir todas, Agregar opción) */
.ds-link-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ds-blue-text);
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
}

.ds-link-btn:hover:not(:disabled) {
    color: var(--ds-orange-text);
}

.ds-link-btn:disabled {
    color: var(--ds-ink-faint);
    cursor: not-allowed;
}

.ds-q-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 1.25rem 0 .6rem;
}

.ds-q-list {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Tarjeta de pregunta */
.ds-q {
    position: relative;
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-r-sm);
    background-color: var(--ds-surface);
    scroll-margin-top: 1rem;
    transition: border-color .2s, box-shadow .2s;
}

.ds-q.is-open {
    box-shadow: var(--ds-sh-2);
}

.ds-q.has-error {
    border-color: var(--ds-danger);
}

.ds-q-head {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    padding: .75rem 7.75rem .75rem 1rem;
    border: 0;
    border-radius: var(--ds-r-sm);
    background: none;
    color: var(--ds-ink);
    text-align: left;
    cursor: pointer;
}

/* Puntaje editable en la cabecera de la pregunta, sobre el lado derecho */
.ds-q-quick {
    position: absolute;
    top: .6rem;
    right: 1rem;
    display: flex;
    align-items: center;
    gap: .4rem;
    color: var(--ds-ink-faint);
    font-family: var(--ds-f-m);
    font-size: .72rem;
}

.ds-q-quick .form-control {
    width: 4.5rem;
    height: 2.05rem;
    padding: .2rem .4rem;
    font-family: var(--ds-f-m);
    font-size: .85rem;
    text-align: center;
}

.ds-q-head:hover {
    background-color: var(--ds-surface-2);
}

.ds-q-num {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    height: 1.75rem;
    padding: 0 .35rem;
    border-radius: 6px;
    background-color: var(--ds-blue-soft);
    color: var(--ds-blue-text);
    font-family: var(--ds-f-m);
    font-size: .75rem;
}

.ds-q.has-error .ds-q-num {
    background-color: var(--ds-danger-soft);
    color: var(--ds-danger-text);
}

.ds-q-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.ds-q.is-open .ds-q-title {
    font-family: var(--ds-f-d);
    font-size: 1.02rem;
}

.ds-q-title.is-empty {
    color: var(--ds-ink-faint);
    font-style: italic;
    font-weight: 400;
}

.ds-q-meta {
    flex: none;
    padding: .2rem .6rem;
    border-radius: 100px;
    background-color: var(--ds-line-soft);
    color: var(--ds-ink-soft);
    font-family: var(--ds-f-m);
    font-size: .72rem;
}

.ds-q-chevron {
    flex: none;
    color: var(--ds-ink-faint);
    font-size: .75rem;
    transition: transform .2s ease;
}

.ds-q.is-open .ds-q-chevron {
    transform: rotate(180deg);
}

.ds-q-body {
    padding: .25rem 1rem 1rem;
    border-top: 1px solid var(--ds-line-soft);
}

.ds-q-body .control-label {
    margin-bottom: .3rem;
}

.ds-q-body .row {
    margin-top: .5rem;
}

.ds-q-alert:not(:empty) {
    margin-top: .75rem;
    padding: .5rem .75rem;
    border-radius: var(--ds-r-sm);
    background-color: var(--ds-danger-soft);
}

.ds-q-alert label.text-danger,
.ds-q-body label.text-danger,
#error-titulo label.text-danger,
#error-puntos label.text-danger {
    margin: .25rem 0 0;
    font-size: .8rem;
}

.ds-q-options {
    margin-top: 1rem;
}

.ds-q-options-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.ds-q-hint {
    font-family: var(--ds-f-m);
    font-size: .72rem;
    color: var(--ds-ink-faint);
}

/* Retroalimentación: mínimo 3 renglones; la altura sigue al texto (exam-builder.js) */
.ds-q-feedback {
    min-height: 5.5rem;
    overflow-y: hidden;
    resize: none;
}

.ds-q-foot {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
    padding-top: .75rem;
    border-top: 1px solid var(--ds-line-soft);
}

.ds-q-foot .ds-link-danger {
    margin-top: 0;
}

/* Opciones: marca de correcta, texto y quitar; la correcta queda en verde */
.ds-opts {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    margin: .4rem 0 .6rem;
    padding: 0;
    list-style: none;
}

.ds-opt {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0 .6rem;
    padding: .35rem .5rem .35rem .75rem;
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-r-sm);
    background-color: var(--ds-surface);
    transition: border-color .2s, background-color .2s;
}

.ds-opt-mark {
    display: inline-flex;
    margin: 0;
    cursor: pointer;
}

.ds-opt-mark .form-check-input {
    width: 1.2rem;
    height: 1.2rem;
    margin: 0;
    cursor: pointer;
}

.ds-opt-mark .form-check-input:checked {
    background-color: var(--ds-ok);
    border-color: var(--ds-ok);
}

.ds-opt-text.form-control {
    padding: .35rem .25rem;
    border-color: transparent;
    background-color: transparent;
    box-shadow: none;
}

.ds-opt-text.form-control:focus {
    border-color: transparent;
    box-shadow: none;
}

.ds-opt:focus-within {
    border-color: var(--ds-blue);
}

.ds-opt-badge {
    display: none;
    font-family: var(--ds-f-m);
    font-size: .7rem;
    font-weight: 600;
    color: var(--ds-ok-text);
}

.ds-opt-del {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--ds-ink-faint);
    cursor: pointer;
}

.ds-opt-del:hover {
    background-color: var(--ds-danger-soft);
    color: var(--ds-danger-text);
}

.ds-opt-del[hidden] {
    display: inline-flex !important;
    visibility: hidden;
}

.ds-opt-error {
    grid-column: 2 / -1;
}

.ds-opt-error:empty {
    display: none;
}

.ds-opt:has(.ds-opt-mark input:checked) {
    border-color: var(--ds-ok);
    background-color: var(--ds-ok-soft);
}

.ds-opt:has(.ds-opt-mark input:checked) .ds-opt-badge {
    display: inline;
}

.ds-opt:has(.ds-opt-mark input:checked) .ds-opt-text {
    color: var(--ds-ink);
}

.ds-opt.is-invalid {
    border-color: var(--ds-danger);
}

/* Tipo de reactivo: tarjetas con miniatura (exam-builder.js) */
.ds-qtype {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .6rem;
}

.ds-qtype-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin: 0;
    padding: .6rem .6rem .7rem;
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-r-sm);
    background-color: var(--ds-surface);
    cursor: pointer;
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s;
}

.ds-qtype-card:hover {
    border-color: var(--ds-blue);
}

/* El radio queda accesible por teclado pero no se ve: la tarjeta completa es la opción */
.ds-qtype-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ds-qtype-card:has(.ds-qtype-input:focus-visible) {
    box-shadow: 0 0 0 .2rem var(--ds-blue-soft);
}

.ds-qtype-card:has(.ds-qtype-input:checked) {
    border-color: var(--ds-orange);
    box-shadow: var(--ds-sh-1);
}

/* Franja superior de la tarjeta elegida */
.ds-qtype-card:has(.ds-qtype-input:checked)::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, var(--ds-blue), var(--ds-orange));
}

.ds-qtype-art {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .3rem;
    height: 3.25rem;
    padding: .45rem .6rem;
    border: 1px solid var(--ds-line-soft);
    border-radius: 6px;
    background-color: var(--ds-surface-2);
}

.ds-qa-row {
    display: flex;
    align-items: center;
    gap: .35rem;
}

.ds-qa-dot {
    flex: none;
    width: .45rem;
    height: .45rem;
    border: 1px solid var(--ds-ink-faint);
    border-radius: 50%;
    background-color: var(--ds-surface);
}

.ds-qa-grip {
    flex: none;
    width: .4rem;
    height: .45rem;
    border-top: 2px dotted var(--ds-ink-faint);
    border-bottom: 2px dotted var(--ds-ink-faint);
}

.ds-qa-bar {
    flex: 1;
    height: .25rem;
    border-radius: 100px;
    background-color: var(--ds-ink-faint);
    opacity: .35;
}

.ds-qa-row.is-on .ds-qa-bar {
    opacity: 1;
}

.ds-qa-row.is-on .ds-qa-dot,
.ds-qa-scale .ds-qa-dot.is-on {
    border-color: var(--ds-blue);
    background-color: var(--ds-blue);
}

.ds-qa-row.is-on .ds-qa-bar {
    background-color: var(--ds-blue);
}

/* Relación de columnas: dos barras unidas; completar espacios: hueco punteado */
.ds-qa-link {
    flex: none;
    width: .6rem;
    border-top: 1px dashed var(--ds-ink-faint);
}

.ds-qa-row.is-on .ds-qa-link {
    border-top-color: var(--ds-blue);
}

.ds-qa-gap {
    flex: none;
    width: 1.4rem;
    height: .55rem;
    border: 1px dashed var(--ds-blue);
    border-radius: 3px;
}

/* Archivo: etiqueta de formatos; punto caliente: imagen con un pin */
.ds-qa-file {
    align-self: center;
    padding: .2rem .5rem;
    border-radius: 4px;
    background-color: var(--ds-line-soft);
    color: var(--ds-ink-faint);
    font-family: var(--ds-f-m);
    font-size: .62rem;
    letter-spacing: .04em;
}

.ds-qa-image {
    position: relative;
    height: 100%;
    border-radius: 4px;
    background-color: var(--ds-line-soft);
}

.ds-qa-pin {
    position: absolute;
    top: 45%;
    left: 50%;
    width: .55rem;
    height: .55rem;
    border-radius: 50% 50% 50% 0;
    background-color: var(--ds-orange);
    transform: translate(-50%, -50%) rotate(-45deg);
}

.ds-qa-scale {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ds-qtype-num {
    font-family: var(--ds-f-m);
    font-size: .68rem;
    color: var(--ds-ink-faint);
}

.ds-qtype-name {
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--ds-ink);
}

.ds-qtype-multiple {
    margin: .6rem 0 0;
}

.ds-qtype-multiple[hidden] {
    display: none;
}

/* Posición del elemento en ordenamiento (en lugar de la marca de correcta) */
.ds-opt-pos {
    display: none;
}

.ds-q[data-tipo="5"] .ds-opt-mark,
.ds-q[data-tipo="6"] .ds-opt-mark {
    cursor: default;
}

.ds-q[data-tipo="5"] .ds-opt-mark .form-check-input,
.ds-q[data-tipo="6"] .ds-opt-mark .form-check-input {
    display: none;
}

.ds-q[data-tipo="5"] .ds-opt-pos,
.ds-q[data-tipo="6"] .ds-opt-pos {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 6px;
    background-color: var(--ds-blue-soft);
    color: var(--ds-blue-text);
    font-family: var(--ds-f-m);
    font-size: .72rem;
}

/* Relación de columnas: concepto <-> pareja en el mismo renglón */
.ds-opt-link,
.ds-opt-pair {
    display: none;
}

.ds-q[data-tipo="6"] .ds-opt {
    grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr) auto;
}

.ds-q[data-tipo="6"] .ds-opt-link {
    display: inline;
    color: var(--ds-ink-faint);
}

.ds-q[data-tipo="6"] .ds-opt-pair.form-control {
    display: block;
    padding: .35rem .5rem;
    border-color: transparent;
    border-left-color: var(--ds-line-soft);
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
}

/* Completar espacios: el texto sustituye a las opciones */
.ds-q-blanks {
    display: none;
    margin-top: 1rem;
}

.ds-q[data-tipo="7"] .ds-q-blanks {
    display: block;
}

.ds-q[data-tipo="7"] .ds-q-options {
    display: none;
}

.ds-q-blanks-summary {
    margin: .35rem 0 0;
    color: var(--ds-blue-text);
    font-size: .85rem;
    font-weight: 600;
}

.ds-q-blanks-summary:empty {
    display: none;
}

/* Punto caliente y archivo / respuesta abierta: sustituyen a las opciones */
.ds-q-hotspot,
.ds-q-open {
    display: none;
    margin-top: 1rem;
}

.ds-q[data-tipo="8"] .ds-q-hotspot,
.ds-q[data-tipo="9"] .ds-q-open {
    display: block;
}

.ds-q[data-tipo="8"] .ds-q-options,
.ds-q[data-tipo="9"] .ds-q-options {
    display: none;
}

/* Tamaño máximo por pregunta de archivo */
.ds-q-file-limit {
    max-width: 16rem;
    margin-top: .75rem;
}

.ds-q-file-limit[hidden] {
    display: none;
}

.ds-hotspot-pick {
    margin-top: .25rem;
}

.ds-hotspot-range {
    max-width: 18rem;
}

/* Verdadero y Falso son fijos */
.ds-opt-text.form-control[readonly] {
    cursor: default;
}

[data-add-opt][hidden] {
    display: none;
}

@media (max-width: 767.98px) {
    .ds-qtype {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Imagen de punto caliente (constructor y examen): zonas y pin en % sobre la imagen */
.ds-hotspot {
    position: relative;
    display: inline-block;
    max-width: 100%;
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-r-sm);
    overflow: hidden;
    user-select: none;
}

.ds-hotspot[hidden] {
    display: none;
}

.ds-hotspot-img {
    display: block;
    max-width: 100%;
    max-height: 28rem;
}

.ds-hotspot.is-editing .ds-hotspot-img,
.ds-hotspot.is-answer .ds-hotspot-img {
    cursor: crosshair;
}

.ds-hotspot-zone {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    padding: 0;
    border: 2px dashed var(--ds-ok);
    border-radius: 50%;
    background-color: color-mix(in srgb, var(--ds-ok) 25%, transparent);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); /* se distingue sobre cualquier imagen */
    color: var(--ds-ok-text);
    font-family: var(--ds-f-m);
    font-size: .75rem;
    font-weight: 700;
    transform: translate(-50%, -50%);
}

button.ds-hotspot-zone {
    cursor: pointer;
}

button.ds-hotspot-zone:hover {
    border-color: var(--ds-danger);
    background-color: color-mix(in srgb, var(--ds-danger) 18%, transparent);
    color: var(--ds-danger-text);
}

/* Constructor de examen: lista de preguntas y, a un lado, navegación por puntos (exam-dots.js) */
.ds-q-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: start;
}

.ds-q-dots {
    position: sticky;
    top: 5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .45rem;
    padding: .6rem .4rem;
    border: 1px solid var(--ds-line);
    border-radius: 999px;
    background-color: var(--ds-surface);
}

.ds-q-dots-total {
    font-family: var(--ds-f-m);
    font-size: .7rem;
    color: var(--ds-ink-faint);
}

.ds-q-dots-list {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    max-height: calc(100vh - 12rem);
    overflow-y: auto;
    scrollbar-width: none;
    padding: .1rem;
}

.ds-q-dot {
    position: relative;
    flex: none;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: .55rem;
    border: 1.5px solid var(--ds-line);
    background-color: var(--ds-surface);
    color: var(--ds-ink-soft);
    font-family: var(--ds-f-m);
    font-size: .72rem;
    cursor: pointer;
    transition: border-color .2s, background-color .2s, color .2s;
}

.ds-q-dot:hover {
    border-color: var(--ds-orange);
    color: var(--ds-ink);
}

/* Pregunta con error: contorno rojo y un punto en la esquina */
.ds-q-dot.has-error {
    border-color: var(--ds-danger);
    color: var(--ds-danger-text);
}

.ds-q-dot.has-error::after {
    content: "";
    position: absolute;
    top: -.25rem;
    right: -.25rem;
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background-color: var(--ds-danger);
}

/* Pregunta que se ve en pantalla: la única con relleno */
.ds-q-dot.is-current {
    background-color: var(--ds-orange-fill);
    border-color: var(--ds-orange-fill);
    color: var(--ds-on-accent);
    font-weight: 600;
}

.ds-q-dot.is-current.has-error {
    background-color: var(--ds-danger-fill);
    border-color: var(--ds-danger-fill);
    color: var(--ds-on-danger);
}

.ds-q-dot.is-add {
    border-style: dashed;
    color: var(--ds-blue-text);
}

/* En pantallas angostas no hay espacio a un lado: solo la lista */
@media (max-width: 991.98px) {
    .ds-q-layout {
        display: block;
    }

    .ds-q-dots {
        display: none;
    }
}

/* Agregar pregunta al final de la lista */
.ds-q-add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    width: 100%;
    margin: .75rem 0 1rem;
    padding: .7rem;
    border: 1.5px dashed var(--ds-line);
    border-radius: var(--ds-r-sm);
    background: none;
    color: var(--ds-blue-text);
    font-weight: 600;
    cursor: pointer;
    transition: border-color .2s, color .2s;
}

.ds-q-add:hover {
    border-color: var(--ds-orange);
    color: var(--ds-orange-text);
}

@media (max-width: 575.98px) {
    .ds-q-head {
        flex-wrap: wrap;
        padding-right: 1rem;
    }

    .ds-q-quick {
        position: static;
        justify-content: flex-end;
        padding: 0 1rem .6rem;
    }

    .ds-q-title {
        flex-basis: calc(100% - 2.5rem);
        white-space: normal;
    }

    .ds-q-meta {
        margin-left: 2.5rem;
    }
}

/* ============ AUDIENCIA DEL CURSO (view_curso_audiencia.php, audiencia.js) ============ */
.ds-aud {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-top: 1rem;
}

.ds-aud-group {
    margin: 0;
    padding: .9rem 1rem;
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-r-sm);
    background-color: var(--ds-surface);
}

.ds-aud-label {
    float: left;
    width: 100%;
    margin-bottom: .6rem;
    padding: 0;
    color: var(--ds-ink-soft);
    font-family: var(--ds-f-m);
    font-size: .72rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.ds-aud-label::before {
    content: "";
    display: inline-block;
    width: .4rem;
    height: .4rem;
    margin-right: .5rem;
    border-radius: 50%;
    background-color: var(--ds-orange);
    vertical-align: middle;
}

.ds-aud-label + * {
    clear: left;
}

.ds-aud-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

/* Chip con un checkbox o radio real (accesible con teclado) */
.ds-aud-chip {
    position: relative;
    margin: 0;
    cursor: pointer;
}

.ds-aud-chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ds-aud-chip span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .4rem .9rem;
    border: 1px solid var(--ds-line);
    border-radius: 100px;
    background-color: var(--ds-surface);
    color: var(--ds-ink-soft);
    font-size: .85rem;
    transition: background-color .15s, color .15s, border-color .15s;
}

.ds-aud-chip:hover span {
    border-color: var(--ds-ink-faint);
}

.ds-aud-chip input:checked + span {
    border-color: transparent;
    background-color: var(--ds-ink);
    color: var(--ds-surface);
}

.ds-aud-chip input[type="checkbox"]:checked + span::before {
    content: "\2713";
}

.ds-aud-chip input:focus-visible + span {
    outline: 2px solid var(--ds-blue);
    outline-offset: 2px;
}

.ds-aud-areas {
    margin-top: .8rem;
}

.ds-aud-error:empty {
    display: none;
}

.ds-aud-error {
    color: var(--ds-danger-text);
    font-size: .85rem;
}

.ds-aud.has-error .ds-aud-group:first-child {
    border-color: var(--ds-danger);
}

.ds-aud-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
}

.ds-aud-stat {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .8rem 1rem;
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-r-sm);
    background-color: var(--ds-surface);
}

.ds-aud-stat strong {
    color: var(--ds-ink);
    font-family: var(--ds-f-d);
    font-size: 1.4rem;
    line-height: 1.2;
}

.ds-aud-stat span {
    color: var(--ds-ink-faint);
    font-size: .8rem;
}

@media (max-width: 575.98px) {
    .ds-aud-stats {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ============ CERTIFICADO DEL CURSO (view_curso_certificado.php, certificado-editor.js) ============ */
.ds-cert {
    display: grid;
    grid-template-columns: 11rem minmax(0, 1fr) 13rem;
    gap: 1rem;
    align-items: start;
}

.ds-cert-titulo {
    display: block;
    margin-bottom: .5rem;
    color: var(--ds-ink-faint);
    font-family: var(--ds-f-m);
    font-size: .7rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.ds-cert-plantillas {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.ds-cert-plantilla {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding: .5rem;
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-r-sm);
    background-color: var(--ds-surface);
    color: var(--ds-ink);
    text-align: left;
}

.ds-cert-plantilla:hover {
    border-color: var(--ds-ink-faint);
}

.ds-cert-plantilla[aria-checked="true"] {
    border-color: var(--ds-orange);
    box-shadow: 0 0 0 1px var(--ds-orange);
}

.ds-cert-mini {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 3.2rem;
    overflow: hidden;
    border-radius: 6px;
    background-color: var(--ds-surface-2);
    color: var(--ds-ink-faint);
    font-size: 1.2rem;
}

.ds-cert-mini img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ds-cert-plantilla-nombre {
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.25;
}

.ds-cert-plantilla-detalle {
    color: var(--ds-ink-faint);
    font-size: .72rem;
}

.ds-cert-nueva {
    width: 100%;
    margin-top: .5rem;
    padding: .45rem;
    border: 1px dashed var(--ds-line);
    border-radius: var(--ds-r-sm);
    background: none;
    color: var(--ds-ink-soft);
    font-size: .8rem;
}

.ds-cert-nueva:hover {
    border-color: var(--ds-orange);
    color: var(--ds-orange-text);
}

.ds-cert-vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 14rem;
    padding: 1.5rem;
    border: 1px dashed var(--ds-line);
    border-radius: var(--ds-r-sm);
    color: var(--ds-ink-soft);
    text-align: center;
}

.ds-cert-vacio i {
    color: var(--ds-ink-faint);
    font-size: 2rem;
}

.ds-cert-vacio p {
    max-width: 28rem;
    margin: 0;
    font-size: .88rem;
}

/* Lienzo: la base ocupa todo el ancho; las variables se colocan en % */
.ds-cert-lienzo {
    position: relative;
    width: 100%;
    aspect-ratio: 11 / 8.5;
    overflow: hidden;
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-r-sm);
    background: linear-gradient(135deg, var(--ds-surface-2), var(--ds-orange-soft));
    touch-action: none;
    user-select: none;
}

.ds-cert-fondo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.ds-cert-el {
    position: absolute;
    padding: .05rem .3rem;
    overflow: hidden;
    border: 1px dashed var(--ds-blue);
    border-radius: 3px;
    background-color: rgba(128, 128, 128, .35);
    color: #1E1E1E;
    font-family: Helvetica, Arial, sans-serif;
    line-height: 1.2;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: grab;
}

.ds-cert-el:active {
    cursor: grabbing;
}

.ds-cert-el.is-selected,
.ds-cert-el:focus-visible {
    border-style: solid;
    outline: 2px solid var(--ds-orange);
    outline-offset: 1px;
}

/* Igual que en el PDF: QR negro sobre blanco con un margen (quiet zone) */
.ds-cert-el.is-qr {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background-color: #FFFFFF;
    color: #000000;
}

/* El dibujo ocupa toda la caja menos el margen, a cualquier tamaño */
.ds-cert-el.is-qr svg {
    position: absolute;
    top: 6%;
    left: 6%;
    width: 88%;
    height: 88%;
    max-width: none;
}

.ds-cert-aviso {
    margin: .6rem 0 0;
    padding: .5rem .75rem;
    border-left: 3px solid var(--ds-orange);
    border-radius: 4px;
    background-color: var(--ds-orange-soft);
    color: var(--ds-ink);
    font-size: .82rem;
}

.ds-cert-acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: .75rem;
}

.ds-cert-vista {
    display: inline-block;
}

/* Inhabilitado: el puntero pasa a la envoltura, que muestra el aviso */
.ds-cert-vista .btn:disabled {
    pointer-events: none;
}

.ds-cert-propio-pie {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem 1rem;
}

.ds-cert-propio-pie .ds-cert-nota {
    flex: 1;
    min-width: 14rem;
    margin-top: .75rem;
}

.ds-cert-propio-pie .btn {
    margin-top: .6rem;
}

.ds-cert-ayuda {
    margin-right: auto;
    color: var(--ds-ink-faint);
    font-size: .78rem;
}

.ds-cert-var-lista {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.ds-cert-var-fila {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    padding: .35rem .55rem;
    border: 1px dashed var(--ds-line);
    border-radius: 6px;
    color: var(--ds-blue-text);
    font-family: var(--ds-f-m);
    font-size: .74rem;
    cursor: pointer;
}

.ds-cert-var-fila .form-check-input {
    flex: none;
    margin: 0;
}

.ds-cert-ajustes {
    margin-top: 1rem;
    padding-top: .75rem;
    border-top: 1px solid var(--ds-line-soft);
}

.ds-cert-align {
    display: flex;
    gap: .35rem;
}

.ds-cert-nota {
    margin: 1rem 0 0;
    color: var(--ds-ink-faint);
    font-size: .75rem;
}

/* Ficha del curso */
.ds-cert-resumen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .9rem;
}

.ds-cert-resumen .ds-cert-mini {
    width: 5rem;
}

.ds-cert-resumen-texto {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 12rem;
}

.ds-cert-resumen-texto span {
    color: var(--ds-ink-faint);
    font-size: .82rem;
}

.ds-tag.is-warning {
    border-color: transparent;
    background-color: var(--ds-warning-soft);
    color: var(--ds-warning-text);
}

/* Página pública de validación */
.ds-validar {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1.5rem 1rem;
}

.ds-validar-card {
    width: 100%;
    max-width: 30rem;
    padding: 2rem;
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-r);
    background-color: var(--ds-surface);
    box-shadow: var(--ds-sh-2);
    text-align: center;
}

.ds-validar-logo {
    display: block;
    width: 6rem;
    margin: 0 auto 1.25rem;
}

.ds-validar-estado {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .9rem;
    border-radius: 100px;
    font-weight: 600;
}

.ds-validar-estado.is-valido {
    background-color: var(--ds-ok-soft);
    color: var(--ds-ok-text);
}

.ds-validar-estado.is-invalido {
    background-color: var(--ds-danger-soft);
    color: var(--ds-danger-text);
}

.ds-validar-datos {
    margin: 1.5rem 0 0;
    text-align: left;
}

.ds-validar-datos dt {
    color: var(--ds-ink-faint);
    font-family: var(--ds-f-m);
    font-size: .7rem;
    font-weight: 400;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.ds-validar-datos dd {
    margin: 0 0 .8rem;
    color: var(--ds-ink);
    font-size: 1rem;
}

.ds-validar-folio {
    font-family: var(--ds-f-m);
}

.ds-validar-texto {
    margin: 1.25rem 0 0;
    color: var(--ds-ink-soft);
}

@media (max-width: 991.98px) {
    .ds-cert {
        grid-template-columns: minmax(0, 1fr);
    }

    .ds-cert-plantillas {
        flex-direction: row;
        overflow-x: auto;
    }

    .ds-cert-plantilla {
        flex: none;
        width: 10rem;
    }
}

/* ============ ACCESIBILIDAD ============ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition: none !important;
        animation: none !important;
    }
}

/* ============ MI CUENTA ============ */
.ds-account-profile {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.ds-account-photo {
    flex: none;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--ds-surface-2);
}

.ds-account-info {
    min-width: 0;
    flex: 1;
}

.ds-account-name {
    margin: 0 0 .5rem;
    font-size: 1.3rem;
    font-weight: 700;
}

.ds-account-data {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 2rem;
    margin: 0;
}

.ds-account-data dt {
    font-family: var(--ds-f-m);
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ds-ink-faint);
}

.ds-account-data dd {
    margin: 0;
    color: var(--ds-ink);
    overflow-wrap: anywhere;
}

.ds-account-cta {
    flex: none;
    align-self: flex-start;
}

/* Barra de avance con el porcentaje a la derecha */
.ds-account-progress {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-top: .35rem;
}

.ds-account-progress .ds-progress {
    flex: 1;
}

.ds-account-progress .ds-admin-row-meta {
    flex: none;
    min-width: 2.5rem;
    text-align: right;
}

.ds-account-row.d-none {
    display: none !important;
}

@media (max-width: 767.98px) {
    .ds-account-profile {
        flex-direction: column;
        text-align: center;
    }

    .ds-account-data {
        justify-content: center;
    }

    .ds-account-cta {
        align-self: center;
    }
}

.ds-account .ds-admin-head {
    flex-wrap: wrap;
}

/* Cursos externos o sin acceso: el nombre no es enlace, no cambia de color */
.ds-account span.ds-admin-row-name:hover {
    color: var(--ds-ink);
}

/* Nombre del curso con su etiqueta (ej. Cerrado) en la misma línea */
.ds-account-name-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

/* Inicio: tarjeta de curso cerrado ligeramente opaca; la etiqueta y la fecha de caducidad quedan legibles */
[data-estado="cerrado"] .ds-course-cover,
[data-estado="cerrado"] .ds-course .ds-initials,
[data-estado="cerrado"] .ds-course-title,
[data-estado="cerrado"] .ds-course-meta,
[data-estado="cerrado"] .ds-course .ds-progress {
    opacity: .55;
}

/* Curso cerrado (venció su vigencia): opaco y sin enlace */
.ds-account-row.is-closed .ds-avatar,
.ds-account-row.is-closed .ds-admin-row-name,
.ds-account-row.is-closed .ds-account-progress,
.ds-account-row.is-closed .ds-admin-row-actions {
    opacity: .55;
}

.ds-account-row.is-closed span.ds-admin-row-name {
    cursor: default;
}

/* ============ REVISIÓN DE RESPUESTAS (REPORTES) ============ */
.ds-review .ds-admin-head {
    flex-wrap: wrap;
}

.ds-review-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.ds-review-item {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid var(--ds-line);
    border-left: 3px solid var(--ds-orange);
    border-radius: var(--ds-r-sm);
    background-color: var(--ds-surface);
}

.ds-review-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem 1rem;
    margin-bottom: .6rem;
}

.ds-review-user {
    color: var(--ds-ink);
    font-weight: 600;
}

.ds-review-question {
    margin-bottom: .6rem;
    color: var(--ds-ink-soft);
    font-size: .9rem;
}

.ds-review-question p:last-child {
    margin-bottom: 0;
}

.ds-review-answer {
    margin-bottom: .9rem;
    padding: .75rem 1rem;
    border-radius: var(--ds-r-sm);
    background-color: var(--ds-surface-2);
    color: var(--ds-ink);
    overflow-wrap: anywhere;
}

.ds-review-form {
    display: grid;
    grid-template-columns: 10rem minmax(0, 1fr) auto;
    align-items: end;
    gap: .75rem;
}

.ds-review-form .control-label {
    margin-bottom: .3rem;
}

@media (max-width: 767.98px) {
    .ds-review-form {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ============ COMPONENTES HEREDADOS EN MODO OSCURO ============ */
/* theme.css y las librerías fijan colores claros; aquí pasan a los tokens para que funcionen en los dos modos */

/* Administración: el área de contenido y el menú lateral dejan ver el fondo de la página (theme.css: blanco y #f2f2f2) */
.sidebar-enabled .content,
.sidebar {
    background-color: transparent;
}

/* Franja gris detrás del menú lateral: el menú ya tiene su fondo */
.sidebar-enabled::before {
    display: none;
}

/* Saludo del encabezado y menú lateral de administración */
.navbar-tool-label,
.navbar-tool-label small,
.sidebar .nav-link,
.offcanvas .nav-link,
.offcanvas-collapse .offcanvas-body .navbar-nav .nav-link {
    color: var(--ds-ink-soft);
}

.navbar-tool-label:hover,
.sidebar .nav-link:hover,
.offcanvas .nav-link:hover {
    color: var(--ds-ink);
}

/* Tablas de DataTables (datatables.min.css: encabezado y filas blancas, impares #f9f9f9) */
thead th,
tfoot th,
table.dataTable thead th,
table.dataTable tfoot th,
table.dataTable tbody tr.even td,
table.dataTable tbody tr.even th {
    background-color: transparent;
}

table.dataTable tbody tr.odd td,
table.dataTable tbody tr.odd th {
    background-color: var(--ds-surface-2);
}

table.dataTable td,
table.dataTable th {
    color: var(--ds-ink);
    border-color: var(--ds-line-soft) !important;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info {
    color: var(--ds-ink-soft);
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    background-color: var(--ds-surface);
    border: 1px solid var(--ds-line);
    color: var(--ds-ink);
}

/* Listas de Bootstrap (permisos) */
.list-group-item {
    background-color: var(--ds-surface);
    border-color: var(--ds-line-soft);
    color: var(--ds-ink);
}

/* Editor de texto (summernote-lite.min.css) */
.note-editor.note-frame {
    border-color: var(--ds-line);
    color: var(--ds-ink);
}

.note-editor .note-toolbar,
.note-editor .note-statusbar {
    background-color: var(--ds-surface-2);
    border-color: var(--ds-line);
}

.note-editor .note-editing-area,
.note-editor .note-editable {
    background-color: var(--ds-surface);
}

.note-btn {
    background-color: var(--ds-surface);
    border-color: var(--ds-line);
    color: var(--ds-ink-soft);
}

.note-btn:hover, .note-btn:focus, .note-btn.active, .note-btn:active {
    background-color: var(--ds-blue-soft);
    border-color: var(--ds-line);
    color: var(--ds-ink);
}

.note-dropdown-menu,
.note-popover .popover-content,
.note-popover,
.note-modal-content {
    background-color: var(--ds-surface);
    border-color: var(--ds-line);
    color: var(--ds-ink);
}

a.note-dropdown-item,
a.note-dropdown-item:hover,
.note-form-label,
.note-modal-title {
    color: var(--ds-ink);
}

.note-dropdown-item:hover {
    background-color: var(--ds-surface-2);
}

.note-input {
    background-color: var(--ds-surface-2);
    border-color: var(--ds-line);
    color: var(--ds-ink);
}

/*
    Ventanas de SweetAlert. SweetAlert2 inserta su CSS al cargar (después de esta hoja), por eso los selectores
    llevan "body .swal2-container" para ganarle también a sus reglas de dos clases (.swal2-popup.swal2-toast).
    El ícono de éxito toma solo el fondo de la ventana.
*/
body .swal2-container .swal2-popup {
    background: var(--ds-surface);
    color: var(--ds-ink-soft);
}

body .swal2-container .swal2-title {
    color: var(--ds-ink);
}

body .swal2-container .swal2-html-container,
body .swal2-container .swal2-footer {
    color: var(--ds-ink-soft);
}

body .swal2-container .swal2-footer {
    border-top-color: var(--ds-line);
}

body .swal2-container .swal2-input,
body .swal2-container .swal2-textarea,
body .swal2-container .swal2-select {
    background-color: var(--ds-surface-2);
    border-color: var(--ds-line);
    color: var(--ds-ink);
}

body .swal2-container .swal2-validation-message {
    background: var(--ds-surface-2);
    color: var(--ds-ink-soft);
}

body .swal2-container .swal2-checkbox,
body .swal2-container .swal2-radio,
body .swal2-container .swal2-range {
    background: transparent;
}

/* Íconos con los colores de la plantilla (SweetAlert usa naranja pálido, violeta y gris propios) */
body .swal2-container .swal2-icon.swal2-warning {
    border-color: var(--ds-warning);
    color: var(--ds-warning);
}

body .swal2-container .swal2-icon.swal2-question {
    border-color: var(--ds-blue);
    color: var(--ds-blue-text);
}

body .swal2-container .swal2-icon.swal2-info {
    border-color: var(--ds-blue);
    color: var(--ds-blue-text);
}

body .swal2-container .swal2-icon.swal2-error {
    border-color: var(--ds-danger);
    color: var(--ds-danger-text);
}

body .swal2-container .swal2-icon.swal2-error [class^="swal2-x-mark-line"] {
    background-color: var(--ds-danger);
}

body .swal2-container .swal2-icon.swal2-success {
    border-color: var(--ds-ok);
    color: var(--ds-ok-text);
}

body .swal2-container .swal2-icon.swal2-success .swal2-success-ring {
    border-color: color-mix(in srgb, var(--ds-ok) 30%, transparent);
}

body .swal2-container .swal2-icon.swal2-success [class^="swal2-success-line"] {
    background-color: var(--ds-ok);
}

/* Barra de tiempo y cargador (avisos con timer o mientras se procesa) */
body .swal2-container .swal2-timer-progress-bar {
    background: var(--ds-blue);
}

body .swal2-container .swal2-loader {
    border-color: var(--ds-blue) transparent var(--ds-blue) transparent;
}

/* Botones por defecto de SweetAlert (los avisos que no usan clases de Bootstrap): como .btn-primary y .btn-light */
body .swal2-container .swal2-styled {
    font-family: var(--ds-f-b);
    font-weight: 600;
    border-radius: var(--ds-r-sm);
}

body .swal2-container .swal2-styled.swal2-confirm {
    background-color: var(--ds-blue-fill);
    color: var(--ds-on-accent);
}

body .swal2-container .swal2-styled.swal2-cancel,
body .swal2-container .swal2-styled.swal2-deny {
    background-color: transparent;
    border: 1px solid var(--ds-line);
    color: var(--ds-ink-soft);
}

body .swal2-container .swal2-styled.swal2-cancel:hover,
body .swal2-container .swal2-styled.swal2-deny:hover {
    background-image: none;
    background-color: var(--ds-surface-2);
    color: var(--ds-ink);
}

body .swal2-container .swal2-styled:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-blue) 35%, transparent);
}

/* Botones de Bootstrap dentro de SweetAlert: foco visible con el color del tema en lugar del anillo gris */
body .swal2-container .swal2-actions .btn:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-blue) 35%, transparent);
}

/* Interruptor de tema en el inicio de sesión */
.ds-login-tema {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 10;
}

/* ============ MI EQUIPO (equipo.js) ============ */
.ds-equipo-intro {
    margin: .25rem 0 1rem;
    color: var(--ds-ink-soft);
}

.ds-equipo-tools {
    margin-bottom: 1rem;
}

.ds-equipo-tools .ds-search {
    flex: 1;
    max-width: 28rem;
    margin-left: 0;
}

.ds-equipo-colaborador {
    list-style: none;
    margin: 0;
    padding: .5rem 0;
    border-top: 1px solid var(--ds-line-soft);
}

/* Colaborador con algún examen bloqueado: franja y fondo suave de alerta */
.ds-equipo-colaborador.is-bloqueado {
    margin: 0 -.75rem;
    padding: .75rem;
    border-left: 3px solid var(--ds-danger);
    border-radius: var(--ds-r-sm);
    background-color: var(--ds-danger-soft);
}

.ds-equipo-colaborador.is-bloqueado + .ds-equipo-colaborador {
    border-top-color: transparent;
}

.ds-equipo-bloqueo {
    background-color: var(--ds-surface);
}

.ds-equipo-ok {
    font-size: .8rem;
    color: var(--ds-ink-faint);
}

/* Encabezado desplegable del colaborador con pendientes */
.ds-equipo-toggle {
    width: calc(100% + 1rem);
    margin: 0 -.5rem;
    padding: .35rem .5rem;
    border: 0;
    border-radius: var(--ds-r-sm);
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: background-color .15s;
}

/* Hover: fondo suave y el nombre en el color de acento, para que se note que se puede desplegar */
.ds-equipo-toggle:hover {
    background-color: var(--ds-surface-2);
}

.ds-equipo-toggle:hover strong,
.ds-equipo-toggle:hover .ds-equipo-chevron {
    color: var(--ds-blue-text);
}

.ds-equipo-toggle:focus-visible {
    outline: 2px solid var(--ds-blue);
    outline-offset: 2px;
    border-radius: var(--ds-r-sm);
}

.ds-equipo-chevron {
    font-size: .75rem;
    color: var(--ds-ink-faint);
    transition: transform .2s;
}

.ds-equipo-toggle[aria-expanded="true"] .ds-equipo-chevron {
    transform: rotate(90deg);
}

.ds-equipo-resumen {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-left: auto;
}

.ds-equipo-toggle + .ds-equipo-pendientes {
    margin-top: .5rem;
}

.ds-equipo-colaborador:first-child {
    border-top: 0;
}

.ds-equipo-persona {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem;
    color: var(--ds-ink);
}

.ds-equipo-pendientes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.ds-equipo-extender {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.ds-equipo-extender .ds-input-suffix {
    width: 7rem;
}

/* ============ RECORDATORIOS DEL CURSO (view_curso_recordatorios.php) ============ */
.ds-tag.is-ok {
    background-color: var(--ds-ok-soft);
    color: var(--ds-ok-text);
}

.ds-recordatorios + .ds-recordatorios-correo,
.ds-recordatorios-correo {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--ds-line);
}

.ds-recordatorios-cuerpo {
    margin-top: 1rem;
}

.ds-recordatorios-titulo {
    margin: 1rem 0 .5rem;
    font-family: var(--ds-f-m);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ds-ink-soft);
}

.ds-reglas {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .5rem;
}

.ds-regla {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .65rem;
    padding: .6rem .75rem;
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-r-sm);
    background: var(--ds-surface);
    color: var(--ds-ink);
    font-size: .9rem;
}

.ds-regla.is-inactiva {
    background: var(--ds-surface-2);
    color: var(--ds-ink-faint);
}

.ds-regla .form-select {
    width: auto;
    min-width: 9.5rem;
    font-family: var(--ds-f-m);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-radius: 100px;
    border-color: transparent;
}

.ds-regla[data-tipo="preventivo"] .form-select {
    background-color: var(--ds-blue-soft);
    color: var(--ds-blue-text);
}

.ds-regla[data-tipo="reincidente"] .form-select {
    background-color: var(--ds-orange-soft);
    color: var(--ds-orange-text);
}

.ds-regla .ds-regla-numero {
    width: 4rem;
    min-height: 0;
    padding: .25rem .4rem;
    text-align: center;
}

.ds-regla .ds-regla-acciones {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-left: auto;
}

.ds-regla .ds-regla-estado {
    font-family: var(--ds-f-m);
    font-size: .72rem;
    color: var(--ds-ok-text);
}

.ds-regla.is-inactiva .ds-regla-estado {
    color: var(--ds-ink-faint);
}

.ds-regla .ds-regla-quitar {
    border: 0;
    background: transparent;
    color: var(--ds-ink-faint);
    padding: .25rem .4rem;
    border-radius: var(--ds-r-sm);
}

.ds-regla .ds-regla-quitar:hover,
.ds-regla .ds-regla-quitar:focus-visible {
    color: var(--ds-danger-text);
    background: var(--ds-danger-soft);
}

.ds-reglas-pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-top: .65rem;
}

.ds-reglas-nota,
.ds-recordatorios-ultimo {
    font-family: var(--ds-f-m);
    font-size: .72rem;
    color: var(--ds-ink-soft);
}

.ds-recordatorios-canales {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.ds-recordatorios-estado {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: .75rem 0 0;
}

/* Detalle del curso: tarjeta de notificaciones (view_curso_info.php) */
.ds-tag.is-orange {
    background-color: var(--ds-orange-soft);
    color: var(--ds-orange-text);
}

.ds-tag.is-off {
    border-style: dashed;
    border-color: var(--ds-line);
    background-color: transparent;
    color: var(--ds-ink-faint);
}

/* La etiqueta es inline-flex: sin gap el ícono queda pegado al texto */
.ds-tag {
    gap: .35rem;
}

.ds-detail-card .ds-recordatorios-titulo:first-of-type {
    margin-top: 0;
}

.ds-detail-notif-fila {
    margin-top: .5rem;
}

p.ds-detail-notif-fila {
    margin-bottom: 0;
}

/* Plazo sugerido: fecha base de los recordatorios en cursos sin vigencia */
.ds-recordatorios-plazo[hidden] {
    display: none;
}

.ds-recordatorios-plazo-fila {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .65rem;
    color: var(--ds-ink);
    font-size: .9rem;
}

.ds-recordatorios-plazo-fila .ds-regla-numero {
    width: 4.5rem;
    min-height: 0;
    padding: .25rem .4rem;
    text-align: center;
}

/* Aviso al cambiar la vigencia de un curso: cómo quedan las fechas límite al guardar */
.ds-vigencia-cambio {
    margin: .4rem 0 0;
    padding: .45rem .7rem;
    border-left: 3px solid var(--ds-blue);
    border-radius: var(--ds-r-sm);
    background-color: var(--ds-blue-soft);
    color: var(--ds-blue-text);
    font-size: .8rem;
}

.ds-vigencia-cambio[hidden] {
    display: none;
}

/* Vista previa del certificado (view_modal_certificado.php / certificado-modal.js) */
.ds-cert-modal-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 0;
    background-color: var(--ds-line-soft);
}

.ds-cert-modal-pdf {
    width: 100%;
    height: 75vh;
    border: 0;
}

.ds-cert-modal-estado {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    max-width: 28rem;
    padding: 2rem 1rem;
    text-align: center;
    color: var(--ds-ink-soft);
}

.ds-cert-modal-estado[hidden],
.ds-cert-modal-pdf[hidden] {
    display: none;
}

.ds-cert-modal-estado.is-error i {
    font-size: 2rem;
    color: var(--ds-danger);
}

.ds-cert-modal-estado.is-error strong {
    color: var(--ds-ink);
}

/* Color del texto en el editor de certificado: selector y tonos rápidos */
.ds-cert-color {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.ds-cert-color-rapidos {
    display: flex;
    gap: .35rem;
}

.ds-cert-swatch {
    width: 1.4rem;
    height: 1.4rem;
    border: 1px solid var(--ds-line);
    border-radius: 50%;
    cursor: pointer;
}

.ds-cert-swatch[data-color="#1E1E1E"] { background-color: #1E1E1E; }
.ds-cert-swatch[data-color="#FFFFFF"] { background-color: #FFFFFF; }
.ds-cert-swatch[data-color="#3284C6"] { background-color: #3284C6; }
.ds-cert-swatch[data-color="#EB5B27"] { background-color: #EB5B27; }
.ds-cert-swatch[data-color="#C9A227"] { background-color: #C9A227; }

.ds-cert-swatch:hover,
.ds-cert-swatch:focus-visible {
    outline: 2px solid var(--ds-orange);
    outline-offset: 1px;
}

/* Vista previa del certificado en la ventana de editar curso: generando o aviso de error */
.ds-cert-vista-estado {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    min-height: 12rem;
    color: var(--ds-muted);
    text-align: center;
}

.ds-cert-vista-estado.is-error {
    color: var(--bs-danger);
}

/* Vista previa de la plantilla: ventana ancha (como modal-xl) y el PDF con la proporción del certificado */
@media (min-width: 992px) {
    #modal-vista-previa.is-certificado .modal-dialog {
        max-width: 1140px;
    }
}

#modal-vista-previa.is-certificado .modal-body {
    padding: 0;
    background-color: var(--ds-line-soft);
}

.ds-cert-vista-pdf {
    display: block;
    width: 100%;
    height: 75vh;
    border: 0;
}

/* Deshacer / rehacer del editor de certificado */
.ds-cert-historial {
    display: inline-flex;
    gap: .25rem;
}

.ds-cert-historial .btn:disabled {
    opacity: .4;
}