/* ── Editor web (visor + edición, Puntos 1a+1b) ───────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } [hidden] { display: none !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } :root { /* Colores/sombras/radios: SOLO en tokens.css (Sprint D0). Acá quedan únicamente variables de layout de esta pantalla. */ --topbar-h: 52px; } html, body { height: 100%; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; color: var(--text); background: var(--bg); display: flex; flex-direction: column; overflow: hidden; } /* ── Barra superior ──────────────────────────────────── */ .topbar { min-height: var(--topbar-h); height: auto; flex: 0 0 auto; display: flex; flex-direction: column; align-items: stretch; padding: 0 12px 6px; background: var(--topbar-bg); color: var(--topbar-text); } .editor-shell { min-height: 58px; display: flex; align-items: center; gap: 12px; min-width: 0; } .brand { color: var(--topbar-text); text-decoration: none; font-weight: 700; font-size: 1.05rem; white-space: nowrap; flex: 0 0 auto; padding-right: 14px; border-right: 1px solid var(--topbar-separator); } .brand-zone { min-width: 210px; padding-right: 14px; margin-right: 0; } .toolbar { display: flex; flex-direction: column; align-items: stretch; gap: 6px; width: 100%; min-width: 0; /* Punto 3a: con los grupos de anotación la barra puede superar el ancho de la ventana. Sin esto, el CONTENIDO desborda el documento entero y cualquier scroll-into-view (foco de teclado, tap) desplaza el dejando el canvas fuera de pantalla — encontrado en la verificación táctil real, no leyendo código. El scroll queda contenido acá. */ padding: 0; overflow: visible; } .toolbar__row { min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .tb-group, .toolbar__row > .tb-btn { flex: 0 0 auto; } .tb-group { display: flex; align-items: center; gap: 4px; } .tb-btn { min-width: 32px; height: 32px; border: none; border-radius: 6px; background: var(--topbar-btn); color: var(--topbar-text); font-size: 1.05rem; cursor: pointer; line-height: 1; } .tb-btn:hover { background: var(--topbar-btn-hover); } .tb-btn:focus-visible, .tool-menu__panel button:focus-visible, .editor-account:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .tb-btn:disabled { opacity: .4; cursor: default; } .tb-btn-text { font-size: .85rem; padding: 0 8px; } /* Punto 6, Sprint 1b: 44px táctil solo en dispositivos de puntero grueso, escritorio conserva 32px */ @media (pointer: coarse) { .tb-btn { min-height: var(--tap-target); min-width: var(--tap-target); } } .page-nav input { width: 52px; height: 32px; border: none; border-radius: 6px; text-align: center; font-size: .9rem; background: var(--surface); color: var(--text); } .page-nav #page-count { font-size: .9rem; opacity: .85; white-space: nowrap; } .zoom-controls select { height: 32px; border: none; border-radius: 6px; font-size: .85rem; padding: 0 6px; max-width: 130px; background: var(--surface); color: var(--text); } .document-zone { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 0 36px 0 6px; } .document-zone__identity { display: flex; align-items: center; gap: 8px; min-width: 120px; max-width: 360px; } .document-zone__icon { flex: 0 0 auto; padding: 3px 5px; border-radius: 4px; background: var(--danger, #dc2626); color: #fff; font-size: .62rem; font-weight: 800; } .document-zone__navigation { display: flex; align-items: center; gap: 8px; padding-left: 12px; border-left: 1px solid var(--topbar-separator); } .doc-info { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .85rem; opacity: .85; } .editor-account { display: flex; align-items: center; gap: 7px; min-width: 0; color: var(--topbar-text); text-decoration: none; font-size: .78rem; padding: 5px 9px; border: 1px solid var(--topbar-separator); border-radius: 9px; background: color-mix(in srgb, var(--topbar-btn) 55%, transparent); } .editor-account__avatar { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--topbar-btn); font-weight: 700; } .editor-account__text { display: flex; flex-direction: column; min-width: 0; max-width: 170px; } .editor-account__label { opacity: .7; font-size: .68rem; } #editor-account-id { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .free-access-badge { flex: 0 0 auto; border: 1px solid var(--topbar-separator); border-radius: 999px; padding: 4px 9px; font-size: .72rem; white-space: nowrap; } .global-actions { display: flex; gap: 6px; } .tool-menu { position: relative; flex: 0 0 auto; } .tool-menu__panel { position: absolute; z-index: 120; top: calc(100% + 5px); left: 0; min-width: 190px; padding: 6px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); box-shadow: 0 12px 28px rgba(0,0,0,.22); } .tool-menu__panel button { display: block; width: 100%; min-height: 38px; padding: 8px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--text); text-align: left; cursor: pointer; } .tool-menu__panel button:hover { background: var(--accent-softer); } .tools-mobile-trigger { display: none; } .editor-operation-status { font-size: .8rem; padding: 0 8px; } .editor-operation-status.error { color: var(--danger-text); } .editor-operation-status.success { color: var(--success); } .editor-toast { position: fixed; z-index: 300; right: 20px; bottom: 20px; max-width: min(360px, calc(100vw - 40px)); padding: 10px 14px; border-radius: 9px; background: var(--surface); color: var(--text); box-shadow: 0 8px 24px rgba(0,0,0,.25); border: 1px solid var(--border); } .editor-toast[data-kind="success"] { border-color: var(--success); } .editor-transition { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; background: color-mix(in srgb, var(--bg) 88%, transparent); color: var(--text); font-weight: 600; } html[data-pending-document="true"] #open-screen { display: none !important; } .tb-btn.is-busy::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 6px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: editor-spin .7s linear infinite; vertical-align: -2px; } @keyframes editor-spin { to { transform: rotate(360deg); } } /* Separadores visuales entre grupos de herramientas */ .edit-tools { border-left: 1px solid var(--topbar-separator); padding-left: 10px; } .file-ops { border-left: 1px solid var(--topbar-separator); padding-left: 10px; } .insert-ops { border-left: 1px solid var(--topbar-separator); padding-left: 10px; } .extract-options { display: flex; flex-direction: column; gap: 10px; } .extract-options label { min-height: 44px; display: flex; align-items: center; gap: 8px; } /* ── Pantalla de apertura ────────────────────────────── */ .open-screen { flex: 1; display: flex; align-items: center; justify-content: center; overflow: auto; padding: 24px; } .open-box { max-width: 520px; width: 100%; text-align: center; } .open-box h1 { font-size: 1.6rem; margin-bottom: 8px; } .open-box > p { color: var(--gray-500); margin-bottom: 20px; } .beta-tag { font-size: .65em; font-weight: 700; color: var(--accent-text); background: var(--accent-soft); border-radius: 999px; padding: 2px 10px; vertical-align: middle; } .dropzone { position: relative; border: 2px dashed var(--border); border-radius: var(--radius); background: var(--surface); padding: 44px 20px; cursor: pointer; transition: border-color .15s, background .15s; } .dropzone:hover, .dropzone.dragover { border-color: var(--accent); background: var(--accent-softer); } .dropzone .icon { font-size: 2.2rem; margin-bottom: 8px; } .dropzone p { color: var(--gray-500); font-size: .95rem; } .dropzone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .open-error { margin-top: 16px; padding: 10px 14px; border-radius: 8px; background: var(--danger-soft); color: var(--danger-text); font-size: .9rem; } .open-screen-alt-link { margin-top: 16px; font-size: .9rem; } .open-screen-alt-link a { color: var(--accent-text); } /* Fase 16, Punto 1 (sub-punto 1d-i): estado de conversión de extractos. Punto 5B, Bloque 4: .op-status es la misma barra de estado reutilizada por las operaciones P0 (reparación, y las futuras compresión/ conversión/seguridad). */ .extractos-status, .op-status { margin-top: 16px; padding: 10px 14px; border-radius: 8px; font-size: .9rem; background: var(--accent-soft); color: var(--accent-text); } .extractos-status.success, .op-status.success { background: var(--success-soft, var(--accent-soft)); color: var(--success); } .viewer-screen > .financial-panel { order: 3; flex: 0 0 min(360px, 34vw); min-width: 300px; display: block; overflow-y: auto; padding: 22px; border-left: 1px solid var(--border); background: var(--surface); box-shadow: -10px 0 26px rgba(0, 0, 0, .12); text-align: left; } .viewer-screen > .financial-panel .open-box { max-width: none; text-align: left; } .viewer-screen > .financial-panel .open-screen-alt-link, .viewer-screen > .financial-panel .dropzone { display: none; } .financial-panel__close { float: right; width: 38px; height: 38px; border: 0; border-radius: 8px; background: var(--accent-softer); color: var(--text); font-size: 1.5rem; cursor: pointer; } .financial-panel__subtitle { margin: 4px 0 16px; color: var(--gray-500); font-weight: 650; } .financial-panel__file { margin: 16px 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .88rem; } .viewer-screen > .financial-panel .form-group { margin: 18px 0; } .viewer-screen > .financial-panel .radio-group { display: grid; gap: 8px; } .viewer-screen > .financial-panel .radio-group label { min-height: 36px; display: flex; align-items: center; gap: 8px; } /* Punto 5B, Bloque 4 (MB-4): lista de imágenes seleccionadas */ .op-file-list { list-style: none; margin: 0; padding: 0; max-height: 140px; overflow-y: auto; text-align: left; font-size: .85rem; } .op-file-list li { padding: 2px 0; word-break: break-all; } .op-file-list li::before { content: "• "; color: var(--accent); } /* Punto 5B, Bloque 4 (MB-3C): resultado de Comparar PDF (respuesta JSON) */ .comparar-result { margin-top: 16px; text-align: left; font-size: .9rem; } .comparar-result h3 { font-size: 1rem; margin: 8px 0 4px; } .comparar-result ul { margin: 0; padding-left: 18px; } .comparar-result li { margin-bottom: 2px; } /* ── Visor ───────────────────────────────────────────── */ .viewer-screen { flex: 1; display: flex; min-height: 0; } .thumbs-panel { flex: 0 0 168px; width: 168px; min-width: 0; min-height: 0; overflow: visible; position: relative; background: var(--gray-200); border-right: 1px solid var(--gray-300); padding: 6px; display: flex; flex-direction: column; gap: 4px; } .thumbs-panel__header { flex: 0 0 auto; min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 2px 4px; border-bottom: 1px solid var(--gray-300); background: var(--gray-200); } .thumbs-panel__title { color: var(--text); font-size: .82rem; font-weight: 700; } .thumbs-toggle { flex: 0 0 auto; width: 32px; min-height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--gray-300); border-radius: 7px; background: var(--surface); color: var(--text); cursor: pointer; } .thumbs-toggle:hover { background: var(--surface-2); } .thumbs-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); } .thumbs-toggle__icon { display: block; font-size: .8rem; } @media (pointer: coarse) { .thumbs-toggle { width: var(--tap-target); min-height: var(--tap-target); } } .thumbs-panel.collapsed { flex-basis: 0; width: 0; padding: 0; border-right: 0; background: transparent; box-shadow: none; } .thumbs-panel.collapsed > :not(.thumbs-panel__header) { display: none; } .thumbs-panel.collapsed .thumbs-panel__header { position: absolute; top: 8px; left: 0; z-index: 20; width: auto; min-height: 0; padding: 0; border: 0; background: transparent; } .thumbs-panel.collapsed .thumbs-panel__title { display: none; } .thumbs-panel.collapsed .thumbs-toggle { border-left: 0; border-radius: 0 7px 7px 0; box-shadow: var(--shadow); } .thumbs-actions { flex: 0 0 auto; padding: 2px 0 6px; background: var(--gray-200); } .thumbs-actions[hidden] { display: none; } .thumbs-delete { width: 100%; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--danger); border-radius: 7px; background: var(--surface); color: var(--danger-text); font: inherit; font-weight: 700; cursor: pointer; } .thumbs-delete:hover { background: color-mix(in srgb, var(--danger) 8%, var(--surface)); } .thumbs-delete:focus-visible { outline: none; box-shadow: var(--focus-ring); } .thumbs-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; } .thumb { position: relative; cursor: pointer; text-align: center; border-radius: 6px; padding: 6px 4px 2px; border: 2px solid transparent; min-height: 44px; /* Punto 6: drag target mínimo 44px (táctil) */ display: flex; flex-direction: column; align-items: center; justify-content: center; transition: border-color .15s, background .15s, transform .1s, opacity .1s; /* Punto 6: Pointer Events para reordenar (mouse + táctil) */ touch-action: none; } .thumb:hover { background: var(--gray-300); } .thumb.current { border-color: var(--accent); background: var(--accent-soft); } /* Punto 1b: estados drag & drop */ .thumb.dragging { opacity: .5; transform: scale(.95); } .thumb.drag-over { border-color: var(--accent); background: var(--accent-softer); } /* Punto 1b: checkbox de selección en miniaturas */ .thumb-select { position: absolute; top: 4px; left: 4px; width: 16px; height: 16px; accent-color: var(--blue); cursor: pointer; z-index: 2; margin: 0; } .thumb canvas { display: block; margin: 0 auto; background: var(--paper); filter: var(--paper-filter); box-shadow: var(--shadow); min-height: 40px; } .thumb .thumb-num { font-size: .75rem; color: var(--gray-700); margin-top: 4px; } .page-container { flex: 1; overflow: auto; padding: 18px; text-align: center; /* Punto 6, Sprint 2: scroll con 1 dedo, pinch con 2 dedos */ touch-action: pan-x pan-y; } #page-canvas { display: block; background: var(--paper); filter: var(--paper-filter); box-shadow: 0 2px 12px rgba(0,0,0,.18); } /* ── Punto 3a: overlay de captura de anotaciones ─────── */ .canvas-wrap { position: relative; display: inline-block; line-height: 0; } .overlay-canvas { position: absolute; inset: 0; /* Inactivo por defecto: no interfiere con el scroll ni el zoom táctil. */ pointer-events: none; } /* Con un modo de anotación activo, el overlay captura mouse Y táctil: touch-action none evita que el navegador convierta el gesto en scroll. */ .canvas-wrap.annotating .overlay-canvas { pointer-events: auto; touch-action: none; cursor: crosshair; } .annot-tools { border-left: 1px solid var(--topbar-separator); padding-left: 10px; } .tb-btn.active { background: var(--tb-active-bg); color: var(--tb-active-text); } .tb-btn.active:hover { background: var(--tb-active-hover); } .annot-hint { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); max-width: min(92vw, 560px); background: var(--tooltip-bg); color: var(--invert-text); padding: 10px 18px; border-radius: 999px; font-size: .9rem; text-align: center; z-index: 900; pointer-events: none; } .ink-bar { position: fixed; bottom: 58px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; background: var(--surface); padding: 8px; border-radius: 12px; box-shadow: 0 4px 16px rgba(0,0,0,.25); z-index: 950; } /* Punto 6 (criterio táctil adelantado): objetivo mínimo de 44px */ .ink-bar .btn { min-height: var(--tap-target); min-width: var(--tap-target); } .ink-bar .btn:disabled { opacity: .5; cursor: default; } input[type="range"] { width: 100%; accent-color: var(--blue); } /* ── Punto 1b: Modal de umbral ───────────────────────── */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; } .modal-dialog { background: var(--surface); border-radius: var(--radius); padding: 28px 32px; max-width: 460px; width: 100%; box-shadow: 0 8px 30px rgba(0,0,0,.2); } .modal-dialog h2 { font-size: 1.25rem; margin-bottom: 12px; } .modal-dialog p { color: var(--gray-700); font-size: .95rem; line-height: 1.5; margin-bottom: 12px; } .threshold-warning { background: var(--warn-soft); border-radius: 8px; padding: 10px 14px; color: var(--warn-text); font-size: .9rem; } /* Punto 4c: nota informativa bajo el aviso de TSA en el modal de firma con certificado (más discreta que .threshold-warning, no es un aviso). */ .sign-cert-note { color: var(--text-muted); font-size: .8rem; margin-top: 8px; } .modal-buttons { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; } .btn { border: none; border-radius: 8px; padding: 10px 20px; font-size: .95rem; cursor: pointer; text-align: center; transition: background .15s; min-height: var(--tap-target); } .btn-primary { background: var(--blue); color: var(--accent-contrast); } .btn-primary:hover { background: var(--blue-hover); } .btn-secondary { background: var(--gray-200); color: var(--gray-700); font-size: .85rem; } .btn-secondary:hover { background: var(--gray-300); } .btn-ghost { background: transparent; color: var(--gray-500); font-size: .85rem; } .btn-ghost:hover { background: var(--gray-100); } /* Punto 2a: Formularios en modales */ .form-group { margin-bottom: 16px; text-align: left; } .form-group label { display: block; font-size: .9rem; color: var(--gray-700); margin-bottom: 6px; font-weight: 500; } .form-input { width: 100%; padding: 8px 12px; border: 1px solid var(--gray-300); border-radius: 6px; font-size: .9rem; background: var(--surface); color: var(--text); outline: none; transition: border-color .15s; min-height: var(--tap-target); } .form-input:focus { border-color: var(--accent); box-shadow: var(--focus-ring); } .form-input::placeholder { color: var(--gray-500); } .radio-group { display: flex; flex-direction: column; gap: 8px; } .radio-group label { display: flex; align-items: center; gap: 8px; font-weight: 400; cursor: pointer; } .radio-group input[type="radio"] { accent-color: var(--blue); width: 16px; height: 16px; margin: 0; } /* ── Punto 4a: Firma visual sin certificado ──────────── */ /* Fuentes de firma vendorizadas (SIL OFL, ver web/vendor/signature-fonts/): se usan SOLO para renderizar la firma escrita a un canvas PNG — no se embeben en el PDF. */ @font-face { font-family: "Great Vibes"; src: url("../vendor/signature-fonts/GreatVibes-Regular.ttf") format("truetype"); font-display: swap; } @font-face { font-family: "Sacramento"; src: url("../vendor/signature-fonts/Sacramento-Regular.ttf") format("truetype"); font-display: swap; } @font-face { font-family: "Caveat"; src: url("../vendor/signature-fonts/Caveat-Regular.ttf") format("truetype"); font-display: swap; } .sign-tools { border-left: 1px solid var(--topbar-separator); padding-left: 10px; } .sign-dialog { max-width: 520px; } .sign-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--gray-200); margin-bottom: 16px; } .sign-tab { flex: 1; min-height: 44px; /* Punto 6: objetivo táctil mínimo */ border: none; background: transparent; color: var(--gray-500); font-size: .9rem; cursor: pointer; border-bottom: 3px solid transparent; } .sign-tab.active { color: var(--blue); border-bottom-color: var(--blue); font-weight: 600; } #sign-draw-canvas { width: 100%; max-width: 440px; border: 1px dashed var(--gray-300); border-radius: 8px; background: var(--gray-50); cursor: crosshair; /* El trazo del dedo dibuja, no scrollea */ touch-action: none; display: block; } .sign-draw-controls { display: flex; align-items: center; gap: 8px; margin-top: 10px; } .sign-color-select { width: auto; } .sign-draw-controls .btn { min-height: var(--tap-target); } .sign-font-sample { font-size: 1.6rem; line-height: 1.1; } .sign-font-group label { min-height: 44px; } .sign-upload-preview-wrap { margin-top: 12px; text-align: center; } #sign-upload-preview { max-width: 100%; max-height: 140px; border: 1px dashed var(--gray-300); border-radius: 8px; padding: 6px; background: var(--gray-50); } /* Overlay de colocación: arrastrable/redimensionable sobre la página */ .sign-overlay { position: absolute; border: 2px dashed var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); cursor: move; touch-action: none; /* arrastrar con el dedo no scrollea */ z-index: 20; line-height: 0; } #sign-overlay-img { width: 100%; height: 100%; pointer-events: none; user-select: none; } .sign-handle { position: absolute; /* Área táctil de 44px (Punto 6); el punto visible lo dibuja ::after */ width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; touch-action: none; } .sign-handle::after { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent); box-shadow: var(--shadow); } .sign-handle[data-corner="nw"] { top: -22px; left: -22px; cursor: nwse-resize; } .sign-handle[data-corner="ne"] { top: -22px; right: -22px; cursor: nesw-resize; } .sign-handle[data-corner="sw"] { bottom: -22px; left: -22px; cursor: nesw-resize; } .sign-handle[data-corner="se"] { bottom: -22px; right: -22px; cursor: nwse-resize; } .sign-actions { position: absolute; top: -58px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; background: var(--surface); padding: 6px; border-radius: 10px; box-shadow: 0 4px 16px rgba(0,0,0,.25); line-height: 1.2; } .sign-overlay.actions-below .sign-actions { top: auto; bottom: -58px; } .sign-actions .btn { min-height: var(--tap-target); min-width: var(--tap-target); white-space: nowrap; } /* ── Móvil ───────────────────────────────────────────── */ @media (max-width: 1100px) { .editor-shell { flex-wrap: wrap; padding: 6px 0; } .brand-zone { min-width: 170px; padding-right: 12px; } .document-zone { order: 3; flex: 1 0 100%; padding-right: 12px; } .document-zone__identity { flex: 1; max-width: none; } .editor-account__text { max-width: 130px; } .viewer-screen { position: relative; } .viewer-screen > .financial-panel { position: absolute; z-index: 30; top: 0; right: 0; bottom: 0; width: min(360px, 88vw); max-width: none; } } @media (max-width: 720px) { .brand-name { display: inline; } .brand-zone { min-width: auto; padding-right: 10px; margin-right: 0; } .editor-shell { flex-wrap: wrap; gap: 6px; } .document-zone { order: 3; flex: 1 0 100%; gap: 6px; } .document-zone__identity { min-width: 0; } .document-zone__navigation { padding-left: 6px; gap: 3px; flex-wrap: wrap; } .doc-info { max-width: 120px; } .editor-account__text { display: none; } .free-access-badge { max-width: 128px; overflow: hidden; text-overflow: ellipsis; } .global-actions #btn-download { font-size: 0; padding: 0 8px; } .global-actions #btn-download::after { content: "↓"; font-size: 1.1rem; } .toolbar { position: relative; gap: 4px; padding: 0; overflow: visible; } .tools-mobile-trigger { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; } .toolbar__row { position: absolute; z-index: 115; left: 0; right: 0; top: calc(100% + 6px); max-height: calc(100vh - 180px); overflow-y: auto; display: none; align-items: stretch; flex-direction: column; padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: 0 16px 36px rgba(0,0,0,.3); } .toolbar.mobile-open .toolbar__row { display: flex; } .tool-menu { width: 100%; } .tool-menu__trigger { width: 100%; min-height: 44px; text-align: left; } .tool-menu__panel { position: static; margin-top: 4px; box-shadow: none; } .tool-menu__panel button { min-height: 44px; } .toolbar__row > .tb-btn { min-height: 44px; text-align: left; } .tb-group { gap: 2px; } .ink-bar { bottom: 74px; } .viewer-screen { position: relative; } .thumbs-panel { position: absolute; top: 0; left: 0; bottom: 0; z-index: 10; box-shadow: var(--shadow); } .thumbs-panel:not(.collapsed) ~ .page-container { margin-left: 0; } .viewer-screen > .financial-panel { position: absolute; z-index: 30; inset: 0; min-width: 0; width: 100%; max-width: none; border-left: 0; padding: 18px; } .modal-dialog { padding: 16px; max-width: 100%; max-height: 90vh; overflow-y: auto; } } /* ── Punto 4b: Flujo de firmas (workflow) ────────────── */ .workflow-dialog { max-width: 560px; } .workflow-subtitle { color: var(--gray-500); font-size: 0.9rem; margin-bottom: 16px; } .workflow-add-form { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; } .wf-input { flex: 1; min-width: 140px; } .workflow-signer-list { max-height: 240px; overflow-y: auto; border: 1px solid var(--gray-200); border-radius: 8px; padding: 8px; margin-bottom: 12px; } .wf-empty { color: var(--gray-500); text-align: center; padding: 16px; } .wf-signer-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-bottom: 1px solid var(--gray-100); cursor: grab; /* Punto 6: Pointer Events para reordenar (mouse + táctil) */ touch-action: none; } .wf-signer-row:last-child { border-bottom: none; } .wf-signer-row.dragging { opacity: 0.5; } .wf-signer-name { font-weight: 500; flex: 1; } .wf-signer-email { color: var(--gray-500); font-size: 0.85rem; flex: 1; } .wf-signer-status { font-size: 0.8rem; padding: 2px 8px; border-radius: 10px; background: var(--gray-100); } .wf-signer-status.signed { background: #dcfce7; color: #166534; } .wf-signer-status.pending { background: #fef3c7; color: #92400e; } .wf-signer-status.notified { background: #dbeafe; color: #1e40af; } .wf-signer-remove { background: none; border: none; color: var(--red); cursor: pointer; font-size: 1.1rem; padding: 2px 6px; border-radius: 4px; } .wf-signer-remove:hover { background: #fef2f2; } .workflow-options { margin-bottom: 12px; } .wf-option { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 0.9rem; } .wf-status-section { border-top: 1px solid var(--gray-200); padding-top: 12px; margin-bottom: 12px; } .wf-status-section h3 { font-size: 0.95rem; margin-bottom: 8px; } .wf-auth-tooltip { position: fixed; top: 52px; right: 12px; background: #fff3cd; border: 1px solid #ffecb5; padding: 10px 16px; border-radius: 8px; font-size: 0.85rem; z-index: 100; box-shadow: var(--shadow); } .wf-auth-tooltip a { color: var(--blue); } /* ── Punto 5a: Formularios ──────────────────────────────────────────── */ .form-tools { display: flex; align-items: center; gap: 4px; } .form-fields-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 5; } .form-field-highlight { position: absolute; border: 2px solid var(--accent); background: var(--accent-soft); opacity: 0.35; border-radius: 4px; pointer-events: auto; cursor: pointer; transition: opacity .15s; } .form-field-highlight:hover { opacity: 0.65; } .form-field-highlight.focused { opacity: 0.5; border-color: var(--accent-hover); } .form-no-fields-msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 1rem; pointer-events: none; } /* ── Punto 5c: Overlay de edici�n de texto ─────────────────────────── */ .text-edit-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 5; } .text-edit-line { position: absolute; border: 2px solid var(--accent); background: var(--accent-soft); opacity: 0.3; border-radius: 3px; pointer-events: auto; cursor: move; transition: opacity .15s; } .text-edit-line:hover { opacity: 0.6; } .text-edit-line.selected { opacity: 0.85; border-color: var(--accent-text, var(--accent)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); } .text-edit-line:active { cursor: move; } .text-edit-line.dragging { transition: none; } .text-edit-drag-preview { position: absolute; z-index: 1; overflow: visible; color: var(--text); font-family: Arial, Helvetica, sans-serif; font-weight: 400; white-space: nowrap; opacity: .78; pointer-events: none; transform-origin: top left; user-select: none; } .text-edit-inline { position: absolute; display: flex; align-items: center; gap: 4px; padding: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.3); z-index: 10; flex-wrap: wrap; max-width: min(680px, calc(100vw - 24px)); } .text-edit-input { flex: 1; min-width: 200px; padding: 6px 10px; font-size: 0.9rem; border: 1px solid var(--border); border-radius: 4px; background: var(--bg); color: var(--text); outline: none; } .text-edit-input:focus { border-color: var(--accent); } .text-edit-context-menu { position: fixed; z-index: 1000; min-width: 140px; padding: 5px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); box-shadow: 0 10px 28px rgba(0, 0, 0, .22); } .text-edit-context-menu[hidden] { display: none; } .text-edit-context-menu button { width: 100%; min-height: 40px; padding: 7px 12px; border: 0; border-radius: 5px; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; } .text-edit-context-menu button:hover:not(:disabled), .text-edit-context-menu button:focus-visible:not(:disabled) { background: var(--accent-soft); outline: none; } .text-edit-context-menu button:disabled { color: var(--text-muted); cursor: default; opacity: .6; } .icon-action { min-width: 32px; padding-inline: 8px; font-size: 1rem; } .extractos-result { margin-top: 20px; padding: 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-alt, var(--surface)); } .extractos-result h2 { margin: 0 0 8px; font-size: 1rem; } .extractos-result p { margin: 4px 0; overflow-wrap: anywhere; } .extractos-result__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; } /* Punto 6, Sprint 2: label táctil del checkbox de búsqueda */ .search-case-label { display: flex; align-items: center; gap: 8px; cursor: pointer; min-height: var(--tap-target); } /* ── Punto 5c: Modal de buscar y reemplazar ────────────────────────── */ .text-search-dialog { max-width: 420px; } .text-search-result { padding: 8px 12px; border-radius: 4px; font-size: 0.9rem; margin-top: 8px; } .text-search-result.success { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent-text); } .text-search-result.error { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); } .form-place-overlay { position: absolute; border: 2px dashed var(--accent); background: var(--accent-softer); border-radius: 6px; z-index: 10; cursor: move; touch-action: none; } .form-place-handle { position: absolute; width: 12px; height: 12px; background: var(--surface); border: 2px solid var(--accent); border-radius: 3px; z-index: 2; } /* Punto 6, Sprint 2: área táctil invisible de 44px centrada en el indicador */ .form-place-handle::before { content: ""; position: absolute; width: 44px; height: 44px; top: -16px; left: -16px; } .form-place-handle[data-corner="nw"] { top: -6px; left: -6px; cursor: nw-resize; } .form-place-handle[data-corner="ne"] { top: -6px; right: -6px; cursor: ne-resize; } .form-place-handle[data-corner="sw"] { bottom: -6px; left: -6px; cursor: sw-resize; } .form-place-handle[data-corner="se"] { bottom: -6px; right: -6px; cursor: se-resize; } .form-edit-dialog { max-width: 420px; } .form-edit-dialog .form-group { margin-bottom: 10px; } .form-edit-dialog label { display: block; margin-bottom: 4px; font-weight: 500; } .form-edit-dialog input[type="text"], .form-edit-dialog select { width: 100%; } .form-edit-dialog .radio-group label { font-weight: 400; display: inline-flex; align-items: center; gap: 4px; margin-right: 12px; } .form-create-dialog { max-width: 420px; } .form-options-list { margin: 6px 0; max-height: 120px; overflow-y: auto; } .form-option-item { display: flex; align-items: center; gap: 6px; padding: 3px 6px; margin: 2px 0; background: var(--surface-2); border-radius: 4px; font-size: 0.9rem; } .form-option-item .form-option-remove { margin-left: auto; cursor: pointer; color: var(--danger); background: none; border: none; font-size: 1rem; line-height: 1; padding: 0 4px; } .form-add-option-row { display: flex; gap: 6px; align-items: center; } .form-add-option-row input { flex: 1; } .btn-sm { padding: 2px 10px; font-size: 0.85rem; min-height: 30px; } /* Punto 6, Sprint 2: target táctil solo en dispositivos de puntero grueso */ @media (pointer: coarse) { .btn-sm { min-height: var(--tap-target); } } /* ── Numeración / encabezados / pies (cabo suelto Punto 3) ───────── */ .furniture-dialog { max-width: 480px; max-height: 80vh; overflow-y: auto; } .furniture-dialog .form-help { font-size: .8rem; color: var(--text-muted); margin-top: 4px; } .furniture-dialog .form-help code { font-size: .8rem; background: var(--gray-100); padding: 1px 5px; border-radius: 3px; } .furn-check-row { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 500; margin-bottom: 8px; } .furn-check-row input[type="checkbox"] { accent-color: var(--blue); width: 16px; height: 16px; margin: 0; } .furn-sub-label { font-size: .85rem; font-weight: 500; margin-bottom: 4px; } .furn-position-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-top: 6px; } .furn-pos-opt { display: flex; align-items: center; gap: 4px; font-size: .85rem; cursor: pointer; font-weight: 400; padding: 4px 6px; border-radius: 4px; background: var(--gray-100); } .furn-pos-opt input[type="radio"] { accent-color: var(--blue); width: 14px; height: 14px; margin: 0; } .furn-divider { border: none; border-top: 1px solid var(--gray-200); margin: 12px 0; } #furn-page-num-config { padding-left: 24px; margin-top: 6px; } /* ── Punto 7, Sprint 2: banner de actualización PWA ────────────────── */ .pwa-update-banner { display: flex; align-items: center; gap: 12px; padding: 8px 16px; background: var(--accent-soft); color: var(--accent-text); font-size: .9rem; flex: 0 0 auto; min-height: var(--tap-target); z-index: 1100; } .pwa-update-banner[hidden] { display: none; } .pwa-update-text { flex: 1; min-width: 0; } .pwa-update-banner .btn { white-space: nowrap; min-height: 32px; } @media (pointer: coarse) { .pwa-update-banner .btn { min-height: var(--tap-target); } } .form-export-dialog { max-width: 520px; } .form-export-textarea { font-family: monospace; font-size: 0.8rem; white-space: pre; resize: vertical; min-height: 120px; }