/* Demo BGG: POS tagger + capa léxica (js/components/demos/bgg-pos.js) */
.bgp { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
.bgp-h { font: 500 0.7rem var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.bgp-in { display: grid; gap: 0.5rem; }
.bgp textarea { width: 100%; resize: vertical; background: var(--bg2); color: var(--text); border: 1px solid var(--border2); border-radius: 10px; padding: 0.8rem 0.9rem; font: 400 0.95rem/1.55 var(--sans, inherit); }
.bgp textarea:focus-visible { outline: 1px solid var(--accent); }
.bgp-ex { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.bgp-chip { font: 500 0.72rem var(--mono); color: var(--muted); background: transparent; border: 1px solid var(--border2); border-radius: 999px; padding: 0.3rem 0.75rem; transition: color 0.2s, border-color 0.2s; } .bgp-chip:hover { color: var(--accent); border-color: var(--accent); }
.bgp-layers { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.2rem; font-size: 0.8rem; color: var(--muted); } .bgp-layers label { display: inline-flex; gap: 0.4rem; align-items: center; cursor: pointer; } .bgp-layers input { accent-color: var(--accent); }
.bgp-out { display: flex; flex-wrap: wrap; gap: 0.5rem 0.35rem; padding: 1rem; background: var(--card); border-radius: var(--r); min-height: 5rem; align-items: flex-start; }
.bgp-tok { display: inline-grid; justify-items: center; gap: 0.15rem; padding: 0.25rem 0.4rem 0.2rem; border-radius: 7px; border-bottom: 2px solid transparent; cursor: default; }
.bgp-tok b { font: 500 0.95rem var(--mono); color: var(--text); } .bgp-tok i { font: 500 0.6rem var(--mono); font-style: normal; letter-spacing: 0.04em; color: var(--muted2); }
.g-n i { color: #8cc8ff; } .g-v i { color: #86efac; } .g-j i { color: #fbbf24; } .g-r i { color: #f0abfc; } .g-o i { color: #a6a6b3; } .g-p i { color: #6a6a78; }
.k-pos { background: rgba(134, 239, 172, 0.13); border-bottom-color: #86efac; } .k-neg { background: rgba(252, 165, 165, 0.13); border-bottom-color: #fca5a5; }
.k-pos.flip { background: rgba(252, 165, 165, 0.13); border-bottom: 2px dashed #fca5a5; } .k-neg.flip { background: rgba(134, 239, 172, 0.13); border-bottom: 2px dashed #86efac; }
.boost b::after { content: " ▲"; font-size: 0.6rem; color: #fcd34d; }
.r-negation { box-shadow: inset 0 0 0 1px #fca5a5; } .r-booster { box-shadow: inset 0 0 0 1px #fcd34d; } .r-mitigator, .r-hedge, .r-certainty { box-shadow: inset 0 0 0 1px #8a8a99; }
.dom { box-shadow: inset 0 0 0 1px var(--accent); background: rgba(var(--accent-r), 0.08); }
.bgp-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0.6rem; }
.bgp-sum > div { background: var(--card); border-radius: 10px; padding: 0.7rem 0.9rem; display: grid; gap: 0.15rem; min-width: 0; } .bgp-sum b { font: 500 1.15rem var(--mono); } .bgp-sum span { font-size: 0.72rem; color: var(--muted); overflow-wrap: anywhere; }
.bgp-net[data-v="pos"] b { color: #86efac; } .bgp-net[data-v="neg"] b { color: #fca5a5; }
.bgp-note { margin: 0; font-size: 0.74rem; line-height: 1.6; color: var(--muted2); max-width: none; } .bgp-note code { font-size: 0.72rem; }