:root {
    color-scheme: light;
    --color-fondo: #ffffff;
    --color-superficie: #f6f8fb;
    --color-superficie-2: #edf1f7;
    --color-texto: #14171f;
    --color-texto-suave: #464647;
    --color-borde: #dde2e9;
    --color-acento: #2455e6;
    --color-acento-hover: #1b3fb8;
    --color-acento-suave: #e8eefc;
    --color-enlace: #2455e6;
    --color-exito: #1a7f37;
    --color-exito-suave: #e6f6ea;
    --color-peligro: #c22a2a;
    --color-peligro-suave: #fceaea;
    --sombra: 0 1px 2px rgba(43, 44, 46, 0.06), 0 2px 8px rgba(20, 23, 31, 0.05);
    --radio: 8px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--color-texto);
    background: var(--color-fondo);
    line-height: 1.45;
    font-size: 15px;
}

/* Deja hueco para que la cabecera fija (sticky) no tape el titulo al saltar
   a un ancla (enlaces del menu lateral, o los #programa/#bibliografia... del editor). */
[id] {
    scroll-margin-top: 4.5rem;
}

a {
    color: var(--color-enlace);
    text-decoration: none;
    text-underline-offset: 2px;
    font-weight: 600;
}

a:hover {
    color: var(--color-acento-hover);
}

h1, h2, h3 {
    line-height: 1.2;
    font-weight: 700;
    color: var(--color-texto);
}

h1 {
    font-size: 1.5rem;
    margin: 0 0 0.35rem;
}

h2 {
    font-size: 1.05rem;
    margin: 0 0 0.65rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--color-borde);
}

h3 {
    font-size: 0.95rem;
    margin: 0.9rem 0 0.5rem;
}

p {
    color: var(--color-texto-suave);
    margin: 0 0 0.75rem;
}

/* ---------- Cabecera ---------- */

.site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.55rem 1.5rem;
    background: var(--color-fondo);
    border-bottom: 1px solid var(--color-borde);
    box-shadow: var(--sombra);
    position: sticky;
    top: 0;
    z-index: 10;
}

.site-header__brand {
    font-weight: 800;
    font-size: 1rem;
    color: var(--color-texto);
    text-decoration: none;
    letter-spacing: -0.01em;
}

.site-header__brand:hover {
    color: var(--color-acento);
}

.site-header__nav {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    font-size: 0.85rem;
}

.site-header__usuario {
    color: var(--color-texto-suave);
    font-weight: 600;
}

.site-header__link {
    color: var(--color-texto);
    text-decoration: none;
    font-weight: 700;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
}

.site-header__link:hover {
    background: var(--color-acento-suave);
    color: var(--color-acento);
}

.site-header__salir {
    color: var(--color-peligro);
    text-decoration: none;
    font-weight: 700;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--color-peligro-suave);
}

.site-header__salir:hover {
    background: var(--color-peligro-suave);
}

/* ---------- Estructura general ---------- */

.site-main {
    max-width: 1320px;
    margin: 0 auto;
    padding: 1.25rem 1.5rem 2.5rem;
}

.site-footer {
    text-align: center;
    padding: 1rem;
    color: var(--color-texto-suave);
    font-size: 0.8rem;
    border-top: 1px solid var(--color-borde);
    margin-top: 1.5rem;
}

/* ---------- Formularios ---------- */

.form {
    max-width: 440px;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

/* Un único formulario grande que envuelve varias tarjetas .seccion (revisión
   de una importación de documento). El límite de 440px y el apilado en una
   sola columna no tienen sentido aquí; cada .seccion reparte sus propios
   campos en rejilla, igual que en el editor normal. */
.form--importacion {
    max-width: none;
    gap: 0;
}

.form--importacion .seccion {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.7rem 1.25rem;
    align-items: start;
}

.form--importacion .seccion > h2,
.form--importacion .seccion > p,
.form--importacion .seccion > ul,
.form--importacion .seccion > div,
.form--importacion .seccion > fieldset,
.form--importacion .seccion > textarea,
.form--importacion .seccion > label:has(textarea),
.form--importacion .seccion > label:has(input[type="checkbox"]) {
    grid-column: 1 / -1;
}

.form--importacion .seccion fieldset {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.6rem 1rem;
    align-items: start;
}

.form--importacion .seccion fieldset > legend,
.form--importacion .seccion fieldset > p,
.form--importacion .seccion fieldset > div,
.form--importacion .seccion fieldset > label:has(textarea),
.form--importacion .seccion fieldset > label:has(input[type="checkbox"]) {
    grid-column: 1 / -1;
}

/* Fila de una referencia bibliografica/lectura importada: texto largo +
   URL opcional + descartar. Antes el input de texto era de una sola linea
   y el de la URL, sin ancho propio, se estiraba al 100% del contenedor
   flex (heredaba "width:100%" de ".form input") y aplastaba el resto. */
.fila-referencia {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    align-items: flex-start;
    margin-bottom: 0.6rem;
}

.fila-referencia__texto {
    flex: 3 1 320px;
}

.fila-referencia__url {
    flex: 1 1 200px;
}

.fila-referencia__texto textarea {
    resize: vertical;
}

.fila-referencia__descartar {
    flex: 0 0 auto;
    align-self: center;
}

.seccion {
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    background: var(--color-superficie);
    box-shadow: var(--sombra);
    padding: 1rem 1.25rem;
    margin-bottom: 0.9rem;
}

.seccion h2 {
    margin-top: 0;
    border-bottom-color: var(--color-borde);
}

/* Dentro de una tarjeta de seccion, los formularios reparten los campos en
   columnas para aprovechar el ancho en vez de apilarlo todo en una sola fila. */
.seccion .form,
.seccion form {
    max-width: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.7rem 1.25rem;
    align-items: start;
}

/* Los campos largos (texto libre, descripciones...) y las acciones ocupan toda la fila. */
.seccion form label:has(textarea),
.seccion form label:has(input[type="checkbox"]),
.seccion form button[type="submit"],
.seccion form .modal-acciones,
.seccion form .editor-rico-wrapper {
    grid-column: 1 / -1;
}

.form label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-texto-suave);
}

.form label:has(input[type="checkbox"]) {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    color: var(--color-texto);
}

.form label:has(input[type="checkbox"]) input {
    width: auto;
}

.form input,
.form select,
.form textarea {
    width: 100%;
    padding: 0.45rem 0.65rem;
    border: 1px solid var(--color-borde);
    border-radius: 6px;
    font-size: 0.95rem;
    font-family: inherit;
    color: var(--color-texto);
    background: var(--color-fondo);
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
}

.form input:focus,
.form select:focus,
.form textarea:focus {
    outline: none;
    border-color: var(--color-acento);
    box-shadow: 0 0 0 3px var(--color-acento-suave);
}

.seccion textarea {
    min-height: 4.5rem;
}

/* ---------- Editor de texto enriquecido ---------- */

.editor-rico-wrapper {
    border: 1px solid var(--color-borde);
    border-radius: 6px;
    background: var(--color-fondo);
    overflow: hidden;
}

.editor-rico-toolbar {
    display: flex;
    gap: 0.15rem;
    padding: 0.3rem 0.4rem;
    background: var(--color-fondo);
    border-bottom: 1px solid var(--color-borde);
}

/* Especificidad reforzada (.editor-rico-toolbar .editor-rico-boton, dos clases)
   a proposito: si no, la regla generica ".form button" (una clase + tipo) le
   gana en prioridad y estos botones siempre salian en azul solido. */
.editor-rico-toolbar .editor-rico-boton {
    align-self: auto;
    width: 2rem;
    height: 2rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    line-height: 1;
    background: transparent;
    color: var(--color-texto-suave);
    border: 1px solid transparent;
    border-radius: 5px;
    box-shadow: none;
}

.editor-rico-toolbar .editor-rico-boton--bold { font-weight: 800; }
.editor-rico-toolbar .editor-rico-boton--italic { font-style: italic; }
.editor-rico-toolbar .editor-rico-boton--underline { text-decoration: underline; }
.editor-rico-toolbar .editor-rico-boton--lista { font-size: 1.05rem; }

.editor-rico-toolbar .editor-rico-boton svg {
    display: block;
}

.editor-rico-separador {
    width: 1px;
    margin: 0.2rem 0.25rem;
    background: var(--color-borde);
}

.editor-rico-toolbar .editor-rico-boton:hover {
    background: transparent;
    border-color: var(--color-borde);
    color: var(--color-texto);
    transform: none;
}

.editor-rico-toolbar .editor-rico-boton--activo,
.editor-rico-toolbar .editor-rico-boton--activo:hover {
    background: var(--color-fondo);
    border-color: var(--color-texto);
    color: var(--color-texto);
}

.editor-rico-toolbar .editor-rico-boton:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.editor-rico-toolbar .editor-rico-boton:disabled:hover {
    background: transparent;
    border-color: transparent;
    color: var(--color-texto-suave);
}

.editor-rico-area {
    min-height: 4.5rem;
    padding: 0.45rem 0.65rem;
    font-size: 0.95rem;
}

.editor-rico-area[contenteditable="false"] {
    background: var(--color-superficie);
    color: var(--color-texto-suave);
}

.editor-rico-area:focus {
    outline: none;
    box-shadow: inset 0 0 0 3px var(--color-superficie-2);
}

.editor-rico-area ul {
    margin: 0;
    padding-left: 1.4rem;
}

/* El navegador envuelve cada parrafo (al pulsar Enter) en <p> o en <div> segun el
   caso; sin esta regla los <div> (sin margen por defecto) quedan pegados entre si,
   perdiendo el espacio que sí tienen los <p> por la regla global de arriba. Se
   aplica tanto dentro del editor como donde se muestra el contenido ya guardado. */
.editor-rico-area p,
.editor-rico-area div,
.contenido-enriquecido p,
.contenido-enriquecido div,
.participante__bio p,
.participante__bio div {
    margin: 0 0 0.75rem;
}

/* Texto de importaciones antiguas puede traer restos con otro color (por ejemplo
   enlaces de antes de que el saneador los quitara). Se fuerza aqui un unico color
   para todo el contenido, sin excepciones, para que no queden partes mas claras
   u oscuras que otras. */
.editor-rico-area,
.editor-rico-area *,
.contenido-enriquecido,
.contenido-enriquecido *,
.participante__bio,
.participante__bio * {
    color: var(--color-texto) !important;
}

.editor-rico-area > p:last-child,
.editor-rico-area > div:last-child,
.contenido-enriquecido > p:last-child,
.contenido-enriquecido > div:last-child,
.participante__bio > p:last-child,
.participante__bio > div:last-child {
    margin-bottom: 0;
}

/* ---------- Iconos ---------- */

.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: none;
    stroke: currentColor;
    flex-shrink: 0;
}

a .icon, button .icon {
    margin-right: 0.3em;
}

.site-header__brand .icon {
    margin-right: 0.4em;
    vertical-align: -0.2em;
}

/* ---------- Botones ---------- */

button, .form button {
    align-self: flex-start;
    padding: 0.45rem 1.1rem;
    border: 1px solid var(--color-acento);
    border-radius: 6px;
    background: var(--color-acento);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--sombra);
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

button:hover, .form button:hover {
    background: var(--color-acento-hover);
    border-color: var(--color-acento-hover);
    transform: translateY(-1px);
}

button:active, .form button:active {
    transform: translateY(0);
}

.form-accion button {
    align-self: auto;
    background: transparent;
    color: var(--color-peligro);
    border: 1px solid var(--color-peligro-suave);
    padding: 0.25rem 0.65rem;
    font-size: 0.8rem;
    box-shadow: none;
}

.form-accion button:hover {
    background: var(--color-peligro-suave);
    border-color: var(--color-peligro);
    transform: none;
}

.acciones-iconos {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
}

.acciones-iconos a,
.acciones-iconos button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--color-texto-suave);
    border: 1px solid var(--color-borde);
    box-shadow: none;
    text-decoration: none;
}

.acciones-iconos a .icon,
.acciones-iconos button .icon {
    margin-right: 0;
    width: 1.1em;
    height: 1.1em;
}

.acciones-iconos a:hover,
.acciones-iconos button:hover {
    background: var(--color-acento-suave);
    border-color: var(--color-acento);
    color: var(--color-acento);
    transform: none;
}

.acciones-iconos .form-accion button {
    color: var(--color-peligro);
    border-color: var(--color-peligro-suave);
}

.acciones-iconos .form-accion button:hover {
    background: var(--color-peligro-suave);
    border-color: var(--color-peligro);
}

.ayuda {
    color: var(--color-texto-suave);
    font-size: 0.85rem;
    margin-top: -0.5rem;
}

.orden-acciones {
    display: inline-flex;
    gap: 0.15rem;
    margin-left: 0.35rem;
}

.orden-acciones button {
    background: transparent;
    color: var(--color-texto);
    border: 1px solid var(--color-borde);
    padding: 0.1rem 0.4rem;
    font-size: 0.85rem;
    line-height: 1;
    box-shadow: none;
}

.orden-acciones button:hover {
    background: var(--color-superficie-2);
    border-color: var(--color-acento);
    color: var(--color-acento);
    transform: none;
}

.form--peligro button {
    background: var(--color-peligro);
    border-color: var(--color-peligro);
}

.form--peligro button:hover {
    filter: brightness(0.92);
}

/* Formulario compacto embebido en una celda de tabla (elegir curso + abrir) */
.form-curso {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.select-compacto {
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--color-borde);
    border-radius: 6px;
    font-size: 0.82rem;
    font-family: inherit;
    color: var(--color-texto);
    background: var(--color-fondo);
}

.select-compacto:focus {
    outline: none;
    border-color: var(--color-acento);
    box-shadow: 0 0 0 3px var(--color-acento-suave);
}

.btn-compacto {
    align-self: auto;
    padding: 0.3rem 0.7rem;
    font-size: 0.8rem;
    white-space: nowrap;
}

.enviar-validacion {
    margin-top: 1rem;
    padding: 0.9rem 1.25rem;
    border: 1px solid var(--color-exito);
    border-radius: var(--radio);
    background: var(--color-exito-suave);
    box-shadow: var(--sombra);
}

.enviar-validacion p {
    color: var(--color-texto);
}

.enviar-validacion button {
    background: var(--color-exito);
    border-color: var(--color-exito);
}

.enviar-validacion button:hover {
    filter: brightness(0.92);
}

/* ---------- Avisos ---------- */

.alerta {
    padding: 0.6rem 0.9rem;
    border-radius: 6px;
    margin-bottom: 0.8rem;
    font-size: 0.88rem;
    border-left: 4px solid transparent;
}

.alerta--error {
    background: var(--color-peligro-suave);
    color: #7a1f14;
    border-left-color: var(--color-peligro);
}

.alerta--exito {
    background: var(--color-exito-suave);
    color: #1e4620;
    border-left-color: var(--color-exito);
}

.ayuda-panel {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.75rem 1rem;
    margin-bottom: 0.9rem;
    border: 1px solid var(--color-acento-suave);
    border-radius: var(--radio);
    background: var(--color-acento-suave);
    color: var(--color-texto);
    font-size: 0.85rem;
    line-height: 1.5;
}

.ayuda-panel .icon {
    flex-shrink: 0;
    margin-top: 0.2rem;
    color: var(--color-acento);
    width: 1.15em;
    height: 1.15em;
}

.ayuda-panel strong {
    display: block;
    margin-bottom: 0.15rem;
}

/* ---------- Tablas ---------- */

table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 0.8rem;
    background: var(--color-fondo);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    overflow: hidden;
    font-size: 0.9rem;
}

th, td {
    padding: 0.4rem 0.65rem;
    text-align: left;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--color-borde);
}

th {
    background: var(--color-superficie-2);
    color: var(--color-texto-suave);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 700;
}

tbody tr:last-child td {
    border-bottom: none;
}

tbody tr:hover {
    background: var(--color-superficie);
}

.tabla-temas td {
    vertical-align: middle;
    border-bottom: none;
}

.tabla-temas tbody tr:nth-child(even) {
    background: var(--color-superficie);
}

.tabla-temas td:nth-child(4) {
    white-space: nowrap;
}

/* ---------- Estados ---------- */

.badge {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.badge--borrador { background: #e9eaed; color: #454952; }
.badge--pendiente { background: #fef3c7; color: #92400e; }
.badge--publicado { background: var(--color-exito-suave); color: #166534; }
.badge--rechazado { background: var(--color-peligro-suave); color: #991b1b; }

/* ---------- Pagina publica del plan docente ---------- */

.plan-layout {
    display: flex;
    align-items: flex-start;
    gap: 2.25rem;
    max-width: 100%;
    margin: 0 auto;
}

.plan-docente {
    flex: 1;
    min-width: 0;
    max-width: 100%;
}

/* Menu lateral flotante: enlaza a cada seccion presente en el plan y resalta
   la que esta a la vista mientras se hace scroll (ver script en plan.php). */
.plan-toc {
    position: sticky;
    top: 4.5rem;
    flex-shrink: 0;
    width: 170px;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    padding-left: 0.9rem;
    border-left: 1px solid var(--color-borde);
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
}

.plan-toc a {
    padding: 0.3rem 0 0.3rem 0.7rem;
    margin-left: -0.9rem;
    border-left: 2px solid transparent;
    color: var(--color-texto-suave);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.3;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.plan-toc a:hover {
    color: var(--color-texto);
}

.plan-toc a.activo {
    color: var(--color-master, var(--color-acento));
    border-left-color: var(--color-master, var(--color-acento));
    font-weight: 700;
}

@media (max-width: 900px) {
    .plan-toc {
        display: none;
    }
}

.plan-hero {
    --color-master: var(--color-master, var(--color-acento));
    position: relative;
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.25rem;
    border: 1px solid var(--color-borde);
    border-top: 4px solid var(--color-master);
    border-radius: var(--radio);
    background: linear-gradient(180deg, var(--color-superficie) 0%, var(--color-fondo) 100%);
    box-shadow: var(--sombra);
}

.plan-hero__master {
    display: flex;
    align-items: center;
    margin: 0 0 0.4rem;
    color: var(--color-master);
    font-weight: 800;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.plan-hero__master .icon {
    margin-right: 0.35em;
}

.plan-hero h1 {
    font-size: 1.65rem;
    margin-bottom: 0.6rem;
}

.plan-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.chip {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    background: var(--color-superficie-2);
    color: var(--color-texto-suave);
    font-size: 0.78rem;
    font-weight: 700;
}

.chip .icon {
    margin-right: 0.35em;
}

.btn-descarga {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1.2rem;
    border-radius: 6px;
    background: var(--color-master, var(--color-acento));
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    box-shadow: var(--sombra);
    transition: filter 0.15s ease, transform 0.1s ease;
}

.btn-descarga:hover {
    color: #fff;
    filter: brightness(0.92);
    transform: translateY(-1px);
}

.btn-descarga .icon {
    margin-right: 0.4em;
}

/* Rejilla de datos tipo "ficha" (modalidad, periodo, volumen de trabajo...) */
.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
}

.info-grid__item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.info-grid__label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-texto-suave);
}

.info-grid__valor {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-texto);
}

.plan-docente .tema {
    display: flex;
    gap: 0.9rem;
    padding: 1rem 1.1rem;
    margin-bottom: 0.75rem;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    background: var(--color-superficie);
    box-shadow: var(--sombra);
}

.tema__numero {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    background: var(--color-acento-suave);
    /*Color del máster*/
    color: var(--color-master, var(--color-acento));
    font-weight: 800;
    font-size: 0.85rem;
}

.tema__cuerpo {
    flex: 1;
    min-width: 0;
}

.plan-docente .tema h3 {
    margin-top: 0;
    margin-bottom: 0.3rem;
}

.tema__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0.9rem;
    font-size: 0.8rem;
    color: var(--color-texto-suave);
}

.tema__meta span {
    display: inline-flex;
    align-items: center;
}

.tema__meta .icon {
    margin-right: 0.3em;
}

.tema__evaluacion {
    color: var(--color-exito);
    font-weight: 700;
}

.lista-bibliografia {
    list-style: none;
    margin: 0 0 0.5rem;
    padding: 0;
}

.lista-bibliografia li {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--color-borde);
}

.lista-bibliografia li:last-child {
    border-bottom: none;
}

.lista-bibliografia .icon {
    margin-top: 0.2rem;
    color: var(--color-texto-suave);
}

/* ---------- Participantes (coordinacion / profesorado) ---------- */

.lista-participantes {
    list-style: none;
    margin: 0 0 0.9rem;
    padding: 0;
}

.lista-participantes li {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--color-borde);
}

.lista-participantes li:last-child {
    border-bottom: none;
}

.lista-participantes__vacio {
    display: block;
    color: var(--color-texto-suave);
}

.participante__info {
    min-width: 0;
}

.participante__bio {
    margin-top: 0.2rem;
    color: var(--color-texto-suave);
    font-size: 0.85rem;
}

/* ---------- Listado publico de masteres ---------- */

.master-bloque {
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    background: var(--color-superficie);
    box-shadow: var(--sombra);
}

.master-bloque h2 {
    margin-top: 0;
}

.master-bloque__asignaturas {
    list-style: none;
    margin: 0;
    padding: 0;
}

.master-bloque__asignaturas li {
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--color-borde);
}

.master-bloque__asignaturas li:last-child {
    border-bottom: none;
}

/* ---------- Modales (anadir tema / referencia / seccion / lectura) ---------- */

.modal-trigger {
    background: transparent;
    color: var(--color-acento);
    border: 1px dashed var(--color-borde);
    box-shadow: none;
}

.modal-trigger:hover {
    background: var(--color-acento-suave);
    border-color: var(--color-acento);
    transform: none;
}

dialog {
    border: none;
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 1.25rem 1.5rem;
    max-width: 460px;
    width: 90vw;
    margin: auto;
}

dialog::backdrop {
    background: rgba(20, 23, 31, 0.5);
}

dialog h3 {
    margin-top: 0;
}

.modal-acciones {
    display: flex;
    gap: 0.6rem;
    align-items: center;
}

.modal-acciones .btn-cancelar {
    background: transparent;
    color: var(--color-texto-suave);
    border-color: var(--color-borde);
    box-shadow: none;
}

.modal-acciones .btn-cancelar:hover {
    background: var(--color-superficie);
    transform: none;
}

/* ---------- Overlay de "analizando..." (importacion de documentos) ---------- */

.overlay-carga {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 23, 31, 0.55);
    backdrop-filter: blur(2px);
}

.overlay-carga[hidden] {
    display: none;
}

.overlay-carga__caja {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    max-width: 380px;
    padding: 2rem 2.25rem;
    text-align: center;
    background: var(--color-fondo);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
}

.overlay-carga__spinner {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    border: 3px solid var(--color-acento-suave);
    border-top-color: var(--color-acento);
    animation: overlay-carga-girar 0.8s linear infinite;
}

@keyframes overlay-carga-girar {
    to {
        transform: rotate(360deg);
    }
}

.overlay-carga__titulo {
    margin: 0;
    color: var(--color-texto);
    font-weight: 800;
    font-size: 1.05rem;
}

.overlay-carga__detalle {
    margin: 0;
    color: var(--color-texto-suave);
    font-size: 0.85rem;
    line-height: 1.5;
}