:root{ --ink:#171512; --ink-soft:#4b4740; --paper:#e7e3da; --panel:#ddd8cc; --panel-2:#f1eee5; --line: rgba(23,21,18,0.14); --accent:#c9622a; --accent-ink:#fff8f1; --canvas-bg:#8b8579; --danger:#b23b3b; --focus:#1b6b6b; --radius:6px; --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --display: "Fraunces", Georgia, "Times New Roman", serif; /* Acento propio del modo "Formularios", distinto del acento general (--accent, usado por "Editor"), para que se note a simple vista en qué modo estás. */ --form-accent:#3b82f6; --form-accent-ink:#ffffff; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --ink:#efece4; --ink-soft:#b6b0a4; --paper:#1d1b17; --panel:#252220; --panel-2:#171512; --line: rgba(239,236,228,0.12); --accent:#e08a4f; --accent-ink:#1d1002; --canvas-bg:#0f0e0c; --danger:#e07a7a; --focus:#4fb8b8; } } :root[data-theme="dark"]{ --ink:#efece4; --ink-soft:#b6b0a4; --paper:#1d1b17; --panel:#252220; --panel-2:#171512; --line: rgba(239,236,228,0.12); --accent:#e08a4f; --accent-ink:#1d1002; --canvas-bg:#0f0e0c; --danger:#e07a7a; --focus:#4fb8b8; } *{box-sizing:border-box;} html,body{height:100%;} body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); overflow:hidden; } button{font-family:inherit;} ::selection{ background: var(--accent); color: var(--accent-ink); } /* La app ocupa el 80% central de la ventana: deja márgenes laterales (con el fondo de ) para que Google Auto ads tenga hueco donde colocar anuncios sin taparse con la herramienta. Por debajo de 1000px no queda sitio real para eso, así que se usa el 100% del ancho. */ #app{ display:flex; flex-direction:column; height:100vh; width:80%; max-width:80%; margin:0 auto; } @media (max-width: 1000px){ #app{ width:100%; max-width:100%; } } /* ---------- Topbar ---------- */ .topbar{ display:flex; align-items:center; gap:14px; padding:0 16px; height:64px; flex:0 0 auto; background:var(--panel-2); border-bottom:1px solid var(--line); z-index:20; } /* Logotipo: "Sube" + "PDF" (en acento) sobre una regla naranja, con la leyenda "Editor de PDF" debajo en versalitas. Todo con variables de tema, así que se ve bien tanto en claro como en oscuro sin duplicar nada. */ .brand{ display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:0; line-height:1.05; } .brand-word{ font-family:var(--display); font-weight:700; font-size:20px; letter-spacing:0.2px; white-space:nowrap; } .brand-sube{ color:var(--ink); } .brand-pdf{ color:var(--accent); } .brand-rule{ width:58px; height:2px; background:var(--accent); margin:4px 0 3px; } .brand-tag{ font-family:var(--sans); font-weight:600; font-size:9.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-soft); white-space:nowrap; } .topbar-sep{ width:1px; align-self:stretch; margin:10px 0; background:var(--line); flex:0 0 auto; } .topbar-group{ display:flex; align-items:center; gap:6px; flex:0 0 auto; } .spacer{ flex:1 1 auto; } .btn{ display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); background:var(--panel); color:var(--ink); padding:7px 12px; border-radius:var(--radius); font-size:13px; font-weight:500; cursor:pointer; white-space:nowrap; transition:background .12s ease, border-color .12s ease, opacity .12s ease; } .btn:hover:not(:disabled){ border-color: var(--accent); } .btn:disabled{ opacity:.4; cursor:not-allowed; } .btn:focus-visible, .icon-btn:focus-visible, .tool-btn:focus-visible, select:focus-visible, input:focus-visible, .zoom-readout:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; } .btn-primary{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); } .btn-primary:hover:not(:disabled){ filter:brightness(1.06); } .btn-ghost{ background:transparent; border-color:transparent; } .btn-ghost:hover:not(:disabled){ background:var(--panel); } .btn-sm{ padding:5px 9px; font-size:12px; } .icon-btn{ display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border:1px solid transparent; background:transparent; color:var(--ink-soft); border-radius:var(--radius); cursor:pointer; } .icon-btn:hover:not(:disabled){ background:var(--panel); color:var(--ink); } .icon-btn:disabled{ opacity:.35; cursor:not-allowed; } .icon-btn svg{ width:16px; height:16px; } .icon-btn.is-active{ background:var(--accent); color:var(--accent-ink); } .zoom-readout{ font: inherit; font-size:12px; color:var(--ink-soft); width:44px; text-align:center; font-variant-numeric:tabular-nums; background:transparent; border:1px solid transparent; border-radius:var(--radius); cursor:pointer; padding:4px 0; } .zoom-readout:hover{ border-color:var(--line); color:var(--ink); } .page-readout{ font-size:12px; color:var(--ink-soft); white-space:nowrap; font-variant-numeric:tabular-nums; } .privacy-link{ font-size:12px; color:var(--ink-soft); text-decoration:none; padding:6px 8px; border-radius:var(--radius); } .privacy-link:hover{ color:var(--ink); background:var(--panel); text-decoration:underline; } /* ---------- Body layout ---------- */ .workspace{ flex:1 1 auto; display:flex; min-height:0; } .rail{ flex:0 0 auto; background:var(--panel-2); display:flex; flex-direction:column; overflow-y:auto; overflow-x:hidden; } .rail-left{ width:190px; border-right:1px solid var(--line); } .rail-right{ width:326px; border-left:1px solid var(--line); } .rail-head{ padding:12px 12px 8px; font-size:11px; font-weight:600; color:var(--ink-soft); flex:0 0 auto; border-bottom:1px solid var(--line); } /* El propio .rail hace scroll como un todo (ver arriba): cada bloque ocupa su altura natural (flex:0 0 auto, sin estirarse ni encogerse) y si la suma de miniaturas + botones + anuncio no cabe en la ventana, se desplaza el panel entero. Antes, con flex:1 1 auto, el anuncio de 600px de alto aplastaba la lista de páginas hasta dejarla prácticamente invisible. */ .rail-scroll{ flex:0 0 auto; overflow-y:visible; padding:10px; } .rail-actions{ flex:0 0 auto; padding:0 10px 10px; display:flex; flex-direction:column; gap:8px; } /* thumbnails */ .thumb{ position:relative; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); margin-bottom:10px; padding:6px 6px 22px; cursor:pointer; transition:border-color .12s ease; } .thumb.active{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); } .thumb:hover{ border-color:var(--ink-soft); } .thumb img{ width:100%; display:block; border:1px solid var(--line); background:#fff; } .thumb .thumb-num{ position:absolute; left:8px; bottom:6px; font-size:10.5px; color:var(--ink-soft); font-variant-numeric:tabular-nums; } .thumb-actions{ position:absolute; top:5px; right:5px; display:flex; gap:2px; opacity:0; transition:opacity .1s ease; } .thumb:hover .thumb-actions{ opacity:1; } .thumb-actions button{ width:20px; height:20px; border:none; border-radius:4px; background:var(--panel-2); color:var(--ink-soft); cursor:pointer; display:flex; align-items:center; justify-content:center; } .thumb-actions button:hover{ color:var(--ink); background:var(--paper); } .thumb.drag-over{ outline:2px dashed var(--accent); outline-offset:2px; } .add-page-btn{ width:100%; padding:10px; border:1px dashed var(--line); border-radius:var(--radius); background:transparent; color:var(--ink-soft); font-size:12.5px; cursor:pointer; } .add-page-btn:hover{ border-color:var(--accent); color:var(--ink); } /* tools grid */ /* Pestañas Editor / Formularios: dos modos con su propio juego de herramientas y su propio acento de color, para diferenciarlos a simple vista (naranja = Editor, azul = Formularios). */ .rail-tabs{ display:flex; flex:0 0 auto; border-bottom:1px solid var(--line); } .rail-tab{ flex:1 1 50%; display:flex; align-items:center; justify-content:center; gap:6px; padding:12px 6px; border:none; border-bottom:2px solid transparent; background:transparent; color:var(--ink-soft); font-size:12px; font-weight:600; cursor:pointer; } .rail-tab svg{ width:15px; height:15px; } .rail-tab:hover{ color:var(--ink); background:var(--panel); } .rail-tab.active[data-mode="edit"]{ color:var(--accent); border-bottom-color:var(--accent); } .rail-tab.active[data-mode="form"]{ color:var(--form-accent); border-bottom-color:var(--form-accent); } .form-mode-note{ margin:0; padding:9px 12px; font-size:11.5px; line-height:1.45; color:var(--ink-soft); background:rgba(59,130,246,0.09); border-bottom:1px solid var(--line); } .tools-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; padding:10px 10px 4px; } .tool-btn{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:8px 2px; border-radius:var(--radius); border:1px solid var(--line); background:var(--panel); color:var(--ink-soft); cursor:pointer; font-size:9.5px; font-weight:500; } .tool-btn svg{ width:17px; height:17px; } .tool-btn:hover{ color:var(--ink); border-color:var(--ink-soft); } .tool-btn.active{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); } .tools-grid-form .tool-btn.active{ background:var(--form-accent); border-color:var(--form-accent); color:var(--form-accent-ink); } .tool-options{ padding:6px 12px 12px; display:flex; flex-direction:column; gap:8px; border-bottom:1px solid var(--line); } .swatch-row{ display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--ink-soft); } .swatch-row input[type=color]{ width:26px; height:26px; border:1px solid var(--line); border-radius:5px; padding:0; background:none; cursor:pointer; } .swatch-row input[type=range]{ flex:1; } /* properties panel */ .props-panel{ padding:12px; display:flex; flex-direction:column; gap:10px; } .props-empty{ font-size:12.5px; color:var(--ink-soft); line-height:1.5; } .field{ display:flex; flex-direction:column; gap:4px; } .field label{ font-size:10.5px; color:var(--ink-soft); font-weight:600; } .field-row{ display:flex; gap:8px; } .field-row .field{ flex:1; } select, .num-input{ width:100%; padding:6px 8px; border:1px solid var(--line); border-radius:5px; background:var(--panel); color:var(--ink); font-size:12.5px; } .toggle-row{ display:flex; gap:6px; } .toggle-row button{ flex:1; padding:6px 0; border:1px solid var(--line); border-radius:5px; background:var(--panel); color:var(--ink-soft); cursor:pointer; font-size:12.5px; } .toggle-row button.on{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); } .color-field{ display:flex; align-items:center; gap:8px; } .color-field input[type=color]{ width:28px; height:28px; border:1px solid var(--line); border-radius:5px; padding:0; background:none; cursor:pointer; } .color-field span{ font-size:11.5px; color:var(--ink-soft); font-variant-numeric:tabular-nums; } .props-actions{ display:flex; gap:6px; padding-top:4px; border-top:1px solid var(--line); margin-top:2px; } .props-actions .icon-btn{ border:1px solid var(--line); } /* ---------- Canvas stage (scroll continuo, varias páginas) ---------- */ .stage{ flex:1 1 auto; background:var(--canvas-bg); position:relative; overflow:auto; display:flex; align-items:flex-start; justify-content:center; padding:40px 40px 80px; } .pages-container{ display:flex; flex-direction:column; align-items:center; gap:32px; flex:0 0 auto; } .page-wrap{ display:flex; flex-direction:column; align-items:center; gap:8px; flex:0 0 auto; scroll-margin-top:24px; } .page-shadow{ background:#fff; box-shadow:0 8px 30px rgba(0,0,0,0.35); flex:0 0 auto; line-height:0; transition:box-shadow .15s ease; } .page-wrap.is-active .page-shadow{ box-shadow:0 0 0 2px var(--accent), 0 8px 30px rgba(0,0,0,0.35); } .page-label{ font-size:11px; color:var(--ink-soft); font-variant-numeric:tabular-nums; background:rgba(0,0,0,0.18); padding:2px 9px; border-radius:20px; } .empty-state{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; } .dropzone{ width:min(460px, 86vw); border:1.5px dashed var(--line); border-radius:12px; padding:44px 32px; text-align:center; background:var(--panel-2); cursor:pointer; transition:border-color .12s ease, transform .12s ease; } .dropzone:hover, .dropzone.drag{ border-color:var(--accent); } .dropzone svg{ width:34px; height:34px; color:var(--ink-soft); margin-bottom:14px; } .dropzone h1{ font-family:var(--display); font-size:22px; font-weight:600; margin:0 0 8px; color:var(--ink); } .dropzone p{ font-size:13px; color:var(--ink-soft); margin:0; line-height:1.55; } .progress-overlay{ position:absolute; inset:0; background:rgba(15,14,12,0.55); backdrop-filter: blur(2px); display:flex; align-items:center; justify-content:center; z-index:40; } .progress-card{ background:var(--panel-2); border:1px solid var(--line); border-radius:10px; padding:22px 28px; text-align:center; min-width:220px; } .progress-card .spin{ width:22px; height:22px; margin:0 auto 12px; border-radius:50%; border:2.5px solid var(--line); border-top-color:var(--accent); animation:spin .8s linear infinite; } @keyframes spin{ to{ transform:rotate(360deg); } } .progress-card p{ margin:0; font-size:13px; color:var(--ink); } .progress-card .sub{ margin-top:4px; font-size:11.5px; color:var(--ink-soft); } .hint-toast{ position:fixed; left:50%; bottom:18px; transform:translateX(-50%); background:var(--panel-2); border:1px solid var(--line); color:var(--ink-soft); padding:8px 14px; border-radius:20px; font-size:12px; z-index:60; box-shadow:0 4px 14px rgba(0,0,0,0.25); max-width:min(90vw, 460px); text-align:center; } /* Círculo grande de vista previa del gotero: sigue al cursor mostrando el color exacto que hay debajo, antes de hacer clic para confirmarlo. Se apoya justo encima del cursor (no muy por encima, para que no parezca que coge el color de más arriba) y el puntito marca el píxel exacto que se muestrea. */ .eyedrop-preview{ position:fixed; width:64px; height:64px; border-radius:50%; border:3px solid #fff; box-shadow:0 0 0 1.5px rgba(0,0,0,0.45), 0 6px 16px rgba(0,0,0,0.35); pointer-events:none; z-index:9999; transform:translate(-50%, calc(-100% - 14px)); background:#cccccc; } .eyedrop-preview::after{ content:""; position:absolute; left:50%; bottom:-14px; width:6px; height:6px; border-radius:50%; background:#fff; border:1.5px solid rgba(0,0,0,0.55); transform:translateX(-50%); } .eyedrop-dot{ position:fixed; width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:50%; background:#fff; border:1.5px solid rgba(0,0,0,0.6); pointer-events:none; z-index:9999; } /* touch-action:none evita que el navegador interprete el arrastre táctil sobre el lienzo como gesto de pellizco/zoom o scroll de la página: así el dedo dibuja/mueve objetos en vez de hacer zoom nativo (para eso ya están los botones +/- de zoom de la barra superior). */ .canvas-container{ box-shadow:none !important; touch-action:none; } /* Botones/separadores que solo existen para el layout móvil (cajones de páginas/herramientas): ocultos por defecto, se muestran en el breakpoint de abajo para no afectar nada al layout de escritorio. */ .mobile-only-btn{ display:none; } .mobile-only-sep{ display:none; } .rail-backdrop{ display:none; position:fixed; inset:0; background:rgba(15,14,12,0.5); z-index:45; opacity:0; pointer-events:none; transition:opacity .18s ease; } @media (max-width: 860px){ .rail-left{ width:150px; } .rail-right{ width:220px; } .brand-tag{ display:none; } } /* ---------- Móvil: los paneles de páginas y herramientas pasan de columnas fijas a cajones deslizantes que se abren sobre el lienzo, para dejarle todo el ancho a la página del PDF (que es lo que se está editando). ---------- */ @media (max-width: 760px){ .mobile-only-btn{ display:inline-flex; } .mobile-only-sep{ display:block; } .topbar{ padding:0 8px; gap:8px; height:56px; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; } .topbar::-webkit-scrollbar{ display:none; } .brand{ flex:0 0 auto; } .brand-word{ font-size:17px; } .brand-rule{ width:40px; } .btn{ padding:7px 9px; font-size:12.5px; flex:0 0 auto; } .privacy-link{ display:none; } .spacer{ flex:0 0 12px; } .workspace{ position:relative; overflow:hidden; } .rail{ position:fixed; top:56px; bottom:0; z-index:50; transition:transform .2s ease; box-shadow:0 0 28px rgba(0,0,0,0.35); } .rail-left{ left:0; width:82vw; max-width:300px; transform:translateX(-100%); } .rail-right{ right:0; width:88vw; max-width:360px; transform:translateX(100%); border-left:1px solid var(--line); } .rail.open{ transform:translateX(0); } .rail-backdrop{ display:block; top:56px; } .rail-backdrop.show{ opacity:1; pointer-events:auto; } .stage{ padding:16px 10px 70px; } /* Objetivos táctiles más grandes: 44px es el mínimo recomendado para dedos. */ .icon-btn{ width:38px; height:38px; } .tool-btn{ padding:11px 2px; font-size:10.5px; gap:5px; } .tool-btn svg{ width:19px; height:19px; } .add-page-btn{ padding:13px; font-size:13px; } .rail-tab{ padding:14px 6px; } .zoom-readout{ padding:8px 4px; } } @media (max-width: 420px){ .btn{ padding:7px 7px; } }