/* ============================================================ ui_v2.css — Skin GenNarrativa v2 (extraído 1:1 de ui_v2.js) Carga en para eliminar el destello de estilo (FOUC). Si este archivo está enlazado (link id="gv2-css"), ui_v2.js NO inyecta estilos; si falta, ui_v2.js inyecta como fallback. ============================================================ */ /* ---- gv2-global (de injectGlobalSkin) ---- */ :root{--bg-primary:#0b0d14;--bg-secondary:#12151d;--bg-card:rgba(20,23,33,.66);--bg-glass:rgba(20,23,33,.5);--border-glass:rgba(255,255,255,.08);--text-primary:#e9ebf2;--text-secondary:#9097a8;--text-muted:#5b6072} body{font-family:Inter,system-ui,sans-serif} .main-content{background:radial-gradient(circle at 50% -8%,#15171f 0%,#0b0d14 58%)!important} .sidebar{background:rgba(9,11,17,.92)!important} .text-gradient{background:linear-gradient(90deg,#a78bfa,#00f2ff)!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important} h1.text-gradient{font-family:'Bebas Neue',sans-serif!important;font-weight:400!important;letter-spacing:1px!important;font-size:30px!important} .xp-bar-fill{background:linear-gradient(90deg,#fb7185,#fbbf24,#00f2ff)!important} .main-content{padding:14px 30px 28px!important} .app-header{padding:9px 32px!important} .xp-bar-container{padding:3px 0!important} /* ---- gv2-style (de injectStyle) ---- */ #dashboard-grid.gv2-host{display:block!important;grid-template-columns:none!important;gap:0!important} .gv2-wrap{max-width:880px;margin:0 auto;padding:2px 4px 24px} .gv2-hero{text-align:center;margin:0 0 10px} .gv2-hero h2{font-size:27px;font-weight:300;margin:0;letter-spacing:-.4px;color:var(--text-primary)} .gv2-hero h2 b{font-weight:700;background:linear-gradient(90deg,#00f2ff,#a78bfa);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .gv2-ed{position:relative;background:var(--bg-card);border:1px solid var(--border-glass);border-radius:var(--radius-lg);box-shadow:var(--shadow-warm);overflow:hidden;backdrop-filter:blur(12px)} .gv2-ed:focus-within{border-color:rgba(167,139,250,.45)} .gv2-th{position:absolute;left:0;top:0;bottom:56px;width:32px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:12px 0;border-right:1px solid var(--border-glass);z-index:4} .gv2-thlab{position:absolute;top:14px;left:50%;transform:translateX(-50%) rotate(180deg);writing-mode:vertical-rl;font-size:9.5px;font-weight:700;letter-spacing:2px;color:var(--text-muted);transition:color .3s} .gv2-thtrack{width:5px;flex:1;max-height:120px;border-radius:4px;background:rgba(255,255,255,.07);position:relative;overflow:hidden;margin-bottom:4px} .gv2-thfill{position:absolute;left:0;right:0;bottom:0;height:0%;border-radius:4px;background:linear-gradient(0deg,#34d399,#fbbf24 55%,#fb7185);transition:height .35s ease} .gv2-area{position:relative;margin-left:32px;min-height:100px} #gv2-ed,.gv2-ghost{font:400 15.5px/1.65 inherit;padding:16px 18px 12px;box-sizing:border-box} #gv2-ed{position:relative;z-index:2;width:100%;min-height:100px;background:transparent;border:none;outline:none;resize:none;color:var(--text-primary);caret-color:var(--accent-purple);display:block} #gv2-ed::placeholder{color:var(--text-muted)} .gv2-ghost{position:absolute;inset:0;z-index:1;white-space:pre-wrap;overflow-wrap:break-word;word-break:break-word;color:transparent;pointer-events:none;overflow:hidden} .gv2-ghost .g{color:rgba(167,139,250,.55);font-style:italic} .gv2-hint{position:absolute;bottom:7px;right:13px;z-index:3;display:none;align-items:center;gap:6px;font-size:9px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--accent-purple);background:rgba(167,139,250,.12);border:1px solid rgba(167,139,250,.25);border-radius:6px;padding:3px 8px;pointer-events:none} .gv2-hint.on{display:flex}.gv2-hint kbd{font-weight:700;background:rgba(167,139,250,.25);border-radius:3px;padding:1px 5px;color:#fff} .gv2-blocks{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:0 16px 0 48px;margin-top:2px} .gv2-blocks .l{font-size:9.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-muted);margin-right:3px} .gv2-blk{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--border-glass);background:rgba(255,255,255,.02);color:var(--text-secondary);border-radius:9px;padding:6px 11px;font-size:11.5px;font-weight:600;cursor:pointer;transition:.15s} .gv2-blk:hover{color:var(--text-primary);border-color:var(--accent-purple);background:rgba(167,139,250,.1)} .gv2-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 16px 14px 48px;margin-top:9px;border-top:1px solid var(--border-glass)} .gv2-wc{font-size:11.5px;color:var(--text-muted)}.gv2-wc b{color:var(--accent-purple);font-weight:700} .gv2-go{display:inline-flex;align-items:center;gap:8px;border:none;cursor:pointer;border-radius:10px;padding:11px 20px;font-size:12.5px;font-weight:700;letter-spacing:.5px;color:#06121a;background:linear-gradient(135deg,#00f2ff,#4cc9ff);box-shadow:0 6px 18px rgba(0,242,255,.28)} .gv2-go:hover{filter:brightness(1.06)} .gv2-read{display:none;margin-top:12px;background:var(--bg-glass);border:1px solid var(--border-glass);border-radius:var(--radius-md);padding:16px 18px} .gv2-read.on{display:block} .gv2-rrow{display:flex;flex-wrap:wrap;gap:22px;align-items:center} .gv2-ri{display:flex;flex-direction:column;gap:2px}.gv2-rk{font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-muted)} .gv2-rv{font-size:18px;font-weight:700;color:var(--text-primary)}.gv2-rv.p{color:var(--accent-purple)}.gv2-rv.g{color:var(--accent-gold)}.gv2-rv.t{color:var(--accent-teal)} .gv2-rins{margin-top:12px;padding-top:12px;border-top:1px solid var(--border-glass);font-size:13.5px;color:var(--text-secondary)} .gv2-rins a{color:var(--accent-teal);font-weight:600;cursor:pointer;border-bottom:1px dashed rgba(52,211,153,.4)} .gv2-eye{margin:14px 0 9px;font-size:10.5px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--text-muted);display:flex;align-items:center;gap:12px} .gv2-eye::after{content:"";flex:1;height:1px;background:var(--border-glass)} .gv2-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:12px} .gv2-card{background:var(--bg-card);border:1px solid var(--border-glass);border-radius:var(--radius-md);padding:16px 14px;cursor:pointer;transition:.18s;text-align:left;backdrop-filter:blur(8px)} .gv2-card:hover{transform:translateY(-3px);border-color:var(--ac);box-shadow:0 14px 34px rgba(0,0,0,.4)} .gv2-cico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;margin-bottom:12px;background:rgba(255,255,255,.04);border:1px solid var(--border-glass)} .gv2-cico svg{width:22px;height:22px;color:var(--ac)} .gv2-ctit{font-family:'Bebas Neue',sans-serif;font-size:18px;font-weight:400;letter-spacing:1px;color:var(--text-primary);margin-bottom:3px} .gv2-csub{font-size:11.5px;color:var(--text-muted);line-height:1.35} @media(max-width:860px){.gv2-cards{grid-template-columns:repeat(3,1fr)}} @media(max-width:560px){.gv2-cards{grid-template-columns:1fr 1fr}} /* ---- gv2-sections (de injectSectionStyles) ---- */ #section-conflicts .panel{background:var(--bg-card)!important;border:1px solid var(--border-glass)!important;border-radius:var(--radius-lg)!important} #section-conflicts .panel-header h3{font-size:17px!important;font-weight:700!important;letter-spacing:.3px!important} #section-conflicts .selector-bar{background:rgba(0,0,0,.18)!important;border:1px solid var(--border-glass)!important;border-radius:14px!important;padding:14px 16px!important;gap:12px 16px!important;align-items:center!important} #section-conflicts .selector-group{gap:9px!important;flex-wrap:wrap!important} #section-conflicts .pill{width:auto!important;height:auto!important;padding:8px 14px 8px 11px!important;display:inline-flex!important;align-items:center!important;gap:7px!important;border-radius:11px!important;font-size:15px!important;line-height:1!important;background:rgba(255,255,255,.03)!important;border:1px solid var(--border-glass)!important} #section-conflicts .pill::after{content:attr(data-format) attr(data-genre)!important;position:static!important;opacity:1!important;transform:none!important;bottom:auto!important;left:auto!important;font-size:10.5px!important;font-weight:800!important;letter-spacing:.4px!important;text-transform:capitalize!important;color:var(--text-secondary)!important} #section-conflicts .pill:hover{transform:translateY(-1px)!important;border-color:var(--accent-purple)!important} #section-conflicts .pill.active{background:rgba(167,139,250,.14)!important;border-color:var(--accent-purple)!important} #section-conflicts .pill.active::after{color:var(--text-primary)!important} #section-conflicts .pill-genre.active.terror{background:linear-gradient(135deg,rgba(139,0,0,.9),rgba(74,0,0,.9))!important;border-color:#8b0000!important} #section-conflicts .pill-genre.active.terror::after{color:#fff!important} #section-conflicts .pill-genre.active.drama{background:linear-gradient(135deg,rgba(91,110,245,.9),rgba(58,78,197,.9))!important;border-color:#5b6ef5!important} #section-conflicts .pill-genre.active.drama::after{color:#fff!important} #section-conflicts .pill-genre.active.comedia{background:linear-gradient(135deg,rgba(245,200,91,.95),rgba(229,168,48,.95))!important;border-color:#f5c85b!important} #section-conflicts .pill-genre.active.comedia::after{color:#1a1a2e!important} #section-conflicts .pill-genre.active.animado{background:linear-gradient(135deg,rgba(91,245,200,.9),rgba(48,197,160,.9))!important;border-color:#5bf5c8!important} #section-conflicts .pill-genre.active.animado::after{color:#1a1a2e!important} #section-conflicts .pill-genre.active.suspenso{background:linear-gradient(135deg,rgba(245,91,139,.9),rgba(197,58,106,.9))!important;border-color:#f55b8b!important} #section-conflicts .pill-genre.active.suspenso::after{color:#fff!important} #section-conflicts .pill-genre.active.accion{background:linear-gradient(135deg,rgba(255,69,0,.92),rgba(179,48,0,.92))!important;border-color:#ff4500!important} #section-conflicts .pill-genre.active.accion::after{color:#fff!important} #section-conflicts .genre-details{background:var(--bg-glass)!important;border:1px solid var(--border-glass)!important;border-radius:12px!important;margin-bottom:9px!important;overflow:hidden!important} #section-conflicts .genre-details[open]{border-color:rgba(167,139,250,.3)!important;box-shadow:0 6px 20px rgba(0,0,0,.22)!important} #section-conflicts .genre-details summary{padding:13px 16px!important;font-size:12.5px!important;font-weight:700!important;letter-spacing:.3px!important;cursor:pointer!important} #section-conflicts .lego-block-3d{border-radius:14px!important;border:1px solid var(--border-glass)!important} #section-conflicts .lego-title{font-weight:700!important;letter-spacing:.2px!important} #section-characters .panel{background:var(--bg-card)!important;border:1px solid var(--border-glass)!important;border-radius:16px!important} #section-characters .panel-header h3{font-size:15px!important;font-weight:700!important;letter-spacing:.4px!important} #section-characters .char-card{background:rgba(255,255,255,.02)!important;border:1px solid var(--border-glass)!important;border-radius:12px!important;padding:12px 14px!important;gap:12px!important;margin-bottom:8px!important;transform:none!important} #section-characters .char-card::before{display:none!important} #section-characters .char-card:hover{border-color:rgba(167,139,250,.45)!important;background:rgba(167,139,250,.06)!important;transform:none!important} #section-characters .char-card.active{border-color:var(--accent-purple)!important;background:rgba(124,58,237,.14)!important} #section-characters .char-avatar{border-radius:10px!important;background:linear-gradient(135deg,#7C3AED,#00c8d6)!important} #section-characters .char-editor-header{background:transparent!important;border:none!important;border-bottom:1px solid var(--border-glass)!important;border-radius:0!important;padding-bottom:16px!important;margin-bottom:20px!important;gap:20px!important} #section-characters .char-infographic>div{background:rgba(255,255,255,.02)!important;border:1px solid var(--border-glass)!important;border-radius:12px!important;border-top:2px solid var(--accent-purple)!important} #character-editor .panel-header{background:rgba(255,255,255,.03)!important;border:1px solid var(--border-glass)!important;border-radius:10px!important;margin:16px 0 12px!important;padding:10px 14px!important} #section-characters .journey-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px!important;margin-top:12px!important} #section-characters .journey-grid .form-group{background:rgba(255,255,255,.025)!important;border:1px solid rgba(255,255,255,.1)!important;border-top:2px solid var(--accent-purple)!important;border-radius:10px!important;padding:10px 12px!important;gap:6px!important} #section-characters .journey-grid .form-group label{color:#aab1c4!important} #section-characters .journey-grid textarea{min-height:56px!important} @media(max-width:900px){#section-characters .journey-grid{grid-template-columns:1fr!important}} #section-characters .form-group label{font-size:10px!important;font-weight:700!important;letter-spacing:1.5px!important;color:#9aa1b5!important} #section-characters input,#section-characters textarea,#section-characters select{background:#151a26!important;border:1px solid rgba(255,255,255,.14)!important;border-radius:10px!important;color:var(--text-primary)!important;padding:9px 12px!important} #section-characters input:focus,#section-characters textarea:focus,#section-characters select:focus{border-color:rgba(0,242,255,.5)!important;outline:none!important} #section-characters details.gnx-fold{background:var(--bg-glass)!important;border:1px solid var(--border-glass)!important;border-radius:12px!important;margin-bottom:9px!important;overflow:hidden!important} #section-characters details.gnx-fold[open]{border-color:rgba(167,139,250,.3)!important} #section-characters details.gnx-fold summary{padding:12px 15px!important;font-size:12.5px!important;font-weight:700!important;letter-spacing:.3px!important;cursor:pointer!important} #section-characters .btn-icon:hover{color:var(--accent-purple)!important;background:rgba(167,139,250,.1)!important} .gv2-ess{background:var(--bg-glass);border:1px solid rgba(0,242,255,.22);border-radius:14px;padding:14px 16px;margin-bottom:18px} .gv2-ess-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px} .gv2-ess-t{font-size:11px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:#7fe9f2} .gv2-ess-area{position:relative} .gv2-ess-area textarea{width:100%;min-height:74px;background:var(--bg-secondary)!important;border:1px solid var(--border-glass)!important;border-radius:10px!important;padding:11px 13px!important;color:var(--text-primary)!important;font-size:13.5px;line-height:1.6;resize:vertical;position:relative;z-index:2;caret-color:#00f2ff} .gv2-ess-ghost{position:absolute;inset:0;z-index:1;padding:11px 13px;font-size:13.5px;line-height:1.6;white-space:pre-wrap;overflow-wrap:break-word;color:transparent;pointer-events:none;overflow:hidden} .gv2-ess-ghost .g{color:rgba(167,139,250,.55);font-style:italic} .gv2-ess-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:9px} .gv2-ess-tip{font-size:10.5px;color:var(--text-muted)} .gv2-ess-go{border:none;cursor:pointer;border-radius:9px;padding:9px 15px;font-size:11.5px;font-weight:800;letter-spacing:.5px;color:#06121a;background:linear-gradient(135deg,#00f2ff,#4cc9ff)} .gv2-ess-res{display:none;margin-top:11px;border-top:1px solid var(--border-glass);padding-top:11px} .gv2-ess-res.on{display:block} .gv2-ess-chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:10px} .gv2-chip{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.03);border:1px solid var(--border-glass);border-radius:9px;padding:6px 11px;font-size:11.5px;color:var(--text-secondary)} .gv2-chip b{color:var(--text-primary);font-weight:700} .gv2-ess-apply{border:1px solid rgba(167,139,250,.4);background:rgba(124,58,237,.16);color:#e9ebf2;cursor:pointer;border-radius:9px;padding:8px 14px;font-size:11.5px;font-weight:800;letter-spacing:.4px} .gv2-ess-apply:hover{background:rgba(124,58,237,.28)} .gv2-ess-note{font-size:10.5px;color:var(--text-muted);margin-top:7px} .gv2-syn .gv2-ess-area textarea{min-height:170px!important;font-size:14px!important} #section-config .form-row{display:block!important} #section-config .form-group{width:100%!important;max-width:100%!important;margin-bottom:14px!important} #section-config #config-world{min-height:200px!important} #section-config #config-logline{min-height:90px!important} #section-config input,#section-config textarea,#section-config select{background:#151a26!important;border:1px solid rgba(255,255,255,.14)!important;border-radius:10px!important;color:var(--text-primary)!important;padding:10px 13px!important} #section-config input:focus,#section-config textarea:focus,#section-config select:focus{border-color:rgba(0,242,255,.5)!important;outline:none!important} .gv2-nodes{display:flex;flex-wrap:wrap;gap:9px;margin:4px 0 18px} .gv2-node{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.025);border:1px solid var(--border-glass);border-radius:11px;padding:10px 14px;cursor:pointer;transition:.15s;font-size:11.5px;font-weight:800;letter-spacing:.6px;color:var(--text-secondary);text-transform:uppercase} .gv2-node:hover{border-color:rgba(0,242,255,.4);color:var(--text-primary)} .gv2-node.on{border-color:rgba(0,242,255,.55);background:rgba(0,242,255,.07);color:#fff} .gv2-led{width:9px;height:9px;border-radius:50%;background:#2a2f3e;border:1px solid rgba(255,255,255,.15);flex:0 0 9px;transition:.2s} .gv2-led.lit{background:#00f2ff;border-color:#00f2ff;box-shadow:0 0 8px rgba(0,242,255,.8)} .gv2-node small{font-weight:700;font-size:9px;letter-spacing:.5px;color:var(--text-muted);text-transform:none} .gv2-node .kv{font-size:9px;color:#7fe9f2;font-weight:800} .gv2-sec-hidden{display:none!important} #character-editor .form-row{display:block!important;grid-template-columns:1fr!important} #character-editor .form-row>.form-group{width:100%!important;max-width:100%!important;margin-bottom:12px!important} #character-editor .char-detail-form{display:block!important} #character-editor .char-detail-form>*{width:100%!important;max-width:100%!important} #character-editor [class*="grid"]:not(.journey-grid):not(.gv2-nodes){grid-template-columns:1fr!important} #character-editor .form-group{width:100%!important;max-width:100%!important;margin-bottom:12px!important} #character-editor details.gnx-fold>summary{display:none!important} #character-editor details.gnx-fold{display:contents!important} .gv2-curve{max-width:900px;margin:18px auto;background:var(--bg-card);border:1px solid var(--border-glass);border-radius:16px;padding:20px 22px} .gv2-curve-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px} .gv2-curve-t{font-size:11px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:#7fe9f2} .gv2-curve-r{border:1px solid var(--border-glass);background:rgba(255,255,255,.03);color:var(--text-secondary);cursor:pointer;border-radius:8px;padding:6px 10px;font-size:11px} .gv2-curve svg{width:100%;height:auto;display:block} .gv2-curve-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px} .gv2-curve-note{font-size:10.5px;color:var(--text-muted);margin-top:8px;line-height:1.5} .gv2-ledbar{font-family:ui-monospace,Consolas,monospace;background:#05070c;border:1px solid rgba(0,242,255,.25);box-shadow:inset 0 0 14px rgba(0,242,255,.08);color:#39e6f0;border-radius:8px;padding:8px 12px;font-size:11px;letter-spacing:2px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:10px} .gv2-act-chip{cursor:pointer} .gv2-bib-note{margin-top:16px;border-top:1px dashed var(--border-glass);padding-top:12px} .gv2-bib-note textarea{width:100%;min-height:70px;background:#151a26!important;border:1px solid rgba(255,255,255,.14)!important;border-radius:10px!important;color:var(--text-primary)!important;padding:10px 12px!important} #section-brain details.gv2-tame{background:var(--bg-glass);border:1px solid var(--border-glass);border-radius:12px;margin:10px 0;padding:0 12px} #section-brain details.gv2-tame summary{cursor:pointer;padding:10px 2px;font-size:11.5px;font-weight:800;letter-spacing:.5px;color:var(--text-secondary)} .gv2-axis-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;background:rgba(255,255,255,.02);border:1px solid var(--border-glass);border-radius:10px;padding:9px 14px;margin:8px 0} .gv2-axis-row>*{margin:0!important;font-size:12px!important} .gv2-axis-val{margin-left:auto!important;color:#7fe9f2;font-size:11.5px!important;font-weight:800;letter-spacing:.4px} .gv2-navico{display:grid!important;place-items:center!important;line-height:0!important} .gv2-navico svg{width:22px;height:22px} .sidebar:not(.expanded) .gnx-group-label{display:none!important} .sidebar.expanded .gnx-group-label{font-size:9px!important;letter-spacing:1.5px!important;text-transform:uppercase!important;color:var(--text-muted)!important;padding:10px 0 4px 18px!important;align-self:flex-start!important}