/* Colores del panel. El acento sale de la marca del documento (temaMarca.ts fija --marca-*); sin marca, el azul. Tema: automático (el del sistema) o elegido en el menú (data-theme en ). */ :root { --bg: #ffffff; --panel: #f6f7f9; --ink: #1d2433; --muted: #6b7385; --line: #e4e7ec; --accent: var(--marca-l, #2f5bea); --accent-soft: var(--marca-soft-l, #e8eeff); --on-accent: var(--marca-on-l, #ffffff); --ok: #1f9d55; --err: #d14343; --warn: #fff2cc; --plan: #b25e09; --plan-soft: #fdf1e3; --cost: #b7791f; color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #1b1d23; --panel: #23262e; --ink: #e8eaf0; --muted: #9aa1b2; --line: #343843; --accent: var(--marca-d, #7d9bff); --accent-soft: var(--marca-soft-d, #2a3352); --on-accent: var(--marca-on-d, #1b1d23); --warn: #4a4220; --plan: #f0a35a; --plan-soft: #3b2a17; --cost: #e0a43a; color-scheme: dark; } } :root[data-theme="dark"] { --bg: #1b1d23; --panel: #23262e; --ink: #e8eaf0; --muted: #9aa1b2; --line: #343843; --accent: var(--marca-d, #7d9bff); --accent-soft: var(--marca-soft-d, #2a3352); --on-accent: var(--marca-on-d, #1b1d23); --warn: #4a4220; --plan: #f0a35a; --plan-soft: #3b2a17; --cost: #e0a43a; color-scheme: dark; } * { box-sizing: border-box; } body { margin: 0; font: 13px/1.5 "Segoe UI", system-ui, sans-serif; color: var(--ink); background: var(--bg); display: flex; flex-direction: column; height: 100vh; overflow: hidden; } /* Cabecera y pie no se encogen ni se van: solo se desplaza la conversación (y la lista de adjuntos, con su tope) */ header, footer, #plan { flex: none; } header { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); } header h1 { font-size: 14px; margin: 0; flex: 1; } .btn { border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 6px; padding: 4px 10px; font: inherit; cursor: pointer; } .btn:disabled { opacity: .45; cursor: default; } .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } #log { flex: 1; overflow-y: auto; padding: 12px 12px 28px; display: flex; flex-direction: column; gap: 22px; } .msg-user { align-self: flex-end; background: var(--accent-soft); padding: 8px 10px; border-radius: 10px; max-width: 90%; white-space: pre-wrap; } .msg-ai { display: flex; flex-direction: column; gap: 6px; } .text { white-space: pre-wrap; } .lib-item .txt span.prog { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1.5; margin-right: 6px; vertical-align: 1px; } .vprev { border: 1px dashed var(--line); border-radius: 8px; padding: 6px 8px; margin-bottom: 6px; font-size: 12px; background: var(--bg); } .vprev-cab { display: flex; align-items: center; gap: 6px; color: var(--muted); } .vprev-cab b { color: var(--ink); font-weight: 600; } .vprev-cab span { flex: 1; min-width: 0; } .vprev-cab .btn { padding: 0 4px; } .vprev-marcar { display: flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--muted); font-size: 11px; } .vprev-marcar .btn { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; } .vprev pre mark.seudo { cursor: pointer; } .vprev pre { user-select: text; cursor: text; margin: 4px 0 0; white-space: pre-wrap; word-break: break-word; font: inherit; max-height: 30vh; overflow: auto; } mark.seudo { background: var(--warn); color: inherit; border-radius: 3px; padding: 0 2px; font-weight: 600; outline: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); } /* Respuestas del agente en markdown: tablas, listas y títulos legibles */ .text.md { white-space: normal; overflow-wrap: anywhere; } .md p { margin: 0 0 8px; } .md > :last-child { margin-bottom: 0; } .md .md-h { margin: 12px 0 6px; line-height: 1.3; } .md h3.md-h { font-size: 15px; } .md h4.md-h { font-size: 14px; } .md h5.md-h, .md h6.md-h { font-size: 13px; } .md ul, .md ol { margin: 0 0 8px; padding-left: 20px; } .md li { margin: 2px 0; } .md li.sub { margin-left: 16px; list-style-type: circle; } .md blockquote { margin: 0 0 8px; padding: 2px 10px; border-left: 3px solid var(--line); color: var(--muted); } .md hr { border: 0; border-top: 1px solid var(--line); margin: 10px 0; } .md .md-code { margin: 0 0 8px; padding: 8px 10px; background: var(--panel); border-radius: 6px; overflow-x: auto; font: 12px/1.45 Consolas, monospace; white-space: pre; } .md .md-code code { background: none; padding: 0; } .md-table-wrap { margin: 4px 0 10px; } .md-table-actions { display: flex; justify-content: flex-end; gap: 4px; margin-bottom: 3px; } .tbl-act { display: inline-flex; align-items: center; gap: 4px; border: 1px solid transparent; background: none; color: var(--muted); font: inherit; font-size: 11px; padding: 2px 6px; border-radius: 6px; cursor: pointer; } .tbl-act:hover { border-color: var(--line); color: var(--ink); background: var(--panel); } .tbl-act:disabled { opacity: .5; cursor: default; } /* Siguientes pasos accionables */ .ns-lista > li { margin-bottom: 4px; } .ns-acciones { display: inline-flex; gap: 4px; margin-left: 6px; vertical-align: middle; } .ns-btn { display: inline-flex; align-items: center; gap: 3px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); border-radius: 999px; padding: 1px 8px; font-size: 11px; cursor: pointer; line-height: 18px; } .ns-btn svg { width: 11px; height: 11px; } .ns-btn:hover { color: var(--ink); border-color: var(--accent); } .ns-btn.ns-hacer { color: var(--accent); border-color: var(--accent); } .ns-btn.ns-hacer:hover { background: var(--accent); color: var(--on-accent); } .ns-hecho > .ns-acciones .ns-hacer { opacity: .5; } /* Tarjeta para elegir la empresa de a3ECO (comun/contabilidad/tarjetaEmpresa.ts): cada empresa es un siguiente paso */ .emp-card { border: 1px solid var(--line); border-radius: 10px; padding: 10px; margin: 6px 0; display: flex; flex-direction: column; gap: 6px; } .emp-titulo { margin: 0; font-size: 13px; } .emp-card .mas-buscar { margin: 0; } .emp-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 300px; overflow-y: auto; } .ns-btn.emp-btn { width: 100%; flex-direction: column; align-items: flex-start; gap: 1px; padding: 6px 10px; border-radius: 8px; background: var(--bg); color: var(--ink); font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; } .emp-btn small { color: var(--muted); font-size: 11.5px; } .emp-btn:disabled { opacity: .45; cursor: default; } .ns-btn.emp-btn.emp-elegida { opacity: 1; border-color: var(--accent); background: var(--accent-soft); } .emp-vacio { color: var(--muted); font-size: 12px; padding: 2px 4px; margin: 0; } .tbl-act.done { color: var(--ok); } .tbl-act .ic { width: 13px; height: 13px; } .md-table { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; } .md-table table { border-collapse: collapse; width: 100%; font-size: 12px; } .md-table th, .md-table td { padding: 5px 9px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; } .md-table td:first-child, .md-table th:first-child { white-space: normal; min-width: 120px; } .md-table th { background: var(--panel); font-weight: 600; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .03em; } .md-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--panel) 55%, transparent); } .md-table tbody tr:last-child td { border-bottom: 0; } .md-table tr.total td { font-weight: 700; border-top: 1px solid var(--muted); background: var(--panel); } .md-table .num { text-align: right; font-variant-numeric: tabular-nums; } .md-table .mid { text-align: center; } .cite { color: var(--accent); background: var(--accent-soft); border-radius: 4px; padding: 0 3px; cursor: pointer; font-family: Consolas, monospace; font-size: 12px; } details.thinking { color: var(--muted); font-size: 12px; border-left: 2px solid var(--line); padding-left: 8px; } details.thinking pre { white-space: pre-wrap; font: inherit; margin: 4px 0 0; } .tool { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); background: var(--panel); border-radius: 6px; padding: 3px 8px; width: fit-content; max-width: 100%; } .tool .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: pulse 1s infinite; flex: none; } .tool.ok .dot { background: var(--ok); animation: none; } .tool.err .dot { background: var(--err); animation: none; } .tool .arg { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @keyframes pulse { 50% { opacity: .3; } } /* Panel del plan: barra compacta fija encima del chat, desplegable y editable */ #plan { margin: 0 12px; max-height: 40vh; overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; display: block; } #plan[hidden] { display: none; } #plan .pl-bar { display: flex; align-items: center; gap: 6px; min-height: 24px; } #plan .pl-toggle { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0; color: var(--ink); font: inherit; font-size: 12px; cursor: pointer; text-align: left; } #plan .pl-toggle:disabled { cursor: default; } #plan .pl-toggle svg { width: 14px; height: 14px; flex: none; color: var(--muted); } #plan .pl-toggle b { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } #plan .pl-prog { font-size: 11px; font-weight: 600; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 0 6px; } #plan .pl-now { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #plan .pl-edit { padding: 2px 6px; } #plan .pl-live { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); margin-top: 2px; } #plan .pl-live .pl-act { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #plan .pl-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; animation: pulse 1.2s infinite; } #plan .pl-list { margin: 6px 0 0; padding: 0; max-height: 34vh; overflow: auto; } #plan .pl-list li { list-style: none; padding: 2px 0; display: flex; align-items: flex-start; gap: 7px; font-size: 12px; } #plan .pl-st { width: 11px; height: 11px; margin-top: 3px; flex: none; border-radius: 50%; border: 1.5px solid var(--muted); background: none; padding: 0; cursor: pointer; } #plan .pl-fijo { display: inline-block; cursor: default; } #plan li.in_progress { font-weight: 600; } #plan li.in_progress .pl-st { border-color: var(--accent); background: linear-gradient(90deg, var(--accent) 50%, transparent 50%); } #plan li.done span { color: var(--muted); text-decoration: line-through; } #plan li.done .pl-st { border-color: var(--ok); background: var(--ok); } #plan .pl-aviso { margin-top: 6px; font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } #plan .pl-nota { font-size: 11px; color: var(--muted); } #plan .pl-editor li { align-items: center; gap: 4px; } #plan .pl-editor .pl-txt { flex: 1; min-width: 0; font: inherit; font-size: 12px; padding: 3px 6px; border: 1px solid var(--line); border-radius: 6px; } #plan .pl-editor .pl-sel { font: inherit; font-size: 11px; padding: 2px; border: 1px solid var(--line); border-radius: 6px; } #plan .pl-editor .btn { padding: 2px 4px; } #plan .pl-acciones { display: flex; align-items: center; gap: 6px; margin-top: 6px; } #plan .pl-esp { flex: 1; } #suggest { display: flex; flex-wrap: wrap; gap: 6px; } #suggest button { border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 14px; padding: 5px 10px; font: inherit; font-size: 12px; cursor: pointer; text-align: left; } #suggest button:hover { border-color: var(--accent); } .empty { color: var(--muted); } /* Enlace dentro de una nota (p. ej. «Volver a ese hilo» cuando otro sigue respondiendo en segundo plano) */ .empty button.link { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; } footer { border-top: 1px solid var(--line); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; } textarea { width: 100%; resize: none; min-height: 56px; overflow-y: hidden; line-height: 1.45; border: 1px solid var(--line); border-radius: 8px; padding: 8px; font: inherit; color: var(--ink); background: var(--bg); } .row { display: flex; gap: 6px; align-items: center; } #usage { flex: 1; font-size: 11px; color: var(--muted); } dialog { border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); max-width: 90vw; } dialog .row { justify-content: flex-end; margin-top: 10px; } /* Confirmaciones de seguridad: rojo (peligro) o ámbar (aviso), con el botón de seguir del mismo color */ dialog#confirm.peligro { background: #fef2f2; border: 2px solid #dc2626; color: #7f1d1d; } dialog#confirm.aviso { background: #fffbeb; border: 2px solid #d97706; color: #78350f; } dialog#confirm.peligro::backdrop { background: rgba(127, 29, 29, 0.35); } dialog#confirm.aviso::backdrop { background: rgba(120, 53, 15, 0.3); } dialog#confirm.peligro #confirm-msg, dialog#confirm.aviso #confirm-msg { font-weight: 600; display: flex; gap: 6px; align-items: flex-start; } dialog#confirm.peligro #confirm-msg svg { color: #dc2626; flex: none; margin-top: 2px; } dialog#confirm.aviso #confirm-msg svg { color: #d97706; flex: none; margin-top: 2px; } dialog#confirm.peligro .btn.primary { background: #dc2626; border-color: #dc2626; color: #fff; } dialog#confirm.aviso .btn.primary { background: #d97706; border-color: #d97706; color: #fff; } dialog input, dialog textarea { width: 100%; margin-top: 6px; } dialog input { border: 1px solid var(--line); border-radius: 6px; padding: 6px; font: inherit; background: var(--bg); color: var(--ink); } /* Panel de automatizaciones */ .panel { margin: 0 12px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; display: none; max-height: 40vh; overflow-y: auto; } .panel.open { display: block; } .panel h2 { font-size: 12px; margin: 0 0 6px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; } .auto { display: flex; align-items: center; gap: 6px; padding: 4px 0; border-top: 1px solid var(--line); } .auto:first-of-type { border-top: none; } .auto .info { flex: 1; min-width: 0; } .auto .info b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .auto .info span { font-size: 11px; color: var(--muted); } .save-auto { align-self: flex-start; font-size: 12px; } /* Tarjeta de Office Script */ .script { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; } .script .head { background: var(--panel); padding: 6px 10px; display: flex; gap: 6px; align-items: center; } .script .head b { flex: 1; } .script pre { margin: 0; padding: 8px 10px; max-height: 220px; overflow: auto; font: 11px/1.45 Consolas, monospace; white-space: pre; } .script .how { font-size: 12px; color: var(--muted); padding: 6px 10px; border-top: 1px solid var(--line); } /* Visuales del chat (comun/ui/visual.ts): gráficos, cifras y esquemas en un iframe aislado que se ajusta a su alto */ .vis { flex: none; } .vis .head b { display: inline-flex; align-items: center; gap: 6px; min-width: 0; } .vis .head svg { width: 14px; height: 14px; flex: none; } .vis-btn { display: inline-flex; align-items: center; padding: 2px 6px; color: var(--muted); } .vis-btn svg { width: 13px; height: 13px; } .vis-cuerpo { padding: 10px 12px 6px; background: var(--bg); } .vis-marco { display: block; width: 100%; height: 120px; border: 0; background: transparent; } .vis-aviso { font-size: 11.5px; color: var(--muted); padding: 4px 12px 8px; } .vis-aviso.err { color: var(--err); } .vis-grande { position: fixed; inset: 0; z-index: 60; background: var(--bg); display: flex; flex-direction: column; } .vis-cab { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); } .vis-cab b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vis-cab .btn svg { width: 14px; height: 14px; } .vis-marco.lleno { flex: 1; height: auto; } /* Formularios declarativos (comun/ui/formulario.ts): en el chat como tarjeta o dentro de un panel */ /* En el chat (columna flex con alto fijo) no se encoge: con overflow hidden quedaría en 2 px */ .fd { flex: none; } .fd .head b { display: inline-flex; align-items: center; gap: 6px; } .fd .head svg { width: 14px; height: 14px; } .fd-panel { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; } .fd-panel > .head { background: var(--panel); padding: 6px 10px; display: flex; gap: 6px; align-items: center; } .fd-panel > .head b { flex: 1; } .fd-cuerpo { display: grid; gap: 6px; padding: 8px 10px; } .fd-desc { margin: 0; font-size: 12px; color: var(--muted); } .fd-barra { height: 6px; background: var(--line); border-radius: 999px; overflow: hidden; display: flex; } .fd-barra i { display: block; height: 100%; } .fd-ley { display: flex; gap: 10px; flex-wrap: wrap; font-size: 11px; color: var(--muted); } .fd-faltan { margin: 0; font-size: 11.5px; color: var(--muted); } .fd-lote { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; background: var(--plan-soft); border-radius: 8px; padding: 6px 8px; font-size: 12px; } .fd-lote span { flex: 1; min-width: 10em; } .fd-sec { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; } .fd-sec > header { display: flex; align-items: center; gap: 6px; padding: 5px 10px; background: var(--panel); cursor: pointer; border: 0; } .fd-sec > header b { flex: 1; font-size: 12.5px; } .fd-cuenta { font: 10.5px Consolas, monospace; color: var(--muted); } .fd-chev { color: var(--muted); } .fd-sec.cerrada .fd-chev { transform: rotate(-90deg); } .fd-sec.cerrada .fd-campos { display: none; } .fd-campos { display: grid; gap: 8px; padding: 8px 10px; border-top: 1px solid var(--line); } /* min-width 0: un campo nunca se sale de su columna (con su «Confirmar» al lado se montaba sobre el de al lado) */ .fd-c { display: grid; gap: 2px; min-width: 0; } .fd-c > * { min-width: 0; } /* De dónde salió el dato: dos líneas como mucho (entero, al pasar el ratón) */ .fd-c > .fd-orig { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; } .fd-top { display: flex; align-items: baseline; gap: 6px; } .fd-top label { flex: 1; font-size: 12px; font-weight: 600; } .fd-fila { display: flex; gap: 4px; } .fd-fila input, .fd-fila select { flex: 1; min-width: 0; font: inherit; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); } .fd-c.propuesto .fd-fila input, .fd-c.propuesto .fd-fila select { border-color: var(--plan); background: var(--plan-soft); } /* Lo que la IA propone en los campos de una pantalla de App (rellenar_pantalla), hasta que el usuario lo toca */ .ia-propuesto input:not([type="checkbox"]):not([type="search"]), .ia-propuesto textarea, .ia-propuesto .crm-desp-btn, input.ia-propuesto, select.ia-propuesto, textarea.ia-propuesto { border-color: var(--plan) !important; background: var(--plan-soft) !important; } label.ia-propuesto > span:first-child::after { content: " · propuesto por la IA"; color: var(--plan); font-weight: 600; } .fd-c.confirmado .fd-fila input, .fd-c.confirmado .fd-fila select { border-color: var(--ok); } .fd-c.mal .fd-fila input { border-color: var(--err); } .fd-ok { color: var(--plan); border-color: var(--plan); } .fd-est { font-size: 10.5px; padding: 0 7px; border-radius: 999px; white-space: nowrap; border: 1px solid var(--line); color: var(--muted); } .fd-est.propuesto { color: var(--plan); background: var(--plan-soft); border-color: transparent; } .fd-est.confirmado { color: var(--ok); border-color: var(--ok); } .fd-orig { font-size: 11px; color: var(--muted); } .fd-orig .fd-ir { border: 0; background: none; padding: 0; font: inherit; color: var(--accent); text-decoration: underline; cursor: pointer; } .fd-orig b { color: var(--ink); font-weight: 600; } .fd-nota { font-size: 11px; color: var(--muted); } .fd-nota.error { color: var(--err); } .fd-nota.aviso { color: var(--plan); } .fd-alt { display: grid; gap: 4px; font-size: 11px; background: var(--accent-soft); border-radius: 6px; padding: 5px 7px; } .fd-zona { flex: 1; display: flex; align-items: center; gap: 6px; border: 1.5px dashed var(--line); border-radius: 8px; padding: 6px 8px; font-size: 12px; color: var(--muted); cursor: pointer; position: relative; } .fd-zona svg { width: 14px; height: 14px; flex: none; } .fd-zona span { word-break: break-all; } .fd-zona.sobre { border-color: var(--accent); background: var(--accent-soft); } .fd-zona.off { cursor: default; opacity: .7; } .fd-plegar { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; font-size: 11.5px; color: var(--muted); } .fd-plegar svg { width: 13px; height: 13px; } .fd-guardar { display: grid; gap: 4px; padding: 6px 10px; background: var(--accent-soft); border-top: 1px solid var(--line); } .fd-guardar input { flex: 1; min-width: 0; font: inherit; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); } .fd-guardar > .btn { justify-self: start; } .fd.plegado .fd-cuerpo { display: none; } .fd.plegado .fd-plegar .fd-chev { transform: rotate(-90deg); } .fd-general { flex: none; align-items: flex-start; } .fd-general b { color: var(--ink); font-weight: 600; } .fd-general span { word-break: normal; } .fd-zona input { position: absolute; width: 1px; height: 1px; opacity: 0; } .fd-pie { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 6px; } .fd-pie > .fd-orig { flex: 1; min-width: 10em; } .fd-botones { display: inline-flex; gap: 6px; margin-left: auto; } .fd.cerrado .fd-fila input, .fd.cerrado .fd-fila select { opacity: .8; } /* Formularios: aspecto (acento de la marca elegida en --fd-acento; el resto, con los tokens del panel) */ /* overflow: clip (no hidden) para que el pie fijo se pegue al chat mientras se ve el formulario */ .fd { --fd-a: var(--fd-acento, var(--accent)); --fd-a-suave: color-mix(in srgb, var(--fd-a) 10%, var(--bg)); border-top: 3px solid var(--fd-a); overflow: clip; } .fd > .head { padding: 8px 12px; } .fd > .head b { font-size: 13.5px; } .fd > .head > b svg { color: var(--fd-a); } .fd-cuerpo { gap: 8px; padding: 10px 12px 0; } .fd-progreso { display: flex; align-items: center; gap: 8px; } .fd-progreso .fd-barra { flex: 1; height: 8px; } .fd-progreso > b { font-size: 12px; font-variant-numeric: tabular-nums; min-width: 3.2em; text-align: right; } .fd-barra i.hecho { background: var(--fd-a); } .fd-barra i.prop { background: color-mix(in srgb, var(--plan) 70%, var(--bg)); } .fd-ley .prop { color: var(--plan); } .fd-sec { border-radius: 10px; } .fd-sec > header { padding: 7px 12px; } .fd-sec > header b { font-size: 12.5px; } .fd-sec.completa > header { background: color-mix(in srgb, var(--ok) 9%, var(--panel)); } .fd-sec.completa .fd-cuenta { color: var(--ok); font-family: inherit; display: inline-flex; align-items: center; gap: 3px; } .fd-cuenta svg { width: 12px; height: 12px; } .fd-campos { gap: 12px; padding: 10px 12px 12px; } .fd-top label { font-weight: 600; } .fd-oblig { color: var(--fd-a); } .fd-est { display: inline-flex; align-items: center; gap: 3px; } .fd-est svg { width: 11px; height: 11px; } .fd-fila input, .fd-fila select { padding: 6px 8px; border-radius: 7px; transition: border-color .12s, box-shadow .12s; } .fd-fila input:focus, .fd-fila select:focus, .fd-guardar input:focus { outline: none; border-color: var(--fd-a); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fd-a) 22%, transparent); } .fd-seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--bg); } .fd-seg button { border: 0; border-right: 1px solid var(--line); background: transparent; color: var(--ink); font: inherit; font-size: 12.5px; padding: 5px 14px; cursor: pointer; } .fd-seg button:last-child { border-right: 0; } .fd-seg button:hover:not(:disabled) { background: var(--panel); } .fd-seg button.on { background: var(--fd-a-suave); color: var(--fd-a); font-weight: 600; box-shadow: inset 0 -2px 0 var(--fd-a); } .fd-seg button:focus-visible { outline: 2px solid var(--fd-a); outline-offset: -2px; } .fd-c.propuesto .fd-seg { border-color: var(--plan); background: var(--plan-soft); } .fd-c.confirmado .fd-seg { border-color: var(--ok); } .fd-general { padding: 10px 12px; gap: 10px; border-color: color-mix(in srgb, var(--fd-a) 35%, var(--line)); background: var(--fd-a-suave); } .fd-general svg { width: 18px; height: 18px; color: var(--fd-a); margin-top: 1px; } .fd-general span { display: grid; gap: 1px; } .fd-general small { font-size: 11.5px; color: var(--muted); } .fd .btn.primary { background: var(--fd-a); border-color: var(--fd-a); } .fd-pie { position: sticky; bottom: 0; background: var(--bg); padding: 8px 0 10px; margin-top: 2px; z-index: 1; } /* Secciones repetibles (una tarjeta por fila), calculados y avisos de las reglas */ .fd-filarep { border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px 8px; display: grid; gap: 8px 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .fd-filarep > header { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); padding: 0; border: 0; background: none; } .fd-filarep .fd-c { min-width: 0; } .fd-filarep .fd-fila { flex-wrap: wrap; } .fd-filarep .fd-fila input, .fd-filarep .fd-fila select { flex: 1 1 5em; width: 0; } .fd-filarep .fd-top label { flex: 1 1 100%; } .fd-filarep > header b { flex: 1; color: var(--ink); font-weight: 600; } .fd-filarep .fd-c.ancho { grid-column: 1 / -1; } .fd-filarep .fd-top { flex-wrap: wrap; } .fd-quitar { padding: 0 7px; font-size: 11px; color: var(--muted); } .fd-mas { justify-self: start; color: var(--fd-a); border-color: color-mix(in srgb, var(--fd-a) 40%, var(--line)); } .fd-c.calc .fd-fila input[readonly] { background: var(--panel); border-style: dashed; } .fd-est.calculado { color: var(--muted); border-style: dashed; } .fd-reglas { display: grid; gap: 3px; background: color-mix(in srgb, var(--err) 7%, var(--bg)); border-radius: 8px; padding: 6px 8px; } .fd-reglas.aviso { background: var(--plan-soft); } /* Vista grande (o un panel ancho): los campos van en rejilla de columnas, como un formulario de escritorio; nunca un campo de lado a lado de la pantalla. Se mide el ancho de la propia tarjeta, no el de la ventana */ .fd { container-type: inline-size; } .fd.fd-tarjeta { max-width: 1100px; } @container (min-width: 600px) { .fd-campos { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); column-gap: 16px; align-items: start; } .fd-campos > .fd-orig, .fd-campos > .fd-filarep, .fd-campos > .fd-mas { grid-column: 1 / -1; } .fd-campos > .fd-c.ancho { grid-column: span 2; } .fd-filarep { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .fd-filarep .fd-c.ancho { grid-column: span 2; } .fd-general, .fd-lote, .fd-reglas, .fd-faltan, .fd-desc { max-width: 900px; } } @container (min-width: 1100px) { .fd-campos { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } .fd-campos > .fd-c.ancho { grid-column: span 3; } } /* Adjuntos */ #chips { display: flex; flex-wrap: wrap; gap: 6px; max-height: 28vh; overflow-y: auto; } #chips:empty { display: none; } /* Contexto que va solo con el mensaje (la pantalla de la App, la selección), como el archivo abierto en VS Code */ .ctx-pastillas { display: flex; flex-wrap: wrap; gap: 6px; } .ctx-pastillas:empty { display: none; } .ctx-pastilla { display: inline-flex; align-items: center; max-width: 100%; font-size: 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); overflow: hidden; } .ctx-pastilla button { border: none; background: none; font: inherit; color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; } .ctx-pastilla .ctx-ver { gap: 5px; padding: 3px 4px 3px 9px; min-width: 0; } .ctx-pastilla .ctx-ver span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ctx-pastilla .ctx-ver:hover span { text-decoration: underline; } .ctx-pastilla .ctx-ojo { padding: 3px 8px 3px 4px; color: var(--muted); } .ctx-pastilla .ctx-ojo:hover { color: var(--accent); } .ctx-pastilla .ic { width: 13px; height: 13px; flex: none; } .ctx-pastilla .ctx-ver .ic { color: var(--accent); } .ctx-pastilla.apagada { border-style: dashed; background: transparent; } .ctx-pastilla.apagada .ctx-ver { color: var(--muted); } .ctx-pastilla.apagada .ctx-ver span { text-decoration: line-through; } .ctx-pastilla.apagada .ctx-ver .ic { color: var(--muted); } .ctx-pastilla { position: relative; overflow: visible; } .ctx-pastilla .ctx-alcance { padding: 3px 2px; color: var(--muted); } .ctx-pastilla .ctx-alcance:hover { color: var(--accent); } /* Ya va en una @ del mensaje: no se repite */ .ctx-pastilla.cubierta { border-style: dashed; } .ctx-pastilla.cubierta .ctx-ver > span:not(.ctx-nota) { color: var(--muted); } .ctx-pastilla .ctx-nota { font-size: 11px; color: var(--muted); } .ctx-pastilla.mencion { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 35%, transparent); } .ctx-pastilla.mencion .ctx-ver { cursor: default; } .ctx-pastilla.mencion .ctx-ver:hover span { text-decoration: none; } .ctx-menu { position: absolute; left: 0; bottom: calc(100% + 4px); z-index: 30; min-width: 170px; display: flex; flex-direction: column; padding: 4px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 20px rgb(0 0 0 / .12); } .ctx-menu button { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: none; border-radius: 6px; background: none; font: inherit; font-size: 12.5px; color: var(--ink); text-align: left; cursor: pointer; } .ctx-menu button:hover { background: var(--panel); } .ctx-menu .ic, .ctx-menu .ctx-menu-hueco { width: 13px; height: 13px; flex: none; color: var(--accent); } .chip { display: flex; align-items: center; gap: 4px; font-size: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 2px 4px 2px 8px; max-width: 100%; } .chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chip button { border: none; background: none; color: var(--muted); cursor: pointer; font-size: 14px; } .chip.loading { opacity: .6; } .chip button.chip-guardar { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--accent); border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px; background: var(--bg); } .chip button.chip-guardar .ic { width: 12px; height: 12px; } .chip button.chip-guardar:disabled { color: var(--muted); cursor: default; } /* Herramientas de cada adjunto (Clasificador, Extractor, Biblioteca): el mismo chip en todas partes. Gris: disponible; color de la marca: hecho, con su resultado; naranja: decides tú. El Escudo conserva su verde (no es de la marca) */ .chip button.chip-herr, .chip button.chip-guardar { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px; background: var(--bg); max-width: 170px; } .chip button.chip-herr .ic, .chip button.chip-guardar .ic { width: 12px; height: 12px; } .chip button.chip-herr:hover, .chip button.chip-guardar:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); } .chip button.chip-herr.hecho, .chip button.chip-guardar.hecho { background: var(--accent-soft); border-color: transparent; color: var(--accent); font-weight: 600; } .chip button.chip-herr.decide { background: var(--plan-soft); border-color: transparent; color: var(--plan); font-weight: 600; } .chip button.chip-herr.trabaja { color: var(--accent); } .chip button.chip-herr { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Con herramientas, si no caben en la línea del nombre, bajan enteras a la siguiente (nunca se aprietan ni se parten) */ #chips .chip:has(.chip-herr) { flex-wrap: wrap; row-gap: 3px; } #chips .chip:has(.chip-herr) > span:first-child { flex: 1 1 140px; min-width: 0; } #chips .chip > .chip-escudo, #chips .chip > .chip-herr, #chips .chip > .chip-guardar { flex: none; white-space: nowrap; } body.dragging::after { content: "Suelta aquí archivos, carpetas o ZIP"; position: fixed; inset: 8px; display: grid; place-items: center; border: 2px dashed var(--accent); border-radius: 12px; background: color-mix(in srgb, var(--bg) 85%, transparent); color: var(--accent); font-weight: 600; pointer-events: none; } .msg-user .files { font-size: 11px; opacity: .75; margin-top: 4px; } .msg-user .files-guardar { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--ink); font: inherit; font-size: 11px; padding: 2px 8px; cursor: pointer; } .msg-user .files-guardar:disabled { opacity: .6; cursor: default; } .chip.todos { background: var(--bg); cursor: pointer; padding: 2px 8px; color: var(--accent); } .chip.quitar-todos { color: var(--muted); } /* Modo de trabajo y tarjeta de plan */ .btn.mode { font-size: 12px; } /* Iconos vectoriales */ .ic { width: 1.15em; height: 1.15em; vertical-align: -.22em; flex: none; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; } .ic.spin { animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Selector de modelo y esfuerzo (como el de ChatGPT) */ .picker { position: static; } footer .row { position: relative; } /* la ventanita se alinea con el panel, no con el botón: cabe en paneles estrechos */ .btn.pill { border-radius: 999px; font-size: 12px; white-space: nowrap; } .btn.pill .ic:last-child { width: .95em; height: .95em; color: var(--muted); } .pop { position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 30; width: min(230px, 100%); background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 10px; box-shadow: 0 6px 20px rgba(0,0,0,.14); display: flex; flex-direction: column; gap: 8px; font-size: 12px; } .mas-pop { width: min(290px, 100%); padding: 6px; gap: 2px; font-size: 13px; } .mas-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 8px; border: 0; border-radius: 8px; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; } .mas-item:hover, .mas-item:focus-visible { background: var(--panel); outline: none; } .mas-item .ic { flex: none; width: 16px; height: 16px; color: var(--muted); } .mas-txt { flex: 1; min-width: 0; } .mas-der { color: var(--muted); font-size: 12px; white-space: nowrap; } .mas-volver b { font-weight: 600; } .mas-anadir { cursor: default; padding: 4px 4px 4px 8px; } .mas-anadir:hover { background: none; } .mas-opc { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--ink); font: inherit; font-size: 12.5px; cursor: pointer; } .mas-opc:hover, .mas-opc:focus-visible { border-color: var(--accent); color: var(--accent); outline: none; } .mas-opc .ic { width: 14px; height: 14px; color: currentColor; } .mas-pop hr { border: 0; border-top: 1px solid var(--line); margin: 4px 2px; width: auto; } /* Descargar ▾ (descargar o enviar por correo): ventanita fija junto al botón */ .menu-descarga { position: fixed; bottom: auto; width: auto; min-width: 200px; z-index: 1200; } .btn .ic.flecha-menu { width: .9em; height: .9em; color: var(--muted); margin-left: -1px; } .aviso-breve { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 1201; display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: var(--ink); color: var(--bg); font-size: 12.5px; box-shadow: 0 6px 20px rgba(0,0,0,.2); cursor: pointer; } .aviso-breve.alerta { background: #b42318; color: #fff; } /* Formulario de «Enviar por correo» */ dialog.form-correo { width: min(460px, calc(100vw - 24px)); padding: 14px 16px; } dialog.form-correo::backdrop { background: rgba(0,0,0,.3); } .form-correo form { display: flex; flex-direction: column; gap: 8px; } .form-correo p { margin: 0; } .form-correo .fc-tit { font-size: 14px; display: flex; gap: 6px; align-items: center; } .form-correo .fc-adj { display: flex; gap: 6px; align-items: center; font-size: 12px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); overflow-wrap: anywhere; } .form-correo label { display: flex; flex-direction: column; font-size: 12px; color: var(--muted); } .form-correo input, .form-correo textarea { margin-top: 3px; color: var(--ink); font-size: 13px; } .form-correo textarea { resize: vertical; overflow-y: auto; min-height: 90px; } .form-correo .fc-error { color: var(--err); font-size: 12px; display: flex; gap: 6px; align-items: flex-start; } .form-correo .fc-destino { font-size: 11.5px; } .form-correo .row { margin-top: 2px; } .mas-lista { display: flex; flex-direction: column; gap: 2px; } .mas-nota { margin: 4px 8px; color: var(--muted); font-size: 12px; } .mas-con { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; } .mas-con > .ic { flex: none; width: 16px; height: 16px; color: var(--muted); } .mas-con-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; } .mas-con-txt small { color: var(--muted); font-size: 11.5px; line-height: 1.35; } .mas-con.proximo { opacity: .7; } .mas-link { border: 0; background: none; padding: 0; color: var(--accent); font: inherit; font-size: 11.5px; cursor: pointer; text-align: left; } .mas-link:hover { text-decoration: underline; } .mas-con-txt small.mas-vinculo { color: var(--accent); } .mas-ayuda { padding: 6px 8px 4px; color: var(--muted); } .mas-buscar { margin: 2px 8px 6px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); font: inherit; font-size: 13px; } .mas-buscar:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); } .mas-lista:has(> .mas-item) { max-height: 280px; overflow-y: auto; } .sw { flex: none; width: 34px; height: 20px; border-radius: 999px; border: 0; padding: 0; background: var(--line); position: relative; cursor: pointer; transition: background .15s; } .sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; } .sw[aria-checked="true"] { background: var(--accent); } .sw[aria-checked="true"]::after { transform: translateX(14px); } .sw:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .pop-head { display: flex; align-items: center; gap: 6px; font-size: 13px; } .pop-head .ic { color: var(--muted); } .pop-head b { font-weight: 700; } #pop-effort { color: var(--muted); font-weight: 600; } .seg { display: flex; gap: 2px; padding: 2px; background: var(--panel); border-radius: 8px; } .seg button { flex: 1; border: 0; background: transparent; color: var(--muted); border-radius: 6px; padding: 3px; font: inherit; cursor: pointer; } .seg button[aria-checked="true"] { background: var(--bg); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.14); } .slider { --h: 20px; --p: .25; position: relative; height: var(--h); border-radius: 999px; background: var(--line); } .slider .fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--accent); width: calc((100% - var(--h)) * var(--p) + var(--h)); transition: width .15s; } .slider .dot { position: absolute; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; left: calc(var(--h) / 2 + (100% - var(--h)) * var(--i) / 4); background: var(--muted); opacity: .6; pointer-events: none; } .slider .dot.on { background: var(--on-accent); opacity: .75; } .slider input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; } .slider input::-webkit-slider-runnable-track { height: var(--h); background: transparent; } .slider input::-moz-range-track { height: var(--h); background: transparent; } .slider input::-webkit-slider-thumb { -webkit-appearance: none; width: var(--h); height: var(--h); border-radius: 50%; background: #fff; border: 2px solid var(--accent); box-shadow: 0 1px 3px rgba(0,0,0,.25); } .slider input::-moz-range-thumb { width: var(--h); height: var(--h); border-radius: 50%; box-sizing: border-box; background: #fff; border: 2px solid var(--accent); box-shadow: 0 1px 3px rgba(0,0,0,.25); } .slider input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 999px; } .slider-legend { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); margin-top: -4px; } /* Indicador de coste, como en las reseñas de restaurantes */ .eur { font-weight: 700; letter-spacing: -.5px; color: var(--muted); font-size: 11px; } .seg button[aria-checked="true"] .eur { color: var(--cost); } .cost-row { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); } .eur-scale { font-weight: 700; letter-spacing: -.5px; font-size: 13px; } .eur-scale .off { color: var(--muted); opacity: .35; } .eur-scale .on { color: var(--cost); } .cost-row b { margin-left: auto; font-weight: 600; color: var(--ink); } .pop-hint { margin: 0; font-size: 11px; line-height: 1.35; color: var(--muted); } /* El mismo selector dentro de otra vista (la bandeja de lotes): desplegado bajo su píldora */ .modelo-bloque { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); max-width: 320px; margin-left: auto; } .modelo-bloque .mb-esfuerzo { color: var(--muted); font-weight: 600; } .lt-pildora { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; white-space: nowrap; } /* Vista previa de documentos: ocupa todo el panel, como los artefactos de Claude */ [hidden] { display: none !important; } #viewer { position: fixed; inset: 0; z-index: 50; background: var(--bg); display: flex; flex-direction: column; } #viewer .vhead { display: flex; gap: 6px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--line); } #viewer .vhead b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #viewer select { max-width: 40%; border: 1px solid var(--line); border-radius: 6px; padding: 3px; font: inherit; color: var(--ink); background: var(--bg); } #viewer .vbody { flex: 1; position: relative; background: var(--panel); } /* La ficha del documento en el visor: recogida, su línea de proceso; abierta, Escudo, descripción, recorrido y relacionados */ .v-ficha { flex: none; border-bottom: 1px solid var(--line); container-type: inline-size; max-height: 55vh; overflow-y: auto; } .v-ficha[hidden] { display: none; } .v-ficha > summary { display: flex; align-items: center; gap: 8px; padding: 6px 12px; cursor: pointer; list-style: none; } .v-ficha > summary::-webkit-details-marker { display: none; } .v-ficha > summary > b { flex: none; font-size: 12.5px; } .v-ficha > summary .lib-proc { margin-top: 0; flex: 1; } .v-ficha[open] > summary .lib-proc { visibility: hidden; } @container (min-width: 560px) { .v-ficha .lib-proc .lib-pildoras { display: flex; } .v-ficha .lib-proc .lib-puntos, .v-ficha .lib-proc .lib-proc-txt { display: none; } } .vf-cuerpo { display: flex; flex-direction: column; gap: 8px; padding: 0 12px 10px; font-size: 12.5px; } .vf-escudo { display: flex; align-items: flex-start; gap: 8px; border-radius: 10px; padding: 8px 10px; background: color-mix(in srgb, var(--ok) 10%, var(--bg)); } .vf-escudo > .ic { width: 18px; height: 18px; color: var(--ok); flex: none; margin-top: 1px; } .vf-escudo.gris { background: var(--plan-soft); } .vf-escudo.gris > .ic { color: var(--plan); } .vf-escudo.no { background: var(--panel); } .vf-escudo.no > .ic { color: var(--muted); } .vf-t { display: flex; flex-direction: column; min-width: 0; } .vf-t span { color: var(--muted); font-size: 12px; } .vf-bloque { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; } .vf-et { color: var(--muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; } .vf-desc-txt { margin: 0; } .vf-campos { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px 14px; } .vf-campos div { min-width: 0; } .vf-campos dt { color: var(--muted); font-size: 11px; } .vf-campos dd { margin: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vf-claves { display: flex; flex-wrap: wrap; gap: 4px; } .vf-clave { border: 1px solid var(--line); border-radius: 999px; padding: 0 8px; font-size: 11.5px; color: var(--muted); } .vf-clave::before { content: "#"; opacity: .6; margin-right: 1px; } .vf-paso { display: grid; grid-template-columns: 16px 6.5em 1fr; align-items: center; gap: 8px; } .vf-bola { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; box-sizing: border-box; } .vf-bola .ic { width: 10px; height: 10px; } .vf-paso.hecho .vf-bola { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .vf-paso.decide .vf-bola { border-color: var(--plan); background: var(--plan-soft); } .vf-paso.decide .vf-estado { color: var(--plan); font-weight: 600; } .vf-paso.no { opacity: .55; } .vf-estado { color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; } .vf-unido { display: flex; gap: 8px; align-items: baseline; border: 0; background: none; padding: 2px 0; font: inherit; color: var(--ink); text-align: left; cursor: pointer; min-width: 0; } .vf-unido:hover:not(:disabled) .vf-tit { color: var(--accent); text-decoration: underline; } .vf-unido:disabled { cursor: default; } .vf-que { flex: none; width: 6.5em; color: var(--muted); font-size: 12px; } .vf-tit { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Lo que se hace desde la ficha (fase 5): un botón por paso, la descripción editable, su frontmatter y Proteger */ .vf-paso { grid-template-columns: 16px 6.5em 1fr auto; } .vf-acc { display: flex; gap: 4px; } .vf-acc .btn.mini, .vf-desc .btn { font-size: 12px; padding: 2px 9px; } .vf-progreso:empty { display: none; } .vf-progreso { color: var(--muted); font-size: 12px; } .vf-cab { display: flex; align-items: center; gap: 2px; } .vf-cab .vf-et { flex: 1; } .vf-ico { padding: 3px !important; } .vf-ico .ic { width: 14px; height: 14px; } .vf-ico.on { background: var(--accent-soft); color: var(--accent); } .vf-yaml { margin: 0; background: var(--panel); border-radius: 8px; padding: 8px 10px; font: 11.5px/1.5 Consolas, "Cascadia Mono", monospace; white-space: pre-wrap; overflow-wrap: anywhere; } .vf-yaml[hidden] { display: none; } .vf-nota { margin: 0; color: var(--muted); font-size: 11.5px; } .vf-desc.vacia { border-style: dashed; } .vf-desc.vacia .btn { align-self: flex-start; } .vf-editar { border-color: var(--accent); } .vf-campo { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; color: var(--muted); } .vf-campo textarea, .vf-campo input { font: inherit; font-size: 12.5px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 5px 7px; resize: vertical; } .vf-herr:empty { display: none; } .vf-herr { border-top: 1px dashed var(--line); padding-top: 8px; display: flex; flex-direction: column; gap: 8px; } button.lib-pil { font: inherit; font-size: 11px; cursor: pointer; } button.lib-pil:hover { border-color: var(--accent); color: var(--ink); } button.lib-pil.hecho:hover, button.lib-pil.decide:hover { filter: brightness(.96); } #v-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; } #v-empty { padding: 24px; text-align: center; } #v-pages { position: absolute; inset: 0; overflow: auto; padding: 10px; display: flex; flex-direction: column; align-items: center; gap: 10px; } #v-pages canvas { width: 100%; max-width: 900px; height: auto; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); } .files .btn.see { border-color: var(--accent); color: var(--accent); } /* Biblioteca: también a pantalla completa; la vista previa se abre encima (z-index mayor) */ #library, #apps-ov, #lotes-ov, #history, #skills-ov, #pro-ov, #prot-ov, #nube-ov, #marcas-ov, #ajustes-ov { position: fixed; inset: 0; z-index: 40; background: var(--bg); display: flex; flex-direction: column; } #library .vhead, #apps-ov .vhead, #lotes-ov .vhead, #history .vhead, #skills-ov .vhead, #pro-ov .vhead, #prot-ov .vhead, #nube-ov .vhead, #marcas-ov .vhead, #ajustes-ov .vhead { display: flex; gap: 6px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--line); } #library .vhead b, #apps-ov .vhead b, #lotes-ov .vhead b, #history .vhead b, #skills-ov .vhead b, #pro-ov .vhead b, #prot-ov .vhead b, #nube-ov .vhead b, #marcas-ov .vhead b, #ajustes-ov .vhead b { flex: 1; display: flex; align-items: center; gap: 6px; } /* Datos protegidos */ #prot-btn.on { color: var(--ok); border-color: var(--ok); } #vista-btn.on { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); } #v-ia.on { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); } #prot-body { flex: 1; overflow-y: auto; padding: 8px 10px 16px; display: flex; flex-direction: column; gap: 14px; } .prot-sec { display: flex; flex-direction: column; gap: 6px; } .prot-sec h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 0; } .prot-sec p { margin: 0; } .prot-help { color: var(--muted); font-size: 12px; } .prot-sec > .btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; } .prot-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .prot-row .btn { display: inline-flex; align-items: center; gap: 4px; } .prot-list { display: flex; flex-direction: column; gap: 6px; } .prot-input { flex: 1; min-width: 140px; border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; font: inherit; color: var(--ink); background: var(--bg); } .prot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; font-size: 12px; } .prot-check { display: flex; gap: 6px; align-items: baseline; font-size: 12px; } .prot-check small { color: var(--muted); } .prot-grupo { display: flex; flex-direction: column; gap: 4px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; } .prot-grupo > b { font-size: 12px; } .plan-card.alerta { border-color: var(--err); } /* El escudo se ve siempre, con color: verde si el dato va protegido; del color de la marca si es una acción («Lo que ve Claude», dejar sin proteger). Donde el color ya dice algo (botón principal, interruptor de protegido / sin proteger, avisos de seguridad) manda el de su sitio */ .ic-shieldCheck { color: var(--ok); } .ic-shield { color: var(--accent); } .btn.primary .ic-shield, .btn.primary .ic-shieldCheck, .chip-escudo .ic, .visor-prot .ic, .tr-proteger .ic, .chip-seguridad .ic, .tr-peligro .ic, .visor-chip .ic { color: inherit; } .chip-escudo { font: inherit; font-size: 11px; border: 1px solid var(--ok); color: var(--ok); background: transparent; border-radius: 999px; padding: 1px 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 3px; } .chip-escudo.no { border-color: var(--err); color: var(--err); } .chip-seguridad { font: inherit; font-size: 11px; border: 1px solid; background: transparent; border-radius: 999px; padding: 1px 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 3px; } .chip-seguridad.peligro { border-color: var(--err); color: #fff; background: var(--err); } .chip-seguridad.aviso { border-color: #d97706; color: #fff; background: #d97706; } .chip-guardar.peligro { border-color: var(--err) !important; color: #fff !important; background: var(--err) !important; } .chip-guardar.aviso { border-color: #d97706 !important; color: #fff !important; background: #d97706 !important; } .visor-ov { position: fixed; inset: 0; z-index: 1000; background: var(--bg); color: var(--ink); display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; } .visor-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .visor-cab > button:last-child { margin-left: auto; } /* El título en su línea; debajo, flechas y botones (que pasan de línea si no caben), y la X al final */ .visor-tit { flex: 1 1 100%; min-width: 0; display: flex; align-items: center; gap: 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .visor-tit span { color: var(--muted); overflow: hidden; text-overflow: ellipsis; } .visor-res { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; } .visor-chip { border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; font-size: 12px; } button.visor-chip { font: inherit; font-size: 12px; color: inherit; background: transparent; cursor: pointer; } button.visor-chip:hover { border-color: var(--ink); } .visor-chip.off { text-decoration: line-through; opacity: 0.55; border-style: dashed; } .visor-aviso { color: var(--err); font-size: 12px; } .visor-acc { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 28px; font-size: 12px; } .visor-ayuda { color: var(--muted); } .visor-nota { margin: 2px 0 8px; } .visor-texto { flex: 1; overflow: auto; margin: 0; white-space: pre-wrap; word-break: break-word; font: inherit; font-size: 13px; line-height: 1.5; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; user-select: text; } .visor-texto mark.seudo { cursor: pointer; } .visor-editar { resize: none; color: var(--ink); background: var(--bg); } .doc-adjuntos { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; } .doc-adjuntos[hidden] { display: none; } .doc-adjuntos-tit { width: 100%; display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); } .chip.chip-dentro { margin-left: 14px; } .visor-nav { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); } .visor-flecha { padding: 2px 6px; } .visor-flecha:disabled { opacity: .35; cursor: default; } .visor-pos { min-width: 48px; text-align: center; } .visor-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; } .visor-tab { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); background: transparent; color: var(--muted); border-radius: 999px; padding: 2px 10px; font: inherit; font-size: 12px; cursor: pointer; } .visor-tab.on { color: var(--ink); border-color: var(--ink); font-weight: 600; } /* Tabla de datos del visor: el original al lado de lo que ve Claude */ .visor-tablas { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; } .visor-tablas .lt-tabla-caja { flex: 1; max-height: none; } .visor-tabla-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .visor-tabla-barra .prot-input { flex: 1 1 200px; min-width: 0; } .visor-tabla td { vertical-align: middle; } .visor-tabla .visor-t-ori { font-weight: 600; max-width: 320px; } .visor-tabla .visor-t-num { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); } .visor-tabla tr.visor-t-sep td { background: var(--panel); color: var(--err); font-weight: 600; cursor: default; } .visor-tabla tr.visor-t-claro .visor-t-claro-txt { color: var(--err); } .visor-tabla tr.visor-t-grupo td { background: var(--panel); cursor: default; padding: 4px 8px; white-space: normal; max-width: none; } .visor-tabla tr.visor-t-grupo:hover td { background: var(--panel); } .visor-t-gtit { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; color: var(--ink); font: inherit; font-size: 12px; cursor: pointer; padding: 2px 4px; } .visor-t-gtit span { color: var(--muted); } .visor-t-gtit .ic { width: 14px; height: 14px; } .visor-t-gbtn { font-size: 11px; padding: 1px 8px; margin-left: 8px; } .visor-enviar { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; color: var(--muted); cursor: pointer; } .visor-paginas { flex: 1; min-height: 0; overflow: auto; border: 1px solid var(--line); border-radius: 8px; padding: 10px; background: var(--line); display: flex; flex-direction: column; align-items: safe center; gap: 10px; } .visor-paginas > * { flex: none; } /* El zoom del visor se expresa en cqw/cqh (comun/ui/visorClaude.ts): vale igual en el panel y en su espejo grande */ .visor-paginas { container-type: size; } .visor-paginas[hidden], .visor-texto[hidden], .visor-zoom[hidden], .visor-tablas[hidden] { display: none; } /* En el panel, los controles encima de las páginas; en la vista amplia, en una columna y las páginas a toda la altura */ .visor-main { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; } .visor-lat { flex: none; min-width: 0; display: flex; flex-direction: column; gap: 8px; } .visor-cuerpo { flex: 1; min-height: 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; } .visor-zoom { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; } .visor-estilos { display: inline-flex; gap: 4px; margin-right: 8px; } .visor-estilos[hidden], .visor-pags[hidden] { display: none; } .visor-pags { display: inline-flex; align-items: center; gap: 4px; margin-right: 8px; } .visor-pagpos { min-width: 92px; } /* En la columna del visor, nada se encoge (si no, la ayuda se monta encima de la lista) */ .visor-lat > * { flex-shrink: 0; } /* Interruptor de protección de cada fila: escudo lleno = protegido */ .visor-prot { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--muted); cursor: pointer; } .visor-prot .ic { width: 14px; height: 14px; } .visor-prot.on { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); background: color-mix(in srgb, var(--ok) 10%, transparent); } .visor-prot:not(.on):not(.fijo) { color: var(--err); border-style: dashed; } .visor-prot.fijo { border: 0; background: none; cursor: default; } .visor-prot:disabled { opacity: .5; cursor: wait; } .visor-marca { position: absolute; pointer-events: none; border-radius: 2px; } /* Silueta: el contorno de cada dato con el color de su tipo y su seudónimo encima (comun/ui/visorClaude.ts) */ .visor-paginas.silueta .visor-marca { outline: 2px solid var(--c); outline-offset: 1px; } .visor-paginas.silueta .visor-marca::before { content: attr(data-etiqueta); position: absolute; left: -3px; bottom: 100%; margin-bottom: 3px; padding: 0 4px; border-radius: 2px; background: var(--c); color: #fff; font: 600 10px/1.3 "Segoe UI", system-ui, sans-serif; white-space: nowrap; opacity: .9; } /* Foco del repaso: solo el recuadro actual; el resto de la página, en penumbra (la caja recorta la sombra) */ .visor-hoja-caja { overflow: hidden; } .visor-paginas.foco .visor-marca:not(.on) { visibility: hidden; } .visor-paginas.foco .visor-marca.on { box-shadow: 0 0 0 100vmax rgba(15, 23, 42, .38); background: transparent; } .visor-marca.on { outline: 3px solid #2563eb; outline-offset: 2px; background: rgba(37, 99, 235, 0.18); } /* El destello anima el contorno, no la sombra: la sombra es la penumbra del foco y no debe apagarse mientras dura */ .visor-marca.destello { animation: visor-destello 0.9s ease-out; } @keyframes visor-destello { 0%, 35% { outline: 6px solid rgba(37, 99, 235, 0.85); outline-offset: 4px; } 100% { outline-offset: 2px; } } /* La lista enlazada con los recuadros: solo en la vista amplia (en el panel no cabe junto a la página) */ .visor-campos { display: none; } @media (min-width: 900px) { .visor-campos:not([hidden]):not(:empty) { display: flex; flex-direction: column; gap: 4px; font-size: 12px; border-top: 1px solid var(--line); padding-top: 8px; } .visor-campos ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .visor-campos li { display: grid; grid-template-columns: 14px 22px auto 1fr auto; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 6px; cursor: pointer; } /* Cabecera de grupo: casilla, color, nombre, cuántos y flechas de orden (siempre a la vista) */ .visor-campos li.visor-grupo { grid-template-columns: 14px 10px 1fr auto auto; margin-top: 6px; font-weight: 600; cursor: default; background: color-mix(in srgb, var(--line) 45%, transparent); } .visor-campos li.visor-grupo .visor-ordenar { visibility: visible; } .visor-campos li.visor-dato { padding-left: 22px; } .visor-grupo-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .visor-repaso-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .visor-repaso-fila[hidden] { display: none; } .visor-lista-nombre { flex: 1; min-width: 140px; } .visor-campos li.fuera > :not(.visor-incluir):not(.visor-ordenar) { opacity: .45; } .visor-incluir { margin: 0; cursor: pointer; } /* Flechas de orden: se ven al pasar por la fila o en la que está marcada */ .visor-ordenar { display: inline-flex; gap: 2px; visibility: hidden; } .visor-campos li:hover .visor-ordenar, .visor-campos li.on .visor-ordenar, .visor-campos li:focus-within .visor-ordenar { visibility: visible; } .visor-orden { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: 1px solid var(--line); border-radius: 5px; background: var(--bg); color: var(--muted); cursor: pointer; } .visor-orden .ic { width: 12px; height: 12px; } .visor-orden:disabled { opacity: .3; cursor: default; } .visor-repaso-sel { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .visor-campos .visor-sinprot li { grid-template-columns: 22px 1fr auto; cursor: default; } .visor-sinprot-tit { margin-top: 8px; } .visor-repaso { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 0 4px; } .visor-repaso[hidden] { display: none; } .visor-repaso button[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); } .visor-repaso-pos { min-width: 0; text-align: left; } .visor-campos li:hover, .visor-campos li.on, .visor-campos li:focus-visible { background: color-mix(in srgb, #2563eb 12%, transparent); outline: none; } .visor-campo-color { width: 10px; height: 10px; border-radius: 3px; } .visor-campo-seudo { font-weight: 600; white-space: nowrap; } .visor-campo-valor { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); } .visor-campo-pag { color: var(--muted); white-space: nowrap; } } @media (min-width: 900px) { .visor-main { flex-direction: row; gap: 16px; } .visor-lat { width: 340px; overflow: auto; padding-right: 4px; } .visor-lat .visor-ent:not(:empty) { padding: 0 0 8px; } } .visor-hoja-caja { position: relative; width: 100%; max-width: 900px; } .visor-hoja-caja .visor-hoja { display: block; max-width: none; cursor: crosshair; touch-action: none; user-select: none; } .visor-etiqueta { font: inherit; font-size: 12px; border: 1px solid var(--line); border-radius: 6px; padding: 2px 4px; background: var(--bg); color: var(--ink); margin-left: 4px; } .visor-caja-ori .visor-hoja { cursor: move; touch-action: none; } /* Lo que se coloca sobre el original (la firma): se arrastra y se redimensiona por la esquina */ /* El gesto va sobre la página: el recuadro deja pasar el puntero (también en la vista grande) */ .visor-colocar { position: absolute; border: 2px dashed var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); border-radius: 4px; pointer-events: none; overflow: hidden; } .visor-colocar-asa { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; background: var(--accent); border-radius: 3px 0 2px 0; } .visor-sel { position: absolute; border: 2px dashed #2563eb; background: rgba(37, 99, 235, 0.15); pointer-events: none; } .visor-hoja { width: 100%; max-width: 900px; height: auto; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); cursor: pointer; } .plan-card.alerta .pc-head { color: var(--err); } .plan-card.alerta ul { margin: 4px 0; padding-left: 18px; } .empty.alerta { color: var(--err); font-style: normal; font-weight: 600; border-left: 3px solid var(--err); padding: 6px 8px; border-radius: 6px; background: color-mix(in srgb, var(--err) 8%, transparent); } .prot-imp summary { cursor: pointer; color: var(--muted); font-size: 12px; } .prot-imp[open] summary { margin-bottom: 6px; } .prot-eq { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 8px; max-height: 260px; overflow-y: auto; } .prot-eq-row { display: grid; grid-template-columns: auto 1fr; gap: 0 8px; padding: 4px 8px; border-bottom: 1px solid var(--line); font-size: 12px; } .prot-eq-row:last-child { border-bottom: 0; } .prot-eq-row code { font-size: 11px; } .prot-eq-row span { overflow-wrap: anywhere; } .prot-eq-row small { grid-column: 1 / -1; color: var(--muted); font-size: 11px; overflow-wrap: anywhere; } .prot-pre { white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.45 Consolas, monospace; background: var(--panel); border-radius: 6px; padding: 8px; margin: 0; max-height: 220px; overflow-y: auto; } .prot-card .pc-head { display: flex; gap: 6px; align-items: center; } .prot-sug { display: flex; flex-direction: column; gap: 3px; margin: 4px 0; } /* Marcas: selector junto al del modelo y pantalla de gestión */ .marca-pill { display: inline-flex; align-items: center; gap: 5px; max-width: 150px; } .marca-pill .marca-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .marca-punto { flex: none; width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); } .marca-muestra { display: inline-flex; flex: none; } .marca-muestra i { width: 12px; height: 12px; border-radius: 50%; margin-right: -3px; box-shadow: 0 0 0 1.5px var(--bg); } .marca-lista { display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow-y: auto; } #marca-pop .pop-head { padding: 4px 8px 2px; font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; } #marcas-body { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; } .marcas-aviso { margin: 8px 10px 0; padding: 6px 8px; border-radius: 6px; background: var(--accent-soft); font-size: 12.5px; display: flex; gap: 6px; align-items: center; } .marcas-aviso.error { background: #fde8e8; color: #9b1c1c; } /* Ajustes: cuenta, alma y memoria */ .aj-tabs { display: flex; gap: 2px; padding: 6px 10px 0; border-bottom: 1px solid var(--line); } .aj-tabs button { border: 0; background: none; color: var(--muted); padding: 6px 10px; font: inherit; font-size: 12.5px; cursor: pointer; border-bottom: 2px solid transparent; display: inline-flex; align-items: center; gap: 5px; } .aj-tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; } .aj-aviso { margin: 8px 10px 0; padding: 6px 8px; border-radius: 6px; background: var(--accent-soft); font-size: 12.5px; display: flex; gap: 6px; align-items: center; } .aj-aviso.error { background: #fde8e8; color: #9b1c1c; } #ajustes-body { flex: 1; overflow-y: auto; padding: 10px 10px 16px; } .aj-col { display: flex; flex-direction: column; gap: 14px; } .aj-alma { height: 100%; gap: 8px; } .aj-input { font: inherit; font-size: 13px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); min-width: 0; } textarea.aj-input { width: 100%; resize: vertical; min-height: 0; overflow-y: auto; } .prot-row .aj-input[type="password"] { flex: 1; min-width: 160px; } .aj-pista { display: inline-flex; gap: 6px; align-items: center; } .aj-gasto { margin: 0; font-size: 12.5px; } .aj-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; } .aj-campo { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; } .aj-seg { display: flex; flex-wrap: wrap; gap: 4px; } .aj-seg .btn { font-size: 12px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .aj-seg .btn[aria-checked="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } textarea.aj-md { flex: 1; min-height: 260px; resize: vertical; overflow-y: auto; font-family: Consolas, monospace; font-size: 12.5px; line-height: 1.5; padding: 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); } textarea.aj-md.off { opacity: .55; } /* Botones Alma y Memoria del chat: color de acento si van como contexto; tachados si están apagados */ .ctx-btn { padding: 4px 6px; color: var(--muted); position: relative; } .ctx-btn.on { color: var(--accent); border-color: var(--accent); } .ctx-btn.apagado::after { content: ""; position: absolute; left: 4px; right: 4px; top: 50%; border-top: 1.5px solid currentColor; transform: rotate(-35deg); } #ctx-pop .pop-head { padding: 4px 8px 0; } #ctx-pop .mas-nota { margin: 2px 8px 4px; } /* Gasto en la barra: solo el importe; el detalle en el tooltip y en Cuenta */ #usage { cursor: pointer; } /* «Lo que recibe Claude»: Alma y Memoria tal y como salen, con los seudónimos resaltados */ dialog.vista-claude { width: min(620px, calc(100vw - 24px)); max-height: calc(100vh - 40px); padding: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); display: flex; flex-direction: column; } dialog.vista-claude:not([open]) { display: none; } .vc-cab { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--line); } .vc-cab b { flex: 1; display: flex; align-items: center; gap: 6px; } .vc-estado { margin: 8px 10px 0; padding: 6px 8px; border-radius: 6px; background: #fdf3e1; color: #7a4b00; font-size: 12.5px; display: flex; gap: 6px; align-items: flex-start; } .vc-estado.ok { background: #e6f4ea; color: #1e6b34; } .vc-texto { flex: 1; overflow: auto; margin: 8px 10px; padding: 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); font-family: Consolas, monospace; font-size: 12px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; } .vc-texto mark { background: var(--accent-soft); color: var(--accent); border-radius: 3px; padding: 0 2px; font-weight: 600; } .vc-pie { margin: 0 10px 10px; font-size: 11.5px; color: var(--muted); } .vc-cuerpo { flex: 1; overflow: auto; display: flex; flex-direction: column; } .vc-cuerpo .vc-texto { flex: none; } .vc-partes { margin: 8px 10px 0; padding: 0 0 0 18px; font-size: 12px; color: var(--muted); } .vc-partes li.va { color: var(--ink); } .vc-h { margin: 10px 10px 0; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } .tip-arriba { position: fixed; z-index: 1200; max-width: min(300px, calc(100vw - 16px)); padding: 6px 9px; border-radius: 6px; background: var(--ink); color: var(--bg); font-size: 11.5px; line-height: 1.45; white-space: pre-line; pointer-events: none; box-shadow: 0 4px 14px rgba(0,0,0,.2); } #usage:hover { text-decoration: underline; } .aj-tokens { margin: 0; font-size: 12px; color: var(--muted); } .aj-tokens.aviso { color: #b7791f; } .aj-tokens.error { color: var(--err); font-weight: 600; } .aj-magia { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid var(--accent); border-radius: 8px; background: var(--accent-soft); } .aj-nuevo { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px dashed var(--line); border-radius: 8px; } .aj-h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 0; } .aj-lista { display: flex; flex-direction: column; gap: 6px; } .aj-rec { border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; display: flex; flex-direction: column; gap: 4px; } .aj-rec-cab { display: flex; gap: 6px; align-items: center; font-size: 11.5px; } .aj-rec-cab .prot-help { flex: 1; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .aj-rec-txt { margin: 0; font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; } .aj-rec-acc { display: flex; gap: 4px; } .aj-mini { padding: 2px 5px; } .aj-tipo { font-size: 10.5px; border-radius: 8px; padding: 0 7px; border: 1px solid var(--line); color: var(--muted); } .aj-tipo.t-preferencia, .aj-tipo.t-orden { border-color: var(--accent); color: var(--accent); } .aviso-rec { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0; padding: 5px 8px; border-radius: 8px; background: var(--accent-soft); font-size: 12px; } .aviso-rec-txt { flex: 1 1 200px; display: inline-flex; align-items: center; gap: 4px; min-width: 0; color: var(--ink); } .aviso-rec-acc { display: inline-flex; gap: 4px; flex-wrap: wrap; } .aviso-rec-btn { font-size: 11.5px; padding: 2px 7px; } .aj-unir { font-size: 11px; padding: 1px 6px; color: #b7791f; border-color: #b7791f; } .aj-tipo.aj-prot { border-color: var(--ok); color: var(--ok); cursor: help; } .aj-nota-prot { margin: 0; } .aj-tipo.aj-dup { border-color: #b7791f; color: #b7791f; cursor: help; } /* Tipos y listas del Clasificador, dentro de la columna Clasificar del visor (clasificadorPanel.ts) */ .clasif-gestion { display: flex; flex-direction: column; gap: 8px; container-type: inline-size; } .clasif-gestion > * { flex-shrink: 0; } .clasif-volver { align-self: flex-start; border: 0; background: none; color: var(--accent); padding: 0; } .ws-lote { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; } .ws-lote li { display: flex; align-items: center; gap: 8px; padding: 5px 10px; border-top: 1px solid var(--line); font-size: 12.5px; } .ws-lote li:first-child { border-top: 0; } .ws-lote li.actual { background: var(--panel); } .ws-lote li > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ws-lote-tipo { border-radius: 999px; padding: 0 8px; font-size: 11.5px; white-space: nowrap; background: var(--panel); color: var(--muted); } .ws-lote-tipo.hecho { background: var(--accent-soft, var(--panel)); color: var(--accent); } .ws-lote-tipo.decide { background: var(--plan-soft); color: var(--plan); } .ws-entre { display: flex; align-items: center; gap: 8px; } .ws-entre > span { color: var(--muted); font-size: 12px; } .ws-entre select { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: 5px 8px; font: inherit; color: var(--ink); background: var(--bg); } /* Extraer (extraerPanel.ts): las indicaciones para Claude, recogidas */ .ws-mas > summary { cursor: pointer; color: var(--muted); font-size: 13px; } .ws-mas textarea { width: 100%; box-sizing: border-box; margin-top: 6px; border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; font: inherit; color: var(--ink); background: var(--bg); resize: vertical; } .clasif-aviso { margin: 0; padding: 6px 12px; font-size: 12px; color: var(--muted); display: flex; gap: 6px; align-items: center; border-bottom: 1px solid var(--line); } .clasif-aviso.error { color: var(--err, #b42318); } .clasif-bloque { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; display: flex; flex-direction: column; gap: 6px; } .clasif-et { color: var(--muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; display: flex; justify-content: space-between; align-items: center; gap: 6px; min-height: 26px; } .clasif-et .btn { text-transform: none; letter-spacing: 0; font-weight: 400; } .clasif-pills { display: flex; flex-wrap: wrap; gap: 5px; } .clasif-pill { display: inline-flex; align-items: center; border: 0; border-radius: 999px; padding: 1px 9px; font: inherit; font-size: 12px; background: var(--panel); color: var(--ink); } button.clasif-pill { cursor: pointer; background: var(--accent-soft, var(--panel)); color: var(--accent); font-weight: 600; } button.clasif-pill.mia { background: var(--panel); color: var(--ink); font-weight: 400; } button.clasif-pill[aria-pressed="true"] { outline: 2px solid var(--accent); outline-offset: -2px; } .clasif-acc { display: flex; gap: 6px; flex-wrap: wrap; } .clasif-buscar { display: flex; gap: 6px; align-items: center; } .clasif-buscar input, .clasif-form input:not([type]), .clasif-en-sitio, .clasif-dif select { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; font: inherit; color: var(--ink); background: var(--bg); } .clasif-form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .clasif-form input:not([type]) { flex: 1 1 160px; min-width: 0; } .clasif-check { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; } .clasif-familia { display: flex; align-items: center; color: var(--muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding-top: 6px; } .clasif-familia span { margin-left: auto; font-weight: 400; } .clasif-fila { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-bottom: 1px solid var(--line); cursor: pointer; min-width: 0; } .clasif-fila:hover, .clasif-fila:focus-visible { background: var(--panel); } .clasif-fila.off .t { opacity: .5; } .clasif-fila .t { flex: 1; min-width: 0; display: flex; flex-direction: column; } .clasif-fila .t b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .clasif-fila .t span { color: var(--muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .clasif-propio { font-size: 10px; font-weight: 700; color: var(--accent); background: var(--accent-soft, var(--panel)); border-radius: 4px; padding: 0 4px; margin-left: 6px; } .clasif-h2 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .clasif-h2 h2 { margin: 0; font-size: 16px; flex: 1 1 auto; } .clasif-rasgo { display: flex; align-items: flex-start; gap: 6px; font-size: 12.5px; min-height: 24px; flex-wrap: wrap; } .clasif-rasgo > span { flex: 1; min-width: 0; padding-top: 3px; } .clasif-rasgo > span::before { content: "•"; color: var(--accent); margin-right: 6px; } .clasif-rasgo .de { color: var(--muted); font-size: 11px; margin-left: 6px; } .clasif-rasgo .de::before { content: none; } .clasif-rasgo .btn.ico, .clasif-dif .btn.ico { width: 24px; height: 24px; opacity: .45; } .clasif-rasgo:hover .btn.ico, .clasif-dif:hover .btn.ico, .clasif-rasgo .btn.ico:focus-visible, .clasif-dif .btn.ico:focus-visible { opacity: 1; } .clasif-dif { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr) auto; gap: 2px 10px; font-size: 12.5px; padding: 5px 0; border-top: 1px solid var(--line); align-items: start; } .clasif-et + .clasif-dif { border-top: 0; } .clasif-dif.editando { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .clasif-dif.editando select { max-width: 100%; } .clasif-acc-fila { display: inline-flex; } .clasif-en-sitio { flex: 1 1 200px; min-width: 0; } @container (max-width: 420px) { .clasif-dif { grid-template-columns: minmax(0, 1fr) auto; } .clasif-dif > b { grid-column: 1 / -1; } } .marcas-cab { display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; } .marcas-cab .nube-txt { flex: 1 1 220px; color: var(--muted); } .marcas-cab > b { flex: 1; } .marca-card { display: flex; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 10px; flex-wrap: wrap; } .marca-card.actual { border-color: var(--accent); } .marca-logo { flex: none; width: 52px; height: 52px; border-radius: 8px; border: 2px solid; display: grid; place-items: center; overflow: hidden; background: #fff; } .marca-logo img { max-width: 44px; max-height: 44px; } .marca-logo span { font-weight: 700; color: #555; } .marca-txt { flex: 1; min-width: 140px; display: flex; flex-direction: column; gap: 3px; } .marca-txt > span { color: var(--muted); font-size: 12px; } .marca-acciones { display: flex; gap: 4px; flex-wrap: wrap; } .marca-acciones .btn { font-size: 12px; } .marca-en-uso { font-size: 12px; color: var(--accent); font-weight: 600; padding: 4px 6px; } .marca-editor-titulo { margin: 0; font-size: 15px; } .marca-vista { display: grid; grid-template-columns: 3fr 2fr; gap: 8px; } .mv-portada { position: relative; aspect-ratio: 16 / 9; border-radius: 8px; padding: 12px 12px 12px 18px; color: #fff; display: flex; flex-direction: column; gap: 4px; overflow: hidden; } .mv-portada > i { position: absolute; left: 8px; top: 12px; width: 4px; height: 34px; border-radius: 2px; } .mv-portada b { font-size: 14px; } .mv-portada span { font-size: 11px; } .mv-graf { margin-top: auto; display: flex; align-items: flex-end; gap: 4px; height: 40%; } .mv-graf i { flex: 1; border-radius: 2px 2px 0 0; } .mv-tabla { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; font-size: 11px; align-self: start; background: #fff; } .mv-tabla div { padding: 5px 7px; } .marca-form { display: flex; flex-direction: column; gap: 6px; } .marca-form h4 { margin: 8px 0 0; font-size: 12px; color: var(--muted); } .marca-campo { display: flex; flex-direction: column; gap: 3px; font-size: 12px; } .marca-campo > span { color: var(--muted); } .marca-campo input, .marca-campo textarea { font: inherit; font-size: 13px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); } .marca-color { display: inline-flex; align-items: center; gap: 6px; } .marca-color input[type=color] { width: 34px; height: 28px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: none; cursor: pointer; } .marca-color input:not([type]) { width: 84px; font: inherit; font-size: 12.5px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); } .marca-graficos { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .marca-quitar { padding: 2px 5px; } .marca-logo-fila { display: flex; align-items: center; gap: 8px; font-size: 12.5px; } .marca-logo-prev { flex: none; width: 72px; height: 40px; border: 1px solid var(--line); border-radius: 6px; display: grid; place-items: center; background: #fff; overflow: hidden; } .marca-logo-prev img { max-width: 64px; max-height: 32px; } .marca-logo-prev small { font-size: 10px; color: #999; } .marca-logo-nombre { flex: 1; } .marca-web { display: flex; flex-direction: column; gap: 6px; border: 1px dashed var(--line); border-radius: 10px; padding: 10px; } .marca-web input[type=url] { font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); } .marca-web-ia { font-size: 12px; color: var(--muted); display: flex; gap: 6px; align-items: center; } .marca-web .btn { align-self: flex-start; } .marca-origen { background: var(--accent-soft); border-radius: 6px; padding: 6px 8px; margin: 0; } .marca-galeria { display: flex; flex-wrap: wrap; gap: 8px; } .marca-cand { width: 132px; border: 1px solid var(--line); border-radius: 8px; padding: 6px; display: flex; flex-direction: column; gap: 6px; align-items: center; background: #fff; } .marca-cand img { max-width: 118px; max-height: 50px; } .marca-cand-usos { display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; } .marca-cand-usos .btn { font-size: 10.5px; padding: 1px 5px; } .marca-cand-usos .btn .ic { display: none; } .marca-redes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; } .marca-logo.paleta { border: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; } .marca-logo.paleta i { width: 100%; height: 100%; } .paleta-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; } .paleta-gal { display: flex; flex-direction: column; gap: 4px; text-align: left; border: 1px solid var(--line); border-radius: 10px; padding: 6px; background: var(--bg); color: var(--ink); font: inherit; cursor: pointer; } .paleta-gal:hover, .paleta-gal:focus-visible { border-color: var(--accent); outline: none; } .paleta-gal b { font-size: 12.5px; } .paleta-gal small { font-size: 11px; color: var(--muted); } .paleta-tira { display: flex; height: 22px; border-radius: 6px; overflow: hidden; } .paleta-tira i { flex: 1; } .paleta-importar { display: flex; flex-direction: column; gap: 6px; border: 1px dashed var(--line); border-radius: 10px; padding: 10px; } .paleta-importar textarea { font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); } .paleta-importar .btn { align-self: flex-start; } .paleta-importar a { color: var(--accent); } .marca-pie { display: flex; justify-content: space-between; gap: 8px; position: sticky; bottom: -10px; background: var(--bg); padding: 8px 0; border-top: 1px solid var(--line); } #nube-search { margin: 8px 10px 0; border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; font: inherit; color: var(--ink); background: var(--bg); } #nube-list { flex: 1; overflow-y: auto; padding: 8px 10px; display: flex; flex-direction: column; gap: 10px; } #nube-res, #nube-body, .nube-lista { display: flex; flex-direction: column; gap: 6px; } #nube-res:empty { display: none; } #nube-list h4 { margin: 4px 0 0; font-size: 12px; color: var(--muted); font-weight: 600; } .nube-card { border: 1px solid var(--line); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 8px; } .nube-cab { display: flex; gap: 8px; align-items: center; } .nube-cab b { flex: 1; } .nube-cab .ic { width: 18px; height: 18px; color: var(--accent); } .nube-estado { font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: var(--panel); color: var(--muted); } .nube-estado.ok { background: var(--accent-soft); color: var(--accent); } .nube-cuerpo { display: flex; flex-direction: column; gap: 8px; } .nube-txt { margin: 0; font-size: 12.5px; line-height: 1.45; } /* Alta de una conexión de Rclone (comun/ui/tarjetaRclone.ts) */ form.nube-aviso { align-items: stretch; } form.nube-aviso > button { align-self: flex-start; } form.nube-aviso input, form.nube-aviso select { font: inherit; padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); width: 100%; box-sizing: border-box; } .nube-aviso { border-left: 3px solid var(--accent); padding: 4px 0 4px 8px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } .nube-vistas { align-self: flex-start; } .nube-migas { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; font-size: 12.5px; margin-bottom: 2px; } .nube-migas button { border: 0; background: none; padding: 2px 4px; border-radius: 4px; font: inherit; color: var(--accent); cursor: pointer; } .nube-migas button:hover { background: var(--panel); } .nube-migas button[aria-current] { color: var(--ink); font-weight: 600; cursor: default; } .nube-migas .ic { width: 12px; height: 12px; color: var(--muted); } .nube-lista .lib-carpeta > .ic { width: 14px; height: 14px; color: var(--muted); flex: none; } .nube-pie { margin: 0; font-size: 11.5px; color: var(--muted); line-height: 1.45; } #lib-ruta { display: flex; align-items: center; gap: 6px; margin: 0 10px; } #lib-ruta .migas { flex: 1; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 2px; font-size: 12.5px; } #lib-ruta .migas button { border: 0; background: none; padding: 2px 4px; border-radius: 4px; font: inherit; color: var(--accent); cursor: pointer; } #lib-ruta .migas button:hover { background: var(--panel); } #lib-ruta .migas button[aria-current] { color: var(--ink); font-weight: 600; cursor: default; } #lib-ruta .migas .ic { width: 12px; height: 12px; color: var(--muted); } #lib-ruta .migas-nota { color: var(--muted); font-size: 11.5px; } #lib-ruta .btn { flex: none; font-size: 12px; } .lib-carpeta .ico .ic { color: #c8a23a; } /* Biblioteca por etiquetas (fase 2): pestañas por origen, chips de tipo, grupos de una línea y badges */ #lib-filtros { margin: 6px 10px 0; } #lib-tipos { display: flex; align-items: center; gap: 6px; margin: 6px 10px 2px; } #lib-tipos .lib-chips { flex: 1; min-width: 0; } .lib-chips { display: flex; flex-wrap: wrap; gap: 4px; } .lib-chip { border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 999px; padding: 1px 9px; font: inherit; font-size: 12px; cursor: pointer; } .lib-chip:hover { border-color: var(--accent); } .lib-chip[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; } .lib-chip.libre { border-style: dashed; } .lib-sel { flex: none; font: inherit; font-size: 12px; padding: 2px 4px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); max-width: 9.5em; } .lib-grupo { padding: 6px 8px; cursor: pointer; } .lib-grupo .ico .ic { width: 18px; height: 18px; } .lib-grupo .txt b { font-weight: 600; } .lib-codigo { color: var(--muted); font-weight: 400; font-size: 12px; margin-left: 4px; } .lib-n { flex: none; color: var(--muted); font-size: 12.5px; min-width: 2ch; text-align: right; } .lib-item .txt .lib-meta { display: block; } .lib-item .txt .lib-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; } .lib-badge { border: 0; border-radius: 999px; padding: 0 8px; font: inherit; font-size: 11px; line-height: 1.6; cursor: pointer; background: var(--panel); color: var(--ink); } .lib-badge.cli { background: var(--accent-soft); color: var(--accent); font-weight: 600; } .lib-badge:hover { outline: 1px solid var(--accent); } .lib-etiq { border: 1px solid var(--accent); border-radius: 8px; padding: 8px; display: flex; flex-direction: column; gap: 6px; background: var(--panel); margin-top: -2px; } .lib-etiq-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .lib-etiq-fila > span:first-child { flex: none; width: 3.6em; color: var(--muted); font-size: 12px; } .lib-etiq-fila .lib-chips { flex: 1; min-width: 0; } .lib-etiq select, .lib-etiq input { font: inherit; font-size: 12.5px; padding: 3px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); min-width: 0; } .lib-etiq select { flex: 1; } .lib-etiq input { flex: 1 1 8em; } .lib-etiq .lib-etiq-otro { flex: 0 1 10em; padding: 1px 8px; border-radius: 999px; font-size: 12px; } .lib-etiq .lib-etiq-cod { flex: 0 1 5em; } .lib-etiq-botones { display: flex; justify-content: flex-end; gap: 6px; } /* Selección y acciones (resumir, clasificar, llevar a una App, firmar, etiquetar, eliminar) */ .lib-check { flex: none; margin: 0; width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; } .lib-item .txt .lib-resumen { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 11.5px; margin-top: 2px; } .lib-mas { flex: none; padding: 2px 6px !important; margin-left: 2px; } /* El paso Proteger de una cadena (panel.ts, abrirProtegerVarios) y guardar una cadena para todo el despacho */ .dlg-proteger { width: min(560px, 94vw); max-height: 88vh; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink); padding: 0; } .dlg-proteger::backdrop { background: rgb(16 24 40 / 35%); } .dlg-proteger .dlg-cab { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); } .dlg-proteger .dlg-cab b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dlg-proteger .dlg-cuerpo { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; } .lt-despacho { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--muted); white-space: nowrap; } /* Elegir el tipo en la bandeja de Lotes: el desplegable con buscador del CRM (crm/desplegable.ts) */ .lt-tipo-desp { position: relative; display: inline-flex; min-width: 0; } .lt-tipo-desp .crm-desp { position: relative; display: inline-flex; flex-direction: column; min-width: 0; } .lt-tipo-desp .crm-desp-nativo { display: none !important; } .lt-tipo-desp .crm-desp-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 12em; max-width: 22em; padding: 4px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); font: inherit; font-size: 13px; text-align: left; cursor: pointer; } .lt-tipo-desp .crm-desp.abierto .crm-desp-btn, .lt-tipo-desp .crm-desp-btn:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .lt-tipo-desp .crm-desp-btn .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .lt-tipo-desp .crm-desp-btn .t.vacio { color: var(--muted); } .lt-tipo-desp .crm-desp-btn .ic, .lt-tipo-desp .crm-desp-btn svg { width: 14px; height: 14px; color: var(--muted); flex: none; } .lt-tipo-desp .crm-desp-lista { position: absolute; z-index: 30; bottom: calc(100% + 4px); left: 0; width: max-content; min-width: 100%; max-width: min(380px, 86vw); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 6px 16px rgb(16 24 40 / 12%); padding: 6px; display: flex; flex-direction: column; gap: 4px; } .lt-tipo-desp .crm-desp-lista[hidden] { display: none; } .lt-tipo-desp .crm-desp-buscar { font: inherit; font-size: 13px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); } .lt-tipo-desp .crm-desp-buscar[hidden] { display: none; } .lt-tipo-desp .crm-desp-ops { display: flex; flex-direction: column; max-height: 300px; overflow-y: auto; } .lt-tipo-desp .crm-desp-op { border: 0; background: none; color: var(--ink); font: inherit; font-size: 13px; text-align: left; padding: 5px 10px 5px 18px; border-radius: 6px; cursor: pointer; } .lt-tipo-desp .crm-desp-op:hover, .lt-tipo-desp .crm-desp-op.elegida { background: var(--accent-soft); color: var(--accent); } .lt-tipo-desp .crm-desp-op.vacio { color: var(--muted); padding-left: 10px; } .lt-tipo-desp .crm-desp-grupo { font-size: 11.5px; font-weight: 700; color: var(--muted); padding: 6px 10px 2px; } .lt-tipo-desp .crm-desp-nada { color: var(--muted); font-size: 12.5px; padding: 6px 10px; } /* El recorrido de cada documento (biblioteca.ts, recorrido): un punto por paso (gris falta, color hecho, naranja decides tú; sin punto si no aplica) y, con sitio o al pasar el ratón, sus píldoras */ #lib-list { container-type: inline-size; } .lib-proc { display: flex; align-items: center; gap: 6px; min-width: 0; margin-top: 3px; font-size: 11.5px; color: var(--muted); } .lib-puntos { display: inline-flex; gap: 3px; flex: none; } .lib-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--line); } .lib-punto.hecho { background: var(--accent); } .lib-punto.escudo.hecho { background: var(--ok); } .lib-punto.decide { background: var(--plan); } .lib-proc-txt { display: inline-flex; align-items: center; gap: 3px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lib-proc-txt.decide { color: var(--plan); } .lib-proc-txt.ok { color: var(--ok); } .lib-proc-txt .ic, .lib-pil .ic { width: 11px; height: 11px; flex: none; } .lib-pildoras { display: none; flex-wrap: wrap; gap: 4px; } .lib-pil { display: inline-flex; align-items: center; gap: 3px; border: 1px solid var(--line); border-radius: 999px; padding: 0 8px; font-size: 11px; line-height: 1.7; background: var(--bg); color: var(--muted); white-space: nowrap; cursor: default; } .lib-pil.hecho { background: var(--accent-soft); border-color: transparent; color: var(--accent); } .lib-pil.escudo.hecho { background: color-mix(in srgb, var(--ok) 14%, var(--bg)); color: var(--ok); } .lib-pil.decide { background: var(--plan-soft); border-color: transparent; color: var(--plan); font-weight: 600; } .lib-item:hover .lib-proc .lib-pildoras { display: flex; } .lib-item:hover .lib-proc .lib-puntos, .lib-item:hover .lib-proc .lib-proc-txt { display: none; } @container (min-width: 560px) { .lib-item .lib-proc .lib-pildoras { display: flex; } .lib-item .lib-proc .lib-puntos, .lib-item .lib-proc .lib-proc-txt { display: none; } } .lib-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; } .lib-acciones .btn { font-size: 12px; padding: 3px 8px; } .lib-acciones .lib-etiq { flex-basis: 100%; } .lib-acc-estado { color: var(--muted); font-size: 12px; } .lib-acc-titulo { flex-basis: 100%; color: var(--muted); font-size: 12px; } .lib-acciones-grupo { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; border: 1px solid var(--accent); border-radius: 8px; padding: 8px; background: var(--panel); margin-top: -2px; } #lib-seleccion { margin: 4px 10px 0; padding: 6px 8px; border: 1px solid var(--accent); border-radius: 8px; background: var(--accent-soft); display: flex; flex-direction: column; gap: 6px; } #lib-seleccion .lib-sel-cabeza { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; } #lib-seleccion .lib-sel-cabeza .btn { padding: 2px 6px; } /* Separar: miniaturas de las páginas con los cortes entre ellas */ .sep-editor { border: 1px solid var(--accent); border-radius: 8px; padding: 8px; background: var(--panel); display: flex; flex-direction: column; gap: 8px; margin: 4px 0; flex-basis: 100%; } .sep-paginas { display: flex; align-items: stretch; gap: 4px; flex-wrap: wrap; } /* Cada archivo que sale, una caja con sus páginas y las uniones de dentro */ .sep-arch { border: 1px solid var(--line); border-radius: 8px; padding: 4px 6px 6px; background: var(--bg); display: flex; flex-direction: column; gap: 3px; } .sep-arch-t { font-size: 11px; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .sep-arch-p { display: flex; align-items: stretch; flex-wrap: wrap; gap: 2px; } .sep-pag { position: relative; width: 52px; height: 68px; border: 1px solid var(--line); border-radius: 4px; background: #fff; padding: 0; cursor: pointer; overflow: hidden; display: grid; place-items: center; } .sep-pag canvas { max-width: 100%; max-height: 100%; } .sep-pag b { position: absolute; top: 1px; right: 3px; font-size: 9px; color: var(--muted); background: rgb(255 255 255 / 80%); border-radius: 3px; padding: 0 2px; } .sep-pag.actual { outline: 2px solid var(--ink); outline-offset: 1px; } /* Quitar una página (repetida, en blanco): la papelera, arriba a la izquierda; quitada, se ve tachada */ .sep-hoja { position: relative; display: flex; } .sep-quitar { position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; padding: 0; border: 1px solid var(--line); border-radius: 5px; background: var(--bg); color: var(--muted); display: grid; place-items: center; cursor: pointer; opacity: 0; } .sep-quitar .ic { width: 13px; height: 13px; } .sep-hoja:hover .sep-quitar, .sep-hoja:focus-within .sep-quitar, .sep-pag.actual + .sep-quitar, .sep-hoja.fuera .sep-quitar { opacity: 1; } .sep-quitar:hover { color: var(--err); border-color: var(--err); } .sep-hoja.fuera .sep-quitar:hover { color: var(--accent); border-color: var(--accent); } .sep-hoja.fuera .sep-pag { opacity: .35; background: repeating-linear-gradient(135deg, transparent 0 8px, var(--line) 8px 9px); } .sep-arch.fuera { border-style: dashed; } /* La unión entre dos páginas: toda la altura, fácil de pulsar. Sigue (gris), va junto (marca) u otro archivo (marca, llena); en duda, ámbar */ .sep-corte { border: 1px solid transparent; background: none; width: 22px; align-self: stretch; min-height: 28px; display: grid; place-items: center; cursor: pointer; color: var(--muted); border-radius: 6px; padding: 0; } .sep-corte .ic { width: 14px; height: 14px; } .sep-corte:hover { color: var(--ink); border-color: var(--line); background: var(--panel); } .sep-corte.sep-junto { color: var(--accent); } .sep-corte.sep-nuevo { color: var(--accent); background: var(--accent-soft); border-color: var(--accent); } .sep-corte.duda { color: var(--plan); background: var(--plan-soft); border: 1px dashed var(--plan); } .sep-corte.elegida { outline: 2px solid var(--ink); outline-offset: 1px; } /* La unión elegida: sus tres valores en palabras y el motivo */ .sep-union { display: flex; flex-direction: column; gap: 6px; } .sep-union:empty { display: none; } .sep-union-t { font-size: 12px; font-weight: 600; color: var(--ink); } .sep-union .btn { font-size: 12px; padding: 3px 8px; } .sep-union .btn.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; } .sep-motivo { font-size: 12px; color: var(--muted); } .sep-motivo.duda { color: var(--plan); } .sep-manual .btn { font-size: 12px; padding: 3px 8px; } .sep-estado.sep-aviso { color: var(--err); } .sep-mas { color: var(--muted); font-size: 11px; padding: 0 4px; } .sep-pie { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; } .sep-estado { margin-right: auto; color: var(--muted); font-size: 12px; } .sep-ico { padding: 3px 7px; } /* Dentro del visor: una franja al pie, con miniaturas más grandes */ .visor-pie.sep-editor { flex: none; margin: 0; max-height: 34vh; overflow-y: auto; } .visor-pie .sep-pag { width: 78px; height: 102px; } .ws-panel .sep-paginas { gap: 6px 4px; } .ws-panel .sep-pag { width: 72px; height: 96px; } /* Espacio usado: una barra fina al pie */ #lib-uso { margin: 0; padding: 6px 10px 8px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--muted); position: relative; } #lib-uso::before { content: ""; display: block; height: 3px; border-radius: 3px; margin-bottom: 4px; background: linear-gradient(to right, var(--accent) var(--uso, 0%), var(--line) var(--uso, 0%)); } .lib-item select.mover { flex: none; max-width: 55%; font: inherit; font-size: 12px; padding: 3px 4px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); } #apps-search { margin: 8px 10px 0; border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; font: inherit; background: var(--bg); color: var(--ink); } /* Bandeja de lotes (comun/ui/bandejaLotes.ts; maqueta en docs/maquetas/bandeja-lotes.html) */ #lotes-cuerpo { flex: 1; min-height: 0; container-type: inline-size; display: flex; } .lt-cuerpo { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; } .lt-izq, .lt-der { padding: 12px; display: flex; flex-direction: column; gap: 12px; min-width: 0; } .lt-der { display: none; } @container (min-width: 760px) { .lt-cuerpo:not(.lt-una) { flex-direction: row; overflow: hidden; } .lt-cuerpo:not(.lt-una) .lt-izq { width: 340px; flex: none; overflow-y: auto; border-right: 1px solid var(--line); } .lt-der { display: flex; flex: 1; overflow-y: auto; padding: 14px 18px; } .lt-lote .lt-archivos { display: none; } .lt-lote > button > .ic:first-child { display: none; } .lt-una .lt-izq { max-width: 640px; margin: 0 auto; width: 100%; } } .lt-sec { display: flex; flex-direction: column; gap: 6px; } .lt-sec > h3 { margin: 0; font-size: 12px; color: var(--muted); font-weight: 600; display: flex; justify-content: space-between; } .lt-texto { margin: 0; font-size: 12.5px; } .lt-nota { margin: 0; color: var(--muted); font-size: 12px; } .lt-aviso { color: var(--plan); } .lt-tarea { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; } .lt-et { color: var(--muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; } .lt-tarea q { quotes: "«" "»"; font-weight: 500; overflow-wrap: anywhere; } .lt-app { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-size: 12px; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 2px 10px; } .lt-app .ic { width: 13px; height: 13px; } .lt-progreso { display: flex; flex-direction: column; gap: 6px; } .lt-fila { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted); } .lt-fila b { color: var(--ink); font-weight: 600; } .lt-barra { height: 6px; border-radius: 999px; background: var(--panel); overflow: hidden; display: flex; } .lt-barra i { display: block; height: 100%; } .lt-barra .hecho { background: var(--ok); } .lt-barra .curso { background: var(--accent); } .lt-barra .prot { background: color-mix(in srgb, var(--accent) 35%, transparent); } .lt-acciones { display: flex; gap: 6px; flex-wrap: wrap; } .lt-sutil { border-color: transparent; color: var(--muted); } .lt-link { border: 0; background: none; padding: 0; color: var(--accent); cursor: pointer; font: inherit; font-size: 12px; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; } .lt-link .ic { width: 13px; height: 13px; } .lt-link:hover { text-decoration: underline; } .lt-estado { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; border-radius: 999px; padding: 1px 8px; white-space: nowrap; flex: none; } .lt-estado .ic { width: 12px; height: 12px; } .lt-e-hecho { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); } .lt-e-curso, .lt-e-listo { color: var(--accent); background: var(--accent-soft); } .lt-e-prot { color: var(--accent); border: 1px dashed color-mix(in srgb, var(--accent) 50%, transparent); } .lt-e-cola { color: var(--muted); background: var(--panel); } .lt-e-aviso { color: var(--plan); background: var(--plan-soft); } .lt-e-error { color: var(--err); background: color-mix(in srgb, var(--err) 10%, transparent); } .lt-lote { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; } .lt-lote.sel { border-color: var(--accent); } .lt-lote > button { width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 0; background: var(--bg); color: var(--ink); cursor: pointer; text-align: left; font: inherit; } .lt-lote > button:hover, .lt-lote.sel > button { background: var(--panel); } .lt-lote > button > .ic:first-child { width: 14px; height: 14px; color: var(--muted); flex: none; } .lt-n { font-weight: 600; min-width: 52px; } .lt-txt { flex: 1; min-width: 0; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lt-archivos { display: flex; flex-direction: column; border-top: 1px solid var(--line); } .lt-arch { display: flex; align-items: center; gap: 8px; padding: 6px 10px; font-size: 12px; border-bottom: 1px solid var(--line); } .lt-arch:last-child { border-bottom: 0; } .lt-arch > .ic { width: 14px; height: 14px; color: var(--muted); flex: none; } .lt-nom { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lt-mas { color: var(--muted); font-size: 12px; padding: 6px 10px; } .lt-apartado { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); border-left: 3px solid var(--plan); border-radius: 8px; padding: 8px 10px; } .lt-apartado > .ic { color: var(--plan); margin-top: 2px; width: 14px; height: 14px; flex: none; } .lt-apartado > div { flex: 1; min-width: 0; } .lt-apartado b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lt-apartado small { color: var(--muted); } .lt-der h2 { margin: 0; font-size: 15px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .lt-resumen { margin: 0; font-size: 12.5px; color: var(--muted); white-space: pre-wrap; } .lt-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; } .lt-tarj { border: 1px solid var(--line); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 6px; min-width: 0; } .lt-tarj.av { border-left: 3px solid var(--plan); } .lt-tarj .lt-nom { font-weight: 600; flex: none; } .lt-meta { color: var(--muted); font-size: 11.5px; } .lt-prot { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 11.5px; } .lt-prot .ic { width: 13px; height: 13px; flex: none; } .lt-tarj footer { display: flex; justify-content: space-between; align-items: center; gap: 6px; } /* Con qué App se trabajan los documentos de la cola (o con ninguna) */ .lt-apps { display: flex; flex-wrap: wrap; gap: 8px; } /* «¿Qué hacemos con ellos?» (docs/maquetas/bandeja-lotes.html): una tarjeta por cosa que se puede hacer */ .lt-opciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; } .lt-opcion { display: flex; gap: 10px; align-items: flex-start; text-align: left; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); padding: 10px 12px; cursor: pointer; font: inherit; color: var(--ink); } .lt-opcion:hover { border-color: var(--accent); } .lt-opcion > svg { width: 18px; height: 18px; color: var(--accent); flex: none; margin-top: 1px; } .lt-opcion b { display: block; font-size: 13px; } .lt-opcion small { display: block; color: var(--muted); font-size: 11.5px; line-height: 1.35; margin-top: 2px; } .lt-elegida { display: flex; align-items: center; gap: 8px; border: 1px solid var(--accent); background: var(--accent-soft); border-radius: 10px; padding: 8px 12px; } .lt-elegida > svg { color: var(--accent); width: 16px; height: 16px; } .lt-elegida b { flex: 1; } .lt-espera, .lt-grupo-clasif { display: flex; flex-direction: column; gap: 2px; } /* Mientras se hace: lo que va haciendo el Escudo con cada documento (así se ve, no se supone) */ .lt-escudo-cuenta { display: inline-flex; align-items: center; gap: 6px; color: var(--ok); font-weight: 600; font-size: 12.5px; } .lt-escudo-cuenta svg { width: 15px; height: 15px; } .lt-recientes { display: flex; flex-direction: column; gap: 3px; border-top: 1px solid var(--line); padding-top: 6px; } .lt-reciente { display: grid; grid-template-columns: 14px minmax(0, 1fr); column-gap: 6px; font-size: 12px; } .lt-reciente svg { width: 13px; height: 13px; color: var(--ok); grid-row: span 2; margin-top: 2px; } .lt-reciente.mal svg { color: var(--err); } .lt-reciente b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lt-reciente span { color: var(--muted); } .lt-grupo-clasif { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; } .lt-grupo-clasif .lt-av { color: var(--plan); } details.lt-grupo-clasif > summary { cursor: pointer; list-style-position: inside; } details.lt-grupo-clasif .lt-arch .lt-tipo { margin-left: auto; font-size: 11.5px; max-width: 160px; } .lt-grupo { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; cursor: pointer; } .lt-grupo input { margin-top: 3px; accent-color: var(--accent); } .lt-grupo small { display: block; color: var(--muted); } .lt-grupo { flex-wrap: wrap; } .lt-grupo > div { flex: 1 1 150px; min-width: 0; } .lt-grupo > .lt-tipo { margin-left: auto; } .lt-grupo b .ic { width: 13px; height: 13px; vertical-align: -2px; } /* Cola «Automático»: el tipo de cada documento, y lo que espera a que lo elijas */ .lt-tipo { font: inherit; font-size: 12px; border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; background: var(--bg); color: var(--ink); max-width: 180px; flex: none; } .lt-decidir { border: 1px solid var(--plan); background: var(--plan-soft, var(--panel)); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; } .lt-decidir > b { font-size: 12.5px; } .lt-decidir .lt-nota { margin: 0; } .lt-decidir-fila { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 6px; } .lt-decidir-info { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; } .lt-decidir-info .lt-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lt-decidir-info small { color: var(--muted); } .lt-decidir-acc { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .lt-decidir-acc .btn { padding: 3px 9px; font-size: 12px; } .lt-tramos { flex-basis: 100%; display: flex; flex-direction: column; gap: 4px; } .lt-tramo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); } .lt-num.lt-pag { width: 58px; } .lt-tablas { display: flex; flex-direction: column; gap: 8px; } .lt-tabla-tit { font-size: 12.5px; margin: 8px 0 0; color: var(--ink); } .lt-tabla-tit:first-child { margin-top: 0; } .ap-aviso { margin: 6px 0 0; font-size: 12px; color: var(--plan); } .lt-campo { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; } .lt-campo select, .lt-num { font: inherit; border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; background: var(--bg); color: var(--ink); } .lt-num { width: 90px; } .lt-check { display: flex; align-items: center; gap: 6px; font-size: 12.5px; } /* Cadenas: las guardadas, los pasos en orden (con lo dudoso y subir/bajar/quitar) y añadir */ .lt-cadenas { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .lt-cadena { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 999px; padding: 3px 11px 3px 9px; font: inherit; font-size: 12.5px; cursor: pointer; } .lt-cadena svg { width: 13px; height: 13px; color: var(--accent); } .lt-cadena.sel { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 600; } .lt-cadena-q { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 2px; margin-left: -4px; display: inline-grid; place-items: center; } .lt-cadena-q svg { width: 12px; height: 12px; } .lt-pasos { display: flex; flex-direction: column; gap: 6px; } .lt-paso { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px; flex-wrap: wrap; } .lt-paso > svg { width: 16px; height: 16px; color: var(--accent); flex: none; } .lt-paso-n { width: 20px; height: 20px; border-radius: 50%; background: var(--panel); color: var(--muted); display: inline-grid; place-items: center; font-size: 11px; font-weight: 600; flex: none; } .lt-paso-t { flex: 1 1 160px; min-width: 0; } .lt-paso-t b { display: block; font-size: 13px; } .lt-paso-t small { display: block; color: var(--muted); font-size: 11.5px; line-height: 1.35; } .lt-paso-c { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .lt-paso-c select, .lt-paso-c input { font: inherit; font-size: 12px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; } .lt-paso-c input { width: 150px; } .lt-paso.hecho .lt-paso-n { background: var(--accent-soft); color: var(--accent); } .lt-paso.ahora { border-color: var(--accent); } .lt-paso.luego { opacity: .7; } .lt-ib { border: 0; background: none; color: var(--muted); border-radius: 6px; width: 26px; height: 26px; display: inline-grid; place-items: center; cursor: pointer; padding: 0; } .lt-ib:hover:not(:disabled) { background: var(--panel); color: var(--ink); } .lt-ib:disabled { opacity: .3; cursor: default; } .lt-ib span:empty { display: none; } .lt-anadir { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .lt-nombre-cadena { flex: 1 1 160px; min-width: 0; } .lt-check input { accent-color: var(--accent); } .lt-area { font: inherit; border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; background: var(--bg); color: var(--ink); resize: vertical; } .lt-sugerencias { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); overflow: hidden; box-shadow: 0 4px 14px rgb(0 0 0 / 8%); } .lt-sugerencias[hidden] { display: none; } .lt-sug { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 0; background: none; color: var(--ink); font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; } .lt-sug:hover, .lt-sug:focus-visible { background: var(--panel); outline: none; } .lt-sug .ic { width: 14px; height: 14px; color: var(--muted); flex: none; } .lt-sug b { font-weight: 600; } .lt-sug span { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tabla-regs { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .tabla-regs .mas-buscar { margin: 0; } .lt-tabla-caja { overflow: auto; max-height: 60vh; border: 1px solid var(--line); border-radius: 8px; min-width: 0; } .lt-tabla { border-collapse: collapse; font-size: 12px; width: max-content; min-width: 100%; } .lt-tabla th { position: sticky; top: 0; z-index: 1; background: var(--panel); color: var(--muted); font-weight: 600; text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; } .lt-tabla td { padding: 5px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; } .lt-tabla tbody tr { cursor: pointer; } .lt-tabla tbody tr:hover td { background: var(--accent-soft); } .lt-tabla tr.av td:first-child { box-shadow: inset 3px 0 var(--plan); } .lt-tabla tr.anulado td { color: var(--muted); text-decoration: line-through; } .lt-tabla .lt-t-nom { font-weight: 600; max-width: 220px; } .lt-barra-tabla { display: flex; gap: 6px; align-items: center; } .lt-barra-tabla .mas-buscar { flex: 1; min-width: 0; } .lt-filtro { font: inherit; font-size: 12.5px; border: 1px solid var(--line); border-radius: 8px; padding: 5px 6px; background: var(--bg); color: var(--ink); } /* «Datos reales | Lo que ve Claude» (tabla de registros y revisión) */ .esc-interruptor { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 2px; background: var(--bg); flex: none; } .esc-op { display: inline-flex; align-items: center; gap: 5px; border: 0; border-radius: 999px; padding: 4px 10px; background: none; color: var(--muted); font: inherit; font-size: 12.5px; cursor: pointer; white-space: nowrap; } .esc-op svg { width: 13px; height: 13px; } .esc-op.on { background: var(--accent-soft); color: var(--ink); font-weight: 600; } td.tr-protegido::after { content: ""; display: inline-block; width: 12px; height: 12px; margin-left: 5px; vertical-align: -1px; background: var(--ok); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3C/svg%3E") center / contain no-repeat; } td.tr-claude { font-family: ui-monospace, Consolas, monospace; font-size: 12px; } /* Lo que llegó en claro a Claude: su escudo para protegerlo desde ahora (se ve al pasar por la fila o con el teclado) */ td.tr-claro { position: relative; } .tr-proteger { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-right: 6px; padding: 0; vertical-align: middle; border: 1px dashed var(--err); border-radius: 5px; background: var(--bg); color: var(--err); cursor: pointer; opacity: 0; } .tr-proteger .ic { width: 12px; height: 12px; } tr:hover .tr-proteger, .tr-proteger:focus-visible { opacity: 1; } .tr-proteger:hover { background: color-mix(in srgb, var(--err) 10%, var(--bg)); } .tr-proteger:disabled { opacity: .5; cursor: wait; } .tr-ya { color: var(--ok); font-weight: 600; } .tr-claros { max-height: 320px; gap: 4px; } .tr-claros > .btn, .tr-claros .btn.primary { align-self: flex-start; margin-top: 6px; } .tr-claros .tr-aviso { color: var(--ok); } /* La columna entera y el diccionario: el escudo de la cabecera, la propuesta y la doble verificación al quitar */ .tr-col-escudo { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-left: 4px; padding: 0; vertical-align: middle; border: 0; border-radius: 4px; background: none; cursor: pointer; } .tr-col-escudo .ic { width: 13px; height: 13px; } .fd-escudo { display: inline-flex; margin-left: 5px; vertical-align: -2px; } .fd-escudo .ic { width: 13px; height: 13px; } .tr-col-escudo:hover, .tr-col-escudo:focus-visible { background: var(--accent-soft); } .tr-propuestas { display: flex; flex-direction: column; gap: 6px; } .tr-propuestas:empty { display: none; } .tr-propuesta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 8px; background: var(--accent-soft); font-size: 12px; } .tr-propuesta > span { flex: 1 1 260px; min-width: 0; } .tr-propuesta .ic { width: 14px; height: 14px; color: var(--accent); } .tr-muestra { font-family: ui-monospace, Consolas, monospace; font-size: 11px; } .tr-quitar { align-self: flex-start; color: var(--err); } .tr-peligro { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border: 1px solid var(--err); border-radius: 8px; background: color-mix(in srgb, var(--err) 7%, var(--bg)); font-size: 12px; } .tr-peligro p { margin: 0; } .tr-peligro .btn { align-self: flex-start; } .tr-peligro-btn:not(:disabled) { background: var(--err); border-color: var(--err); color: #fff; } /* Revisión en dos paneles (comun/ui/revisionRegistros.ts): el documento a la izquierda y sus campos a la derecha */ #rv-ov { position: fixed; inset: 0; z-index: 45; background: var(--bg); display: flex; flex-direction: column; container-type: inline-size; } /* En la cabecera del agente: la ficha (‹ título ›), las zonas y cerrar */ .rv-cab b { flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; padding: 0 2px; } .rv-cab b svg { width: 14px; height: 14px; vertical-align: -2px; } .rv-cab b .lt-nota { font-weight: 400; } /* En el panel estrecho no cabe el nombre: «‹ 1 de 3 ›» (el nombre, al pasar el ratón) y los botones más juntos */ @media (max-width: 480px) { .rv-cab b svg, .rv-cab-nom { display: none; } header.con-pantalla { gap: 2px; padding-left: 6px; padding-right: 6px; } header.con-pantalla .btn.ico { padding: 4px 6px; } header.con-pantalla .zn-ib { width: 26px; } } /* Documento | divisor | campos. En el panel estrecho, uno encima del otro; desde 760 px, lado a lado. El reparto, con el divisor (comun/ui/zonas.ts): --rv-doc (ancho) y --rv-doc-alto (alto) */ .rv-cuerpo { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; } .rv-zdoc { position: relative; flex: 0 0 var(--rv-doc-alto, 55%); min-height: 140px; min-width: 0; display: flex; flex-direction: column; background: var(--panel); } .rv-zdoc[hidden], .rv-lado[hidden] { display: none; } .rv-doc { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 10px; overflow-y: auto; } .rv-doc:has(> .visor-incrustado) { padding: 0; overflow: hidden; } .rv-pag { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 4px; background: #fff; } .rv-lado { flex: 1; min-height: 0; min-width: 0; display: flex; flex-direction: column; } .rv-cuerpo:has(> .rv-lado[hidden]) > .rv-zdoc { flex: 1; } .rv-cuerpo:has(> .rv-lado[hidden]) > .zn-divisor, .rv-zdoc[hidden] + .zn-divisor { display: none; } .rv-cuerpo > .zn-divisor { width: auto; height: 7px; margin: -3px 0; cursor: row-resize; } .rv-cuerpo > .zn-divisor::after { top: 3px; bottom: auto; left: 0; right: 0; width: auto; height: 1px; } .rv-cuerpo > .zn-divisor:hover::after, .rv-cuerpo > .zn-divisor.arrastrando::after { left: 0; width: auto; top: 2px; height: 3px; } @container (min-width: 760px) { .rv-cuerpo { flex-direction: row; } .rv-zdoc { flex: 0 0 var(--rv-doc, 72%); min-width: 280px; min-height: 0; } .rv-lado { min-width: 260px; } .rv-cuerpo > .zn-divisor { width: 7px; height: auto; margin: 0 -3px; cursor: col-resize; } .rv-cuerpo > .zn-divisor::after { top: 0; bottom: 0; left: 3px; right: auto; width: 1px; height: auto; } .rv-cuerpo > .zn-divisor:hover::after, .rv-cuerpo > .zn-divisor.arrastrando::after { top: 0; height: auto; left: 2px; width: 3px; } } /* Barra de los campos: «Datos reales | Lo que ve Claude» y ⤢; debajo, los campos con un solo desplazamiento */ .rv-barra { flex: none; display: flex; gap: 6px; align-items: center; padding: 5px 6px 5px 10px; border-bottom: 1px solid var(--line); } .rv-play-campos { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; border-color: var(--accent); color: var(--accent); } .rv-play-campos[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); } .rv-play-campos svg { width: 14px; height: 14px; } @container (max-width: 420px) { .rv-play-campos { font-size: 0; gap: 0; padding: 4px 8px; } } .rv-datos { flex: 1; min-height: 0; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; } .rv-motivo { margin: 0; padding: 6px 10px; border-radius: 8px; background: var(--plan-soft); color: var(--plan); font-size: 12.5px; } /* Lo que flota sobre el documento: ⤢ arriba a la derecha, la píldora del repaso abajo y la tarjeta del campo */ .rv-zdoc > .rv-amp-doc { position: absolute; top: 5px; right: 8px; z-index: 7; background: var(--bg); box-shadow: 0 1px 4px rgb(0 0 0 / 12%); } .rv-pildora { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 11; display: flex; align-items: center; gap: 2px; padding: 4px; max-width: calc(100% - 20px); border-radius: 999px; background: var(--bg); border: 1px solid var(--line); box-shadow: 0 4px 16px rgb(0 0 0 / 14%); } .rv-play { width: 30px; height: 30px; flex: none; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--accent); color: var(--on-accent); cursor: pointer; } .rv-play:disabled { opacity: .45; cursor: default; } .rv-play svg { width: 15px; height: 15px; } .rv-pos { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; padding: 0 6px; } .rv-pos b { font-weight: 600; } .rv-pildora .zn-menu { min-width: 290px; } .rv-tarjeta { position: absolute; z-index: 10; right: 12px; top: 44px; width: 290px; max-width: calc(100% - 24px); display: flex; flex-direction: column; gap: 6px; padding: 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgb(0 0 0 / 16%); } .rv-tarjeta[hidden], .rv-tarjeta .lt-nota[hidden] { display: none; } .rv-tarjeta-et { font-size: 11.5px; font-weight: 700; color: var(--accent); } .rv-tarjeta input { font: inherit; font-weight: 600; min-width: 0; border: 2px solid var(--accent); border-radius: 6px; padding: 4px 8px; background: var(--bg); color: var(--ink); } .rv-tarjeta input[readonly] { border-style: dashed; } .rv-tarjeta-acc { display: flex; gap: 6px; } .rv-tarjeta-acc .btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 4px; } .rv-tarjeta-acc .btn svg { width: 14px; height: 14px; } .rv-tarjeta-acc .btn.on { border-color: var(--err); color: var(--err); } @container (max-width: 759px) { .rv-tarjeta { top: auto; bottom: 60px; left: 10px; right: 10px; width: auto; max-width: none; } } /* El visor del Escudo incrustado (comun/ui/visorClaude.ts): dos chips arriba, el cajón encima de la página y el zoom flotando */ .visor-ov.visor-incrustado { position: absolute; inset: 0; z-index: auto; padding: 0; gap: 0; background: var(--panel); } .visor-inc-barra { flex: none; display: flex; align-items: center; gap: 6px; padding: 6px 46px 6px 10px; } .visor-chip-btn { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 999px; padding: 1px 10px; font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; } .visor-chip-btn svg { width: 13px; height: 13px; } .visor-chip-btn.verde { color: var(--ok); } .visor-chip-btn[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } .visor-ov .visor-main { position: relative; } .visor-incrustado .visor-main { flex-direction: column; gap: 0; } .visor-ov .visor-cuerpo { position: relative; } .visor-incrustado .visor-cuerpo { gap: 0; } .visor-incrustado .visor-paginas, .visor-incrustado .visor-texto { border: 0; border-radius: 0; } .visor-ov .visor-lat.visor-cajon { position: absolute; z-index: 8; top: 0; left: 0; bottom: 0; width: min(380px, 92%); max-height: none; overflow: auto; padding: 10px 12px; background: var(--bg); border-right: 1px solid var(--line); box-shadow: 8px 0 24px rgb(0 0 0 / 12%); transform: translateX(-104%); visibility: hidden; transition: transform .2s, visibility .2s; } .visor-ov .visor-lat.visor-cajon.abierto { transform: none; visibility: visible; } /* El visor suelto: la barra de chips arriba y el contenido sin márgenes; en ancho, el cajón es una columna */ .visor-ov:not(.visor-incrustado) { padding: 0; gap: 0; } .visor-ov:not(.visor-incrustado) .visor-inc-barra { padding-right: 8px; border-bottom: 1px solid var(--line); } .visor-ov:not(.visor-incrustado) .visor-cuerpo { padding: 8px 10px 10px; } /* El espacio de trabajo del documento: las cinco herramientas arriba, cada una con su punto de estado */ .visor-herr { flex: none; display: flex; gap: 2px; padding: 4px 8px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; } .visor-herr-b { display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; color: var(--muted); border-radius: 8px; padding: 5px 10px; font: inherit; font-size: 12.5px; cursor: pointer; white-space: nowrap; } .visor-herr-b svg { width: 14px; height: 14px; } .visor-herr-b:hover { background: var(--panel); color: var(--ink); } .visor-herr-b[aria-current="true"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; } .visor-herr-p { width: 6px; height: 6px; border-radius: 50%; background: var(--line); order: 9; } .visor-herr-b.hecho .visor-herr-p { background: var(--ok); } .visor-herr-b.decide .visor-herr-p { background: #e0a43a; } .chip > span.chip-nombre-abre { cursor: pointer; } .chip > span.chip-nombre-abre:hover { color: var(--accent); text-decoration: underline; } .chip button.apagada, .chip.todos.apagada { display: none; } .visor-herr .zn-menu-caja { flex: none; } .visor-herr-n { font-size: 11px; font-weight: 400; opacity: .8; } /* El pie de la columna de cada herramienta: sus botones, siempre en el mismo sitio (el principal, el último) */ .visor-lat .visor-herr-pie { position: sticky; bottom: -10px; margin: auto -12px -10px; padding: 8px 12px 10px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; background: var(--bg); border-top: 1px solid var(--line); } .visor-herr-int { display: flex; align-items: center; gap: 6px; cursor: pointer; } .visor-previa { flex: none; font-size: 11px; padding: 1px 8px; border-radius: 999px; background: var(--warn); color: var(--ink); white-space: nowrap; } .visor-previa.guardado { background: var(--accent-soft); color: var(--accent); } .visor-guardar { flex: none; padding: 2px 10px; font-size: 12px; } .ws-panel { display: flex; flex-direction: column; gap: 10px; font-size: 13px; } .ws-panel p { margin: 0; color: var(--muted); } .ws-panel p.ws-aviso { color: var(--ink); padding: 8px 10px; border-radius: 8px; background: var(--panel); } .ws-panel .ws-tipo { font-size: 15px; font-weight: 600; color: var(--ink); } .ws-panel .ws-acc { display: flex; flex-wrap: wrap; gap: 6px; } .ws-panel .ws-et { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: -4px; } .ws-panel .ws-sel { border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; background: var(--bg); color: var(--ink); font: inherit; } /* Visores por tipo (visorDatos.ts): rejilla de Excel/CSV, árbol de JSON/XML */ .visor-doc { flex: 1; min-height: 0; display: flex; flex-direction: column; } .visor-doc[hidden] { display: none; } .vd-caja { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; } .vd-barra { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--muted); } .vd-seg { display: inline-flex; gap: 4px; } .vd-rejilla { flex: 1; min-height: 0; overflow: auto; border: 1px solid var(--line); border-radius: 8px; } .vd-tabla { border-collapse: separate; border-spacing: 0; font-size: 12px; width: max-content; min-width: 100%; } .vd-tabla th, .vd-tabla td { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 3px 8px; white-space: nowrap; text-align: left; max-width: 320px; overflow: hidden; text-overflow: ellipsis; } .vd-tabla th { position: sticky; top: 0; z-index: 1; background: var(--panel); font-weight: 600; } .vd-tabla th > span { vertical-align: middle; } .vd-tabla th.prot { background: color-mix(in srgb, var(--ok) 12%, var(--panel)); color: var(--ok); } .vd-tabla th.fuera, .vd-tabla td.fuera { opacity: .4; } .vd-tabla th.fuera > span { text-decoration: line-through; } .vd-tabla td.num { text-align: right; font-variant-numeric: tabular-nums; } .vd-tabla .vd-n { position: sticky; left: 0; background: var(--panel); color: var(--muted); text-align: right; font-weight: 400; z-index: 2; } .vd-tabla td.vd-n { z-index: 0; } .vd-tabla mark.seudo { font-weight: 600; } .vd-esc { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-left: 4px; vertical-align: middle; border: 0; border-radius: 5px; background: none; color: var(--muted); cursor: pointer; padding: 0; } .vd-esc:hover { background: var(--bg); color: var(--ink); } .vd-esc svg { width: 13px; height: 13px; } th.prot .vd-esc { color: var(--ok); } .vd-hojas { display: flex; gap: 2px; overflow-x: auto; border-top: 1px solid var(--line); padding-top: 4px; } .vd-hoja { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; border-radius: 6px; padding: 2px 10px; font: inherit; font-size: 12px; color: var(--muted); cursor: pointer; white-space: nowrap; } .vd-hoja svg { width: 12px; height: 12px; } .vd-hoja[aria-current="true"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; } .vd-arbol { flex: 1; min-height: 0; overflow: auto; border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; font: 12px/1.7 Consolas, "Cascadia Mono", monospace; } .vd-arbol details > :not(summary) { margin-left: 16px; } .vd-arbol summary { cursor: pointer; white-space: nowrap; } .vd-arbol .vd-hoja-arbol { padding-left: 14px; white-space: nowrap; } .vd-arbol .vd-k { color: var(--accent); } .vd-arbol .vd-t { margin-left: 6px; font: 11px "Segoe UI", system-ui, sans-serif; background: var(--panel); color: var(--muted); border-radius: 999px; padding: 0 6px; } .vd-arbol .vd-v.number, .vd-arbol .vd-v.boolean { color: var(--ok); } .vd-arbol .vd-v.nulo { color: var(--muted); } .vd-md { flex: 1; min-height: 0; overflow: auto; border: 1px solid var(--line); border-radius: 8px; padding: 12px 16px; user-select: text; } .vd-docx { background: #fff; color: #1d2433; line-height: 1.55; } .vd-docx table { width: 100%; border-collapse: collapse; margin: 6px 0 16px; } .vd-docx td { border: 1px solid #d6dae2; padding: 3px 8px; vertical-align: top; } .vd-docx td p { margin: 0; } .vd-web { flex: 1; min-height: 0; width: 100%; border: 1px solid var(--line); border-radius: 8px; background: #fff; } .vd-opciones { display: flex; flex-direction: column; gap: 4px; } .vd-opcion { display: flex; align-items: flex-start; gap: 8px; border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; cursor: pointer; color: var(--ink); font-size: 13px; } .vd-opcion:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); } .vd-opcion input { margin-top: 3px; } .vd-opcion small { color: var(--muted); } .vd-cols-atajos { display: flex; gap: 10px; margin-bottom: 2px; } .vd-enlace { border: 0; background: none; padding: 0; color: var(--accent); font: inherit; font-size: 12px; cursor: pointer; } .vd-enlace:hover { text-decoration: underline; } .vd-docx-fondo { flex: 1; min-height: 0; overflow: auto; background: var(--panel); border-radius: 8px; padding: 20px 16px; } .vd-docx-fondo .vd-docx { max-width: 800px; margin: 0 auto; box-shadow: 0 2px 12px rgb(0 0 0 / 12%); border-radius: 4px; padding: 40px 50px; min-height: 100%; } .vd-docx h1 { font-size: 22px; margin: 20px 0 10px; } .vd-docx h2 { font-size: 18px; margin: 18px 0 8px; } .vd-docx h3 { font-size: 15px; margin: 14px 0 6px; } .vd-docx p, .vd-docx li { font-size: 14px; line-height: 1.6; } .vd-docx ul, .vd-docx ol { margin-left: 24px; } .vd-docx th { background: #f0f2f5; font-weight: 600; border: 1px solid #d6dae2; padding: 6px 10px; } .vd-docx img { max-width: 100%; height: auto; } .vd-docx-pie { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); padding: 2px 4px; } .vd-cols { display: flex; flex-direction: column; gap: 2px; max-height: 40vh; overflow-y: auto; } .vd-col { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink); } .chip-herr.chip-importar, .chip-herr.chip-aplanar { color: var(--accent); } /* Adjuntos del mensaje, compactos: cada uno, una píldora (nombre, escudo con su número y ×), varias por línea. Lo demás se trabaja en el visor al pulsar el nombre; en la píldora solo queda, como icono, lo que pide atención: el aviso de seguridad y una clasificación por decidir. Los botones «… todos», pequeños, en la misma línea */ #chips { gap: 4px; } #chips .chip { flex-wrap: nowrap; gap: 3px; padding: 1px 2px 1px 8px; border-radius: 999px; max-width: min(100%, 340px); } #chips .chip > span:first-child { flex: 0 1 auto; min-width: 0; max-width: 220px; } #chips .chip > button[aria-label="Quitar"] { font-size: 13px; padding: 0 4px; } #chips .chip > .chip-herr, #chips .chip > .chip-guardar { display: none; } #chips .chip > .chip-herr.decide, #chips .chip > .chip-herr.trabaja { display: inline-flex; font-size: 0; gap: 0; padding: 2px 4px; max-width: none; } #chips .chip > .chip-herr.decide .ic, #chips .chip > .chip-herr.trabaja .ic { width: 12px; height: 12px; } #chips .chip > .chip-escudo { border: 0; padding: 0 3px; font-size: 11px; font-weight: 600; background: none; } #chips .chip > .chip-escudo.no { border: 1px solid var(--err); padding: 0 6px; } #chips .chip > .chip-seguridad { font-size: 0; gap: 0; padding: 2px 4px; } #chips .chip > .chip-seguridad .ic { width: 12px; height: 12px; } #chips .chip.todos { padding: 1px 8px; font-size: 11px; border-color: transparent; background: none; } #chips .chip.todos:hover { border-color: var(--line); background: var(--bg); } #chips .chip.todos .ic { width: 12px; height: 12px; } .ws-panel select { width: 100%; } .ws-proteger > input { width: 100%; box-sizing: border-box; font-family: ui-monospace, Consolas, monospace; font-size: 13px; } .ws-proteger .ws-error { color: var(--err); } .ws-proteger .ws-de-donde { font-size: 12px; } .ws-proteger .ws-todos { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--ink); cursor: pointer; } .ws-recordar { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-left: 4px; } .ws-recordar code { font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; padding: 1px 6px; border-radius: 6px; background: var(--panel); color: var(--ink); } .ws-recordar .btn { padding: 1px 8px; font-size: 12px; } .ws-proteger .ws-aviso { color: var(--ink); padding: 8px 10px; border-radius: 8px; background: var(--panel); } header .visor-cab-arriba .visor-tit { flex: 1 1 auto; font-size: 13px; } header .visor-cab-arriba .visor-tit > svg { width: 14px; height: 14px; } header .visor-cab-arriba .visor-nav { flex: none; white-space: nowrap; } header .visor-cab-arriba .visor-pos { min-width: 0; } @media (max-width: 480px) { header .visor-cab-arriba .visor-tit > b { display: none; } header .visor-cab-arriba .visor-pos { min-width: 0; } } @media (min-width: 900px) { .visor-ov:not(.visor-incrustado) .visor-main { flex-direction: row; gap: 0; } .visor-ov:not(.visor-incrustado) .visor-lat.visor-cajon { position: static; display: none; transform: none; visibility: visible; box-shadow: none; width: 360px; flex: none; } .visor-ov:not(.visor-incrustado) .visor-lat.visor-cajon.abierto { display: flex; } } .visor-cajon .visor-cab { position: relative; padding-right: 30px; } .visor-cajon .visor-cab > button:last-child { position: absolute; top: -4px; right: -4px; margin: 0; } .visor-zoom-flota { position: absolute; z-index: 6; top: 8px; right: 12px; flex-wrap: nowrap; gap: 2px; padding: 3px 6px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 2px 10px rgb(0 0 0 / 10%); opacity: 0; transition: opacity .2s; } .visor-ov:hover .visor-zoom-flota, .visor-zoom-flota:focus-within { opacity: 1; } .visor-zoom-flota .visor-tab { font-size: 0; gap: 0; padding: 4px 6px; } .visor-zoom-flota .visor-tab svg { width: 14px; height: 14px; } .visor-zoom-flota .visor-pags { margin-right: 4px; } .visor-zoom-flota .visor-pagpos { min-width: 0; } .zn-menu .visor-tabs { flex-direction: column; align-items: stretch; gap: 2px; } .zn-menu .visor-tab { border: 0; border-radius: 6px; padding: 5px 8px; color: var(--ink); } .zn-menu .visor-tab.on { background: var(--accent-soft); color: var(--accent); border: 0; } .zn-menu .visor-estilos { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 0; padding-top: 4px; border-top: 1px solid var(--line); } /* El recuadro de cada campo sobre la página; el del campo en el que está el repaso, encendido (y el resto en penumbra) */ .rv-marca { position: absolute; pointer-events: none; border: 1.5px dashed color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 3px; z-index: 2; } .rv-foco-doc .rv-marca:not(.on), .rv-foco-doc .visor-marca { opacity: 0; } .rv-marca.aprox { border-style: dashed; } .rv-marca.on { border: 2.5px solid var(--accent); box-shadow: 0 0 0 9999px rgb(0 0 0 / 28%); z-index: 3; animation: visor-destello 0.9s ease-out; } .rv-marca.aprox.on { border-style: dashed; } .rv-marca.on::after { content: attr(data-etiqueta); position: absolute; left: -2px; bottom: calc(100% + 3px); white-space: nowrap; padding: 1px 6px; border-radius: 4px; background: var(--accent); color: var(--on-accent); font: 600 11px "Segoe UI", sans-serif; } /* El campo del repaso, bien visible: fondo y borde de acento, y su valor en negrita */ .fd-c.rv-foco { position: relative; background: var(--accent-soft); box-shadow: 0 0 0 6px var(--accent-soft), 0 0 0 8.5px var(--accent); border-radius: 6px; animation: visor-destello 0.9s ease-out; } .fd-c.rv-foco .fd-fila input, .fd-c.rv-foco .fd-fila select { border-color: var(--accent) !important; border-width: 2px; font-weight: 600; background: var(--bg) !important; } .fd-c.rv-foco label { color: var(--accent); font-weight: 700; } .rv-falta { font-size: 12px; color: var(--plan); font-weight: 600; } .rv-auto { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--muted); white-space: nowrap; cursor: pointer; } .zn-menu .rv-auto { color: var(--ink); } .rv-teclas { display: block; padding: 4px 8px; font-size: 11px; color: var(--muted); white-space: normal; } .rv-lista { max-width: 210px; } /* Campos de la validación: cuáles y en qué orden (como «Columnas» de la tabla) */ .rv-panel-campos { margin: 6px 10px 0; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); display: flex; flex-direction: column; gap: 8px; max-height: 45vh; overflow: auto; } .rv-pc-lista { display: flex; flex-direction: column; gap: 2px; } .rv-pc-fila { display: flex; align-items: center; gap: 4px; font-size: 12.5px; } .rv-pc-fila label { flex: 1; display: flex; align-items: center; gap: 4px; cursor: pointer; } .rv-pc-fila.fuera label { color: var(--muted); } .rv-pc-pie { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .rv-pc-pie .lt-area { flex: 1 1 220px; min-width: 0; } /* No conforme en el repaso: se queda sin confirmar, en rojo */ .fd-c.rv-reparo { background: color-mix(in srgb, var(--err) 9%, transparent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--err) 9%, transparent), 0 0 0 8.5px var(--err); border-radius: 6px; } .fd-c.rv-reparo .fd-fila input, .fd-c.rv-reparo .fd-fila select { border-color: var(--err) !important; } /* Eligiendo el campo no conforme: el campo y su recuadro, en rojo discontinuo */ .rv-eligiendo .fd-c.rv-foco { box-shadow: 0 0 0 6px color-mix(in srgb, var(--err) 9%, transparent), 0 0 0 8.5px var(--err); background: color-mix(in srgb, var(--err) 6%, transparent); } .rv-eligiendo .rv-marca.on { border-color: var(--err); border-style: dashed; } .rv-eligiendo .rv-marca.on::after { background: var(--err); } .rv-eligiendo .rv-pos { color: var(--err); font-weight: 600; } /* Pendiente: el repaso pasó y sigue sin confirmar (naranja), en el formulario y en su recuadro de la página */ .fd-c.rv-pendiente:not(.rv-foco) { background: color-mix(in srgb, var(--plan) 10%, transparent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--plan) 10%, transparent), 0 0 0 8px var(--plan); border-radius: 6px; } .rv-marca[data-estado="pend"] { border: 2px solid var(--plan); background: color-mix(in srgb, var(--plan) 14%, transparent); } .rv-marca[data-estado="no"] { border: 2px solid var(--err); background: color-mix(in srgb, var(--err) 14%, transparent); } .rv-foco-doc .rv-marca[data-estado]:not([data-estado=""]):not(.on) { opacity: .9; } .rv-veredicto.pend { color: var(--plan); } /* Insignia del repaso, junto al estado del campo: repasado y por revisar (naranja) o no conforme (rojo) */ .fd-top:has(.rv-insignia) { gap: 6px; } .rv-insignia { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; padding: 1px 8px; border-radius: 999px; white-space: nowrap; } .rv-insignia svg { width: 11px; height: 11px; } .rv-insignia.pend { color: var(--plan); background: color-mix(in srgb, var(--plan) 14%, transparent); border: 1px solid color-mix(in srgb, var(--plan) 45%, transparent); } .rv-insignia.no { color: var(--err); background: color-mix(in srgb, var(--err) 12%, transparent); border: 1px solid color-mix(in srgb, var(--err) 45%, transparent); } .rv-insignia.ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); border: 1px solid color-mix(in srgb, var(--ok) 45%, transparent); } .rv-insignia + .fd-est { margin-left: 0; } .rv-veredicto { font-size: 12px; font-weight: 600; color: var(--ok); } .rv-veredicto.no { color: var(--err); } .rv-claude-caja { display: flex; flex-direction: column; gap: 8px; } .rv-claude { display: flex; flex-direction: column; gap: 8px; } .rv-claude-tabla td:first-child { color: var(--muted); width: 40%; } .rv-enviado summary { cursor: pointer; font-size: 12.5px; font-weight: 600; } .rv-enviado pre { max-height: 40vh; overflow: auto; white-space: pre-wrap; font-size: 12px; } /* Ficha sin documento en este PC: una franja arriba (se puede soltar el documento) y los datos a todo el ancho */ .rv-cuerpo.sin-doc { flex-direction: column; overflow: hidden; } .rv-cuerpo.sin-doc > .rv-zdoc { flex: none; min-height: 0; width: auto; } .rv-cuerpo.sin-doc > .zn-divisor, .rv-cuerpo.sin-doc .rv-pildora, .rv-cuerpo.sin-doc .rv-amp-doc { display: none; } .rv-cuerpo.sin-doc .rv-doc { flex: none; padding: 8px 12px; overflow: visible; border-bottom: 1px solid var(--line); } .rv-cuerpo.sin-doc > .rv-lado { flex: 1; min-height: 0; } .rv-cuerpo.sin-doc .rv-datos { max-width: 1100px; width: 100%; margin: 0 auto; } .rv-sin-doc { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12.5px; border: 1.5px dashed transparent; border-radius: 8px; padding: 4px 6px; } .rv-sin-doc > svg { flex: none; width: 16px; height: 16px; } .rv-sin-doc > span { flex: 1; min-width: 0; } .rv-sin-doc.encima { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); } .tr-sel { width: 28px; text-align: center; padding-left: 6px !important; padding-right: 2px !important; } .tr-sel input { accent-color: var(--accent); margin: 0; } .tr-grupo td { background: var(--panel); padding: 6px 10px; cursor: pointer; position: sticky; left: 0; } .tr-grupo .ic { width: 13px; height: 13px; vertical-align: -2px; color: var(--muted); } .tr-grupo:hover td { background: var(--accent-soft) !important; } .tr-sub > td { background: var(--panel); white-space: normal; max-width: none; padding: 8px 12px 10px 40px; cursor: default; } .tr-sub:hover td { background: var(--panel) !important; } .tr-subtitulo { display: block; font-size: 11.5px; color: var(--muted); margin: 4px 0; } .tr-subtabla { width: auto; min-width: 0; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; } .tr-subtabla tbody tr { cursor: default; } .tr-cols { display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; max-height: 260px; overflow-y: auto; background: var(--bg); } .tr-cols[hidden] { display: none; } .tr-col { display: flex; align-items: center; gap: 6px; font-size: 12.5px; } .tr-col label { flex: 1; min-width: 0; cursor: pointer; } .tr-col input { accent-color: var(--accent); } .tr-acciones:empty { display: none; } .tr-acciones { align-items: center; } .lt-resumen-cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .lt-cifra { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; min-width: 0; } .lt-cifra b { font-size: 18px; font-weight: 600; line-height: 1.2; } .lt-cifra small { color: var(--muted); font-size: 11.5px; } .lt-cifra.ok b { color: var(--ok); } .lt-cifra.av b { color: var(--plan); } .cola-pill { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 6px; padding: 4px 10px; border: 1px dashed var(--accent); border-radius: 999px; background: var(--accent-soft); color: var(--accent); font: inherit; font-size: 12px; max-width: 100%; box-sizing: border-box; } .cola-pill > button { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; min-width: 0; } .cola-pill-abrir { flex: 1; } .cola-pill-x { flex: none; margin-left: auto; padding: 2px !important; border-radius: 999px !important; } .cola-pill-x:hover { background: var(--accent); color: #fff; } .cola-pill-x[hidden] { display: none !important; } .cola-pill .ic { width: 14px; height: 14px; flex: none; } .cola-pill span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cola-pill[hidden] { display: none; } .app-item { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: 6px; border: 1px solid var(--line); border-radius: 8px; padding: 8px; } .app-item:hover { border-color: var(--accent); } .app-item > .lib-item { border: 0; padding: 0; min-width: 0; } #apps-list { overflow-x: hidden; } .app-cuenta { flex: none; font-size: 11px; padding: 1px 8px; border-radius: 999px; background: var(--panel); color: var(--muted); white-space: nowrap; } .app-cuenta.hay { background: var(--accent-soft); color: var(--accent); font-weight: 600; } .app-cuenta.lleno { background: var(--plan-soft); color: var(--plan); } .app-espacio { display: grid; gap: 5px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); } .app-espacio-txt { display: grid; gap: 1px; font-size: 12px; } .app-espacio-txt span { color: var(--muted); font-size: 11.5px; } .app-barra { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; } .app-barra i { display: block; height: 100%; background: var(--accent); border-radius: 999px; } .app-espacio.aviso .app-barra i { background: var(--plan); } .app-espacio.lleno .app-barra i { background: var(--err); } .app-espacio.lleno { border-color: var(--err); } .app-botones { display: flex; gap: 6px; flex-wrap: wrap; } /* Apps › ficheros: cada App con su cabecera y, dentro, sus ficheros */ .app-grupo { display: grid; gap: 8px; min-width: 0; } .app-grupo + .app-grupo { margin-top: 10px; } .app-grupo-cab { display: flex; align-items: center; gap: 8px; padding: 2px 2px 0; min-width: 0; } .app-grupo-cab .ico { flex: none; color: var(--accent); display: inline-flex; } .app-grupo-cab b { font-size: 14px; } .app-grupo-cab span { color: var(--muted); font-size: 12px; min-width: 0; } .app-grupo > .empty { margin: 0; padding: 6px 2px; } .app-libro { font-size: 11px; color: var(--muted); margin: 4px 0 -2px; } /* La lista de Apps: una tarjeta por App (se entra en ella) */ #apps-list { container-type: inline-size; } .app-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; } .app-tarjeta { display: flex; align-items: flex-start; gap: 10px; text-align: left; border: 1px solid var(--line); border-radius: 10px; padding: 12px; background: var(--bg); color: var(--ink); cursor: pointer; font: inherit; min-width: 0; } .app-tarjeta:hover, .app-tarjeta:focus-visible { border-color: var(--accent); } .app-tarjeta > .ico { flex: none; width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); } .app-tarjeta .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .app-tarjeta .txt b { font-size: 14px; } .app-tarjeta .txt span { color: var(--muted); font-size: 12px; } .app-tarjetas + .app-grupo { margin-top: 12px; } /* Una App abierta (comun/ui/pantallasApp.ts): su barra y su pantalla */ .ap-app { display: flex; flex-direction: column; gap: 10px; min-width: 0; } /* Fija arriba al desplazarse: «← Apps» y las pestañas siempre a mano, por larga que sea la pantalla */ .ap-barra { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line); min-width: 0; position: sticky; top: -8px; z-index: 5; background: var(--bg); margin-top: -8px; padding-top: 8px; } .ap-volver { flex: none; border: 0; background: none; color: var(--muted); padding: 3px 6px; } .ap-volver:hover { color: var(--ink); background: var(--panel); } .ap-nombre { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ap-pestanas { display: flex; gap: 2px; margin-left: 6px; overflow-x: auto; min-width: 0; } .ap-pestanas button { border: 0; background: none; font: inherit; color: var(--muted); padding: 5px 10px; border-radius: 6px; cursor: pointer; white-space: nowrap; } .ap-pestanas button:hover { background: var(--panel); color: var(--ink); } .ap-pestanas button[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; } .ap-selector { display: none; margin-left: auto; max-width: 160px; border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; background: var(--bg); color: var(--ink); font: inherit; } @container (max-width: 520px) { .ap-pestanas { display: none; } .ap-selector { display: block; } } .ap-cuerpo { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .ap-cuerpo > * { max-width: 1100px; width: 100%; } .ap-cuerpo.con-lateral > .ap-zona { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .ap-pest-zonas { display: flex; border: 1px solid var(--line); border-radius: 8px; padding: 2px; background: var(--panel); } .ap-pest-zonas button { flex: 1; border: 0; background: none; border-radius: 6px; padding: 5px; cursor: pointer; color: var(--muted); font: inherit; } .ap-pest-zonas button[aria-pressed="true"] { background: var(--bg); color: var(--ink); font-weight: 600; } .ap-cuerpo.con-lateral[data-zona="principal"] > .ap-zona.lateral, .ap-cuerpo.con-lateral[data-zona="lateral"] > .ap-zona.principal { display: none; } @container (min-width: 760px) { .ap-cuerpo.con-lateral { display: grid; grid-template-columns: minmax(0, 45%) minmax(0, 1fr); align-items: start; } .ap-cuerpo.con-lateral > .ap-pest-zonas { display: none; } .ap-cuerpo.con-lateral > .ap-zona { display: flex !important; } } .ap-texto { font-size: 13px; } .ap-texto h2 { font-size: 16px; margin: 0 0 6px; } .ap-texto h3 { font-size: 13.5px; margin: 10px 0 4px; } .ap-cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } @container (min-width: 600px) { .ap-cifras { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .ap-cifra { background: var(--panel); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .ap-cifra b { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; } .ap-cifra span { color: var(--muted); font-size: 12px; } .ap-cifra.destacada b { color: var(--accent); } .ap-cifra.aviso b { color: var(--plan); } .ap-accesos { display: flex; flex-wrap: wrap; gap: 8px; } @container (max-width: 520px) { .ap-accesos .btn { flex: 1 1 100%; justify-content: center; } } .ap-bloque { border: 1px solid var(--line); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 10px; min-width: 0; } .ap-bloque > .empty { margin: 0; } .ap-et { color: var(--muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; } .ap-nota { margin: 0; color: var(--muted); font-size: 12px; } .ap-campo { display: grid; gap: 4px; max-width: 360px; } .ap-campo > span { color: var(--muted); font-size: 12px; } .ap-select { border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; background: var(--bg); color: var(--ink); font: inherit; } /* Nómina a3nom · Generar fichero (enlaceA3nomUI.ts) */ .a3-generar, .a3-resultado { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .a3-filtros { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px 12px; } .a3-cab { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .a3-nombre { text-transform: none; letter-spacing: 0; font-weight: 400; font-family: Consolas, "Courier New", monospace; } .a3-previa { font-family: Consolas, "Courier New", monospace; font-size: 12px; background: var(--panel); border-radius: 8px; padding: 8px 10px; overflow-x: auto; max-height: 320px; overflow-y: auto; } .a3-linea { white-space: pre; line-height: 1.6; } .a3-previa .h { color: var(--muted); } .a3-previa .t { color: var(--ok); } .a3-previa .f { color: var(--plan); } .a3-previa .c { color: var(--accent); font-weight: 600; } .a3-fuera { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 8px; align-items: baseline; text-align: left; border: 0; border-top: 1px solid var(--line); background: none; color: var(--ink); font: inherit; padding: 8px 2px; cursor: pointer; } .a3-fuera:hover b { color: var(--accent); } .a3-fuera .a3-motivo { grid-column: 2; color: var(--muted); font-size: 12px; } .a3-estado { font-size: 11px; border-radius: 999px; padding: 1px 8px; white-space: nowrap; } .a3-estado.aviso { background: var(--plan-soft); color: var(--plan); } .a3-estado.mal { background: color-mix(in srgb, var(--err) 12%, var(--bg)); color: var(--err); } .a3-pie { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } .ap-del-chat { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: var(--accent-soft); color: var(--ink); font-size: 12.5px; } .ap-del-chat > span { flex: 1 1 180px; } .ap-del-chat[hidden] { display: none; } .ap-soltar { border: 1.5px dashed var(--line); border-radius: 10px; padding: 20px 12px; text-align: center; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 6px; } .ap-soltar > svg { width: 24px; height: 24px; color: var(--accent); } .ap-soltar b { color: var(--ink); } .ap-soltar.encima { border-color: var(--accent); background: var(--accent-soft); } .ap-filtros { display: flex; gap: 6px; flex-wrap: wrap; } .ap-pastilla { border: 0; font: inherit; font-size: 12px; border-radius: 999px; padding: 2px 10px; background: var(--panel); color: var(--muted); cursor: pointer; } .ap-pastilla.activa { background: var(--accent-soft); color: var(--accent); font-weight: 600; } .ap-repaso > .btn.primary { align-self: flex-start; } .ap-ficheros { display: flex; flex-direction: column; gap: 8px; } /* El chat dentro de la App: la barra al pie (panel estrecho) y «Volver a la App» encima del chat */ .app-chat { flex: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--line); background: var(--bg); } .app-chat > .ctx-pastillas { flex: 1 0 100%; } .app-chat input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 999px; padding: 7px 12px; background: var(--bg); color: var(--ink); font: inherit; } .app-chat input:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); } .app-chat .btn { border-radius: 999px; width: 34px; height: 34px; padding: 0; display: grid; place-items: center; flex: none; } .app-volver { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; border: 0; border-radius: 999px; padding: 3px 10px 3px 6px; background: var(--accent-soft); color: var(--accent); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; } .app-volver:hover { filter: brightness(.97); } .app-volver svg { width: 14px; height: 14px; } /* La cola de lotes en la Biblioteca: una franja a lo ancho, encima de las carpetas */ .lib-cola { align-self: stretch; justify-content: flex-start; border-radius: 8px; padding: 6px 10px; margin: 0 0 6px; text-align: left; } .lib-cola svg:last-child { margin-left: auto; } /* Conexiones de la App: un origen por fila, con su estado */ .ap-origenes { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; } .ap-origen { display: flex; align-items: center; gap: 10px; padding: 9px 10px; cursor: pointer; min-width: 0; } .ap-origen + .ap-origen { border-top: 1px solid var(--line); } .ap-origen:hover { background: var(--panel); } .ap-origen input { flex: none; accent-color: var(--accent); } .ap-origen .ico { flex: none; width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); } .ap-origen .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; } .ap-origen .txt span { color: var(--muted); font-size: 12px; } .ap-origen .ap-pastilla { flex: none; cursor: default; } /* Alma de la App */ /* Empresa de este archivo, bajo el Alma (el estado de los conectores está en Conexiones) */ .ap-ficha { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--line); padding-top: 12px; margin-top: 4px; } .ap-ficha-texto { min-height: 140px; } .ap-alma-org { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); padding: 8px 10px; } .ap-alma-org summary { cursor: pointer; color: var(--muted); font-size: 12px; } .ap-alma-org .ap-texto { margin-top: 6px; } .ap-alma-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .ap-interruptor { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 12px; cursor: pointer; } .ap-interruptor input { accent-color: var(--accent); } .ap-alma-texto { width: 100%; min-height: 260px; resize: vertical; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: var(--bg); color: var(--ink); font: 12.5px/1.5 ui-monospace, "Cascadia Mono", Consolas, monospace; } .ap-alma-texto:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); } .ap-alma-texto:disabled { opacity: .7; } .app-regs { display: grid; gap: 4px; border-top: 1px solid var(--line); padding-top: 6px; } .app-reg { display: flex; gap: 8px; align-items: baseline; text-align: left; width: 100%; padding: 5px 7px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); font: inherit; font-size: 12px; cursor: pointer; } .app-reg:hover { border-color: var(--accent); } .app-reg time { flex: none; color: var(--muted); font-variant-numeric: tabular-nums; } .app-reg span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .app-reg.anulado span { text-decoration: line-through; color: var(--muted); } #lib-search { margin: 8px 10px 0; border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; font: inherit; color: var(--ink); background: var(--bg); } #lib-list, #apps-list, #hist-list, #sk-list { flex: 1; overflow-y: auto; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; } .lib-item { display: flex; gap: 8px; align-items: center; border: 1px solid var(--line); border-radius: 8px; padding: 8px; } .lib-item .ico { flex: none; display: flex; } .lib-item .ico .ic { width: 22px; height: 22px; } .lib-item .txt { flex: 1; min-width: 0; cursor: pointer; } .lib-item .txt b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lib-item .txt span { color: var(--muted); font-size: 12px; } .lib-item .btn { padding: 3px 7px; flex: none; } .lib-item:hover { border-color: var(--accent); } .lib-item.current { border-color: var(--accent); background: var(--accent-soft); } .lib-item .ico .ic { color: var(--muted); } .hist-tools { display: flex; flex-direction: column; gap: 6px; margin: 8px 10px 0; font-size: 12px; } #hist-search, #sk-search { border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; font: inherit; font-size: 13px; color: var(--ink); background: var(--bg); } .msg-ai > .tbl-act { margin-left: 4px; } /* Gestor de skills */ .sk-filters { flex-wrap: wrap; } .sk-filters button { font-size: 11px; padding: 4px 2px; min-width: 30%; } .sk-filters .n { color: var(--muted); font-weight: 400; margin-left: 2px; } .sk-item { border: 1px solid var(--line); border-radius: 8px; } .sk-item:hover { border-color: var(--accent); } .sk-row { display: flex; gap: 8px; align-items: center; padding: 8px; } .sk-row .ico { flex: none; display: flex; color: var(--muted); } .sk-row .txt { flex: 1; min-width: 0; cursor: pointer; } .sk-row .txt b { display: block; font-family: Consolas, monospace; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sk-desc-1 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; color: var(--muted); } .sk-orig { flex: none; font-size: 10px; border-radius: 10px; padding: 1px 7px; background: var(--panel); color: var(--muted); } .sk-orig[data-o="personal"] { background: var(--accent-soft); color: var(--accent); } .sk-orig[data-o="libro"] { background: var(--plan-soft); color: var(--plan); } .sk-orig[data-o="integrada"] { background: var(--panel); color: var(--ink); border: 1px solid var(--line); } .sk-orig.sk-cat-badge { background: var(--accent-soft); color: var(--accent); font-weight: 600; } .sk-cats { display: flex; flex-wrap: wrap; gap: 6px; } .sk-cats[hidden] { display: none; } .sk-cat { font: inherit; font-size: 11.5px; border: 1px solid var(--line); border-radius: 12px; padding: 2px 9px; background: var(--bg); color: var(--ink); cursor: pointer; } .sk-cat .n { color: var(--muted); } .sk-cat[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; } .sk-row .txt b.plain, .sk-view-head b.plain { font-family: inherit; font-size: 13px; } .sk-view-head .ico { display: flex; } /* Ficha única de skill */ .sk-tit { flex: 1; min-width: 0; display: flex; flex-direction: column; } .sk-tit b { font-family: inherit; font-size: 14px; overflow-wrap: anywhere; } .sk-tit code { font-size: 11px; color: var(--muted); background: none; padding: 0; } .sk-seccion { border-top: 1px solid var(--line); padding-top: 10px; display: flex; flex-direction: column; gap: 6px; } .sk-seccion h4 { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); display: flex; align-items: center; gap: 6px; } .sk-seccion h4 .n { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 10px; letter-spacing: 0; } .sk-nivel { margin: -2px 0 2px; color: var(--muted); font-size: 11.5px; } .sk-vacio { margin: 0; color: var(--muted); font-style: italic; font-size: 12px; } .sk-coste { margin: 0; } .sk-res-list { margin: 0; padding-left: 18px; font-size: 12px; color: var(--muted); } .sk-aviso { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; background: var(--warn); font-size: 12px; } .mk-h { margin: 6px 0 4px; font-size: 11px; color: var(--muted); } .sc-titulo { font-size: 14px; } .sc-ejs { display: flex; flex-direction: column; gap: 2px; } .sc-ej { margin: 0; font-size: 12px; font-style: italic; color: var(--muted); } .sk-field input { border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; font: inherit; color: var(--ink); background: var(--bg); } .sk-ejemplos { display: flex; flex-direction: column; gap: 6px; } .sk-ejemplo { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 10px; background: var(--panel); border-radius: 8px; } .sk-ejemplo span { flex: 1; font-style: italic; } .sk-ejemplo .btn { flex: none; padding: 2px 9px; font-size: 12px; } .sk-sec { padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; } /* Ficha de la marca */ .mk-logo { max-width: 220px; height: auto; align-self: flex-start; background: #fff; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--line); } .mk-h { margin: 6px 0 4px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; } .mk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; } .mk-sw { display: grid; grid-template-columns: 28px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; font-size: 12px; } .mk-sw span { grid-row: span 2; width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--line); } .mk-sw code { color: var(--muted); font-size: 11px; } .mk-bar { display: flex; height: 22px; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); } .mk-bar span { flex: 1; } .sk-row .btn { flex: none; padding: 3px 9px; font-size: 12px; } /* Ficha de skill a pantalla completa: un solo desplazamiento */ .sk-view { display: flex; flex-direction: column; gap: 10px; } .sk-back { align-self: flex-start; display: inline-flex; align-items: center; gap: 2px; border: 0; background: none; color: var(--accent); font: inherit; font-size: 12px; padding: 2px 0; cursor: pointer; } .sk-view-head { display: flex; align-items: center; gap: 8px; } .sk-view-head b { flex: 1; min-width: 0; font-family: Consolas, monospace; font-size: 14px; overflow-wrap: anywhere; } .sk-desc-full { margin: 0; color: var(--muted); } .sk-proc { padding: 10px 12px; background: var(--panel); border-radius: 8px; } .sk-res { margin: 0; font-size: 12px; color: var(--muted); } .sk-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .sk-ro { font-size: 11px; color: var(--muted); } .sk-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); } .sk-field textarea { width: 100%; resize: vertical; border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; font: 12px/1.45 Consolas, monospace; color: var(--ink); background: var(--bg); overflow-y: auto; } .ren-input { width: 100%; font: inherit; font-weight: 600; color: var(--ink); background: var(--bg); border: 1px solid var(--accent); border-radius: 6px; padding: 2px 6px; margin-bottom: 2px; } .btn.mode[data-mode="plan"] { border-color: var(--plan); color: var(--plan); background: var(--plan-soft); } .btn.mode[data-mode="directo"] { color: var(--muted); } body[data-mode="plan"] textarea { border-color: var(--plan); box-shadow: 0 0 0 1px var(--plan) inset; } .msg-user[data-mode="plan"]::before { content: "PLAN · "; font-size: 10px; font-weight: 700; color: var(--plan); letter-spacing: .05em; } .plan-card { border: 1px solid var(--plan); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; background: var(--bg); } .plan-card .pc-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; } .plan-card .pc-tag { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--plan); } .plan-card .pc-effort { font-size: 11px; color: var(--muted); margin-left: auto; } .plan-card .pc-find { margin: 0; font-size: 12px; color: var(--muted); white-space: pre-wrap; } .plan-card ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; } .plan-card li small { display: block; color: var(--muted); font-size: 11px; } .plan-card .pc-q { background: var(--plan-soft); border-radius: 6px; padding: 6px 8px; font-size: 12px; } .plan-card .pc-q ul { margin: 4px 0; padding-left: 18px; } .plan-card .pc-q textarea { min-height: 40px; margin-top: 4px; } .plan-card .pc-actions { display: flex; flex-wrap: wrap; gap: 6px; } /* Tarjeta de skill propuesta */ .skill-card { border: 1px solid var(--accent); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; background: var(--bg); } .sc-head { display: flex; align-items: center; gap: 6px; color: var(--accent); } .sc-tag { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; } .sc-name { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); } .sc-name input { flex: 1; min-width: 0; font: 600 13px Consolas, monospace; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; } .sc-name input:focus { border-color: var(--accent); outline: none; } .sc-desc { margin: 0; } .sc-fams { display: flex; flex-wrap: wrap; gap: 4px; } .sc-fam { font-size: 11px; background: var(--accent-soft); color: var(--accent); border-radius: 10px; padding: 1px 8px; } .sc-proc summary { cursor: pointer; color: var(--muted); font-size: 12px; } .sc-proc .md { margin-top: 6px; padding: 8px 10px; background: var(--panel); border-radius: 6px; } .sc-notes { margin: 0; font-size: 12px; color: var(--muted); } .sc-actions { display: flex; flex-wrap: wrap; gap: 6px; } .sc-status { margin: 0; font-size: 12px; color: var(--ok); } .sc-status.err { color: var(--err); } /* Menú de comandos "/" */ .composer { position: relative; } #slash { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); max-height: 280px; overflow-y: auto; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.12); padding: 4px; z-index: 10; } .slash-buscar { position: sticky; top: -4px; z-index: 1; display: flex; align-items: center; gap: 6px; margin: -4px -4px 4px; padding: 7px 10px; background: var(--bg); border-bottom: 1px solid var(--line); } .slash-buscar .ic { width: 14px; height: 14px; color: var(--muted); flex: none; } .slash-buscar input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--ink); font: inherit; font-size: 13px; } .slash-item { padding: 6px 8px; border-radius: 6px; cursor: pointer; } .slash-item.active { background: var(--accent-soft); } .slash-grupo { font-size: 10px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; padding: 8px 8px 3px; border-top: 1px solid var(--line); } .slash-mas { font-size: 11px; color: var(--muted); padding: 2px 8px 6px; font-style: italic; } .slash-grupo:first-child { border-top: none; padding-top: 2px; } .slash-item .l1 { display: flex; gap: 6px; align-items: baseline; } .slash-item b { font-family: Consolas, monospace; font-size: 12px; } .slash-item .hint { color: var(--muted); font-size: 11px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .slash-item .kind { font-size: 10px; color: var(--muted); border: 1px solid var(--line); border-radius: 8px; padding: 0 6px; } .slash-item .desc { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .help { font-size: 12px; display: flex; flex-direction: column; gap: 3px; } .help h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 8px 0 2px; } code { font-family: Consolas, monospace; font-size: 12px; background: var(--panel); padding: 0 3px; border-radius: 3px; } /* Panel minimalista: cabecera con escudo, deshacer, nueva y menú; el resto, en menús */ header { position: relative; gap: 2px; } .btn.ico { display: inline-flex; align-items: center; justify-content: center; padding: 5px 6px; } header .btn.ico { border-color: transparent; color: var(--muted); background: none; } header .btn.ico:hover, header .btn.ico[aria-expanded="true"] { background: var(--panel); color: var(--ink); } header #prot-btn.on { color: var(--ok); border-color: transparent; } #undo:disabled { display: none; } /* La cabecera queda encima de todo: las pantallas se abren bajo ella (cabeceraSiempreVisible en panel.ts) */ /* Pantallas a todo espacio (comun/ui/zonas.ts): la pantalla pone su parte en la cabecera (una sola fila), zonas que se encienden y se amplían, divisores y menús ⋯ que se abren encima */ header.con-pantalla > h1 { display: none; } header .nav-hist { display: flex; flex: none; margin-left: -6px; } header .nav-hist[hidden] { display: none; } header .nav-hist .btn.ico { padding: 4px 3px; } header .nav-hist .btn.ico:disabled { opacity: .35; background: none; cursor: default; } .zn-cab { flex: 1; min-width: 0; display: flex; align-items: center; gap: 2px; } .zn-cab[hidden] { display: none; } /* La barra de una pantalla (su .vhead), subida a la cabecera del agente (cabeceraSiempreVisible en panel.ts) */ header .vhead.en-cab { gap: 4px; padding: 0; border: 0; } header .vhead.en-cab > b { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; overflow: hidden; white-space: nowrap; font-size: 13px; } header .vhead.en-cab .btn { padding: 3px 8px; white-space: nowrap; } header .vhead.en-cab select { max-width: 40%; border: 1px solid var(--line); border-radius: 6px; padding: 3px; font: inherit; color: var(--ink); background: var(--bg); } /* La barra de la App abierta, en la cabecera: «‹ Apps», su nombre y sus pantallas (y el título «Apps» sobra) */ header .ap-barra.en-cab { position: static; flex: 1; min-width: 0; gap: 4px; margin: 0; padding: 0; border: 0; background: none; } header .zn-barra.en-cab ~ .vhead.en-cab { flex: none; } header .zn-barra.en-cab ~ .vhead.en-cab > b { display: none; } @media (max-width: 640px) { header .ap-barra.en-cab .ap-pestanas { display: none; } header .ap-barra.en-cab .ap-selector { display: block; } } @media (max-width: 480px) { header .ap-barra.en-cab .ap-volver { font-size: 0; } header .ap-barra.en-cab .ap-volver svg { width: 16px; height: 16px; } header .ap-barra.en-cab .ap-nombre svg { display: none; } } @media (max-width: 480px) { header .vhead.en-cab .btn:has(> svg + *) { font-size: 0; padding: 4px 6px; } header .vhead.en-cab .btn svg { width: 15px; height: 15px; } } .zn-ib { position: relative; flex: none; width: 28px; height: 28px; display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; } .zn-ib:hover { background: var(--panel); color: var(--ink); } .zn-ib:disabled { opacity: .35; cursor: default; } .zn-ib[aria-pressed="true"], .zn-ib[aria-expanded="true"] { color: var(--accent); background: var(--accent-soft); } .zn-ib svg { width: 16px; height: 16px; } .zn-botones { display: inline-flex; gap: 2px; margin-left: auto; padding-left: 6px; } .zn-punto { position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); border: 1.5px solid var(--bg); display: none; } .zn-ib.aviso .zn-punto { display: block; } .zn-esp { flex: 1; } .zn-divisor { position: relative; z-index: 4; flex: none; width: 7px; margin: 0 -3px; cursor: col-resize; touch-action: none; } .zn-divisor::after { content: ""; position: absolute; top: 0; bottom: 0; left: 3px; width: 1px; background: var(--line); transition: background .15s; } .zn-divisor:hover::after, .zn-divisor.arrastrando::after { background: var(--accent); left: 2px; width: 3px; } html.zn-arrastre-x, html.zn-arrastre-x * { cursor: col-resize !important; user-select: none !important; } html.zn-arrastre-y, html.zn-arrastre-y * { cursor: row-resize !important; user-select: none !important; } .zn-menu-caja { position: relative; display: inline-flex; } .zn-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 1200; min-width: 240px; max-width: min(340px, 90vw); display: flex; flex-direction: column; gap: 2px; padding: 6px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgb(0 0 0 / 16%); } .zn-menu[hidden] { display: none; } .zn-menu.arriba { top: auto; bottom: calc(100% + 8px); } .zn-menu.derecha { left: auto; right: 0; } .zn-menu hr { width: 100%; border: 0; border-top: 1px solid var(--line); margin: 4px 0; } .zn-menu-tit { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 2px 8px; } .zn-it { display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 8px; border: 0; border-radius: 6px; background: none; font: inherit; font-size: 12.5px; color: var(--ink); text-align: left; white-space: nowrap; cursor: pointer; } .zn-it:hover { background: var(--panel); } .zn-it:disabled { opacity: .45; cursor: default; } .zn-it svg { width: 14px; height: 14px; } .zn-fila > span { flex: 1; } .zn-fila select { margin-left: 0; max-width: 170px; } body > header { z-index: 1100; background: var(--bg); } /* Profesionales digitales (comun/ui/profesionalesPanel.ts): sencillo, una columna */ .pro-av { border-radius: 50%; object-fit: cover; flex: none; background: var(--panel); } .pro-av.mini { object-view-box: inset(6% 12% 24% 12%); } .pro-chip { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--ink); font: inherit; font-weight: 600; padding: 2px 6px 2px 2px; border-radius: 999px; cursor: pointer; min-width: 0; } .pro-chip:hover { background: var(--panel); } .pro-chip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pro-fila { display: flex; flex-direction: column; gap: 2px; padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid var(--line); } .pro-fila-tit { font-size: 11px; color: var(--muted); padding: 2px 8px; } .pro-op { display: flex; align-items: center; gap: 8px; border: 0; text-align: left; } .pro-op span { flex: 1; } .pro-op svg { width: 14px; height: 14px; color: var(--ok); } .pro-cuerpo { flex: 1; overflow-y: auto; padding: 10px 12px 24px; display: flex; flex-direction: column; gap: 4px; max-width: 560px; width: 100%; margin: 0 auto; } .pro-sec { font-size: 11px; color: var(--muted); margin: 12px 4px 4px; } .pro-fila-lista, .pro-enlace { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; padding: 8px; border-radius: 8px; cursor: pointer; } .pro-fila-lista:hover, .pro-enlace:hover, .pro-cap-nom:hover { background: var(--panel); } .pro-fila-lista > svg, .pro-enlace > svg:last-child { width: 14px; height: 14px; color: var(--muted); flex: none; } .pro-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; } .pro-txt small, .pro-cab small, .pro-enlace small { color: var(--muted); font-size: 12px; } .pro-cab { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 8px 0 16px; text-align: center; } .pro-cab b { font-size: 15px; margin-top: 4px; } .pro-zona { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; } .pro-lab { font-weight: 600; } .pro-ta, .pro-inp { width: 100%; font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; resize: vertical; } .pro-pie { display: flex; align-items: center; gap: 8px; } .pro-pie small { flex: 1; color: var(--muted); font-size: 11px; } .pro-enlace { border-top: 1px solid var(--line); border-radius: 0; padding: 12px 4px; } .pro-enlace + .pro-enlace { border-top: 0; border-bottom: 1px solid var(--line); } .pro-enlace > svg:first-child { width: 16px; height: 16px; color: var(--muted); } .pro-enlace > span { flex: 1; } .pro-hablar, .pro-pedir { margin-top: 16px; justify-content: center; text-align: center; text-decoration: none; } .pro-desc { margin: 0 4px 8px; line-height: 1.55; } .pro-nota { color: var(--muted); font-size: 12px; margin: 14px 4px; display: flex; gap: 6px; align-items: center; } .pro-nota svg { width: 13px; height: 13px; flex: none; } .pro-cap { display: flex; align-items: center; gap: 8px; padding: 2px 4px; } .pro-cap.off .pro-cap-nom { color: var(--muted); } .pro-cap-nom { flex: 1; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; padding: 6px 4px; border-radius: 6px; cursor: pointer; } .pro-sw { width: 30px; height: 17px; appearance: none; border-radius: 999px; background: var(--line); position: relative; cursor: pointer; flex: none; margin: 0; } .pro-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; transition: left .15s; } .pro-sw:checked { background: var(--ok); } .pro-sw:checked::after { left: 15px; } .pro-con { display: flex; align-items: center; gap: 8px; padding: 8px 4px; border-bottom: 1px solid var(--line); } .pro-ejemplo { border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: inherit; text-align: left; padding: 8px 10px; border-radius: 8px; cursor: pointer; } .pro-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 8px; margin-bottom: 14px; } .pro-ret { border: 2px solid transparent; background: none; border-radius: 50%; padding: 2px; cursor: pointer; justify-self: center; } .pro-ret[aria-pressed="true"] { border-color: var(--accent); } /* Editor de iddeass (comun/ui/editorProfesional.ts) */ .pro-ayuda { color: var(--muted); font-size: 11px; } .pro-sub { font-size: 12px; color: var(--muted); margin-top: 6px; } .pro-zona + .pro-zona { border-top: 1px solid var(--line); padding-top: 12px; } .pro-casilla { display: flex; align-items: center; gap: 8px; padding: 5px 4px; border-radius: 6px; cursor: pointer; } .pro-casilla:hover { background: var(--panel); } .pro-casilla input { margin: 0; accent-color: var(--accent); } .pro-casilla span { flex: 1; min-width: 0; } .pro-nucleo { font-weight: 600; } .pro-caps-lista { max-height: 340px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; padding: 2px 6px 8px; } .pro-cap-id { color: var(--muted); font-size: 11px; font-family: ui-monospace, Consolas, monospace; } .pro-error { display: flex; gap: 6px; align-items: flex-start; color: var(--err); white-space: pre-line; margin: 8px 4px 0; } .pro-error svg { width: 14px; height: 14px; flex: none; margin-top: 3px; } .pro-admin { display: inline-flex; align-items: center; gap: 6px; align-self: center; margin-top: 18px; border: 1px dashed var(--line); background: none; color: var(--muted); font: inherit; font-size: 12px; padding: 5px 12px; border-radius: 999px; cursor: pointer; } .pro-admin:hover { color: var(--ink); border-color: var(--accent); } .pro-admin svg { width: 13px; height: 13px; } /* Panel ancho: la lista pasa a rejilla de tarjetas con el retrato grande (entero, con su rótulo) */ #pro-ov { container-type: inline-size; } @container (min-width: 640px) { .pro-cuerpo:has(.pro-lista) { max-width: 1040px; padding: 16px 24px 32px; } .pro-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; } .pro-lista .pro-fila-lista { flex-direction: column; text-align: center; gap: 8px; padding: 16px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); } .pro-lista .pro-fila-lista:hover { border-color: var(--accent); background: var(--bg); } .pro-lista .pro-av { width: 96px !important; height: 96px !important; object-view-box: none; } .pro-lista .pro-txt { align-items: center; } .pro-lista .pro-txt small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pro-lista .pro-fila-lista > svg { display: none; } .pro-sec { font-size: 12px; margin-top: 16px; } } #viewer, .vis-grande, #library, #apps-ov, #lotes-ov, #history, #skills-ov, #pro-ov, #prot-ov, #nube-ov, #marcas-ov, #ajustes-ov, #rv-ov, .visor-ov:not(.visor-incrustado) { top: var(--cab, 0px); } #max-btn > span { display: inline-flex; } #lat-btn { display: none; } #lat-btn[aria-pressed="true"] { color: var(--accent); } /* Columna lateral (solo en la vista grande: comun/ui/vistaAmplia.ts la muestra) */ #lateral { display: none; flex-direction: column; gap: 8px; padding: 10px; border-left: 1px solid var(--line); background: var(--panel); overflow-y: auto; font-size: 12px; min-height: 0; } .lat-card { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; } .lat-card > summary { display: flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; font-weight: 600; padding: 2px 0; } .lat-card > summary::-webkit-details-marker { display: none; } .lat-card > summary .ic { width: 14px; height: 14px; color: var(--muted); flex: none; } .lat-card:not([open]) > summary .lat-ch { transform: rotate(-90deg); } .lat-tit { flex: 1; } .lat-r { color: var(--muted); font-weight: 400; } .lat-cuerpo { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; } .lat-fila { display: flex; align-items: center; gap: 6px; padding: 3px 4px; border-radius: 6px; border: 0; background: none; font: inherit; color: var(--ink); text-align: left; width: 100%; min-width: 0; } button.lat-fila { cursor: pointer; } button.lat-fila:hover { background: var(--panel); } .lat-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lat-s { color: var(--muted); font-size: 11px; white-space: nowrap; } .lat-fila.ok .lat-s { color: var(--ok); } .lat-app { flex: none; width: 16px; height: 16px; border-radius: 4px; color: #fff; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } .lat-punto { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); flex: none; } .lat-punto.ok { background: var(--ok); } .elegir-pendiente { display: flex; gap: 6px; padding: 6px 8px; margin: 0 0 6px; border: 1px dashed var(--accent); border-radius: 8px; background: var(--accent-soft); } .lat-punto.aviso { background: var(--plan); } .lat-punto.actuar { background: var(--err); } .lat-r .lat-punto { display: inline-block; vertical-align: 1px; } .lat-barra b.actuar { background: var(--err); } .lat-sub { padding-left: 10px; font-size: 12px; } .lat-consejo { margin: 4px 0 0; font-size: 11.5px; padding: 4px 6px; border-radius: 6px; background: var(--panel); } .lat-consejo.aviso { background: var(--plan-soft); color: var(--ink); } .lat-consejo.actuar { background: color-mix(in srgb, var(--err) 10%, var(--bg)); color: var(--ink); } .lat-nota { margin: 4px 0 0; color: var(--muted); font-size: 11px; } .lat-barra { height: 5px; border-radius: 3px; background: var(--panel); overflow: hidden; margin: 4px 0 2px; } .lat-barra b { display: block; height: 100%; background: var(--accent); } .lat-barra b.aviso { background: var(--plan); } .lat-par { display: flex; justify-content: space-between; margin-top: 8px; } .lat-cambio.deshecho .lat-n { text-decoration: line-through; color: var(--muted); } .lat-deshacer { padding: 0 6px; font-size: 11px; } /* Panel abierto en grande: el taskpane lo dice y ofrece volver (en la vista grande no se ve) */ #vista-amplia-aviso { position: fixed; inset: 0; z-index: 1000; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; color: var(--muted); font-size: 13px; } #vista-amplia-aviso p { margin: 0; } #menu-btn.on, #opts-btn.on { color: var(--accent); } .menu-pop { top: calc(100% - 4px); bottom: auto; left: auto; right: 8px; } .menu-pop > .btn, .opts-pop > .btn { display: flex; align-items: center; justify-content: flex-start; gap: 8px; width: 100%; border: 0; border-radius: 6px; padding: 6px 8px; background: none; text-align: left; font-size: 13px; color: var(--ink); white-space: nowrap; } .menu-pop > .btn:hover, .opts-pop > .btn:hover { background: var(--panel); } .menu-pop > .btn .ic { color: var(--muted); } .menu-pop > .btn[data-l]::before { content: attr(data-l); order: 1; } .menu-pop > .btn > span { order: 2; margin-left: auto; font-size: 12px; color: var(--muted); } .menu-pop > .btn.on { color: var(--accent); } #vista-btn.on { background: var(--accent-soft); } .opts-pop > .btn[data-l]::before, #usage[data-l]::before { content: attr(data-l); order: -1; flex: 1; color: var(--ink); } .opts-pop > .btn { color: var(--muted); } .opts-pop #mode .ic, .opts-pop #model-pill .ic, .opts-pop #marca-pill .ic, .opts-pop #tema-btn .ic, .opts-pop #cambios-btn .ic { display: none; } .opts-pop #cambios-btn.on { color: var(--accent); } .opts-pop #mode[data-mode="plan"] { color: var(--plan); background: none; } .opts-pop .ctx-btn.on { color: var(--accent); } .opts-pop .ctx-btn.apagado::after { left: auto; right: 7px; width: 17px; } .opts-pop .marca-pill { max-width: none; } .opts-pop #usage { display: flex; gap: 8px; padding: 6px 8px; font-size: 12px; flex: none; } .opts-pop #usage::before { font-size: 13px; } .opts-pop #usage:empty { display: none; } .opts-pill { color: var(--muted); border-color: transparent; } .opts-pill:hover, .opts-pill[aria-expanded="true"] { background: var(--panel); color: var(--ink); } .opts-pill.aviso { color: var(--cost); } footer .row .esp { flex: 1; } #attach { border-color: transparent; color: var(--muted); } #attach:hover { background: var(--panel); color: var(--ink); } #send, #stop { border-radius: 999px; width: 30px; height: 30px; padding: 0; } #stop:not([hidden]) + #send { display: none; } #plan .pl-toggle { flex: none; } #plan .pl-bar > b { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } #plan .pl-bar > .pl-now { flex: 1; min-width: 0; } /* Casillas de entidades del escudo (mensaje y adjuntos): marcada se oculta; desmarcada sale tal cual */ .ent { margin-top: 6px; } .ent-lista { max-height: 168px; overflow: auto; border-top: 1px solid var(--line); } .ent-fila { display: flex; align-items: center; gap: 8px; padding: 4px 2px; border-bottom: 1px solid var(--line); font-size: 12px; cursor: pointer; } .ent-fila input { margin: 0; accent-color: var(--accent); } .ent-fila.bloq { color: var(--muted); cursor: default; } .ent-fila.bloq .ic { width: 13px; height: 13px; } .ent-v { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ent-s { color: var(--muted); } .ent-tag { font-size: 10.5px; padding: 0 7px; border-radius: 999px; background: var(--panel); color: var(--muted); white-space: nowrap; } .ent-tag.r { background: color-mix(in srgb, var(--err) 12%, transparent); color: var(--err); } .ent-barra { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding-top: 6px; } .ent-esp { flex: 1; } .ent-chip { font: inherit; font-size: 11px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 999px; padding: 1px 9px; cursor: pointer; } .ent-chip.on { background: var(--accent-soft); color: var(--accent); border-color: transparent; } .claro { color: var(--ok); border-bottom: 1.5px solid var(--ok); } /* Vista previa del mensaje: una tira de una línea; pulsada, el desplegable de entidades encima de la caja */ #vprev { position: relative; border: 0; padding: 0; margin: 0; background: none; } .vprev-fila { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } /* Encima de la tira: el mensaje tal como lo recibirá Claude, reescrito al redactar */ .vprev-vivo { border: 1px dashed var(--line); border-radius: 8px; padding: 5px 8px; margin-bottom: 6px; font-size: 12px; background: var(--bg); } .vprev-vivo-cab { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 11px; } .vprev-vivo-cab .ic { width: 12px; height: 12px; } .vprev-vivo pre { margin: 2px 0 0; white-space: pre-wrap; word-break: break-word; font: inherit; max-height: 7.5em; overflow: auto; } .vprev-tira { display: inline-flex; align-items: center; gap: 4px; font: inherit; font-size: 11.5px; border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; background: var(--bg); color: var(--muted); cursor: pointer; } .vprev-tira > .ic:first-child { color: var(--ok); } .vprev-tira:hover, .vprev-tira[aria-expanded="true"] { color: var(--ink); background: var(--panel); } .vprev-tira.aviso, .vprev-tira.aviso > .ic:first-child { color: var(--plan); } .vprev-sug { display: inline-flex; align-items: center; border-radius: 999px; background: var(--accent-soft); font-size: 11.5px; } .vprev-sug button { font: inherit; border: 0; background: none; color: var(--accent); cursor: pointer; padding: 2px 4px 2px 10px; } .vprev-sug .vprev-sug-x { padding: 2px 8px 2px 2px; display: inline-flex; } .vprev-sug .ic { width: 12px; height: 12px; } .vprev-pop { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 25; max-height: min(55vh, 420px); overflow: auto; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; box-shadow: 0 8px 24px rgba(0,0,0,.14); } .vprev-pie { display: flex; gap: 6px; justify-content: space-between; margin-top: 8px; } .vprev-pie .btn { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; } .ent-buscar { width: 100%; font: inherit; font-size: 12px; padding: 4px 8px; margin-bottom: 4px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); } .ent-gcab { display: flex; align-items: center; gap: 7px; padding: 4px 2px; border-bottom: 1px solid var(--line); font-size: 12px; } .ent-gcab input { margin: 0; accent-color: var(--accent); } .ent-grupo.bloq .ent-gcab { color: var(--muted); } .ent-gcab .ic { width: 13px; height: 13px; } .ent-flecha { border: 0; background: none; padding: 0; color: var(--muted); cursor: pointer; display: inline-flex; } .ent-gnom { font-weight: 600; } .ent-gn { flex: 1; color: var(--muted); } .ent-sub .ent-fila { padding-left: 22px; } .ent-vacio { font-size: 12px; color: var(--muted); padding: 6px 2px; } .visor-ent:not(:empty) { padding: 0 16px 8px; } /* Copiar y Editar en las burbujas: aparecen al pasar el ratón, sin mover nada */ .msg-user, .msg-ai { position: relative; } .msg-acc { position: absolute; top: calc(100% + 1px); display: flex; gap: 2px; z-index: 5; opacity: 0; pointer-events: none; transition: opacity .12s; } .msg-user > .msg-acc { right: 0; } .msg-ai > .msg-acc { top: auto; bottom: -24px; left: 0; } .msg-user:hover > .msg-acc, .msg-ai:hover > .msg-acc, .msg-acc:focus-within { opacity: 1; pointer-events: auto; } .msg-acc .btn { padding: 2px 5px; border-color: transparent; background: var(--bg); color: var(--muted); } .msg-acc .btn:hover { color: var(--ink); background: var(--panel); } .msg-acc .ic { width: 13px; height: 13px; } .msg-acc .msg-esc { color: var(--ok); gap: 3px; font-size: 11px; display: inline-flex; align-items: center; } @media (hover: none) { .msg-acc { opacity: 1; pointer-events: auto; } }