body {
    background-color: #f6f7f9;
}

/* Visor de documentos con scroll propio: el documento (que puede tener muchas
   páginas) scrollea dentro de su marco en vez de alargar la página entera, así el
   panel lateral queda siempre accesible sin tener que volver arriba: «Enviar» en el
   editor, y Descargas/Evidencias/Firmantes/Actividad en la vista de lectura del
   envío. (En la firma el documento sí alarga la página, pero la barra de acciones es
   fixed-bottom.) El offset descuenta navbar + cabecera/alerta + nav de pestañas. */
.doc-viewport {
    max-height: calc(100vh - 13rem);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.page-preview {
    position: relative;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
    margin: 0 auto 1.5rem;
    background: #fff;
    user-select: none;
    /* Reserva espacio mientras la página (loading="lazy") aún no se ha cargado: así las
       páginas siguientes quedan fuera del viewport y el navegador no las pide todas de
       golpe, dejando que se rendericen a demanda en el servidor. */
    min-height: 500px;
}

.page-preview img {
    display: block;
    width: 100%;
    height: auto;
}

.sig-field {
    position: absolute;
    border: 2px dashed #0d6efd;
    background: rgba(13, 110, 253, .08);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    color: #0d6efd;
    overflow: hidden;
    cursor: pointer;
}

.sig-field.sig-field-signed {
    border-style: solid;
    border-color: #198754;
    background: rgba(25, 135, 84, .06);
    color: #198754;
}

/* En el editor el campo se arrastra para moverlo y se redimensiona desde la esquina.
   touch-action:none evita que el gesto scrollee la página en dispositivos táctiles.
   Acotado a data-editable para no afectar al campo pintado en la firma pública. */
.page-preview[data-editable="true"] .sig-field {
    cursor: move;
    touch-action: none;
}

/* .sig-field tiene overflow:hidden, así que el tirador se pega a la esquina (sin offsets
   negativos, que quedarían recortados). currentColor = color del firmante del campo. */
.sig-resize {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 12px;
    height: 12px;
    background: currentColor;
    border-radius: 4px 0 2px 0;
    cursor: nwse-resize;
    opacity: .65;
}

#signature-canvas {
    border: 1px solid #ced4da;
    border-radius: 6px;
    background: #fff;
    touch-action: none;
    width: 100%;
}

/* "Firmar en el móvil" no tiene sentido en un dispositivo táctil (ya estás en el
   móvil): se oculta donde el puntero principal es táctil; en escritorio (ratón)
   sigue visible. */
@media (pointer: coarse) {
    .hide-on-touch {
        display: none !important;
    }
}

.timeline {
    border-left: 3px solid #dee2e6;
    padding-left: 1rem;
}

.timeline-item {
    margin-bottom: .75rem;
}

/* Branding por organización en la página pública de firma: --brand-color la fija
   el servidor vía th:style en el body; sin configurar, los azules por defecto. */
.brand-scope .btn-primary {
    --bs-btn-bg: var(--brand-color, #0d6efd);
    --bs-btn-border-color: var(--brand-color, #0d6efd);
    --bs-btn-hover-bg: var(--brand-color, #0b5ed7);
    --bs-btn-hover-border-color: var(--brand-color, #0b5ed7);
    --bs-btn-active-bg: var(--brand-color, #0b5ed7);
    --bs-btn-active-border-color: var(--brand-color, #0b5ed7);
    --bs-btn-disabled-bg: var(--brand-color, #0d6efd);
    --bs-btn-disabled-border-color: var(--brand-color, #0d6efd);
}

.brand-scope .btn-outline-primary {
    --bs-btn-color: var(--brand-color, #0d6efd);
    --bs-btn-border-color: var(--brand-color, #0d6efd);
    --bs-btn-hover-bg: var(--brand-color, #0d6efd);
    --bs-btn-hover-border-color: var(--brand-color, #0d6efd);
}

.brand-scope .sig-field {
    border-color: var(--brand-color, #0d6efd);
    color: var(--brand-color, #0d6efd);
}