/*
 * Base visual compartida por las pantallas migradas al nuevo diseño.
 *
 * Todos los componentes usan el prefijo `ui-` y se limitan a `.design-shell`,
 * de modo que no alteran las vistas que aún usan `base.html`. Las hojas de cada
 * pantalla solo añaden composición (rejillas, columnas y puntos de corte).
 *
 *  1. Tokens               7. Navegación: migas, pestañas, barra de acciones
 *  2. Base                 8. Menús
 *  3. Página y cabeceras   9. Tablas de listado
 *  4. Botones             10. Avisos y estados vacíos
 *  5. Campos              11. Identidad, estado y resúmenes
 *  6. Selección           12. Editor: variantes de respuesta
 */

/* 1. Tokens ------------------------------------------------------------- */
.design-shell {
    --text: #292c29;
    --text-secondary: #585d58;
    --text-muted: #6d7069;
    --text-light: #797b75;
    --text-heading: #1e2c49;
    --text-heading-soft: #566887;
    --primary: #36558e;
    --primary-hover: #263f70;
    --primary-soft: #e8edf5;
    --primary-ring: #c9d3ea;
    --border: #dedfd9;
    --border-light: #ecece7;
    --border-strong: #c9cbc3;
    --surface: #f7f6f3;
    --surface-subtle: #faf9f7;
    --surface-hover: #fcfbf9;
    --surface-active: #eeeee8;
    --card-bg: #fff;
    --success: #2c8968;
    --success-soft: #e7f2ec;
    --success-text: #1e5c40;
    --warning: #a66b13;
    --warning-soft: #f8f0e1;
    --warning-text: #6f4a0e;
    --danger: #b34b3e;
    --danger-soft: #f9efec;
    --danger-text: #8e3428;
    --in-progress: #dfa32f;
    /* Destrezas: solo en su icono y su nombre, nunca como fondo. */
    --skill-wr: #2f4a86;
    --skill-rd: #2e7a56;
    --skill-lt: #5a4ba8;
    --skill-sp: #9a6514;
    /* Rondas de revisión: texto en tono ámbar, más oscuro en la 3ª. */
    --round: #98601a;
    --round-strong: #74420b;
    --progress-complete: var(--success);
    --progress-incomplete: var(--primary);
    --ui-radius: 8px;
    --ui-field-radius: 6px;
    --ui-control-height: 36px;
    --ui-control-height-sm: 30px;
    --ui-page-max: 1440px;
    --ui-font-heading: Georgia, 'Times New Roman', serif;
    --ui-font-mono: ui-monospace, 'SFMono-Regular', Consolas, monospace;
    --ui-focus-ring: 0 0 0 3px rgba(54, 85, 142, .18);
    --ui-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236d7069' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6' d='m4 6 4 4 4-4'/%3e%3c/svg%3e");
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    background: var(--surface);
    color: var(--text);
}

/* 2. Base --------------------------------------------------------------- */
.design-shell a {
    color: var(--primary);
    text-decoration: none;
}

.design-shell a:hover {
    color: var(--primary-hover);
}

/*
 * Foco. Los campos y controles con borde muestran el borde azul y un halo suave
 * pegado a su contorno (`--ui-focus-ring`), sin invadir lo que tienen al lado.
 * Los elementos dentro de un grupo usan un contorno interior. El resto de
 * enlaces y botones, un contorno fino. El contorno transparente mantiene el foco
 * visible en el modo de alto contraste del sistema.
 */
.design-shell :is(a, button, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.design-shell [x-cloak] {
    display: none !important;
}

.design-shell .ui-link--danger {
    color: var(--danger);
}

.design-shell .ui-link--danger:hover {
    color: var(--danger-text);
}

.design-shell .ui-number {
    font-variant-numeric: tabular-nums;
}

.design-shell .ui-muted {
    color: var(--text-muted);
    font-size: 0.78rem;
}

.design-shell .ui-divider {
    height: 1px;
    margin-block: 18px;
    background: var(--border-light);
}

.design-shell .ui-scroll-region {
    position: relative;
    min-width: 0;
    max-width: 100%;
    overflow: auto;
    overscroll-behavior-x: contain;
}

.design-shell .ui-surface {
    min-width: 0;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--ui-radius);
    box-shadow: none;
}

/* Color de cada destreza (Writing, Reading, Listening y Speaking en todas sus
   variantes) para su icono y su nombre: <i class="bi … ui-skill--rd">. */
.design-shell .ui-skill--wr { color: var(--skill-wr); }
.design-shell .ui-skill--rd { color: var(--skill-rd); }
.design-shell .ui-skill--lt { color: var(--skill-lt); }
.design-shell .ui-skill--sp { color: var(--skill-sp); }

/* Gravedad de un aviso: el color va en el punto (y, si se quiere, en el texto).
   <span class="ui-severity ui-severity--warning"><span class="ui-severity-dot"></span>…</span> */
.design-shell .ui-severity--incident { --severity: var(--danger); --severity-soft: var(--danger-soft); --severity-text: var(--danger-text); }
.design-shell .ui-severity--warning { --severity: var(--warning); --severity-soft: var(--warning-soft); --severity-text: var(--warning-text); }
.design-shell .ui-severity--info { --severity: var(--primary); }
.design-shell .ui-severity--reminder { --severity: var(--text-light); }
.design-shell .ui-severity--success { --severity: var(--success); }

.design-shell .ui-severity {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.design-shell .ui-severity-dot {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--severity, var(--text-light));
}

/* Ronda de una corrección, como texto bajo la prueba o delante de una nota: la 1ª
   va neutra y las revisiones en ámbar (la 3ª, más marcada).
   <span class="ui-round ui-round--2">2ª revisión</span> */
.design-shell .ui-round {
    color: var(--text-muted);
    font-size: .76rem;
    font-weight: 500;
    white-space: nowrap;
}

.design-shell .ui-round--2 {
    color: var(--round);
}

.design-shell .ui-round--3 {
    color: var(--round-strong);
    font-weight: 600;
}

/* 3. Página y cabeceras ------------------------------------------------- */

/* Contenedor de una pantalla: columna con separación uniforme entre bloques. */
.design-shell .ui-page {
    display: flex;
    flex-direction: column;
    gap: 22px;
    width: 100%;
    max-width: var(--ui-page-max);
    margin-inline: auto;
    padding-bottom: 32px;
}

.design-shell .ui-page-heading {
    padding: 26px 28px;
    background: var(--primary-soft);
    border-radius: 12px;
}

.design-shell .ui-page-heading h1 {
    margin: 0;
    color: var(--text-heading);
    font-family: var(--ui-font-heading);
    font-size: clamp(2rem, 3vw, 2.6rem);
    font-weight: 400;
    letter-spacing: -0.055em;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

/* Formularios y páginas de cuenta: el marco es el mismo, pero los bloques se
   limitan a un ancho cómodo de lectura y quedan alineados a la izquierda. */
.design-shell .ui-page--narrow > * {
    width: 100%;
    max-width: 820px;
}

/* Formularios de una sola columna (contraseña): más estrechos todavía. */
.design-shell .ui-page--slim > * {
    max-width: 600px;
}

/* Contenido principal con columna lateral (detalle, alta). La columna lateral
   pasa debajo cuando el área de contenido no deja espacio para ambas. */
.design-shell .ui-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--ui-aside-width, 280px);
    align-items: start;
    gap: 28px;
}

.design-shell .ui-split > * {
    min-width: 0;
}

.design-shell .ui-stack {
    display: flex;
    flex-direction: column;
    gap: 22px;
    min-width: 0;
}

@media (max-width: 1199px) {
    .design-shell .ui-split {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Cabecera con avatar: perfil y alta de usuario. */
.design-shell .ui-page-heading--identity {
    display: flex;
    align-items: center;
    gap: 18px;
}

.design-shell .ui-page-heading--identity > div {
    min-width: 0;
}

/* Título con acción principal a la derecha. */
.design-shell .ui-page-heading-main {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px 20px;
}

.design-shell .ui-page-heading-main > div {
    min-width: 0;
}

/* Varias acciones a la derecha del título. */
.design-shell .ui-page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.design-shell .ui-button .bi-chevron-down {
    margin-left: -2px;
    color: var(--text-muted);
    font-size: .7rem;
}

/* Cabecera con pestañas apoyadas en su borde inferior. */
.design-shell .ui-page-heading--tabs {
    padding-bottom: 0;
}

.design-shell .ui-page-heading--tabs .ui-tabs {
    margin-top: 22px;
}

.design-shell .ui-eyebrow,
.design-shell .ui-page-subtitle {
    color: var(--text-heading-soft);
    font-size: 0.78rem;
}

.design-shell .ui-eyebrow {
    margin: 0 0 6px;
}

.design-shell .ui-page-subtitle {
    margin: 6px 0 0;
    overflow-wrap: anywhere;
}

/* Contexto de la pantalla bajo el título: un selector (la convocatoria) y sus datos.
   <div class="ui-page-context"><select class="ui-input">…</select><span class="ui-page-subtitle">…</span></div> */
.design-shell .ui-page-context {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin: 12px 0 0;
}

.design-shell .ui-page-context select.ui-input {
    width: auto;
    min-width: 220px;
    max-width: 100%;
    font-weight: 500;
}

.design-shell .ui-page-context .ui-page-subtitle {
    margin: 0;
}

.design-shell .ui-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
}

.design-shell .ui-section-heading :is(h2, h3) {
    margin: 0;
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 600;
}

.design-shell .ui-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

@media (max-width: 575px) {
    .design-shell .ui-page-heading {
        padding: 22px 20px;
    }

    .design-shell .ui-page-heading--tabs {
        padding-bottom: 0;
    }
}

/* Marca: logo azul y nombre en Georgia (panel lateral y acceso). */
.design-shell .ui-brand {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    color: var(--text);
    font-family: var(--ui-font-heading);
    font-size: 1.2rem;
    font-weight: 400;
    letter-spacing: -.035em;
    text-decoration: none;
}

.design-shell .ui-brand-logo {
    display: block;
    flex-shrink: 0;
    width: 17px;
    height: 28px;
    background: var(--primary);
    -webkit-mask: url('../imgs/sci-brand.png') center / contain no-repeat;
    mask: url('../imgs/sci-brand.png') center / contain no-repeat;
}

/* 4. Botones ------------------------------------------------------------ */
.design-shell .ui-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    gap: 7px;
    min-height: 34px;
    padding: 7px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--ui-field-radius);
    background: var(--card-bg);
    color: var(--text);
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
    box-shadow: none;
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
}

.design-shell .ui-button:hover {
    background: #efeee9;
    color: var(--text);
    border-color: var(--border-strong);
    transform: none;
    box-shadow: none;
}

.design-shell :is(.ui-button, .ui-choice):focus-visible {
    border-color: var(--primary);
    outline: 2px solid transparent;
    outline-offset: 0;
    box-shadow: var(--ui-focus-ring);
}

.design-shell .ui-button--link:focus-visible {
    border-color: transparent;
}

.design-shell .ui-button:disabled {
    opacity: .5;
    cursor: default;
}

.design-shell .ui-button:disabled:hover {
    background: var(--card-bg);
}

/* Tamaño compacto para filas de tablas y barras densas. */
.design-shell .ui-button--sm {
    min-height: var(--ui-control-height-sm);
    padding-block: 4px;
    padding-inline: 11px;
}

.design-shell .ui-button--primary {
    border-color: var(--primary);
    background: var(--primary);
    color: white;
}

.design-shell .ui-button--primary:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    color: white;
}

.design-shell .ui-button--primary:disabled:hover {
    background: var(--primary);
    border-color: var(--primary);
}

.design-shell .ui-button--add {
    background: transparent;
    border-style: dashed;
    color: var(--text-secondary);
}

.design-shell .ui-button--add:hover {
    background: white;
    border-color: var(--primary);
    color: var(--primary);
}

.design-shell .ui-button--link {
    padding-inline: 0;
    border-color: transparent;
    background: transparent;
    color: var(--primary);
}

.design-shell .ui-button--link:hover {
    border-color: transparent;
    background: transparent;
    color: var(--primary-hover);
}

/* Acción que cierra o retira algo (por ejemplo, cerrar sesión). */
.design-shell .ui-button--danger {
    color: var(--danger);
}

.design-shell .ui-button--danger:hover {
    border-color: #e2c3bc;
    background: var(--danger-soft);
    color: var(--danger-text);
}

/* Confirmación de una acción destructiva: «primary» y «danger» a la vez. */
.design-shell .ui-button--primary.ui-button--danger,
.design-shell .ui-button--primary.ui-button--danger:disabled:hover {
    border-color: var(--danger);
    background: var(--danger);
    color: white;
}

.design-shell .ui-button--primary.ui-button--danger:hover {
    border-color: var(--danger-text);
    background: var(--danger-text);
    color: white;
}

/* Enlace de peligro con forma de botón (sin fondo ni borde). */
.design-shell .ui-button--link.ui-button--danger:hover {
    border-color: transparent;
    background: transparent;
    color: var(--danger-text);
}

/* Botón cuadrado que abre un menú («···») o alterna un orden. */
.design-shell .ui-menu-toggle {
    width: 34px;
    padding-inline: 0;
}

.design-shell .ui-menu-toggle.ui-button--sm {
    width: var(--ui-control-height-sm);
}

.design-shell .ui-menu-toggle[aria-expanded="true"] {
    border-color: var(--primary);
    color: var(--primary);
}

.design-shell .ui-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--text-muted);
    box-shadow: none;
    cursor: pointer;
}

.design-shell .ui-icon-button:hover {
    background: #efeee9;
    color: var(--primary);
    transform: none;
}

.design-shell .ui-icon-button--danger:hover {
    background: var(--danger-soft);
    color: var(--danger);
}

/* 5. Campos ------------------------------------------------------------- */
.design-shell .ui-field {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 6px;
}

.design-shell .ui-label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 400;
}

/* Campo que no necesita todo el ancho (contraseña actual, códigos). */
.design-shell .ui-field--short {
    width: 100%;
    max-width: 320px;
}

.design-shell legend.ui-label {
    margin-bottom: 8px;
}

.design-shell .ui-input {
    width: 100%;
    min-width: 0;
    min-height: var(--ui-control-height);
    padding: 7px 10px;
    border: 1px solid var(--border-strong);
    border-radius: var(--ui-field-radius);
    background-color: white;
    color: var(--text);
    font-family: inherit;
    font-size: 0.84rem;
    font-weight: 400;
    line-height: 1.4;
    box-shadow: none;
}

/* Desplegables: se retira el control nativo para que tengan la misma altura,
   tipografía y flecha en todos los navegadores, con o sin `.form-select`. */
.design-shell select.ui-input {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 32px;
    background-image: var(--ui-chevron);
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px 14px;
    cursor: pointer;
}

.design-shell select.ui-input:is([multiple], [size]:not([size="1"])) {
    padding-right: 10px;
    background-image: none;
    cursor: default;
}

.design-shell select.ui-input:hover:not(:disabled) {
    border-color: #b6b9b0;
}

.design-shell .ui-input:focus {
    border-color: var(--primary);
    outline: 2px solid transparent;
    outline-offset: 0;
    box-shadow: var(--ui-focus-ring);
}

.design-shell .ui-input:disabled {
    background-color: var(--surface);
    color: var(--text-muted);
    cursor: default;
}

.design-shell .ui-input::placeholder {
    color: var(--text-light);
}

/* Búsqueda con icono: <div class="ui-search"><i class="bi bi-search"></i><input class="ui-input"></div> */
.design-shell .ui-search {
    position: relative;
    min-width: 0;
}

.design-shell .ui-search > i {
    position: absolute;
    top: 50%;
    left: 11px;
    color: var(--text-muted);
    font-size: .8rem;
    line-height: 1;
    transform: translateY(-50%);
    pointer-events: none;
}

.design-shell .ui-search .ui-input {
    padding-left: 32px;
}

.design-shell .ui-input-prefix {
    display: flex;
    align-items: center;
    border: 1px solid var(--border-strong);
    border-radius: var(--ui-field-radius);
    background: white;
}

.design-shell .ui-input-prefix > span {
    padding-left: 10px;
    color: var(--text-muted);
}

.design-shell .ui-input-prefix .ui-input {
    border: 0;
    font-family: var(--ui-font-mono);
}

.design-shell .ui-input-prefix:focus-within {
    border-color: var(--primary);
    outline: 2px solid transparent;
    box-shadow: var(--ui-focus-ring);
}

.design-shell .ui-input-prefix .ui-input:focus {
    outline: none;
    box-shadow: none;
}

.design-shell .ui-help {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.73rem;
    line-height: 1.5;
}

.design-shell .ui-field-error {
    margin: 4px 0 0;
    color: var(--danger);
    font-size: .78rem;
}

.design-shell .ui-error-summary {
    padding: 14px 18px;
    border: 1px solid var(--danger);
    border-radius: var(--ui-radius);
    background: white;
    font-size: .84rem;
}

.design-shell .ui-error-summary ul {
    margin: 8px 0 0;
    padding-left: 20px;
}

/* Etiqueta con un enlace o acción a la derecha («¿Olvidaste tu contraseña?»). */
.design-shell .ui-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 12px;
    min-height: 20px;
}

.design-shell .ui-label-row a,
.design-shell .ui-label-row .ui-button--link {
    min-height: 0;
    padding: 0;
    font-size: .76rem;
}

/* Enlace auxiliar bajo un campo («¿Olvidaste tu contraseña?»). */
.design-shell .ui-field-link {
    align-self: flex-end;
    font-size: .76rem;
}

/* Contraseña con botón «Mostrar» dentro del campo. */
.design-shell .ui-password {
    position: relative;
}

.design-shell .ui-password .ui-input {
    padding-right: 76px;
}

.design-shell .ui-password-toggle {
    position: absolute;
    top: 50%;
    right: 5px;
    min-height: 26px;
    padding: 0 8px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--text-muted);
    font-size: .76rem;
    transform: translateY(-50%);
    cursor: pointer;
}

.design-shell .ui-password-toggle:hover {
    background: var(--surface-active);
    color: var(--primary);
}

.design-shell .ui-password-toggle:focus-visible {
    outline-offset: -2px;
}

/* Nueva contraseña con sus requisitos y la confirmación, en una columna. */
.design-shell .ui-new-password {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Requisitos bajo la nueva contraseña: círculo vacío hasta que se cumplen (verde). */
.design-shell .ui-password-rules {
    gap: 3px;
    margin-top: 2px;
    font-size: .76rem;
}

.design-shell .ui-password-rules li {
    align-items: center;
    color: var(--text-muted);
}

.design-shell .ui-checklist.ui-password-rules li > i {
    margin-top: 0;
    color: var(--border-strong);
    font-size: .72rem;
}

.design-shell .ui-password-rules li.is-met {
    color: var(--text-secondary);
}

.design-shell .ui-checklist.ui-password-rules li.is-met > i {
    color: var(--success);
}

/* Valor que no se edita en el formulario (usuario, idiomas asignados). */
.design-shell .ui-readonly {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px 10px;
    min-height: var(--ui-control-height);
    margin: 0;
    padding-top: 7px;
    color: var(--text);
    font-size: .84rem;
    overflow-wrap: anywhere;
}

.design-shell .ui-readonly .ui-muted {
    font-size: .74rem;
}

.design-shell .ui-mono {
    font-family: var(--ui-font-mono);
}

/* Formularios en tarjeta: cuerpo, filas de varios campos y pie de acciones. */
.design-shell .ui-form-body {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 20px;
}

/* Separa grupos dentro de un formulario (la contraseña actual de la nueva). */
.design-shell .ui-form-divider {
    margin: 2px 0;
    border: 0;
    border-top: 1px solid var(--border-light);
    opacity: 1;
}

.design-shell .ui-form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: 16px;
}

.design-shell .ui-form-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px 12px;
    padding: 14px 20px;
    border-top: 1px solid var(--border-light);
}

/* Filas de ajustes: descripción a la izquierda y acción a la derecha. */
.design-shell .ui-setting {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 20px;
    padding: 16px 20px;
}

.design-shell .ui-setting + .ui-setting {
    border-top: 1px solid var(--border-light);
}

.design-shell .ui-setting > div {
    min-width: 0;
    flex: 1 1 260px;
}

.design-shell .ui-setting h3 {
    margin: 0 0 3px;
    color: var(--text);
    font-size: .84rem;
    font-weight: 500;
}

.design-shell .ui-setting p {
    margin: 0;
    color: var(--text-muted);
    font-size: .78rem;
    overflow-wrap: anywhere;
}

/* Barra de filtros sobre un listado: controles algo más bajos que en formularios. */
.design-shell .ui-filter-bar {
    --ui-control-height: 34px;
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px;
}

.design-shell .ui-filter-bar :is(input, select).ui-input {
    height: var(--ui-control-height);
    padding-block: 0;
}

/* Segmentado a la izquierda y el resto de filtros agrupados a la derecha. */
.design-shell .ui-filter-bar--split {
    align-items: center;
    justify-content: space-between;
}

.design-shell .ui-filter-bar-end {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.design-shell .ui-filter-bar-end select.ui-input {
    width: auto;
}

.design-shell .ui-filter-bar-end .ui-search {
    width: 250px;
    max-width: 100%;
}

/* 6. Selección ---------------------------------------------------------- */
.design-shell .ui-checkbox {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    accent-color: var(--primary);
    cursor: pointer;
}

/* Casillas con descripción para formularios extensos. */
.design-shell .ui-selections {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.design-shell .ui-selection {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border: 1px solid var(--border-strong);
    border-radius: var(--ui-field-radius);
    background: white;
    color: var(--text);
    font-size: .82rem;
    cursor: pointer;
}

.design-shell .ui-selection:has(input:checked) {
    border-color: var(--primary);
    background: var(--primary-soft);
}

/* Fichas compactas de selección múltiple sobre casillas nativas:
   <label class="ui-chip"><input type="checkbox"><i class="bi bi-check2 ui-chip-check"></i>Texto</label> */
.design-shell .ui-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.design-shell .ui-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: var(--ui-control-height-sm);
    margin: 0;
    padding: 4px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--ui-field-radius);
    background: var(--card-bg);
    color: var(--text-secondary);
    font-size: .8rem;
    line-height: 1.4;
    cursor: pointer;
    user-select: none;
    transition: background-color .15s, border-color .15s, color .15s;
}

.design-shell .ui-chip > input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.design-shell .ui-chip-check {
    display: none;
    margin-left: -3px;
    font-size: .95rem;
    line-height: 1;
}

.design-shell .ui-chip:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.design-shell .ui-chip:has(> input:checked) {
    border-color: var(--primary);
    background: var(--primary-soft);
    color: var(--text-heading);
}

.design-shell .ui-chip:has(> input:checked) .ui-chip-check {
    display: inline;
}

.design-shell .ui-chip:has(> input:focus-visible) {
    border-color: var(--primary);
    outline: 2px solid transparent;
    box-shadow: var(--ui-focus-ring);
}

.design-shell .ui-chip:has(> input:disabled) {
    opacity: .5;
    cursor: default;
}

/* Elección única con botones (`aria-pressed`). */
.design-shell .ui-choice-group {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.design-shell .ui-choice {
    min-width: 32px;
    min-height: 30px;
    max-width: 100%;
    padding: 3px 9px;
    border: 1px solid var(--border-strong);
    border-radius: var(--ui-field-radius);
    background: var(--card-bg);
    color: var(--text-secondary);
    font-family: var(--ui-font-mono);
    font-size: .8rem;
    overflow-wrap: anywhere;
    cursor: pointer;
}

.design-shell .ui-choice:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.design-shell .ui-choice[aria-pressed="true"] {
    border-color: var(--primary);
    background: var(--primary);
    color: white;
}

/* Control segmentado para filtros de pocas opciones. */
.design-shell .ui-segmented {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--border-strong);
    border-radius: var(--ui-field-radius);
    background: var(--surface-subtle);
}

.design-shell .ui-segmented :is(button, label) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    cursor: pointer;
    min-height: calc(var(--ui-control-height) - 6px);
    padding: 4px 10px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--text-secondary);
    font-size: .78rem;
}

.design-shell .ui-segmented :is(button, label):hover {
    color: var(--text);
}

.design-shell .ui-segmented button:focus-visible {
    outline-offset: -2px;
}

/* La opción elegida, en el color principal: se distingue a la primera. */
.design-shell .ui-segmented :is(button[aria-pressed="true"], label:has(input:checked)) {
    background: var(--primary-soft);
    color: var(--primary);
    font-weight: 600;
    box-shadow: inset 0 0 0 1px var(--primary-ring);
}

.design-shell .ui-segmented :is(button[aria-pressed="true"], label:has(input:checked)) .ui-tab-count {
    color: var(--primary);
}

/* Con radios nativos (campo de formulario): <label><input type="radio" class="ui-radio-hidden">B1</label>. */
.design-shell .ui-segmented label:has(input:focus-visible) {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

.design-shell .ui-radio-hidden {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Opciones de un campo como botones sobre radios nativos (idioma). */
.design-shell .ui-radio-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.design-shell .ui-radio-pills label {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: var(--ui-control-height);
    margin: 0;
    padding: 0 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--ui-field-radius);
    background: var(--card-bg);
    color: var(--text-secondary);
    font-size: .82rem;
    cursor: pointer;
}

.design-shell .ui-radio-pills label:hover {
    border-color: var(--primary);
    color: var(--text);
}

.design-shell .ui-radio-pills label:has(input:checked) {
    border-color: var(--primary);
    background: var(--primary-soft);
    color: var(--text-heading);
    font-weight: 500;
}

.design-shell .ui-radio-pills label:has(input:focus-visible) {
    border-color: var(--primary);
    box-shadow: var(--ui-focus-ring);
}

/* Zona para soltar o elegir un fichero; el <input type="file"> va dentro, oculto. */
.design-shell .ui-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
    margin: 0;
    padding: 26px 20px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--ui-radius);
    background: var(--surface-subtle);
    color: var(--text-secondary);
    font-size: .84rem;
    text-align: center;
    cursor: pointer;
}

.design-shell .ui-dropzone:hover,
.design-shell .ui-dropzone.is-over {
    border-color: var(--primary);
    background: var(--primary-soft);
}

.design-shell .ui-dropzone:has(input:focus-visible) {
    border-color: var(--primary);
    box-shadow: var(--ui-focus-ring);
}

.design-shell .ui-dropzone strong {
    color: var(--primary);
    font-weight: 500;
}

.design-shell .ui-dropzone small {
    color: var(--text-muted);
    font-size: .76rem;
}

.design-shell .ui-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-secondary);
    font: inherit;
    font-size: .78rem;
    cursor: pointer;
}

.design-shell .ui-switch-track {
    position: relative;
    flex: 0 0 28px;
    height: 16px;
    border-radius: 8px;
    background: var(--border-strong);
}

.design-shell .ui-switch-track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: white;
}

.design-shell .ui-switch[aria-checked="true"] .ui-switch-track {
    background: var(--primary);
}

.design-shell .ui-switch[aria-checked="true"] .ui-switch-track::after {
    left: 14px;
}

.design-shell .ui-switch:focus-visible {
    outline: 2px solid transparent;
}

.design-shell .ui-switch:focus-visible .ui-switch-track {
    box-shadow: 0 0 0 2px var(--card-bg), 0 0 0 4px var(--primary);
}

.design-shell .ui-switch:disabled {
    opacity: .5;
    cursor: default;
}

/* Interruptor junto a la etiqueta de su campo (p. ej. «Convertir a otra escala»):
   no altera la altura de la fila, para que los campos vecinos sigan alineados. */
.design-shell .ui-label-row .ui-switch {
    font-size: .76rem;
}

/* Valor calculado que se muestra en lugar de un campo (puntuación total). Ocupa
   la misma altura que un campo para que las columnas queden alineadas. */
.design-shell .ui-value {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-height: var(--ui-control-height);
    margin: 0;
    padding-top: 2px;
    color: var(--text);
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
}

/* Número con botones − y + (notas por criterio). Los botones quedan fuera del
   orden de tabulación: con el teclado se escribe o se usan las flechas. */
.design-shell .ui-stepper {
    display: inline-flex;
    align-items: stretch;
}

.design-shell .ui-stepper > button {
    width: 32px;
    min-height: var(--ui-control-height);
    padding: 0;
    border: 1px solid var(--border-strong);
    background: var(--card-bg);
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.design-shell .ui-stepper > button:first-child {
    border-radius: var(--ui-field-radius) 0 0 var(--ui-field-radius);
}

.design-shell .ui-stepper > button:last-child {
    border-radius: 0 var(--ui-field-radius) var(--ui-field-radius) 0;
}

.design-shell .ui-stepper > button:hover:not(:disabled) {
    background: #f4f6fb;
    color: var(--primary);
}

.design-shell .ui-stepper > button:disabled {
    color: var(--text-light);
    cursor: default;
}

.design-shell .ui-stepper-input {
    width: 64px;
    min-height: var(--ui-control-height);
    padding: 0 4px;
    border: 1px solid var(--border-strong);
    border-inline: 0;
    border-radius: 0;
    background: var(--card-bg);
    color: var(--text);
    font: inherit;
    font-size: .95rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    text-align: center;
    -moz-appearance: textfield;
}

.design-shell .ui-stepper-input::-webkit-inner-spin-button,
.design-shell .ui-stepper-input::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.design-shell .ui-stepper-input::placeholder {
    color: var(--text-light);
}

.design-shell .ui-stepper-input:focus {
    position: relative;
    border-color: var(--primary);
    border-inline: 1px solid var(--primary);
    outline: 2px solid transparent;
    box-shadow: var(--ui-focus-ring);
}

.design-shell .ui-stepper-input:disabled {
    background: var(--surface-subtle);
    color: var(--text);
}

/* Campo numérico corto con su unidad al lado. */
.design-shell .ui-unit-input {
    display: flex;
    align-items: center;
    gap: 8px;
}

.design-shell .ui-unit-input .ui-input {
    max-width: 140px;
}

/* 7. Navegación --------------------------------------------------------- */
.design-shell .ui-breadcrumb {
    display: flex;
    min-width: 0;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--text-muted);
    font-size: .8rem;
}

.design-shell .ui-breadcrumb [aria-current] {
    color: var(--text);
    overflow-wrap: anywhere;
}

.design-shell .ui-breadcrumb a {
    color: var(--text-secondary);
}

.design-shell .ui-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px;
}

.design-shell .ui-tab {
    padding: 0 0 12px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--text-heading-soft);
    font-size: .82rem;
    cursor: pointer;
}

.design-shell .ui-tab[aria-pressed="true"],
.design-shell .ui-tab[aria-current="page"] {
    border-color: var(--primary);
    color: var(--text-heading);
    font-weight: 600;
}

/* Pestañas que enlazan pantallas de un mismo objeto (las de una convocatoria). */
.design-shell a.ui-tab {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.design-shell .ui-tab:hover {
    color: var(--primary);
}

.design-shell .ui-tab-count {
    margin-left: 5px;
    color: #6b7697;
    font-size: .74rem;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}

.design-shell .ui-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
}

/* Pie de un listado: recuento a la izquierda y paginación a la derecha. */
.design-shell .ui-table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 16px;
    border-top: 1px solid var(--border-light);
}

/* Barra de acciones para editores y formularios largos. */
.design-shell .ui-toolbar {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 1010;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding-block: 12px;
    margin-bottom: 28px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

/* 8. Menús -------------------------------------------------------------- */
.design-shell .ui-menu {
    min-width: 180px;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: var(--ui-radius);
    background: var(--card-bg);
    box-shadow: 0 6px 20px rgba(41, 44, 41, .1);
}

.design-shell .ui-menu form {
    margin: 0;
}

.design-shell .ui-menu-item {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--text);
    font-size: .82rem;
    text-align: left;
}

.design-shell .ui-menu-item:hover,
.design-shell .ui-menu-item:focus {
    background: var(--surface-subtle);
    color: var(--primary);
}

.design-shell .ui-menu-item:focus-visible {
    outline-offset: -2px;
}

.design-shell .ui-menu-item:disabled {
    color: var(--text-light);
    background: transparent;
    cursor: default;
}

.design-shell .ui-menu-item--danger {
    color: var(--danger);
}

.design-shell .ui-menu-item--danger:hover,
.design-shell .ui-menu-item--danger:focus {
    background: var(--danger-soft);
    color: var(--danger);
}

/* Separador entre grupos de opciones. */
.design-shell .ui-menu :is(.ui-menu-divider, .dropdown-divider) {
    height: 0;
    margin: 4px 6px;
    border: 0;
    border-top: 1px solid var(--border-light);
    opacity: 1;
}

.design-shell .ui-menu-item > i {
    flex-shrink: 0;
    width: 16px;
    font-size: .9rem;
    text-align: center;
}

.design-shell .ui-menu-item:not(.ui-menu-item--danger) > i {
    color: var(--text-muted);
}

.design-shell .ui-menu-item:not(.ui-menu-item--danger):is(:hover, :focus) > i {
    color: inherit;
}

/* Explicación breve bajo una opción no disponible. */
.design-shell .ui-menu-note {
    max-width: 240px;
    margin: 0;
    padding: 0 10px 8px 32px;
    color: var(--text-muted);
    font-size: .73rem;
    line-height: 1.45;
}

/* 9. Tablas de listado --------------------------------------------------
 * Cada pantalla define sus columnas con `--ui-table-columns` y decide, con
 * consultas de contenedor sobre `.ui-table`, cuándo apilar las filas: así el
 * cambio depende del ancho real del listado y no de la ventana o del panel
 * lateral. En modo apilado se oculta `.ui-table-head` y se muestran las
 * etiquetas `.ui-table-label` de cada celda.
 */
.design-shell .ui-table {
    container: ui-table / inline-size;
}

.design-shell .ui-table-head,
.design-shell .ui-table-row {
    display: grid;
    grid-template-columns: var(--ui-table-columns, minmax(0, 1fr));
    gap: 16px;
    align-items: center;
    padding: 12px 16px;
}

.design-shell .ui-table-head {
    padding-block: 10px;
    background: var(--surface-subtle);
    color: var(--text-muted);
    font-size: .73rem;
}

.design-shell .ui-table > .ui-table-head:first-child {
    border-radius: calc(var(--ui-radius) - 1px) calc(var(--ui-radius) - 1px) 0 0;
}

.design-shell .ui-table-head-end {
    justify-self: end;
}

.design-shell .ui-table-body {
    margin: 0;
    padding: 0;
    list-style: none;
}

.design-shell .ui-table-item {
    border-top: 1px solid var(--border-light);
}

.design-shell .ui-table-row {
    color: var(--text-secondary);
    font-size: .8rem;
}

.design-shell .ui-table-row > * {
    min-width: 0;
}

.design-shell .ui-table-item:hover {
    background: var(--surface-hover);
}

/* Barra de una nota sobre su máximo: verde si aprueba y roja si no, con una marca en
   el aprobado (la mitad) y, opcionalmente, otra en ámbar en la nota anterior; junto al
   texto de esa nota, `ui-grade-bar-key` repite la rayita como leyenda.
   <span class="ui-grade-bar is-pass" style="--nota: 62.5%; --antes: 80%"><span class="ui-grade-bar-fill"></span>
   <span class="ui-grade-bar-before"></span></span> (role="img" y aria-label si no hay texto al lado). */
.design-shell .ui-grade-bar {
    position: relative;
    display: block;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: var(--border-light);
}

.design-shell .ui-grade-bar::after {
    content: "";
    position: absolute;
    top: -3px;
    bottom: -3px;
    left: 50%;
    width: 1px;
    background: var(--border-strong);
}

.design-shell .ui-grade-bar-fill {
    display: block;
    width: var(--nota, 0%);
    min-width: 6px;
    height: 100%;
    border-radius: inherit;
    background: var(--success);
}

.design-shell .ui-grade-bar.is-fail .ui-grade-bar-fill {
    background: var(--danger);
}

.design-shell .ui-grade-bar-before {
    position: absolute;
    top: -4px;
    bottom: -4px;
    left: var(--antes);
    width: 3px;
    margin-left: -1.5px;
    border-radius: 1px;
    background: var(--round);
}

.design-shell .ui-grade-bar-key {
    display: inline-block;
    width: 3px;
    height: 10px;
    margin-right: 5px;
    border-radius: 1px;
    background: var(--round);
    vertical-align: -1px;
}

.design-shell .ui-table-label {
    display: none;
    color: var(--text-muted);
    font-size: .72rem;
}

.design-shell .ui-table-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 6px;
}

.design-shell .ui-table-actions form {
    display: block;
    margin: 0;
}

/* Encabezado que ordena la columna; el icono solo aparece en la columna activa. */
.design-shell .ui-sort {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.design-shell .ui-sort:hover,
.design-shell .ui-sort:not([data-sort="none"]) {
    color: var(--text);
}

.design-shell .ui-sort-icon {
    font-size: .8rem;
    line-height: 1;
    opacity: 0;
    transition: opacity .15s, transform .15s;
}

.design-shell .ui-sort:hover .ui-sort-icon {
    opacity: .45;
}

.design-shell .ui-sort:is([data-sort="ascending"], [data-sort="descending"]) .ui-sort-icon {
    opacity: 1;
}

.design-shell .ui-sort[data-sort="descending"] .ui-sort-icon {
    transform: rotate(180deg);
}

/* Tabla de datos semántica (matrices, resúmenes numéricos). Se envuelve en
   `.ui-scroll-region` cuando puede no caber. */
.design-shell .ui-data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--text);
    font-size: .8rem;
}

.design-shell .ui-data-table :is(th, td) {
    padding: 11px 16px;
    border-bottom: 1px solid var(--border-light);
    text-align: left;
    vertical-align: top;
}

.design-shell .ui-data-table :is(th, td) + :is(th, td) {
    border-left: 1px solid var(--border-light);
}

.design-shell .ui-data-table thead th {
    background: var(--surface-subtle);
    color: var(--text);
    font-weight: 600;
}

.design-shell .ui-data-table thead th:first-child,
.design-shell .ui-data-table tfoot th {
    color: var(--text-muted);
    font-weight: 400;
}

.design-shell .ui-data-table tbody th {
    font-weight: 500;
}

.design-shell .ui-data-table tfoot :is(th, td) {
    border-bottom: 0;
    background: var(--surface-subtle);
}

.design-shell .ui-data-table tfoot td {
    font-weight: 500;
}

/* Sin separadores verticales ni fondo de cabecera: tablas dentro de una tarjeta. */
.design-shell .ui-data-table--plain :is(th, td) + :is(th, td) {
    border-left: 0;
}

.design-shell .ui-data-table--plain thead th {
    padding-block: 9px;
    background: transparent;
    color: var(--text-muted);
    font-size: .73rem;
    font-weight: 400;
}

.design-shell .ui-data-table--plain tbody tr:last-child > * {
    border-bottom: 0;
}

.design-shell .ui-data-table thead tr:first-child > :first-child {
    border-top-left-radius: calc(var(--ui-radius) - 1px);
}

.design-shell .ui-data-table thead tr:first-child > :last-child {
    border-top-right-radius: calc(var(--ui-radius) - 1px);
}

/* Lista de filas, enlazables o no, dentro de una superficie. */
.design-shell .ui-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.design-shell .ui-list > li + li {
    border-top: 1px solid var(--border-light);
}

.design-shell .ui-list-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 16px;
    color: var(--text);
}

.design-shell a.ui-list-item:hover {
    background: var(--surface-subtle);
    color: var(--text);
}

.design-shell a.ui-list-item:focus-visible {
    outline-offset: -2px;
}

.design-shell .ui-list-title {
    font-size: .84rem;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.design-shell .ui-list-meta {
    color: var(--text-muted);
    font-size: .76rem;
    overflow-wrap: anywhere;
}

.design-shell .ui-list-note {
    margin: 0;
    padding: 12px 16px;
    color: var(--text-muted);
    font-size: .76rem;
    line-height: 1.5;
}

.design-shell .ui-list + .ui-list-note {
    border-top: 1px solid var(--border-light);
}

/* Avance (correcciones completadas, etc.) sobre <progress>. */
.design-shell .ui-progress {
    display: block;
    width: 100%;
    height: 4px;
    overflow: hidden;
    border: 0;
    border-radius: 2px;
    background: var(--border-light);
    color: var(--success);
    -webkit-appearance: none;
    appearance: none;
}

.design-shell .ui-progress::-webkit-progress-bar {
    background: var(--border-light);
}

.design-shell .ui-progress::-webkit-progress-value {
    border-radius: 2px;
    background: var(--success);
}

.design-shell .ui-progress::-moz-progress-bar {
    border-radius: 2px;
    background: var(--success);
}

/* Puntuación total → nota final (detalle y resumen del editor de rúbricas). */
.design-shell .ui-score {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 8px 24px;
}

.design-shell .ui-score dl {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 6px 0;
    margin: 0;
}

.design-shell .ui-score dl > div {
    display: flex;
    flex-direction: column;
}

.design-shell .ui-score dl > div + div {
    position: relative;
    margin-left: 14px;
    padding-left: 30px;
}

.design-shell .ui-score dl > div + div::before {
    content: '→';
    position: absolute;
    bottom: 4px;
    left: 0;
    color: var(--text-light);
    font-size: 1.1rem;
}

.design-shell .ui-score dt {
    margin-bottom: 2px;
    color: var(--text-muted);
    font-size: .74rem;
    font-weight: 400;
}

.design-shell .ui-score dd {
    margin: 0;
    color: var(--text);
    font-size: 1.45rem;
    font-weight: 500;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.design-shell .ui-score-unit {
    color: var(--text-muted);
    font-size: .8rem;
    font-weight: 400;
}

.design-shell .ui-score p {
    margin: 0 0 3px;
    color: var(--text-muted);
    font-size: .76rem;
    line-height: 1.45;
}

/* Versión para columnas estrechas: dos columnas fijas que no saltan de línea; la
   unidad queda solo para lectores de pantalla. */
.design-shell .ui-score--compact {
    display: block;
}

.design-shell .ui-score--compact dl {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0;
}

.design-shell .ui-score--compact dl > div + div {
    margin-left: 0;
    padding-left: 24px;
}

.design-shell .ui-score--compact dl > div + div::before {
    left: 2px;
}

.design-shell .ui-score--compact dd {
    font-size: 1.25rem;
    overflow-wrap: anywhere;
}

.design-shell .ui-score--compact .ui-score-unit {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.design-shell .ui-score--compact p {
    margin-top: 10px;
}

.design-shell .ui-page-heading .ui-score :is(dt, p, .ui-score-unit) {
    color: var(--text-heading-soft);
}

.design-shell .ui-page-heading .ui-score dd {
    color: var(--text-heading);
}

.design-shell .ui-page-heading .ui-score dl > div + div::before {
    color: #6b7697;
}

/* Carrusel horizontal de tarjetas. Muestra `--ui-carousel-per-view` tarjetas
   (3 por defecto) y se desplaza con las flechas, el teclado o el gesto. La
   pantalla ajusta cuántas caben en sus consultas de contenedor. */
.design-shell .ui-carousel {
    --ui-carousel-gap: 16px;
    /* Su ancho lo da el contenedor; las tarjetas que no caben no lo ensanchan, y
       lo posicionado dentro (p. ej. .visually-hidden) queda recortado con ellas. */
    contain: inline-size;
    position: relative;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - (var(--ui-carousel-per-view, 3) - 1) * var(--ui-carousel-gap)) / var(--ui-carousel-per-view, 3));
    gap: var(--ui-carousel-gap);
    margin: -4px;
    padding: 4px;
    overflow-x: auto;
    list-style: none;
    scroll-snap-type: x mandatory;
    scroll-padding: 4px;
    scrollbar-width: none;
}

.design-shell .ui-carousel::-webkit-scrollbar {
    display: none;
}

.design-shell .ui-carousel > * {
    min-width: 0;
    scroll-snap-align: start;
}

.design-shell .ui-carousel:focus-visible {
    outline-offset: 0;
}

.design-shell .ui-carousel-nav {
    display: flex;
    gap: 6px;
}

/* Diálogo modal sobre <dialog> (showModal): atrapa el foco y se cierra con Escape.
   <dialog class="ui-dialog"><div class="ui-dialog-body">…</div><div class="ui-dialog-actions">…</div></dialog> */
.design-shell .ui-dialog {
    width: min(560px, calc(100vw - 32px));
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card-bg);
    color: var(--text);
    box-shadow: 0 24px 60px rgba(41, 44, 41, .18);
}

.design-shell .ui-dialog::backdrop {
    background: rgba(41, 44, 41, .32);
}

.design-shell .ui-dialog-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 22px 24px 6px;
}

.design-shell .ui-dialog-body h2 {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 600;
}

.design-shell .ui-dialog-body p {
    margin: 0;
    color: var(--text-muted);
    font-size: .84rem;
    line-height: 1.5;
}

.design-shell .ui-dialog-body .ui-field {
    margin-top: 12px;
}

.design-shell .ui-dialog-body .ui-notice {
    margin-top: 12px;
}

.design-shell .ui-dialog-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 18px 24px 20px;
}

.design-shell .ui-dialog-actions .ui-button {
    white-space: nowrap;
}

/* La acción que descarta va aparte, a la izquierda y con menos peso. */
.design-shell .ui-dialog-actions .ui-button--danger {
    margin-right: auto;
}

@media (max-width: 575px) {
    .design-shell .ui-dialog-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .design-shell .ui-dialog-actions .ui-button--danger {
        margin-right: 0;
    }
}

/* 10. Avisos y estados vacíos ------------------------------------------ */
.design-shell .ui-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 14px 11px 16px;
    border-radius: var(--ui-radius);
    background: var(--primary-soft);
    color: var(--text-heading);
    font-size: .82rem;
    line-height: 1.5;
}

.design-shell .ui-notice > p {
    flex: 1;
    margin: 0;
}

.design-shell .ui-notice--success {
    background: var(--success-soft);
    color: var(--success-text);
}

.design-shell .ui-notice--warning {
    background: var(--warning-soft);
    color: var(--warning-text);
}

.design-shell .ui-notice--danger {
    background: var(--danger-soft);
    color: var(--danger-text);
}

.design-shell .ui-notice-close {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: none;
    color: inherit;
    opacity: .7;
    cursor: pointer;
}

.design-shell .ui-notice-close:hover {
    opacity: 1;
}

.design-shell .ui-empty {
    padding: 32px 20px;
    text-align: center;
    color: var(--text-muted);
}

.design-shell .ui-empty h2 {
    font-size: 1rem;
    color: var(--text);
}

.design-shell .ui-empty > i {
    display: block;
    margin-bottom: 12px;
    font-size: 1.6rem;
}

/* 11. Identidad, estado y resúmenes ------------------------------------ */
.design-shell .ui-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--border-light);
    color: var(--text-secondary);
    font-size: .76rem;
    font-weight: 500;
}

.design-shell .ui-avatar--lg {
    flex-basis: 52px;
    width: 52px;
    height: 52px;
    font-size: 1.1rem;
}

.design-shell .ui-page-heading .ui-avatar {
    background: var(--card-bg);
    color: var(--text-heading-soft);
}

.design-shell .ui-status-dot {
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--border-strong);
}

.design-shell .ui-status-dot--active {
    background: var(--success);
}

.design-shell .ui-summary {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 12px 24px;
    color: var(--text-muted);
    font-size: .78rem;
}

.design-shell .ui-summary strong {
    margin-left: 6px;
    color: var(--text);
    font-weight: 500;
}

.design-shell .ui-summary-list {
    margin: 0;
}

.design-shell .ui-summary-list > div {
    display: grid;
    grid-template-columns: 70px minmax(0,1fr);
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-light);
    font-size: .8rem;
}

.design-shell .ui-summary-list dt {
    color: var(--text-muted);
    font-weight: 400;
}

.design-shell .ui-summary-list dd {
    margin: 0;
    overflow-wrap: anywhere;
}

/* Lista de capacidades o comprobaciones superadas, con tick verde. */
.design-shell .ui-checklist {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.design-shell .ui-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: var(--text);
    line-height: 1.45;
}

.design-shell .ui-checklist li > i {
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--success);
    font-size: .95rem;
    line-height: 1.2;
}

/* 12. Editor: variantes de respuesta ----------------------------------- */
/* Se presenta como un campo: las fichas y el texto nuevo comparten un mismo borde. */
.design-shell .ui-answer-variants {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-width: 0;
    min-height: 30px;
    gap: 3px;
    padding: 2px 3px;
    border: 1px solid var(--border-strong);
    border-radius: var(--ui-field-radius);
    background: var(--card-bg);
    cursor: text;
}

.design-shell .ui-answer-variants:focus-within {
    border-color: var(--primary);
    box-shadow: var(--ui-focus-ring);
}

.design-shell .ui-answer-variant {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    padding-left: 8px;
    border-radius: 4px;
    background: var(--primary-soft);
    color: var(--primary-hover);
    font-size: .8rem;
}

.design-shell .ui-answer-variant > span {
    overflow-wrap: anywhere;
}

.design-shell .ui-answer-variant button:focus-visible {
    outline-offset: -2px;
    border-radius: 4px;
}

.design-shell .ui-answer-variant button {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--primary);
    cursor: pointer;
}

.design-shell .ui-variant-input {
    flex: 1 1 110px;
    width: 110px;
    min-width: 0;
    min-height: 24px;
    padding: 0 5px;
    border: 0;
    border-radius: var(--ui-field-radius);
    background: transparent;
    font: inherit;
    font-size: .8rem;
    color: var(--text);
}

.design-shell .ui-variant-input:focus,
.design-shell .ui-variant-input:focus-visible {
    outline: none;
}

/* 13. Correcciones: progreso, estudiante, notas y estado ---------------- */
/* Tarjetas de progreso por prueba; cada una es un botón que filtra el listado.
   <div class="ui-surface ui-progress-cards"><button class="ui-progress-card" aria-pressed>… */
.design-shell .ui-progress-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    overflow: hidden;
}

.design-shell .ui-progress-card {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 16px 18px;
    border: 0;
    border-right: 1px solid var(--border-light);
    background: var(--card-bg);
    color: var(--text);
    text-align: left;
    cursor: pointer;
}

.design-shell .ui-progress-card:last-child {
    border-right: 0;
}

.design-shell .ui-progress-card:hover:not(:disabled) {
    background: var(--surface-subtle);
}

.design-shell .ui-progress-card[aria-pressed="true"] {
    background: #f4f6fb;
    box-shadow: inset 0 -2px 0 var(--primary);
}

.design-shell .ui-progress-card:disabled {
    cursor: default;
}

.design-shell .ui-progress-card:disabled > :not(.ui-progress-card-note) {
    opacity: .55;
}

.design-shell .ui-progress-card:focus-visible {
    outline-offset: -2px;
}

.design-shell .ui-progress-card-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .82rem;
    font-weight: 500;
}

.design-shell .ui-progress-card-count {
    display: flex;
    align-items: baseline;
    gap: 6px;
    color: var(--text-muted);
    font-size: .8rem;
}

.design-shell .ui-progress-card-count strong {
    color: var(--text);
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: -.02em;
    line-height: 1;
}

/* Completadas en verde y en curso en ámbar: <span class="is-done"> y <span class="is-started">. */
.design-shell .ui-progress-card-bar {
    display: flex;
    width: 100%;
    height: 5px;
    overflow: hidden;
    border-radius: 3px;
    background: var(--border-light);
}

.design-shell .ui-progress-card-bar .is-done {
    background: var(--success);
}

.design-shell .ui-progress-card-bar .is-started {
    background: var(--in-progress);
}

.design-shell .ui-progress-card-note {
    color: var(--text-muted);
    font-size: .74rem;
}

/* Rondas extra en una línea bajo la barra: el ordinal en el ámbar de su ronda, lo
   completado sobre el total y una marca verde si la ronda está terminada.
   <span class="ui-progress-card-rounds"><span class="ui-progress-card-rounds-label">Revisiones</span>
   <span class="ui-progress-card-round ui-progress-card-round--2"><strong>2ª</strong> 2/2<i class="bi bi-check2"></i></span></span> */
.design-shell .ui-progress-card-rounds {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 12px;
    width: 100%;
    padding-top: 8px;
    border-top: 1px solid var(--border-light);
    color: var(--text-secondary);
    font-size: .76rem;
    font-variant-numeric: tabular-nums;
}

.design-shell .ui-progress-card-rounds-label {
    color: var(--text-muted);
}

.design-shell .ui-progress-card-round {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}

.design-shell .ui-progress-card-round strong {
    color: var(--round);
    font-weight: 600;
}

.design-shell .ui-progress-card-round--3 strong {
    color: var(--round-strong);
}

.design-shell .ui-progress-card-round .bi-check2 {
    color: var(--success);
}

/* Filtro activo que se quita al pulsarlo, junto a los demás filtros. */
.design-shell .ui-filter-chip {
    min-height: var(--ui-control-height);
    border-color: var(--primary-ring);
    background: var(--primary-soft);
    color: var(--primary);
}

/* Filtro «Requieren atención»: punto ámbar y, activo, fondo ámbar suave. */
.design-shell .ui-button--attention .ui-severity-dot {
    background: var(--warning);
}

.design-shell .ui-button--attention[aria-pressed="true"] {
    border-color: #e0b05f;
    background: var(--warning-soft);
    color: var(--warning-text);
}

/* Orden para listados sin cabecera (modo apilado); cada pantalla lo muestra en
   su consulta de contenedor. */
.design-shell .ui-compact-sort {
    display: none;
    align-items: center;
    gap: 6px;
}

/* Estudiante en una línea: nombre y DNI (ambos con {% pii %}). */
.design-shell .ui-student {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px 10px;
    min-width: 0;
}

.design-shell .ui-student-name {
    color: var(--text);
    font-size: .84rem;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.design-shell .ui-student-id {
    color: var(--text-muted);
    font-family: var(--ui-font-mono);
    font-size: .72rem;
}

/* DNI bajo el nombre, en tablas con varias líneas por fila (revisiones). */
.design-shell .ui-student--stacked {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

/* Estudiante de una revisión: nombre subrayado en el ámbar de su ronda. */
.design-shell :is(.ui-student--round-2, .ui-student--round-3) .ui-student-name {
    text-decoration: underline 2px var(--round);
    text-underline-offset: 4px;
}

.design-shell .ui-student--round-3 .ui-student-name {
    text-decoration-color: var(--round-strong);
}

/* Prueba con el icono de su destreza. */
.design-shell .ui-test-name {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
}

/* Celdas de nota (partials/correcciones/_nota.html): barra, ponderada y bruta. */
.design-shell .ui-grade-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    text-align: right;
    white-space: nowrap;
}

.design-shell .ui-grade-cell--raw {
    color: var(--text-secondary);
}

.design-shell .ui-grade {
    color: var(--text);
    font-size: .92rem;
    font-weight: 600;
}

.design-shell .ui-grade.is-pass {
    color: var(--success-text);
}

.design-shell .ui-grade.is-fail {
    color: var(--danger);
}

.design-shell :is(.ui-grade-max, .ui-grade-empty) {
    color: var(--text-light);
    font-size: .74rem;
}

/* La nota anterior va en el ámbar de las revisiones, como su marca en la barra. */
.design-shell .ui-grade-before {
    color: var(--round);
    font-size: .74rem;
}

/* Estado de una corrección: punto gris (pendiente), ámbar (en curso) o verde. */
.design-shell .ui-state {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.design-shell .ui-state-label {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--text-secondary);
}

/* «No presentado» en lugar de la nota de una fila. */
.design-shell .ui-no-show {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 9px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-active);
    color: var(--text-secondary);
    font-size: .76rem;
    font-weight: 500;
    white-space: nowrap;
}

.design-shell .ui-state-dot {
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--border-strong);
}

.design-shell .ui-state-dot--pro {
    background: var(--in-progress);
}

.design-shell .ui-state-dot--com {
    background: var(--success);
}

/* «Ver →» al final de una fila. */
.design-shell .ui-view-link {
    min-height: 0;
    gap: 5px;
}

/* 14. Analítica: cifras, estado de convocatoria y gráficas ------------- */
/* Cifras clave en una fila de tarjetas.
   <section class="ui-surface ui-kpis"><div class="ui-kpi"><span class="ui-kpi-label">…</span>
   <span class="ui-kpi-value">72 %<small>de 36</small></span><span class="ui-kpi-note">…</span></div></section> */
.design-shell .ui-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    overflow: hidden;
}

.design-shell .ui-kpi {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 18px;
    border-right: 1px solid var(--border-light);
}

.design-shell .ui-kpi:last-child {
    border-right: 0;
}

.design-shell .ui-kpi-label {
    color: var(--text-muted);
    font-size: .78rem;
}

.design-shell .ui-kpi-value {
    display: flex;
    align-items: baseline;
    gap: 6px;
    color: var(--text);
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: -.02em;
    line-height: 1;
}

.design-shell .ui-kpi-value small {
    color: var(--text-muted);
    font-size: .8rem;
    font-weight: 400;
    letter-spacing: 0;
}

.design-shell .ui-kpi-note {
    color: var(--text-muted);
    font-size: .74rem;
}

/* Aviso accionable, teñido del color de su gravedad: icono (filtro icono_aviso),
   título, detalle y acción.
   <li class="ui-alert ui-severity--warning"><i class="bi {{ nivel|icono_aviso }} ui-alert-icon"></i>
   <span class="ui-alert-text"><strong>…</strong><span>…</span></span>
   <a class="ui-button ui-button--link ui-view-link">Crear →</a></li> */
.design-shell .ui-alert-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.design-shell .ui-alert {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px 10px 14px;
    border: 1px solid color-mix(in srgb, var(--severity, var(--text-light)) 32%, transparent);
    border-radius: var(--ui-field-radius);
    background: var(--severity-soft, var(--surface-subtle));
}

.design-shell .ui-alert-icon {
    color: var(--severity, var(--text-light));
    font-size: 1rem;
    line-height: 1;
}

.design-shell .ui-alert-bar {
    align-self: stretch;
    border-radius: 2px;
    background: var(--severity, var(--text-light));
}

.design-shell .ui-alert-text {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    min-width: 0;
    font-size: .8rem;
}

.design-shell .ui-alert-text strong {
    color: var(--severity-text, var(--text));
    font-weight: 600;
}

.design-shell .ui-alert-text > span {
    color: var(--text-muted);
}

.design-shell .ui-alert .ui-button {
    white-space: nowrap;
}

/* Estado de una convocatoria: punto verde (en curso), azul (programada) o gris. */
.design-shell .ui-call-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
}

.design-shell .ui-call-state--en-curso { --severity: var(--success); }
.design-shell .ui-call-state--programada { --severity: var(--primary); }
.design-shell .ui-call-state--finalizada { --severity: var(--text-light); }

/* Gráfica de barras sin librerías: cada barra es un elemento de lista con su texto
   para lectores de pantalla; la altura llega en --h (porcentaje del máximo).
   <ol class="ui-bar-chart"><li style="--h: 60%"><span class="ui-bar-chart-value">3</span>
   <span class="ui-bar-chart-bar is-pass"></span><span class="visually-hidden">…</span></li></ol> */
.design-shell .ui-bar-chart {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 160px;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--border);
    list-style: none;
}

.design-shell .ui-bar-chart > li {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 3px;
    min-width: 0;
    height: 100%;
}

.design-shell .ui-bar-chart-value {
    color: var(--text-secondary);
    font-size: .7rem;
    line-height: 1;
}

.design-shell .ui-bar-chart-bar {
    width: 100%;
    max-width: 40px;
    height: var(--h, 0%);
    min-height: 2px;
    border-radius: 3px 3px 0 0;
    background: #97a6cb;
}

.design-shell .ui-bar-chart-bar.is-pass {
    background: var(--success);
}

.design-shell .ui-bar-chart-bar.is-primary {
    background: var(--primary);
}

.design-shell .ui-bar-chart-bar.is-warning {
    background: var(--in-progress);
}

.design-shell .ui-bar-chart-bar.is-empty {
    background: var(--border-light);
}

.design-shell .ui-bar-chart-axis {
    display: flex;
    gap: 3px;
    margin-top: 6px;
    color: var(--text-muted);
    font-size: .7rem;
}

.design-shell .ui-bar-chart-axis > span {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    white-space: nowrap;
}

/* 15. Selector de profesor --------------------------------------------- */
/* Diálogo con búsqueda y lista de profesores de menor a mayor carga: nombre, barra de
   carga (.ui-load-bar con un <span> de ancho proporcional) y cifras. El elegido lleva
   aria-current y una marca; los que no se pueden elegir van deshabilitados con su
   motivo en .ui-option-note. Se usa en asignaciones, tribunales y revisiones.
   <dialog class="ui-dialog ui-picker-dialog"> … <ul class="ui-options"><li><button
   class="ui-option"><span class="ui-option-name">…</span><span class="ui-load-bar">
   <span style="width: 40%"></span></span><span class="ui-option-count">…</span>
   <span class="ui-option-note">…</span></button></li></ul> */
.design-shell .ui-picker-dialog .ui-search {
    margin-top: 10px;
}

.design-shell .ui-options {
    display: flex;
    flex-direction: column;
    max-height: 320px;
    margin: 10px 0 0;
    padding: 0;
    overflow: auto;
    border: 1px solid var(--border-light);
    border-radius: var(--ui-field-radius);
    list-style: none;
}

.design-shell .ui-options li + li {
    border-top: 1px solid var(--border-light);
}

.design-shell .ui-option {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 70px 52px;
    align-items: center;
    gap: 4px 12px;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    background: var(--card-bg);
    color: var(--text);
    font-size: .82rem;
    text-align: left;
    cursor: pointer;
}

.design-shell .ui-option:hover:not(:disabled) {
    background: var(--surface-hover);
}

.design-shell .ui-option:disabled {
    cursor: default;
    opacity: .5;
}

.design-shell .ui-option--clear {
    display: flex;
    gap: 8px;
    color: var(--text-secondary);
}

.design-shell .ui-option[aria-current="true"] {
    background: var(--primary-soft);
    font-weight: 600;
}

.design-shell .ui-option-name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.design-shell .ui-option-name .bi-check2 {
    color: var(--primary);
}

.design-shell .ui-option-count {
    color: var(--text-muted);
    font-size: .74rem;
    text-align: right;
}

.design-shell .ui-option-note {
    grid-column: 1 / -1;
    color: var(--warning-text);
    font-size: .72rem;
}

.design-shell .ui-picker-dot {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--primary);
}

/* Sin profesor: el punto vacío («Dejar sin asignar», botones de fila sin asignar). */
.design-shell .ui-picker-dot.is-empty,
.design-shell .ui-option--clear .ui-picker-dot {
    border: 1px solid var(--border-strong);
    background: transparent;
}

.design-shell .ui-load-bar {
    display: block;
    height: 4px;
    overflow: hidden;
    border-radius: 2px;
    background: var(--border-light);
}

.design-shell .ui-load-bar > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #97a6cb;
}