/* Visor de dosier de oferta — la arquitectura de secciones (sa-stage/sa-canvas/
   sa-overlay/sa-zoom-hud, en section-annotations.css) montada dentro de la tarjeta de
   la oferta. Aquí van SOLO los ajustes propios de esta superficie; los genéricos se
   heredan y no se duplican. */

/* La tarjeta de 900px es para propuestas de editor. Un dosier maquetado manda: la
   tarjeta se ensancha hasta la ventana para que el ajuste a lo ancho no encoja el
   documento (el 70% ilegible que motivó esto). El ancestro extra es a propósito: la
   regla scoped `.proposal-card[b-…]` empata en especificidad y su hoja carga después —
   sin él, esta regla pierde y la tarjeta se queda en 900px. */
.proposal-container .proposal-card:has(.pdoc-stage),
div.ofp-sheet:has(.pdoc-stage) {
    max-width: min(1680px, calc(100vw - 3rem));
}

/* Marco del visor: cabecera de marca + cuerpo. Una sola pieza con borde y radio —
   el aspecto "aplicación" de un visor de PDF incrustado, no un iframe suelto. */
.pdoc-frame {
    border: 1px solid var(--rz-base-300, #d1d5db);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 8px 28px rgba(15, 23, 42, 0.07);
}

/* Cabecera del visor: tinte de marca muy leve, título en versalitas y chip con el
   número de comentarios. Es el equivalente compacto del header de las secciones. */
.pdoc-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.95rem;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--rz-primary, #4f46e5) 8%, var(--rz-base-background-color, #fff)),
        color-mix(in srgb, var(--rz-info, #3b82f6) 5%, var(--rz-base-background-color, #fff)));
    border-bottom: 1px solid var(--rz-base-200, #e5e7eb);
}

.pdoc-toolbar > .rzi {
    color: var(--rz-primary, #4f46e5);
    font-size: 1.1rem;
}

.pdoc-toolbar-title {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rz-text-title-color, #1f2430);
}

.pdoc-toolbar-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
    padding: 0.12rem 0.55rem;
    border-radius: 999px;
    background: var(--rz-primary, #4f46e5);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
}

.pdoc-toolbar-chip .rzi {
    font-size: 0.85rem;
}

/* Cuerpo del visor: escenario + carril de comentarios a la derecha. UN SOLO scroll:
   el documento fluye a su altura completa y quien scrollea es la PÁGINA — dos barras
   verticales conviviendo era lo que se sentía mal. La cabecera del visor y el carril
   van sticky para seguir a la lectura. */
.pdoc-body {
    display: flex;
    align-items: stretch;
}

/* La cabecera del visor acompaña la lectura del dosier largo. */
.pdoc-toolbar {
    position: sticky;
    top: 0;
    z-index: 13;
}

/* Sin scroll vertical propio, la gutter reservada de .sa-stage sería una franja
   muerta permanente. */
.pdoc-stage {
    scrollbar-gutter: auto;
}

/* El contenido del carril sigue al lector; la columna (fondo claro) mide lo que el
   documento. */
.pdoc-panel-stick {
    position: sticky;
    top: 3.2rem; /* bajo la cabecera sticky del visor */
    max-height: calc(100dvh - 4.5rem);
    overflow-y: auto;
}

/* El lienzo alrededor del papel es OSCURO, como en cualquier visor de PDF: el
   documento flota sobre él y se lee como "página". */
.pdoc-stage {
    background: #23252e;
}

/* El PAPEL lo pone el visor: un iframe es transparente por defecto, y un documento
   que no declare fondo propio dejaría ver el lienzo oscuro a través del texto. El que
   sí lo declara simplemente lo tapa. */
.pdoc-stage iframe {
    background: #fff;
}

.pdoc-stage::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.pdoc-stage::-webkit-scrollbar-thumb {
    background: #3d4152;
    border-radius: 999px;
    border: 2px solid #23252e;
}

.pdoc-stage::-webkit-scrollbar-track {
    background: transparent;
}

/* El carril hereda de .sa-panel (ancho 320, borde, scroll propio); el título toma la
   misma voz que la cabecera del visor. */
.pdoc-panel .sa-panel-title {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rz-text-title-color, #1f2430);
}

/* La tarjeta de bienvenida vive dentro de la sección, no en el layout de secciones:
   fuera los márgenes laterales heredados. */
.pdoc-intro {
    margin: 0 0 0.85rem;
}

/* Contador de comentarios en el botón del HUD. */
.pdoc-hud-count {
    font-size: 0.68rem;
    font-weight: 700;
    min-width: 1rem;
    text-align: center;
}

/* Anotando, las secciones esconden el HUD porque su botón de salida vive en la
   cabecera de la página. Aquí el botón de anotar ES del HUD: si se escondiera no
   habría forma de salir del modo. Se queda visible. */
.pdoc-stage.sa-annotating .sa-zoom-hud-inner {
    opacity: 1;
    pointer-events: auto;
}

/* Compositor flotante: identidad (nombre + correo) en dos columnas y acciones. */
.pdoc-composer .pdoc-composer-identity {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
    margin-bottom: 0.4rem;
}

.pdoc-composer .pdoc-composer-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
    justify-content: flex-end;
}

/* Chip "en el documento" del hilo: es un botón (salta al marcador) pero viste como
   los demás chips del mensaje. */
.pth__tag--doc {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    border: 0;
    cursor: pointer;
    font: inherit;
}

.pth__tag--doc .rzi {
    font-size: 0.85em;
}

/* Destello del mensaje del hilo al llegar desde un marcador. */
.pth-flash {
    animation: pdoc-flash 1.6s ease;
    border-radius: 8px;
}

@keyframes pdoc-flash {
    0%, 60% { background: color-mix(in srgb, var(--rz-primary, #4f46e5) 12%, transparent); }
    100% { background: transparent; }
}