/*
 * Vigentia Core · tools.css
 * Solo layout específico de herramientas, etiquetas de PackageCard y chips de [vg_recursos].
 * Colores y tipografía: únicamente tokens (var(--vigentia-*) con respaldo a los tokens base). Sin HEX.
 * Los componentes genéricos (.vg-btn, .vg-card, .vg-badge, .vg-tag, .vg-note, .vg-form…) los pone el tema.
 * Mobile-first; sin dependencia de hover; sin animaciones (respeta prefers-reduced-motion por construcción).
 */

.vg-tool,
.vg-resources,
.vg-pkg {
	--vgt-line: var(--vigentia-line, var(--line));
	--vgt-line-strong: var(--vigentia-line-strong, var(--line-strong));
	--vgt-paper: var(--vigentia-paper, var(--paper));
	--vgt-paper-2: var(--vigentia-paper-2, var(--paper-2));
	--vgt-ink: var(--vigentia-ink, var(--ink));
	--vgt-ink-soft: var(--vigentia-ink-soft, var(--ink-soft));
	--vgt-accent: var(--vigentia-accent, var(--accent));
	--vgt-accent-text: var(--vigentia-accent-text, var(--accent-text));
}

.vg-tool [hidden],
.vg-resources [hidden] { display: none !important; }

/* ───────── Contenedor ───────── */
.vg-tool {
	display: block;
	padding: 1rem;
	border: 1px solid var(--vgt-line);
	border-radius: 0.75rem;
	background: var(--vgt-paper);
	color: var(--vgt-ink);
}
@media (min-width: 768px) { .vg-tool { padding: 1.5rem; } }

.vg-tool__app,
.vg-tool__form { display: grid; gap: 1rem; }

.vg-tool__sub { margin: 1rem 0 0.25rem; font-weight: 600; }
.vg-tool__routes { padding-left: 1.25rem; display: grid; gap: 0.5rem; }
.vg-tool__meta { display: grid; gap: 0.75rem; margin: 0; }
.vg-tool__meta dt { font-weight: 600; }
.vg-tool__meta dd { margin: 0; color: var(--vgt-ink-soft); }
.vg-tool__secondary { align-items: center; }

/* Foco visible en elementos que reciben foco programático */
.vg-tool__legend:focus-visible,
.vg-tool__result-title:focus-visible,
.vg-tool__tab:focus-visible {
	outline: 2px solid var(--vgt-accent);
	outline-offset: 2px;
}

/* ───────── Selector ───────── */
.vg-tool__step { border: 0; margin: 0; padding: 0; min-inline-size: 0; display: grid; gap: 0.75rem; }
.vg-tool__legend { font-weight: 600; padding: 0; margin-bottom: 0.25rem; }
.vg-tool__stepno { color: var(--vgt-accent-text); }
.vg-tool__step--sub { padding-top: 0.5rem; border-top: 1px solid var(--vgt-line); }
.vg-tool__options { display: grid; gap: 0.5rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .vg-tool__options { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vg-tool .vg-progress { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; list-style: none; padding: 0; margin: 0; }
.vg-tool .vg-progress li { color: var(--vgt-ink-soft); }
.vg-tool .vg-progress li.is-current { color: var(--vgt-ink); font-weight: 600; }
.vg-tool .vg-progress li.is-done { color: var(--vgt-accent-text); }
.vg-tool__card { display: grid; gap: 0.75rem; }
.vg-tool__manual { border-top: 1px solid var(--vgt-line); padding-top: 0.75rem; }
.vg-tool__manual summary { cursor: pointer; font-weight: 600; }
.vg-tool__manual ul { padding-left: 1.25rem; margin: 0.5rem 0 0; display: grid; gap: 0.25rem; }

/* ───────── Pestañas (comparador y simulador) ───────── */
.vg-tool__tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.vg-tool__tab {
	appearance: none;
	min-height: 2.75rem;
	padding: 0.5rem 1rem;
	border: 1px solid var(--vgt-line-strong);
	border-radius: 999px;
	background: transparent;
	color: var(--vgt-ink);
	font: inherit;
	cursor: pointer;
}
.vg-tool__tab[aria-selected="true"] {
	border-color: var(--vgt-accent);
	background: var(--vgt-paper-2);
	color: var(--vgt-accent-text);
	font-weight: 600;
}

/* ───────── Calculadora ───────── */
.vg-calc__layout { display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .vg-calc__layout { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; } }
.vg-calc__form { display: grid; gap: 1rem; }
.vg-calc__unit { color: var(--vgt-ink-soft); font-weight: 400; }
.vg-calc__proofs { display: grid; gap: 0.75rem; grid-template-columns: 1fr; }
@media (min-width: 480px) { .vg-calc__proofs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vg-calc__proofs .vg-proof { display: grid; gap: 0.25rem; align-content: start; }
.vg-calc__proofs .vg-proof__value,
.vg-calc__proofs .vg-proof__label { display: block; }
.vg-calc__proofs .vg-proof__value { font-size: 1.5rem; font-weight: 600; }
.vg-calc__results { display: grid; gap: 1rem; }
.vg-calc__figure { margin: 0; display: grid; gap: 0.5rem; }
.vg-calc__chart { width: 100%; height: 4.5rem; display: block; }
.vg-calc__bar--before { fill: var(--vgt-ink-soft); }
.vg-calc__bar--after { fill: var(--vgt-accent); }
.vg-calc__bar--freed { fill: var(--vgt-accent); fill-opacity: 0.25; }
.vg-calc__legend { color: var(--vgt-ink-soft); }
.vg-calc__key--before { font-weight: 600; }
.vg-calc__key--after { font-weight: 600; color: var(--vgt-accent-text); }
.vg-calc__formulas summary { cursor: pointer; font-weight: 600; }
.vg-calc__formulas ul { padding-left: 1.25rem; margin: 0.5rem 0 0; font-family: ui-monospace, monospace; }

/* ───────── Comparador ───────── */
.vg-compare__title { margin: 0 0 0.25rem; }
.vg-compare__promise { margin: 0 0 1rem; color: var(--vgt-ink-soft); }
.vg-compare__table { display: none; }
.vg-compare__cards { display: grid; gap: 1rem; }
.vg-compare__dl { display: grid; gap: 0.75rem; margin: 0 0 1rem; }
.vg-compare__dl dt { font-weight: 600; }
.vg-compare__dl dd { margin: 0; color: var(--vgt-ink-soft); }
@media (min-width: 768px) {
	.vg-compare__cards { display: none; }
	.vg-compare__table {
		display: table;
		width: 100%;
		table-layout: fixed;
		border-collapse: collapse;
		overflow-wrap: anywhere;
	}
	.vg-compare__table caption { text-align: left; padding-bottom: 0.5rem; color: var(--vgt-ink-soft); }
	.vg-compare__table th,
	.vg-compare__table td { text-align: left; vertical-align: top; padding: 0.75rem; border-top: 1px solid var(--vgt-line); }
	.vg-compare__table thead th { border-top: 0; border-bottom: 2px solid var(--vgt-line-strong); }
	.vg-compare__table tbody th[scope="row"] { width: 11rem; color: var(--vgt-ink-soft); font-weight: 600; }
}

/* ───────── Simulador y explorador ───────── */
.vg-sim__label,
.vg-expl__flag { margin: 0 0 1rem; }
.vg-sim__metrics { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; }
.vg-sim__metric { display: grid; gap: 0.25rem; }
.vg-sim__metric-label { font-weight: 600; }
.vg-sim__metric-values { color: var(--vgt-ink-soft); }
.vg-sim__bars { width: 100%; height: 0.75rem; display: block; }
.vg-sim__bar--before { fill: var(--vgt-ink-soft); }
.vg-sim__bar--after { fill: var(--vgt-accent); }
.vg-expl__filters { display: grid; gap: 0.75rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .vg-expl__filters { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ───────── PackageCard: rótulos de las listas Incluye / No incluye ───────── */
.vg-pkg__incl::before,
.vg-pkg__excl::before {
	content: attr(data-label);
	display: block;
	margin-bottom: 0.25rem;
	font-weight: 600;
	color: var(--vgt-accent-text);
}
.vg-pkg__excl::before { color: var(--vgt-ink-soft); }

/* ───────── [vg_recursos]: chips, buscador y rejilla ───────── */
.vg-resources { display: grid; gap: 1.5rem; }
.vg-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.vg-chip {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0.5rem 1rem;
	border: 1px solid var(--vgt-line-strong);
	border-radius: 999px;
	color: var(--vgt-ink);
	text-decoration: none;
}
.vg-chip:focus-visible { outline: 2px solid var(--vgt-accent); outline-offset: 2px; }
.vg-chip.is-active,
.vg-chip[aria-current] { border-color: var(--vgt-accent); background: var(--vgt-paper-2); color: var(--vgt-accent-text); font-weight: 600; }
.vg-resources__search { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: end; }
.vg-resources__search .vg-field { flex: 1 1 16rem; }
.vg-content-card__meta { margin: 0; color: var(--vgt-ink-soft); }

/* ───────── Cierre de clases generadas por los JS/PHP de las herramientas ─────────
 * Hooks sin estilo propio (solo id/name/prefijo de id): vg-simtab-N, vg-simpanel, vg-cmp{N}-{familia},
 * vg-tab-N, vg-opt-N, vg-err-N, vg-res-s (ids) y vg-sel-s (name de los radios de subpregunta). */

/* Evita desbordes a 360 px en cualquier hijo de rejilla/flex de las herramientas */
.vg-tool,
.vg-tool__app,
.vg-tool__card,
.vg-tool__result,
.vg-calc__inputs,
.vg-sim__panel,
.vg-expl__card,
.vg-compare__card { min-width: 0; overflow-wrap: anywhere; }

.vg-tool__result { display: block; }
.vg-tool__result:empty { display: none; }

/* Opciones de radio (selector): estado seleccionado, foco y activo */
.vg-tool .vg-check { display: flex; gap: 0.75rem; align-items: flex-start; min-height: 2.75rem; padding: 0.5rem 0.75rem; border: 1px solid var(--vgt-line-strong); border-radius: 0.5rem; cursor: pointer; }
.vg-tool .vg-check:focus-within { outline: 2px solid var(--vgt-accent); outline-offset: 2px; }
.vg-tool .vg-check:has(input:checked) { border-color: var(--vgt-accent); background: var(--vgt-paper-2); color: var(--vgt-accent-text); font-weight: 600; }
.vg-tool .vg-check:active { border-color: var(--vgt-accent); }

/* Pestañas: pulsado */
.vg-tool__tab:active { border-color: var(--vgt-accent); background: var(--vgt-paper-2); }

/* Calculadora */
.vg-calc { min-width: 0; }
.vg-calc__inputs { display: grid; gap: 1rem; }
.vg-calc__bar { stroke: none; }
.vg-calc__key { display: inline; }
.vg-calc__legend { overflow-wrap: anywhere; }
.vg-calc input.vg-input { width: 100%; max-width: 100%; box-sizing: border-box; }
.vg-calc input.vg-input:focus-visible { outline: 2px solid var(--vgt-accent); outline-offset: 2px; }
.vg-calc input.vg-input[aria-invalid="true"] { border-color: var(--vgt-accent-text); }

/* Simulador */
.vg-sim { min-width: 0; }
.vg-sim__panel { display: grid; gap: 0.75rem; padding: 1rem; border: 1px solid var(--vgt-line); border-radius: 0.5rem; background: var(--vgt-paper); }
.vg-sim__bar { stroke: none; }
.vg-sim__bar--after { fill-opacity: 1; }
.vg-sim .vg-btn:focus-visible { outline: 2px solid var(--vgt-accent); outline-offset: 2px; }
.vg-sim .vg-btn[aria-pressed="true"] { border-color: var(--vgt-accent); }

/* Explorador */
.vg-expl { min-width: 0; display: grid; gap: 1rem; }
.vg-expl__card { display: grid; gap: 0.5rem; align-content: start; min-width: 0; }
.vg-expl .vg-select { width: 100%; max-width: 100%; box-sizing: border-box; }
.vg-expl .vg-select:focus-visible { outline: 2px solid var(--vgt-accent); outline-offset: 2px; }

/* Comparador: tarjeta móvil */
.vg-compare__card { display: grid; gap: 0.5rem; align-content: start; padding: 1rem; border: 1px solid var(--vgt-line); border-radius: 0.5rem; }
.vg-compare__card .vg-btn:focus-visible,
.vg-compare__table .vg-btn:focus-visible { outline: 2px solid var(--vgt-accent); outline-offset: 2px; }