/* RSS — Herramientas: selector de juego + paneles temáticos
   Reutiliza los componentes .tag / .tools-list / .tool-row de main.css;
   aquí solo se resuelve la navegación por pestañas y el acento por juego
   (cada panel sobreescribe --red / --red-bright, que es lo único que
   .tag y .tool-row consultan para colorear). */

.tools-hub{ margin-top: 0; }

/* Menos aire entre el título de la página y el selector de juego */
body[class*="tpl-herramientas"] .section{ padding-top: clamp(1.2rem, 2.5vw, 2rem); }

/* ---------- Pestañas ---------- */
.tools-tabs{
	display: flex;
	gap: .5rem;
	border-bottom: 1px solid var(--line);
	margin-bottom: 2.2rem;
	overflow-x: auto;
	scrollbar-width: none;
}
.tools-tabs::-webkit-scrollbar{ display: none; }

.tools-tab{
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	padding: .9rem .3rem 1rem;
	margin-right: 1.6rem;
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.15rem;
	color: var(--text-faint);
	cursor: pointer;
	white-space: nowrap;
	transition: color .2s, border-color .2s;
}
.tools-tab .tools-tab__num{
	font-family: var(--font-mono);
	font-size: .78rem;
	letter-spacing: .08em;
	color: var(--text-faint);
}
.tools-tab:hover{ color: var(--text); }
.tools-tab.is-active{ color: var(--text); border-color: var(--tab-accent, var(--red-bright)); }
.tools-tab.is-active .tools-tab__num{ color: var(--tab-accent, var(--red-bright)); }

/* Cada botón "sabe" su propio color de juego para pintarse en cuanto está activo */
.tools-tab[data-game="nms"]{ --tab-accent: #e7242f; }
.tools-tab[data-game="starcitizen"]{ --tab-accent: #00c8ff; }
.tools-tab[data-game="starfield"]{ --tab-accent: #e56335; }

/* ---------- Paneles ---------- */
.tools-panel{ }
.tools-panel[hidden]{ display: none; }

/* Franja Starfield: mismas cuatro bandas que en /guias/ */
.sf-stripe{
	display: flex;
	height: 5px;
	width: 100%;
	border-radius: var(--radius);
	overflow: hidden;
	margin-bottom: 1.6rem;
}
.sf-stripe span{ flex: 1; }
.sf-stripe span:nth-child(1){ background: #cd2435; }
.sf-stripe span:nth-child(2){ background: #e56335; }
.sf-stripe span:nth-child(3){ background: #d4ac63; }
.sf-stripe span:nth-child(4){ background: #2b4d7d; }

/* Esquinas HUD sutiles para Star Citizen, en línea con /guias/ */
.tools-panel[data-game="starcitizen"] .tools-list{
	position: relative;
}
.tools-panel[data-game="starcitizen"] .tools-list::after{
	content: '';
	position: absolute;
	right: -1px; bottom: -1px;
	width: 16px; height: 16px;
	border-right: 2px solid var(--red-bright);
	border-bottom: 2px solid var(--red-bright);
	pointer-events: none;
}

@media (max-width: 600px){
	.tools-tab{ font-size: 1rem; margin-right: 1.1rem; }
}