/* ==========================================================================
   Componente propietario — Apuestas Premier Padel
   Ruta: /components/proprietary/proprietary_data.css
   Todo el CSS está scopeado bajo #pp-valor-padel.
   ========================================================================== */

#pp-valor-padel {
	/* --- Color --- */
	--ppvp-color: #1b2430;
	--ppvp-muted: #5c6b7a;
	--ppvp-bg: #ffffff;
	--ppvp-bg-soft: #f3f7f8;
	--ppvp-bg-head: #0f2b34;
	--ppvp-head-color: #eef6f5;
	--ppvp-border: #d6e1e5;
	--ppvp-border-strong: #b9cad0;
	--ppvp-accent: #0e7c66;
	--ppvp-accent-dark: #0a5c4c;
	--ppvp-accent-soft: #e2f1ed;
	--ppvp-warn: #9a5b12;
	--ppvp-warn-soft: #fdf1e0;
	--ppvp-bad: #97231f;
	--ppvp-bad-soft: #fbeceb;
	--ppvp-focus: #0e7c66;

	/* --- Tipografía --- */
	--ppvp-font: inherit;
	--ppvp-size-base: 1rem;
	--ppvp-size-small: 0.875rem;
	--ppvp-size-tiny: 0.8125rem;
	--ppvp-size-value: 1.375rem;
	--ppvp-size-title: 1.35rem;
	--ppvp-weight-bold: 700;
	--ppvp-lh: 1.55;

	/* --- Métrica --- */
	--ppvp-radius: 10px;
	--ppvp-radius-sm: 6px;
	--ppvp-gap: 16px;
	--ppvp-pad: 20px;
	--ppvp-shadow: 0 1px 2px rgba(15, 43, 52, 0.06), 0 8px 24px rgba(15, 43, 52, 0.07);

	color: var(--ppvp-color);
	font-family: var(--ppvp-font);
	font-size: var(--ppvp-size-base);
	line-height: var(--ppvp-lh);
	margin: 2.25rem 0;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

#pp-valor-padel * {
	box-sizing: border-box;
}

#pp-valor-padel .ppvp__card {
	background: var(--ppvp-bg);
	border: 1px solid var(--ppvp-border);
	border-radius: var(--ppvp-radius);
	box-shadow: var(--ppvp-shadow);
	overflow: hidden;
}

/* ---------- Cabecera ---------- */

#pp-valor-padel .ppvp__head {
	background: var(--ppvp-bg-head);
	color: var(--ppvp-head-color);
	padding: var(--ppvp-pad);
}

#pp-valor-padel .ppvp__eyebrow {
	color: #8fd0c1;
	font-size: var(--ppvp-size-tiny);
	letter-spacing: 0.06em;
	margin: 0 0 6px;
	text-transform: uppercase;
}

#pp-valor-padel .ppvp__title {
	color: var(--ppvp-head-color);
	font-size: var(--ppvp-size-title);
	font-weight: var(--ppvp-weight-bold);
	line-height: 1.3;
	margin: 0 0 10px;
}

#pp-valor-padel .ppvp__lead {
	color: #cfe3df;
	font-size: var(--ppvp-size-small);
	margin: 0;
}

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

#pp-valor-padel .ppvp__tabs {
	background: var(--ppvp-bg-soft);
	border-bottom: 1px solid var(--ppvp-border);
	display: flex;
	flex-wrap: wrap;
	gap: 0;
}

#pp-valor-padel .ppvp__tab {
	appearance: none;
	background: transparent;
	border: 0;
	border-bottom: 3px solid transparent;
	color: var(--ppvp-muted);
	cursor: pointer;
	flex: 1 1 auto;
	font-family: inherit;
	font-size: var(--ppvp-size-small);
	font-weight: var(--ppvp-weight-bold);
	line-height: 1.2;
	margin: 0;
	min-height: 46px;
	padding: 12px 14px;
	text-align: center;
	transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

#pp-valor-padel .ppvp__tab:hover {
	background: var(--ppvp-accent-soft);
	color: var(--ppvp-accent-dark);
}

#pp-valor-padel .ppvp__tab[aria-selected="true"] {
	background: var(--ppvp-bg);
	border-bottom-color: var(--ppvp-accent);
	color: var(--ppvp-accent-dark);
}

/* ---------- Paneles ---------- */

#pp-valor-padel .ppvp__panel {
	padding: var(--ppvp-pad);
}

#pp-valor-padel .ppvp__intro {
	color: var(--ppvp-muted);
	font-size: var(--ppvp-size-small);
	margin: 0 0 var(--ppvp-gap);
}

#pp-valor-padel .ppvp__grid {
	display: grid;
	gap: var(--ppvp-gap);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
	margin: 0 0 12px;
}

#pp-valor-padel .ppvp__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

#pp-valor-padel .ppvp__label {
	color: var(--ppvp-color);
	font-size: var(--ppvp-size-tiny);
	font-weight: var(--ppvp-weight-bold);
}

#pp-valor-padel .ppvp__input {
	background: var(--ppvp-bg);
	border: 1px solid var(--ppvp-border-strong);
	border-radius: var(--ppvp-radius-sm);
	color: var(--ppvp-color);
	font-family: inherit;
	font-size: 16px;
	line-height: 1.3;
	margin: 0;
	max-width: 100%;
	padding: 10px 12px;
	width: 100%;
}

#pp-valor-padel .ppvp__select {
	appearance: none;
	background: var(--ppvp-bg-soft);
	cursor: pointer;
}

#pp-valor-padel .ppvp__input:focus {
	border-color: var(--ppvp-accent);
	outline: 2px solid var(--ppvp-focus);
	outline-offset: 1px;
}

#pp-valor-padel .ppvp__input[aria-invalid="true"] {
	background: var(--ppvp-bad-soft);
	border-color: var(--ppvp-bad);
}

#pp-valor-padel .ppvp__hint {
	color: var(--ppvp-muted);
	font-size: var(--ppvp-size-tiny);
	margin: 0 0 var(--ppvp-gap);
}

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

#pp-valor-padel .ppvp__out {
	border-top: 1px dashed var(--ppvp-border);
	padding-top: var(--ppvp-gap);
}

#pp-valor-padel .ppvp__kpis {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 165px), 1fr));
	margin: 0 0 var(--ppvp-gap);
}

#pp-valor-padel .ppvp__kpi {
	background: var(--ppvp-bg-soft);
	border: 1px solid var(--ppvp-border);
	border-radius: var(--ppvp-radius-sm);
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 12px 14px;
}

#pp-valor-padel .ppvp__kpi--lead {
	background: var(--ppvp-accent-soft);
	border-color: var(--ppvp-accent);
}

#pp-valor-padel .ppvp__kpiLabel {
	color: var(--ppvp-muted);
	font-size: var(--ppvp-size-tiny);
	line-height: 1.35;
}

#pp-valor-padel .ppvp__kpiValue {
	color: var(--ppvp-color);
	font-size: var(--ppvp-size-value);
	font-variant-numeric: tabular-nums;
	font-weight: var(--ppvp-weight-bold);
	line-height: 1.15;
}

#pp-valor-padel .ppvp__kpi--lead .ppvp__kpiValue {
	color: var(--ppvp-accent-dark);
}

/* ---------- Tablas ---------- */

#pp-valor-padel .ppvp__scroll {
	-webkit-overflow-scrolling: touch;
	margin: 0 0 var(--ppvp-gap);
	overflow-x: auto;
}

#pp-valor-padel .ppvp__table {
	border-collapse: collapse;
	font-size: var(--ppvp-size-small);
	margin: 0;
	min-width: 340px;
	width: 100%;
}

#pp-valor-padel .ppvp__caption {
	caption-side: top;
	color: var(--ppvp-muted);
	font-size: var(--ppvp-size-tiny);
	padding: 0 0 8px;
	text-align: left;
}

#pp-valor-padel .ppvp__table th,
#pp-valor-padel .ppvp__table td {
	border-bottom: 1px solid var(--ppvp-border);
	padding: 10px 12px;
	text-align: right;
	vertical-align: middle;
}

#pp-valor-padel .ppvp__table thead th {
	background: var(--ppvp-bg-soft);
	color: var(--ppvp-color);
	font-size: var(--ppvp-size-tiny);
	font-weight: var(--ppvp-weight-bold);
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

#pp-valor-padel .ppvp__table thead th:first-child,
#pp-valor-padel .ppvp__table tbody th {
	text-align: left;
}

#pp-valor-padel .ppvp__table tbody th {
	color: var(--ppvp-color);
	font-weight: 600;
}

#pp-valor-padel .ppvp__table tbody td {
	font-variant-numeric: tabular-nums;
	font-weight: var(--ppvp-weight-bold);
	white-space: nowrap;
}

#pp-valor-padel .ppvp__table tbody tr:last-child th,
#pp-valor-padel .ppvp__table tbody tr:last-child td {
	border-bottom: 0;
}

/* ---------- Veredicto ---------- */

#pp-valor-padel .ppvp__verdict {
	border-left: 4px solid var(--ppvp-accent);
	border-radius: 0 var(--ppvp-radius-sm) var(--ppvp-radius-sm) 0;
	font-size: var(--ppvp-size-small);
	margin: 0;
	padding: 12px 14px;
}

#pp-valor-padel .ppvp__verdict[data-tone="ok"] {
	background: var(--ppvp-accent-soft);
	border-left-color: var(--ppvp-accent);
	color: var(--ppvp-accent-dark);
}

#pp-valor-padel .ppvp__verdict[data-tone="warn"] {
	background: var(--ppvp-warn-soft);
	border-left-color: var(--ppvp-warn);
	color: var(--ppvp-warn);
}

#pp-valor-padel .ppvp__verdict[data-tone="bad"] {
	background: var(--ppvp-bad-soft);
	border-left-color: var(--ppvp-bad);
	color: var(--ppvp-bad);
}

/* ---------- Acciones y pie ---------- */

#pp-valor-padel .ppvp__actions {
	border-top: 1px solid var(--ppvp-border);
	padding: 14px var(--ppvp-pad);
}

#pp-valor-padel .ppvp__reset {
	appearance: none;
	background: var(--ppvp-bg-soft);
	border: 1px solid var(--ppvp-border-strong);
	border-radius: var(--ppvp-radius-sm);
	color: var(--ppvp-color);
	cursor: pointer;
	font-family: inherit;
	font-size: var(--ppvp-size-small);
	font-weight: 600;
	min-height: 42px;
	padding: 10px 16px;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

#pp-valor-padel .ppvp__reset:hover {
	background: var(--ppvp-accent-soft);
	border-color: var(--ppvp-accent);
}

#pp-valor-padel .ppvp__foot {
	background: var(--ppvp-bg-soft);
	border-top: 1px solid var(--ppvp-border);
	padding: 14px var(--ppvp-pad);
}

#pp-valor-padel .ppvp__footNote {
	color: var(--ppvp-muted);
	font-size: var(--ppvp-size-tiny);
	margin: 0 0 6px;
}

#pp-valor-padel .ppvp__footNote:last-child {
	margin-bottom: 0;
}

#pp-valor-padel .ppvp__link {
	color: var(--ppvp-accent-dark);
	text-decoration: underline;
}

/* ---------- Foco visible global ---------- */

#pp-valor-padel .ppvp__tab:focus-visible,
#pp-valor-padel .ppvp__reset:focus-visible,
#pp-valor-padel .ppvp__panel:focus-visible,
#pp-valor-padel .ppvp__link:focus-visible {
	outline: 2px solid var(--ppvp-focus);
	outline-offset: 2px;
}

/* ---------- Móvil ---------- */

@media (max-width: 620px) {
	#pp-valor-padel {
		--ppvp-pad: 16px;
		--ppvp-gap: 12px;
		--ppvp-size-value: 1.25rem;
		--ppvp-size-title: 1.2rem;
	}

	#pp-valor-padel .ppvp__tab {
		flex: 1 1 45%;
	}
}

/* ---------- Movimiento reducido ---------- */

@media (prefers-reduced-motion: reduce) {
	#pp-valor-padel .ppvp__tab,
	#pp-valor-padel .ppvp__reset {
		transition: none;
	}
}

/* ---------- Ocultación de paneles (al final, gana a display:flex/grid) ---------- */

#pp-valor-padel [hidden] {
	display: none !important;
}