/* ════════════════════════════════════════════════════════════ STARA · stara.css · v72.0.7 · Tanda 2 (anchos Estructura): .estela-panel-struct (Etapas) 280→340px / min 200→240; .estela-panel-brujula 460→540px / min 380→440 — más aire en los paneles laterales de Estela>Estructura. Acompaña app v73.7.3 (resto de Tanda 2 en HTML: logo→landing, Biblia abre en Brújula, nombres de tabs simplificados, anchos bib-p1/bib-p2-brujula inline, overlap testigo Campo). · base v72.0.6 · Espora: botón #espora-campobtn (toggle prominente del campo de esporas, junto a la barra de modos). · base v72.0.5 · Espora: barra selectora de modo (#espora-modebar + .espora-modebtn, segmented control Libre/Hemisferios/Árbol centrado arriba del canvas). · base v72.0.4 · Espora: ficha flotante ensanchada (#espora-float-card 248→340px, anclada a la derecha right:16) para los textos largos del Norte y de las fichas de personaje con todos sus nodes. · base v72.0.3 · Espora (panel lateral): sidebar 210→264px con scroll real (flex-shrink:0 en .espora-cat-body + min-height:0 en .espora-sidebar; .espora-cat-body.open 1200→4000px para no recortar listas largas como 24 personajes/27 entornos). .espora-infobar y #espora-float-card reajustados al nuevo ancho (right 210/218 → 264/272, card 230→248px) + float-card con max-height:calc(100% - 96px)+overflow para fichas largas (personaje con todos sus nodes). · base v72.0.2 · Limpiezas CSS: (1) eliminada regla muerta .estela-loading (sin uso en app/index/js; .bub-anim + @keyframes bub-float SÍ se usan, se conservan). (2) Fix desbalance de llaves (-1): se había perdido el selector base «.estela-entity-card {» — sus declaraciones (border/padding/cursor/transition) quedaban huérfanas tras el } de .estela-entity-empty y el navegador las descartaba (tarjetas de entidad sin estilo base); restaurado. (3) Herencia de tema en modales colgados de body: los 7 bloques de variables de tema (#stara-app[data-theme=X]) ahora también aplican a :root:has(#stara-app[data-theme=X]), de modo que los overlays/modales appendeados a document.body heredan las variables del tema activo (antes caían siempre a los defaults nebula de :root → rotos en aurora/temas claros). Sin mover nodos al DOM de #stara-app (evita romper position:fixed). · base v72.0.1 · CSS compartido (bloque ) — (header alineado: el archivo del proyecto venía nombrado v72_0_0 con header interno v70.3.4) Extraído de app.html / index.html (Paso A). v70.0.1: + .bib-cat-active-brujula (estado activo de la subpestaña Brújula, Plan I/I3a). v70.2.1 (QA H15): .exc-tab-label neutro por defecto; rojo solo con .exc-tab.has-exc. v70.3.1: + bloque .brj-* (migración de estilos inline de Brújula desde app v71.10.1; colores data-driven vía --brj-*). v70.3.2: + --azul/--azul2 (estaban referenciados sin definir) + .cta-azul/.estela-eter-ttl (pulido modal). v70.3.3: + overlay .holly-thinking-* (carga con blur) + variantes #estela-gen-btn prominente/regen. v70.3.4: + .burbujas-ver* (chips de versiones del borrador). ════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --azul: #8fc1ee; --azul2: #3a6ea5; --bg: #0f0e14; --bg2: #151320; --bg3: #181625; --bg4: #1e1b2e; --border: #2a2740; --border2: #3d3760; --purple: #7F77DD; --purple2: #534AB7; --purple3: #2a2553; --purple4: #c3b8ff; --green: #1D9E75; --green2: #5DCAA5; --amber: #EF9F27; --amber2: #FAC775; --magma: #ff3c1f; --magma2: #ff6b3d; --red: #c0392b; --red2: #e74c3c; --text: #e2e0ee; --text2: #c8c4dc; --text3: #9996b0; --text4: #6b6880; --text5: #4e4b65; --scene-bg: #13111e; --scene-border:#312e50; --node-r: 8px; } /* Theme overrides: all vars on the app element */ #stara-app { --node-r: 8px; } html, body { height: 100%; background: #09080f; font-family: Georgia, serif; } #stara-app[data-theme="aurora"] ~ body, body:has(#stara-app[data-theme="aurora"]) { background: #e8eaed; } #stara-app[data-theme="codex"] ~ body, body:has(#stara-app[data-theme="codex"]) { background: #090805; } #stara-app[data-theme="obsidian"] ~ body, body:has(#stara-app[data-theme="obsidian"]) { background: #000; } #stara-app[data-theme="sangre"] ~ body, body:has(#stara-app[data-theme="sangre"]) { background: #0a0606; } #stara-app[data-theme="olivetti"] ~ body, body:has(#stara-app[data-theme="olivetti"]) { background: #080705; } #stara-app[data-theme="espacial"] ~ body, body:has(#stara-app[data-theme="espacial"]) { background: #02010a; } .app { display: flex; flex-direction: column; width: 100vw; height: 100vh; background: var(--bg); color: var(--text); overflow: hidden; } /* ══════════════════ TOPBAR ══════════════════ */ .topbar { display: flex; align-items: center; gap: 0; background: var(--bg2); border-bottom: 0.5px solid var(--border); padding: 0 0 0 16px; height: 44px; flex-shrink: 0; position: relative; } /* Logo */ .logo { display: flex; align-items: center; gap: 9px; margin-right: 20px; user-select: none; cursor: default; flex-shrink: 0; } .logo-svg { width: 26px; height: 26px; flex-shrink: 0; } .logo-text { font-size: 12px; font-weight: 700; color: #c3b8ff; letter-spacing: .2em; text-transform: uppercase; font-family: Georgia, serif; } /* Tab group */ .tb-tabs { display: flex; align-items: stretch; gap: 0; height: 100%; border-right: 0.5px solid var(--border); padding-right: 14px; margin-right: 12px; } .tb-btn { display: flex; align-items: center; gap: 0; font-size: 11px; padding: 0 13px; height: 100%; border: none; background: transparent !important; color: var(--text4); cursor: pointer; font-family: Georgia, serif; transition: color .2s; position: relative; white-space: nowrap; overflow: hidden; } .tb-btn::after { content: ''; position: absolute; bottom: 0; left: 13px; right: 13px; height: 2px; border-radius: 2px 2px 0 0; background: var(--purple); opacity: 0; transition: opacity .2s; } .tb-btn:hover { color: var(--text2); } .tb-btn.on { color: var(--purple4); } .tb-btn.on::after { opacity: 1; } /* Nombre largo: mismo color violeta que el nombre corto activo */ .tab-long { display: inline-block; max-width: 0; overflow: hidden; opacity: 0; color: var(--purple4); transition: max-width .35s ease, opacity .28s ease, margin-left .35s ease; margin-left: 0; vertical-align: middle; } /* Descriptor: gris apagado */ .tab-desc { display: inline-block; max-width: 0; overflow: hidden; opacity: 0; font-size: 10px; color: var(--text5); font-style: italic; transition: max-width .35s ease, opacity .28s ease, margin-left .35s ease; margin-left: 0; vertical-align: middle; } /* Al activarse: expandir ambos */ .tb-btn.on .tab-long { max-width: 220px; opacity: 1; margin-left: 0; } .tb-btn.on .tab-desc { max-width: 220px; opacity: 1; margin-left: 6px; } /* tbf-* styles used in bosque-topbar filter row */ .tbf-label { font-size: 9px; color: var(--text5); letter-spacing:.04em; flex-shrink:0; } .tbf-select { background: var(--bg3); border: 0.5px solid var(--border2); border-radius: 5px; color: var(--text2); font-size: 10px; padding: 2px 6px; outline: none; cursor: pointer; max-width: 120px; font-family: Georgia, serif; } .tbf-btn { background: transparent !important; border: 0.5px solid var(--border); border-radius: 5px; color: var(--text4); font-size: 9px; padding: 2px 8px; cursor: pointer; font-family: Georgia, serif; transition: color .12s, border-color .12s; white-space: nowrap; } .tbf-btn:hover { color: var(--text2); border-color: var(--border2); } /* Right actions */ .tb-actions { display: flex; align-items: center; gap: 5px; margin-left: auto; padding: 0 10px; height: 100%; } .tb-project { font-size: 11px; padding: 4px 12px; background: var(--purple3); color: var(--purple4); border-radius: 5px; border: 0.5px solid var(--purple2); user-select: none; white-space: nowrap; } .tb-action-btn { display: flex; align-items: center; gap: 4px; font-size: 10px; padding: 3px 9px; border-radius: 5px; border: 0.5px solid var(--border); background: transparent !important; color: var(--text5); cursor: pointer; font-family: Georgia, serif; transition: color .12s, border-color .12s; white-space: nowrap; } .tb-action-btn:hover { color: var(--text3); border-color: var(--border2); } .settings-gear-btn { width: 28px; height: 28px; border-radius: 6px; background: transparent !important; border: 0.5px solid var(--border); color: var(--text5); cursor: pointer; font-size: 13px; display: flex; align-items: center; justify-content: center; transition: color .12s, border-color .12s; } .settings-gear-btn:hover { color: var(--text3); border-color: var(--border2); } /* ══════════════════ TAB VIEWS ══════════════════ */ .tab-view { display: none; flex: 1; overflow: hidden; } .tab-view.active { display: flex; } /* ══════════════════════════════════════════════ EDITOR — PANEL BASE ══════════════════════════════════════════════ */ .panel { display: flex; flex-direction: column; overflow: hidden; min-width: 80px; border-right: 0.5px solid var(--border); } .panel:last-child { border-right: none; } .panel-hdr { flex-shrink: 0; padding: 7px 10px; background: var(--bg2); border-bottom: 0.5px solid var(--border); font-size: 11px; color: var(--purple); font-weight: 600; display: flex; align-items: center; gap: 6px; letter-spacing: .02em; user-select: none; } .panel-body { flex: 1; overflow-y: auto; } .panel-body::-webkit-scrollbar { width: 3px; } .panel-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; } /* RESIZER */ .resizer { width: 5px; cursor: col-resize; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .rhandle { width: 3px; height: 44px; background: var(--purple2); border-radius: 2px; opacity: 0; transition: opacity .15s; pointer-events: none; } .resizer:hover .rhandle, .resizer.dragging .rhandle { opacity: 1; } /* PANEL 1 — BINDER */ #p1 { width: 172px; } .p1-wrap { flex: 1; display: flex; flex-direction: column; overflow: hidden; } .ms-section { flex: 1; overflow-y: auto; min-height: 0; } .ms-section::-webkit-scrollbar { width: 3px; } .ms-section::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; } .univ-section { flex-shrink: 0; border-top: 0.5px solid var(--border); margin: 0 10px; padding: 6px 0 10px; } .sec-label { font-size: 10px; letter-spacing: .08em; color: var(--text5); padding: 7px 10px 4px; text-transform: uppercase; user-select: none; } .part-row { display: flex; align-items: center; gap: 5px; padding: 5px 10px; cursor: pointer; user-select: none; } .part-row:hover { background: var(--bg3); } .part-row.active { background: var(--bg4); } .part-chevron { font-size: 12px; color: var(--text5); transition: transform .15s; flex-shrink: 0; } .part-chevron.open { transform: rotate(90deg); } .part-name { font-size: 11px; color: var(--text3); flex: 1; } .part-row.active .part-name { color: var(--purple4); } .part-count { font-size: 10px; color: var(--text5); } .chap-row { display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 22px; cursor: pointer; user-select: none; } .chap-row:hover { background: var(--bg3); } .chap-row.active { background: var(--bg4); } .chap-name { font-size: 11px; color: var(--text4); flex: 1; } .chap-row.active .chap-name { color: var(--purple4); } .dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; } .dot-g { background: var(--green); } .dot-a { background: var(--amber); } .dot-e { border: 0.5px solid #3a3750; } .univ-item { display: flex; align-items: center; gap: 7px; padding: 5px 10px; font-size: 12px; color: var(--text3); cursor: pointer; border-radius: 5px; user-select: none; } .univ-item:hover { background: var(--bg3); color: var(--text); } .univ-item.active { background: var(--bg4); color: var(--purple4); } /* PANEL 2 — EVENTOS */ #p2 { width: 210px; } .scene-block { margin: 8px 8px 0; border: 0.5px solid var(--scene-border); border-radius: 10px; background: var(--scene-bg); overflow: hidden; } .scene-header { display: flex; align-items: center; gap: 6px; padding: 7px 10px; background: #1a1830; border-bottom: 0.5px solid var(--scene-border); cursor: pointer; user-select: none; } .scene-header:hover { background: #1f1c38; } .scene-chevron { font-size: 12px; color: var(--text5); transition: transform .15s; flex-shrink: 0; } .scene-chevron.open { transform: rotate(90deg); } .scene-name { font-size: 12px; font-weight: 600; color: var(--purple4); flex: 1; } .scene-count { font-size: 10px; color: var(--text5); } .scene-actions { display: flex; gap: 3px; } .scene-act-btn { width: 18px; height: 18px; border-radius: 4px; background: transparent !important; border: 0.5px solid transparent; color: var(--text5); cursor: pointer; font-size: 11px; display: flex; align-items: center; justify-content: center; } .scene-act-btn:hover { background: var(--bg4); color: var(--purple4); border-color: var(--border2); } .scene-desc { padding: 5px 10px 6px; font-size: 10px; color: var(--text5); font-style: italic; line-height: 1.5; border-bottom: 0.5px solid var(--scene-border); } .scene-body { padding: 6px 0 4px; } .ev-card { border-radius: 7px; padding: 8px 10px; margin: 0 7px 6px; font-size: 11px; line-height: 1.5; position: relative; } .scene-body .ev-card { margin: 0 6px 5px; } .ev-key { background: #1a1730; border: 0.5px solid var(--border2); border-left: 2px solid var(--purple); } .ev-dial { background: #161425; border: 0.5px solid #2e2c45; border-left: 2px solid var(--green); } .ev-beat { background: #191520; border: 0.5px solid #2e2c3a; border-left: 2px solid var(--amber); } .ev-label { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 3px; display: flex; align-items: center; gap: 4px; } .ev-text { color: var(--text2); padding-right: 44px; } .ev-fid { position: absolute; top: 7px; right: 7px; background: var(--bg); border: 0.5px solid var(--border2); border-radius: 6px; padding: 2px 5px; display: flex; align-items: center; gap: 2px; } .ev-fid input { font-size: 12px; font-weight: 700; color: var(--purple4); background: transparent !important; border: none; outline: none; width: 28px; text-align: center; font-family: Georgia, serif; -webkit-user-select: text; user-select: text; } .ev-fid-lbl { font-size: 9px; color: var(--text5); } /* Numeración cascada del ítem */ .ev-cascade-num { font-size: 8.5px; color: var(--text5); font-family: monospace; background: var(--bg4); border: 0.5px solid var(--border); border-radius: 3px; padding: 0px 4px; margin-left: 5px; letter-spacing: .03em; vertical-align: middle; } /* Botón eliminar ítem — aparece en hover sobre la card */ .ev-del-btn { position: absolute; bottom: 7px; left: 7px; background: transparent !important; border: 0.5px solid transparent; border-radius: 4px; padding: 2px 4px; cursor: pointer; color: var(--text5); opacity: 0; transition: opacity .15s, color .15s, border-color .15s; line-height: 1; } .ev-card:hover .ev-del-btn { opacity: 1; } .ev-del-btn:hover { color: var(--red2); border-color: var(--red)44; background: var(--red)11; } .ev-chap-sep { font-size: 10px; color: var(--text5); padding: 8px 10px 2px; letter-spacing: .04em; } .add-btn { display: flex; align-items: center; gap: 5px; margin: 4px 8px 0; padding: 6px 8px; border: 0.5px dashed var(--border); border-radius: 7px; font-size: 11px; color: var(--text5); cursor: pointer; user-select: none; } .add-btn:hover { background: var(--bg3); color: var(--text3); border-color: var(--border2); } .fid-bar { flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-top: 0.5px solid var(--border); background: var(--bg2); } .fid-lbl { font-size: 10px; color: var(--text5); white-space: nowrap; } .fid-bar input { flex: 1; accent-color: var(--purple); } .fid-val { font-size: 10px; color: var(--purple4); min-width: 28px; text-align: right; } /* PANEL 3 — MANUSCRITO */ #p3 { flex: 1; min-width: 120px; position: relative; } .ms-hdr { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 7px 12px; background: var(--bg2); border-bottom: 0.5px solid var(--border); gap: 8px; } .ms-title { font-size: 13px; font-weight: 600; color: var(--text); flex-shrink: 0; } .ms-stats { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; } .badge { font-size: 10px; padding: 2px 7px; border-radius: 10px; border: 0.5px solid; white-space: nowrap; } .bw { background: #1a1730; border-color: var(--border2); color: var(--purple4); } .bh { background: #0f1e19; border-color: #1D5040; color: var(--green2); } .ba { background: #1e1a0f; border-color: #4a3a10; color: var(--amber); } .bf { background: #1c1528; border-color: #4a3a6a; color: #a899f5; } .fmt-bar { flex-shrink: 0; display: flex; align-items: center; gap: 2px; padding: 5px 8px; background: var(--bg2); border-bottom: 0.5px solid var(--border); overflow-x: auto; } .fmt-bar::-webkit-scrollbar { height: 0; } .fmt-sep { width: 0.5px; height: 14px; background: var(--border); margin: 0 4px; flex-shrink: 0; } .fmt-select { background: var(--bg3); border: 0.5px solid var(--border); border-radius: 4px; color: var(--text2); font-size: 11px; padding: 2px 4px; cursor: pointer; outline: none; height: 22px; font-family: Georgia, serif; } .fmt-btn { width: 22px; height: 22px; border-radius: 4px; background: transparent !important; border: 0.5px solid transparent; color: var(--text3); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; font-family: Georgia, serif; } .fmt-btn:hover { background: var(--bg4); color: var(--text); border-color: var(--border); } .fmt-btn.on { background: var(--purple3); color: var(--purple4); border-color: var(--purple2); } .fmt-num { width: 34px; height: 22px; background: var(--bg3); border: 0.5px solid var(--border); border-radius: 4px; color: var(--text2); font-size: 11px; text-align: center; outline: none; padding: 0 2px; font-family: Georgia, serif; -webkit-user-select: text; user-select: text; } .zoom-row { display: flex; align-items: center; gap: 3px; margin-left: auto; flex-shrink: 0; } .zoom-btn { width: 19px; height: 19px; border-radius: 4px; background: var(--bg3); border: 0.5px solid var(--border); color: var(--text3); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; user-select: none; } .zoom-btn:hover { background: var(--bg4); color: var(--text); } .zoom-val { font-size: 11px; color: var(--purple4); min-width: 36px; text-align: center; } .ms-body { flex: 1; overflow-y: auto; padding: 14px 16px; } .ms-body::-webkit-scrollbar { width: 3px; } .ms-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; } /* Scene section markers in prose editor */ .prose-scene-marker { display: block; margin: 20px 0 4px; padding: 4px 10px; border-radius: 5px; border: 0.5px dashed var(--border2); background: var(--bg3); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--purple4); user-select: none; pointer-events: none; font-family: Georgia, serif; } .prose-scene-marker:first-child { margin-top: 0; } .prose { line-height: 1.85; color: var(--text2); transform-origin: top left; outline: none; font-size: 13px; font-family: Garamond, Georgia, serif; } .prose p { margin-bottom: 11px; } /* Sync flash indicator */ .sync-flash { position: fixed; top: 48px; right: 14px; z-index: 1000; background: var(--purple3); border: 0.5px solid var(--purple2); border-radius: 6px; padding: 4px 10px; font-size: 10px; color: var(--purple4); opacity: 0; pointer-events: none; transition: opacity .3s; display: flex; align-items: center; gap: 5px; } .sync-flash.visible { opacity: 1; } .action-row { flex-shrink: 0; display: flex; gap: 7px; padding: 0 12px 10px; } .gen-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 6px; background: var(--purple3); border: 0.5px solid var(--purple2); border-radius: 8px; font-size: 11px; color: var(--purple4); cursor: pointer; font-family: Georgia, serif; white-space: nowrap; } .gen-btn:hover { background: #342d6a; } .crear-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 6px; background: #1c2a1e; border: 0.5px solid #2a5c30; border-radius: 8px; font-size: 11px; color: var(--green2); cursor: pointer; font-family: Georgia, serif; white-space: nowrap; } .crear-btn:hover { background: #1e3822; } .crear-overlay { display: none; position: absolute; bottom: 52px; left: 12px; right: 12px; z-index: 30; background: #13111f; border: 1px solid #2a5c30; border-radius: 14px; overflow: hidden; box-shadow: 0 10px 40px #00000099; } .crear-overlay.visible { display: block; } /* v54.2.1 — Overlay global de proceso (vectorización / generación) */ #stara-proc-overlay { display: none; position: fixed; inset: 0; z-index: 9998; background: #0a0812cc; backdrop-filter: blur(2px); align-items: center; justify-content: center; } #stara-proc-overlay.visible { display: flex; } #stara-proc-overlay .spo-card { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 30px 44px; background: #13111f; border: 1px solid #3a3458; border-radius: 16px; box-shadow: 0 14px 56px #000000aa; min-width: 240px; } #stara-proc-overlay .spo-ring { width: 38px; height: 38px; border-radius: 50%; border: 3px solid #2a2640; border-top-color: var(--purple, #7F77DD); animation: spo-spin .8s linear infinite; } #stara-proc-overlay .spo-txt { font-size: 14px; color: #d8d4ec; letter-spacing: .3px; text-align: center; } @keyframes spo-spin { to { transform: rotate(360deg); } } .crear-hdr { display: flex; align-items: center; gap: 8px; padding: 10px 13px 8px; background: #1a1730; border-bottom: 0.5px solid var(--border); } .crear-av { width: 22px; height: 22px; border-radius: 50%; background: #1c2a1e; border: 1px solid #2a5c30; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: var(--green2); flex-shrink: 0; } .crear-title { font-size: 12px; color: var(--green2); font-weight: 600; flex: 1; } .crear-close { width: 20px; height: 20px; border-radius: 50%; background: #1c2a1e; border: 0.5px solid #2a5c30; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 13px; color: var(--green2); } .crear-close:hover { background: #1e3822; } .crear-body { padding: 13px 14px; } .crear-desc { font-size: 11px; color: var(--text4); line-height: 1.65; margin-bottom: 10px; } .crear-current { font-size: 11px; color: var(--text5); margin-bottom: 10px; } .crear-current b { color: #a899f5; font-weight: 600; } .crear-row { display: flex; gap: 7px; align-items: center; } .crear-input { flex: 1; background: var(--bg4); border: 0.5px solid #2a5c30; border-radius: 9px; padding: 8px 12px; font-size: 15px; font-weight: 600; color: var(--text); outline: none; text-align: center; font-family: Georgia, serif; -webkit-user-select: text; user-select: text; } .crear-input:focus { border-color: var(--green2); } .crear-input::placeholder { color: var(--text5); font-weight: 400; } .crear-submit { padding: 8px 14px; background: #1c2a1e; border: 0.5px solid #2a5c30; border-radius: 9px; font-size: 11px; color: var(--green2); cursor: pointer; font-weight: 600; white-space: nowrap; font-family: Georgia, serif; } .crear-submit:hover { background: #1e3822; } .crear-hint { font-size: 10px; color: var(--text5); margin-top: 9px; line-height: 1.55; } /* PANEL 4 */ #p4 { width: 228px; } .rtabs { display: flex; border-bottom: 0.5px solid var(--border); background: var(--bg2); flex-shrink: 0; } .rtab { flex: 1; text-align: center; font-size: 11px; padding: 8px 4px; color: var(--text5); cursor: pointer; border-bottom: 1.5px solid transparent; user-select: none; } .rtab:hover { color: var(--purple4); } .rtab.on { color: var(--purple4); border-bottom-color: var(--purple); } .ctx-panel { flex: 1; overflow-y: auto; padding: 11px; } .ctx-panel::-webkit-scrollbar { width: 3px; } .ctx-panel::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; } .ctx-sec { margin-bottom: 13px; } .ctx-lbl { font-size: 10px; letter-spacing: .07em; color: var(--text5); text-transform: uppercase; margin-bottom: 6px; } .chips { display: flex; flex-wrap: wrap; gap: 5px; } .chip { font-size: 11px; padding: 2px 9px; border-radius: 10px; border: 0.5px solid var(--border2); color: var(--purple4); display: flex; align-items: center; gap: 4px; } .cdot { width: 7px; height: 7px; border-radius: 50%; } .ctx-box { background: var(--bg3); border: 0.5px solid var(--border); border-radius: 7px; padding: 9px 11px; font-size: 11px; color: var(--text2); line-height: 1.65; } /* Holly (editor) */ /* Holly token counter */ .holly-tokens { display: flex; align-items: center; gap: 6px; padding: 4px 10px; background: #0e0c1a; border-top: 1px solid var(--border); font-size: 9px; color: var(--text4); justify-content: space-between; } .holly-tokens .tok-used { color: var(--purple4); font-weight: 600; } .holly-tokens .tok-bar-wrap { flex: 1; height: 3px; background: var(--border); border-radius: 2px; margin: 0 4px; overflow: hidden; } .holly-tokens .tok-bar { height: 100%; background: var(--purple3); border-radius: 2px; transition: width 0.4s; } .holly-tokens .tok-bar.warn { background: #e0a020; } .holly-tokens .tok-bar.danger { background: #c0392b; } /* ── TOPBAR TOKEN WIDGET ── */ .tb-tok-widget { display: flex; align-items: center; gap: 7px; background: var(--bg3); border: 0.5px solid var(--border); border-radius: 6px; padding: 3px 9px; height: 26px; font-family: Georgia, serif; } .tb-tok-row { display: flex; align-items: center; gap: 4px; } .tb-tok-lbl { font-size: 8px; color: var(--text5); letter-spacing: .04em; white-space: nowrap; } .tb-tok-val { font-size: 9px; font-weight: 600; color: var(--purple4); white-space: nowrap; min-width: 28px; text-align: right; } .tb-tok-val.last { color: #3ABFBF; } .tb-tok-val.warn { color: #e0a020; } .tb-tok-val.danger { color: var(--red2); } .tb-tok-sep { width: 0.5px; height: 14px; background: var(--border2); margin: 0 2px; } .holly-bubble { position: absolute; bottom: 13px; right: 13px; z-index: 20; } .holly-btn { width: 40px; height: 40px; border-radius: 50%; background: var(--purple3); border: 1.5px solid var(--purple); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 15px; font-weight: 700; color: var(--purple4); box-shadow: 0 4px 16px #7F77DD33; user-select: none; } .holly-btn:hover { background: #342d6a; } /* Editor holly chat — fixed position, resizable */ .holly-chat { position: fixed !important; bottom: 58px; right: 14px; width: 310px; height: 380px; min-width: 240px; min-height: 200px; max-width: 90vw; max-height: 90vh; z-index: 9000 !important; display: none; flex-direction: column; background: #13111f; border: 1px solid var(--border2); border-radius: 18px; overflow: hidden; box-shadow: 0 8px 32px #00000066; } .holly-chat.open, .holly-chat[style*="display: flex"], .holly-chat[style*="display:flex"] { display: flex !important; } .holly-chat-hdr { display: flex; align-items: center; gap: 8px; padding: 9px 12px 8px; background: #1a1730; border-bottom: 0.5px solid var(--border); border-radius: 18px 18px 0 0; flex-shrink: 0; cursor: grab; } .holly-chat-hdr:active { cursor: grabbing; } .holly-av { width: 22px; height: 22px; border-radius: 50%; background: var(--purple3); border: 1px solid var(--purple); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: var(--purple4); flex-shrink: 0; } .holly-name { font-size: 12px; color: var(--purple4); font-weight: 600; flex: 1; } .holly-status { font-size: 10px; color: var(--text5); margin-right: 4px; } .holly-collapse { width: 20px; height: 20px; border-radius: 50%; background: var(--purple3); border: 0.5px solid var(--purple2); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 12px; color: var(--purple4); } .holly-collapse:hover { background: #342d6a; } .chat-msgs { padding: 9px 11px; display: flex; flex-direction: column; gap: 7px; overflow-y: auto; flex: 1; min-height: 0; } .chat-msgs::-webkit-scrollbar { width: 2px; } .chat-msgs::-webkit-scrollbar-thumb { background: var(--border); } .msg-u { align-self: flex-end; background: var(--purple3); color: var(--text); font-size: 11px; padding: 6px 10px; border-radius: 12px 12px 3px 12px; max-width: 88%; line-height: 1.5; } .msg-h { align-self: flex-start; background: #1a1730; color: var(--text2); font-size: 11px; padding: 6px 10px; border-radius: 12px 12px 12px 3px; max-width: 90%; border: 0.5px solid var(--border); line-height: 1.5; } .chat-input-row { display: flex; align-items: center; gap: 6px; padding: 7px 9px; border-top: 0.5px solid var(--border); background: var(--bg2); border-radius: 0 0 18px 18px; flex-shrink: 0; } .chat-input { flex: 1; background: var(--bg4); border: 0.5px solid var(--border2); border-radius: 10px; padding: 6px 10px; font-size: 11px; color: var(--text); outline: none; font-family: Georgia, serif; -webkit-user-select: text; user-select: text; } .chat-input::placeholder { color: var(--text5); } .chat-input:focus { border-color: var(--purple2); } .send-btn { width: 27px; height: 27px; border-radius: 50%; background: var(--purple3); border: 0.5px solid var(--purple2); color: var(--purple4); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 12px; } .send-btn:hover { background: #342d6a; } /* char tree */ .char-row { display: flex; align-items: center; gap: 5px; padding: 5px 10px; cursor: pointer; user-select: none; } .char-row:hover { background: var(--bg3); } .char-row.open { background: var(--bg4); } .char-chev { font-size: 11px; color: var(--text5); transition: transform .15s; flex-shrink: 0; } .char-chev.open { transform: rotate(90deg); } .char-name-lbl { font-size: 12px; color: var(--text3); flex: 1; } .char-row.open .char-name-lbl { color: var(--purple4); } .char-role-lbl { font-size: 10px; color: var(--text5); } .sub-row { display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 24px; cursor: pointer; } .sub-row:hover { background: var(--bg3); } .sub-row.active { background: var(--bg4); } .sub-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--purple2); flex-shrink: 0; } .sub-lbl { font-size: 11px; color: var(--text4); } .sub-row.active .sub-lbl { color: var(--purple4); } .empty-hint { font-size: 12px; color: var(--text5); padding: 4px 0; font-style: italic; } /* ══════════════════════════════════════════════ BOSQUE DE LÓGICA — STYLES ══════════════════════════════════════════════ */ .forest-wrap { flex:1; display:flex; flex-direction:column; overflow:hidden; position:relative; } .forest-body { flex:1; display:flex; overflow:hidden; position:relative; } /* right-stack and col-hdr-row now handled by bosque-topbar system */ .info-panel { width:0; overflow:hidden; background:var(--bg2); border-left:0.5px solid var(--border2); display:flex; flex-direction:column; transition:width .22s ease; height:100%; position:relative; z-index:20; } .info-panel.open { width:290px; min-width:290px; overflow:visible; } .info-panel.open .info-body { overflow-y:auto; } .info-hdr { display:flex; align-items:center; gap:8px; padding:10px 12px; background:var(--bg3); border-bottom:0.5px solid var(--border); flex-shrink:0; min-width:0; position:sticky; top:0; z-index:5; } .info-title { font-size:12px; font-weight:600; color:var(--text); flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; } .info-close { width:24px; height:24px; border-radius:50%; background:var(--bg4); border:0.5px solid var(--border2); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:15px; color:var(--text3); flex-shrink:0; line-height:1; font-family:sans-serif; } .info-close:hover { color:var(--text); background:var(--bg3); border-color:var(--purple2); } .pov-block { margin-top:5px; } .pov-toggle-row { display:flex; align-items:center; gap:4px; margin-bottom:4px; } .pov-toggle-btn { display:inline-flex; align-items:center; gap:3px; font-size:9px; padding:2px 6px; border-radius:5px; border:0.5px dashed var(--border); color:var(--text5); cursor:pointer; user-select:none; transition:all .12s; } .pov-toggle-btn:hover { border-color:var(--border2); color:var(--text3); } .pov-toggle-btn.active { border-color:var(--purple2); color:var(--purple4); background:var(--purple3); border-style:solid; } .pov-entries { display:none; flex-direction:column; gap:3px; } .pov-entries.visible { display:flex; } .pov-entry { display:flex; align-items:baseline; gap:5px; padding:4px 7px; background:#0d0b18; border:0.5px solid var(--border); border-radius:5px; } .pov-entry-key { font-size:9px; color:var(--text5); text-transform:uppercase; letter-spacing:.05em; flex-shrink:0; white-space:nowrap; } .pov-entry-val { font-size:10px; color:var(--purple4); line-height:1.5; flex:1; outline:none; cursor:text; border-radius:3px; padding:1px 3px; } .pov-entry-val:focus { background:var(--bg4); color:var(--text); } .pov-entry-val:empty:before { content:attr(data-placeholder); color:var(--text5); font-style:italic; } .info-body { flex:1; overflow-y:auto; padding:12px; } .info-body::-webkit-scrollbar { width:3px; } .info-body::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; } .info-sec { margin-bottom:13px; } .info-lbl { font-size:10px; letter-spacing:.07em; color:var(--text5); text-transform:uppercase; margin-bottom:6px; } .info-txt { font-size:11px; color:var(--text2); line-height:1.65; } .info-chips { display:flex; flex-wrap:wrap; gap:4px; } .info-chip { font-size:10px; padding:2px 7px; border-radius:8px; border:0.5px solid; } .info-chip.char { border-color:#1D5040; color:var(--green2); } .info-chip.env { border-color:#4a3a10; color:var(--amber2); } .info-action { display:flex; align-items:center; gap:6px; padding:7px 9px; background:var(--bg3); border:0.5px solid var(--border); border-radius:7px; font-size:11px; color:var(--text3); cursor:pointer; user-select:none; margin-bottom:5px; transition:color .12s,border-color .12s; white-space:nowrap; } .info-action:hover { color:var(--text); border-color:var(--border2); } .info-action.conflict-action { border-color:var(--magma); color:var(--magma2); background:#1a0808; } .info-action.conflict-action:hover { background:#2a0a08; } .info-warn { display:flex; align-items:flex-start; gap:7px; padding:8px 10px; background:#1e1a0f; border:0.5px solid var(--amber); border-radius:7px; font-size:11px; color:var(--amber); line-height:1.55; margin-bottom:8px; } .delta-panel { background:#0d0b18; border:0.5px solid var(--border2); border-radius:7px; padding:8px 10px; } .delta-panel-row { display:flex; gap:6px; margin-bottom:4px; font-size:10px; line-height:1.55; } .delta-panel-row:last-child { margin-bottom:0; } .dp-key { color:var(--text5); min-width:80px; flex-shrink:0; text-transform:uppercase; font-size:9px; letter-spacing:.05em; padding-top:1px; } .dp-val { color:var(--text2); } .dp-val.added { color:var(--green2); } .dp-val.changed { color:var(--amber2); } .tension-display { display:flex; align-items:center; gap:8px; margin-top:6px; padding-top:5px; border-top:0.5px solid var(--border); } .tension-track { flex:1; height:4px; background:var(--border); border-radius:2px; overflow:hidden; } .tension-thumb { height:100%; border-radius:2px; } .anchor-selector { background:#0d0b18; border:0.5px solid var(--purple2); border-radius:7px; padding:8px 10px; } .anchor-sel-lbl { font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:var(--text5); margin-bottom:6px; } .anchor-option { display:flex; align-items:flex-start; gap:7px; padding:5px 7px; border-radius:5px; cursor:pointer; margin-bottom:3px; border:0.5px solid transparent; } .anchor-option:hover { background:var(--bg4); border-color:var(--border); } .anchor-option.selected { background:var(--purple3); border-color:var(--purple2); } .anchor-option input[type=checkbox] { margin-top:2px; accent-color:var(--purple); flex-shrink:0; } .anchor-option-txt { font-size:10px; color:var(--text2); line-height:1.55; font-style:italic; } .anchor-option-meta { font-size:9px; color:var(--text5); margin-top:2px; } .exc-sidebar { display:flex; flex-shrink:0; height:100%; } .exc-tab { width:24px; background:var(--bg2); border-left:0.5px solid var(--border); cursor:pointer; display:flex; align-items:center; justify-content:center; user-select:none; transition:background .12s; flex-shrink:0; } .exc-tab:hover { background:var(--bg3); } .exc-tab-label { font-size:10px; color:var(--text4); letter-spacing:.15em; text-transform:uppercase; writing-mode:vertical-rl; transform:rotate(180deg); font-weight:600; transition:color .15s; } .exc-tab.has-exc .exc-tab-label { color:var(--red2); } .exc-panel { width:0; overflow:hidden; background:var(--bg2); border-left:0.5px solid var(--border); transition:width .22s ease; display:flex; flex-direction:column; } .exc-panel.open { width:250px; } .exc-hdr { display:flex; align-items:center; gap:8px; padding:10px 12px; background:var(--bg3); border-bottom:0.5px solid var(--border); flex-shrink:0; } .exc-hdr-title { font-size:12px; font-weight:600; color:var(--red2); flex:1; white-space:nowrap; } .exc-body { flex:1; overflow-y:auto; padding:10px; } .exc-body::-webkit-scrollbar { width:3px; } .exc-body::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; } .exc-empty { font-size:11px; color:var(--text5); text-align:center; padding:20px 10px; font-style:italic; line-height:1.6; } .exc-item { background:#180a0a; border:0.5px solid #3a1010; border-radius:8px; padding:9px 10px; margin-bottom:8px; } .exc-item.resolved { background:#0a1a10; border-color:#1D5040; opacity:.7; } .exc-item-hdr { display:flex; align-items:center; gap:6px; margin-bottom:5px; } .exc-id { font-size:9px; color:var(--text5); letter-spacing:.06em; } .exc-status { font-size:9px; padding:1px 6px; border-radius:5px; margin-left:auto; } .exc-status.active { background:#2a0808; border:0.5px solid var(--red); color:var(--red2); } .exc-status.resolved { background:#0a1e14; border:0.5px solid var(--green); color:var(--green2); } .exc-conflict-txt { font-size:10px; color:#a06060; line-height:1.5; margin-bottom:5px; } .exc-meta { font-size:9px; color:var(--text5); line-height:1.5; } .exc-meta b { color:var(--text4); } .exc-note { font-size:10px; color:var(--text4); font-style:italic; margin-top:4px; line-height:1.4; border-top:0.5px solid #2a1010; padding-top:4px; } .col-resizer { width:5px; cursor:col-resize; flex-shrink:0; position:relative; z-index:5; background:transparent; transition:background .12s; } .col-resizer:hover, .col-resizer.dragging { background:var(--purple2); } .col-resizer::after { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:3px; height:40px; border-radius:2px; background:var(--border2); opacity:0; transition:opacity .15s; } .col-resizer:hover::after, .col-resizer.dragging::after { opacity:1; } .forest-scroll { flex:1; overflow:auto; } .forest-scroll::-webkit-scrollbar { width:4px; height:4px; } .forest-scroll::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; } .forest-canvas { position:relative; min-height:100%; } .three-cols { display:flex; min-height:100%; } .col { position:relative; flex-shrink:0; } .col-timeline { width:420px; border-right:0.5px solid var(--border); } .col-env { width:260px; border-right:0.5px solid var(--border); flex-shrink:0; } .col-chars { flex:1; min-width:200px; } /* col-hdr-row and col-hdr-cell replaced by bosque-topbar */ .h-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; } .hdr-chip { display:inline-flex; align-items:center; gap:3px; font-size:9px; padding:2px 7px; border-radius:6px; border:0.5px solid; cursor:pointer; user-select:none; transition:all .12s; margin-left:6px; flex-shrink:0; font-weight:400; } .hdr-chip.tens { border-color:var(--border2); color:var(--text4); background:transparent; } .hdr-chip.tens:hover { color:var(--text3); border-color:var(--border2); } .hdr-chip.tens.active { border-color:#6b5020; color:var(--amber2); background:#1a1005; } .hdr-global-tog { display:inline-flex; align-items:center; gap:3px; font-size:9px; padding:2px 7px; border-radius:6px; border:0.5px solid; cursor:pointer; user-select:none; transition:all .12s; flex-shrink:0; font-weight:400; } .hdr-global-tog.env-tog { border-color:#4a3a10; color:#6b5020; background:transparent; } .hdr-global-tog.env-tog:hover { color:var(--amber2); } .hdr-global-tog.env-tog.active { border-color:var(--amber); color:var(--amber2); background:#251a05; } .hdr-global-tog.chr-tog { border-color:#1D5040; color:#1D5040; background:transparent; } .hdr-global-tog.chr-tog:hover { color:var(--green2); } .hdr-global-tog.chr-tog.active { border-color:var(--green); color:var(--green2); background:#0d2018; } .hdr-sep { width:0.5px; height:14px; background:var(--border); flex-shrink:0; margin:0 2px; } .z-btn { width:18px; height:18px; border-radius:4px; background:var(--bg3); border:0.5px solid var(--border); color:var(--text3); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; user-select:none; flex-shrink:0; } .z-btn:hover { color:var(--text); } .z-val { font-size:11px; color:var(--purple4); min-width:34px; text-align:center; } .holly-mini { display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:10px; border:0.5px solid var(--purple2); background:var(--purple3); color:var(--purple4); font-size:11px; cursor:pointer; user-select:none; flex-shrink:0; white-space:nowrap; } .holly-mini:hover { background:#342d6a; } .exc-badge { font-size:10px; padding:1px 7px; border-radius:8px; margin-left:3px; } .exc-badge.bad { background:#3a1010; border:0.5px solid var(--red); color:var(--red2); } .exc-badge.ok { background:#0f1e19; border:0.5px solid var(--green); color:var(--green2); } .v-rail { position:absolute; left:24px; top:0; bottom:0; width:1px; background:linear-gradient(to bottom,transparent 0%,var(--border2) 5%,var(--border2) 95%,transparent 100%); pointer-events:none; } .col-env .v-rail { left:20px; background:linear-gradient(to bottom,transparent 0%,#4a3a10 5%,#4a3a10 95%,transparent 100%); opacity:.6; } .col-chars .v-rail { left:20px; background:linear-gradient(to bottom,transparent 0%,#1D5040 5%,#1D5040 95%,transparent 100%); opacity:.6; } .chap-sep { display:flex; align-items:center; gap:8px; padding:20px 14px 6px; } .chap-sep-line { flex:1; height:0.5px; background:var(--border); } .chap-sep-label { font-size:10px; color:var(--text5); letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; } .chap-sep-dot { width:12px; height:12px; border-radius:50%; background:var(--bg); border:1.5px solid var(--border2); flex-shrink:0; position:relative; } .chap-sep-dot::after { content:''; position:absolute; inset:2px; border-radius:50%; background:var(--border2); } .scene-group { margin:0 14px 0 44px; margin-top:8px; } .scene-lbl { font-size:10px; color:var(--text5); letter-spacing:.06em; padding:4px 0 3px; display:flex; align-items:center; gap:5px; } .scene-lbl::before { content:''; display:block; width:12px; height:0.5px; background:var(--border2); } .ev-node { position:relative; margin-bottom:6px; } .ev-node-inner { display:flex; align-items:flex-start; padding:7px 10px 7px 30px; border-radius:var(--node-r); border:0.5px solid var(--border2); font-size:11px; line-height:1.5; cursor:grab; user-select:none; transition:box-shadow .12s, border-color .15s, background .2s; position:relative; } .ev-node-inner:hover { box-shadow:0 2px 12px #0008; } .ev-node-inner.key { background:#1a1730; border-left:2px solid var(--purple); } .ev-node-inner.evento { background:#1a1730; border-left:2px solid var(--purple); } .ev-node-inner.dial { background:#161425; border-left:2px solid var(--green); } .ev-node-inner.dialogo { background:#161425; border-left:2px solid var(--green); } .ev-node-inner.beat { background:#191520; border-left:2px solid var(--amber); } .ev-node-inner.reflexion{ background:#18171f; border-left:2px solid #9996b0; } .ev-node-inner.enfoque { background:#1a1530; border-left:2px solid #c084fc; } .ev-node-inner.holly { background:#0d1a14; border-left:2px solid var(--green2); opacity:.8; } .ev-node-inner.contexto { background:#1a100a; border-left:2px solid #ff6b3d; } .ev-node-inner.conflict { background:#1a0a08 !important; border-color:var(--magma) !important; border-left:2px solid var(--magma) !important; animation:magma-pulse 1.8s ease-in-out infinite; } @keyframes magma-pulse { 0%,100% { box-shadow:0 0 0 0 #ff3c1f00; border-color:var(--magma); } 50% { box-shadow:0 0 10px 2px #ff3c1f44; border-color:var(--magma2); } } .ev-bullet { position:absolute; left:-20px; top:14px; width:8px; height:8px; border-radius:50%; background:var(--bg); border:1.5px solid; flex-shrink:0; } .ev-bullet.key { border-color:var(--purple); } .ev-bullet.dial { border-color:var(--green); } .ev-bullet.beat { border-color:var(--amber); } .ev-bullet.conflict { border-color:var(--magma); animation:magma-pulse 1.8s ease-in-out infinite; } .ev-type-lbl { font-size:9px; letter-spacing:.07em; text-transform:uppercase; color:var(--text5); margin-bottom:2px; } .ev-txt { color:var(--text2); font-size:11px; padding-right:28px; } .ev-tags { display:flex; flex-wrap:wrap; gap:3px; margin-top:5px; } .ev-tag { font-size:9px; padding:1px 6px; border-radius:8px; border:0.5px solid; } .ev-tag.char { border-color:#1D5040; color:var(--green2); background:#0a1a14; } .ev-tag.env { border-color:#4a3a10; color:var(--amber2); background:#1a1005; } .compat-badge { position:absolute; right:6px; top:7px; font-size:9px; padding:1px 5px; border-radius:4px; font-weight:600; letter-spacing:.04em; } .compat-ok { background:#0f1e19; border:0.5px solid #1D5040; color:var(--green2); } .compat-warn { background:#1e1a0f; border:0.5px solid var(--amber); color:var(--amber); } .compat-err { background:#2a0808; border:0.5px solid var(--magma); color:var(--magma2); animation:magma-pulse 1.8s ease-in-out infinite; } .ev-tension-bar { display:none; align-items:center; gap:6px; margin-top:5px; } .ev-tension-bar.visible { display:flex; } .et-track { flex:1; height:2px; background:var(--border); border-radius:2px; overflow:hidden; } .et-fill { height:100%; border-radius:2px; } .et-lbl { font-size:9px; min-width:28px; text-align:right; } .anchor-indicator { display:flex; align-items:center; gap:4px; margin-top:4px; } .anchor-toggle-btn { display:inline-flex; align-items:center; gap:3px; font-size:9px; padding:2px 6px; border-radius:5px; border:0.5px dashed var(--border); color:var(--text5); cursor:pointer; user-select:none; transition:all .12s; } .anchor-toggle-btn:hover { border-color:var(--border2); color:var(--text3); } .anchor-toggle-btn.active { border-color:var(--purple2); color:var(--purple4); background:var(--purple3); border-style:solid; } .env-node { margin:0 10px 5px 38px; position:relative; } .env-node-inner { padding:7px 9px; border-radius:7px; background:#18140a; border:0.5px solid #4a3a10; font-size:11px; cursor:pointer; user-select:none; transition:box-shadow .12s; } .env-node-inner:hover { box-shadow:0 2px 10px #0008; } .env-bullet { position:absolute; left:-18px; top:14px; width:7px; height:7px; border-radius:50%; background:var(--bg); border:1.5px solid var(--amber); } .env-conn-line { position:absolute; left:-14px; top:0; bottom:0; width:0.5px; background:#4a3a1030; } .env-node-lbl { font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:#6b5020; margin-bottom:2px; } .env-node-name { font-size:11px; color:var(--amber2); font-weight:600; margin-bottom:3px; } .env-node-desc { font-size:10px; color:#7a6030; margin-bottom:6px; line-height:1.4; } .var-toggle-row { display:flex; gap:4px; margin-bottom:5px; } .var-tog-btn { display:inline-flex; align-items:center; gap:3px; font-size:9px; padding:2px 7px; border-radius:6px; border:0.5px solid; cursor:pointer; user-select:none; transition:opacity .12s, background .12s; } .var-tog-btn.active-btn { border-color:var(--amber); color:var(--amber2); background:#25190a; } .var-tog-btn.inactive-btn { border-color:var(--border); color:var(--text5); background:transparent; } .var-tog-btn.active-btn.on { background:#2e2008; } .var-tog-btn.inactive-btn.on { background:var(--bg3); } .var-tog-btn-chr.active-btn { border-color:var(--green); color:var(--green2); background:#0d2018; } .var-tog-btn-chr.inactive-btn { border-color:var(--border); color:var(--text5); background:transparent; } .var-tog-btn-chr.active-btn.on { background:#142a1e; } .var-tog-btn-chr.inactive-btn.on { background:var(--bg3); } .var-pills { display:flex; flex-wrap:wrap; gap:3px; } .env-var-pill { font-size:9px; padding:1px 6px; border-radius:8px; border:0.5px solid #5a4018; color:#c89040; background:#1a1005; } .env-var-pill.active { border-color:var(--amber); color:var(--amber2); background:#251a05; } .char-var-pill { font-size:9px; padding:1px 6px; border-radius:8px; border:0.5px solid #1D5040; color:#3a9065; background:#0a1a14; } .char-var-pill.active { border-color:var(--green); color:var(--green2); background:#0d2018; font-weight:600; } .node-delta { margin-top:4px; padding:3px 6px; background:#0d0b14; border:0.5px solid var(--border); border-radius:5px; font-size:9px; color:var(--text5); line-height:1.6; } .node-delta b { color:var(--purple4); } .char-node-wrap { margin:0 10px 6px 38px; position:relative; } .char-node-inner { padding:7px 9px; border-radius:7px; background:#0a1a14; border:0.5px solid #1D5040; cursor:pointer; user-select:none; transition:box-shadow .12s; } .char-node-inner:hover { box-shadow:0 2px 10px #0008; } .char-bullet { position:absolute; left:-18px; top:14px; width:7px; height:7px; border-radius:50%; background:var(--bg); border:1.5px solid var(--green); } .char-conn-line { position:absolute; left:-14px; top:0; bottom:0; width:0.5px; background:#1D504020; } .char-top { display:flex; align-items:center; gap:8px; margin-bottom:5px; } .char-avatar { width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:700; flex-shrink:0; } .char-name-lbl { font-size:11px; font-weight:600; } .char-role-sm { font-size:9px; color:#1D5040; } /* connectors-svg removed */ .conflict-modal-bg { position:fixed; inset:0; background:#00000088; z-index:200; display:none; align-items:center; justify-content:center; } .conflict-modal-bg.open { display:flex; } .conflict-modal { background:var(--bg2); border:1px solid var(--magma); border-radius:14px; width:420px; max-width:90vw; overflow:hidden; box-shadow:0 12px 48px #ff3c1f33; } .cm-hdr { display:flex; align-items:center; gap:8px; padding:12px 14px; background:#1a0808; border-bottom:0.5px solid var(--magma); } .cm-icon { font-size:18px; color:var(--magma2); } .cm-title { font-size:13px; font-weight:600; color:var(--magma2); flex:1; } .cm-close { width:22px; height:22px; border-radius:50%; background:#2a0a08; border:0.5px solid var(--magma); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:13px; color:var(--magma2); } .cm-body { padding:16px; } .cm-sec { margin-bottom:12px; } .cm-lbl { font-size:10px; letter-spacing:.07em; text-transform:uppercase; color:var(--text5); margin-bottom:5px; } .cm-txt { font-size:11px; color:var(--text2); line-height:1.65; } .cm-change { background:#0d0b18; border:0.5px solid var(--border2); border-radius:7px; padding:8px 10px; } .cm-change-row { display:flex; gap:8px; margin-bottom:4px; font-size:11px; } .cm-change-row:last-child { margin-bottom:0; } .cm-field { color:var(--text5); min-width:90px; flex-shrink:0; } .cm-old { color:var(--red2); text-decoration:line-through; } .cm-new { color:var(--green2); } .cm-footer { display:flex; gap:8px; padding:12px 16px; border-top:0.5px solid var(--border); background:var(--bg3); } .cm-btn { flex:1; padding:8px; border-radius:8px; font-size:11px; cursor:pointer; font-family:Georgia,serif; font-weight:600; border:0.5px solid; text-align:center; } .cm-btn.accept { background:#0f1e19; border-color:var(--green); color:var(--green2); } .cm-btn.accept:hover { background:#142a1e; } .cm-btn.ignore { background:#1a0808; border-color:var(--red); color:var(--red2); } .cm-btn.ignore:hover { background:#220a0a; } /* Holly (bosque) */ .holly-panel { position:absolute; bottom:14px; right:14px; z-index:60; } .holly-panel .holly-btn { width:38px; height:38px; border-radius:50%; background:var(--purple3); border:1.5px solid var(--purple); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:14px; font-weight:700; color:var(--purple4); box-shadow:0 4px 16px #7F77DD33; user-select:none; } .holly-panel .holly-btn:hover { background:#342d6a; } .holly-panel .holly-chat { display:none; position:absolute; bottom:48px; right:0; width:270px; background:#13111f; border:1px solid var(--border2); border-radius:16px; overflow:hidden; box-shadow:0 8px 32px #00000066; } .holly-panel .holly-chat.open { display:flex; flex-direction:column; } .holly-hdr { display:flex; align-items:center; gap:7px; padding:8px 11px; background:#1a1730; border-bottom:0.5px solid var(--border); flex-shrink:0; } .holly-hdr .holly-av { width:20px; height:20px; border-radius:50%; background:var(--purple3); border:1px solid var(--purple); display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:700; color:var(--purple4); } .holly-hdr .holly-name { font-size:11px; color:var(--purple4); font-weight:600; flex:1; } .holly-dot { width:5px; height:5px; border-radius:50%; background:var(--green); } .holly-msgs { flex:1; min-height:0; overflow-y:auto; padding:8px 10px; display:flex; flex-direction:column; gap:6px; } .holly-msgs::-webkit-scrollbar { width:2px; } .holly-msgs::-webkit-scrollbar-thumb { background:var(--border); } .holly-input-row { display:flex; gap:5px; padding:7px 8px; background:var(--bg2); border-top:0.5px solid var(--border); } .holly-in { flex:1; background:var(--bg4); border:0.5px solid var(--border2); border-radius:8px; padding:5px 9px; font-size:10px; color:var(--text); outline:none; font-family:Georgia,serif; } .holly-in::placeholder { color:var(--text5); } .holly-send { width:24px; height:24px; border-radius:50%; background:var(--purple3); border:0.5px solid var(--purple2); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--purple4); font-size:11px; } .legend { position:absolute; bottom:14px; left:14px; background:var(--bg2); border:0.5px solid var(--border); border-radius:8px; padding:8px 11px; z-index:40; pointer-events:none; } .legend-title { font-size:9px; letter-spacing:.09em; text-transform:uppercase; color:var(--text5); margin-bottom:6px; } .legend-row { display:flex; align-items:center; gap:7px; margin-bottom:4px; font-size:10px; color:var(--text3); } .legend-row:last-child { margin-bottom:0; } .leg-dot { width:8px; height:8px; border-radius:50%; border:1.5px solid; background:var(--bg); flex-shrink:0; } .var-tooltip { position:fixed; background:var(--bg2); border:0.5px solid var(--border2); border-radius:6px; padding:5px 9px; font-size:10px; color:var(--text2); z-index:300; pointer-events:none; max-width:220px; line-height:1.5; } .drag-ghost { position:fixed; top:-999px; pointer-events:none; } /* ── CHAR COLLAPSED CARDS (v27) ── */ .char-col-inner { display:flex; flex-wrap:wrap; gap:6px; margin:0 10px 0 38px; } .char-chip { position:relative; display:inline-flex; align-items:center; gap:5px; padding:4px 9px 4px 5px; border-radius:20px; border:0.5px solid; cursor:pointer; user-select:none; transition:box-shadow .14s, background .14s; background:var(--bg3); } .char-chip:hover { box-shadow:0 2px 12px #00000066; } .char-chip-avatar { width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:8px; font-weight:700; flex-shrink:0; } .char-chip-name { font-size:10px; font-weight:600; } .char-chip-arrow { font-size:8px; color:var(--text5); transition:color .14s; margin-left:1px; } .char-chip:hover .char-chip-arrow { color:var(--text2); } /* Floating expanded card */ .char-flyout { position:fixed; z-index:500; width:210px; background:#0e0c1a; border:1px solid; border-radius:12px; padding:11px 12px 10px; box-shadow:0 8px 32px #00000088; pointer-events:auto; animation:flyout-in .14s ease; } @keyframes flyout-in { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } } .char-flyout-top { display:flex; align-items:center; gap:7px; margin-bottom:8px; } .char-flyout-avatar { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; flex-shrink:0; } .char-flyout-name { font-size:12px; font-weight:600; } .char-flyout-role { font-size:9px; color:var(--text5); margin-top:1px; } .char-flyout hr { border:none; border-top:0.5px solid var(--border); margin:7px 0; } /* ── EVENT TYPE SELECTOR (v27) ── */ .ev-type-btn { display:inline-flex; align-items:center; gap:3px; font-size:9px; letter-spacing:.07em; text-transform:uppercase; padding:1px 5px; border-radius:4px; border:0.5px solid transparent; cursor:pointer; user-select:none; transition:border-color .12s, background .12s; margin-bottom:2px; } .ev-type-btn:hover { border-color:var(--border2); background:var(--bg3); } .ev-type-dropdown { position:fixed; z-index:600; background:var(--bg2); border:0.5px solid var(--border2); border-radius:9px; padding:5px; min-width:160px; box-shadow:0 6px 24px #000000aa; animation:flyout-in .12s ease; } .ev-type-opt { display:flex; align-items:center; gap:7px; padding:5px 9px; border-radius:6px; cursor:pointer; font-size:10px; color:var(--text2); transition:background .1s; } .ev-type-opt:hover { background:var(--bg3); } .ev-type-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; } /* ── CONFLICT LIST PANEL (v27) ── */ .conflict-btn { display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:10px; border:0.5px solid var(--red); background:#1a0808; color:var(--red2); font-size:11px; cursor:pointer; user-select:none; transition:background .12s; white-space:nowrap; } .conflict-btn:hover { background:#220a0a; } .conflict-btn.ok { border-color:var(--green); background:#0f1e19; color:var(--green2); cursor:default; } .conflict-list-panel { position:fixed; z-index:550; width:340px; background:var(--bg2); border:0.5px solid var(--red); border-radius:12px; overflow:hidden; box-shadow:0 8px 32px #ff3c1f22; animation:flyout-in .15s ease; } .conflict-list-hdr { display:flex; align-items:center; gap:7px; padding:10px 13px; background:#1a0808; border-bottom:0.5px solid var(--magma); } .conflict-list-title { font-size:12px; font-weight:600; color:var(--magma2); flex:1; } .conflict-list-close { width:20px; height:20px; border-radius:50%; background:#2a0a08; border:0.5px solid var(--magma); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:12px; color:var(--magma2); } .conflict-list-body { max-height:320px; overflow-y:auto; padding:6px; } .conflict-list-body::-webkit-scrollbar { width:3px; } .conflict-list-body::-webkit-scrollbar-thumb { background:var(--border); } .conflict-list-empty { padding:16px; text-align:center; font-size:11px; color:var(--text5); font-style:italic; } .conflict-list-item { display:flex; align-items:flex-start; gap:8px; padding:8px 10px; border-radius:7px; cursor:pointer; border:0.5px solid transparent; margin-bottom:3px; transition:background .12s, border-color .12s; } .conflict-list-item:hover { background:#220a0a; border-color:var(--magma); } .conflict-list-item:last-child { margin-bottom:0; } .cli-icon { color:var(--magma2); font-size:12px; flex-shrink:0; padding-top:1px; } .cli-body { flex:1; min-width:0; } .cli-ctx { font-size:9px; color:var(--text5); margin-bottom:2px; letter-spacing:.04em; } .cli-txt { font-size:10px; color:var(--text2); line-height:1.5; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; } .cli-arrow { font-size:10px; color:var(--text5); flex-shrink:0; padding-top:2px; transition:color .12s; } .conflict-list-item:hover .cli-arrow { color:var(--magma2); } ::-webkit-scrollbar { width: 3px; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; } ::-webkit-scrollbar-track { background: transparent !important; } /* ══════════════════════════════════════════════ BIBLIA DEL UNIVERSO ══════════════════════════════════════════════ */ .bib-cat-btn { font-size:10px; padding:3px 10px; border-radius:5px; border:0.5px solid var(--border); background:transparent; color:var(--text3); cursor:pointer; font-family:Georgia,serif; transition:background .12s,color .12s,border-color .12s; display:flex; align-items:center; gap:4px; white-space:nowrap; } .bib-cat-btn:hover { background:var(--bg4); color:var(--text); } .bib-cat-active-leyes { background:var(--bg4); border-color:var(--green); color:var(--green2); } .bib-cat-active-entornos { background:var(--bg4); border-color:var(--amber); color:var(--amber2); } .bib-cat-active-personajes { background:var(--bg4); border-color:var(--purple2); color:var(--purple4); } .bib-cat-active-estela { background:var(--bg4); border-color:#3ABFBF; color:#7EEAEA; } .bib-cat-active-mecanica { background:var(--bg4); border-color:#C07840; color:#E8A86A; } .bib-cat-active-brujula { background:var(--bg4); border-color:#3a6ea5; color:#8fc1ee; } /* Index tree */ .bib-grp { border-bottom:0.5px solid var(--border); } .bib-grp-hdr { display:flex; align-items:center; gap:5px; padding:6px 10px; cursor:pointer; user-select:none; transition:background .12s; } .bib-grp-hdr:hover { background:var(--bg3); } .bib-grp-dot { width:6px;height:6px;border-radius:50%;flex-shrink:0; } .bib-grp-name { font-size:10.5px; font-weight:600; flex:1; letter-spacing:.02em; } .bib-grp-chevron { font-size:10px; color:var(--text5); transition:transform .15s; } .bib-grp.open .bib-grp-chevron { transform:rotate(90deg); } .bib-grp-items { display:none; } .bib-grp.open .bib-grp-items { display:block; } .bib-item { display:flex; align-items:center; gap:6px; padding:5px 10px 5px 22px; cursor:pointer; user-select:none; border-left:2px solid transparent; font-size:11px; color:var(--text4); transition:background .1s; position:relative; } .bib-item::before { content:''; position:absolute; left:15px; top:50%; width:5px; height:0.5px; background:var(--border); } .bib-item:hover { background:var(--bg3); color:var(--text2); } .bib-item.sel-natural { background:var(--bg4); border-left-color:var(--green); color:var(--green2); } .bib-item.sel-entorno_ley { background:var(--bg4); border-left-color:var(--amber); color:var(--amber2); } .bib-item.sel-personaje_ley { background:var(--bg4); border-left-color:var(--purple); color:var(--purple4); } .bib-item.sel-simbolica { background:var(--bg4); border-left-color:#c084fc; color:#c084fc; } .bib-item.sel-pi { background:#1a0808; border-left-color:var(--magma); color:var(--magma2); } .bib-item.sel-env { background:var(--bg4); border-left-color:var(--amber); color:var(--amber2); } .bib-item.sel-char { background:var(--bg4); border-left-color:var(--green); color:var(--green2); } .bib-item.sel-mecanica { background:var(--bg4); border-left-color:#C07840; color:#E8A86A; } .bib-item.sel-estela { background:var(--bg4); border-left-color:#3ABFBF; color:#7EEAEA; } /* Detail panel */ .bib-badge { display:inline-flex; align-items:center; gap:4px; font-size:9px; letter-spacing:.08em; text-transform:uppercase; padding:2px 8px; border-radius:8px; border:0.5px solid; margin-bottom:8px; } .bib-detail-name { font-size:14px; font-weight:600; color:var(--text); margin-bottom:5px; line-height:1.3; } .bib-detail-desc { font-size:11.5px; color:var(--text3); line-height:1.65; font-style:italic; margin-bottom:10px; } .bib-detail-sec { border-top:0.5px solid var(--border); padding:10px 0; } .bib-detail-sec-lbl { font-size:9px;letter-spacing:.09em;color:var(--text5);text-transform:uppercase;margin-bottom:7px; } .bib-detail-row { display:flex;justify-content:space-between;gap:8px;margin-bottom:5px;font-size:11px; } .bib-detail-key { color:var(--text5);flex-shrink:0;width:80px; } .bib-detail-val { color:var(--text2);text-align:right;flex:1; } .bib-tag { font-size:8.5px;padding:1px 6px;border-radius:8px;border:0.5px solid var(--border);color:var(--text5); } .bib-validity-track { height:3px;background:var(--bg4);border-radius:2px;overflow:hidden;margin-top:5px; } .bib-validity-fill { height:100%;border-radius:2px; } /* Timeline filters */ .bib-tl-filter { font-size:8.5px; padding:2px 7px; border-radius:4px; border:0.5px solid var(--border); background:transparent; color:var(--text4); cursor:pointer; font-family:Georgia,serif; display:flex;align-items:center;transition:opacity .15s,border-color .15s; } .bib-tl-filter:hover { color:var(--text2); } .bib-tl-filter.on { border-color:var(--fc,var(--border2)); color:var(--fc,var(--text3)); } .bib-tl-filter:not(.on) { opacity:.35; } /* Env circles */ .bib-env-circle { position:absolute; border-radius:50%; border:1px solid; display:flex; align-items:center; justify-content:center; cursor:pointer; user-select:none; transition:filter .18s,border-width .18s; } .bib-env-circle:hover { filter:brightness(1.35); border-width:2px; } .bib-env-label { font-size:10.5px;font-weight:600;text-align:center;padding:4px;line-height:1.3;pointer-events:none; } /* Personaje tree SVG styles applied inline */ /* Hover tooltip (reuse same as existing) */ .bib-tooltip { position:fixed; background:var(--bg2); border:0.5px solid var(--border2); border-radius:6px; padding:7px 10px; font-size:10px; color:var(--text2); z-index:500; pointer-events:none; max-width:240px; line-height:1.55; display:none; box-shadow:0 6px 24px #00000066; } .bib-tooltip.vis { display:block; } .bib-tooltip-title { font-size:11px;font-weight:600;color:var(--text);margin-bottom:4px; } /* PI Modal */ .bib-modal-bg { position:fixed;inset:0;background:#00000088;z-index:400;display:none;align-items:center;justify-content:center; } .bib-modal-bg.open { display:flex; } .bib-modal { background:var(--bg2);border:0.5px solid var(--border2);border-radius:14px;width:460px;max-width:95vw;overflow:hidden;box-shadow:0 16px 60px #00000088; } .bib-modal-hdr { display:flex;align-items:center;gap:8px;padding:12px 14px;background:var(--bg3);border-bottom:0.5px solid var(--border); } .bib-modal-title { font-size:13px;font-weight:600;color:var(--magma2);flex:1; } .bib-modal-close { width:22px;height:22px;border-radius:50%;background:var(--bg4);border:0.5px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;color:var(--text3); } .bib-modal-close:hover { color:var(--text); } .bib-modal-body { padding:14px 16px; } .bib-modal-lbl { font-size:9px;letter-spacing:.09em;color:var(--text5);text-transform:uppercase;margin-bottom:5px;display:block; } .bib-modal-input, .bib-modal-ta { width:100%;background:var(--bg4);border:0.5px solid var(--border);border-radius:7px; padding:7px 10px;color:var(--text);font-size:11.5px;outline:none;font-family:Georgia,serif; transition:border-color .15s; margin-bottom:12px; } .bib-modal-ta { resize:vertical;min-height:60px; } .bib-modal-input:focus,.bib-modal-ta:focus { border-color:var(--magma); } .bib-modal-chk-grp { display:flex;flex-wrap:wrap;gap:4px; } .bib-modal-chk { display:flex;align-items:center;gap:4px;padding:3px 8px; border:0.5px solid var(--border);border-radius:5px;cursor:pointer; font-size:10px;color:var(--text4);user-select:none;transition:all .12s; } .bib-modal-chk.checked { border-color:currentColor; } .bib-modal-footer { display:flex;justify-content:flex-end;gap:7px;padding:10px 16px 14px; } .bib-btn-cancel { font-size:10px;padding:6px 14px;border:0.5px solid var(--border);border-radius:6px;background:none;color:var(--text4);cursor:pointer;font-family:Georgia,serif; } .bib-btn-confirm { font-size:10px;padding:6px 14px;border:0.5px solid var(--magma);border-radius:6px;background:rgba(255,60,31,.1);color:var(--magma2);cursor:pointer;font-family:Georgia,serif; } .bib-btn-confirm:hover { background:rgba(255,60,31,.2); } /* ── Scrollable panels — Biblia ── */ .bib-scroll-panel { overflow-y: auto !important; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: var(--border2) transparent; } .bib-scroll-panel::-webkit-scrollbar { width: 5px; } .bib-scroll-panel::-webkit-scrollbar-track { background: transparent !important; } .bib-scroll-panel::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; transition: background .15s; } .bib-scroll-panel:hover::-webkit-scrollbar-thumb { background: var(--purple2); } /* ══════════════════════════════════════════════ ESTELA DE BURBUJAS ══════════════════════════════════════════════ */ .estela-wrap { flex:1; display:flex; overflow:hidden; min-height:0; } .estela-panel-draft { width:320px; min-width:220px; flex-shrink:0; display:flex; flex-direction:column; border-right:0.5px solid var(--border); } .estela-panel-struct { width:340px; min-width:240px; flex-shrink:0; display:flex; flex-direction:column; border-right:0.5px solid var(--border); overflow:hidden; } .estela-panel-holly { flex:1; min-width:200px; display:flex; flex-direction:column; overflow:hidden; } .estela-panel-hdr { flex-shrink:0; padding:7px 10px; background:var(--bg2); border-bottom:0.5px solid var(--border); font-size:11px; font-weight:600; display:flex; align-items:center; gap:6px; letter-spacing:.02em; user-select:none; color:#3ABFBF; } .estela-textarea { flex:1; resize:none; border:none; outline:none; background:transparent; color:var(--text2); font-family:Georgia,serif; font-size:12px; line-height:1.75; padding:14px; overflow-y:auto; } .estela-textarea::placeholder { color:var(--text5); font-style:italic; } .estela-textarea::-webkit-scrollbar { width:3px; } .estela-textarea::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; } .estela-draft-footer { flex-shrink:0; padding:7px 10px; background:var(--bg2); border-top:0.5px solid var(--border); display:flex; align-items:center; gap:6px; } .estela-save-btn { font-size:10px; padding:4px 12px; border-radius:5px; border:0.5px solid #3ABFBF; background:transparent; color:#7EEAEA; cursor:pointer; font-family:Georgia,serif; transition:background .12s; } .estela-save-btn:hover { background:#0a2020; } .estela-word-count { font-size:9px; color:var(--text5); margin-left:auto; } /* Estructura de etapas */ .estela-stage-list { flex:1; overflow-y:auto; padding:8px 0; } .estela-stage-list::-webkit-scrollbar { width:3px; } .estela-stage-list::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; } .estela-stage-card { margin:0 8px 6px; border:0.5px solid var(--border2); border-radius:10px; background:var(--bg3); overflow:hidden; transition:border-color .15s; } .estela-stage-card:hover { border-color:#3ABFBF44; } .estela-stage-hdr { display:flex; align-items:center; gap:8px; padding:8px 10px; cursor:pointer; user-select:none; } .estela-stage-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; } .estela-stage-name { font-size:11px; font-weight:600; flex:1; } .estela-stage-chev { font-size:10px; color:var(--text5); transition:transform .15s; } .estela-stage-card.open .estela-stage-chev { transform:rotate(90deg); } .estela-stage-body { display:none; padding:0 10px 10px; } .estela-stage-card.open .estela-stage-body { display:block; } .estela-stage-desc { font-size:11px; color:var(--text4); line-height:1.6; font-style:italic; margin-bottom:6px; } .estela-key-event { display:flex; align-items:flex-start; gap:6px; padding:4px 0; font-size:10.5px; color:var(--text3); border-bottom:0.5px solid var(--border); } .estela-key-event:last-child { border-bottom:none; } .estela-key-dot { width:4px; height:4px; border-radius:50%; background:#3ABFBF; flex-shrink:0; margin-top:5px; } /* DEPRECATED v64.4.0 — reemplazado por .stara-empty unificado (ver línea 1331). Conservado por seguridad; si no aparece en grep tras una versión más, se puede borrar. */ .estela-empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; padding:24px; text-align:center; color:var(--text5); } .estela-empty-icon { font-size:28px; opacity:.3; margin-bottom:10px; } .estela-empty-txt { font-size:11px; font-style:italic; line-height:1.6; } /* ══ B5: Estado vacío guiado genérico (Forja / Bosque / Biblia) ══ */ .stara-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:28px 22px; color:var(--text4); gap:9px; min-height:120px; } .stara-empty-icon { font-size:30px; opacity:.32; line-height:1; color:var(--purple4); } .stara-empty-title { font-size:12.5px; color:var(--text3); font-weight:600; letter-spacing:.02em; } .stara-empty-txt { font-size:11px; font-style:italic; line-height:1.65; max-width:300px; color:var(--text4); } .stara-empty-cta { margin-top:4px; font-size:10.5px; padding:5px 12px; border:0.5px solid var(--purple2); border-radius:6px; background:var(--purple3); color:var(--purple4); cursor:pointer; font-family:Georgia,serif; transition:background .2s, border-color .2s; } .stara-empty-cta:hover { background:var(--purple2); border-color:var(--purple); color:var(--text); } /* ══ B7: Ayuda contextual — ícono "?" en encabezados de módulo ══ */ .help-dot { display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px; border-radius:50%; border:0.5px solid var(--border2); background:var(--bg3); color:var(--text4); font-size:9px; font-style:normal; cursor:help; margin-left:5px; vertical-align:middle; font-family:Georgia,serif; line-height:1; transition:color .2s, border-color .2s; } .help-dot:hover { color:var(--purple4); border-color:var(--purple2); } /* el tooltip de ayuda reutiliza el contenedor .bib-tooltip ya existente */ /* Panel Holly Estela */ .estela-holly-body { flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:10px; } .estela-holly-body::-webkit-scrollbar { width:3px; } .estela-holly-body::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; } .estela-gen-btn { display:flex; align-items:center; gap:7px; padding:10px 14px; border-radius:9px; border:0.5px solid #3ABFBF55; background:#0a2020; color:#7EEAEA; cursor:pointer; font-size:11px; font-family:Georgia,serif; transition:all .15s; width:100%; } .estela-gen-btn:hover { background:#0e2a2a; border-color:#3ABFBF; } .estela-gen-btn i { font-size:13px; color:#3ABFBF; } .estela-gen-options { background:var(--bg3); border:0.5px solid var(--border2); border-radius:9px; padding:10px 12px; } .estela-opt-lbl { font-size:9px; letter-spacing:.09em; text-transform:uppercase; color:var(--text5); margin-bottom:6px; } .estela-opt-row { display:flex; align-items:center; gap:8px; margin-bottom:8px; } .estela-opt-row:last-child { margin-bottom:0; } .estela-opt-row label { font-size:11px; color:var(--text3); flex:1; } .estela-opt-input { width:52px; background:var(--bg4); border:0.5px solid var(--border2); border-radius:5px; padding:3px 7px; color:var(--text); font-size:11px; font-family:Georgia,serif; outline:none; text-align:center; } .estela-opt-input:focus { border-color:#3ABFBF; } .estela-volcar-btn { display:flex; align-items:center; justify-content:center; gap:6px; padding:9px; border-radius:8px; width:100%; border:0.5px solid var(--purple2); background:var(--purple3); color:var(--purple4); cursor:pointer; font-size:11px; font-family:Georgia,serif; transition:all .15s; } .estela-volcar-btn:hover { background:#342d6a; } .estela-volcar-btn:disabled { opacity:.4; cursor:default; } .estela-result-area { background:var(--bg3); border:0.5px solid var(--border); border-radius:9px; padding:10px 12px; display:none; } .estela-result-area.visible { display:block; } .estela-result-title { font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:#3ABFBF; margin-bottom:8px; } .estela-cap-item { display:flex; align-items:flex-start; gap:7px; padding:5px 0; font-size:11px; color:var(--text2); border-bottom:0.5px solid var(--border); border-radius:4px; transition: border .15s, background .15s; } .estela-cap-item:last-child { border-bottom:none; } .estela-cap-item.approved { border:1px solid #1D9E7588 !important; background:#1D9E7509; border-radius:5px; padding:5px 6px; } .estela-cap-item.approved .estela-item-btns { opacity:.3; pointer-events:none; } .estela-cap-item.approved .estela-item-btn.approve { opacity:1 !important; pointer-events:all !important; } .estela-cap-num { font-size:9px; color:var(--text5); min-width:30px; } .estela-item-btns { display:flex; gap:3px; margin-left:auto; flex-shrink:0; } .estela-item-btn { font-size:9px; padding:2px 5px; border-radius:3px; cursor:pointer; border:0.5px solid var(--border2); background:transparent; color:var(--text5); font-family:Georgia,serif; transition: all .12s; } .estela-item-btn:hover { background:var(--bg4); color:var(--text2); } .estela-item-btn.approve { border-color:#1D9E7566; color:#1D9E75; } .estela-item-btn.approve:hover { background:#1D9E7518; } .estela-item-btn.danger { border-color:#e74c3c55; color:#e74c3c; } .estela-item-btn.danger:hover { background:#e74c3c18; } .estela-item-edit-input { width:100%; font-size:11px; background:var(--bg4); border:0.5px solid var(--border2); border-radius:4px; color:var(--text); padding:2px 5px; font-family:Georgia,serif; outline:none; flex:1; } .estela-stage-edit-input { width:100%; font-size:11px; background:var(--bg4); border:0.5px solid #3ABFBF55; border-radius:4px; color:var(--text); padding:2px 6px; font-family:Georgia,serif; outline:none; margin-bottom:4px; box-sizing:border-box; } .estela-entity-empty { font-size:10px; color:var(--text5); font-style:italic; padding:8px 4px; text-align:center; } .estela-entity-card { border:0.5px solid var(--border); border-radius:5px; padding:6px 8px; margin-bottom:6px; cursor:pointer; transition: border .15s, background .15s; } .estela-entity-card:hover { border-color:var(--border2); background:var(--bg4); } .estela-entity-card.approved { border:1px solid #1D9E7588 !important; background:#1D9E7509; } .estela-entity-card.approved .estela-item-btn.approve { opacity:1 !important; pointer-events:all !important; } .estela-entity-card-hdr { display:flex; align-items:center; gap:6px; } .estela-entity-card-body { display:none; padding-top:6px; } .estela-entity-card.expanded .estela-entity-card-body { display:block; } .estela-entity-field { margin-bottom:5px; } .estela-entity-field label { font-size:9px; color:var(--text5); display:block; margin-bottom:2px; letter-spacing:.06em; text-transform:uppercase; } .estela-entity-field textarea, .estela-entity-field input[type=text] { width:100%; font-size:10px; background:var(--bg3); border:0.5px solid var(--border2); border-radius:3px; color:var(--text); padding:3px 5px; font-family:Georgia,serif; outline:none; resize:vertical; box-sizing:border-box; } @keyframes bub-float { 0%,100% { transform:translateY(0); opacity:.6; } 50% { transform:translateY(-4px); opacity:1; } } .bub-anim { display:inline-block; animation:bub-float 1.6s ease-in-out infinite; } .bub-anim:nth-child(2) { animation-delay:.4s; } .bub-anim:nth-child(3) { animation-delay:.8s; } /* Entornos index tree */ .bib-env-tree-item { display:flex; align-items:center; gap:5px; padding:5px 10px; cursor:pointer; user-select:none; font-size:11px; color:var(--text4); transition:background .1s; border-left:2px solid transparent; } .bib-env-tree-item:hover { background:var(--bg3); color:var(--text2); } .bib-env-tree-item.sel-env { background:var(--bg4); border-left-color:var(--amber); color:var(--amber2); } .bib-env-children { display:block; } /* ══════════════════ ESTELA PESTAÑA — Sub-nav y chat creativo ══════════════════ */ .estela-tab-wrap { display:flex; flex-direction:column; flex:1; overflow:hidden; min-height:0; } .estela-subnav { display:flex; align-items:center; gap:0; background:var(--bg2); border-bottom:0.5px solid var(--border); padding:0 12px; height:36px; flex-shrink:0; } .estela-subnav-btn { display:flex; align-items:center; gap:5px; font-size:11px; padding:0 14px; height:100%; border:none; background:transparent; color:var(--text4); cursor:pointer; font-family:Georgia,serif; border-bottom:2px solid transparent; transition:color .15s, border-color .15s; position:relative; white-space:nowrap; } .estela-subnav-btn:hover { color:var(--text2); } .estela-subnav-btn.active { color:#3ABFBF; border-bottom-color:#3ABFBF; } .estela-subnav-btn.locked { color:var(--text5); cursor:default; opacity:.6; } .estela-subnav-btn .lock-badge { font-size:8px; padding:1px 5px; border-radius:3px; background:var(--bg4); border:0.5px solid var(--border2); color:var(--text5); margin-left:2px; letter-spacing:.04em; } .estela-sub-view { display:none; flex:1; overflow:hidden; min-height:0; } .estela-sub-view.active { display:flex; } /* Chat "Imagina con Holly" — zona inferior del borrador */ .estela-imagina-wrap { border-top:0.5px solid var(--border); display:flex; flex-direction:column; background:var(--bg3); flex-shrink:0; max-height:280px; transition: max-height .2s; } .estela-imagina-hdr { display:flex; align-items:center; gap:7px; padding:6px 10px; cursor:pointer; background:var(--bg2); border-bottom:0.5px solid var(--border); flex-shrink:0; user-select:none; } .estela-imagina-hdr:hover { background:var(--bg3); } .estela-imagina-title { font-size:10px; color:#3ABFBF; font-weight:600; letter-spacing:.06em; flex:1; } .estela-imagina-chev { font-size:10px; color:var(--text5); transition:transform .2s; } .estela-imagina-wrap.collapsed .estela-imagina-chev { transform:rotate(-90deg); } .estela-imagina-wrap.collapsed { max-height:32px; } .estela-imagina-msgs { flex:1; overflow-y:auto; padding:8px 10px; display:flex; flex-direction:column; gap:7px; min-height:80px; } .estela-imagina-msgs::-webkit-scrollbar { width:3px; } .estela-imagina-msgs::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; } .imagina-msg { display:flex; gap:7px; font-size:11px; line-height:1.6; animation:imgfade .2s ease; } @keyframes imgfade { from {opacity:0;transform:translateY(4px);} to {opacity:1;transform:none;} } .imagina-msg.user { justify-content:flex-end; } .imagina-msg.user .imagina-bubble { background:var(--bg4); border:0.5px solid var(--border2); color:var(--text2); border-radius:10px 10px 2px 10px; max-width:85%; padding:6px 10px; } .imagina-msg.holly .imagina-bubble { background:#0d2424; border:0.5px solid #3ABFBF33; color:var(--text3); border-radius:10px 10px 10px 2px; max-width:90%; padding:6px 10px; } .imagina-msg.holly .imagina-sender { font-size:9px; font-weight:700; color:#3ABFBF; letter-spacing:.06em; margin-bottom:2px; } .imagina-msg.sys .imagina-bubble { font-size:10px; color:var(--text5); font-style:italic; padding:2px 4px; background:transparent; border:none; max-width:100%; } .estela-imagina-input-row { display:flex; align-items:flex-end; gap:6px; padding:7px 10px; border-top:0.5px solid var(--border); flex-shrink:0; background:var(--bg2); } .estela-imagina-ta { flex:1; resize:none; border:0.5px solid var(--border2); border-radius:8px; background:var(--bg4); color:var(--text); font-family:Georgia,serif; font-size:11px; padding:6px 9px; outline:none; line-height:1.5; max-height:80px; overflow-y:auto; transition:border-color .15s; } .estela-imagina-ta:focus { border-color:#3ABFBF88; } .estela-imagina-ta::placeholder { color:var(--text5); font-style:italic; } .estela-imagina-send { width:30px; height:30px; border-radius:7px; border:0.5px solid #3ABFBF55; background:#0a2020; color:#7EEAEA; cursor:pointer; font-size:13px; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all .15s; } .estela-imagina-send:hover { background:#0e2a2a; border-color:#3ABFBF; } .estela-imagina-loading { font-size:10px; color:var(--text5); font-style:italic; padding:4px 0; display:none; align-items:center; gap:5px; } /* Panel locked state */ .estela-locked-panel { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:40px; text-align:center; color:var(--text5); } .estela-locked-icon { font-size:32px; opacity:.25; margin-bottom:6px; } .estela-locked-title { font-size:13px; font-weight:600; color:var(--text4); margin-bottom:4px; } .estela-locked-desc { font-size:11px; line-height:1.65; font-style:italic; max-width:320px; } .estela-locked-badge { font-size:10px; padding:4px 12px; border-radius:20px; border:0.5px solid var(--border2); color:var(--text4); background:var(--bg3); margin-top:4px; } .settings-gear-btn { margin-left: 8px; width: 30px; height: 30px; border-radius: 7px; background: transparent !important; border: 0.5px solid var(--border); color: var(--text4); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; transition: background .15s, color .15s, border-color .15s, transform .3s; flex-shrink: 0; } .settings-gear-btn:hover { background: var(--bg4); color: var(--text2); border-color: var(--border2); } .settings-gear-btn.open { background: var(--bg4); color: var(--purple4); border-color: var(--purple2); transform: rotate(60deg); } /* ══ ESCENAS — Escenas sugeridas (panel 3) ══ */ .escenas-editor-panel { width:300px; min-width:220px; flex-shrink:0; display:flex; flex-direction:column; overflow:hidden; border-left:0.5px solid var(--border); } .escenas-editor-empty { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:24px; text-align:center; color:var(--text5); } .escenas-editor-empty-icon { font-size:32px; opacity:.2; } .escenas-editor-empty-txt { font-size:11px; font-style:italic; line-height:1.6; } .escenas-editor-body { flex:1; overflow-y:auto; padding:8px 10px; display:flex; flex-direction:column; gap:5px; } .escenas-editor-body::-webkit-scrollbar { width:3px; } .escenas-editor-body::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; } .escenas-ev-card { background:var(--bg3); border:0.5px solid var(--border2); border-radius:8px; padding:7px 9px; position:relative; transition:border-color .12s; cursor:default; } .escenas-ev-card:hover { border-color:var(--border2); } .escenas-ev-card.drag-over { border-color:#EF9F27; background:var(--bg4); } .escenas-ev-card.dragging { opacity:.35; } .escenas-ev-type { font-size:8px; padding:1px 6px; border-radius:3px; border:0.5px solid; display:inline-flex; align-items:center; gap:3px; margin-bottom:5px; font-family:Georgia,serif; letter-spacing:.04em; user-select:none; } .escenas-ev-txt { font-size:11px; color:var(--text2); line-height:1.6; border:0.5px solid transparent; border-radius:4px; padding:3px 5px; outline:none; width:100%; background:transparent; font-family:Georgia,serif; resize:none; min-height:36px; box-sizing:border-box; transition:border-color .15s, background .15s; } .escenas-ev-txt:focus { border-color:var(--border2); background:var(--bg4); } .escenas-ev-del { position:absolute; top:5px; right:6px; background:transparent; border:none; color:var(--text5); cursor:pointer; font-size:11px; padding:2px 4px; border-radius:3px; transition:color .12s; line-height:1; } .escenas-ev-del:hover { color:var(--red2); } .escenas-ev-drag { position:absolute; top:5px; right:24px; color:var(--text5); font-size:11px; cursor:grab; opacity:.35; padding:2px 3px; line-height:1; } .escenas-ev-drag:hover { opacity:.8; } .escenas-editor-footer { flex-shrink:0; padding:8px 10px; background:var(--bg2); border-top:0.5px solid var(--border); display:flex; align-items:center; gap:7px; } /* Escenas en lista dentro del panel Holly — clicables */ .escenas-result-card { background:var(--bg3); border:0.5px solid var(--border2); border-radius:8px; padding:7px 10px; cursor:pointer; transition:border-color .12s, background .12s; margin-bottom:4px; display:flex; align-items:flex-start; gap:7px; } .escenas-result-card:hover { border-color:#EF9F2766; background:var(--bg4); } .escenas-result-card.selected { border-color:#EF9F27; background:var(--bg4); } .escenas-result-card.approved { border-color:#1D9E7588; background:#1D9E7508; } .escenas-result-card-body { flex:1; min-width:0; } .escenas-result-card-title { font-size:11px; font-weight:600; color:var(--text2); } .escenas-result-card.selected .escenas-result-card-title { color:#EF9F27; } .escenas-result-card.approved .escenas-result-card-title { color:var(--green2); } .escenas-result-card-meta { font-size:9px; color:var(--text5); margin-top:2px; font-style:italic; } /* ══ ESCENAS — Items sugeridos dentro de cada escena ══ */ .escena-items-wrap { border-top:0.5px solid var(--border); margin-top:5px; padding-top:5px; } .escena-items-hdr { display:flex; align-items:center; gap:5px; font-size:9px; color:var(--text5); cursor:pointer; user-select:none; padding:2px 0; letter-spacing:.05em; } .escena-items-hdr:hover { color:var(--text3); } .escena-items-hdr .ei-chev { font-size:8px; transition:transform .15s; } .escena-items-hdr.open .ei-chev { transform:rotate(90deg); } .escena-items-list { display:none; margin-top:5px; } .escena-items-hdr.open + .escena-items-list { display:block; } .escena-item-row { display:flex; align-items:flex-start; gap:6px; padding:3px 0; font-size:10px; color:var(--text3); border-bottom:0.5px solid var(--border); line-height:1.5; } .escena-item-row:last-child { border-bottom:none; } .escena-item-type { font-size:8px; padding:1px 5px; border-radius:3px; border:0.5px solid; flex-shrink:0; margin-top:1px; font-family:Georgia,serif; letter-spacing:.03em; } .escena-item-txt { flex:1; min-width:0; } /* ══ PANEL DETALLE — Descripción del capítulo ══ */ .chap-desc-block { padding:10px 12px; border-bottom:0.5px solid var(--border); flex-shrink:0; } .chap-desc-lbl { font-size:8.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--text5); margin-bottom:5px; display:flex; align-items:center; gap:5px; } .chap-desc-lbl i { font-size:10px; color:#3ABFBF; } .chap-desc-ta { width:100%; resize:none; border:0.5px solid var(--border2); border-radius:6px; background:var(--bg4); color:var(--text2); font-family:Georgia,serif; font-size:11px; line-height:1.65; padding:7px 9px; outline:none; box-sizing:border-box; transition:border-color .15s; min-height:66px; } .chap-desc-ta:focus { border-color:#3ABFBF88; } .chap-desc-ta::placeholder { color:var(--text5); font-style:italic; } .chap-desc-ta::-webkit-scrollbar { width:3px; } .chap-desc-ta::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; } .chap-desc-hint { font-size:8px; color:#3ABFBF; margin-top:3px; font-style:italic; opacity:.7; } /* ══════════════════ SETTINGS MODAL OVERLAY ══════════════════ */ .settings-modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 900; display: none; align-items: flex-start; justify-content: flex-end; padding-top: 48px; padding-right: 10px; backdrop-filter: blur(2px); } .settings-modal-bg.open { display: flex; } .settings-modal { background: var(--bg2); border: 0.5px solid var(--border2); border-radius: 14px; width: 780px; max-width: 96vw; max-height: calc(100vh - 70px); overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 20px 70px rgba(0,0,0,0.7); animation: settings-drop-in .18s cubic-bezier(.22,.68,0,1.2); } @keyframes settings-drop-in { from { opacity:0; transform:translateY(-12px) scale(.97); } to { opacity:1; transform:translateY(0) scale(1); } } .settings-modal-hdr { display: flex; align-items: center; gap: 10px; padding: 13px 16px; background: var(--bg3); border-bottom: 0.5px solid var(--border); flex-shrink: 0; } .settings-modal-title { font-size: 13px; font-weight: 600; color: var(--text); flex: 1; letter-spacing: .02em; } .settings-modal-close { width: 24px; height: 24px; border-radius: 50%; background: var(--bg4); border: 0.5px solid var(--border2); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; color: var(--text3); line-height: 1; font-family: sans-serif; } .settings-modal-close:hover { color: var(--text); border-color: var(--purple2); } .settings-modal-body { flex: 1; overflow: hidden; padding: 0; display: flex; flex-direction: row; } .settings-modal-body::-webkit-scrollbar { width: 4px; } .settings-modal-body::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; } .settings-section-lbl { font-size: 9px; letter-spacing: .1em; color: var(--text5); text-transform: uppercase; margin-bottom: 4px; } /* ── v48.5: Sección cuenta en Settings ─────────────────── */ .settings-account-box { background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; } .settings-account-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .settings-account-label { font-size: 11px; color: var(--text4); } .settings-account-value { font-size: 11px; color: var(--text2); font-weight: 600; } /* v64.11.0 — Configuración master-detail (nav fija izq + panel scrolleable der) */ .set-nav { width: 212px; flex-shrink: 0; border-right: 0.5px solid var(--border); background: var(--bg2); padding: 12px 10px; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; } .set-nav-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: none; border-radius: 8px; background: transparent; cursor: pointer; color: var(--text3); font-size: 12.5px; font-weight: 600; font-family: inherit; text-align: left; transition: background .12s, color .12s; } .set-nav-item:hover { background: rgba(127,119,221,.07); color: var(--text); } .set-nav-item.active { background: rgba(127,119,221,.15); color: var(--text); } .set-nav-item .set-nav-ico { font-size: 15px; color: var(--purple4); flex-shrink: 0; } .set-nav-item.danger .set-nav-ico { color: #e07a7a; } .set-detail { flex: 1; overflow-y: auto; padding: 18px 22px; } .set-detail::-webkit-scrollbar { width: 4px; } .set-detail::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; } .set-panel { display: none; } .set-panel.active { display: block; animation: set-panel-in .16s ease; } @keyframes set-panel-in { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } } .set-panel-title { font-size: 14px; font-weight: 700; color: var(--text); margin: 0 0 14px; display: flex; align-items: center; gap: 8px; } .set-panel-title .ti { font-size: 16px; color: var(--purple4); } /* Mobile / angosto: la nav pasa a barra superior horizontal */ @media (max-width: 640px) { .settings-modal-body { flex-direction: column; } .set-nav { width: 100%; flex-direction: row; gap: 4px; border-right: none; border-bottom: 0.5px solid var(--border); overflow-x: auto; overflow-y: hidden; padding: 8px; } .set-nav-item { width: auto; white-space: nowrap; } .set-nav-item .set-nav-txt { display: none; } .set-nav-item.active .set-nav-txt { display: inline; } } .settings-quota-bar-wrap { width: 100%; height: 4px; background: var(--border2); border-radius: 2px; overflow: hidden; margin-top: 2px; } .settings-quota-bar { height: 100%; border-radius: 2px; transition: width .4s ease, background .4s ease; } /* v64.9.0 (Fase D) — Banner de gracia por pago pendiente */ #grace-banner { display: flex; align-items: center; gap: 10px; padding: 9px 16px; background: linear-gradient(0deg, rgba(239,159,39,0.10), rgba(239,159,39,0.10)), var(--bg2, #1a1820); border-bottom: 1px solid rgba(239,159,39,0.45); color: #EF9F27; font-size: 12px; font-weight: 500; } #grace-banner #grace-banner-text strong { color: #f5b94e; font-weight: 700; } #grace-banner #grace-banner-action { flex-shrink: 0; padding: 5px 12px; background: #EF9F27; color: #1a1820; border: none; border-radius: 6px; font-size: 11px; font-weight: 700; cursor: pointer; } #grace-banner #grace-banner-action:hover { filter: brightness(1.08); } #grace-banner #grace-banner-close { flex-shrink: 0; background: transparent; border: none; color: #EF9F27; opacity: .7; font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; } #grace-banner #grace-banner-close:hover { opacity: 1; } .settings-delete-btn { margin-top: 4px; padding: 7px 14px; background: transparent !important; border: 1px solid #c0392b44; border-radius: 6px; color: #c0392b; font-size: 11px; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s; align-self: flex-start; } .settings-delete-btn:hover { background: #c0392b18; border-color: #c0392b88; } /* ── B13: Mi perfil (settings) ───────────────────────── */ .settings-profile-box { background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; padding: 14px; display: flex; flex-direction: column; gap: 12px; } .profile-head { display: flex; align-items: center; gap: 12px; } .profile-avatar { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 700; flex-shrink: 0; border: 1.5px solid currentColor; } .profile-head-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .profile-head-name { font-size: 13px; font-weight: 600; color: var(--text); } .profile-head-sub { font-size: 10px; color: var(--text4); } .profile-field { display: flex; flex-direction: column; gap: 5px; } .profile-field-lbl { font-size: 10px; color: var(--text4); letter-spacing: .04em; } .profile-input { width: 100%; box-sizing: border-box; background: var(--bg2); border: 1px solid var(--border2); border-radius: 6px; padding: 8px 10px; color: var(--text); font-size: 12px; font-family: inherit; transition: border-color .15s; } .profile-input:focus { outline: none; border-color: var(--purple2); } .profile-swatches { display: flex; gap: 7px; flex-wrap: wrap; } .profile-swatch { width: 22px; height: 22px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: transform .12s, border-color .12s; } .profile-swatch:hover { transform: scale(1.12); } .profile-swatch.sel { border-color: var(--text); } .profile-btn { align-self: flex-start; padding: 7px 14px; background: var(--purple3); border: 1px solid var(--purple2); border-radius: 6px; color: var(--purple4); font-size: 11px; font-weight: 600; cursor: pointer; transition: background .15s, opacity .15s; } .profile-btn:hover { background: var(--purple2); color: #fff; } .profile-btn:disabled { opacity: .5; cursor: wait; } .profile-sep { height: 1px; background: var(--border); margin: 2px 0; } .profile-feedback { font-size: 11px; line-height: 1.4; padding: 7px 10px; border-radius: 6px; display: none; } .profile-feedback.ok { display:block; color: var(--green2); background: rgba(93,202,165,.1); } .profile-feedback.err { display:block; color: var(--red2); background: rgba(231,76,60,.1); } /* ── B12: Changelog (novedades) ──────────────────────── */ .settings-link-btn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 14px; border-radius: 8px; background: rgba(127,119,221,.1); border: 0.5px solid rgba(127,119,221,.3); color: var(--purple4); font-size: 12px; font-family: Georgia, serif; cursor: pointer; text-align: left; transition: background .15s; } .settings-link-btn:hover { background: rgba(127,119,221,.2); } .changelog-modal-bg { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 9100; align-items: center; justify-content: center; padding: 24px; backdrop-filter: blur(2px); } .changelog-modal-bg.open { display: flex; } .changelog-modal { background: var(--bg2); border: 0.5px solid var(--border2); border-radius: 14px; width: 560px; max-width: 96vw; max-height: calc(100vh - 80px); overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 20px 70px rgba(0,0,0,.7); } .changelog-hdr { display: flex; align-items: center; gap: 10px; padding: 13px 16px; background: var(--bg3); border-bottom: 0.5px solid var(--border); flex-shrink: 0; } .changelog-title { font-size: 13px; font-weight: 600; color: var(--text); flex: 1; letter-spacing: .02em; } .changelog-body { flex: 1; overflow-y: auto; padding: 18px; } .changelog-body::-webkit-scrollbar { width: 4px; } .changelog-body::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; } .cl-entry { position: relative; padding: 0 0 18px 20px; border-left: 1px solid var(--border2); } .cl-entry:last-child { border-left-color: transparent; padding-bottom: 0; } .cl-entry::before { content: ''; position: absolute; left: -4px; top: 3px; width: 7px; height: 7px; border-radius: 50%; background: var(--purple4); } .cl-entry.latest::before { background: var(--green2); box-shadow: 0 0 0 3px rgba(93,202,165,.18); } .cl-ver { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; } .cl-ver-n { font-size: 13px; font-weight: 700; color: var(--text); font-family: 'EB Garamond', serif; } .cl-ver-tag { font-size: 8px; letter-spacing: .1em; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; background: rgba(93,202,165,.15); color: var(--green2); } .cl-date { font-size: 10px; color: var(--text4); margin-left: auto; } .cl-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .cl-items li { font-size: 12px; line-height: 1.55; color: var(--text2); padding-left: 14px; position: relative; } .cl-items li::before { content: '·'; position: absolute; left: 3px; color: var(--text4); } /* ── v48.5: Modal de confirmación de eliminación de cuenta */ .delete-confirm-bg { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.72); z-index: 9000; align-items: center; justify-content: center; } .delete-confirm-bg.open { display: flex; } .delete-confirm-modal { background: var(--bg2); border: 1px solid #c0392b55; border-radius: 12px; padding: 28px 28px 24px; width: 380px; max-width: 92vw; display: flex; flex-direction: column; gap: 14px; animation: settings-drop-in .18s cubic-bezier(.22,.68,0,1.2); } .delete-confirm-title { font-size: 15px; font-weight: 700; color: #e74c3c; display: flex; align-items: center; gap: 8px; } .delete-confirm-body { font-size: 12px; color: var(--text3); line-height: 1.6; } .delete-confirm-body strong { color: var(--text1); } .delete-confirm-input { width: 100%; padding: 8px 12px; background: var(--bg3); border: 1px solid var(--border2); border-radius: 6px; color: var(--text1); font-size: 12px; outline: none; box-sizing: border-box; transition: border-color .15s; } .delete-confirm-input:focus { border-color: #c0392b88; } .delete-confirm-actions { display: flex; gap: 8px; justify-content: flex-end; } .delete-confirm-cancel { padding: 7px 16px; background: var(--bg3); border: 1px solid var(--border2); border-radius: 6px; color: var(--text3); font-size: 12px; cursor: pointer; } .delete-confirm-ok { padding: 7px 16px; background: #c0392b; border: none; border-radius: 6px; color: #fff; font-size: 12px; font-weight: 700; cursor: pointer; opacity: .4; pointer-events: none; transition: opacity .2s; } .delete-confirm-ok.ready { opacity: 1; pointer-events: auto; } /* ══════════════════ STYLE CARDS GRID ══════════════════ */ .style-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; } .style-card { border-radius: 10px; border: 1.5px solid var(--border); background: var(--bg3); cursor: pointer; overflow: hidden; transition: border-color .18s, box-shadow .18s, transform .15s; display: flex; flex-direction: column; } .style-card:hover { border-color: var(--border2); transform: translateY(-1px); box-shadow: 0 6px 24px rgba(0,0,0,.4); } .style-card.active-style { border-color: var(--purple2) !important; box-shadow: 0 0 0 2px var(--purple3), 0 6px 24px rgba(0,0,0,.4); } .style-card-preview { width: 100%; aspect-ratio: 16/9; overflow: hidden; position: relative; flex-shrink: 0; } .style-preview-iframe { width: 400%; height: 400%; transform: scale(0.25); transform-origin: top left; pointer-events: none; border: none; } .style-card-info { padding: 9px 11px 10px; border-top: 0.5px solid var(--border); } .style-card-name { font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 3px; letter-spacing: .01em; } .style-card-desc { font-size: 10px; color: var(--text4); line-height: 1.5; } .style-card-badge { display: inline-block; margin-top: 5px; font-size: 8.5px; padding: 1px 6px; border-radius: 8px; border: 0.5px solid; letter-spacing: .06em; text-transform: uppercase; } /* Style preview animation */ .style-preview-anim { width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: flex; flex-direction: column; font-family: Georgia, serif; overflow: hidden; } /* ══════════════════ THEME VARIABLES — applied via data-theme ══════════════════ */ /* NEBULA (default — current dark purple) */ #stara-app[data-theme="nebula"], :root:has(#stara-app[data-theme="nebula"]) { --bg: #0f0e14; --bg2: #151320; --bg3: #181625; --bg4: #1e1b2e; --border: #2a2740; --border2: #3d3760; --purple: #7F77DD; --purple2: #534AB7; --purple3: #2a2553; --purple4: #c3b8ff; --green: #1D9E75; --green2: #5DCAA5; --amber: #EF9F27; --amber2: #FAC775; --magma: #ff3c1f; --magma2: #ff6b3d; --red: #c0392b; --red2: #e74c3c; --text: #e2e0ee; --text2: #c8c4dc; --text3: #9996b0; --text4: #6b6880; --text5: #4e4b65; --scene-bg: #13111e; --scene-border:#312e50; --accent-primary: #7F77DD; } /* CODEX — ink dark, amber-gold, serif editorial (biblia style) */ #stara-app[data-theme="codex"], :root:has(#stara-app[data-theme="codex"]) { --bg: #0c0b08; --bg2: #111009; --bg3: #16140c; --bg4: #1c1a10; --border: #2c2818; --border2: #4a4228; --purple: #c8a84b; --purple2: #8a6e2a; --purple3: #2a2010; --purple4: #e8cc88; --green: #5a9e6a; --green2: #8eca9e; --amber: #d4841a; --amber2: #f0a84a; --magma: #c0392b; --magma2: #e05a44; --red: #9e2a1c; --red2: #c44030; --text: #e8e0cc; --text2: #ccc0a0; --text3: #a09070; --text4: #706050; --text5: #504030; --scene-bg: #0e0d07; --scene-border:#3a3018; --accent-primary: #c8a84b; } /* AURORA — nordic light, cool teals, clean */ #stara-app[data-theme="aurora"], :root:has(#stara-app[data-theme="aurora"]) { --bg: #f0f2f5; --bg2: #e4e7ec; --bg3: #d8dce4; --bg4: #cacfe0; --border: #b0b8cc; --border2: #8890a8; --purple: #1a4a88; --purple2: #0f2d5c; --purple3: #c8daf0; --purple4: #0a1e40; --green: #145e3c; --green2: #1a7a50; --amber: #8a4800; --amber2: #a85c00; --magma: #b01800; --magma2: #cc2a10; --red: #8a1008; --red2: #aa1c10; --text: #0d0f14; --text2: #1a1e2c; --text3: #2e3450; --text4: #4a5270; --text5: #6a7290; --scene-bg: #e6eaf0; --scene-border:#a8b0c4; --accent-primary: #1a4a88; } /* OBSIDIAN — OLED black, cool greys, high contrast */ #stara-app[data-theme="obsidian"], :root:has(#stara-app[data-theme="obsidian"]) { --bg: #000000; --bg2: #080808; --bg3: #101010; --bg4: #181818; --border: #282828; --border2: #383838; --purple: #a0a0a0; --purple2: #606060; --purple3: #181818; --purple4: #d8d8d8; --green: #289458; --green2: #48b878; --amber: #c87a10; --amber2: #e89830; --magma: #cc2200; --magma2: #ee4422; --red: #aa1400; --red2: #cc2800; --text: #f0f0f0; --text2: #c8c8c8; --text3: #909090; --text4: #606060; --text5: #404040; --scene-bg: #040404; --scene-border:#2a2a2a; --accent-primary: #909090; } /* SANGRE DE TINTA — deep crimson, gothic, dark red */ #stara-app[data-theme="sangre"], :root:has(#stara-app[data-theme="sangre"]) { --bg: #0e0808; --bg2: #130c0c; --bg3: #1a1010; --bg4: #221414; --border: #3a1a1a; --border2: #542222; --purple: #c0403a; --purple2: #8a2020; --purple3: #2a1010; --purple4: #e88888; --green: #5a8a3a; --green2: #80b060; --amber: #c09030; --amber2: #e0b848; --magma: #ff2200; --magma2: #ff5533; --red: #a01010; --red2: #cc2020; --text: #eee0d8; --text2: #c8b0a8; --text3: #9a8078; --text4: #6a5048; --text5: #4a3030; --scene-bg: #0b0606; --scene-border:#3a1818; --accent-primary: #c0403a; } /* OLIVETTI — warm near-black + amber phosphor + monospace texture */ #stara-app[data-theme="olivetti"], :root:has(#stara-app[data-theme="olivetti"]) { --bg: #100f0a; --bg2: #171610; --bg3: #1e1c14; --bg4: #252218; --border: #342f1e; --border2: #504828; --purple: #d48a1a; --purple2: #8a5a0a; --purple3: #2a1e08; --purple4: #f0c060; --green: #6a9a40; --green2: #90c060; --amber: #cc7a10; --amber2: #e8a030; --magma: #cc2200; --magma2: #ee4020; --red: #9a1a00; --red2: #c03010; --text: #f0d898; --text2: #d4b870; --text3: #a88840; --text4: #786030; --text5: #504018; --scene-bg: #0c0b07; --scene-border:#3a3018; --accent-primary: #d48a1a; } /* ESPACIAL — deep cosmos, nebula blues/magentas, star dust */ #stara-app[data-theme="espacial"], :root:has(#stara-app[data-theme="espacial"]) { --bg: #03020d; --bg2: #060418; --bg3: #0a0720; --bg4: #0f0c28; --border: #1a1540; --border2: #2a2060; --purple: #7060e8; --purple2: #4840c0; --purple3: #14103a; --purple4: #c0b0ff; --green: #20c0a0; --green2: #50e0c0; --amber: #e0a020; --amber2: #f8c040; --magma: #e83060; --magma2: #ff5080; --red: #c02040; --red2: #e04060; --text: #e8e0ff; --text2: #c0b8f0; --text3: #8880c0; --text4: #585090; --text5: #383060; --scene-bg: #040210; --scene-border:#201860; --accent-primary: #7060e8; } /* ══ SAVE INDICATOR ══ */ #save-indicator { position: fixed; bottom: 14px; right: 14px; background: var(--bg4); border: 0.5px solid var(--green); color: var(--green2); font-size: 10px; padding: 4px 10px; border-radius: 6px; opacity: 0; transition: opacity .3s; pointer-events: none; z-index: 9999; font-family: Georgia, serif; } #save-indicator.visible { opacity: 1; } /* ══ TOAST ══ */ .stara-toast { position: fixed; bottom: 44px; right: 14px; background: var(--bg4); border: 0.5px solid var(--border2); color: var(--text2); font-size: 11px; padding: 7px 14px; border-radius: 7px; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; pointer-events: none; z-index: 9999; font-family: Georgia, serif; max-width: 280px; /* B3: soporte para ícono + texto en línea */ display: flex; align-items: center; gap: 7px; border-left: 3px solid var(--border2); } .stara-toast.visible { opacity: 1; transform: translateY(0); } /* B3: ícono del toast */ .stara-toast .toast-ico { flex: 0 0 auto; font-style: normal; font-size: 12px; line-height: 1; font-family: Georgia, serif; } .stara-toast .toast-msg { flex: 1 1 auto; } /* B3: tipos diferenciados — usan variables del tema activo */ .stara-toast.toast-success { border-left-color: var(--green); color: var(--green2); } .stara-toast.toast-error { border-left-color: var(--red2); color: var(--red2); } .stara-toast.toast-warning { border-left-color: var(--amber); color: var(--amber2); } .stara-toast.toast-info { border-left-color: var(--purple); color: var(--purple4); } /* tipo neutro/por defecto — mantiene el aspecto original */ .stara-toast.toast-default { border-left-color: var(--border2); color: var(--text2); } /* ══ CRUD MINI-BUTTONS (inline en encabezados de panel) ══ */ .crud-btn { font-size: 10px; padding: 2px 7px; border-radius: 4px; background: transparent !important; border: 0.5px solid var(--border2); color: var(--text4); cursor: pointer; font-family: Georgia, serif; transition: background .12s, color .12s; } .crud-btn:hover { background: var(--bg4); color: var(--purple4); } .crud-btn-danger:hover { background: var(--red)22; color: var(--red2); border-color: var(--red); } /* ══ TOPBAR SAVE / EXPORT BUTTONS ══ */ .tb-save-btn { font-size: 11px; padding: 4px 10px; border-radius: 5px; border: 0.5px solid var(--green); background: var(--green)22; color: var(--green2); cursor: pointer; font-family: Georgia, serif; transition: background .12s; } .tb-save-btn:hover { background: var(--green)44; } /* ══ NEW EVENT TYPE COLORS ══ */ .ev-reflex { border-left:2px solid #9996b0 !important; } .ev-enfoque { border-left:2px solid #c084fc !important; } .ev-holly { border-left:2px solid #5DCAA5 !important; background: #0a1a14 !important; } .ev-contexto{ border-left:2px solid #ff6b3d !important; background: #1a0d08 !important; } .ev-contexto .ev-label { font-style:italic; } .ev-holly .ev-label { opacity:.8; } /* ══ EVENT TYPE PICKER ══ */ .ev-type-picker { position:absolute; z-index:999; background:var(--bg3); border:0.5px solid var(--border2); border-radius:10px; padding:6px; box-shadow:0 8px 28px #00000077; display:flex; flex-direction:column; gap:3px; min-width:200px; } .ev-type-picker-row { display:flex; align-items:center; gap:8px; padding:6px 10px; border-radius:7px; cursor:pointer; transition:background .1s; font-size:11px; color:var(--text3); font-family:Georgia,serif; } .ev-type-picker-row:hover { background:var(--bg4); color:var(--text); } .ev-type-picker-row .pick-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; } .ev-type-picker-row .pick-lbl { flex:1; } .ev-type-picker-row .pick-desc { font-size:9px; color:var(--text5); text-align:right; max-width:100px; line-height:1.3; } /* ══ WORD COUNT CELLS (p2 header) ══ */ .wc-cells { display:flex; gap:3px; align-items:center; margin-left:auto; } .wc-cell { display:flex; flex-direction:column; align-items:center; background:var(--bg4); border:0.5px solid var(--border); border-radius:5px; padding:2px 6px; cursor:pointer; } .wc-cell-lbl { font-size:7px; letter-spacing:.07em; color:var(--text5); text-transform:uppercase; } .wc-cell-val { font-size:11px; font-weight:600; color:var(--text3); background:transparent; border:none; outline:none; width:52px; text-align:center; font-family:Georgia,serif; cursor:text; } .wc-cell-val:focus { color:var(--text); } .wc-cell.nm-cell { border-color:var(--red)44; } .wc-cell.no-cell { border-color:var(--purple)44; } .wc-cell.nm2-cell { border-color:var(--green)44; } /* ══ BINDER SECTIONS (Borrador / Manuscrito) ══ */ .binder-section-hdr { font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--text5); padding:8px 10px 4px; display:flex; align-items:center; gap:5px; } .binder-sep { height:5px; background:transparent; margin:0; flex-shrink:0; cursor:row-resize; position:relative; display:flex; align-items:center; justify-content:center; } .binder-sep::after { content:''; display:block; width:32px; height:1px; background:var(--border2); border-radius:2px; transition:background .15s; } .binder-sep:hover::after { background:var(--purple); } .binder-sep.dragging::after { background:var(--purple4); } .draft-ver-row { display:flex; align-items:center; gap:5px; padding:3px 8px 3px 14px; font-size:10px; color:var(--text4); cursor:pointer; transition:background .1s; border-radius:4px; } .draft-ver-row:hover { background:var(--bg4); } .draft-ver-row.green-ver { color:var(--green2); } .draft-ver-badge { font-size:8px; padding:1px 5px; border-radius:3px; background:var(--bg4); border:0.5px solid var(--border); color:var(--text5); margin-left:auto; } .scene-done-btn { font-size:9px; padding:1px 5px; border-radius:4px; border:0.5px solid var(--border2); background:transparent; color:var(--text5); cursor:pointer; transition:all .12s; } .scene-done-btn.done { border-color:var(--green); color:var(--green2); } /* ══ EVENT DETAIL PANEL (p4 detail view) ══ */ .ev-detail-panel { padding:12px 14px; display:flex; flex-direction:column; gap:10px; } .ev-detail-type-badge { font-size:9px; padding:2px 8px; border-radius:4px; border:0.5px solid; display:inline-flex; align-items:center; gap:4px; font-family:Georgia,serif; letter-spacing:.05em; width:fit-content; } .ev-detail-lbl { font-size:8.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--text5); margin-bottom:3px; } .ev-detail-txt { font-size:12px; color:var(--text2); line-height:1.75; background:var(--bg); border:0.5px solid var(--border); border-radius:7px; padding:8px 10px; outline:none; min-height:60px; cursor:text; transition:border-color .15s; font-family:Georgia,serif; white-space:pre-wrap; } .ev-detail-txt:focus { border-color:var(--purple2); } /* ══ CHARACTER CATEGORY & COHERENCE ══ */ .char-cat-badge { font-size:8px; padding:1px 6px; border-radius:3px; border:0.5px solid; font-family:Georgia,serif; letter-spacing:.05em; text-transform:uppercase; white-space:nowrap; } .coef-score { font-size:11px; font-weight:700; padding:2px 7px; border-radius:5px; border:0.5px solid; font-family:Georgia,serif; display:inline-flex; align-items:center; gap:3px; white-space:nowrap; } .coef-score.coef-green { color:#1D9E75; border-color:#1D9E7544; background:#1D9E7511; } .coef-score.coef-lgreen { color:#5DCAA5; border-color:#5DCAA544; background:#5DCAA511; } .coef-score.coef-yellow { color:#EF9F27; border-color:#EF9F2744; background:#EF9F2711; } .coef-score.coef-orange { color:#ff6b3d; border-color:#ff6b3d44; background:#ff6b3d11; } .coef-score.coef-red { color:#ff3c1f; border-color:#ff3c1f44; background:#ff3c1f11; } .coef-score.coef-none { color:var(--text5); border-color:var(--border); background:transparent; } /* ══ BIB ENTORNO SIDE PANEL ══ */ #bib-env-side-panel { position:absolute; top:0; right:0; width:280px; height:100%; background:var(--bg2); border-left:0.5px solid var(--border2); overflow-y:auto; z-index:10; display:none; flex-direction:column; } #bib-env-side-panel .env-side-hdr { padding:10px 14px; background:var(--bg3); border-bottom:0.5px solid var(--border); display:flex; align-items:center; gap:6px; flex-shrink:0; position:sticky; top:0; z-index:1; } /* ══════════════════ PROJECT DROPDOWN ══════════════════ */ .proj-dropdown-wrap { position: relative; } .proj-dropdown-btn { display: flex; align-items: center; font-size: 11px; padding: 4px 10px; background: var(--purple3); color: var(--purple4); border-radius: 5px; border: 0.5px solid var(--purple2); cursor: pointer; font-family: Georgia, serif; transition: background .15s; white-space: nowrap; user-select: none; } .proj-dropdown-btn:hover { background: #3a3070; } .proj-menu { display: none; position: absolute; top: calc(100% + 6px); right: 0; min-width: 200px; background: var(--bg2); border: 0.5px solid var(--border2); border-radius: 8px; box-shadow: 0 8px 28px #00000055; z-index: 200; overflow: hidden; } .proj-menu.open { display: block; } .proj-menu-item { display: flex; align-items: center; gap: 8px; padding: 9px 14px; font-size: 11px; color: var(--text2); cursor: pointer; transition: background .12s; font-family: Georgia, serif; } .proj-menu-item:hover { background: var(--bg3); color: var(--text); } .proj-menu-item i { font-size: 12px; color: var(--text4); } .proj-menu-sep { height: 0.5px; background: var(--border); margin: 2px 0; } .proj-menu-new { color: var(--green2); } .proj-menu-new i { color: var(--green2); } /* ══════════════════ PROJECT MODAL BASE ══════════════════ */ .proj-modal-bg { display: none; position: fixed; inset: 0; z-index: 500; background: #00000066; backdrop-filter: blur(4px); align-items: center; justify-content: center; } .proj-modal-bg.open { display: flex; } .proj-modal { background: var(--bg2); border: 0.5px solid var(--border2); border-radius: 14px; box-shadow: 0 16px 48px #00000088; display: flex; flex-direction: column; max-height: 88vh; overflow: hidden; } .proj-modal-hdr { display: flex; align-items: center; gap: 9px; padding: 14px 18px; border-bottom: 0.5px solid var(--border); background: var(--bg3); flex-shrink: 0; } .proj-modal-title { font-size: 12px; font-weight: 700; color: var(--purple4); letter-spacing: .06em; flex: 1; } .proj-modal-close { width: 24px; height: 24px; border-radius: 5px; cursor: pointer; background: transparent !important; border: 0.5px solid var(--border); color: var(--text4); display: flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1; transition: color .12s, border-color .12s; } .proj-modal-close:hover { color: var(--text); border-color: var(--border2); } .proj-modal-body { flex: 1; overflow-y: auto; padding: 18px; } .proj-modal-body::-webkit-scrollbar { width: 3px; } .proj-modal-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; } /* ═══════════ B2 — SISTEMA showModal ═══════════ */ .stara-modal-bg { display: none; position: fixed; inset: 0; z-index: 4000; background: #00000077; backdrop-filter: blur(4px); align-items: center; justify-content: center; opacity: 0; transition: opacity .16s ease; } .stara-modal-bg.open { display: flex; opacity: 1; } .stara-modal { background: var(--bg2); border: 0.5px solid var(--border2); border-radius: 14px; box-shadow: 0 16px 48px #000000aa; display: flex; flex-direction: column; max-width: 92vw; max-height: 88vh; overflow: hidden; transform: translateY(6px) scale(.98); transition: transform .16s ease; font-family: Georgia, serif; } .stara-modal-bg.open .stara-modal { transform: translateY(0) scale(1); } .stara-modal-hdr { display: flex; align-items: center; gap: 9px; padding: 13px 17px; border-bottom: 0.5px solid var(--border); background: var(--bg3); flex-shrink: 0; } .stara-modal-title { font-size: 12px; font-weight: 700; letter-spacing: .06em; flex: 1; } .stara-modal-close { width: 24px; height: 24px; border-radius: 5px; cursor: pointer; background: transparent; border: 0.5px solid var(--border); color: var(--text4); display: flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1; transition: color .12s, border-color .12s; } .stara-modal-close:hover { color: var(--text); border-color: var(--border2); } .stara-modal-body { padding: 18px 17px; overflow-y: auto; } .stara-modal-msg { font-size: 13px; color: var(--text2); line-height: 1.55; white-space: normal; word-break: break-word; } .stara-modal-input { width: 100%; margin-top: 12px; background: var(--bg3); border: 0.5px solid var(--border2); border-radius: 7px; color: var(--text); font-size: 13px; padding: 9px 11px; outline: none; font-family: Georgia, serif; resize: vertical; transition: border-color .15s; box-sizing: border-box; } .stara-modal-input:focus { border-color: var(--purple); } .stara-modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 17px 15px; border-top: 0.5px solid var(--border); flex-shrink: 0; } .stara-modal-btn { padding: 8px 16px; border-radius: 7px; font-size: 11px; cursor: pointer; font-family: Georgia, serif; letter-spacing: .04em; transition: background .15s, border-color .15s, color .15s; } .stara-modal-cancel { background: transparent; border: 0.5px solid var(--border2); color: var(--text3); } .stara-modal-cancel:hover { border-color: var(--text4); color: var(--text); } .stara-modal-ok { background: var(--purple2); border: 0.5px solid var(--purple2); color: var(--purple4); font-weight: 600; } .stara-modal-ok:hover { background: var(--purple); } .stara-modal-ok.danger { background: transparent; border-color: var(--red2); color: var(--red2); } .stara-modal-ok.danger:hover { background: var(--red2); color: #fff; } /* PROJECT DATA MODAL */ #proj-data-modal .proj-modal { width: 560px; } .proj-data-field { margin-bottom: 14px; } .proj-data-lbl { font-size: 10px; letter-spacing: .06em; color: var(--text4); text-transform: uppercase; margin-bottom: 5px; } .proj-data-input { width: 100%; background: var(--bg3); border: 0.5px solid var(--border2); border-radius: 7px; color: var(--text); font-size: 13px; padding: 8px 10px; outline: none; font-family: Georgia, serif; resize: none; transition: border-color .15s; } .proj-data-input:focus { border-color: var(--purple); } .proj-stats-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 4px; } .proj-stat-card { background: var(--bg3); border: 0.5px solid var(--border); border-radius: 8px; padding: 10px 12px; text-align: center; } .proj-stat-val { font-size: 22px; font-weight: 700; color: var(--purple4); font-family: Georgia, serif; } .proj-stat-lbl { font-size: 9px; color: var(--text4); letter-spacing: .06em; text-transform: uppercase; margin-top: 2px; } .proj-stat-card.green .proj-stat-val { color: var(--green2); } .proj-stat-card.amber .proj-stat-val { color: var(--amber2); } .proj-data-save-btn { width: 100%; padding: 9px; background: var(--purple2); border: none; border-radius: 7px; color: var(--purple4); font-size: 11px; font-family: Georgia, serif; cursor: pointer; letter-spacing: .05em; transition: background .15s; margin-top: 6px; } .proj-data-save-btn:hover { background: var(--purple); } .proj-data-section-lbl { font-size: 10px; letter-spacing: .1em; color: var(--purple); text-transform: uppercase; margin: 18px 0 10px; border-top: 0.5px solid var(--border); padding-top: 14px; } /* SWITCH PROJECT MODAL */ #proj-switch-modal .proj-modal { width: 480px; } .proj-list { display: flex; flex-direction: column; gap: 8px; } .proj-list-item { display: flex; align-items: center; gap: 10px; background: var(--bg3); border: 0.5px solid var(--border); border-radius: 9px; padding: 11px 14px; cursor: pointer; transition: border-color .15s, background .15s; } .proj-list-item:hover { border-color: var(--purple2); background: var(--bg4); } .proj-list-item.active { border-color: var(--purple); background: var(--purple3)44; } .proj-list-icon { width: 34px; height: 34px; border-radius: 8px; background: var(--purple3); display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; } .proj-list-name { font-size: 12px; color: var(--text); font-family: Georgia, serif; } .proj-list-meta { font-size: 10px; color: var(--text4); margin-top: 1px; } .proj-list-badge { margin-left: auto; font-size: 9px; padding: 2px 7px; background: var(--purple3); color: var(--purple4); border-radius: 10px; border: 0.5px solid var(--purple2); white-space: nowrap; } /* NEW PROJECT MODAL */ #proj-new-modal .proj-modal { width: 440px; } .proj-new-emoji-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .proj-emoji-btn { width: 36px; height: 36px; border-radius: 8px; font-size: 18px; background: var(--bg3); border: 0.5px solid var(--border); cursor: pointer; transition: border-color .12s, background .12s; display: flex; align-items: center; justify-content: center; } .proj-emoji-btn:hover { border-color: var(--purple2); background: var(--bg4); } .proj-emoji-btn.sel { border-color: var(--purple); background: var(--purple3); } .proj-create-btn { width: 100%; padding: 10px; background: var(--green); border: none; border-radius: 7px; color: #fff; font-size: 12px; font-family: Georgia, serif; cursor: pointer; letter-spacing: .04em; transition: background .15s; margin-top: 10px; } .proj-create-btn:hover { background: var(--green2); color: #111; } /* ══════════════════ HOLLY TAB ══════════════════ */ #view-holly { flex-direction: column; background: var(--bg); } .holly-tab-wrap { display: flex; flex: 1; overflow: hidden; } .holly-tab-sidebar { width: 260px; flex-shrink: 0; background: var(--bg2); border-right: 0.5px solid var(--border); display: flex; flex-direction: column; overflow: hidden; } .holly-tab-sidebar-hdr { padding: 12px 14px 8px; border-bottom: 0.5px solid var(--border); flex-shrink: 0; } .holly-tab-sidebar-title { font-size: 11px; color: var(--purple4); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; display: flex; align-items: center; justify-content: space-between; } .holly-new-chat-btn { font-size: 9px; padding: 3px 8px; border-radius: 5px; background: var(--purple3); color: var(--purple4); border: 0.5px solid var(--purple2); cursor: pointer; font-family: Georgia, serif; transition: background .12s; display: flex; align-items: center; gap: 4px; } .holly-new-chat-btn:hover { background: var(--purple2); } .holly-search-wrap { margin-top: 8px; position: relative; } .holly-search-input { width: 100%; background: var(--bg3); border: 0.5px solid var(--border); border-radius: 6px; color: var(--text2); font-size: 11px; padding: 5px 8px 5px 26px; outline: none; font-family: Georgia, serif; } .holly-search-input:focus { border-color: var(--purple); } .holly-search-icon { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); color: var(--text5); font-size: 11px; pointer-events: none; } .holly-tab-list { flex: 1; overflow-y: auto; padding: 6px 0; } .holly-tab-list::-webkit-scrollbar { width: 3px; } .holly-tab-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; } .holly-chat-item { display: flex; align-items: flex-start; gap: 8px; padding: 8px 14px; cursor: pointer; transition: background .12s; border-left: 2px solid transparent; } .holly-chat-item:hover { background: var(--bg3); } .holly-chat-item.active { background: var(--bg3); border-left-color: var(--purple); } .holly-chat-item-icon { width: 28px; height: 28px; border-radius: 7px; background: var(--purple3); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--purple4); flex-shrink: 0; margin-top: 1px; font-family: Georgia, serif; } .holly-chat-item-icon.green { background: rgba(29,158,117,.2); color: var(--green2); } .holly-chat-item-info { flex: 1; min-width: 0; } .holly-chat-item-name { font-size: 11px; color: var(--text); font-family: Georgia, serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .holly-chat-item-preview { font-size: 10px; color: var(--text4); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .holly-chat-item-meta { font-size: 9px; color: var(--text5); margin-top: 2px; display: flex; align-items: center; gap: 4px; } .holly-chat-tag { font-size: 8px; padding: 1px 5px; border-radius: 8px; background: var(--bg4); color: var(--text4); border: 0.5px solid var(--border); } .holly-tab-section-lbl { font-size: 9px; letter-spacing: .1em; color: var(--text5); text-transform: uppercase; padding: 8px 14px 4px; } .holly-tab-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: var(--bg); } .holly-tab-chat-area { flex: 1; overflow-y: auto; padding: 24px 32px; } .holly-tab-chat-area::-webkit-scrollbar { width: 3px; } .holly-tab-chat-area::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; } .holly-tab-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 12px; color: var(--text5); font-family: Georgia, serif; text-align: center; } .holly-tab-empty-icon { font-size: 48px; opacity: .3; } .holly-tab-empty-title { font-size: 16px; color: var(--text3); } .holly-tab-empty-sub { font-size: 12px; max-width: 320px; line-height: 1.6; } .holly-tab-chat-hdr { padding: 10px 16px; background: var(--bg2); border-bottom: 0.5px solid var(--border); flex-shrink: 0; display: flex; align-items: center; gap: 10px; } .holly-tab-chat-hdr-name { font-size: 12px; color: var(--text); font-family: Georgia, serif; font-weight: 700; flex: 1; } .holly-tab-chat-hdr-meta { font-size: 10px; color: var(--text4); } .holly-tab-input-area { border-top: 0.5px solid var(--border); padding: 12px 16px; background: var(--bg2); flex-shrink: 0; display: flex; gap: 8px; align-items: flex-end; } .holly-tab-input { flex: 1; background: var(--bg3); border: 0.5px solid var(--border2); border-radius: 8px; color: var(--text); font-size: 12px; padding: 9px 12px; outline: none; font-family: Georgia, serif; resize: none; max-height: 120px; min-height: 38px; transition: border-color .15s; } .holly-tab-input:focus { border-color: var(--purple); } .holly-tab-send-btn { width: 36px; height: 36px; border-radius: 8px; background: var(--purple2); border: none; color: var(--purple4); cursor: pointer; font-size: 14px; transition: background .12s; display: flex; align-items: center; justify-content: center; } .holly-tab-send-btn:hover { background: var(--purple); } .holly-tab-msg { margin-bottom: 14px; display: flex; flex-direction: column; } .holly-tab-msg.user { align-items: flex-end; } .holly-tab-msg.holly { align-items: flex-start; } .holly-tab-bubble { max-width: 75%; padding: 10px 14px; border-radius: 12px; font-size: 13px; line-height: 1.7; font-family: Georgia, serif; } .holly-tab-msg.user .holly-tab-bubble { background: var(--purple2); color: var(--purple4); border-radius: 12px 12px 2px 12px; } .holly-tab-msg.holly .holly-tab-bubble { background: var(--bg2); border: 0.5px solid var(--border2); color: var(--text2); border-radius: 12px 12px 12px 2px; } .holly-tab-msg-meta { font-size: 9px; color: var(--text5); margin-top: 3px; } .holly-tag-row { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 4px; } .holly-tag-pick { font-size: 9px; padding: 2px 8px; border-radius: 8px; background: var(--bg3); color: var(--text4); border: 0.5px solid var(--border); cursor: pointer; transition: border-color .12s, color .12s; } .holly-tag-pick:hover, .holly-tag-pick.sel { border-color: var(--purple); color: var(--purple4); background: var(--purple3); } .holly-chat-proj-badge { font-size: 9px; padding: 2px 7px; border-radius: 8px; background: var(--green)22; color: var(--green2); border: 0.5px solid var(--green)44; } .holly-tab-side-actions { padding: 8px 10px; border-top: 0.5px solid var(--border); flex-shrink: 0; display: flex; flex-direction: column; gap: 5px; } .holly-side-btn { display: flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 6px; cursor: pointer; font-size: 10px; color: var(--text4); font-family: Georgia, serif; transition: background .12s, color .12s; background: transparent !important; border: none; width: 100%; text-align: left; } .holly-side-btn:hover { background: var(--bg3); color: var(--text2); } /* ══════════════════ HOLLY SPHERE — nuevo chat btn ══════════════════ */ .holly-sphere-new-btn { display: none; align-items: center; justify-content: center; gap: 4px; width: 100%; padding: 5px 0; background: var(--green)22; border-top: 0.5px solid var(--border); color: var(--green2); font-size: 9px; cursor: pointer; font-family: Georgia, serif; transition: background .12s; letter-spacing: .04em; } .holly-sphere-new-btn:hover { background: var(--green)33; } .holly-chat.open .holly-sphere-new-btn { display: flex; } /* ══════════════════ ABOUT TAB ══════════════════ */ @import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap'); #view-about { flex-direction: column; overflow-y: auto; background: var(--bg); position: relative; } #view-about::before { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse 80% 60% at 15% 20%, rgba(107,95,232,0.07) 0%, transparent 70%), radial-gradient(ellipse 60% 50% at 85% 80%, rgba(29,158,117,0.05) 0%, transparent 70%); pointer-events: none; z-index: 0; } .about-wrap { position: relative; z-index: 1; max-width: 780px; margin: 0 auto; padding: 60px 40px 100px; font-family: 'EB Garamond', Georgia, serif; font-size: 18px; line-height: 1.85; } .about-header { display: flex; flex-direction: column; align-items: center; margin-bottom: 70px; text-align: center; } .about-logo-wrap { margin-bottom: 40px; } .about-header-rule { width: 1px; height: 50px; background: linear-gradient(to bottom, transparent, var(--border), transparent); margin: 0 auto 40px; } .about-section { margin-bottom: 64px; opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; } .about-section.ab-visible { opacity: 1; transform: translateY(0); } .about-section-label { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--text3); margin-bottom: 18px; display: flex; align-items: center; gap: 14px; } .about-section-label::after { content: ''; flex: 1; height: 0.5px; background: var(--border); } .about-h1 { font-size: 44px; font-weight: 400; color: #e8e6ff; letter-spacing: .04em; line-height: 1.15; margin-bottom: 20px; font-family: 'EB Garamond', Georgia, serif; } .about-h2 { font-size: 24px; font-weight: 500; color: var(--purple4); letter-spacing: .02em; margin-bottom: 14px; line-height: 1.3; font-family: 'EB Garamond', Georgia, serif; } .about-h3 { font-size: 13px; font-weight: 500; color: var(--green2); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 8px; margin-top: 28px; font-family: 'EB Garamond', Georgia, serif; } .about-h3:first-child { margin-top: 0; } .about-p { color: var(--text); margin-bottom: 16px; font-size: 17px; line-height: 1.8; font-family: 'EB Garamond', Georgia, serif; } .about-p:last-child { margin-bottom: 0; } .about-vision-quote { font-size: 24px; font-style: italic; color: #e8e6ff; line-height: 1.5; border-left: 2px solid var(--purple2); padding-left: 26px; margin: 6px 0 22px; font-family: 'EB Garamond', Georgia, serif; } .about-pillar { background: rgba(107,95,232,0.04); border: 0.5px solid var(--border); border-left: 2px solid var(--purple2); border-radius: 4px; padding: 20px 24px; margin-bottom: 14px; } .about-pillar:last-child { margin-bottom: 0; } .about-pillar .about-h3 { color: var(--purple4); margin-top: 0; margin-bottom: 6px; font-size: 12px; letter-spacing: .12em; } .about-pillar .about-p { font-size: 15.5px; color: var(--text2); margin: 0; } .about-holly-box { background: rgba(29,158,117,0.04); border: 0.5px solid rgba(29,158,117,0.2); border-left: 2px solid var(--green); border-radius: 4px; padding: 26px 28px; margin-top: 6px; } .about-holly-box .about-h3 { color: var(--green2); margin-top: 0; } .about-for-list { list-style: none; padding: 0; margin: 0; } .about-for-list li { font-size: 16.5px; color: var(--text2); padding: 9px 0; border-bottom: 0.5px solid var(--border); display: flex; align-items: baseline; gap: 12px; font-family: 'EB Garamond', Georgia, serif; } .about-for-list li:last-child { border-bottom: none; } .about-for-list li::before { content: '→'; color: var(--purple); font-size: 13px; flex-shrink: 0; } .about-for-list li span { color: var(--purple4); font-style: italic; } .about-values-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; } .about-value-card { background: rgba(255,255,255,0.02); border: 0.5px solid var(--border); border-radius: 4px; padding: 16px 18px; } .about-value-card strong { display: block; font-size: 12px; font-weight: 500; color: var(--purple4); letter-spacing: .06em; margin-bottom: 7px; font-family: 'EB Garamond', Georgia, serif; } .about-value-card .about-p { font-size: 14.5px; color: var(--text2); margin: 0; line-height: 1.6; } .about-celda-box { background: rgba(255,255,255,0.015); border: 0.5px solid var(--border); border-radius: 6px; padding: 28px 32px; font-style: italic; color: var(--text2); font-size: 16px; line-height: 1.75; font-family: 'EB Garamond', Georgia, serif; } .about-celda-box strong { font-style: normal; color: var(--purple4); } .about-footer { margin-top: 80px; padding-top: 36px; border-top: 0.5px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 20px; } .about-footer-brand { font-size: 12px; color: var(--text4); font-style: italic; letter-spacing: .04em; } .about-footer-copy { font-size: 11px; color: var(--text4); letter-spacing: .04em; } /* Holly panel expandible */ .holly-chat.expanded { width: 480px !important; max-width: 90vw; } .holly-chat.expanded .chat-msgs, .holly-chat.expanded .holly-msgs { max-height: none !important; flex: 1; min-height: 0; } .holly-expand-btn { cursor: pointer; color: var(--text4); font-size: 11px; padding: 0 4px; opacity: 0.6; transition: opacity 0.2s; user-select: none; } .holly-expand-btn:hover { opacity: 1; } /* ── Holly panel: flotante resizable ── */ .holly-panel { position: fixed !important; bottom: 14px; right: 14px; z-index: 9000 !important; } .holly-panel .holly-btn { width: 38px; height: 38px; border-radius: 50%; background: var(--purple3); border: 1.5px solid var(--purple); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px; font-weight: 700; color: var(--purple4); box-shadow: 0 4px 16px #7F77DD33; user-select: none; } .holly-panel .holly-btn:hover { background: #342d6a; } /* Holly chat flotante — posición y tamaño inicial */ .holly-panel .holly-chat { position: fixed !important; bottom: 58px; right: 14px; width: 310px; height: 380px; min-width: 240px; min-height: 200px; max-width: 90vw; max-height: 90vh; z-index: 9000 !important; display: none; flex-direction: column; background: #13111f; border: 1px solid var(--border2); border-radius: 16px; overflow: hidden; box-shadow: 0 8px 32px #00000088; /* resize handle via JS — no CSS resize to keep border-radius */ } .holly-panel .holly-chat.open { display: flex; } /* Resize handle — top-left corner triangle */ .holly-resize-handle { position: absolute; top: 0; left: 0; width: 20px; height: 20px; cursor: nwse-resize; z-index: 10; opacity: 0; transition: opacity 0.15s; } .holly-panel .holly-chat:hover .holly-resize-handle, .holly-panel .holly-chat.open .holly-resize-handle { opacity: 1; } .holly-resize-handle::after { content: ''; position: absolute; top: 5px; left: 5px; width: 10px; height: 10px; border-top: 1.5px solid var(--purple2); border-left: 1.5px solid var(--purple2); border-radius: 2px 0 0 0; } /* Holly drag header — el header arrastra toda la ventana */ .holly-hdr { cursor: grab; } .holly-hdr:active { cursor: grabbing; } /* Holly msgs resizable area */ .holly-msgs { overflow-y: auto; flex: 1; min-height: 60px; } .holly-msgs::-webkit-scrollbar { width: 2px; } .holly-msgs::-webkit-scrollbar-thumb { background: var(--border); } /* chat-msgs scrollable */ .chat-msgs { overflow-y: auto; flex: 1; } /* Input auto-expand */ .chat-input-auto, .holly-in-auto { flex: 1; background: var(--bg4); border: 0.5px solid var(--border2); border-radius: 8px; padding: 5px 9px; font-size: 11px; color: var(--text); outline: none; font-family: Georgia, serif; resize: none; min-height: 28px; max-height: 120px; overflow-y: auto; line-height: 1.4; } .chat-input-auto::placeholder, .holly-in-auto::placeholder { color: var(--text5); } .chat-input-auto:focus, .holly-in-auto:focus { border-color: var(--purple2); } /* ── Bosque: colapso de capítulos y escenas ── */ .chap-sep { cursor: pointer; user-select: none; } .chap-sep:hover .chap-sep-label { color: var(--purple4); } .chap-sep .collapse-icon { font-size: 9px; margin-left: 6px; color: var(--text5); transition: transform 0.2s; } .chap-sep.collapsed .collapse-icon { transform: rotate(-90deg); } .chap-block-content { transition: none; } .chap-block-content.collapsed { display: none; } .scene-group { position: relative; } .scene-lbl { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 4px; } .scene-lbl:hover { color: var(--text1); } .scene-lbl .scene-collapse-icon { font-size: 8px; color: var(--text5); transition: transform 0.2s; } .scene-lbl.collapsed .scene-collapse-icon { transform: rotate(-90deg); } .scene-events-wrap.collapsed { display: none; } /* ── Bosque: top bar (unified header + filter) ── */ .bosque-topbar { display: flex; flex-shrink: 0; height: 54px; /* taller to fit two rows in timeline cell */ background: var(--bg2); border-bottom: 0.5px solid var(--border); z-index: 15; overflow: hidden; align-items: stretch; } .bosque-topbar-cell { display: flex; align-items: center; gap: 5px; padding: 0 10px; border-right: 0.5px solid var(--border); overflow: hidden; flex-shrink: 0; white-space: nowrap; } .bosque-topbar-cell:last-child { border-right: none; flex:1; } /* Timeline cell: two stacked rows */ .bosque-topbar-cell--tall { flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; padding: 6px 10px; } .btc-row { display: flex; align-items: center; gap: 5px; width: 100%; } .btc-filters-row { gap: 5px; } /* Env + chars cells: vertically centered (single row) */ .bosque-topbar-cell:not(.bosque-topbar-cell--tall) { align-items: center; } /* btb-* classes removed — filters moved to main topbar */ /* ── Bosque: body row (scroll + right-stack side by side) ── */ .forest-body { flex: 1; display: flex; overflow: hidden; position: relative; } .right-stack { display: flex; flex-shrink: 0; height: 100%; position: relative; } /* ── CHRONO MAP — collapsible chapters (v28) ── */ .chrono-chap-badge { fill: var(--bg2); cursor: pointer; transition: opacity .1s; } .chrono-chap-badge:hover { opacity: .8; } /* ── MECÁNICA SUBNODOS panel (v28) ── */ .mec-subnodo-list { display:flex; flex-direction:column; gap:8px; margin-top:10px; } .mec-subnodo { background: var(--bg); border: 0.5px solid var(--border2); border-radius:7px; overflow:hidden; } .mec-subnodo-title { font-size:8.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--text5); padding:5px 9px 3px; contenteditable: true; outline:none; cursor:text; border-bottom:0.5px solid var(--border); transition:color .12s, border-color .12s; } .mec-subnodo-title:focus { color:var(--text2); border-color:var(--border2); } .mec-subnodo-body { font-size:11.5px; color:var(--text2); line-height:1.65; padding:7px 9px; outline:none; cursor:text; min-height:44px; } .mec-subnodo-body:focus { background:rgba(255,255,255,.015); } .mec-subnodo-actions { display:flex; align-items:center; gap:4px; padding:3px 7px; border-top:0.5px solid var(--border); background:rgba(0,0,0,.15); } .mec-add-subnodo { display:inline-flex; align-items:center; gap:4px; font-size:9px; padding:3px 9px; border-radius:5px; border:0.5px dashed var(--border2); color:var(--text5); cursor:pointer; user-select:none; transition:all .12s; background:transparent; margin-top:8px; } .mec-add-subnodo:hover { border-color:var(--border2); color:var(--text3); background:var(--bg3); } .mec-holly-actions { display:flex; gap:6px; margin-top:10px; border-top:0.5px solid var(--border); padding-top:10px; } .mec-holly-btn { flex:1; display:flex; align-items:center; justify-content:center; gap:5px; font-size:10px; padding:5px 8px; border-radius:6px; border:0.5px solid var(--purple2); background:var(--purple3); color:var(--purple4); cursor:pointer; font-family:Georgia,serif; transition:background .12s; } .mec-holly-btn:hover { background:#342d6a; } .mec-holly-btn.verify { border-color:var(--green); background:#0d2018; color:var(--green2); } .mec-holly-btn.verify:hover { background:#142a1e; } .mec-summary-modal { position:fixed; inset:0; background:#00000088; z-index:600; display:none; align-items:center; justify-content:center; } .mec-summary-modal.open { display:flex; } .mec-summary-inner { width:520px; max-width:90vw; max-height:80vh; background:var(--bg2); border:1px solid var(--purple2); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 12px 48px #0000009a; } .mec-summary-hdr { display:flex; align-items:center; gap:8px; padding:11px 14px; background:var(--purple3); border-bottom:0.5px solid var(--purple2); flex-shrink:0; } .mec-summary-title { font-size:12px; font-weight:600; color:var(--purple4); flex:1; } .mec-summary-close { width:22px; height:22px; border-radius:50%; background:rgba(0,0,0,.3); border:0.5px solid var(--purple2); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:13px; color:var(--purple4); } .mec-summary-body { flex:1; overflow-y:auto; padding:14px; } .mec-summary-txt { width:100%; min-height:180px; font-size:11px; color:var(--text2); line-height:1.65; font-family:Georgia,serif; background:var(--bg); border:0.5px solid var(--border2); border-radius:7px; padding:9px 11px; outline:none; resize:vertical; } .mec-summary-txt:focus { border-color:var(--purple2); } .mec-summary-footer { padding:10px 14px; border-top:0.5px solid var(--border); display:flex; gap:8px; flex-shrink:0; } .mec-summary-save { font-size:10px; padding:5px 14px; border-radius:6px; border:0.5px solid var(--green); background:#0d2018; color:var(--green2); cursor:pointer; font-family:Georgia,serif; } .mec-summary-save:hover { background:#142a1e; } /* ── ENV CIRCLE RESIZE handle (v28) ── */ .env-resize-handle { position:absolute; bottom:4px; right:4px; width:12px; height:12px; cursor:se-resize; opacity:0; transition:opacity .15s; background: radial-gradient(circle at 70% 70%, var(--amber), transparent); border-radius:50%; } .bib-env-circle:hover .env-resize-handle { opacity:.7; } /* ══════════════════════════════════════════════ V29 — CAPA VECTORIAL MYCORR Sistema bi-matricial: Holly (prosa/visual) ↔ Mycorr (vectores/datos) ══════════════════════════════════════════════ */ .vec-status-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; display:inline-block; transition:background .3s; } .vec-status-dot.fresh { background:var(--green); box-shadow:0 0 5px var(--green)88; } .vec-status-dot.stale { background:var(--amber); box-shadow:0 0 5px var(--amber)88; animation:stale-pulse 2.5s ease-in-out infinite; } .vec-status-dot.missing{ background:var(--text5); } @keyframes stale-pulse { 0%,100%{opacity:1} 50%{opacity:.4} } .vec-label { font-size:8px; padding:1px 6px; border-radius:5px; border:0.5px solid; letter-spacing:.04em; cursor:default; font-family:Georgia,serif; white-space:nowrap; } .vec-label.fresh { border-color:var(--green); color:var(--green2); background:#0d2018; } .vec-label.stale { border-color:var(--amber); color:var(--amber2); background:#1e1a0f; } .vec-label.missing{ border-color:var(--border); color:var(--text5); background:transparent; } .vec-mycorr-btn { display:inline-flex; align-items:center; gap:4px; font-size:9px; padding:3px 9px; border-radius:6px; border:0.5px solid var(--purple2); background:var(--purple3); color:var(--purple4); cursor:pointer; font-family:Georgia,serif; transition:background .12s, border-color .12s; white-space:nowrap; } .vec-mycorr-btn:hover { background:#342d6a; border-color:var(--purple); } .vec-mycorr-btn.loading { opacity:.6; pointer-events:none; } .vec-mycorr-btn i { font-size:10px; } .vec-panel { margin:0 14px 10px; border:0.5px solid var(--border2); border-radius:8px; overflow:hidden; background:var(--bg3); } .vec-panel-hdr { display:flex; align-items:center; gap:7px; padding:7px 10px; background:rgba(127,119,221,.06); border-bottom:0.5px solid var(--border); cursor:pointer; user-select:none; } .vec-panel-hdr-title { font-size:9px; letter-spacing:.1em; color:var(--purple4); text-transform:uppercase; font-weight:600; flex:1; } .vec-panel-body { padding:9px 10px; font-size:10px; color:var(--text3); line-height:1.7; white-space:pre-wrap; font-family:'JetBrains Mono',monospace; max-height:160px; overflow-y:auto; } .vec-panel-body::-webkit-scrollbar { width:2px; } .vec-panel-body::-webkit-scrollbar-thumb { background:var(--border); } .vec-panel-empty { font-size:10px; color:var(--text5); font-style:italic; text-align:center; padding:12px; } .chap-vec-badge { font-size:8px; padding:1px 5px; border-radius:4px; border:0.5px solid; cursor:pointer; transition:all .12s; white-space:nowrap; user-select:none; font-family:Georgia,serif; } .chap-vec-badge.fresh { border-color:var(--green); color:var(--green2); background:#0d201822; } .chap-vec-badge.stale { border-color:var(--amber); color:var(--amber2); background:#1e1a0f22; animation:stale-pulse 2.5s ease-in-out infinite; } .chap-vec-badge.none { border-color:var(--border); color:var(--text5); background:transparent; } .chap-vec-modal { position:fixed; inset:0; background:#00000099; z-index:700; display:none; align-items:center; justify-content:center; } .chap-vec-modal.open { display:flex; } .chap-vec-inner { width:540px; max-width:92vw; max-height:82vh; background:var(--bg2); border:1px solid var(--border2); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 16px 56px #00000099; } .chap-vec-hdr { display:flex; align-items:center; gap:9px; padding:12px 16px; background:rgba(0,0,0,.3); border-bottom:0.5px solid var(--border); flex-shrink:0; } .chap-vec-hdr-title { font-size:13px; font-weight:600; color:var(--text); flex:1; } .chap-vec-hdr-close { width:24px; height:24px; border-radius:50%; background:rgba(255,255,255,.05); border:0.5px solid var(--border2); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:14px; color:var(--text3); } .chap-vec-body { flex:1; overflow-y:auto; padding:14px 16px; } .chap-vec-body::-webkit-scrollbar { width:3px; } .chap-vec-body::-webkit-scrollbar-thumb { background:var(--border); } .chap-vec-section { margin-bottom:14px; } .chap-vec-section-lbl { font-size:9px; letter-spacing:.1em; color:var(--text5); text-transform:uppercase; margin-bottom:5px; } .chap-vec-txt { width:100%; min-height:80px; font-size:11px; color:var(--text2); line-height:1.65; font-family:'JetBrains Mono',monospace; background:var(--bg); border:0.5px solid var(--border2); border-radius:7px; padding:8px 10px; outline:none; resize:vertical; } .chap-vec-txt:focus { border-color:var(--purple2); } .chap-vec-footer { padding:10px 16px; border-top:0.5px solid var(--border); display:flex; align-items:center; gap:8px; flex-shrink:0; } .chap-vec-gen-btn { display:flex; align-items:center; gap:6px; font-size:10px; padding:6px 14px; border-radius:7px; border:0.5px solid var(--purple2); background:var(--purple3); color:var(--purple4); cursor:pointer; font-family:Georgia,serif; transition:background .12s; } .chap-vec-gen-btn:hover { background:#342d6a; } .chap-vec-save-btn { display:flex; align-items:center; gap:6px; font-size:10px; padding:6px 14px; border-radius:7px; border:0.5px solid var(--green); background:#0d2018; color:var(--green2); cursor:pointer; font-family:Georgia,serif; transition:background .12s; } .chap-vec-save-btn:hover { background:#142a1e; } .chap-vec-meta { font-size:9px; color:var(--text5); margin-left:auto; font-style:italic; } .env-vec-btn { display:inline-flex; align-items:center; gap:4px; font-size:9px; padding:2px 8px; border-radius:5px; border:0.5px solid var(--green); background:#0d2018; color:var(--green2); cursor:pointer; font-family:Georgia,serif; transition:background .12s; white-space:nowrap; } .env-vec-btn:hover { background:#142a1e; } /* Arquitectura Holly/Mycorr — diagrama en About */ .arch-diagram { margin:24px 0; background:var(--bg2); border:0.5px solid var(--border2); border-radius:12px; padding:20px; } .arch-layer { display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:8px; margin-bottom:8px; } .arch-layer.holly { background:rgba(127,119,221,.08); border:0.5px solid var(--purple2); } .arch-layer.bridge { background:rgba(239,159,39,.05); border:0.5px dashed #4a3a10; } .arch-layer.mycorr { background:rgba(29,158,117,.06); border:0.5px solid #1D5040; } .arch-layer-icon { font-size:16px; flex-shrink:0; } .arch-layer-title { font-size:11px; font-weight:600; color:var(--text); margin-bottom:2px; } .arch-layer-desc { font-size:10px; color:var(--text4); line-height:1.5; } .arch-arrow { text-align:center; font-size:14px; color:var(--border2); margin:-2px 0; padding:0 14px; } /* ═══════════════ ESPORA — Vista Total v46.1 ═══════════════ */ #view-espora { flex-direction:row; overflow:hidden; } /* ── Resumen de proyecto — esquina superior izquierda ── */ #espora-proj-summary { position:absolute; top:44px; left:46px; width:190px; z-index:15; background:rgba(10,9,28,0.93); border:0.5px solid rgba(180,160,255,0.18); border-radius:8px; padding:10px 12px; font-family:-apple-system,sans-serif; pointer-events:none; } #espora-proj-summary .ep-title { font-size:12px; font-weight:700; color:#c3b8ff; margin-bottom:5px; font-family:Georgia,serif; } #espora-proj-summary .ep-desc { font-size:10px; color:rgba(200,190,255,0.45); line-height:1.55; margin-bottom:7px; } #espora-proj-summary .ep-stats { display:flex; flex-wrap:wrap; gap:6px; } #espora-proj-summary .ep-stat { font-size:9px; color:rgba(200,190,255,0.5); background:rgba(127,119,221,0.08); border:0.5px solid rgba(127,119,221,0.15); border-radius:4px; padding:2px 6px; } #espora-proj-summary .ep-stat span { color:#c3b8ff; font-weight:600; } /* ── Selector de modo (Libre / Hemisferios / Árbol) ── */ #espora-modebar { position:absolute; top:44px; left:50%; transform:translateX(-50%); display:flex; z-index:16; overflow:hidden; background:rgba(10,9,28,0.82); border:0.5px solid rgba(159,122,255,0.25); border-radius:7px; font-family:-apple-system,sans-serif; } .espora-modebtn { padding:5px 13px; font-size:11px; cursor:pointer; color:rgba(200,190,255,0.6); background:transparent; border:none; border-right:0.5px solid rgba(159,122,255,0.18); transition:background .15s,color .15s; } .espora-modebtn:last-child { border-right:none; } .espora-modebtn:hover { background:rgba(159,122,255,0.15); } .espora-modebtn.on { background:rgba(159,122,255,0.28); color:#c3b8ff; } #espora-campobtn { position:absolute; top:44px; right:16px; z-index:16; display:flex; align-items:center; gap:5px; padding:5px 13px; font-size:11px; cursor:pointer; color:rgba(200,190,255,0.6); background:rgba(10,9,28,0.82); border:0.5px solid rgba(159,122,255,0.25); border-radius:7px; font-family:-apple-system,sans-serif; transition:background .15s,color .15s; } #espora-campobtn:hover { background:rgba(159,122,255,0.15); } #espora-campobtn.on { background:rgba(159,122,255,0.28); color:#c3b8ff; } /* ── Panel de visibilidad ── */ #espora-vis-panel { position:absolute; top:44px; left:12px; z-index:15; display:flex; flex-direction:column; gap:3px; font-family:-apple-system,sans-serif; } .espora-vis-btn { width:26px; height:26px; border-radius:5px; background:rgba(159,122,255,0.1); border:0.5px solid rgba(159,122,255,0.22); color:rgba(200,190,255,0.7); font-size:11px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s,opacity .15s; position:relative; } .espora-vis-btn:hover { background:rgba(159,122,255,0.22); } .espora-vis-btn.off { opacity:0.3; } #espora-vis-all-btn { width:26px; height:26px; border-radius:5px; background:rgba(239,159,39,0.12); border:0.5px solid rgba(239,159,39,0.3); color:#EF9F27; font-size:9px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s; margin-top:4px; position:relative; } #espora-vis-all-btn:hover { background:rgba(239,159,39,0.22); } /* ── Panel de visibilidad + controles — columna izquierda ── */ #espora-vis-panel { position:absolute; top:44px; left:8px; z-index:15; display:flex; flex-direction:column; gap:3px; font-family:-apple-system,sans-serif; } /* Controles zoom/rotar — encima del vis panel */ .espora-ctrls { position:absolute; top:44px; left:8px; display:flex; flex-direction:column; gap:3px; z-index:16; } /* Los controles van ANTES del vis panel en el DOM — se posicionan por orden */ .espora-vis-btn { width:26px; height:26px; border-radius:5px; background:rgba(159,122,255,0.1); border:0.5px solid rgba(159,122,255,0.22); color:rgba(200,190,255,0.7); font-size:11px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s,opacity .15s; position:relative; } .espora-vis-btn:hover { background:rgba(159,122,255,0.22); } .espora-vis-btn.off { opacity:0.3; } /* Label inline a la derecha del botón */ .espora-vis-btn .vb-lbl { position:absolute; left:30px; top:50%; transform:translateY(-50%); font-size:10px; color:rgba(200,190,255,0.5); white-space:nowrap; pointer-events:none; } .espora-vis-btn .vb-lbl .vb-dot { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:4px; vertical-align:middle; } #espora-vis-all-btn { width:26px; height:26px; border-radius:5px; background:rgba(239,159,39,0.12); border:0.5px solid rgba(239,159,39,0.3); color:#EF9F27; font-size:9px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s; position:relative; } #espora-vis-all-btn:hover { background:rgba(239,159,39,0.22); } #espora-vis-all-btn .vb-lbl { position:absolute; left:30px; top:50%; transform:translateY(-50%); font-size:10px; color:#EF9F27; white-space:nowrap; pointer-events:none; } .espora-cbtn { width:26px; height:26px; border-radius:5px; background:rgba(159,122,255,0.1); border:0.5px solid rgba(159,122,255,0.22); color:rgba(200,190,255,0.7); font-size:13px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s; font-family:-apple-system,sans-serif; } .espora-cbtn:hover { background:rgba(159,122,255,0.22); } /* ── Leyenda — oculta, reemplazada por labels inline ── */ .espora-legend { display:none; } /* ── Tarjeta flotante de nodo ── */ #espora-float-card { position:absolute; right:16px; top:50px; width:340px; max-height:calc(100% - 96px); overflow-y:auto; background:rgba(10,9,28,0.97); border:0.5px solid rgba(159,122,255,0.35); border-radius:10px; padding:12px 14px; font-family:-apple-system,sans-serif; z-index:20; display:none; box-shadow:0 4px 24px rgba(0,0,0,0.6); } #espora-float-card .efc-name { font-size:13px; font-weight:700; color:#c3b8ff; margin-bottom:3px; font-family:Georgia,serif; } #espora-float-card .efc-role { font-size:10px; color:rgba(200,190,255,0.45); margin-bottom:8px; } #espora-float-card .efc-divider { height:0.5px; background:rgba(159,122,255,0.2); margin:7px 0; } #espora-float-card .efc-row { display:flex; gap:6px; margin-bottom:5px; align-items:flex-start; } #espora-float-card .efc-lbl { font-size:9px; color:rgba(200,190,255,0.3); letter-spacing:.08em; text-transform:uppercase; width:56px; flex-shrink:0; padding-top:1px; } #espora-float-card .efc-val { font-size:10px; color:rgba(200,190,255,0.7); line-height:1.5; flex:1; } #espora-float-card .efc-err { font-size:9px; color:#ff7777; background:rgba(255,60,60,0.08); border:0.5px solid rgba(255,60,60,0.25); border-radius:4px; padding:4px 7px; margin-top:6px; line-height:1.5; } #espora-float-card .efc-close { position:absolute; top:8px; right:8px; width:18px; height:18px; border-radius:4px; background:transparent; border:none; color:rgba(200,190,255,0.35); cursor:pointer; font-size:12px; display:flex; align-items:center; justify-content:center; } #espora-float-card .efc-close:hover { color:#c3b8ff; } #espora-float-card .efc-tags { display:flex; flex-wrap:wrap; gap:3px; margin-top:5px; } #espora-float-card .efc-tag { font-size:8px; padding:1px 5px; border-radius:3px; background:rgba(127,119,221,0.12); border:0.5px solid rgba(127,119,221,0.25); color:rgba(200,190,255,0.55); } /* Gate Ultra — pantalla de acceso restringido */ .espora-gate { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; background: radial-gradient(ellipse at 50% 40%, #0e0c28 0%, #04030f 100%); text-align:center; padding:40px; position: relative; overflow: hidden; } /* SVG de referencia — posicionado como fondo absoluto */ .espora-gate-bg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; } /* Todo el contenido del gate por encima del SVG */ .espora-gate > *:not(.espora-gate-bg) { position: relative; z-index: 1; } .espora-gate-orb { width:80px; height:80px; border-radius:50%; background: radial-gradient(circle at 35% 35%, #d0b8ff, #9f7aff 60%, #5a30cc); box-shadow: 0 0 40px rgba(159,122,255,.25), 0 0 80px rgba(159,122,255,.1); animation: espora-pulse 3s ease-in-out infinite; margin-bottom:8px; } @keyframes espora-pulse { 0%,100% { box-shadow: 0 0 40px rgba(159,122,255,.25), 0 0 80px rgba(159,122,255,.1); } 50% { box-shadow: 0 0 60px rgba(159,122,255,.4), 0 0 120px rgba(159,122,255,.18); } } .espora-gate-title { font-size:20px; color:#f0eeff; font-family:Georgia,serif; text-shadow: 0 2px 16px rgba(4,3,15,0.9); } .espora-gate-sub { font-size:13px; color:#c8c4d8; max-width:360px; line-height:1.7; background: rgba(4,3,15,0.65); border: 0.5px solid rgba(127,119,221,0.2); border-radius: 8px; padding: 12px 18px; backdrop-filter: blur(4px); } .espora-gate-badge { font-size:11px; color:#EF9F27; border:0.5px solid #EF9F2755; border-radius:6px; padding:5px 14px; background:rgba(239,159,39,.08); font-family:Georgia,serif; } /* Layout principal cuando tiene acceso */ .espora-wrap { flex:1; display:flex; overflow:hidden; } /* Canvas área */ .espora-canvas-wrap { flex:1; position:relative; overflow:hidden; background: radial-gradient(ellipse at 50% 40%, #0e0c28 0%, #04030f 100%); } #espora-canvas { display:block; } /* Topbar interno */ .espora-topbar { position:absolute; top:0; left:0; right:0; height:36px; background:rgba(8,7,26,0.92); border-bottom:0.5px solid rgba(180,160,255,0.14); display:flex; align-items:center; padding:0 12px; gap:14px; font-size:11px; color:rgba(200,190,255,0.45); z-index:10; font-family:-apple-system,sans-serif; } .espora-topbar-title { color:#c3b8ff; font-size:11px; font-family:Georgia,serif; font-weight:700; } .espora-topbar-meta { font-size:10px; color:rgba(200,190,255,0.3); margin-left:auto; } /* Infobar inferior */ .espora-infobar { position:absolute; bottom:0; left:0; right:264px; height:38px; background:rgba(8,7,26,0.92); border-top:0.5px solid rgba(180,160,255,0.1); display:flex; align-items:center; padding:0 12px; gap:10px; z-index:10; font-size:11px; font-family:-apple-system,sans-serif; } #espora-ename { color:#c3b8ff; font-weight:500; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #espora-etype { color:rgba(200,190,255,0.38); font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #espora-hint { margin-left:auto; color:rgba(200,190,255,0.2); font-size:10px; white-space:nowrap; } /* Tooltip canvas */ #espora-tooltip { position:absolute; padding:7px 10px; background:rgba(12,10,35,0.95); border:0.5px solid rgba(159,122,255,0.35); border-radius:7px; font-size:11px; color:#c3b8ff; pointer-events:none; z-index:20; max-width:200px; line-height:1.5; display:none; font-family:-apple-system,sans-serif; } #espora-tooltip .tt-sub { font-size:10px; color:rgba(200,190,255,0.45); margin-top:2px; } /* Sidebar derecho — estilo original STARA */ .espora-sidebar { width:264px; flex-shrink:0; min-height:0; background:var(--bg2,#151320); border-left:0.5px solid var(--border,#2a2740); font-size:11px; color:var(--text3,#9996b0); overflow-y:auto; z-index:10; font-family:Georgia,serif; display:flex; flex-direction:column; } .espora-sidebar::-webkit-scrollbar { width:3px; } .espora-sidebar::-webkit-scrollbar-thumb { background:rgba(127,119,221,.3); border-radius:2px; } /* Sección colapsable — estilo panel STARA */ .espora-cat-hdr { display:flex; align-items:center; gap:6px; padding:6px 10px; cursor:pointer; user-select:none; background:var(--bg3,#181625); border-bottom:0.5px solid var(--border,#2a2740); flex-shrink:0; } .espora-cat-hdr:hover { background:var(--bg4,#1e1b2e); } .espora-cat-chev { font-size:10px; color:var(--text5,#4e4b65); transition:transform .15s; flex-shrink:0; } .espora-cat-chev.open { transform:rotate(90deg); } .espora-cat-label { font-size:10px; letter-spacing:.06em; color:var(--purple,#7F77DD); font-weight:600; flex:1; text-transform:uppercase; } .espora-cat-count { font-size:10px; color:var(--text5,#4e4b65); } .espora-cat-body { overflow:hidden; transition:max-height .2s ease; max-height:0; flex-shrink:0; } .espora-cat-body.open { max-height:4000px; } /* Items del sidebar */ .espora-si { padding:5px 10px 5px 16px; cursor:pointer; border-bottom:0.5px solid transparent; transition:background .12s; font-size:11px; color:var(--text3,#9996b0); line-height:1.45; display:flex; align-items:center; gap:4px; font-family:Georgia,serif; } .espora-si:hover { background:var(--bg3,#181625); color:var(--text,#e2e0ee); } .espora-si.on { background:var(--bg4,#1e1b2e); color:var(--purple4,#c3b8ff); border-left:2px solid var(--purple,#7F77DD); padding-left:14px; } .espora-stag { display:inline-block; font-size:8px; padding:1px 4px; border-radius:3px; margin-left:2px; vertical-align:middle; flex-shrink:0; } .espora-tc { background:rgba(100,180,255,0.15); color:#80c4ff; } .espora-tl { background:rgba(255,120,200,0.15); color:#ff88cc; } .espora-ti { background:rgba(255,80,80,0.2); color:#ff6666; } .espora-tch { background:rgba(100,200,120,0.15); color:#80d890; } .espora-tk { background:rgba(239,159,39,0.15); color:#EF9F27; } .espora-ts { background:rgba(180,200,100,0.12); color:#b0cc60; } .espora-ldot { width:7px; height:7px; border-radius:50%; display:inline-block; vertical-align:middle; flex-shrink:0; } /* ══════════════════════════════════════════════ AUTH SCREEN — Login / Registro ══════════════════════════════════════════════ */ /* #stara-auth-screen base styles now defined inside the landing block */ #stara-auth-screen.hidden { display: none !important; } .auth-box { width: 360px; max-width: 94vw; background: #151320; border: 0.5px solid #2a2740; border-radius: 14px; padding: 36px 32px 28px; display: flex; flex-direction: column; gap: 0; } .auth-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; justify-content: center; } .auth-logo-text { font-size: 13px; font-weight: 700; letter-spacing: .22em; color: #c3b8ff; text-transform: uppercase; } .auth-title { font-size: 17px; font-weight: 600; color: #e2e0ee; text-align: center; margin-bottom: 22px; letter-spacing: .01em; } .auth-tabs { display: flex; gap: 0; margin-bottom: 24px; border-bottom: 0.5px solid #2a2740; } .auth-tab { flex: 1; padding: 8px 0; font-size: 12px; font-family: Georgia, serif; background: none; border: none; cursor: pointer; color: #6b6880; letter-spacing: .06em; text-transform: uppercase; border-bottom: 2px solid transparent; margin-bottom: -0.5px; transition: color .2s, border-color .2s; } .auth-tab.active { color: #c3b8ff; border-bottom-color: #7F77DD; } .auth-tab:hover:not(.active) { color: #9996b0; } .auth-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; } .auth-field label { font-size: 10.5px; color: #6b6880; letter-spacing: .08em; text-transform: uppercase; } .auth-field input { background: #1e1b2e; border: 0.5px solid #2a2740; border-radius: 7px; padding: 10px 13px; color: #e2e0ee; font-size: 13.5px; font-family: Georgia, serif; outline: none; transition: border-color .2s; } .auth-field input:focus { border-color: #7F77DD; } .auth-field input::placeholder { color: #4e4b65; } .auth-btn { width: 100%; padding: 11px; margin-top: 8px; background: #7F77DD; border: none; border-radius: 8px; color: #fff; font-size: 13px; font-family: Georgia, serif; font-weight: 600; letter-spacing: .06em; cursor: pointer; transition: background .2s, opacity .2s; } .auth-btn:hover { background: #9088e8; } .auth-btn:disabled { opacity: .5; cursor: default; } .auth-error { margin-top: 10px; padding: 9px 12px; background: rgba(192,57,43,0.15); border: 0.5px solid rgba(192,57,43,0.4); border-radius: 7px; color: #e74c3c; font-size: 11.5px; line-height: 1.5; display: none; } .auth-error.visible { display: block; } .auth-success { margin-top: 10px; padding: 9px 12px; background: rgba(29,158,117,0.12); border: 0.5px solid rgba(29,158,117,0.35); border-radius: 7px; color: #5DCAA5; font-size: 11.5px; line-height: 1.5; display: none; } .auth-success.visible { display: block; } .auth-divider { text-align: center; color: #4e4b65; font-size: 10.5px; margin: 16px 0 4px; letter-spacing: .05em; } .auth-footer { text-align: center; margin-top: 20px; color: #4e4b65; font-size: 10.5px; letter-spacing: .03em; } /* v49.3 — Age gate: aviso de edad mínima y checkbox */ .auth-age-notice { margin-top: 12px; padding: 9px 12px; background: rgba(127,119,221,0.08); border: 0.5px solid rgba(127,119,221,0.25); border-radius: 7px; color: #9b93cc; font-size: 10.5px; line-height: 1.5; } .auth-age-check { display: flex; align-items: flex-start; gap: 9px; margin-top: 12px; cursor: pointer; } .auth-age-check input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; accent-color: #7F77DD; width: 14px; height: 14px; cursor: pointer; } .auth-age-check span { font-size: 11px; color: #9b93cc; line-height: 1.5; } /* Campo fecha de nacimiento */ .auth-dob-field { margin-top: 10px; } .auth-dob-field label { display: block; font-size: 11px; color: #7a7890; margin-bottom: 5px; } .auth-dob-field input[type="date"] { width: 100%; padding: 9px 11px; border-radius: 7px; background: rgba(255,255,255,0.04); border: 0.5px solid #3a3755; color: #c3b8ff; font-size: 12px; font-family: inherit; box-sizing: border-box; color-scheme: dark; } .auth-dob-field input[type="date"]:focus { outline: none; border-color: #7F77DD; } /* Badge de usuario en topbar */ #auth-user-badge { display: flex; align-items: center; gap: 8px; margin-left: auto; margin-right: 8px; padding: 0 12px; height: 44px; border-left: 0.5px solid #2a2740; cursor: default; flex-shrink: 0; } .auth-user-info { display: flex; flex-direction: column; gap: 1px; justify-content: center; } #auth-user-email { font-size: 10px; color: #6b6880; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.3; } #auth-user-tier { font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1.3; } #auth-user-tier.tier-free { color: #6b6880; } #auth-user-tier.tier-standard { color: #5DCAA5; } #auth-user-tier.tier-pro { color: #7F77DD; } #auth-user-tier.tier-ultra { color: #EF9F27; } #auth-user-tier.tier-ultra_plus { color: #ff6b3d; } #auth-logout-btn { background: none; border: 0.5px solid #2a2740; border-radius: 5px; color: #6b6880; font-size: 9px; padding: 2px 7px; cursor: pointer; font-family: Georgia, serif; letter-spacing: .05em; text-transform: uppercase; transition: border-color .2s, color .2s; } #auth-logout-btn:hover { border-color: #c0392b; color: #e74c3c; } /* ════════════════════════════════════════════════════════════ Plan I / I2a — Estela: sub-vista Burbujas, Voz narrativa, puente ════════════════════════════════════════════════════════════ */ /* ── Layout Burbujas: borrador | Imagina ── */ .burbujas-draft { flex:1.4; min-width:300px; } .estela-panel-imagina { flex:1; min-width:320px; display:flex; flex-direction:column; overflow:hidden; } .estela-panel-imagina .estela-imagina-wrap { flex:1; max-height:none; border-top:none; display:flex; flex-direction:column; min-height:0; } .estela-panel-imagina .estela-imagina-msgs { flex:1; } /* ── Voz narrativa ── */ .voz-narrativa { flex-shrink:0; border-bottom:0.5px solid var(--border); background:linear-gradient(180deg, rgba(127,119,221,0.06), transparent); } .voz-hdr { display:flex; align-items:center; gap:8px; padding:9px 14px; cursor:pointer; user-select:none; font-size:12px; color:var(--purple4); font-weight:600; } .voz-title { letter-spacing:.02em; } .voz-sub { font-size:10px; color:var(--text5); font-weight:400; font-style:italic; } .voz-badge { margin-left:auto; font-size:9px; color:var(--text5); border:0.5px solid var(--border2); border-radius:5px; padding:2px 8px; font-style:italic; } .voz-chev { color:var(--text5); transition:transform .2s; } .voz-narrativa.voz-collapsed .voz-chev { transform:rotate(-90deg); } .voz-narrativa.voz-collapsed .voz-body { display:none; } .voz-body { padding:4px 14px 14px; } .voz-greet { font-size:12px; color:var(--text3); font-style:italic; margin-bottom:10px; } .voz-tono-chips { display:flex; flex-wrap:wrap; gap:7px; } .voz-tono-chip { font-size:12px; color:var(--text4); border:0.5px solid var(--border2); border-radius:14px; padding:4px 13px; cursor:pointer; transition:.15s; user-select:none; } .voz-tono-chip:hover { color:var(--text3); } .voz-tono-chip.on { border-color:var(--purple4); color:var(--purple4); background:rgba(127,119,221,0.12); } .voz-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px 18px; } .voz-field label { display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; font-size:10px; letter-spacing:.04em; text-transform:uppercase; color:var(--text4); margin-bottom:5px; } .voz-field .voz-hint { font-size:10px; text-transform:none; letter-spacing:0; color:var(--text5); font-style:italic; } .voz-field.voz-full { grid-column:1 / 3; } .voz-input { width:100%; background:var(--bg4); border:0.5px solid var(--border2); border-radius:6px; padding:7px 10px; color:var(--text2); font-family:Georgia,serif; font-size:12px; outline:none; } .voz-input::placeholder { color:var(--text5); font-style:italic; } .voz-input:focus { border-color:var(--purple4); } .voz-afinar { display:flex; align-items:center; gap:10px; margin-top:12px; background:rgba(58,191,191,0.06); border:0.5px solid rgba(58,191,191,0.25); border-radius:8px; padding:10px 14px; } .voz-afinar-h { color:#3ABFBF; font-weight:700; font-size:13px; } .voz-afinar-txt { flex:1; font-size:11px; color:var(--text4); font-style:italic; } .voz-afinar-btn { font-family:Georgia,serif; background:#3ABFBF; color:#03020d; border:none; border-radius:7px; padding:6px 13px; font-size:11px; font-weight:700; cursor:pointer; display:flex; align-items:center; gap:5px; } .voz-upsell { margin-top:12px; font-size:10px; color:#EF9F27; font-style:italic; display:flex; align-items:center; gap:6px; } /* ── Puente Burbujas → Capítulos ── */ .estela-bridge { flex-shrink:0; display:flex; align-items:center; gap:12px; padding:11px 16px; border-top:0.5px solid var(--border); background:linear-gradient(90deg, var(--bg2), rgba(58,191,191,0.06)); } .estela-bridge-txt { font-size:11px; color:var(--text4); font-style:italic; } .estela-bridge-btn { margin-left:auto; font-family:Georgia,serif; background:#3ABFBF; color:#03020d; border:none; border-radius:8px; padding:8px 18px; font-size:12px; font-weight:700; cursor:pointer; display:flex; align-items:center; gap:7px; } .estela-bridge-btn:hover { filter:brightness(1.08); } /* ── Franja "Partiendo de tu borrador" en Capítulos ── */ .estela-from-draft { flex-shrink:0; display:flex; align-items:center; gap:11px; padding:9px 16px; background:var(--bg3); border-bottom:0.5px solid var(--border); } .from-draft-quote { flex:1; font-size:11px; color:var(--text4); font-style:italic; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .estela-from-draft.from-draft-empty .from-draft-quote { color:var(--text5); } .from-draft-edit { font-size:10px; color:#3ABFBF; cursor:pointer; white-space:nowrap; } .from-draft-edit:hover { text-decoration:underline; } /* ── Plan I / I2a v2 — Burbujas en 3 columnas · panel Configuración narrativa ── */ .estela-panel-config { width:320px; min-width:280px; flex-shrink:0; display:flex; flex-direction:column; overflow:hidden; } .estela-panel-config .config-body { flex:1; overflow-y:auto; padding:14px; } .config-body .config-badge { font-size:9px; color:var(--text5); font-style:italic; border:0.5px solid var(--border2); border-radius:5px; padding:3px 8px; display:inline-block; margin-bottom:14px; } .config-body .voz-field label { display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; font-size:10px; letter-spacing:.04em; text-transform:uppercase; color:var(--text4); margin-bottom:7px; } .config-footer { flex-shrink:0; border-top:0.5px solid var(--border); background:var(--bg2); padding:12px; display:flex; flex-direction:column; gap:8px; } .config-brujula-btn { font-family:Georgia,serif; width:100%; display:flex; align-items:center; justify-content:center; gap:7px; background:rgba(127,119,221,0.10); color:var(--purple4); border:0.5px solid rgba(127,119,221,0.40); border-radius:8px; padding:9px; font-size:12px; font-weight:700; cursor:pointer; transition:.15s; } .config-brujula-btn:hover:not(:disabled) { background:rgba(127,119,221,0.18); } .config-brujula-btn:disabled { opacity:.55; cursor:not-allowed; } .config-brujula-btn .config-soon { font-size:8px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:#EF9F27; border:0.5px solid #4a4228; border-radius:4px; padding:1px 5px; } .config-estructurar-btn { font-family:Georgia,serif; width:100%; display:flex; align-items:center; justify-content:center; gap:7px; background:#3ABFBF; color:#03020d; border:none; border-radius:8px; padding:10px; font-size:12px; font-weight:700; cursor:pointer; transition:.15s; } .config-estructurar-btn:hover { filter:brightness(1.08); } /* ══ Plan I / v71 — Panel Brújula en la Estela (migrado de inline → v70.3.0) ══ */ .estela-panel-brujula { min-width:440px; width:540px; flex-shrink:0; display:flex; flex-direction:column; } .estela-brujula-body { flex:1; overflow:auto; padding:10px; } .eb-grow { flex:1; } .eb-empty { font-size:10px; color:var(--text5); font-style:italic; text-align:center; padding:24px 12px; line-height:1.6; } .eb-norte { background:var(--bg3); border:0.5px solid var(--border2); border-radius:9px; padding:8px; margin-bottom:12px; } .eb-norte-hdr { font-size:10px; color:var(--purple4); letter-spacing:.05em; text-transform:uppercase; padding:2px 4px 6px; display:flex; align-items:center; gap:6px; } .eb-field { display:flex; align-items:flex-start; gap:7px; padding:7px 4px; border-top:0.5px solid var(--border); } .eb-field.appr { background:rgba(29,158,117,.07); border-radius:5px; } .eb-field-lbl { font-size:8px; letter-spacing:.07em; text-transform:uppercase; color:var(--text4); margin-bottom:2px; } .eb-field-val { outline:none; border-radius:3px; cursor:text; font-size:11px; color:var(--text2); line-height:1.4; padding:1px 2px; } .eb-hilo { background:var(--bg3); border:0.5px solid var(--border); border-radius:8px; padding:9px 10px; margin-bottom:8px; } .eb-hilo.appr { border-color:rgba(29,158,117,.45); } .eb-hilo-row { display:flex; align-items:flex-start; gap:7px; } .eb-hilo-name { outline:none; border-radius:3px; cursor:text; font-size:11.5px; color:var(--text); padding:1px 2px; } .eb-hilo-desc { outline:none; border-radius:3px; cursor:text; font-size:9.5px; color:var(--text3); font-style:italic; line-height:1.45; margin-top:4px; padding:1px 2px; } .eb-hilo-destino { outline:none; border-radius:3px; cursor:text; font-size:9.5px; color:var(--text4); line-height:1.45; margin-top:3px; padding:1px 2px; } .eb-chip { font-size:8.5px; padding:1px 7px; border-radius:9px; display:inline-flex; align-items:center; gap:3px; margin-top:5px; } .eb-chip-dot { width:5px; height:5px; border-radius:50%; } .eb-ap-btns { display:flex; gap:4px; flex-shrink:0; } .eb-ap-btn { width:18px; height:18px; border-radius:4px; border:0.5px solid var(--border2); background:transparent; cursor:pointer; font-size:10px; line-height:1; } .eb-ap-x { color:var(--text5); } .eb-ap-ok { color:#1D9E75; } .eb-ap-ok.on { border-color:#1D9E75; background:rgba(29,158,117,.18); } /* ════════════════════════════════════════════════════════════ BRÚJULA — migración de estilos inline (cierre v71 · I1–I4) Colores data-driven (tipo/estado/desvío) entran por --brj-* desde el JS. Geometría posicional del mapa (left/width %) sigue inline: es dato, no estilo. ════════════════════════════════════════════════════════════ */ /* placeholder de campos contenteditable (ex