/* descarga.css — Pantalla de descarga */ main { align-items: center; } .card { max-width: 720px; } .card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; } .card-title { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 4px; } .card-desc { font-size: 13px; color: var(--muted); line-height: 1.45; } .btn-refresh { flex-shrink: 0; width: 32px; height: 32px; border: 1.5px solid var(--border); border-radius: 6px; background: #fff; color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color 0.15s, color 0.15s, background 0.15s; } .btn-refresh:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-light); } /* State panels */ .state-panel { display: flex; align-items: center; gap: 10px; padding: 20px 0 8px; color: var(--muted); font-size: 13px; } /* Dataset rows */ .dataset-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border); } .dataset-row:last-child { border-bottom: none; } .dataset-info { display: flex; align-items: center; gap: 10px; min-width: 0; } .dataset-icon { width: 32px; height: 32px; background: var(--brand-light); border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--brand); } .dataset-title { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .dataset-file { font-size: 13px; font-weight: 700; color: var(--text); } .dataset-sep { font-size: 13px; color: var(--step-off); } .dataset-sheet { font-size: 13px; font-weight: 500; color: var(--muted); } .dataset-badge { font-size: 11px; font-weight: 600; color: var(--brand); background: var(--brand-light); border-radius: 20px; padding: 1px 8px; margin-left: 2px; } .dataset-cols { font-size: 11.5px; color: var(--muted); margin-top: 4px; line-height: 1.4; } .dataset-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .btn-download { height: 34px; padding: 0 14px; background: var(--brand); color: #fff; border: none; border-radius: 6px; font-family: var(--font); font-size: 13px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: background 0.15s, opacity 0.15s; white-space: nowrap; } .btn-download:hover:not(:disabled) { background: #0a3d16; } .btn-download:active:not(:disabled) { background: #083010; } .btn-download:disabled { opacity: 0.45; cursor: not-allowed; } .btn-view { height: 34px; padding: 0 14px; background: #fff; color: var(--muted); border: 1.5px solid var(--border); border-radius: 6px; font-family: var(--font); font-size: 13px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; white-space: nowrap; transition: border-color 0.15s, color 0.15s, background 0.15s; } .btn-view:hover { border-color: var(--navy-mid); color: var(--navy-mid); background: #f5f7fa; } .row-feedback { font-size: 12px; display: flex; align-items: center; gap: 6px; } .row-feedback.loading { color: var(--muted); } .row-feedback.success { color: var(--success-fg); } .row-feedback.error { color: var(--danger); } .btn-delete { width: 34px; height: 34px; flex-shrink: 0; background: #fff; color: var(--danger); border: 1.5px solid var(--border); border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color 0.15s, background 0.15s; } .btn-delete:hover:not(:disabled) { border-color: var(--danger); background: #fdf1f1; } .btn-delete:disabled { opacity: 0.45; cursor: not-allowed; } /* El rol reader descarga pero no borra: la clase la pone aplicarRolEnPantalla() sobre cuando whoami confirma el rol (ver descarga.js). */ body.role-reader .btn-delete { display: none; } /* Scan loader — inspirado en efectos "light sweep" tipo CodePen: https://codepen.io/dicson/pen/eGZOYq / https://codepen.io/zhanghx/pen/NZpGBY */ .scan-loader { flex-direction: column; align-items: center; gap: 14px; padding: 32px 0 20px; } .scan-frame { position: relative; width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 10px; background: var(--brand-light); } .scan-logo { max-width: 62px; max-height: 62px; object-fit: contain; } .scan-line { position: absolute; left: 0; top: 4%; width: 100%; height: 3px; background: linear-gradient(90deg, transparent, var(--brand) 50%, transparent); box-shadow: 0 0 8px 1px var(--brand); animation: scan-sweep 1.8s ease-in-out infinite; } @keyframes scan-sweep { 0% { top: 4%; opacity: 0; } 12% { opacity: 1; } 50% { top: 92%; opacity: 1; } 88% { opacity: 1; } 100% { top: 4%; opacity: 0; } } /* Header nav link */ .header-nav { margin-left: auto; } .header-nav-link { display: flex; align-items: center; gap: 5px; font-size: 12px; color: rgba(255,255,255,0.55); text-decoration: none; transition: color 0.15s; } .header-nav-link:hover { color: rgba(255,255,255,0.9); } /* ── Paso 1: selector de documentos ───────────────────────────────── El selector se muestra siempre, aun con un solo documento (Linear CES-31): el recorrido es el mismo cantidad de documentos haya. Por eso la grilla usa auto-fill con un mínimo ancho: con una sola tarjeta ésta ocupa el ancho completo y se lee como una fila de lista, no como un cuadrito perdido en una pantalla vacía. */ .doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; padding: 4px 0; } .doc-card { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; font: inherit; padding: 14px 16px; background: #fff; border: 1.5px solid var(--border); border-radius: 8px; cursor: pointer; transition: border-color .12s, background .12s, transform .12s; } .doc-card:hover { border-color: var(--brand); background: var(--brand-light); } .doc-card:active { transform: translateY(1px); } .doc-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } .doc-card-icon { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: none; border-radius: 7px; background: var(--brand-light); color: var(--brand); } .doc-card:hover .doc-card-icon { background: #fff; } .doc-card-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .doc-card-name { font-size: 14px; font-weight: 600; color: var(--text, #111827); } /* El slug es el identificador real: el que explica a dónde fue a parar una carga cuando alguien renombró el archivo. Va apagado pero va. */ .doc-card-slug { font-size: 11px; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .doc-card-meta { font-size: 12px; color: var(--muted); margin-top: 2px; } .doc-card-arrow { flex: none; color: var(--muted); display: flex; align-items: center; } .doc-card:hover .doc-card-arrow { color: var(--brand); } /* ── Paso 2: contexto del documento elegido ─────────────────────── */ .doc-back { display: inline-flex; align-items: center; gap: 4px; font: inherit; font-size: 12px; font-weight: 500; color: var(--muted); background: none; border: none; padding: 4px 6px 4px 0; margin-bottom: 2px; cursor: pointer; border-radius: 4px; } .doc-back:hover { color: var(--brand); } .doc-back:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } .doc-context { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; padding: 0 0 10px; border-bottom: 1px solid var(--border); margin-bottom: 4px; } .doc-context-name { font-size: 14px; font-weight: 600; color: var(--text, #111827); } .doc-context-slug { font-size: 11px; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--panel-alt, #f1f2f4); border-radius: 4px; padding: 1px 6px; } .doc-context-count { font-size: 12px; color: var(--muted); margin-left: auto; }