.bgs { max-width: 1120px; margin: 30px auto; font-family: 'Inter', system-ui, -apple-system, sans-serif; color: #f1f5f9; background: #0d1410; border: 1px solid #365314; border-radius: 16px; padding: 16px; box-sizing: border-box; outline: none; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8); }
.bgs div, .bgs input, .bgs select, .bgs textarea, .bgs button, .bgs canvas, .bgs label, .bgs summary { box-sizing: border-box; }
.bgs button, .bgs select, .bgs input, .bgs textarea { font-family: inherit; }
.bgs-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-bottom: 12px; border-bottom: 2px solid #365314; }
.bgs-brand { display: flex; align-items: center; gap: 10px; margin-right: 6px; }
.bgs-brand span { font-size: 1.6rem; background: linear-gradient(135deg, #4d7c0f, #84cc16); border-radius: 10px; padding: 6px 9px; color: #0d1410; }
.bgs-brand b { display: block; font-size: 1.05rem; letter-spacing: .3px; color: #ecfccb; }
.bgs-brand small { color: #9ca3af; font-size: .72rem; }
.bgs-grow { flex: 1; }
.bgs select, .bgs input[type=text], .bgs input[type=number] { background: #0d1410; border: 1px solid #3f6212; color: #f8fafc; border-radius: 8px; padding: 8px 10px; font-size: .85rem; outline: none; width: 100%; }
.bgs-top select { width: auto; min-width: 170px; }
.bgs select:focus, .bgs input:focus { border-color: #84cc16; }
.bgs-btn { display: inline-flex; align-items: center; gap: 6px; background: #1a2e1d; color: #bef264; border: 1px solid #3f6212; border-radius: 8px; padding: 8px 12px; font-size: .82rem; font-weight: 600; cursor: pointer; margin: 0; transition: transform .1s, background .2s; }
.bgs-btn:hover { background: #27442b; }
.bgs-btn:active { transform: scale(.97); }

/* Botón Generar/Descargar con Color de Contraste (Naranja Vibrante) */
.bgs-primary { background: linear-gradient(135deg, #f97316, #c2410c); border-color: #ea580c; color: #fff; font-weight: 800; box-shadow: 0 4px 12px rgba(249, 115, 22, 0.4); }
.bgs-primary:hover { background: linear-gradient(135deg, #fb923c, #ea580c); box-shadow: 0 6px 16px rgba(249, 115, 22, 0.6); }

.bgs-danger { color: #fca5a5; border-color: rgba(220,38,38,.4); background: rgba(127,29,29,.25); margin-top: 10px; }
.bgs-msg { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: .8rem; color: #9ca3af; padding: 10px 2px; }
#bgs-warn { color: #fde047; }
.bgs-main { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, 1fr); gap: 16px; }
@media (max-width: 860px) { .bgs-main { grid-template-columns: 1fr; } }
.bgs-maphead { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.bgs-chip { background: #18281d; border: 1px solid #3f6212; border-radius: 20px; padding: 5px 12px; font-size: .78rem; color: #9ca3af; }
.bgs-chip.on { background: rgba(132,204,22,.15); border-color: #84cc16; color: #bef264; font-weight: 700; }
#bgs-coord { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .8rem; color: #9ca3af; }
#bgs-cv { display: block; width: 100%; aspect-ratio: 1 / 1; background: #070b09; border: 1px solid #365314; border-radius: 12px; touch-action: none; cursor: default; }
.bgs-legend { font-size: .76rem; color: #9ca3af; margin-top: 8px; }
.bgs-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin: 0 5px 0 12px; }
.bgs-legend i:first-child { margin-left: 0; }
.c1 { background: #38bdf8; } .c2 { background: #84cc16; } .c3 { background: #f97316; }
.bgs-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 12px; }
.bgs-tab { background: #131d16; color: #9ca3af; border: 1px solid #365314; border-radius: 10px; padding: 9px 4px; font-weight: 700; font-size: .82rem; cursor: pointer; }
.bgs-tab.on { background: rgba(132,204,22,.15); color: #bef264; border-color: #84cc16; }
.bgs-step { background: #131d16; border: 1px solid #365314; border-radius: 12px; padding: 12px; margin-bottom: 10px; }
.bgs-h { font-size: .85rem; font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; color: #f8fafc; }
.bgs-h i { font-style: normal; background: #65a30d; color: #0d1410; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 800; }
.bgs-h small { color: #9ca3af; font-weight: 500; }
#bgs-list { margin-top: 8px; padding: 4px; height: auto; }
.bgs-row { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.bgs-row label, .bgs-fields label { display: flex; flex-direction: column; gap: 4px; font-size: .72rem; color: #bef264; font-weight: 600; flex: 1; min-width: 70px; }
.bgs-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(74px, 1fr)); gap: 8px; }
.bgs-title { font-weight: 700; color: #bef264; margin-bottom: 8px; font-size: .88rem; }
.bgs-btns { display: flex; gap: 8px; margin-top: 10px; }
.bgs-empty { color: #6b7280; font-size: .8rem; text-align: center; padding: 12px; }
#bgs-entries { max-height: 240px; overflow-y: auto; }
.bgs-ent { display: flex; gap: 8px; align-items: baseline; padding: 6px 8px; border-radius: 8px; cursor: pointer; font-size: .8rem; border: 1px solid transparent; }
.bgs-ent:hover { background: #1a2e1d; }
.bgs-ent.sel { background: rgba(132,204,22,.15); border-color: #84cc16; }
.bgs-ent.bad { background: rgba(127,29,29,.3); }
.bgs-ent b { font-family: ui-monospace, Menlo, Consolas, monospace; color: #bef264; }
.bgs-ent span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bgs-ent em { font-style: normal; font-family: ui-monospace, Menlo, Consolas, monospace; color: #9ca3af; font-size: .74rem; white-space: nowrap; }
.bgs-out { margin-top: 6px; border-top: 1px solid #365314; padding-top: 10px; }
.bgs-out summary { cursor: pointer; font-weight: 700; font-size: .85rem; margin-bottom: 10px; color: #bef264; }
.bgs-out textarea { width: 100%; height: 240px; background: #070b09; color: #bef264; border: 1px solid #365314; border-radius: 10px; padding: 12px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .76rem; white-space: pre; }