/* ==========================================================================
   GridTotals — Modelo de Proyección de Totales NCAA
   Ruta: components/proprietary/gt-modelo-totales.css
   Todo el CSS está limitado al ámbito de #gt-modelo-totales.
   Ajusta el bloque de variables para adaptarlo al tema.
   ========================================================================== */

#gt-modelo-totales {
	/* Tipografía */
	--gt-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--gt-font-num: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	--gt-fs-base: 1rem;
	--gt-fs-small: 0.875rem;
	--gt-fs-tiny: 0.8125rem;
	--gt-lh: 1.55;

	/* Color */
	--gt-text: #142019;
	--gt-muted: #5c6b64;
	--gt-bg: #ffffff;
	--gt-surface: #f4f7f5;
	--gt-surface-alt: #eaf0ec;
	--gt-border: #d5dfd9;
	--gt-border-strong: #b9c8c0;
	--gt-accent: #0f7a4a;
	--gt-accent-dark: #0a5836;
	--gt-over: #0f7a4a;
	--gt-over-soft: #e3f2ea;
	--gt-under: #1d4ed8;
	--gt-under-soft: #e4eafd;
	--gt-none: #92531a;
	--gt-none-soft: #fbf0dd;
	--gt-focus: #0f7a4a;

	/* Forma y espaciado */
	--gt-radius: 10px;
	--gt-radius-sm: 6px;
	--gt-gap: 1rem;
	--gt-pad: 1.125rem;

	box-sizing: border-box;
	display: block;
	margin: 2rem 0;
	padding: var(--gt-pad);
	border: 1px solid var(--gt-border);
	border-radius: var(--gt-radius);
	background-color: var(--gt-bg);
	color: var(--gt-text);
	font-family: var(--gt-font);
	font-size: var(--gt-fs-base);
	line-height: var(--gt-lh);
	max-width: 100%;
}

#gt-modelo-totales *,
#gt-modelo-totales *::before,
#gt-modelo-totales *::after {
	box-sizing: border-box;
	min-width: 0;
	max-width: 100%;
}

#gt-modelo-totales [hidden] {
	display: none;
}

/* --------------------------------------------------------- Encabezado -- */

#gt-modelo-totales .gt-mt-head {
	margin: 0 0 1.25rem;
}

#gt-modelo-totales .gt-mt-kicker {
	margin: 0 0 0.35rem;
	color: var(--gt-accent);
	font-size: var(--gt-fs-tiny);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

#gt-modelo-totales h3 {
	margin: 0 0 0.5rem;
	color: var(--gt-text);
	font-family: var(--gt-font);
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.25;
}

#gt-modelo-totales .gt-mt-intro {
	margin: 0;
	color: var(--gt-muted);
	font-size: var(--gt-fs-small);
}

/* ---------------------------------------------------------- Pestañas -- */

#gt-modelo-totales .gt-mt-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	margin: 0 0 1rem;
	border-bottom: 1px solid var(--gt-border);
	padding-bottom: 0.5rem;
}

#gt-modelo-totales .gt-mt-tab {
	flex: 1 1 12rem;
	margin: 0;
	border: 1px solid var(--gt-border);
	border-radius: var(--gt-radius-sm);
	padding: 0.6rem 0.85rem;
	background-color: var(--gt-surface);
	color: var(--gt-muted);
	font-family: inherit;
	font-size: var(--gt-fs-small);
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

#gt-modelo-totales .gt-mt-tab:hover {
	background-color: var(--gt-surface-alt);
	color: var(--gt-text);
}

#gt-modelo-totales .gt-mt-tab--on {
	border-color: var(--gt-accent);
	background-color: var(--gt-accent);
	color: #ffffff;
}

#gt-modelo-totales .gt-mt-tab--on:hover {
	background-color: var(--gt-accent-dark);
	color: #ffffff;
}

#gt-modelo-totales .gt-mt-panel {
	margin: 0 0 1.25rem;
}

#gt-modelo-totales .gt-mt-panel:focus {
	outline: none;
}

/* ------------------------------------------------------- Formularios -- */

#gt-modelo-totales .gt-mt-teams {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--gt-gap);
	margin: 0 0 var(--gt-gap);
}

#gt-modelo-totales .gt-mt-fs {
	margin: 0;
	border: 1px solid var(--gt-border);
	border-radius: var(--gt-radius);
	padding: 0.9rem 1rem 1rem;
	background-color: var(--gt-surface);
	min-width: 0;
}

#gt-modelo-totales .gt-mt-legend {
	margin: 0;
	padding: 0 0.4rem;
	color: var(--gt-text);
	font-size: var(--gt-fs-tiny);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

#gt-modelo-totales .gt-mt-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 0.85rem var(--gt-gap);
}

#gt-modelo-totales .gt-mt-field {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	margin: 0 0 0.85rem;
}

#gt-modelo-totales .gt-mt-grid .gt-mt-field {
	margin: 0;
}

#gt-modelo-totales .gt-mt-label {
	color: var(--gt-text);
	font-size: var(--gt-fs-small);
	font-weight: 600;
}

#gt-modelo-totales .gt-mt-help {
	color: var(--gt-muted);
	font-size: var(--gt-fs-tiny);
	line-height: 1.4;
}

#gt-modelo-totales .gt-mt-input,
#gt-modelo-totales .gt-mt-select {
	width: 100%;
	margin: 0;
	border: 1px solid var(--gt-border-strong);
	border-radius: var(--gt-radius-sm);
	padding: 0.55rem 0.65rem;
	background-color: var(--gt-bg);
	color: var(--gt-text);
	font-family: var(--gt-font);
	font-size: 16px;
	line-height: 1.3;
	appearance: none;
}

#gt-modelo-totales .gt-mt-select-wrap {
	display: block;
	position: relative;
}

#gt-modelo-totales .gt-mt-select {
	padding-right: 2rem;
}

#gt-modelo-totales .gt-mt-select-wrap::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0.75rem;
	width: 0.5rem;
	height: 0.5rem;
	margin-top: -0.35rem;
	border-right: 2px solid var(--gt-muted);
	border-bottom: 2px solid var(--gt-muted);
	transform: rotate(45deg);
	pointer-events: none;
}

#gt-modelo-totales .gt-mt-check {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin: 0 0 0.6rem;
	color: var(--gt-text);
	font-size: var(--gt-fs-small);
}

#gt-modelo-totales .gt-mt-grid .gt-mt-check {
	margin: 0;
	align-self: center;
}

#gt-modelo-totales .gt-mt-check input {
	flex: 0 0 auto;
	width: 1.05rem;
	height: 1.05rem;
	margin: 0.25rem 0 0;
	accent-color: var(--gt-accent);
}

#gt-modelo-totales .gt-mt-check label {
	cursor: pointer;
	line-height: 1.4;
}

/* ------------------------------------------------------------ Rango -- */

#gt-modelo-totales .gt-mt-field--range {
	position: relative;
}

#gt-modelo-totales .gt-mt-range {
	width: 100%;
	height: 1.5rem;
	margin: 0;
	padding: 0;
	background-color: transparent;
	appearance: none;
}

#gt-modelo-totales .gt-mt-range::-webkit-slider-runnable-track {
	height: 0.375rem;
	border-radius: 999px;
	background-color: var(--gt-surface-alt);
}

#gt-modelo-totales .gt-mt-range::-moz-range-track {
	height: 0.375rem;
	border-radius: 999px;
	background-color: var(--gt-surface-alt);
}

#gt-modelo-totales .gt-mt-range::-webkit-slider-thumb {
	width: 1.15rem;
	height: 1.15rem;
	margin-top: -0.39rem;
	border: 2px solid var(--gt-bg);
	border-radius: 50%;
	background-color: var(--gt-accent);
	appearance: none;
	cursor: pointer;
}

#gt-modelo-totales .gt-mt-range::-moz-range-thumb {
	width: 1.15rem;
	height: 1.15rem;
	border: 2px solid var(--gt-bg);
	border-radius: 50%;
	background-color: var(--gt-accent);
	cursor: pointer;
}

#gt-modelo-totales .gt-mt-out {
	display: inline-block;
	color: var(--gt-text);
	font-family: var(--gt-font-num);
	font-size: var(--gt-fs-small);
	font-weight: 700;
}

/* ------------------------------------------------------------ Tabla -- */

#gt-modelo-totales .gt-mt-tablewrap {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	margin: var(--gt-gap) 0 0;
	border: 1px solid var(--gt-border);
	border-radius: var(--gt-radius);
	background-color: var(--gt-surface);
}

#gt-modelo-totales .gt-mt-table {
	width: 100%;
	min-width: 18rem;
	border-collapse: collapse;
	font-size: var(--gt-fs-small);
}

#gt-modelo-totales .gt-mt-caption {
	padding: 0.75rem 0.85rem 0.5rem;
	color: var(--gt-muted);
	font-size: var(--gt-fs-tiny);
	font-weight: 700;
	letter-spacing: 0.05em;
	text-align: left;
	text-transform: uppercase;
}

#gt-modelo-totales .gt-mt-table th,
#gt-modelo-totales .gt-mt-table td {
	border-top: 1px solid var(--gt-border);
	padding: 0.55rem 0.85rem;
	text-align: left;
	vertical-align: top;
}

#gt-modelo-totales .gt-mt-table thead th {
	border-top: none;
	color: var(--gt-muted);
	font-size: var(--gt-fs-tiny);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

#gt-modelo-totales .gt-mt-table tbody th {
	font-weight: 500;
}

#gt-modelo-totales .gt-mt-table td {
	font-family: var(--gt-font-num);
	white-space: nowrap;
}

#gt-modelo-totales .gt-mt-table tfoot th,
#gt-modelo-totales .gt-mt-table tfoot td {
	border-top: 2px solid var(--gt-border-strong);
	font-weight: 700;
}

/* --------------------------------------------------------- Resultados -- */

#gt-modelo-totales .gt-mt-results {
	border: 1px solid var(--gt-border);
	border-radius: var(--gt-radius);
	padding: var(--gt-pad);
	background-color: var(--gt-surface);
}

#gt-modelo-totales .gt-mt-verdict {
	margin: 0 0 1rem;
}

#gt-modelo-totales .gt-mt-badge {
	display: inline-block;
	margin: 0 0 0.5rem;
	border-radius: 999px;
	padding: 0.3rem 0.8rem;
	font-size: var(--gt-fs-tiny);
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

#gt-modelo-totales .gt-mt-badge--over {
	background-color: var(--gt-over-soft);
	color: var(--gt-over);
}

#gt-modelo-totales .gt-mt-badge--under {
	background-color: var(--gt-under-soft);
	color: var(--gt-under);
}

#gt-modelo-totales .gt-mt-badge--none {
	background-color: var(--gt-none-soft);
	color: var(--gt-none);
}

#gt-modelo-totales .gt-mt-verdict-text {
	margin: 0;
	color: var(--gt-text);
	font-size: var(--gt-fs-small);
}

#gt-modelo-totales .gt-mt-headline {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 0.75rem;
	margin: 0 0 1rem;
}

#gt-modelo-totales .gt-mt-big {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	margin: 0;
	border: 1px solid var(--gt-border);
	border-radius: var(--gt-radius-sm);
	padding: 0.75rem 0.85rem;
	background-color: var(--gt-bg);
}

#gt-modelo-totales .gt-mt-big-num {
	color: var(--gt-accent);
	font-family: var(--gt-font-num);
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.1;
}

#gt-modelo-totales .gt-mt-big-num--alt {
	color: var(--gt-muted);
}

#gt-modelo-totales .gt-mt-big-lab {
	color: var(--gt-muted);
	font-size: var(--gt-fs-tiny);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

#gt-modelo-totales .gt-mt-metrics {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 0.65rem;
	margin: 0 0 1rem;
}

#gt-modelo-totales .gt-mt-metric {
	border: 1px solid var(--gt-border);
	border-radius: var(--gt-radius-sm);
	padding: 0.6rem 0.7rem;
	background-color: var(--gt-bg);
}

#gt-modelo-totales .gt-mt-metric dt {
	margin: 0 0 0.15rem;
	color: var(--gt-muted);
	font-size: var(--gt-fs-tiny);
	line-height: 1.3;
}

#gt-modelo-totales .gt-mt-metric dd {
	margin: 0;
	color: var(--gt-text);
	font-family: var(--gt-font-num);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.25;
}

#gt-modelo-totales .gt-mt-flags {
	margin: 0;
	padding: 0;
	list-style: none;
}

#gt-modelo-totales .gt-mt-flags:empty {
	display: none;
}

#gt-modelo-totales .gt-mt-flags li {
	margin: 0 0 0.5rem;
	border-left: 3px solid var(--gt-border-strong);
	padding: 0.15rem 0 0.15rem 0.7rem;
	color: var(--gt-muted);
	font-size: var(--gt-fs-tiny);
	line-height: 1.45;
}

#gt-modelo-totales .gt-mt-flags li:last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------------------ Varios -- */

#gt-modelo-totales .gt-mt-note {
	margin: 0.75rem 0 0;
	color: var(--gt-muted);
	font-size: var(--gt-fs-tiny);
}

#gt-modelo-totales .gt-mt-actions {
	margin: 1rem 0 0;
}

#gt-modelo-totales .gt-mt-btn {
	display: inline-block;
	margin: 0;
	border: 1px solid var(--gt-border-strong);
	border-radius: var(--gt-radius-sm);
	padding: 0.55rem 1rem;
	background-color: var(--gt-bg);
	color: var(--gt-text);
	font-family: inherit;
	font-size: var(--gt-fs-small);
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

#gt-modelo-totales .gt-mt-btn:hover {
	background-color: var(--gt-surface-alt);
}

#gt-modelo-totales .gt-mt-foot {
	margin: 1.25rem 0 0;
	border-top: 1px solid var(--gt-border);
	padding: 0.9rem 0 0;
}

#gt-modelo-totales .gt-mt-disclaimer {
	margin: 0 0 0.5rem;
	color: var(--gt-muted);
	font-size: var(--gt-fs-tiny);
	line-height: 1.45;
}

#gt-modelo-totales .gt-mt-disclaimer:last-child {
	margin-bottom: 0;
}

/* -------------------------------------------------------------- Foco -- */

#gt-modelo-totales .gt-mt-tab:focus-visible,
#gt-modelo-totales .gt-mt-btn:focus-visible,
#gt-modelo-totales .gt-mt-input:focus-visible,
#gt-modelo-totales .gt-mt-select:focus-visible,
#gt-modelo-totales .gt-mt-range:focus-visible,
#gt-modelo-totales .gt-mt-check input:focus-visible,
#gt-modelo-totales .gt-mt-panel:focus-visible {
	outline: 3px solid var(--gt-focus);
	outline-offset: 2px;
}

/* ------------------------------------------------------ Ampliaciones -- */

@media (min-width: 40em) {

	#gt-modelo-totales {
		padding: 1.75rem;
	}

	#gt-modelo-totales h3 {
		font-size: 1.6rem;
	}

	#gt-modelo-totales .gt-mt-big-num {
		font-size: 2.5rem;
	}
}

@media (prefers-reduced-motion: reduce) {

	#gt-modelo-totales .gt-mt-tab,
	#gt-modelo-totales .gt-mt-btn {
		transition: none;
	}
}