/* ────────────────────────────────────────────────────────────────────────
   Section annotations — overlay over the embedded org CustomHtml iframe.
   The overlay lives in the parent page (the iframe is opaque-origin / sandboxed),
   absolutely positioned over the iframe container. Coordinates are 0..1 fractions
   of the container so markers track resize.
   ──────────────────────────────────────────────────────────────────────── */

.sa-layout {
    /* Height comes from .embedded-html-page (calc(100vh - 64px - 2rem) in theme.css).
       Do NOT set height:100% here: section-annotations.css loads AFTER theme.css with
       the same specificity, so height:100% would override the calc and resolve against
       a height-less ancestor — collapsing the iframe to ~0. Only own the flex column. */
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.sa-body {
    display: flex;
    flex: 1;
    min-height: 0;
}

/* The positioned wrapper around the iframe + overlay. This is the SCROLL
   container: the iframe is sized to its full content height by JS (via the
   'sa-height' postMessage), so wheel-scroll moves this box and the overlay —
   which is position:absolute; inset:0 — spans the full (tall) iframe, keeping
   annotation coordinates aligned with the scrolled content. */
.sa-stage {
    position: relative;
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    /* El ancho util no cambia cuando aparece o desaparece la barra vertical. Sin
       esto, ajustar a la pantalla puede quitar la barra, ensanchar el escenario
       ~15 px y dar una respuesta distinta la segunda vez que se pulsa. */
    scrollbar-gutter: stable;
}

/* Content-sized wrapper INSIDE the scroll container. It grows to the iframe's
   full content height (set by the JS auto-height bridge), so the overlay —
   position:absolute; inset:0 of this positioned box — spans the ENTIRE content
   instead of just the scroll viewport. That is what makes annotation 0..1
   coordinates content-relative: a highlight saved at the bottom of a long,
   unpaginated dashboard re-renders at the bottom, not on the first screen. */
.sa-canvas {
    position: relative;
    width: 100%;
    --sa-zoom: 1;
}

/* Zoom: escala VISUAL aplicada en el padre, sin reflujo dentro del iframe. El
   documento se maqueta UNA vez a --sa-content-w y el transform solo rasteriza a
   otra escala, asi que --sa-content-h no depende del zoom.
   Por eso las anotaciones sobreviven: son fracciones 0..1 de ESTA caja, y la caja
   y el dibujo escalan con el mismo factor y el mismo origen, luego un marcador
   guardado sigue cayendo sobre el mismo pixel de contenido para cualquier zoom.
   Con `zoom` dentro del iframe no se cumpliria: re-resuelve media queries y el
   texto se re-vuelca, con lo que la fraccion vertical de un parrafo cambia.

   EL TRANSFORM VA EN EL IFRAME, NUNCA EN ESTA CAJA. Si escalase el canvas,
   escalarian con el los marcadores, sus insignias, la tarjeta de vista previa y
   el editor de 460 px: a 0,4x el formulario deja de poder usarse. */
.sa-canvas.sa-zoomable {
    width: calc(var(--sa-content-w) * var(--sa-zoom));
    height: calc(var(--sa-content-h) * var(--sa-zoom));
    /* Centra cuando cabe; sin efecto cuando desborda. NUNCA `height: 100%`:
       inflaria la caja del overlay y bajaria cada marcador respecto al contenido
       que anota. */
    margin-inline: auto;
}

.sa-canvas.sa-zoomable > iframe {
    width: var(--sa-content-w);
    height: var(--sa-content-h);
    /* El respaldo de 400 px es un valor PRE-escala: aqui ya manda la geometria
       medida, y dejarlo activo daria un alto minimo distinto en cada zoom. */
    min-height: 0;
    transform: scale(var(--sa-zoom));
    transform-origin: 0 0;
}

/* La insignia NO necesita contra-escala: `.sa-marker` mide en porcentajes de la
   caja —y por eso encoge con el documento que anota, que es lo correcto— pero la
   insignia esta en pixeles absolutos, asi que ya se queda igual a cualquier zoom.
   Contra-escalarla la agrandaria justo al alejar. Mismo motivo por el que la
   tarjeta de vista previa (320 px) y el editor (460 px) siguen siendo legibles. */

.sa-stage iframe {
    width: 100%;
    /* Height is driven by JS (sectionAnnotations.registerAutoHeight) once the
       iframe posts its content height. min-height is the fallback until then. */
    min-height: 400px;
    border: 0;
    display: block;
}

/* Iframe is non-interactive while annotating so drags land on the overlay. */
.sa-stage.sa-annotating iframe {
    pointer-events: none;
}

/* Overlay covers the iframe. Transparent + click-through unless annotating. */
.sa-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.sa-overlay.sa-active {
    pointer-events: auto;
    cursor: crosshair;
    background: rgba(0, 0, 0, 0.02);
}

/* Selection + markers sit on top of a document we do not control: a dark hero,
   a white table, a photo. A single flat border in the brand colour vanished on
   the dark covers these offers open with. Both shapes use the same two-ring
   recipe instead — the brand ring for identity, a translucent white ring just
   outside it for separation — so the rectangle keeps its edge on anything. */

.sa-rubberband {
    position: absolute;
    border-radius: 6px;
    background: rgba(79, 70, 229, 0.14);
    box-shadow:
        0 0 0 1.5px var(--rz-primary, #4f46e5),
        0 0 0 3.5px rgba(255, 255, 255, 0.55);
    pointer-events: none;
}

.sa-marker {
    position: absolute;
    border-radius: 6px;
    background: rgba(79, 70, 229, 0.10);
    box-shadow:
        0 0 0 1.5px var(--rz-primary, #4f46e5),
        0 0 0 3.5px rgba(255, 255, 255, 0.45);
    pointer-events: auto;
    cursor: pointer;
    box-sizing: border-box;
    transition: background 0.14s ease, box-shadow 0.14s ease;
}

.sa-marker:hover {
    background: rgba(79, 70, 229, 0.18);
}

.sa-marker.sa-selected {
    background: rgba(79, 70, 229, 0.20);
    box-shadow:
        0 0 0 2px var(--rz-primary, #4f46e5),
        0 0 0 5px rgba(79, 70, 229, 0.28);
}

.sa-marker.sa-resolved {
    background: rgba(100, 116, 139, 0.10);
    box-shadow:
        0 0 0 1.5px var(--rz-text-disabled-color, #94a3b8),
        0 0 0 3.5px rgba(255, 255, 255, 0.35);
}

/* The badge hangs OUTSIDE the top-left corner instead of straddling it: sitting
   on the corner it covered the very content the note was about. pointer-events
   off so it can never eat the marker's own click. */
.sa-marker-badge {
    position: absolute;
    top: -11px;
    left: -11px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--rz-primary, #4f46e5);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(15, 23, 42, 0.28);
    pointer-events: none;
}

.sa-marker.sa-resolved .sa-marker-badge {
    background: var(--rz-text-disabled-color, #94a3b8);
}

/* Floating rich comment editor anchored near the drawn rectangle. Wider than a
   plain textarea to fit the full RichCommentEditor toolbar. */
.sa-new-comment {
    position: absolute;
    z-index: 10;
    width: 460px;
    max-width: 92%;
    background: var(--rz-base-background-color, #fff);
    border: 1px solid var(--rz-base-300, #d1d5db);
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
    padding: 0.75rem;
    pointer-events: auto;
}

.sa-new-comment-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

/* Side panel listing the annotations. */
.sa-panel {
    width: 320px;
    max-width: 40%;
    flex-shrink: 0;
    border-left: 1px solid var(--rz-base-300, #d1d5db);
    overflow-y: auto;
    padding: 0.75rem;
    background: var(--rz-base-50, #fafafa);
}

.sa-panel-title {
    font-weight: 600;
    font-size: 0.95rem;
    margin: 0 0 0.75rem 0;
}

.sa-panel-empty {
    color: var(--rz-text-secondary-color, #6b7280);
    font-size: 0.85rem;
    padding: 1rem 0.25rem;
}

.sa-item {
    border: 1px solid var(--rz-base-200, #e5e7eb);
    border-radius: 8px;
    padding: 0.6rem;
    margin-bottom: 0.6rem;
    background: var(--rz-base-background-color, #fff);
    cursor: pointer;
}

.sa-item:hover {
    border-color: var(--rz-base-300, #cbd5e1);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

/* Selected gets a left accent rail, not a full ring: the ring competed with the
   marker's own highlight on the document and the two read as different states. */
.sa-item.sa-item-selected {
    border-color: var(--rz-primary, #4f46e5);
    box-shadow: inset 3px 0 0 0 var(--rz-primary, #4f46e5);
}

.sa-item-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.35rem;
}

.sa-item-num {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--rz-primary, #2563eb);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sa-item.sa-item-resolved .sa-item-num {
    background: var(--rz-text-disabled-color, #9ca3af);
}

.sa-item-author {
    font-weight: 600;
    font-size: 0.82rem;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Inline comment preview in the side panel. Capped in height so a long comment
   or a pasted screenshot doesn't blow up the list; a bottom fade hints there is
   more, and "Ver completo" opens the full dialog. */
.sa-item-comment {
    position: relative;
    font-size: 0.85rem;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--rz-text-color, #111827);
    max-height: 120px;
    overflow: hidden;
}

/* Soft fade at the bottom of a truncated comment. */
.sa-item-comment::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 28px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--rz-base-background-color, #fff));
    pointer-events: none;
}

.sa-item-comment img {
    max-width: 100%;
    height: auto;
}

/* Igual que en tareas e incidencias: una tabla pegada desde un correo lleva
   anchos fijos y se sale de la tarjeta del comentario. */
.sa-item-comment table,
.sa-preview-comment table {
    display: block;
    width: max-content;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
}

.sa-item-comment,
.sa-preview-comment {
    overflow-wrap: anywhere;
}

.sa-item.sa-item-resolved .sa-item-comment {
    color: var(--rz-text-secondary-color, #6b7280);
    text-decoration: line-through;
}

/* Tres acciones (ver / resolver / eliminar) no caben en una fila de 320 px con
   etiqueta de texto: sin wrap, "Resolver" y "Eliminar" se salian de la tarjeta y
   quedaban cortadas por el borde del panel. */
/* Icon-only, with the label as a tooltip. Three text buttons (ver / resolver /
   eliminar) never fit one 320 px row: they wrapped into a three-storey block or
   spilled past the panel edge. */
.sa-item-actions {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    margin-top: 0.5rem;
    opacity: 0;
    transition: opacity 0.14s ease;
}

.sa-item:hover .sa-item-actions,
.sa-item:focus-within .sa-item-actions,
.sa-item.sa-item-selected .sa-item-actions {
    opacity: 1;
}

@media (hover: none) {
    .sa-item-actions { opacity: 1; }
}

/* ────────────────────────────────────────────────────────────────────────
   Hover preview card — floating over the overlay near a marker. Read-only,
   pointer-events:none so it never steals the drag in annotate mode.
   ──────────────────────────────────────────────────────────────────────── */
.sa-preview {
    position: absolute;
    z-index: 11;
    width: 320px;
    max-width: 320px;
    max-height: 220px;
    overflow: auto;
    pointer-events: none;
    background: var(--rz-base-background-color, #fff);
    border: 1px solid var(--rz-base-300, #d1d5db);
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
    padding: 0.6rem 0.7rem;
}

.sa-preview-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.35rem;
}

.sa-preview-author {
    font-weight: 600;
    font-size: 0.82rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sa-preview-comment {
    font-size: 0.85rem;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--rz-text-color, #111827);
}

.sa-preview-comment img {
    max-width: 100%;
    height: auto;
}

/* ────────────────────────────────────────────────────────────────────────
   Full-view read-only dialog (SectionAnnotationViewDialog).
   ──────────────────────────────────────────────────────────────────────── */
.sa-view-dialog {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 70vh;
}

.sa-view-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--rz-text-secondary-color, #6b7280);
    font-size: 0.85rem;
}

.sa-view-author {
    font-weight: 600;
    color: var(--rz-text-color, #111827);
}

.sa-view-date {
    margin-left: auto;
}

.sa-view-comment {
    flex: 1;
    overflow: auto;
    font-size: 0.92rem;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--rz-text-color, #111827);
}

/* Screenshots at natural size (but never wider than the dialog). */
.sa-view-comment img {
    max-width: 100%;
    height: auto;
}

.sa-view-actions {
    display: flex;
    justify-content: flex-end;
}


/* ────────────────────────────────────────────────────────────────────────
   Immersive reading mode
   These sections carry client-facing documents authored for a full page. In
   the normal shell they lose the sidebar's width AND the 320px comments rail,
   so a deck laid out for ~1400px renders at ~1100px and reads like a preview
   of itself. Immersive pins the page over the shell and hands the document the
   whole viewport.

   z-index 900 is deliberate: above the portal chrome (header/sidebar sit below
   the Radzen dialog mask at 1000) and BELOW that mask, so the annotation dialogs
   ("Ver completo", the delete confirm) still open on top instead of behind an
   opaque layer the user cannot dismiss.
   ──────────────────────────────────────────────────────────────────────── */

/* Radzen pone `transform: translateZ(0)` en `.rz-layout .rz-body`
   (material-base.css). Un transform —aunque sea la identidad— convierte a ese
   contenedor en el bloque contenedor de CUALQUIER `position: fixed` que cuelgue
   de él: sin esto, la capa inmersiva se anclaba al cuerpo y salía desplazada el
   ancho del carril y el alto de la cabecera, con 84 px de más asomando por la
   derecha como scroll horizontal. Se anula SOLO mientras hay una sección en
   inmersivo, y vuelve sola al salir. Mismo trampa documentada en
   dynamic-tables.css (.column-editor-panel). */
body:has(.embedded-html-page.is-immersive) .rz-layout > .rz-body {
    transform: none;
}

/* Pantalla completa es pantalla completa tambien en movil: la barra inferior
   (fixed, z-index 998) flotaria por encima de la capa inmersiva. Se sale con el
   boton de la cabecera, que sigue visible. */
body:has(.embedded-html-page.is-immersive) .mnav {
    display: none;
}

.embedded-html-page.is-immersive {
    position: fixed;
    /* inset, no width:100vw: 100vw incluye el ancho de la barra de scroll y
       reintroduce el desbordamiento horizontal que acabamos de quitar. */
    inset: 0;
    /* Explicito: `.embedded-html-page` fija `height: calc(100vh - 64px - 2rem)`
       para descontar la cabecera del portal, y con position:fixed una altura
       declarada gana a `bottom: 0`. Sin esto la capa dejaba 96 px muertos abajo. */
    height: 100vh;
    margin: 0;
    z-index: 900;
    background: var(--rz-base-background-color, #fff);
    animation: sa-immersive-in 0.16s ease;
}

@keyframes sa-immersive-in {
    from { opacity: 0.6; transform: scale(0.995); }
    to   { opacity: 1;   transform: none; }
}

/* The document is centred and capped so a wide monitor does not stretch a
   text column edge to edge — the same reason a printed page has margins. */
.embedded-html-page.is-immersive .sa-canvas {
    max-width: 1600px;
    margin: 0 auto;
}

/* Con zoom la caja DEBE medir exactamente --sa-content-w * --sa-zoom: recortarla
   a 1600 px despegaria el overlay del contenido dibujado. */
.embedded-html-page.is-immersive .sa-canvas.sa-zoomable {
    max-width: none;
}

.embedded-html-page.is-immersive .embedded-external-header {
    padding-inline: 1.5rem;
}

/* ── First-visit card ─────────────────────────────────────────────────────
   A document that arrives as a menu entry gives no clue that it can be opened
   full-screen or commented in place — people answered these by email. Shown
   once per section and per browser; dismissal lives in localStorage. */

.sa-intro {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    margin: 0.75rem 1rem 0;
    padding: 0.9rem 1rem;
    border: 1px solid var(--rz-primary-light, #6366f1);
    border-left-width: 3px;
    border-radius: 10px;
    background: var(--rz-primary-lighter, rgba(79, 70, 229, 0.06));
    animation: sa-intro-in 0.2s ease;
}

@keyframes sa-intro-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

.sa-intro-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--rz-primary, #4f46e5);
    color: var(--rz-on-primary, #fff);
}

.sa-intro-icon .rzi {
    font-size: 1.15rem;
}

.sa-intro-body {
    flex: 1;
    min-width: 0;
}

.sa-intro-title {
    margin: 0 0 0.4rem;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--rz-text-title-color, var(--rz-text-color));
}

.sa-intro-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sa-intro-list li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    color: var(--rz-text-secondary-color, #6b7280);
}

.sa-intro-list .rzi {
    font-size: 1rem;
    color: var(--rz-primary, #4f46e5);
}

/* Full-bleed stage when the rail is collapsed. */
.embedded-html-page.sa-panel-hidden .sa-stage {
    border-right: 0;
}


/* ────────────────────────────────────────────────────────────────────────
   HUD de zoom — flota sobre el documento, abajo en el centro.

   Aparece al pasar el raton por el escenario y se va solo: el documento es el
   protagonista y el control se asoma cuando hace falta. Tambien se asoma un
   momento al cambiar el zoom con Ctrl+rueda o con el teclado, que si no serian
   gestos sin respuesta visible.

   Vive DENTRO de `.sa-stage` y es `sticky` en los dos ejes: asi se centra solo
   sobre la parte visible sin saber nada del ancho del carril de comentarios, y
   sigue anclado cuando el zoom obliga a desplazarse en horizontal. La caja
   exterior mide 0 de alto para no alargar el documento.

   Los colores salen de los tokens de theme.css, asi que sigue al tema del
   portal; solo las mezclas translucidas se redefinen para modo oscuro mas abajo.
   ──────────────────────────────────────────────────────────────────────── */
.sa-zoom-hud {
    position: sticky;
    bottom: 0;
    left: 0;
    height: 0;
    z-index: 12;
    /* Solo la pastilla recibe raton: el resto de la banda no debe robar clics
       al documento ni al overlay de anotaciones. */
    pointer-events: none;
}

.sa-zoom-hud-inner {
    position: absolute;
    bottom: 1.25rem;
    left: 50%;
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0.3rem 0.4rem;
    /* Todo sale de theme.css, y por eso el modo oscuro NO necesita ni una regla
       aparte: `--rz-base-background-color` ya pasa de #FFFFFF a #0F172A, asi que
       el mismo color-mix da cristal claro o cristal oscuro solo.
       `color-mix(..., transparent)` para sacar alfa de un token es el idioma que
       theme.css ya usa (ver `--rz-button-hover-bg`), no una invencion de aqui. */
    background: color-mix(in srgb, var(--rz-base-background-color) 72%, transparent);
    border: var(--rz-border-normal);
    border-radius: 999px;
    /* --rz-shadow-6 y no -lg/-xl: es de las que theme.css SI redefine en oscuro
       (de rgba(0,0,0,.04) a rgba(0,0,0,.4)), que es justo donde hace falta. */
    box-shadow: var(--rz-shadow-6);
    /* El desenfoque es lo que deja leer el documento POR DEBAJO sin que el texto
       del control se pierda encima. Con `saturate` el fondo no se apaga. */
    backdrop-filter: blur(14px) saturate(1.5);
    -webkit-backdrop-filter: blur(14px) saturate(1.5);
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(8px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

/* La clase la pone JS en `mouseenter`/`mouseleave` del escenario, NO `:hover`:
   con `:hover` los `pointer-events` de la pastilla dependian de que el selector
   estuviese aplicado en el instante del impacto, y si no lo estaba el clic se
   colaba al iframe. `focus-within` para quien navega con el teclado; `sa-hud-peek`
   es el asomo tras un cambio de zoom con rueda o teclas. */
.sa-stage.sa-hud-hover .sa-zoom-hud-inner,
.sa-stage.sa-hud-peek .sa-zoom-hud-inner,
.sa-zoom-hud-inner:focus-within {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

/* ── Arrastrar para desplazar ─────────────────────────────────────────────
   El documento vive en un iframe de origen opaco que se queda con los eventos
   del raton, asi que para poder arrastrarlo hay que quitarle los punteros — y eso
   apaga tambien sus enlaces y su seleccion de texto. De ahi que sea un modo que
   se enciende, como la manita de un visor de PDF, y no algo permanente. */
.sa-stage.sa-panning iframe {
    pointer-events: none;
}

.sa-stage.sa-panning .sa-overlay {
    pointer-events: auto;
    cursor: grab;
}

.sa-stage.sa-panning.sa-grabbing .sa-overlay {
    cursor: grabbing;
}

/* Mientras se arrastra, nada de seleccionar texto del cromo del padre. */
.sa-stage.sa-grabbing {
    user-select: none;
}

/* Anotando, el HUD estorba justo donde se dibuja. Se aparta. */
.sa-stage.sa-annotating .sa-zoom-hud-inner {
    opacity: 0;
    pointer-events: none;
}

.sa-hud-btn,
.sa-hud-level {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--rz-text-color);
    /* «Negrita suave»: cuerpo firme sin gritar, y cifras tabulares para que pasar
       de 100 % a 86 % no mueva los botones de sitio. */
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background 0.14s ease, color 0.14s ease, opacity 0.14s ease;
}

.sa-hud-btn {
    width: 30px;
}

.sa-hud-level {
    min-width: 52px;
    padding: 0 0.5rem;
    font-size: 0.8125rem;
    letter-spacing: 0.01em;
}

/* El hover ya existe como token y theme.css lo sube de 8 % a 14 % en oscuro,
   donde una mezcla clara se perderia. Reusarlo es gratis y ademas hace que el HUD
   reaccione igual que cualquier otro boton del portal. */
.sa-hud-btn:hover:not(:disabled),
.sa-hud-level:hover:not(:disabled) {
    background: var(--rz-button-hover-bg);
}

.sa-hud-btn:disabled,
.sa-hud-level:disabled {
    opacity: 0.38;
    cursor: default;
}

/* Ajuste activo: el mismo azul de marca que marca «Anotar» o «Comentarios». */
.sa-hud-btn.sa-hud-on {
    background: var(--rz-primary);
    color: var(--rz-on-primary);
}

.sa-hud-btn .rzi {
    font-size: 1.05rem;
}

.sa-hud-sep {
    width: 1px;
    height: 18px;
    margin: 0 0.25rem;
    background: var(--rz-base-300);
}

/* Sin soporte de desenfoque, el fondo se vuelve opaco: translucido SIN blur es
   ilegible sobre una portada con foto. Sigue siendo el mismo token, asi que esto
   tampoco necesita una variante para oscuro. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .sa-zoom-hud-inner { background: var(--rz-base-background-color); }
}

@media (prefers-reduced-motion: reduce) {
    .sa-zoom-hud-inner { transition: opacity 0.01s linear; transform: translateX(-50%); }
    .sa-stage.sa-hud-hover .sa-zoom-hud-inner,
    .sa-stage.sa-hud-peek .sa-zoom-hud-inner,
    .sa-zoom-hud-inner:focus-within { transform: translateX(-50%); }
}

/* En un tactil no hay «pasar el raton»: el HUD se queda visible. */
@media (hover: none) {
    .sa-zoom-hud-inner { opacity: 1; pointer-events: auto; transform: translateX(-50%); }
}

/* Al imprimir manda el documento, no la escala con la que se estaba leyendo. */
@media print {
    .sa-zoom-hud { display: none; }

    .sa-canvas.sa-zoomable {
        width: auto;
        height: auto;
    }

    .sa-canvas.sa-zoomable > iframe {
        transform: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Movil
   En vertical `.sa-body` repartia los 414 px entre el documento y un rail de
   comentarios de 320: quedaban 235 px de documento y 157 de rail, ninguno
   utilizable, y habia que girar el telefono para leer algo. En movil el
   documento se queda con todo el ancho y los comentarios pasan a hoja
   inferior, que es donde un telefono espera encontrarlos.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .sa-stage {
        width: 100%;
    }

    .sa-panel {
        position: fixed;
        left: 0;
        right: 0;
        /* Por encima de la barra inferior de movil, que es fixed a z-index 998
           —o sea, por encima de esta hoja— y le comia los ultimos 58 px:
           justo donde caen las acciones del ultimo comentario. */
        bottom: calc(var(--mnav-h, 58px) + env(safe-area-inset-bottom));
        width: auto;
        max-width: none;
        height: 62vh;
        /* Por encima de la capa inmersiva (900) para que tambien sirva ahi. */
        z-index: 950;
        border-left: 0;
        border-top: 1px solid var(--rz-base-300, #cbd5e1);
        border-radius: 14px 14px 0 0;
        box-shadow: 0 -10px 30px rgba(15, 23, 42, 0.18);
        padding-bottom: 1.25rem;
        animation: sa-sheet-up 0.18s ease;
    }

    /* Asa: dice "esto es una hoja" sin gastar una fila de cabecera. */
    .sa-panel::before {
        content: "";
        display: block;
        width: 38px;
        height: 4px;
        margin: 0 auto 0.6rem;
        border-radius: 999px;
        background: var(--rz-base-300, #cbd5e1);
    }

    .sa-panel-title {
        position: sticky;
        top: 0;
        background: var(--rz-base-50, #fafafa);
        margin: 0 0 0.5rem;
        padding-bottom: 0.4rem;
    }

    /* Cuatro botones etiquetados rompian la cabecera en tres filas y se comian
       93 px de pantalla. En movil van sin texto, con el title como tooltip. */
    .embedded-external-header .embedded-actions .rz-button-text {
        display: none;
    }

    .embedded-external-header .embedded-actions .rz-button {
        padding-inline: 0.4rem;
    }

    .embedded-external-header {
        padding-inline: 0.6rem;
        gap: 0.4rem;
    }

    .embedded-actions {
        gap: 0.25rem;
    }

    /* .section-proposal-chips lleva flex:1 y wrap en theme.css: en movil se queda
       con el ancho antes que el titulo y puede apilar filas. */
    .section-proposal-chips {
        flex: 0 1 auto;
        flex-wrap: nowrap;
        overflow: hidden;
        margin: 0 0.4rem;
    }


    .sa-intro {
        margin: 0.6rem 0.75rem 0;
        flex-wrap: wrap;
        gap: 0.6rem;
    }

    .sa-intro-list {
        gap: 0.3rem 0.9rem;
    }
}

@keyframes sa-sheet-up {
    from { transform: translateY(12px); opacity: 0.7; }
    to   { transform: none; opacity: 1; }
}