/* ═══════════════════════════════════════════════════════════════════════════ EL CHASIS (ADR-044) — siete zonas, y la geografía no cambia nunca. ┌──────────────────────────────────────────────── barra de título ──┐ │ marca · proyecto ⌘K IA · constantes · − □ × │ ├────┬─────────┬──────────────────────────────────┬────────────────┤ │riel│ lateral │ pestañas / escenario │ chat │ │ │ ├──────────────────────────────────┤ │ │ │ │ dock: terminal · consola · … │ │ ├────┴─────────┴──────────────────────────────────┴────────────────┤ │ barra de estado │ └───────────────────────────────────────────────────────────────────┘ LO QUE ES NUEVO, Y POR QUÉ: · LA BARRA DE TÍTULO ES NUESTRA. Antes el sistema dibujaba una barra de ventana encima de la aplicación y la aplicación dibujaba OTRA barra debajo: 70 px de alto para una fila de información. Ahora es una sola, con los controles de ventana dentro. Es lo que hace VS Code, lo que hace Linear y lo que hace Arc, y es la diferencia visible entre una aplicación y una página abierta en un marco. · EL PERÍMETRO ES ASA. Ocho bordes invisibles de 6 px que le piden al sistema el redimensionado real. Una ventana sin marco que no se puede agarrar por los bordes no es una ventana: es una imagen. · UN SOLO NIVEL DE SEPARACIÓN. Las zonas se separan con una línea de 1 px y un escalón de superficie, nunca con sombras cruzadas. ═══════════════════════════════════════════════════════════════════════════ */ /* ═══ 0 · EL PERÍMETRO ════════════════════════════════════════════════════════ Sólo existe cuando la ventana es nativa Y no está maximizada: en el navegador no hay ventana que redimensionar, y maximizada los bordes robarían clics al contenido pegado al borde de la pantalla. */ #bordes { display: none; } body.nativa:not(.maximizada) #bordes { display: block; } #bordes > i { position: fixed; z-index: 400; display: block; } #bordes .b-arriba { top: 0; left: 6px; right: 6px; height: 4px; cursor: n-resize; } #bordes .b-abajo { bottom: 0; left: 6px; right: 6px; height: 4px; cursor: s-resize; } #bordes .b-izq { left: 0; top: 6px; bottom: 6px; width: 4px; cursor: w-resize; } #bordes .b-der { right: 0; top: 6px; bottom: 6px; width: 4px; cursor: e-resize; } #bordes .b-ai { top: 0; left: 0; width: 8px; height: 8px; cursor: nw-resize; } #bordes .b-ad { top: 0; right: 0; width: 8px; height: 8px; cursor: ne-resize; } #bordes .b-bi { bottom: 0; left: 0; width: 8px; height: 8px; cursor: sw-resize; } #bordes .b-bd { bottom: 0; right: 0; width: 8px; height: 8px; cursor: se-resize; } /* ═══ ACCESO — sólo por navegador ═════════════════════════════════════════════ La ventana nativa nunca ve esta pantalla: llega con la sesión acuñada. Se mantiene entera porque `auth` sigue protegiendo al que entra por el puerto. */ #auth { position: fixed; inset: 0; z-index: 900; background: var(--bg); display: none; align-items: center; justify-content: center; } #auth-card { width: 340px; padding: 30px 28px; background: var(--s1); border: 1px solid var(--b2); border-radius: var(--r4); box-shadow: var(--e3); } .auth-marca { text-align: center; margin-bottom: var(--sp5); color: var(--dorado); } .auth-marca > span { display: inline-grid; place-items: center; } .auth-marca .n { font-size: var(--fz-4); font-weight: 700; letter-spacing: -.02em; color: var(--t1); margin-top: 6px; } .auth-marca #auth-sub { font-size: var(--fz-2); color: var(--t3); margin-top: 2px; font-weight: 400; letter-spacing: 0; } .auth-f { position: relative; margin-bottom: var(--sp3); } .auth-f input { width: 100%; height: 36px; } #auth-err { display: none; color: var(--rojo); font-size: var(--fz-2); text-align: center; margin: 6px 0; min-height: 14px; } #auth-btn { width: 100%; height: 38px; background: var(--azul); border-radius: var(--r2); color: #fff; font-size: var(--fz-3); font-weight: 600; margin-top: 4px; transition: filter var(--tx-fast); } #auth-btn:hover:not(:disabled) { filter: brightness(1.08); } #auth-btn:disabled { opacity: .6; cursor: default; } /* En la ventana nativa no hay sesión de la que salir: el equivalente es cerrar la ventana, y ese botón ya está tres centímetros a la derecha. */ body.nativa #c-out { display: none; } /* ═══ EL ARMAZÓN ══════════════════════════════════════════════════════════════ */ #shell { display: none; height: 100vh; grid-template-rows: var(--h-titulo) 1fr var(--h-estado); grid-template-areas: "titulo" "cuerpo" "estado"; } #shell.on { display: grid; } /* ═══ 1 · LA BARRA DE TÍTULO ══════════════════════════════════════════════════ Tres bloques con una regla: IZQUIERDA sobre qué trabajas · CENTRO cómo se llega a cualquier sitio · DERECHA cómo está la máquina y la ventana. Toda la barra es región de arrastre (`pywebview-drag-region`) MENOS lo que se pulsa: cada control se desmarca con `.no-arrastre`. Si no, arrastrar desde un botón movería la ventana en lugar de pulsarlo. */ #titulo { grid-area: titulo; display: flex; align-items: center; gap: var(--sp2); padding: 0 0 0 var(--sp2); background: var(--s0); border-bottom: 1px solid var(--b1); position: relative; z-index: 60; -webkit-user-select: none; } #titulo .no-arrastre { -webkit-app-region: no-drag; } .marca { display: flex; align-items: center; gap: 7px; padding: 0 var(--sp2); font-weight: 650; font-size: var(--fz-3); letter-spacing: -.015em; color: var(--t1); flex-shrink: 0; } .marca .hex { color: var(--dorado); display: grid; place-items: center; } .marca .os { color: var(--t4); font-weight: 600; font-size: 9.5px; letter-spacing: .12em; padding-top: 1px; } /* El proyecto activo es lo TUYO: va en dorado, y es lo único que va en dorado. Sin proyecto NO se pinta de dorado — un hueco vestido de dato lleno se lee como un dato lleno. */ #c-proj { border-color: color-mix(in srgb, var(--dorado) 22%, transparent); background: color-mix(in srgb, var(--dorado) 7%, transparent); max-width: 260px; overflow: hidden; } #c-proj b { color: var(--dorado2); overflow: hidden; text-overflow: ellipsis; } #c-proj:hover { border-color: color-mix(in srgb, var(--dorado) 45%, transparent); } #c-proj.vacio { border-color: transparent; background: transparent; } #c-proj.vacio b { color: var(--t3); font-weight: 500; } /* ⌘K: la puerta a todo, en el centro, como en Arc y Linear. Es el control más ancho de la barra a propósito: es el que más se usa. */ #kbar { display: flex; align-items: center; gap: var(--sp2); height: 26px; padding: 0 var(--sp2) 0 10px; width: min(420px, 34vw); min-width: 150px; border-radius: var(--r1); background: var(--s2); border: 1px solid var(--b1); color: var(--t3); font-size: var(--fz-2); cursor: pointer; transition: all var(--tx-fast); } #kbar:hover { border-color: var(--b3); background: var(--s3); color: var(--t2); } #kbar .ic-svg { color: var(--t3); } #kbar kbd { margin-left: auto; } #c-ai b { color: var(--morado2); } #c-ai { border-color: color-mix(in srgb, var(--morado) 20%, transparent); background: color-mix(in srgb, var(--morado) 7%, transparent); } #c-ai:hover { border-color: color-mix(in srgb, var(--morado) 45%, transparent); } #vitals { display: flex; align-items: center; gap: 2px; padding-left: var(--sp2); margin-left: 2px; border-left: 1px solid var(--b1); } #vitals .met { cursor: default; } .chip.medible { cursor: pointer; } .chip.medible b { color: var(--azul2); font-weight: 500; } .chip.midiendo { opacity: .7; } .sp { flex: 1; } /* ── LOS CONTROLES DE VENTANA ───────────────────────────────────────────────── Medidas de Windows 11: 46×38, sin radio, sin separación. Se pegan al borde derecho —cero margen— porque ahí es donde el ratón los busca a ciegas: el borde de la pantalla es un blanco infinito (ley de Fitts) y un margen de 8 px lo convierte en un blanco de 46. */ #ventana-ctl { display: none; margin-left: var(--sp2); height: 100%; } body.nativa #ventana-ctl { display: flex; } #ventana-ctl button { width: 46px; height: 100%; display: grid; place-items: center; color: var(--t2); transition: background var(--tx-fast), color var(--tx-fast); } #ventana-ctl button:hover { background: var(--s2); color: var(--t1); } #ventana-ctl button:active { background: var(--s3); } #ventana-ctl .cerrar:hover { background: #E5484D; color: #fff; } #ventana-ctl .cerrar:active { background: #C93B40; color: #fff; } #ventana-ctl .ic-svg { stroke-width: 1.2; } /* En el navegador NO hay ventana que cerrar: la fila termina en las constantes y el hueco de los tres botones se recupera para el contenido. */ body:not(.nativa) #titulo { padding-right: var(--sp2); } /* ═══ 2 · EL CUERPO ═══════════════════════════════════════════════════════════ Fila flexible, no rejilla: con `order` una zona se lleva al otro lado en una línea, y eso es lo que permite acoplar el chat a la izquierda sin reconstruir nada ni perder la conversación. */ #body { grid-area: cuerpo; display: flex; min-height: 0; min-width: 0; } /* ── el riel: los destinos ───────────────────────────────────────────────── */ #rail { width: var(--w-riel); flex-shrink: 0; order: 0; background: var(--s0); border-right: 1px solid var(--b1); display: flex; flex-direction: column; align-items: center; padding: 6px 0; gap: 2px; overflow-y: auto; } #rail::-webkit-scrollbar { width: 0; } .rb { width: 36px; height: 36px; border-radius: var(--r2); color: var(--t2); display: grid; place-items: center; position: relative; flex-shrink: 0; transition: color var(--tx-fast), background var(--tx-fast); } .rb .ic-svg { width: 19px; height: 19px; } .rb:hover { background: var(--s2); color: var(--t1); } .rb.on { color: var(--dorado); background: color-mix(in srgb, var(--dorado) 11%, transparent); } .rb.on::before { content: ''; position: absolute; left: -6px; top: 8px; bottom: 8px; width: 2.5px; border-radius: 0 3px 3px 0; background: var(--dorado); animation: aparece 140ms ease both; } /* La ayuda emergente sale del riel, no de encima: tapar el icono que acabas de señalar es perder la referencia justo cuando la necesitas. */ .rb .tip { position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%) translateX(-4px); background: var(--vidrio); backdrop-filter: var(--vidrio-filtro); border: 1px solid var(--b2); border-radius: var(--r1); padding: 5px 10px; font-size: var(--fz-2); color: var(--t1); white-space: nowrap; opacity: 0; pointer-events: none; box-shadow: var(--e2); z-index: 70; transition: opacity var(--tx-fast), transform var(--tx-fast); } .rb:hover .tip { opacity: 1; transform: translateY(-50%) translateX(0); } .rb .tip i { color: var(--t3); font-style: normal; } /* Lo que separa las familias de destinos es el ESPACIO, que se lee sin traducir nada. La línea se queda como marca fina; el nombre entero vive en la ayuda emergente y en ⌘K, donde sí cabe escrito. */ .rail-sep { width: 100%; height: 1px; flex-shrink: 0; position: relative; margin: 8px 0 5px; } .rail-sep::before { content: ''; position: absolute; left: 13px; right: 13px; top: 0; height: 1px; background: var(--b1); } /* ── el lateral ──────────────────────────────────────────────────────────── */ #side { width: var(--w-lateral); flex-shrink: 0; order: 1; background: var(--s1); border-right: 1px solid var(--b1); display: flex; flex-direction: column; min-height: 0; } #side.hide { display: none; } #g-side { order: 2; } #center { order: 3; } #g-chat { order: 4; } #chat { order: 5; } #body.chat-izq #chat { order: -2; border-left: none; border-right: 1px solid var(--b1); } #body.chat-izq #g-chat { order: -1; } /* ── las asas entre zonas ────────────────────────────────────────────────── */ .grip { background: transparent; position: relative; flex-shrink: 0; z-index: 20; } .grip::after { content: ''; position: absolute; inset: 0; background: transparent; transition: background var(--tx-fast); } .grip.v { width: var(--w-asa); cursor: col-resize; } .grip.h { height: var(--w-asa); cursor: row-resize; } .grip:hover::after, .grip.drag::after { background: var(--azul); } .grip.v::after { left: 1px; right: 1px; } .grip.h::after { top: 1px; bottom: 1px; } .grip.off { display: none; } body.resizing, body.resizing * { cursor: col-resize !important; user-select: none !important; } body.resizing.fila, body.resizing.fila * { cursor: row-resize !important; } /* ── el escenario y sus pestañas ─────────────────────────────────────────── */ #center { flex: 1; display: grid; grid-template-rows: 1fr auto auto; min-width: 0; min-height: 0; } #stagewrap { display: flex; flex-direction: column; min-height: 0; min-width: 0; border-right: 1px solid var(--b1); } #tabs { display: flex; height: var(--h-pestana); background: var(--s0); border-bottom: 1px solid var(--b1); overflow-x: auto; flex-shrink: 0; } #tabs::-webkit-scrollbar { height: 0; } .tab { display: flex; align-items: center; gap: 7px; padding: 0 10px 0 12px; font-size: var(--fz-2); color: var(--t3); border-right: 1px solid var(--b1); white-space: nowrap; cursor: pointer; position: relative; max-width: 220px; transition: color var(--tx-fast), background var(--tx-fast); } .tab:hover { color: var(--t2); background: var(--s1); } .tab.on { color: var(--t1); background: var(--s2); } .tab.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--azul); } .tab .tx { overflow: hidden; text-overflow: ellipsis; } .tab .ic-svg { width: 14px; height: 14px; color: var(--t4); } .tab.on .ic-svg { color: var(--azul2); } .tab .x { color: var(--t4); width: 16px; height: 16px; display: grid; place-items: center; border-radius: 4px; transition: all var(--tx-fast); } .tab .x:hover { color: var(--t1); background: var(--s3); } .tab .x .ic-svg { width: 11px; height: 11px; } /* Un archivo sin guardar lleva un punto en lugar de la cruz, como en cualquier editor: la cruz vuelve al pasar por encima. */ .tab.sucio .x .ic-svg { display: none; } .tab.sucio .x::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--t2); } .tab.sucio:hover .x .ic-svg { display: block; } .tab.sucio:hover .x::before { display: none; } .tab-menu { padding: 0 10px; color: var(--t4); flex-shrink: 0; position: sticky; right: 0; background: var(--s0); border-left: 1px solid var(--b1); display: grid; place-items: center; } .tab-menu:hover { color: var(--t1); } #stage { flex: 1; position: relative; overflow: hidden; min-height: 0; background: var(--bg); } .pane { display: none; position: absolute; inset: 0; overflow: auto; } .pane.on { display: block; } #frame { width: 100%; height: 100%; border: 0; background: var(--s0); } /* ── el editor ───────────────────────────────────────────────────────────── */ #ed { width: 100%; height: 100%; border: 0; background: var(--s0); color: var(--t1); font-family: var(--mono); font-size: 12.5px; line-height: 1.6; padding: 12px 14px; resize: none; tab-size: 4; } #pane-editor .CodeMirror { height: 100%; font-family: var(--mono); font-size: 12.5px; line-height: 1.65; background: var(--s0); color: var(--t1); } .CodeMirror-gutters { background: var(--s0); border-right: 1px solid var(--b1); } .CodeMirror-linenumber { color: var(--t4); } .CodeMirror-cursor { border-left: 2px solid var(--dorado); } .CodeMirror-activeline-background { background: color-mix(in srgb, var(--t1) 3%, transparent); } .CodeMirror-selected { background: var(--seleccion) !important; } .CodeMirror-matchingbracket { color: var(--dorado) !important; border-bottom: 1px solid var(--dorado); } .CodeMirror-foldmarker { color: var(--ambar); text-shadow: none; font-family: var(--mono); } .CodeMirror-dialog { background: var(--s2); border-bottom: 1px solid var(--b2); color: var(--t1); font-family: var(--font); font-size: var(--fz-2); padding: 6px 10px; } .CodeMirror-dialog input { background: var(--s3); border: 1px solid var(--b2); color: var(--t1); font-family: var(--mono); width: auto; min-width: 240px; } .cm-s-material-darker.CodeMirror { background: var(--s0); } /* ── el dock inferior ────────────────────────────────────────────────────── */ #dock { border-top: 1px solid var(--b1); border-right: 1px solid var(--b1); background: var(--s0); display: grid; grid-template-rows: 30px 1fr auto; height: var(--h-dock); min-height: 0; } #dock.min { height: 30px; } #dock.min .dpane, #dock.min #termin { display: none; } #dtabs { display: flex; align-items: stretch; border-bottom: 1px solid var(--b1); } .dt { padding: 0 12px; font-size: var(--fz-2); color: var(--t3); display: flex; align-items: center; gap: 6px; position: relative; transition: color var(--tx-fast); } .dt:hover { color: var(--t1); } .dt.on { color: var(--t1); } .dt.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--azul); } .dt .ic-svg { width: 14px; height: 14px; } .dpane { display: none; overflow: auto; padding: var(--sp2) var(--sp3); font-family: var(--mono); font-size: var(--fz-2); line-height: 1.6; color: var(--t2); white-space: pre-wrap; word-break: break-word; min-height: 0; } .dpane.on { display: block; } #termin { display: flex; align-items: center; gap: var(--sp2); padding: 5px var(--sp3); border-top: 1px solid var(--b1); font-family: var(--mono); font-size: var(--fz-2); } #termin input { flex: 1; background: transparent; border: none; padding: 0; height: 22px; } #termin input:focus { box-shadow: none; } #termin .prompt { color: var(--verde); font-weight: 700; display: grid; place-items: center; } /* ═══ 3 · EL CHAT ═════════════════════════════════════════════════════════════ */ #chat { width: var(--w-chat); background: var(--s1); display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--b1); position: relative; } #chat.hide { display: none; } #chh { display: flex; align-items: center; gap: var(--sp2); height: 38px; padding: 0 var(--sp3); flex-shrink: 0; border-bottom: 1px solid var(--b1); font-size: var(--fz-2); color: var(--t2); } #chh .nm { color: var(--t1); font-weight: 600; letter-spacing: -.01em; } #chh .ia-marca { color: var(--morado); display: grid; place-items: center; } #chh-ctx { color: var(--t3); font-family: var(--mono); font-size: var(--fz-1); max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #chh-ai { margin-left: auto; font-family: var(--mono); font-size: var(--fz-1); color: var(--t4); } /* ── LA WEB DE ESTA CONVERSACIÓN ────────────────────────────────────────────── Una sola fila, siempre visible mientras haya web, con la nota y la puerta al navegador. No aparece si la conversación no ha producido nada: una barra vacía permanente sería una fila de ruido en el panel más usado. */ #chweb { display: none; } #chweb.on { display: flex; align-items: center; gap: var(--sp2); flex-shrink: 0; padding: 6px var(--sp3); border-bottom: 1px solid var(--b1); background: var(--s2); font-size: var(--fz-2); } #chweb .p { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } #chweb .p.ok { background: var(--verde); box-shadow: 0 0 6px var(--verde); } #chweb .p.rev { background: var(--ambar); } #chweb .p.nueva { background: var(--t4); } #chweb .nm { color: var(--t1); font-weight: 600; font-family: var(--mono); font-size: var(--fz-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #chweb .nm.vacio { color: var(--t3); font-family: var(--font); font-weight: 400; } #chweb .ver.nv { margin-left: 4px; padding: 3px 6px; } #chweb .q { color: var(--t3); font-family: var(--mono); font-size: var(--fz-1); margin-left: auto; flex-shrink: 0; } #chweb .ver { display: flex; align-items: center; gap: 4px; flex-shrink: 0; border: 1px solid var(--b2); background: var(--s3); color: var(--t1); border-radius: var(--r1); padding: 3px 9px; font-size: var(--fz-1); font-weight: 600; cursor: pointer; transition: all 120ms var(--curva); } #chweb .ver:hover { border-color: var(--morado); color: var(--morado2); } /* ── LA TARJETA DE ENTREGA ──────────────────────────────────────────────────── Lo que se quiere hacer con una web recién construida es VERLA. Por eso el botón es lo más grande del mensaje y el relato técnico va debajo. */ .entrega { border: 1px solid var(--b2); border-left: 3px solid var(--verde); border-radius: var(--r2); background: var(--s2); padding: 11px 13px; margin-bottom: 10px; animation: subir 220ms var(--curva) both; } .entrega.rev { border-left-color: var(--ambar); } .entrega.sin { border-left-color: var(--t4); } .entrega.no { border-left-color: var(--rojo); } .ecab { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; } .entrega .et { font-size: var(--fz-3); font-weight: 650; color: var(--t1); letter-spacing: -.01em; } /* El estado, en una palabra y con su color. Es lo que se lee de un vistazo desde el otro lado de la mesa. */ .ees { margin-left: auto; flex-shrink: 0; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; padding: 2px 7px; border-radius: 20px; border: 1px solid currentColor; } .ees.ok { color: var(--verde); } .ees.rev { color: var(--ambar); } .ees.sin { color: var(--t3); } .ees.no { color: var(--rojo); } .epro { font-family: var(--mono); font-size: var(--fz-1); color: var(--t3); margin-bottom: 8px; } /* Por qué NO está lista: una línea, no un volcado. */ .efalla { font-size: var(--fz-1); color: var(--ambar); margin-bottom: 9px; line-height: 1.5; } .eresumen { margin-top: 9px; font-size: var(--fz-1); color: var(--t3); } .edetalles { margin-top: 3px; } .edetalles > summary { cursor: pointer; font-size: var(--fz-1); color: var(--t4); user-select: none; list-style: none; } .edetalles > summary::-webkit-details-marker { display: none; } .edetalles > summary::before { content: '▸ '; } .edetalles[open] > summary::before { content: '▾ '; } .edetalles > summary:hover { color: var(--morado2); } .edetalles > div { font-family: var(--mono); font-size: var(--fz-1); color: var(--t3); padding: 2px 0 0 12px; } .echk { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 9px; } .echk .ec { display: flex; align-items: center; gap: 4px; font-size: var(--fz-1); color: var(--t2); cursor: help; } .echk .q { font-size: 10px; font-weight: 700; } .echk .q.ok { color: var(--verde); } .echk .q.no { color: var(--rojo); } .echk .q.sin { color: var(--t4); } .enota { display: flex; align-items: baseline; gap: 6px; margin-bottom: 10px; } .enota b { font-size: 21px; font-weight: 700; color: var(--t1); letter-spacing: -.02em; } .enota span { font-size: var(--fz-1); color: var(--t3); } .enota .v { font-weight: 700; letter-spacing: .04em; } .enota .v.ok { color: var(--verde); } .enota .v.no { color: var(--ambar); } .enota .sin { font-style: italic; } .eacc { display: flex; gap: 7px; } .eacc .btn { display: flex; align-items: center; gap: 5px; border: 1px solid var(--b2); background: var(--s3); color: var(--t1); border-radius: var(--r1); padding: 7px 13px; font-size: var(--fz-2); font-weight: 600; cursor: pointer; transition: all 130ms var(--curva); } .eacc .btn:hover { border-color: var(--morado); color: var(--morado2); } .eacc .btn.ib { padding: 7px 9px; color: var(--t3); } .eacc .btn.rep { border-color: color-mix(in srgb, var(--ambar) 55%, transparent); color: var(--ambar); } .eacc .btn.rep:hover { border-color: var(--ambar); color: var(--ambar); background: color-mix(in srgb, var(--ambar) 12%, var(--s2)); } .eacc .btn.ver { background: var(--grad); border-color: transparent; color: var(--tinta-ia); box-shadow: var(--halo-ia); letter-spacing: .02em; } .eacc .btn.ver:hover { color: var(--tinta-ia); filter: brightness(1.08); } .edet { margin-top: 9px; font-size: var(--fz-1); color: var(--t4); font-family: var(--mono); } .edet .ru { opacity: .7; } #thread { flex: 1; overflow-y: auto; padding: var(--sp4) var(--sp3); display: flex; flex-direction: column; gap: var(--sp4); } .msg { display: flex; gap: 10px; animation: subir 200ms var(--curva) both; } .av { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font-size: 9.5px; font-weight: 700; flex-shrink: 0; } .av.you { background: var(--s3); color: var(--t2); } .av.ai { background: var(--grad); color: #fff; box-shadow: var(--halo-ia); } .bub { flex: 1; min-width: 0; font-size: var(--fz-3); color: var(--t1); word-wrap: break-word; line-height: var(--lh-lectura); position: relative; } .bub code { font-family: var(--mono); font-size: 11.5px; background: var(--s2); padding: 1.5px 5px; border-radius: 4px; color: var(--dorado2); } .bub pre { background: var(--s0); border: 1px solid var(--b1); border-radius: var(--r2); padding: 10px 12px; overflow-x: auto; margin: 8px 0; font-family: var(--mono); font-size: 11.5px; line-height: 1.6; } .bub h1, .bub h2, .bub h3 { font-size: var(--fz-3); font-weight: 650; color: var(--t1); margin: 14px 0 6px; letter-spacing: -.01em; } .bub h1 { font-size: var(--fz-4); } .bub h3 { color: var(--t2); } .bub p { margin: 7px 0; } .bub ul, .bub ol { margin: 7px 0 7px 18px; } .bub li { margin: 3px 0; } .bub blockquote { border-left: 2px solid var(--b3); padding-left: 11px; margin: 8px 0; color: var(--t2); } .bub a { color: var(--azul2); text-decoration: underline; text-underline-offset: 2px; } .bub hr { border: none; border-top: 1px solid var(--b1); margin: 12px 0; } .bub img { max-width: 100%; border-radius: var(--r2); margin: 8px 0; display: block; } .bub .tabla { overflow-x: auto; margin: 9px 0; border: 1px solid var(--b1); border-radius: var(--r2); } .bub table { border-collapse: collapse; width: 100%; font-size: var(--fz-2); } .bub th, .bub td { padding: 6px 10px; text-align: left; border-bottom: 1px solid var(--b1); white-space: nowrap; } .bub th { color: var(--t2); font-weight: 600; background: var(--s2); font-size: var(--fz-1); letter-spacing: .03em; text-transform: uppercase; } .bub tr:last-child td { border-bottom: none; } .copy { position: absolute; top: -4px; right: -2px; width: 20px; height: 20px; border-radius: 5px; color: var(--t4); display: grid; place-items: center; opacity: 0; transition: opacity var(--tx-fast), color var(--tx-fast); } .msg:hover .copy { opacity: 1; } .copy:hover { color: var(--dorado); background: var(--s3); } .copy .ic-svg { width: 12px; height: 12px; } /* bloques de código con lengua y botón propio */ .cod { margin: 9px 0; border: 1px solid var(--b1); border-radius: var(--r2); overflow: hidden; background: var(--s0); } .cod .cab { display: flex; align-items: center; gap: var(--sp2); padding: 4px 9px; background: var(--s2); border-bottom: 1px solid var(--b1); font-size: var(--fz-1); letter-spacing: .1em; text-transform: uppercase; color: var(--t4); } .cod .cab button { margin-left: auto; font-size: var(--fz-1); color: var(--t3); padding: 2px 7px; border-radius: 4px; letter-spacing: 0; text-transform: none; } .cod .cab button:hover { color: var(--t1); background: var(--s3); } .cod pre { margin: 0; border: none; border-radius: 0; background: transparent; } /* la actividad en vivo: lo que BUHOS está haciendo AHORA */ .act { margin-top: 2px; display: flex; flex-direction: column; gap: 1px; border-left: 2px solid color-mix(in srgb, var(--morado) 32%, transparent); padding-left: 11px; } .act-l { display: flex; align-items: center; gap: var(--sp2); font-size: var(--fz-2); color: var(--t2); padding: 3px 0; animation: entrar 180ms var(--curva) both; } .act-l .v { font-weight: 600; color: var(--morado2); min-width: 74px; } .act-l .o { font-family: var(--mono); font-size: var(--fz-1); color: var(--t2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .act-l.hecho .v { color: var(--t3); } .act-l.hecho .tick { color: var(--verde); } .act-l .tick { font-size: 10px; color: var(--morado); } .act-l.curso .tick { animation: latido 1s ease-in-out infinite; } .steps { margin-top: 9px; display: flex; flex-direction: column; gap: 4px; } .step { display: flex; align-items: center; gap: var(--sp2); font-size: var(--fz-2); color: var(--t2); padding: 5px 9px; background: var(--s2); border: 1px solid var(--b1); border-radius: var(--r1); animation: aparece 180ms ease both; } .step .k { font-family: var(--mono); font-size: var(--fz-1); color: var(--morado2); background: color-mix(in srgb, var(--morado) 12%, transparent); padding: 1px 6px; border-radius: 4px; } .step.ok .b { color: var(--verde); } .step.no .b { color: var(--rojo); } .why { font-size: var(--fz-1); color: var(--t3); margin-top: 6px; font-style: italic; } .why summary { cursor: pointer; transition: color var(--tx-fast); } .why summary:hover { color: var(--t2); } .why pre { font-style: normal; max-height: 130px; overflow: auto; } .relevo { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .relevo .why { width: 100%; margin: 0 0 3px; } .relevo-b { font-size: var(--fz-2); padding: 4px 10px; border-radius: var(--r1); border: 1px solid var(--b2); color: var(--t2); background: var(--s2); transition: all var(--tx-fast); } .relevo-b:hover { color: var(--t1); border-color: var(--morado); background: var(--s3); box-shadow: var(--halo-ia); } .ai-dots { display: inline-flex; gap: 4px; } .ai-dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--morado); animation: punto 1.2s ease-in-out infinite; } .ai-dots i:nth-child(2) { animation-delay: .2s; } .ai-dots i:nth-child(3) { animation-delay: .4s; } .escribiendo::after { content: '▌'; color: var(--morado); animation: latido .9s ease-in-out infinite; margin-left: 1px; } .coste { display: flex; align-items: center; gap: var(--sp2); flex-wrap: wrap; margin-top: 7px; padding-top: 6px; border-top: 1px solid var(--b1); font-size: var(--fz-1); font-family: var(--mono); color: var(--t4); } .coste b { color: var(--t3); font-weight: 500; } .coste .ia { color: var(--morado2); } .coste .sin { font-style: italic; font-family: var(--font); } /* el cajón del historial: se DESLIZA sobre el hilo en vez de robarle ancho */ #conv-cajon { position: absolute; top: 38px; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--s1); display: none; flex-direction: column; animation: aparece 120ms ease both; } #conv-cajon.on { display: flex; } #conv-buscar { display: flex; align-items: center; gap: var(--sp2); padding: var(--sp2) var(--sp3); border-bottom: 1px solid var(--b1); flex-shrink: 0; } #conv-buscar input { flex: 1; height: 26px; font-size: var(--fz-2); } #conv-lista { flex: 1; overflow-y: auto; padding: var(--sp2) 0; } .conv-it { display: flex; align-items: center; gap: var(--sp2); padding: 6px var(--sp3); cursor: pointer; font-size: var(--fz-2); color: var(--t2); transition: background var(--tx-fast); } .conv-it:hover { background: var(--s2); color: var(--t1); } .conv-it.on { background: color-mix(in srgb, var(--morado) 11%, transparent); color: var(--t1); box-shadow: inset 2px 0 0 var(--morado); } .conv-it .tx { flex: 1; min-width: 0; } .conv-it .ti { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .conv-it .sb { font-size: var(--fz-1); color: var(--t4); font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; } .conv-it .mk { flex-shrink: 0; color: var(--t4); width: 15px; display: grid; place-items: center; } .conv-it .mk.on { color: var(--dorado); } .conv-it .acs { display: none; gap: 2px; flex-shrink: 0; } .conv-it:hover .acs { display: flex; } .conv-it .acs button { width: 20px; height: 20px; border-radius: 4px; color: var(--t4); display: grid; place-items: center; } .conv-it .acs button:hover { color: var(--t1); background: var(--s3); } .conv-grp { font-size: var(--rotulo-tam); font-weight: var(--rotulo-peso); letter-spacing: var(--rotulo-esp); text-transform: uppercase; color: var(--t4); padding: 9px var(--sp3) 4px; } .conv-it .trozo { font-size: var(--fz-1); color: var(--t3); font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .conv-it .trozo b { color: var(--dorado2); font-style: normal; } /* el cajón de escribir */ #composer { border-top: 1px solid var(--b1); padding: var(--sp2) var(--sp3) var(--sp3); flex-shrink: 0; } #atajos { display: flex; gap: 10px; margin-bottom: 7px; overflow: hidden; font-size: 9.5px; color: var(--t4); white-space: nowrap; } #atajos span { display: inline-flex; align-items: center; gap: 4px; } #atajos .kbd { font-size: 8.5px; padding: 0 4px; border-bottom-width: 1px; } .cmini { display: flex; gap: 5px; margin-bottom: var(--sp2); flex-wrap: wrap; } .cmini button { font-size: var(--fz-1); padding: 3px 8px; border-radius: var(--r1); border: 1px solid var(--b1); color: var(--t3); transition: all var(--tx-fast); } .cmini button:hover { color: var(--t1); border-color: var(--b3); background: var(--s2); } #cmp-sel { display: flex; flex-wrap: wrap; gap: var(--sp1); padding: var(--sp2) 0 0; } #cmp-sel:empty { display: none; } .cmp-p { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: var(--r1); font-size: var(--fz-2); border: 1px solid var(--b1); background: var(--s2); color: var(--t3); cursor: pointer; } .cmp-p.on { color: var(--t1); border-color: var(--morado); background: color-mix(in srgb, var(--morado) 13%, transparent); } #adjuntos { display: flex; flex-wrap: wrap; gap: var(--sp1); padding: 0 0 var(--sp2); } #adjuntos:empty { display: none; } .adj { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 7px; border-radius: 5px; font-size: var(--fz-1); background: var(--s3); color: var(--t2); border: 1px solid var(--b1); font-family: var(--mono); } .adj button { color: var(--t4); display: grid; place-items: center; } .adj button:hover { color: var(--rojo); } #cbox { display: flex; gap: var(--sp2); align-items: flex-end; background: var(--s2); border: 1px solid var(--b2); border-radius: var(--r3); padding: 8px 9px; transition: border-color var(--tx), box-shadow var(--tx); } #cbox:focus-within { border-color: var(--morado); box-shadow: 0 0 0 3px color-mix(in srgb, var(--morado) 14%, transparent); } #msg { flex: 1; background: transparent; border: none; padding: 0; resize: none; max-height: 160px; font-size: var(--fz-3); line-height: 1.55; height: auto; } #msg:focus { box-shadow: none; } #send { width: 28px; height: 28px; border-radius: var(--r1); background: var(--grad); color: #fff; display: grid; place-items: center; flex-shrink: 0; transition: filter var(--tx-fast), transform var(--tx-fast); } #send:hover:not(:disabled) { filter: brightness(1.12); } #send:active:not(:disabled) { transform: scale(.92); } #send:disabled { opacity: .4; cursor: default; } #send.parar { background: var(--rojo); animation: pulso 1.6s infinite; } #chat.soltando::after { content: 'Suelta los archivos aquí'; position: absolute; inset: var(--sp3); border: 2px dashed var(--morado); border-radius: var(--r3); display: grid; place-items: center; background: color-mix(in srgb, var(--morado) 9%, transparent); color: var(--morado2); font-size: var(--fz-3); font-weight: 600; z-index: 30; pointer-events: none; } /* la comparación multi-modelo y el consenso */ .cmp { display: grid; gap: var(--sp2); margin-top: var(--sp2); } .cmp.cols { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .cmp-c { border: 1px solid var(--b1); border-radius: var(--r2); background: var(--s2); overflow: hidden; display: flex; flex-direction: column; animation: brotar 180ms var(--curva) both; transition: border-color var(--tx-fast); } .cmp-c:hover { border-color: var(--b2); } .cmp-c.gana { border-color: color-mix(in srgb, var(--dorado) 42%, transparent); box-shadow: var(--halo-oro); } .cmp-h { display: flex; align-items: center; gap: var(--sp2); padding: 6px 10px; font-size: var(--fz-2); background: var(--s3); color: var(--t2); font-weight: 600; } .cmp-h .ms { margin-left: auto; font-family: var(--mono); font-size: var(--fz-1); color: var(--t3); font-weight: 400; } .cmp-b { padding: 10px 11px; font-size: var(--fz-2); color: var(--t1); max-height: 250px; overflow-y: auto; white-space: pre-wrap; line-height: 1.6; flex: 1; } .cmp-b.err { color: var(--rojo); font-size: var(--fz-1); font-family: var(--mono); } .cmp-u { display: block; width: 100%; padding: 6px; font-size: var(--fz-1); color: var(--morado2); border-top: 1px solid var(--b1); transition: background var(--tx-fast); } .cmp-u:hover { background: color-mix(in srgb, var(--morado) 10%, transparent); } .consenso { margin-top: 11px; border: 1px solid color-mix(in srgb, var(--dorado) 32%, transparent); border-radius: var(--r2); padding: 12px 14px; background: linear-gradient(180deg, color-mix(in srgb, var(--dorado) 6%, transparent), transparent); animation: subir 220ms var(--curva) both; } .consenso .t { display: flex; align-items: center; gap: var(--sp2); font-size: var(--rotulo-tam); font-weight: 700; letter-spacing: var(--rotulo-esp); text-transform: uppercase; color: var(--dorado); margin-bottom: var(--sp2); } .consenso .c { font-size: var(--fz-3); color: var(--t1); line-height: var(--lh-lectura); white-space: pre-wrap; } /* ═══ 4 · LA BARRA DE ESTADO ══════════════════════════════════════════════════ Dice DÓNDE estás y sobre qué. Ni una constante viva más: el estado del sistema vive arriba, en su semáforo, y tenerlo también aquí serían dos sitios que pueden discrepar. */ #status { grid-area: estado; display: flex; align-items: center; gap: var(--sp4); padding: 0 var(--sp3); background: var(--s0); border-top: 1px solid var(--b1); font-size: var(--fz-1); color: var(--t3); } #status .hot { color: var(--t2); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; padding: 0 5px; height: 18px; border-radius: 4px; transition: color var(--tx-fast), background var(--tx-fast); } #status .hot:hover { color: var(--t1); background: var(--s2); } #status .ic-svg { width: 12px; height: 12px; } #status .mono { font-family: var(--mono); } /* ═══ 5 · ⌘K — LA PUERTA A TODO ═══════════════════════════════════════════════ La referencia es Raycast: una caja que flota alta, resultados agrupados con su rótulo, y el atajo de cada acción a la derecha. Se abre, eliges, se va. */ #kpanel { width: min(640px, 92vw); background: var(--vidrio); backdrop-filter: var(--vidrio-filtro); border: 1px solid var(--b2); border-radius: var(--r4); box-shadow: var(--e3); overflow: hidden; animation: brotar 160ms var(--curva) both; } #kin { width: 100%; height: 52px; padding: 0 18px; background: transparent; border: none; border-bottom: 1px solid var(--b1); border-radius: 0; font-size: var(--fz-4); } #kin:focus { box-shadow: none; border-color: var(--b1); } #kin::placeholder { color: var(--t3); } #klist { max-height: min(440px, 52vh); overflow-y: auto; padding: 6px; } .ki { display: flex; align-items: center; gap: 11px; padding: 8px 11px; border-radius: var(--r1); font-size: var(--fz-3); color: var(--t2); cursor: pointer; } .ki.on { background: color-mix(in srgb, var(--azul) 15%, transparent); color: var(--t1); } .ki .ic { width: 16px; height: 16px; display: grid; place-items: center; color: var(--t3); } .ki.on .ic { color: var(--azul2); } .ki .hint { margin-left: auto; font-size: var(--fz-1); color: var(--t4); } .kgrp { padding: 9px 12px 4px; font-size: var(--rotulo-tam); letter-spacing: var(--rotulo-esp); font-weight: var(--rotulo-peso); text-transform: uppercase; color: var(--t4); } /* ═══ 6 · PANELES DESACOPLADOS ════════════════════════════════════════════════ Un panel flotante es el MISMO nodo del DOM movido de sitio, no una copia: por eso no se pierde el scroll, ni lo escrito a medias, ni la conversación. */ .flot { position: fixed; z-index: 150; display: flex; flex-direction: column; background: var(--vidrio); backdrop-filter: var(--vidrio-filtro); border: 1px solid var(--b3); border-radius: var(--r3); box-shadow: var(--e3); overflow: hidden; min-width: 260px; min-height: 180px; animation: brotar 160ms var(--curva) both; } .flot > .fh { display: flex; align-items: center; gap: var(--sp2); height: 30px; padding: 0 var(--sp3); cursor: grab; background: var(--s2); border-bottom: 1px solid var(--b1); font-size: var(--rotulo-tam); letter-spacing: var(--rotulo-esp); text-transform: uppercase; color: var(--t3); font-weight: var(--rotulo-peso); flex-shrink: 0; } .flot > .fh:active { cursor: grabbing; } .flot .fz { position: absolute; right: 0; bottom: 0; width: 15px; height: 15px; cursor: nwse-resize; } .flot .fz::after { content: ''; position: absolute; right: 3px; bottom: 3px; width: 7px; height: 7px; border-right: 2px solid var(--b3); border-bottom: 2px solid var(--b3); } .flot > #side, .flot > #chat, .flot > #dock { width: auto; height: auto; flex: 1; min-height: 0; border: none; background: transparent; } /* ═══ 7 · INICIO ══════════════════════════════════════════════════════════════ */ #pane-home { padding: 0; overflow-y: auto; } .hero { padding: var(--sp5) var(--sp6) var(--sp4); border-bottom: 1px solid var(--b1); background: radial-gradient(900px 220px at 10% -70%, color-mix(in srgb, var(--dorado) 8%, transparent), transparent 70%), radial-gradient(800px 200px at 90% -60%, color-mix(in srgb, var(--morado) 8%, transparent), transparent 70%); } .hero .hrow { display: flex; align-items: center; gap: var(--sp5); flex-wrap: wrap; } .hero .hwho { min-width: 0; flex: 1 1 260px; } .hero h1 { font-size: 22px; font-weight: 650; letter-spacing: -.03em; color: var(--t1); display: flex; align-items: center; gap: 10px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hero h1.vacio { color: var(--t3); font-weight: 600; } .hero h1 .hex { color: var(--dorado); display: grid; place-items: center; } .hero .sub { color: var(--t3); font-size: var(--fz-2); margin-top: 5px; } .hero .sub b { color: var(--t2); font-weight: 600; } .hero .sub .sep { color: var(--t4); margin: 0 7px; display: inline; height: auto; background: none; } .hero .hacts { display: flex; gap: var(--sp2); flex-wrap: wrap; flex-shrink: 0; } /* ── ¿QUÉ QUIERES CREAR? ────────────────────────────────────────────────────── Lo primero que se ve y lo primero que se puede usar. Va ANTES que los datos del panel: quien abre BUHOS viene a pedir algo, no a leer métricas. */ #h-crear { margin-top: var(--sp4); max-width: 760px; } #h-crear > label { display: block; font-size: var(--fz-2); color: var(--t2); font-weight: 600; margin-bottom: 7px; } .hc-caja { display: flex; align-items: center; gap: 6px; background: var(--s2); border: 1px solid var(--b2); border-radius: var(--r3); padding: 4px 4px 4px 13px; transition: border-color 140ms var(--curva), box-shadow 140ms var(--curva); } .hc-caja:focus-within { border-color: var(--morado); box-shadow: var(--halo-ia); } .hc-caja input { flex: 1; min-width: 0; background: none; border: none; outline: none; color: var(--t1); font-family: var(--font); font-size: var(--fz-3); padding: 9px 0; } .hc-caja input::placeholder { color: var(--t4); } .hc-caja button { flex-shrink: 0; width: 34px; height: 34px; border: none; border-radius: var(--r2); background: var(--grad); color: var(--tinta-ia); display: grid; place-items: center; cursor: pointer; box-shadow: var(--halo-ia); transition: filter 140ms var(--curva); } .hc-caja button:hover { filter: brightness(1.1); } .hc-ideas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; } .hc-ideas button { border: 1px solid var(--b2); background: var(--s2); color: var(--t2); border-radius: 20px; padding: 5px 12px; font-size: var(--fz-1); cursor: pointer; transition: all 130ms var(--curva); } .hc-ideas button:hover { border-color: var(--morado); color: var(--morado2); } .grid { display: grid; gap: var(--sp3); padding: var(--sp5) var(--sp6) var(--sp6); grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); } /* ═══ MIS WEBS ════════════════════════════════════════════════════════════════ Una tarjeta por web construida. Lo que se quiere de un vistazo: cómo se llama, si está lista y cuánto sacó. El resto, a un clic. */ #pane-webs { display: none; flex-direction: column; overflow-y: auto; } #pane-webs.on { display: flex; } .wcard { border: 1px solid var(--b1); border-radius: var(--r3); background: var(--s1); padding: 14px 15px; display: flex; flex-direction: column; gap: 4px; animation: subir 240ms var(--curva) both; transition: border-color 140ms var(--curva), transform 140ms var(--curva); } .wcard:hover { border-color: var(--b3); transform: translateY(-1px); } .wcard.ida { opacity: .55; } .wc-h { display: flex; align-items: center; gap: 8px; } .wc-n { font-size: var(--fz-3); font-weight: 650; color: var(--t1); letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .wc-s { font-family: var(--mono); font-size: var(--fz-1); color: var(--t4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wc-m { display: flex; align-items: baseline; gap: 5px; margin-top: 6px; font-size: var(--fz-1); color: var(--t3); flex-wrap: wrap; } .wc-m b { font-size: 19px; font-weight: 700; color: var(--t1); letter-spacing: -.02em; } .wc-m .sep { color: var(--t4); } .wc-a { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; } .wc-a .btn { display: flex; align-items: center; gap: 5px; border: 1px solid var(--b2); background: var(--s2); color: var(--t2); border-radius: var(--r1); padding: 6px 11px; font-size: var(--fz-1); font-weight: 600; cursor: pointer; transition: all 130ms var(--curva); } .wc-a .btn:hover { border-color: var(--morado); color: var(--morado2); } .wc-a .btn.ib { padding: 6px 8px; color: var(--t3); } /* ═══ 8 · EL CENTRO DE CONTROL ════════════════════════════════════════════════ */ #pane-centro { display: none; flex-direction: column; } #pane-centro.on { display: flex; } #vic-bar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp2) var(--sp3); min-height: 40px; flex-shrink: 0; padding: var(--sp1) var(--sp4); border-bottom: 1px solid var(--b1); background: var(--s1); } #vic-bar .seg { flex-wrap: wrap; max-width: 100%; } #vic-bar .tag { flex-shrink: 0; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #vic-bar > div:last-child { flex-shrink: 0; } #vic-body { flex: 1; overflow: auto; min-height: 0; } .vic-wrap { padding: var(--sp5) var(--sp6) var(--sp6); } .vic-h { display: flex; align-items: baseline; gap: var(--sp3); margin-bottom: var(--sp4); } .vic-h .t { font-size: var(--fz-4); font-weight: 600; letter-spacing: -.01em; color: var(--t1); } .vic-h .d { font-size: var(--fz-2); color: var(--t3); } .vic-nums { display: flex; flex-wrap: wrap; gap: var(--sp2); margin-bottom: var(--sp5); } .vic-num { flex: 1 1 118px; background: var(--s1); border: 1px solid var(--b1); border-radius: var(--r2); padding: 10px var(--sp3); } .vic-num .n { font-size: var(--fz-5); font-weight: 600; letter-spacing: -.02em; color: var(--t1); font-family: var(--mono); line-height: 1.2; } .vic-num .n.dim { color: var(--t4); } .vic-num .l { font-size: var(--fz-1); color: var(--t3); margin-top: 2px; } .vic-capa { margin-bottom: var(--sp4); } .vic-capa > .lb { display: flex; align-items: center; gap: var(--sp2); font-size: var(--rotulo-tam); font-weight: var(--rotulo-peso); letter-spacing: var(--rotulo-esp); text-transform: uppercase; color: var(--t4); margin-bottom: var(--sp2); cursor: pointer; } .vic-capa > .lb:hover { color: var(--t2); } .vic-capa > .lb .ct { font-family: var(--mono); letter-spacing: 0; } .vic-nodos { display: grid; gap: var(--sp2); grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); } .vic-n { text-align: left; background: var(--s1); border: 1px solid var(--b1); border-radius: var(--r2); padding: 9px 11px; cursor: pointer; width: 100%; transition: border-color var(--tx-fast), background var(--tx-fast); } .vic-n:hover { background: var(--s2); border-color: var(--b3); } .vic-n.on { border-color: var(--azul); background: color-mix(in srgb, var(--azul) 10%, transparent); } .vic-n .nm { font-size: var(--fz-2); color: var(--t1); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vic-n .mt { display: flex; align-items: center; gap: var(--sp2); margin-top: 3px; font-size: var(--fz-1); color: var(--t4); font-family: var(--mono); } .vic-n .bar { height: 2px; border-radius: 2px; background: var(--s4); margin-top: 6px; } .vic-n .bar > i { display: block; height: 100%; border-radius: 2px; background: var(--azul); transition: width var(--tx); } .vic-n.suelto { border-style: dashed; } .vic-det { margin-top: var(--sp3); background: var(--s1); border: 1px solid var(--b2); border-radius: var(--r2); overflow: hidden; animation: subir 180ms var(--curva) both; } .vic-det .cols { display: grid; gap: 0; grid-template-columns: 1fr 1fr; } .vic-det .col { padding: var(--sp3) var(--sp4); min-width: 0; } .vic-det .col + .col { border-left: 1px solid var(--b1); } .vic-det .cl { font-size: var(--rotulo-tam); font-weight: var(--rotulo-peso); letter-spacing: var(--rotulo-esp); text-transform: uppercase; color: var(--t4); margin-bottom: var(--sp2); } @media (max-width: 900px) { .vic-det .cols { grid-template-columns: 1fr; } .vic-det .col + .col { border-left: none; border-top: 1px solid var(--b1); } } .vic-log { font-family: var(--mono); font-size: var(--fz-2); } .vic-log .lr { display: grid; gap: var(--sp3); align-items: baseline; grid-template-columns: 64px 96px 1fr 74px 62px; padding: 5px var(--sp3); border-bottom: 1px solid var(--b1); } .vic-log .lr.hd { color: var(--t4); font-size: var(--rotulo-tam); letter-spacing: var(--rotulo-esp); text-transform: uppercase; font-family: var(--font); font-weight: var(--rotulo-peso); position: sticky; top: 0; background: var(--s0); z-index: 2; } .vic-log .lr:not(.hd):hover { background: var(--s1); } .vic-log .lr.err { background: color-mix(in srgb, var(--rojo) 7%, transparent); } .vic-log .lr.avi { background: color-mix(in srgb, var(--ambar) 6%, transparent); } .vic-log .c-t { color: var(--t4); white-space: nowrap; } .vic-log .c-q, .vic-log .c-h { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .vic-log .c-q { color: var(--morado2); } .vic-log .c-h { color: var(--t1); } .vic-log .c-h .por { color: var(--t4); } .vic-log .c-d { text-align: right; color: var(--t2); } .vic-log .c-s { text-align: right; } .vic-log .fallo { grid-column: 1/-1; display: block; color: var(--rojo); font-size: var(--fz-1); padding-top: 2px; white-space: pre-wrap; } @media (max-width: 840px) { .vic-log .lr { grid-template-columns: 56px 1fr 60px; } .vic-log .c-q, .vic-log .c-d { display: none; } } .vic-lane { display: flex; align-items: center; gap: var(--sp3); padding: 10px var(--sp4); border: 1px solid var(--b1); border-radius: var(--r2); background: var(--s1); margin-bottom: var(--sp2); } .vic-lane.viva { border-color: color-mix(in srgb, var(--morado) 35%, transparent); background: color-mix(in srgb, var(--morado) 7%, transparent); } .vic-lane.off { opacity: .5; } .vic-lane .cara { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; background: var(--s3); color: var(--t3); } .vic-lane.viva .cara { background: var(--grad); color: #fff; } .vic-lane.busy .cara { animation: pulso 1.6s ease-out infinite; } .vic-lane .who { min-width: 0; flex: 0 0 148px; } .vic-lane .who .nm { font-size: var(--fz-2); color: var(--t1); font-weight: 500; } .vic-lane .who .md { font-size: var(--fz-1); color: var(--t4); font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vic-lane .task { flex: 1; min-width: 0; font-size: var(--fz-2); color: var(--t2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vic-flow { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; } .vic-st { flex: 1 1 124px; min-width: 124px; position: relative; padding: var(--sp3) var(--sp3) var(--sp3) 0; } .vic-st .hilo { position: absolute; left: 11px; right: 0; top: 22px; height: 2px; background: var(--s3); } .vic-st:last-child .hilo { display: none; } .vic-st .pt { position: relative; z-index: 1; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; background: var(--s2); border: 1px solid var(--b2); color: var(--t4); } .vic-st .nm { font-size: var(--fz-2); color: var(--t2); margin-top: var(--sp2); font-weight: 500; } .vic-st .de { font-size: var(--fz-1); color: var(--t4); margin-top: 1px; line-height: 1.45; } .vic-st.done .pt { background: color-mix(in srgb, var(--verde) 16%, transparent); border-color: var(--verde); color: var(--verde); } .vic-st.done .nm { color: var(--t1); } .vic-st.done .hilo { background: var(--verde); } .vic-st.running .pt { background: color-mix(in srgb, var(--morado) 17%, transparent); border-color: var(--morado); color: var(--morado2); animation: pulso 1.6s ease-out infinite; } .vic-st.running .nm { color: var(--t1); } .vic-st.failed .pt { background: color-mix(in srgb, var(--rojo) 16%, transparent); border-color: var(--rojo); color: var(--rojo); } .vic-st.failed .nm { color: var(--rojo); } .vic-st .por { font-size: var(--fz-1); color: var(--ambar); margin-top: 3px; } /* ═══ 9 · EXPERIENCE STUDIO ═══════════════════════════════════════════════════ La referencia es Unreal / Blender / DaVinci: un VIEWPORT que manda y, a su alrededor, las cuatro preguntas que uno se hace mirándolo. */ #pane-xstudio { display: none; overflow: hidden; } #pane-xstudio.on { display: grid; grid-template-columns: auto auto 1fr auto auto; grid-template-rows: 36px 1fr auto auto; } #xs-bar { grid-column: 1/-1; display: flex; align-items: center; gap: var(--sp2); padding: 0 var(--sp3); background: var(--s1); border-bottom: 1px solid var(--b1); } #xs-bar .nm { font-size: var(--fz-2); font-weight: 600; color: var(--t1); letter-spacing: -.01em; display: flex; align-items: center; gap: 7px; } #xs-bar .nm .gl { color: var(--dorado); display: grid; place-items: center; } #xs-esc { width: 212px; border-right: 1px solid var(--b1); background: var(--s1); display: flex; flex-direction: column; min-height: 0; } #xs-esc.off, #xs-insp.off, #xs-tl.off, #xs-ge.off, #xs-gi.off, #xs-gt.off { display: none; } #xs-insp { width: 246px; border-left: 1px solid var(--b1); background: var(--s1); display: flex; flex-direction: column; min-height: 0; } #xs-view { background: var(--bg); position: relative; min-width: 0; overflow: hidden; display: flex; flex-direction: column; background-image: radial-gradient(circle at 1px 1px, var(--b1) 1px, transparent 0); background-size: 22px 22px; } #xs-frame { flex: 1; width: 100%; border: 0; background: var(--s0); } #xs-tl { grid-column: 1/-1; height: var(--h-xtl, 148px); background: var(--s1); border-top: 1px solid var(--b1); display: flex; flex-direction: column; min-height: 0; } #xs-gt { grid-column: 1/-1; } .xs-scroll { flex: 1; overflow: auto; min-height: 0; padding: var(--sp2) 0; } .xs-e { display: flex; align-items: center; gap: var(--sp2); padding: 5px var(--sp3); font-size: var(--fz-2); color: var(--t2); cursor: pointer; position: relative; transition: background var(--tx-fast), color var(--tx-fast); } .xs-e:hover { background: var(--s2); color: var(--t1); } .xs-e.on { background: color-mix(in srgb, var(--azul) 12%, transparent); color: var(--t1); } .xs-e.on::before { content: ''; position: absolute; left: 0; top: 3px; bottom: 3px; width: 2px; background: var(--azul); border-radius: 0 2px 2px 0; } .xs-e .n { width: 17px; font-family: var(--mono); font-size: 9.5px; color: var(--t4); text-align: right; flex-shrink: 0; } .xs-e .t { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .xs-e .d { font-family: var(--mono); font-size: 9.5px; color: var(--t4); } .xs-pistas { flex: 1; overflow: auto; min-height: 0; padding: var(--sp2) var(--sp3); } .xs-p { display: flex; align-items: center; gap: var(--sp2); height: 24px; } .xs-p .lb { width: 96px; font-size: var(--fz-1); color: var(--t3); text-transform: uppercase; letter-spacing: .08em; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .xs-p .via { flex: 1; height: 14px; border-radius: 4px; background: var(--s2); position: relative; overflow: hidden; } .xs-bloque { position: absolute; top: 0; bottom: 0; border-radius: 4px; cursor: pointer; background: linear-gradient(180deg, color-mix(in srgb, var(--morado) 55%, transparent), color-mix(in srgb, var(--morado) 28%, transparent)); border: 1px solid color-mix(in srgb, var(--morado) 42%, transparent); transition: filter var(--tx-fast); } .xs-bloque:hover { filter: brightness(1.25); } .xs-bloque.ok { background: linear-gradient(180deg, color-mix(in srgb, var(--verde) 48%, transparent), color-mix(in srgb, var(--verde) 22%, transparent)); border-color: color-mix(in srgb, var(--verde) 42%, transparent); } .xs-bloque.no { background: linear-gradient(180deg, color-mix(in srgb, var(--rojo) 48%, transparent), color-mix(in srgb, var(--rojo) 22%, transparent)); border-color: color-mix(in srgb, var(--rojo) 42%, transparent); } .xs-bloque.sel { box-shadow: 0 0 0 1px var(--dorado); } .xs-regla { display: flex; align-items: center; gap: var(--sp2); padding: 5px var(--sp3) 0; font-family: var(--mono); font-size: 9px; color: var(--t4); } .xs-regla .via { flex: 1; height: 11px; position: relative; background: repeating-linear-gradient(90deg, var(--b2) 0 1px, transparent 1px 10%); } #xs-cabezal { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--dorado); box-shadow: 0 0 7px color-mix(in srgb, var(--dorado) 60%, transparent); pointer-events: none; } .xs-prop { display: flex; align-items: flex-start; gap: var(--sp2); padding: 5px var(--sp3); font-size: var(--fz-2); border-bottom: 1px solid var(--b1); } .xs-prop .k { color: var(--t3); min-width: 78px; flex-shrink: 0; } .xs-prop .v { color: var(--t1); font-family: var(--mono); font-size: var(--fz-1); flex: 1; word-break: break-word; } .xs-mat { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: var(--sp2); padding: var(--sp2) var(--sp3); } .xs-m { aspect-ratio: 1; border-radius: var(--r1); background: var(--s2); border: 1px solid var(--b1); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 9.5px; color: var(--t3); cursor: pointer; overflow: hidden; transition: all var(--tx-fast); } .xs-m:hover { border-color: var(--b3); color: var(--t1); } .xs-m .gl { color: var(--t4); display: grid; place-items: center; } /* ═══ 10 · ADAPTACIÓN A VENTANAS ESTRECHAS ════════════════════════════════════ La barra de título se estrecha por ORDEN DE IMPORTANCIA, no se rompe. Lo primero que sobra es el texto del buscador (el atajo se sabe); después la constante menos urgente, que es la CPU. Proyecto, IA y estado no se van nunca: el estado es lo único que puede obligarte a parar. */ @media (max-width: 1400px) { #kbar { width: min(300px, 26vw); } } @media (max-width: 1180px) { #kbar span.tx { display: none; } #kbar { width: auto; min-width: 0; } } @media (max-width: 1080px) { #c-cpu { display: none; } } @media (max-width: 940px) { #c-ram { display: none; } .marca .os { display: none; } } /* ═══ 11 · EL RIEL CON NOMBRES, Y LOS DOS MODOS ═══════════════════════════════ Once iconos en columna sin una palabra al lado es una barra de herramientas, no una navegación: obliga a pasar el ratón por los once, uno a uno, para averiguar dónde está lo que buscas. Ahora el riel DICE los destinos, y por eso se ensancha. El ancho sale de la densidad, igual que todo lo demás. */ :root { --w-riel-ancho: calc(178px * var(--densidad)); } #rail { width: var(--w-riel-ancho); align-items: stretch; padding: var(--sp2) 7px; gap: 1px; } .rail-g { font-size: var(--rotulo-tam); font-weight: var(--rotulo-peso); letter-spacing: var(--rotulo-esp); text-transform: uppercase; color: var(--t4); padding: var(--sp3) 9px 5px; } .rail-g:first-child { padding-top: 4px; } .rb { width: auto; height: 30px; display: flex; align-items: center; gap: 9px; padding: 0 9px; font-size: var(--fz-2); text-align: left; } .rb .rt { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rb .ic-svg { width: 16px; height: 16px; flex-shrink: 0; } .rb.on::before { left: -7px; top: 6px; bottom: 6px; } /* El interruptor de modo, al pie: separado del resto por el espacio, no por una línea más — la columna ya tiene tres. */ #rail .sp { flex: 1; min-height: var(--sp4); } .rb.rm { color: var(--t4); border-top: 1px solid var(--b1); border-radius: 0; height: 34px; margin-top: 2px; } .rb.rm:hover { color: var(--t2); background: transparent; } body.avanzado .rb.rm { color: var(--dorado); } /* ═══ 12 · CONVERSAR — EL CHAT EN EL CENTRO ═══════════════════════════════════ El chat es el MISMO nodo, movido. Estas reglas sólo lo sueltan de la columna de la derecha: sin ancho fijo, sin borde de zona y sin la asa de arrastre. */ body.chat-centro #chat { width: auto; flex: 1; border-left: none; background: var(--bg); } body.chat-centro #g-chat { display: none; } #pane-conversar.on { display: flex; flex-direction: column; min-height: 0; } #cv-bar { display: flex; align-items: center; gap: var(--sp2); flex-shrink: 0; height: 38px; padding: 0 var(--sp3); border-bottom: 1px solid var(--b1); background: var(--s1); } #cv-bar .sp { flex: 1; } #cv-cuerpo { flex: 1; display: flex; min-height: 0; min-width: 0; } #cv-chat { display: flex; min-height: 0; min-width: 0; flex-direction: column; } #cv-vista { min-width: 0; min-height: 0; position: relative; background: var(--s0); } #cv-frame { width: 100%; height: 100%; border: 0; background: var(--papel); display: block; } #cv-vista .nada { position: absolute; inset: 0; } /* Las tres formas de mirar. Una sola clase en el contenedor decide las tres. */ #cv-cuerpo.v-chat #cv-chat { flex: 1; } #cv-cuerpo.v-chat #cv-vista { display: none; } #cv-cuerpo.v-ambos #cv-chat { flex: 0 0 clamp(360px, 42%, 620px); border-right: 1px solid var(--b1); } #cv-cuerpo.v-ambos #cv-vista { flex: 1; } #cv-cuerpo.v-vista #cv-chat { display: none; } #cv-cuerpo.v-vista #cv-vista { flex: 1; } .tag.ok { color: var(--verde); } .tag.rev { color: var(--ambar); } /* ═══ 13 · PROYECTOS ══════════════════════════════════════════════════════════ La miniatura es la web de verdad —el mismo /preview//—, a escala y sin ratón. Una captura guardada se queda vieja en cuanto se edita la web, y entonces la pantalla que existe para reconocer un proyecto de un vistazo enseña justo la versión que ya no es. */ .proycard { border: 1px solid var(--b1); border-radius: var(--r3); background: var(--s1); overflow: hidden; display: flex; flex-direction: column; cursor: pointer; animation: aparece 220ms var(--curva) both; transition: all var(--tx-fast); } .proycard:hover { border-color: var(--b3); transform: translateY(-1px); box-shadow: var(--e2); } .proycard.viva { border-color: color-mix(in srgb, var(--morado) 50%, var(--b2)); } .pc-mini { position: relative; height: 138px; background: var(--s2); overflow: hidden; border-bottom: 1px solid var(--b1); } .pc-mini iframe { width: 400%; height: 400%; border: 0; transform: scale(.25); transform-origin: 0 0; pointer-events: none; background: var(--papel); } .pc-vacia { position: absolute; inset: 0; display: grid; place-items: center; color: var(--t4); } .pc-viva { position: absolute; top: 7px; right: 7px; font-size: 9px; font-weight: 700; letter-spacing: .08em; padding: 3px 7px; border-radius: 999px; color: var(--sobre-color); background: color-mix(in srgb, var(--morado) 88%, transparent); } .pc-b { padding: var(--sp3); display: flex; flex-direction: column; gap: 2px; } .pc-h { display: flex; align-items: center; gap: 8px; } .pc-n { font-size: var(--fz-3); font-weight: 650; color: var(--t1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pc-m { display: flex; align-items: baseline; gap: 5px; margin-top: 4px; font-size: var(--fz-1); color: var(--t3); flex-wrap: wrap; } .pc-m b { font-size: 17px; font-weight: 700; color: var(--t1); } .pc-m .sep { color: var(--t4); } .pc-a { display: flex; gap: 6px; margin-top: 10px; } .p-carpetas { margin-top: var(--sp3); } /* ═══ 14 · MISIONES ══════════════════════════════════════════════════════════ */ #pane-misiones .mi-lista { padding: var(--sp4) var(--sp6) var(--sp6); } .mi-viva { border: 1px solid var(--b2); border-radius: var(--r3); background: var(--s1); padding: var(--sp3); margin-bottom: var(--sp4); } .mi-vh { display: flex; align-items: center; gap: var(--sp2); margin-bottom: var(--sp2); font-size: var(--fz-3); } .mi-vh .ees { margin-left: 0; } .mi-vh .btn { margin-left: auto; } .mi-pasos { display: flex; flex-direction: column; gap: 1px; } .mp { display: flex; align-items: baseline; gap: var(--sp2); padding: 4px 6px; border-radius: var(--r1); font-size: var(--fz-2); } .mp:nth-child(odd) { background: var(--s0); } .mp.mal .f { color: var(--rojo); } .mp .f { min-width: 96px; flex-shrink: 0; color: var(--t2); font-weight: 600; } .mp .d { flex: 1; color: var(--t3); } .mp .h { font-family: var(--mono); font-size: var(--fz-1); color: var(--t4); } .mi-f { display: flex; align-items: center; gap: var(--sp3); padding: 9px var(--sp2); border-bottom: 1px solid var(--b1); font-size: var(--fz-2); } .mi-f .e { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--t4); } .mi-f .e.ok { background: var(--verde); } .mi-f .e.rev { background: var(--ambar); } .mi-f .e.no { background: var(--rojo); } .mi-f .t { font-weight: 600; color: var(--t1); min-width: 150px; } .mi-f .s { flex: 1; color: var(--t3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mi-f .n, .mi-f .c { font-family: var(--mono); font-size: var(--fz-1); color: var(--t4); flex-shrink: 0; } /* ═══ 15 · HERRAMIENTAS ══════════════════════════════════════════════════════ */ .he-sec { padding: var(--sp4) var(--sp6) 0; } .he-sec:last-child { padding-bottom: var(--sp6); } .he-rejilla { display: grid; gap: var(--sp2); margin-top: var(--sp2); grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); } .he-p, .he-t { text-align: left; border: 1px solid var(--b1); border-radius: var(--r2); background: var(--s1); padding: var(--sp3); display: flex; flex-direction: column; gap: 3px; cursor: pointer; transition: all var(--tx-fast); } .he-p:hover, .he-t:hover { border-color: var(--b3); background: var(--s2); } .he-p .i { color: var(--dorado); margin-bottom: 3px; } .he-p b, .he-t b { font-size: var(--fz-2); font-weight: 650; color: var(--t1); } .he-p span, .he-t span { font-size: var(--fz-1); color: var(--t3); } .he-t { border-left: 2px solid var(--verde); } .he-t.r-medium { border-left-color: var(--ambar); } .he-t.r-high { border-left-color: var(--rojo); } .he-t .he-m { color: var(--t4); font-family: var(--mono); margin-top: 3px; } /* ═══ 16 · AJUSTES ═══════════════════════════════════════════════════════════ Una fila = un ajuste: qué es a la izquierda, el mando a la derecha. Todos los mandos existían ya; lo que no existía era poder encontrarlos. */ #aj-cuerpo { padding: var(--sp4) var(--sp6) var(--sp6); max-width: 900px; } .aj-s { margin-bottom: var(--sp5); } .aj-sh { display: flex; align-items: center; gap: var(--sp2); color: var(--t2); font-size: var(--fz-4); font-weight: 620; padding-bottom: var(--sp2); border-bottom: 1px solid var(--b1); margin-bottom: var(--sp1); } .aj-sh .ic-svg { color: var(--dorado); } .aj-f { display: flex; align-items: center; gap: var(--sp4); padding: var(--sp3) 0; border-bottom: 1px solid var(--b1); } .aj-f:last-child { border-bottom: none; } .aj-t { flex: 1; min-width: 0; } .aj-t b { display: block; font-size: var(--fz-3); font-weight: 600; color: var(--t1); } .aj-t span { display: block; font-size: var(--fz-2); color: var(--t3); margin-top: 2px; line-height: var(--lh-normal); } .aj-m { display: flex; align-items: center; gap: var(--sp2); flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; } .aj-m code { font-family: var(--mono); font-size: var(--fz-1); color: var(--t3); background: var(--s2); padding: 4px 7px; border-radius: var(--r1); } .aj-nota { font-size: var(--fz-2); color: var(--t3); } .seg.mini button { font-size: var(--fz-1); padding: 0 8px; } /* ═══ 17 · CENTRO DE IA — el gasto, en el escenario ══════════════════════════ */ #m-barra { display: flex; align-items: flex-end; gap: var(--sp5); margin-top: var(--sp4); flex-wrap: wrap; } .mb-g label { display: block; font-size: var(--rotulo-tam); font-weight: var(--rotulo-peso); letter-spacing: var(--rotulo-esp); text-transform: uppercase; color: var(--t4); margin-bottom: 5px; } .mb-g .v { font-size: var(--fz-5); font-weight: 700; color: var(--t1); font-variant-numeric: tabular-nums; } /* ═══ 18 · POR DÓNDE VA ══════════════════════════════════════════════════════ Seis palabras y una línea. Sólo aparece mientras se trabaja: un indicador de progreso permanente en reposo es ruido que se aprende a no mirar. */ #fases { display: none; flex-shrink: 0; padding: var(--sp2) var(--sp3); border-bottom: 1px solid var(--b1); background: var(--s0); } #fases.on { display: block; animation: aparece 200ms var(--curva) both; } .fs-fila { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; } .fs { display: flex; align-items: center; gap: 4px; font-size: var(--fz-1); color: var(--t4); padding: 2px 5px; border-radius: var(--r1); } .fs .pt { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .5; } .fs.hecha { color: var(--verde); } .fs.ahora { color: var(--t1); background: var(--s2); font-weight: 600; } .fs.ahora .pt { background: var(--morado); animation: latido 1.1s ease-in-out infinite; } @keyframes latido { 0%,100% { opacity: .35; transform: scale(1); } 50% { opacity: 1; transform: scale(1.5); } } .fs-det { margin-top: 4px; font-size: var(--fz-1); color: var(--t4); background: none; border: none; cursor: pointer; padding: 0; } .fs-det:hover { color: var(--t2); text-decoration: underline; } .fs-log { display: none; margin-top: 5px; max-height: 168px; overflow-y: auto; border-top: 1px solid var(--b1); padding-top: 5px; } .fl { font-size: var(--fz-1); color: var(--t3); padding: 2px 0; line-height: var(--lh-normal); } .fl b { color: var(--t2); margin-right: 5px; } .fl.mal b { color: var(--rojo); } /* La miniatura de Mis webs. La tarjeta tiene relleno, y una vista que respeta ese relleno se lee como una imagen pegada dentro de una ficha en vez de como la web que es: sale a sangre, con margen negativo. */ .wc-mini { margin: -14px -15px 10px; height: 132px; overflow: hidden; background: var(--s2); border-bottom: 1px solid var(--b1); border-radius: var(--r3) var(--r3) 0 0; } .wc-mini iframe { width: 400%; height: 400%; border: 0; transform: scale(.25); transform-origin: 0 0; pointer-events: none; background: var(--papel); } /* ═══ 19 · LOS AJUSTES FINOS DEL MODO Y DE CONVERSAR ══════════════════════════ 1 · EL DOCK NO EXISTE EN MODO NORMAL. Plegado deja su fila de pestañas —Terminal, Consola, Problemas, Actividad— en el borde inferior: cuatro palabras de programador debajo de una pantalla que va de hacer webs. O está, o no está. */ body:not(.avanzado) #dock, body:not(.avanzado) #g-dock { display: none; } /* 2 · EN CONVERSAR NO SE REPITE LA MISMA WEB TRES VECES. La barra del panel () ya dice cuál es, cómo quedó y la abre; la barra interna del chat decía exactamente lo mismo justo debajo. Se queda la de arriba, que es la que además tiene el conmutador. */ body.chat-centro #chweb { display: none; } /* La cabecera del chat pierde el nombre repetido pero mantiene sus botones: historial, conversación nueva y opciones son propios del chat. */ body.chat-centro #chh { background: transparent; border-bottom: 1px solid var(--b1); } /* 3 · EL HILO, LEGIBLE A LO ANCHO. Una conversación a 1.100 px de ancho da renglones de 180 caracteres: se lee peor que en la columna estrecha de la que venía. La medida se le pone AL HILO, con relleno — poniéndosela a cada mensaje, un `margin:auto` centraba las burbujas cortas en mitad de la columna y el hilo se leía en zigzag. */ body.chat-centro #thread { padding-left: max(var(--sp3), calc((100% - 900px) / 2)); padding-right: max(var(--sp3), calc((100% - 900px) / 2)); } body.chat-centro #composer { padding-left: max(var(--sp3), calc((100% - 900px) / 2)); padding-right: max(var(--sp3), calc((100% - 900px) / 2)); } /* 4 · UNA CONVERSACIÓN SIN WEB NO GASTA UNA MINIATURA. */ .proycard.seca { justify-content: flex-start; } .proycard.seca .pc-b { padding-top: var(--sp4); } .pc-aqui { font-size: 9px; font-weight: 700; letter-spacing: .08em; padding: 2px 6px; border-radius: 999px; color: var(--sobre-color); flex-shrink: 0; background: color-mix(in srgb, var(--morado) 88%, transparent); } /* Las tarjetas de proyecto no miden lo mismo —unas llevan miniatura y otras no—, y una rejilla estira toda la fila a la altura de la más alta: tres charlas cortas al lado de una web salían con 140 px de aire debajo. */ #p-grid { align-items: start; } /* ═══ 20 · SOBRE QUÉ TRABAJAS, EN CONVERSAR ══════════════════════════════════ El slug era un identificador de carpeta puesto donde se lee el nombre del proyecto. Ahora se lee lo que se pidió, con su nota y su estado. */ #cv-proy { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: var(--fz-2); color: var(--t2); } #cv-proy b { font-weight: 600; color: var(--t1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 42vw; } #cv-proy .p { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--t4); } #cv-proy.ok .p { background: var(--verde); } #cv-proy.rev .p { background: var(--ambar); } #cv-proy .q { font-family: var(--mono); font-size: var(--fz-1); color: var(--t3); } #cv-proy .e { font-size: var(--fz-1); color: var(--t3); } #cv-proy.ok .e { color: var(--verde); } #cv-proy.rev .e { color: var(--ambar); } /* ═══ 21 · ARCHIVOS — EL MATERIAL DE LA WEB ══════════════════════════════════ */ #ar-cuerpo { padding: var(--sp4) var(--sp6) var(--sp6); } .ar-soltar { border: 1.5px dashed transparent; border-radius: var(--r3); transition: all var(--tx-fast); min-height: 220px; } .ar-soltar.encima { border-color: var(--morado); background: color-mix(in srgb, var(--morado) 7%, transparent); } .ar-fam { margin-bottom: var(--sp4); } .ar-fam .sh { display: flex; align-items: center; gap: 7px; } .ar-fam .sh .n { color: var(--t4); font-family: var(--mono); } .ar-rejilla { display: grid; gap: var(--sp2); margin-top: var(--sp2); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .ar-f { border: 1px solid var(--b1); border-radius: var(--r2); background: var(--s1); padding: var(--sp2); display: flex; flex-direction: column; gap: 2px; position: relative; transition: all var(--tx-fast); } .ar-f:hover { border-color: var(--b3); } .ar-f.dup { opacity: .6; } .ar-mini { height: 54px; display: grid; place-items: center; color: var(--t4); background: var(--s2); border-radius: var(--r1); margin-bottom: 5px; } .ar-n { font-size: var(--fz-2); color: var(--t1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ar-m { font-size: var(--fz-1); color: var(--t4); font-family: var(--mono); } .ar-usar { margin-top: 6px; display: flex; align-items: center; justify-content: center; gap: 5px; height: 24px; border-radius: var(--r1); font-size: var(--fz-1); color: var(--t3); background: var(--s2); border: 1px solid var(--b1); cursor: pointer; transition: all var(--tx-fast); } .ar-usar:hover { color: var(--morado2); border-color: var(--morado); } /* ═══ 22 · INVESTIGAR ════════════════════════════════════════════════════════ Tres secciones y una regla de lectura: lo que SE VIO y lo que SE SUPONE nunca comparten estilo. Un hecho observado y una interpretación pintados igual son la manera de que se lean igual. */ #in-cuerpo { padding: var(--sp4) var(--sp6) var(--sp6); max-width: 1000px; } .in-sec { margin-bottom: var(--sp5); } .in-vacia { font-size: var(--fz-2); color: var(--t3); padding: var(--sp3) 0; } .in-r { display: grid; grid-template-columns: 10px 1fr auto; gap: var(--sp2) var(--sp3); align-items: baseline; padding: var(--sp2) 0; border-bottom: 1px solid var(--b1); } .in-r .p { width: 7px; height: 7px; border-radius: 50%; background: var(--verde); } .in-r.mal .p { background: var(--ambar); } .in-r .t { display: flex; align-items: baseline; gap: var(--sp2); min-width: 0; } .in-r .t b { font-size: var(--fz-2); color: var(--t1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .in-r .t .o { font-size: var(--fz-1); color: var(--t4); flex-shrink: 0; } .in-r .d { grid-column: 2 / -1; font-size: var(--fz-1); color: var(--t3); } .in-r .d .no { color: var(--ambar); } .in-r .n { font-family: var(--mono); font-size: var(--fz-1); color: var(--t4); } .in-i { border: 1px solid var(--b1); border-left: 2px solid var(--verde); border-radius: var(--r2); background: var(--s1); padding: var(--sp3); margin-bottom: var(--sp2); } .in-i.no { border-left-color: var(--t4); opacity: .78; } .in-i .h { display: flex; align-items: baseline; gap: var(--sp2); flex-wrap: wrap; } .in-i .h b { font-size: var(--fz-3); color: var(--t1); } .in-i .cat, .in-i .mo { font-size: var(--fz-1); color: var(--t4); font-family: var(--mono); } .in-i .ev, .in-i .inf { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; font-size: var(--fz-2); } .in-i .k { font-weight: 600; flex-shrink: 0; } /* LO VISTO en verde y en redonda; LO SUPUESTO en gris y en cursiva. */ .in-i .ev .k { color: var(--verde); } .in-i .ev span:not(.k) { color: var(--t2); } .in-i .inf .k { color: var(--t4); } .in-i .inf span:not(.k) { color: var(--t3); font-style: italic; } /* LO LEÍDO U OÍDO no es lo MEDIDO: viene del archivo igual, pero lo ha interpretado un lector que se equivoca (el OCR leyó «Logros» donde ponía «Logroño»). Se distingue en pantalla, no sólo en el JSON. */ .in-i .ev.obs .k { color: var(--amarillo); } .in-i .ev.obs span:not(.k) { color: var(--t2); } .in-i .inf.hip .k { color: var(--ambar); } .in-i .falta { margin-top: 6px; font-size: var(--fz-1); color: var(--ambar); } /* LOS CRITERIOS DE ACEPTACIÓN de la idea: qué tendría que verse. Los que no se pueden medir salen tachados y con el porqué en el `title`. */ .in-i .ac { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; font-size: var(--fz-2); } .in-i .ac .k { color: var(--t3); font-weight: 600; } .in-i .ac span:not(.k) { color: var(--t2); border: 1px solid var(--b1); border-radius: var(--r1); padding: 1px 6px; } .in-i .ac span.nom { color: var(--t4); text-decoration: line-through; border-style: dashed; } .in-e { border: 1px solid var(--b1); border-radius: var(--r2); background: var(--s1); padding: var(--sp3); margin-bottom: var(--sp2); } .in-e .h { display: flex; align-items: center; gap: var(--sp2); } .in-e .h b { font-size: var(--fz-3); color: var(--t1); } .in-e .m { display: flex; align-items: baseline; gap: 5px; margin-top: 4px; font-size: var(--fz-1); color: var(--t3); } .in-e .m .q { font-size: 19px; font-weight: 700; color: var(--t1); } .in-e .mot { margin: 6px 0 0 16px; font-size: var(--fz-1); color: var(--t3); } .in-e .a { display: flex; gap: 6px; margin-top: 10px; } /* LAS DOS NOTAS, SEPARADAS: «abre» y «reproduce». Una sola cifra las confundía, y son la pregunta que hay que poder contestar por separado. */ .in-e .m .par { display: inline-flex; align-items: baseline; gap: 3px; } .in-e .m .par .k { color: var(--t4); letter-spacing: .04em; } .in-e .m .par.sin { color: var(--ambar); font-style: italic; } /* CADA CRITERIO CON LO QUE EL NAVEGADOR MIDIÓ. Sin esto la nota hay que creérsela; con esto se puede comprobar. */ .in-e .in-cr { margin-top: 8px; display: grid; gap: 3px; font-size: var(--fz-1); } .in-e .cr { display: flex; gap: 7px; align-items: baseline; border-top: 1px solid var(--b1); padding-top: 3px; } .in-e .cr .t { flex-shrink: 0; } .in-e .cr.ok .t { color: var(--verde); } .in-e .cr.no .t { color: var(--rojo); } /* El tercer estado: se midió y no se pudo concluir. Ni verde ni rojo. */ .in-e .cr.rev .t { color: var(--ambar); } .in-e .cr .q { color: var(--t2); } .in-e .cr .i { color: var(--t4); font-family: var(--mono); } .in-e .cr .d { color: var(--t3); flex: 1; min-width: 0; } /* La tarjeta del hilo: cuatro números y una puerta. */ .inv-card { border: 1px solid var(--b2); border-radius: var(--r2); background: var(--s0); padding: var(--sp3); margin-bottom: var(--sp2); } .inv-card .ic { display: flex; align-items: center; gap: 6px; color: var(--dorado); font-size: var(--fz-1); letter-spacing: .06em; } .inv-card .nums { display: flex; gap: var(--sp3); flex-wrap: wrap; margin: 8px 0; } .inv-card .n { display: flex; align-items: baseline; gap: 4px; font-size: var(--fz-1); color: var(--t3); } .inv-card .n b { font-size: 17px; color: var(--t1); } /* UNA LÍNEA POR FUENTE. Cada una identificada, con lo que salió de ella y lo que no se pudo. Con varios enlaces en un mensaje es la diferencia entre «5 ideas» y «5 ideas, y de cuál sale cada una». */ .inv-card .inv-f { display: grid; gap: 4px; margin: 8px 0; } .inv-card .fu { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: var(--fz-1); padding: 5px 8px; border-radius: var(--r1); background: var(--s1); border-left: 2px solid var(--verde); } .inv-card .fu.mal { border-left-color: var(--ambar); } .inv-card .fu .ti { color: var(--t1); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 32ch; } .inv-card .fu .q { color: var(--t3); } .inv-card .fu .n { color: var(--t2); } .inv-card .fu .no { color: var(--ambar); flex-basis: 100%; } /* LA CADENA DE EVIDENCIA de una idea, plegada: es la respuesta a «¿de dónde lo sacas?», no lo primero que hay que leer. */ .in-cad { margin-top: 8px; font-size: var(--fz-1); } .in-cad > summary { cursor: pointer; color: var(--t3); } .in-cad .cd { display: flex; gap: 8px; padding: 3px 0; align-items: baseline; border-top: 1px solid var(--b1); } .in-cad .cd .k { color: var(--t3); min-width: 72px; letter-spacing: .04em; } .in-cad .cd .v { color: var(--t1); flex: 1; min-width: 0; } .in-cad .cd .dt { color: var(--t3); font-size: var(--fz-1); } .in-cad .cd.inferido .v, .in-cad .cd.hipotesis .v { color: var(--t2); font-style: italic; } /* ═══ LO TÉCNICO, FUERA DE LA VISTA (2026-10-07) ═════════════════════════════ El usuario: «no quiero que haya nada inútil o algo que no funcione; prefiero que ese botón no esté». Para programar está Claude Code; aquí se hacen webs, se investigan reels y se llevan salones. Quedan escondidos —el código sigue, nadie tropieza con ello—: · el proyecto abierto y la paleta «Buscar o ir a…» (abrían archivos del repositorio y acciones de ingeniería); · el selector de IA y los medidores de RAM/CPU/estado; · los atajos del chat y «git status», «tests», «Comparar IAs»; · la barra de abajo entera: rama de git, disposición de ventanas, y tema y densidad repetidos de Ajustes. */ #c-proj, #kbar, #c-ai, #vitals, #atajos, .cmini, #cmp-sel { display: none !important; } /* Del chat: el nombre del modelo de IA y «mover, desacoplar o plegar» (la disposición de las ventanas). Y la fila de pestañas de archivos abiertos del repositorio, que en la entrada era una franja vacía. */ #chh-ai, #chat-opt, #tabs { display: none !important; } #status { display: none !important; } #app { grid-template-rows: var(--h-titulo) 1fr 0 !important; } /* ═══ LA ENTRADA: ¿QUÉ QUIERES HACER? ═══════════════════════════════════════ */ .elegir { max-width: 980px; margin: 0 auto; padding: 56px var(--sp6) var(--sp6); } .elegir h1 { font-size: var(--fz-6); font-weight: 650; letter-spacing: -.02em; color: var(--t1); margin: 0; } .elegir .sub { color: var(--t3); margin: 6px 0 var(--sp6); font-size: var(--fz-3); } .elegir-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp4); } @media (max-width: 760px) { .elegir-g { grid-template-columns: 1fr; } } .opcion { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 10px; min-height: 168px; padding: var(--sp5); border-radius: var(--r3); background: var(--s1); border: 1px solid var(--b1); transition: border-color var(--tx), box-shadow var(--tx), transform var(--tx); } .opcion:hover { border-color: var(--b3); box-shadow: var(--e1); transform: translateY(-2px); } .opcion:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; } .opcion .op-ico { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--s3); color: var(--t1); } .opcion .op-ico .ic-svg { width: 20px; height: 20px; } .opcion b { font-size: var(--fz-4); color: var(--t1); font-weight: 600; } .opcion .op-de { color: var(--t2); font-size: var(--fz-2); line-height: 1.45; } .opcion .op-dato { margin-top: auto; color: var(--t3); font-size: var(--fz-1); } /* ═══ SALONES ════════════════════════════════════════════════════════════════ */ .sl-lista { padding: var(--sp4) 34px 34px; display: grid; gap: var(--sp3); } .sl-f { display: flex; align-items: center; gap: var(--sp4); padding: var(--sp4); background: var(--s1); border: 1px solid var(--b1); border-radius: var(--r3); } .sl-f .sl-n { flex: 1; min-width: 0; } .sl-f .sl-n b { color: var(--t1); font-size: var(--fz-3); } .sl-f .sl-n div { color: var(--t3); font-size: var(--fz-2); margin-top: 3px; } .sl-f .sl-a { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } /* La caja de pegar un enlace, en la cabecera de Investigar. Reutiliza `.hc-caja` (la caja de la entrada antigua) y sólo le da sitio. */ #in-pegar { margin-top: var(--sp4); max-width: 760px; } #in-pegar button { width: auto; height: 34px; padding: 0 14px; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: var(--fz-2); }