/* =========================================================================
   Calculadora de Valor, Vig y Probabilidad Implícita — Apuestas MLB
   Componente propietario · /components/proprietary/valor-cuotas-mlb.css
   Todo el CSS está scopeado bajo #cmlb-valor.
   Ajusta el bloque de variables para adaptarlo a la paleta del tema.
   ========================================================================= */

#cmlb-valor {
	/* --- Paleta --- */
	--cmlb-bg: #ffffff;
	--cmlb-bg-alt: #f4f6f9;
	--cmlb-bg-dark: #0f2038;
	--cmlb-border: #d8dfe8;
	--cmlb-border-strong: #b7c2d0;
	--cmlb-text: #16202e;
	--cmlb-text-muted: #5b6875;
	--cmlb-text-invert: #ffffff;
	--cmlb-accent: #0b3d91;
	--cmlb-accent-soft: #e7edf8;
	--cmlb-positive: #0f7b46;
	--cmlb-positive-soft: #e6f4ed;
	--cmlb-negative: #b3261e;
	--cmlb-negative-soft: #fbeae9;
	--cmlb-focus: #0b3d91;

	/* --- Tipografía --- */
	--cmlb-font: inherit;
	--cmlb-fs-title: 1.5rem;
	--cmlb-fs-base: 1rem;
	--cmlb-fs-small: 0.875rem;
	--cmlb-fs-kpi: 1.5rem;
	--cmlb-lh: 1.6;
	--cmlb-fw-bold: 700;

	/* --- Métricas --- */
	--cmlb-radius: 10px;
	--cmlb-radius-sm: 6px;
	--cmlb-gap: 16px;
	--cmlb-gap-lg: 24px;
	--cmlb-pad: 18px;
	--cmlb-shadow: 0 1px 3px rgba(15, 32, 56, 0.08);

	box-sizing: border-box;
	display: block;
	margin: 32px 0;
	padding: var(--cmlb-pad);
	border: 1px solid var(--cmlb-border);
	border-radius: var(--cmlb-radius);
	background: var(--cmlb-bg);
	color: var(--cmlb-text);
	font-family: var(--cmlb-font);
	font-size: var(--cmlb-fs-base);
	line-height: var(--cmlb-lh);
	box-shadow: var(--cmlb-shadow);
}

#cmlb-valor *,
#cmlb-valor *::before,
#cmlb-valor *::after {
	box-sizing: border-box;
	min-width: 0;
	max-width: 100%;
}

/* --- Cabecera --- */

#cmlb-valor .cmlb-valor__head {
	margin: 0 0 var(--cmlb-gap-lg) 0;
}

#cmlb-valor .cmlb-valor__title {
	margin: 0 0 8px 0;
	color: var(--cmlb-text);
	font-size: var(--cmlb-fs-title);
	font-weight: var(--cmlb-fw-bold);
	line-height: 1.25;
}

#cmlb-valor .cmlb-valor__lead {
	margin: 0;
	color: var(--cmlb-text-muted);
	font-size: var(--cmlb-fs-small);
}

/* --- Layout intrínsecamente responsivo (sin depender de media queries) --- */

#cmlb-valor .cmlb-valor__layout {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cmlb-gap-lg);
}

#cmlb-valor .cmlb-valor__panel {
	margin: 0;
	padding: 0;
	border: 0;
}

#cmlb-valor .cmlb-valor__panel--form {
	flex: 1 1 280px;
}

#cmlb-valor .cmlb-valor__panel--results {
	flex: 999 1 340px;
}

/* --- Formulario --- */

#cmlb-valor .cmlb-valor__fieldset {
	margin: 0 0 var(--cmlb-gap) 0;
	padding: var(--cmlb-gap);
	border: 1px solid var(--cmlb-border);
	border-radius: var(--cmlb-radius-sm);
	background: var(--cmlb-bg-alt);
}

#cmlb-valor .cmlb-valor__legend {
	padding: 0 6px;
	color: var(--cmlb-accent);
	font-size: var(--cmlb-fs-small);
	font-weight: var(--cmlb-fw-bold);
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

#cmlb-valor .cmlb-valor__row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

#cmlb-valor .cmlb-valor__row--tight {
	align-items: center;
	margin-top: 10px;
	gap: 10px;
}

#cmlb-valor .cmlb-valor__field {
	flex: 1 1 130px;
}

#cmlb-valor .cmlb-valor__field--narrow {
	flex: 0 0 90px;
}

#cmlb-valor .cmlb-valor__label {
	display: block;
	margin-bottom: 5px;
	font-size: var(--cmlb-fs-small);
	font-weight: var(--cmlb-fw-bold);
}

#cmlb-valor .cmlb-valor__input {
	display: block;
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--cmlb-border-strong);
	border-radius: var(--cmlb-radius-sm);
	background: var(--cmlb-bg);
	color: var(--cmlb-text);
	font-family: inherit;
	/* 16px evita el zoom automático en iOS */
	font-size: 16px;
	line-height: 1.3;
}

#cmlb-valor .cmlb-valor__select {
	height: 42px;
	appearance: none;
	-webkit-appearance: none;
}

#cmlb-valor .cmlb-valor__input:focus-visible,
#cmlb-valor .cmlb-valor__range:focus-visible,
#cmlb-valor .cmlb-valor__reset:focus-visible,
#cmlb-valor .cmlb-valor__radio:focus-visible + .cmlb-valor__switch-label {
	outline: 3px solid var(--cmlb-focus);
	outline-offset: 2px;
}

#cmlb-valor .cmlb-valor__input--invalid {
	border-color: var(--cmlb-negative);
	background: var(--cmlb-negative-soft);
}

#cmlb-valor .cmlb-valor__range {
	display: block;
	width: 100%;
	margin: 4px 0 0 0;
	accent-color: var(--cmlb-accent);
}

#cmlb-valor .cmlb-valor__hint {
	margin: 8px 0 0 0;
	color: var(--cmlb-text-muted);
	font-size: var(--cmlb-fs-small);
}

#cmlb-valor .cmlb-valor__hint--inline {
	flex: 1 1 140px;
	margin: 0;
}

#cmlb-valor .cmlb-valor__error {
	margin: 6px 0 0 0;
	color: var(--cmlb-negative);
	font-size: var(--cmlb-fs-small);
	font-weight: var(--cmlb-fw-bold);
}

#cmlb-valor .cmlb-valor__error:empty {
	display: none;
}

/* --- Selector de formato --- */

#cmlb-valor .cmlb-valor__switch {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

#cmlb-valor .cmlb-valor__radio {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

#cmlb-valor .cmlb-valor__switch-label {
	flex: 1 1 110px;
	padding: 10px 14px;
	border: 1px solid var(--cmlb-border-strong);
	border-radius: var(--cmlb-radius-sm);
	background: var(--cmlb-bg);
	color: var(--cmlb-text);
	font-size: var(--cmlb-fs-small);
	font-weight: var(--cmlb-fw-bold);
	text-align: center;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

#cmlb-valor .cmlb-valor__radio:checked + .cmlb-valor__switch-label {
	border-color: var(--cmlb-accent);
	background: var(--cmlb-accent);
	color: var(--cmlb-text-invert);
}

#cmlb-valor .cmlb-valor__reset {
	display: inline-block;
	margin: 4px 0 0 0;
	padding: 9px 14px;
	border: 1px solid var(--cmlb-border-strong);
	border-radius: var(--cmlb-radius-sm);
	background: var(--cmlb-bg);
	color: var(--cmlb-accent);
	font-family: inherit;
	font-size: var(--cmlb-fs-small);
	font-weight: var(--cmlb-fw-bold);
	cursor: pointer;
	transition: background-color 0.15s ease;
}

#cmlb-valor .cmlb-valor__reset:hover {
	background: var(--cmlb-accent-soft);
}

/* --- Resultados --- */

#cmlb-valor .cmlb-valor__verdict {
	margin: 0 0 var(--cmlb-gap) 0;
	padding: 12px 14px;
	border-left: 4px solid var(--cmlb-border-strong);
	border-radius: var(--cmlb-radius-sm);
	background: var(--cmlb-bg-alt);
	font-weight: var(--cmlb-fw-bold);
}

#cmlb-valor .cmlb-valor__verdict--positive {
	border-left-color: var(--cmlb-positive);
	background: var(--cmlb-positive-soft);
	color: var(--cmlb-positive);
}

#cmlb-valor .cmlb-valor__verdict--negative {
	border-left-color: var(--cmlb-negative);
	background: var(--cmlb-negative-soft);
	color: var(--cmlb-negative);
}

#cmlb-valor .cmlb-valor__kpis {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px;
	margin: 0 0 var(--cmlb-gap) 0;
	padding: 0;
	list-style: none;
}

#cmlb-valor .cmlb-valor__kpi {
	padding: 12px 14px;
	border: 1px solid var(--cmlb-border);
	border-radius: var(--cmlb-radius-sm);
	background: var(--cmlb-bg-alt);
}

#cmlb-valor .cmlb-valor__kpi-label {
	display: block;
	color: var(--cmlb-text-muted);
	font-size: var(--cmlb-fs-small);
}

#cmlb-valor .cmlb-valor__kpi-value {
	display: block;
	margin: 2px 0;
	font-size: var(--cmlb-fs-kpi);
	font-weight: var(--cmlb-fw-bold);
	line-height: 1.2;
}

#cmlb-valor .cmlb-valor__kpi-value--positive {
	color: var(--cmlb-positive);
}

#cmlb-valor .cmlb-valor__kpi-value--negative {
	color: var(--cmlb-negative);
}

#cmlb-valor .cmlb-valor__kpi-note {
	display: block;
	color: var(--cmlb-text-muted);
	font-size: var(--cmlb-fs-small);
}

/* --- Tabla --- */

#cmlb-valor .cmlb-valor__table-wrap {
	margin: 0 0 var(--cmlb-gap) 0;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
}

#cmlb-valor .cmlb-valor__table {
	width: 100%;
	min-width: 320px;
	border-collapse: collapse;
	font-size: var(--cmlb-fs-small);
}

#cmlb-valor .cmlb-valor__caption {
	padding-bottom: 8px;
	color: var(--cmlb-text-muted);
	font-size: var(--cmlb-fs-small);
	text-align: left;
}

#cmlb-valor .cmlb-valor__table th,
#cmlb-valor .cmlb-valor__table td {
	padding: 9px 10px;
	border-bottom: 1px solid var(--cmlb-border);
	text-align: right;
	vertical-align: top;
}

#cmlb-valor .cmlb-valor__table thead th {
	border-bottom: 2px solid var(--cmlb-border-strong);
	background: var(--cmlb-bg-dark);
	color: var(--cmlb-text-invert);
}

#cmlb-valor .cmlb-valor__table thead th:first-child,
#cmlb-valor .cmlb-valor__table tbody th {
	text-align: left;
	font-weight: var(--cmlb-fw-bold);
}

#cmlb-valor .cmlb-valor__table tbody tr:nth-child(odd) td,
#cmlb-valor .cmlb-valor__table tbody tr:nth-child(odd) th {
	background: var(--cmlb-bg-alt);
}

#cmlb-valor .cmlb-valor__cell--positive {
	color: var(--cmlb-positive);
	font-weight: var(--cmlb-fw-bold);
}

#cmlb-valor .cmlb-valor__cell--negative {
	color: var(--cmlb-negative);
	font-weight: var(--cmlb-fw-bold);
}

/* --- Textos de cierre --- */

#cmlb-valor .cmlb-valor__explain {
	margin: 0 0 var(--cmlb-gap) 0;
	padding: 12px 14px;
	border-radius: var(--cmlb-radius-sm);
	background: var(--cmlb-accent-soft);
	font-size: var(--cmlb-fs-small);
}

#cmlb-valor .cmlb-valor__disclaimer {
	margin: 0;
	color: var(--cmlb-text-muted);
	font-size: var(--cmlb-fs-small);
}

#cmlb-valor .cmlb-valor__sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* --- Ampliación cosmética en pantallas grandes --- */

@media (min-width: 782px) {

	#cmlb-valor {
		padding: 28px;
	}

	#cmlb-valor .cmlb-valor__table {
		font-size: var(--cmlb-fs-base);
	}
}

/* --- Preferencia de movimiento reducido --- */

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

	#cmlb-valor .cmlb-valor__switch-label,
	#cmlb-valor .cmlb-valor__reset {
		transition: none;
	}
}