/* ============================================================================
 * spaces.css — espacios de trabajo y las piezas compartidas de ui.js
 *
 * Usa las variables de :root / :root[data-theme="light"] de style.css, así que sigue al tema sin
 * repetir ni un color: nada de valores fijos como el #e5e7eb que dejaba la transcripción ilegible
 * en tema claro.
 * ========================================================================== */

/* ---- Avisos (ui.js) ---- */

.ui-avisos {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 4000;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: min(28rem, calc(100vw - 2.5rem));
}

.ui-avisos-cola {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ui-aviso {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.75rem 0.9rem;
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-left-width: 3px;
    border-radius: var(--border-radius-md);
    box-shadow: 0 8px 24px var(--glass-shadow);
    color: var(--text-main);
    font-size: 0.86rem;
    line-height: 1.45;
}

/* El color no es la única señal: cada tipo lleva además su icono. */
.ui-aviso-ok { border-left-color: #2ea86a; }
.ui-aviso-error { border-left-color: var(--primary-color); }
.ui-aviso-info { border-left-color: var(--text-accent); }

.ui-aviso span { flex: 1; }

.ui-aviso-cerrar {
    flex: 0 0 auto;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0 0.15rem;
    font-size: 0.9rem;
}

.ui-aviso-cerrar:hover { color: var(--text-main); }
.ui-aviso-cerrar:focus-visible { outline: 2px solid var(--text-accent); outline-offset: 2px; }

/* ---- Diálogos pequeños (ui.js) ---- */

/* `.modal-content` está pensada para las ventanas grandes de la aplicación: impone width: 800px,
   height: 80vh y display:flex. Un diálogo de una pregunta tiene que anular las tres, o sale como
   una caja enorme con el contenido estirado. */
.ui-confirmar-caja {
    width: auto;
    max-width: 30rem;
    height: auto;
    max-height: 80vh;
    overflow-y: auto;
    display: block;
    padding: 1.5rem;
}

.ui-confirmar-titulo {
    margin: 0 0 0.75rem;
    font-size: 1.05rem;
}

.ui-confirmar-texto {
    margin: 0 0 1.25rem;
    color: var(--text-main);
    line-height: 1.5;
    /* Respeta los saltos de línea del mensaje: un consentimiento con tres puntos que hay que leer
       antes de aceptar no se puede servir como un párrafo corrido. El texto sigue insertándose con
       `textContent`, así que esto no abre la puerta a HTML. */
    white-space: pre-line;
}

.ui-confirmar-acciones {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 1.25rem;
}

.ui-confirmar-acciones .btn-secondary,
.ui-confirmar-acciones .btn-primary-sm,
.ui-confirmar-acciones .btn-peligro { width: auto; padding: 0.5rem 1rem; }

.btn-peligro {
    background: var(--primary-color);
    color: #fff;
    border: 1px solid var(--primary-color);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    font: inherit;
    font-size: 0.85rem;
}

.btn-peligro:hover { background: var(--primary-hover); }
.btn-peligro:focus-visible { outline: 2px solid var(--text-main); outline-offset: 2px; }

.ui-campo-etiqueta {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.ui-campo {
    width: 100%;
    padding: 0.6rem 0.75rem;
    background: var(--sunken);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-sm);
    color: var(--text-main);
    font: inherit;
}

.ui-campo:focus-visible { outline: 2px solid var(--text-accent); outline-offset: 1px; }

/* ---- Lista de espacios ---- */

.spaces-cabecera {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.spaces-titulo { margin: 0 0 0.25rem; font-size: 1.05rem; }
.spaces-sub { margin: 0; font-size: 0.84rem; color: var(--text-muted); }
.spaces-cabecera .btn-primary-sm { width: auto; flex: 0 0 auto; }

.spaces-lista {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: 0.9rem;
}

.space-card {
    display: flex;
    flex-direction: column;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-md);
    overflow: hidden;
}

.space-card-abrir {
    flex: 1;
    text-align: left;
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    padding: 1rem;
    cursor: pointer;
}

.space-card-abrir:hover { background: var(--secondary-color); }
.space-card-abrir:focus-visible { outline: 2px solid var(--text-accent); outline-offset: -2px; }
.space-card-abrir h4 { margin: 0 0 0.35rem; font-size: 0.98rem; }

.space-card-desc {
    margin: 0 0 0.6rem;
    font-size: 0.82rem;
    color: var(--text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.space-card-meta { font-size: 0.76rem; color: var(--text-muted); }

.space-card-acciones {
    display: flex;
    justify-content: flex-end;
    gap: 0.25rem;
    padding: 0.4rem 0.6rem;
    border-top: 1px solid var(--glass-border);
}

.spaces-vacio {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-muted);
}

.spaces-vacio i { font-size: 2.5rem; opacity: 0.25; margin-bottom: 0.75rem; }
.spaces-vacio p { margin: 0.2rem 0; }
.spaces-vacio-pista { font-size: 0.84rem; }

/* ---- Editor ---- */

.space-migas { margin-bottom: 0.75rem; }

.space-header { margin-bottom: 1rem; }
.space-header h2 { margin: 0 0 0.3rem; }
.space-desc { margin: 0 0 0.75rem; color: var(--text-muted); font-size: 0.88rem; }
.space-header-acciones .btn-secondary { width: auto; padding: 0.4rem 0.8rem; font-size: 0.8rem; }

.space-status,
.space-aviso-ajeno {
    margin: 0 0 0.75rem;
    font-size: 0.82rem;
    color: var(--text-muted);
    min-height: 1.15rem;   /* reservado: el texto de estado no empuja el documento al aparecer */
}

.space-aviso-ajeno {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.8rem;
    background: var(--sunken);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-sm);
    color: var(--text-main);
}

.space-bloques {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.space-bloque {
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-md);
    background: var(--glass-bg);
    padding: 0.6rem 0.8rem 0.8rem;
}

/* El bloque enfocado se distingue por borde Y por un anillo: nunca solo por color. */
.space-bloque:focus-visible {
    outline: 2px solid var(--text-accent);
    outline-offset: 2px;
}

.space-bloque-barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.space-bloque-tipo { font-size: 0.75rem; color: var(--text-muted); }
.space-bloque-acciones { display: flex; gap: 0.1rem; }

/* Las acciones aparecen al pasar el ratón, pero SIEMPRE están al enfocar con el teclado:
   si solo se mostraran con :hover, con teclado serían inalcanzables. */
.space-bloque-acciones { opacity: 0.35; transition: opacity 0.15s; }
.space-bloque:hover .space-bloque-acciones,
.space-bloque:focus-within .space-bloque-acciones { opacity: 1; }

.space-campo {
    width: 100%;
    background: transparent;
    border: none;
    color: var(--text-main);
    font: inherit;
    font-size: 0.92rem;
    line-height: 1.6;
    resize: none;
    overflow: hidden;
    padding: 0.15rem 0;
}

.space-campo:focus-visible { outline: 2px solid var(--text-accent); outline-offset: 3px; }
.space-campo::placeholder { color: var(--text-muted); opacity: 0.7; }

.space-campo-encabezado {
    font-family: 'Outfit', sans-serif;
    font-size: 1.15rem;
    font-weight: 600;
}

.space-separador {
    border: none;
    border-top: 1px solid var(--glass-border);
    margin: 0.5rem 0;
}

.space-vacio { color: var(--text-muted); font-size: 0.88rem; margin: 1rem 0 1.5rem; }

.space-anadir {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--glass-border);
}

.space-anadir-etiqueta { font-size: 0.8rem; color: var(--text-muted); }
.space-anadir .btn-secondary { width: auto; padding: 0.4rem 0.8rem; font-size: 0.8rem; }

.space-tipos { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.space-tipos .btn-secondary { width: auto; padding: 0.6rem 1rem; }

.space-atajos {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.4rem 1rem;
    margin: 0;
    font-size: 0.86rem;
}

.space-atajos dt { color: var(--text-accent); font-variant-numeric: tabular-nums; }
.space-atajos dd { margin: 0; color: var(--text-muted); }

/* ---- Conflicto de edición ---- */

.space-conflicto {
    margin-top: 0.6rem;
    padding: 0.7rem 0.85rem;
    background: var(--sunken);
    border: 1px solid var(--primary-color);
    border-left-width: 3px;
    border-radius: var(--border-radius-sm);
}

.space-conflicto-texto {
    margin: 0 0 0.6rem;
    font-size: 0.84rem;
    color: var(--text-main);
}

.space-conflicto-texto i { color: var(--primary-color); margin-right: 0.3rem; }

.space-conflicto-detalle summary {
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--text-accent);
}

.space-conflicto-ajeno {
    margin: 0.5rem 0 0;
    padding: 0.6rem;
    background: var(--sunken);
    border-radius: var(--border-radius-sm);
    font-size: 0.82rem;
    white-space: pre-wrap;
    max-height: 12rem;
    overflow: auto;
    color: var(--text-main);
}

.space-conflicto-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.7rem;
}

.space-conflicto-acciones button { width: auto; padding: 0.4rem 0.8rem; font-size: 0.8rem; }

/* Quien haya pedido menos movimiento no debería recibirlo por una animación decorativa. */
@media (prefers-reduced-motion: reduce) {
    .space-bloque-acciones { transition: none; }
}


/* ---- Reproductor del espacio ---- */

.space-player {
    margin-bottom: 1rem;
    padding: 0.8rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-md);
}

.space-player-cab {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.space-player-titulo { margin: 0; font-weight: 600; font-size: 0.9rem; }

/* El botón de cerrar no encoge por mucho que el título sea largo: es la salida. */
.space-player-cab .btn-close-sm { flex: 0 0 auto; }

.space-player-marco {
    position: relative;
    padding-top: 56.25%;          /* 16:9 sin saltos al cargar */
    background: var(--sunken);
    border-radius: var(--border-radius-sm);
    overflow: hidden;
}

.space-player-marco iframe,
.space-player-marco > div {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.space-player-acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.7rem;
}

.space-player-acciones button { width: auto; padding: 0.4rem 0.8rem; font-size: 0.8rem; }
.space-player-rango { font-size: 0.8rem; color: var(--text-accent); }

.space-player-aviso {
    margin: 0 0 1rem;
    padding: 0.6rem 0.85rem;
    background: var(--sunken);
    border: 1px solid var(--glass-border);
    border-left: 3px solid var(--text-accent);
    border-radius: var(--border-radius-sm);
    font-size: 0.82rem;
    color: var(--text-main);
}

/* ---- Bloques de cita ---- */

.cita { display: flex; flex-direction: column; gap: 0.6rem; }

.cita-cabecera {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    align-items: flex-start;
}

.cita-thumb {
    width: 120px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--border-radius-sm);
    flex: 0 0 auto;
}

.cita-datos { display: flex; flex-direction: column; gap: 0.15rem; min-width: 12rem; flex: 1; }
.cita-tipo { font-size: 0.74rem; color: var(--text-muted); }
.cita-titulo { font-weight: 600; font-size: 0.9rem; }
.cita-intervalo { font-size: 0.82rem; color: var(--text-accent); font-variant-numeric: tabular-nums; }

.cita-reproducir { width: auto; align-self: flex-start; padding: 0.4rem 0.85rem; font-size: 0.8rem; }

.cita-texto {
    margin: 0;
    padding: 0.6rem 0.9rem;
    border-left: 3px solid var(--text-accent);
    background: var(--sunken);
    border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
    font-size: 0.9rem;
    line-height: 1.6;
}

.cita-pregunta { margin: 0; font-weight: 600; font-size: 0.88rem; }
.cita-respuesta { margin: 0; font-size: 0.9rem; line-height: 1.6; white-space: pre-wrap; }
.cita-pie { margin: 0; font-size: 0.76rem; color: var(--text-muted); }
.cita-nota { font-size: 0.86rem; font-style: italic; }

/* Origen desaparecido: icono + texto, no solo color, y el contenido citado se queda. */
.cita-huerfana {
    flex-basis: 100%;
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-main);
    background: var(--sunken);
    border: 1px solid var(--primary-color);
    border-radius: var(--border-radius-sm);
    padding: 0.4rem 0.6rem;
}

.cita-huerfana i { color: var(--primary-color); }
.cita-renombrada { flex-basis: 100%; margin: 0; font-size: 0.78rem; color: var(--text-muted); }

/* ---- Definiciones y glosario ---- */

.definicion-termino { margin: 0; font-weight: 700; font-size: 0.95rem; }
.definicion-texto { margin: 0; font-size: 0.9rem; line-height: 1.6; }
.definicion-ia, .glosario-ia { font-size: 0.76rem; color: var(--text-muted); }
.definicion-ia { margin: 0; }

.glosario-lista { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1rem; }
.glosario-lista dt { font-weight: 600; font-size: 0.88rem; }
.glosario-lista dd { margin: 0; font-size: 0.88rem; color: var(--text-main); }

/* ---- Panel de material ---- */

.panel-material {
    width: 780px;
    max-width: 92vw;
    height: auto;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
    gap: 0.75rem;
}

.panel-material-cab { display: flex; align-items: center; justify-content: space-between; }
.panel-material-cab h3 { margin: 0; font-size: 1.02rem; }
.panel-material-filtros { display: flex; flex-direction: column; gap: 0.6rem; }
.panel-material-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; max-height: 6rem; overflow-y: auto; }
.panel-material-modo { display: flex; gap: 1rem; border: 0; padding: 0; margin: 0; font-size: 0.82rem; }
.panel-material-modo label { display: flex; align-items: center; gap: 0.3rem; }
.panel-material-estado { margin: 0; font-size: 0.8rem; color: var(--text-muted); min-height: 1.1rem; }

.panel-material-lista {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.material-video {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    padding: 0.6rem;
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-sm);
}

.material-thumb { width: 108px; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--border-radius-sm); }
.material-datos { flex: 1; min-width: 0; }
.material-datos h4 { margin: 0 0 0.2rem; font-size: 0.88rem; }
.material-meta { font-size: 0.76rem; color: var(--text-muted); }
.material-acciones { display: flex; flex-direction: column; gap: 0.3rem; }
.material-acciones button { width: auto; padding: 0.35rem 0.7rem; font-size: 0.76rem; white-space: nowrap; }

.material-respuesta {
    padding: 0.7rem;
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-sm);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.material-respuesta button { width: auto; align-self: flex-start; padding: 0.35rem 0.7rem; font-size: 0.76rem; }

/* ---- Selección de líneas de transcripción ---- */

.tr-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.tr-barra button { width: auto; padding: 0.35rem 0.7rem; font-size: 0.78rem; }

.tr-resumen { font-size: 0.8rem; color: var(--text-accent); font-variant-numeric: tabular-nums; }

/* La línea marcada se distingue del resto sin depender solo de la casilla, que es diminuta. */
.tr-linea:has(input:checked) {
    background: var(--sunken);
    border-radius: var(--border-radius-sm);
}

.tr-lineas { flex: 1; overflow-y: auto; border: 1px solid var(--glass-border); border-radius: var(--border-radius-sm); }
.tr-lista { list-style: none; margin: 0; padding: 0.4rem; }
.tr-linea { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.15rem 0.2rem; }
.tr-linea label { display: flex; gap: 0.6rem; align-items: baseline; cursor: pointer; font-size: 0.86rem; }
.tr-linea:hover { background: var(--secondary-color); border-radius: var(--border-radius-sm); }
.tr-marca { color: var(--text-accent); font-size: 0.78rem; font-variant-numeric: tabular-nums; min-width: 3.4rem; }

.rango-campos { display: flex; gap: 0.75rem; }
.rango-campos > div { flex: 1; }

/* ---- Diálogo de exportación ---- */

.export-caja { max-width: 34rem; }
.export-intro { margin: 0 0 0.9rem; font-size: 0.88rem; color: var(--text-muted); }

.export-formatos { list-style: none; margin: 0 0 0.9rem; padding: 0; display: flex;
    flex-direction: column; gap: 0.5rem; }

.export-opcion {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    text-align: left;
    padding: 0.7rem 0.9rem;
    background: var(--secondary-color);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-sm);
    color: var(--text-main);
    cursor: pointer;
}

.export-opcion:hover:not(:disabled) { border-color: var(--text-accent); }
/* Un botón deshabilitado tiene que verse deshabilitado: mientras se genera el archivo, los tres
   dejan de responder y sin esto parecen igual de pulsables. */
.export-opcion:disabled { opacity: 0.55; cursor: progress; }
.export-nombre { font-weight: 600; font-size: 0.92rem; }
.export-ayuda { font-size: 0.8rem; color: var(--text-muted); }
.export-cargando { font-size: 0.85rem; color: var(--text-muted); }

.export-estado { margin: 0 0 0.6rem; font-size: 0.85rem; color: var(--text-accent); min-height: 1.2em; }
.export-estado-error { color: var(--primary-color); }
.export-enlace { margin: 0 0 0.6rem; }
.export-guardar { display: inline-flex; align-items: center; gap: 0.4rem; width: auto;
    text-decoration: none; padding: 0.45rem 0.9rem; }


/* ---- Imágenes del estudio ---- */

.imagen-bloque { border-left: 0; }
.imagen-figura { margin: 0; }
.imagen-figura img {
    max-width: 100%;
    height: auto;              /* respeta el alto explícito sin deformar la imagen */
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--glass-border);
    display: block;
}
/* El tamaño lo elige quien escribe. `width: fit-content` hace que el pie y el selector se ciñan a
   la imagen en vez de estirarse por todo el ancho, que es lo que hace que un logo pequeño parezca
   una portada. Nunca se agranda por encima del original: ampliar no añade información, solo borra. */
.imagen-figura { width: fit-content; max-width: 100%; }
.imagen-figura.tam-pequeno { max-width: min(14rem, 100%); }
.imagen-figura.tam-mediano { max-width: min(28rem, 100%); }
.imagen-figura.tam-grande { max-width: 100%; }

.imagen-figura figcaption { margin-top: 0.35rem; }

/* Selector de tamaño: radios de verdad, para que las flechas los recorran y el lector de pantalla
   anuncie el grupo. Se pinta como una fila de pastillas, no como una lista de formulario. */
.imagen-tamano {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    border: 0;
    margin: 0.4rem 0 0;
    padding: 0;
}
.imagen-tamano legend { font-size: 0.78rem; color: var(--text-muted); padding: 0 0.4rem 0 0; float: left; }
.imagen-tamano label {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    padding: 0.2rem 0.55rem;
    border: 1px solid var(--glass-border);
    border-radius: 999px;
    cursor: pointer;
}
/* La opción activa se distingue por borde y fondo, no solo por el punto del radio: el punto es
   diminuto y con poca vista no se ve cuál está elegida. */
.imagen-tamano label:has(input:checked) {
    border-color: var(--text-accent);
    background: var(--sunken);
    font-weight: 600;
}
.imagen-tamano label:focus-within { outline: 2px solid var(--text-accent); outline-offset: 2px; }
.imagen-pie { font-size: 0.85rem; font-style: italic; }

/* El texto alternativo se ve mientras se edita: si está a la vista, se corrige; si está escondido
   en un diálogo, se queda como salió. */
.imagen-alt {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: baseline;
    margin: 0.35rem 0 0;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.imagen-campos { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 0.6rem; }
.imagen-campos .campo { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; }
.imagen-campos .campo textarea,
.imagen-campos .campo input[type="text"] {
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-sm);
    background: var(--secondary-color);
    color: var(--text-main);
    font: inherit;
}
/* Un campo deshabilitado (el alt cuando la imagen es decorativa) tiene que verse deshabilitado. */
.imagen-campos textarea:disabled { opacity: 0.5; cursor: not-allowed; }
.imagen-campos .campo-check { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.85rem; }
.campo-ayuda { margin: 0; font-size: 0.78rem; color: var(--text-muted); }

.imagen-previa { margin-bottom: 0.6rem; }
.imagen-previa img { max-width: 100%; max-height: 12rem; border-radius: var(--border-radius-sm); }

/* ---- Impresión ----
 * Respaldo real, no adorno: si la exportación del servidor no está disponible (WeasyPrint caído,
 * red del servidor), imprimir la página desde el navegador sigue dando un documento decente.
 * Se quita todo lo que sirve para editar, que en papel es ruido y no se puede pulsar. */

/* ------------------------------------------------------------------ fuentes externas */

.enlace-tarjeta {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}
.enlace-imagen {
    width: 7rem;
    height: 5rem;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
    background: var(--sunken);
}
.enlace-datos { min-width: 0; }   /* sin esto, una URL larga estira la tarjeta y rompe la columna */
.enlace-titulo {
    font-weight: 600;
    color: var(--text-accent);
    text-decoration: underline;   /* subrayado, no solo color: el color no lo distingue todo el mundo */
    overflow-wrap: anywhere;
}
.enlace-descripcion {
    margin: 0.3rem 0 0;
    font-size: 0.88rem;
    color: var(--text-muted);
    /* La descripción de una página puede ser larguísima; se acota a tres líneas y el documento
       sigue siendo legible. El texto completo está en el enlace, a un clic. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.enlace-pie { margin: 0.35rem 0 0; font-size: 0.78rem; color: var(--text-muted); }
.enlace-sin-preview {
    margin: 0.35rem 0 0;
    font-size: 0.78rem;
    color: var(--text-muted);
    font-style: italic;
}
/* Lo que se va a guardar, dentro del asistente: se ve antes de insertar nada. */
.enlace-previa {
    margin: 0.2rem 0 0.8rem;
    padding: 0.7rem;
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    background: var(--sunken);
}

/* --------------------------------------------------------------- OneDrive (fase 7) */

.archivo-tarjeta {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}
.archivo-miniatura {
    width: 6rem;
    height: 6rem;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
    background: var(--sunken);
}
.archivo-icono {
    font-size: 2.4rem;
    width: 6rem;
    text-align: center;
    color: var(--text-muted);
    flex-shrink: 0;
}
.archivo-datos { min-width: 0; }
.archivo-nombre {
    font-weight: 600;
    color: var(--text-accent);
    text-decoration: underline;   /* como en las fuentes externas: el color solo no basta */
    overflow-wrap: anywhere;
}
span.archivo-nombre { color: var(--text-main); text-decoration: none; }   /* sin enlace, no finge serlo */
.archivo-pie { margin: 0.35rem 0 0; font-size: 0.78rem; color: var(--text-muted); }
/* El aviso de propiedad NO se atenúa como una nota al pie: es lo que explica por qué el enlace
   puede no abrir, y quien lo necesita es justo quien no es el dueño del archivo. */
.archivo-propiedad {
    margin: 0.4rem 0 0;
    font-size: 0.82rem;
    color: var(--text-main);
    background: var(--sunken);
    border-left: 3px solid var(--text-muted);
    padding: 0.35rem 0.5rem;
    border-radius: 0 4px 4px 0;
}

/* --- El visor a demanda -------------------------------------------------- */

/* El visor cuelga aquí, fuera de `.archivo-tarjeta`, para ocupar todo el ancho del bloque en vez de
   quedar encajonado en la columna de datos junto a la miniatura. */
.archivo-con-visor { min-width: 0; }

.archivo-ver {
    margin-top: 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.7rem;
    font-size: 0.82rem;
    font-family: inherit;
    color: var(--text-main);
    background: var(--sunken);
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    cursor: pointer;
}
.archivo-ver:hover { border-color: var(--text-accent); color: var(--text-accent); }
.archivo-ver:focus-visible { outline: 2px solid var(--text-accent); outline-offset: 2px; }

.archivo-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}
.archivo-acciones .archivo-ver { margin-top: 0.5rem; }

/* --- Preguntarle a la IA sobre el archivo --- */

.archivo-ia-panel {
    margin-top: 0.6rem;
    padding: 0.7rem;
    background: var(--sunken);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
}
.archivo-ia-campo { width: 100%; }
.archivo-ia-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.archivo-ia-estado {
    margin: 0 0 0.5rem;
    font-size: 0.82rem;
    color: var(--text-main);
}
.archivo-ia-estado:empty { display: none; }
/* Retirar el permiso tiene que verse tanto como concederlo: si se esconde, esto es una trampa de
   sentido único. Discreto por ser secundario, nunca invisible ni del color del fondo. */
.archivo-ia-retirar {
    margin-top: 0.6rem;
    padding: 0;
    background: none;
    border: none;
    font-family: inherit;
    font-size: 0.8rem;
    color: var(--text-main);
    text-decoration: underline;
    cursor: pointer;
}
.archivo-ia-retirar:focus-visible { outline: 2px solid var(--text-accent); outline-offset: 2px; }

.archivo-visor { margin-top: 0.6rem; }
.archivo-visor-estado {
    margin: 0 0 0.4rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}
.archivo-visor-estado:empty { display: none; }
.archivo-visor-error { color: var(--text-main); }
.archivo-visor-error + .archivo-visor-lienzo a { font-size: 0.82rem; }

.archivo-visor-lienzo { display: block; }
/* Alturas en unidades relativas y acotadas por la ventana: así el visor sigue cabiendo con el texto
   al 200 % y no se come la pantalla en un portátil. */
.archivo-visor-pdf {
    width: 100%;
    height: min(70vh, 40rem);
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    background: var(--sunken);
}
.archivo-visor-imagen {
    max-width: 100%;
    max-height: min(70vh, 40rem);
    border-radius: 6px;
    background: var(--sunken);
}
.archivo-visor-audio { width: 100%; }
.archivo-visor-video {
    width: 100%;
    max-height: min(70vh, 40rem);
    border-radius: 6px;
    background: #000;
}
.archivo-visor-texto {
    margin: 0;
    max-height: min(50vh, 30rem);
    overflow: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: 0.82rem;
    padding: 0.6rem 0.8rem;
    background: var(--sunken);
    border: 1px solid var(--glass-border);
    border-radius: 6px;
}
.archivo-visor-texto:focus-visible { outline: 2px solid var(--text-accent); outline-offset: 2px; }

/* La advertencia previa a conectar no se atenúa como el resto de la ayuda: es lo que la persona
   necesita leer ANTES de autorizar, no una nota al pie que se descubre después. */
.od-advertencia {
    color: var(--text-main);
    background: var(--sunken);
    border-left: 3px solid var(--text-accent);
    padding: 0.5rem 0.6rem;
    border-radius: 0 4px 4px 0;
}

.od-caja { max-width: 44rem; }
.od-cuenta button { padding: 0.25rem 0.6rem; font-size: 0.8rem; }
.od-cuenta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 0.6rem;
    flex-wrap: wrap;
}
.od-barra { display: flex; gap: 0.5rem; margin-bottom: 0.6rem; }
.od-barra .ui-campo { flex: 1; min-width: 0; }
.od-migas {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
    overflow-wrap: anywhere;
}
.od-miga {
    background: none;
    border: 0;
    padding: 0;
    color: var(--text-accent);
    text-decoration: underline;
    cursor: pointer;
    font: inherit;
}
.od-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 22rem;
    overflow-y: auto;
    border: 1px solid var(--glass-border);
    border-radius: 8px;
}
.od-lista li + li { border-top: 1px solid var(--glass-border); }
/* Cada fila es un <button> de verdad: el teclado, el foco y el lector de pantalla vienen dados.
   Un <div> con role="button" habría que enseñarle a todo eso, y siempre se olvida algo. */
.od-fila {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.55rem 0.7rem;
    background: none;
    border: 0;
    color: var(--text-main);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.od-fila:hover { background: var(--sunken); }
/* Contorno grueso y separado: sobre una fila resaltada, un foco fino se confunde con el hover —
   y quien navega con teclado necesita distinguirlos sin dudar. */
.od-fila:focus-visible {
    outline: 2px solid var(--text-accent);
    outline-offset: -2px;
    background: var(--sunken);
}
.od-fila i { width: 1.2rem; text-align: center; color: var(--text-muted); flex-shrink: 0; }
.od-fila-nombre { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.od-fila-detalle { font-size: 0.76rem; color: var(--text-muted); flex-shrink: 0; }
.od-vacio { padding: 0.9rem; font-size: 0.85rem; color: var(--text-muted); text-align: center; }
.od-lista[aria-busy="true"] { opacity: 0.55; }

@media (max-width: 600px) {
    .archivo-miniatura, .archivo-icono { width: 4rem; }
    .archivo-miniatura { height: 4rem; }
    .od-fila-detalle { display: none; }   /* el nombre manda; el detalle sigue en el aria-label */
}

@media print {
    .space-migas,
    .space-header-acciones,
    .space-bloque-barra,
    .space-anadir,
    .space-player,
    .space-player-aviso,
    .space-status,
    .space-aviso-ajeno,
    .cita-reproducir,
    .ui-avisos,
    .modal { display: none !important; }

    .space-bloques { list-style: none; padding: 0; }
    .space-bloque { break-inside: avoid; page-break-inside: avoid; border: 0; padding: 0;
        margin: 0 0 0.8rem; }

    /* Los campos de edición se imprimen como texto: en papel un recuadro gris no significa nada. */
    .space-campo, textarea.space-campo {
        border: 0; background: none; resize: none; padding: 0;
        height: auto; overflow: visible; color: #000;
    }

    /* La barra de formato no se imprime: es un mando, no contenido. */
    .rt-barra { display: none !important; }

    /* En papel manda SIEMPRE la paleta del tema claro, aunque se imprima desde el tema oscuro:
       un #ff9a94 pensado para fondo negro da 2:1 sobre blanco y no hay quien lo lea. */
    :root, :root[data-theme="light"] {
        --rt-rojo: #b3261e;
        --rt-naranja: #8a4b00;
        --rt-amarillo: #6b5300;
        --rt-verde: #0f6b39;
        --rt-azul: #0b4fbd;
        --rt-morado: #6b21a8;
        --rt-gris: #53606f;
    }

    .cita { border-left: 2px solid #999; padding-left: 0.6rem; }
    .imagen-bloque { border-left: 0; padding-left: 0; }
    .imagen-figura { break-inside: avoid; page-break-inside: avoid; }
    .imagen-alt, .imagen-tamano { display: none; }

    /* En papel la imagen de previsualización no aporta nada y se come el espacio; el título, el
       sitio y la fecha de consulta sí son la cita. La dirección la añade la regla de abajo. */
    .enlace-imagen { display: none; }
    .enlace-titulo { color: #000; }
    .enlace-descripcion { -webkit-line-clamp: none; overflow: visible; display: block; }

    /* Un enlace en papel sin su dirección es una palabra subrayada y nada más. */
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #444; }

    body { background: #fff; color: #000; }
}



/* Campo de texto de UI.pedir (sustituto de prompt) */
.ui-pedir-etiqueta {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.9rem;
    font-weight: 600;
}
.ui-pedir-campo {
    width: 100%;
    padding: 0.55rem 0.7rem;
    margin-bottom: 1rem;
    border-radius: 8px;
    font-size: 0.95rem;
    color: var(--text-main);
    background: rgba(var(--tint), 0.06);
    border: 1px solid var(--glass-border);
}
.ui-pedir-campo:focus-visible {
    outline: 2px solid var(--text-accent);
    outline-offset: 1px;
    border-color: var(--text-accent);
}


/* --- Recortar un fragmento para compartirlo --- */

.cita-acciones { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }

.recorte-caja { max-width: 26rem; }
.recorte-titulo { margin: 0 0 0.6rem; font-size: 1rem; }
.recorte-fuente { margin: 0 0 0.2rem; font-weight: 600; font-size: 0.9rem; }
.recorte-intervalo { margin: 0 0 0.9rem; font-size: 0.85rem; color: var(--text-soft); }
.recorte-vertical {
    display: flex; align-items: center; gap: 0.5rem;
    margin-bottom: 0.9rem; font-size: 0.88rem;
}
/* El aviso de "demasiado largo" sale ANTES de pulsar, no tras esperar la descarga. */
.recorte-aviso {
    margin: 0 0 0.9rem; padding: 0.55rem 0.7rem; border-radius: 8px;
    font-size: 0.85rem; line-height: 1.45;
    background: rgba(255, 176, 32, 0.12);
    border: 1px solid rgba(255, 176, 32, 0.45);
}


/* ============================================================================
   Texto enriquecido dentro de un bloque (`texto-rico.js`)

   Los colores se definen DOS VECES —en `:root` y en `:root[data-theme="light"]`— porque un color
   elegido sobre el fondo negro del tema oscuro es ilegible sobre el blanco del claro. Los catorce
   valores están comprobados >= 4.5:1 contra el fondo real del campo en su tema, y los del tema
   claro son además los que se usan al exportar, porque el estudio se lee e imprime en papel.
   Son los mismos hexadecimales que `PALETA` en `texto_rico.py`: si cambian aquí, cambian allí.
   ========================================================================== */

:root {
    --rt-rojo: #ff9a94;
    --rt-naranja: #ffc266;
    --rt-amarillo: #f2d357;
    --rt-verde: #7fdba0;
    --rt-azul: #8fc4ff;
    --rt-morado: #d6b0ff;
    --rt-gris: #b9c0cb;
}

:root[data-theme="light"] {
    --rt-rojo: #b3261e;
    --rt-naranja: #8a4b00;
    --rt-amarillo: #6b5300;
    --rt-verde: #0f6b39;
    --rt-azul: #0b4fbd;
    --rt-morado: #6b21a8;
    --rt-gris: #53606f;
}

.rt-c-rojo { color: var(--rt-rojo); }
.rt-c-naranja { color: var(--rt-naranja); }
.rt-c-amarillo { color: var(--rt-amarillo); }
.rt-c-verde { color: var(--rt-verde); }
.rt-c-azul { color: var(--rt-azul); }
.rt-c-morado { color: var(--rt-morado); }
.rt-c-gris { color: var(--rt-gris); }

/* Tamaños RELATIVOS: siguen al zoom del navegador y a la preferencia de tamaño de letra de quien
   lee. En píxeles la ignorarían, que es justo lo que no queremos. */
.rt-t-pequeno { font-size: 0.875em; }
.rt-t-grande { font-size: 1.25em; }

.rt-f-serifa { font-family: Georgia, 'Liberation Serif', 'Times New Roman', serif; }
.rt-f-mono { font-family: 'Liberation Mono', 'DejaVu Sans Mono', Consolas, monospace; }

/* --- el campo --- */

.rt { position: relative; }

.rt-area { min-height: 1.6em; white-space: pre-wrap; word-break: break-word; }
.rt-area code {
    font-family: 'Liberation Mono', 'DejaVu Sans Mono', Consolas, monospace;
    font-size: 0.92em; background: var(--sunken); padding: 0.05em 0.25em; border-radius: 4px;
}
.rt-area a { color: var(--text-accent); text-decoration: underline; }

/* El placeholder de un `contenteditable` no existe: lo pinta el CSS cuando el campo está vacío.
   `::before` y no `::after` para que el cursor quede delante del texto de ayuda. */
.rt-area.rt-vacio::before {
    content: attr(data-placeholder);
    color: var(--text-muted);
    opacity: 0.7;
    pointer-events: none;
}

/* --- la barra ---
   Aparece al enfocar el campo y va anclada a él. Nada de burbuja flotante sobre la selección: una
   burbuja que solo existe al arrastrar con el ratón es inalcanzable con el teclado. */

/* `display:flex` gana a la regla de fabrica de `[hidden]`, asi que la barra se veia SIEMPRE, en
   todos los bloques a la vez. Hay que decirlo aparte. */
.rt-barra[hidden] { display: none; }

.rt-barra {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem;
    margin-bottom: 0.3rem;
    padding: 0.2rem;
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    background: var(--panel, rgba(var(--panel-rgb), 0.9));
    position: relative;
}

.rt-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.9rem; height: 1.9rem;
    border: 0; border-radius: 6px;
    background: transparent; color: var(--text-main);
    font-size: 0.82rem; cursor: pointer;
}
.rt-btn:hover { background: var(--secondary-hover); }
/* El foco se ve por un anillo propio, no solo por el color: el del navegador desaparece sobre
   fondos translúcidos. */
.rt-btn:focus-visible { outline: 2px solid var(--text-accent); outline-offset: 1px; }
/* Un botón activo se distingue por FONDO y por borde, no solo por color de texto. */
.rt-btn-activo {
    background: var(--secondary-hover);
    box-shadow: inset 0 0 0 1px var(--text-accent);
}

/* --- los menús (color, tamaño, tipografía) --- */

.rt-menu {
    position: absolute;
    top: calc(100% + 0.2rem);
    left: 0;
    z-index: 30;
    /* Ancho FIJO: los botones de dentro van al 100% y, sin esto, estiraban el menu hasta el ancho
       del bloque entero — un menu de siete colores ocupando toda la pantalla. */
    width: 17rem;
    max-width: calc(100vw - 2rem);
    padding: 0.4rem;
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    background: rgb(var(--panel-rgb));
    box-shadow: 0 8px 24px var(--glass-shadow);
}

.rt-menu-op {
    display: block; width: 100%; text-align: left;
    padding: 0.35rem 0.5rem; border: 0; border-radius: 6px;
    background: transparent; color: var(--text-main);
    font: inherit; font-size: 0.88rem; cursor: pointer;
}
.rt-menu-op:hover { background: var(--secondary-hover); }
.rt-menu-op:focus-visible { outline: 2px solid var(--text-accent); outline-offset: -2px; }

.rt-paleta { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0.3rem 0; }
.rt-color {
    width: 1.9rem; height: 1.9rem;
    border: 1px solid var(--glass-border); border-radius: 6px;
    background: var(--sunken);
    font-weight: 700; font-size: 0.95rem; cursor: pointer;
}
.rt-color:focus-visible { outline: 2px solid var(--text-accent); outline-offset: 1px; }

.rt-otro-color {
    margin-top: 0.4rem; padding-top: 0.4rem;
    border-top: 1px solid var(--glass-border);
    font-size: 0.85rem;
}
.rt-otro-color label { display: block; margin-bottom: 0.25rem; color: var(--text-muted); }
.rt-otro-color input[type="color"] {
    width: 100%; height: 2rem; padding: 0; border: 1px solid var(--glass-border);
    border-radius: 6px; background: transparent; cursor: pointer;
}
.rt-contraste { margin: 0.35rem 0 0; font-size: 0.78rem; line-height: 1.4; color: var(--text-muted); }
/* El aviso de contraste flojo no se comunica solo por color: lleva su texto y un icono. */
.rt-contraste-flojo { color: var(--text-main); }
.rt-contraste-flojo::before { content: '\26A0\FE0F\00A0'; }