/* ============================================================
   RP Foundation — capa de cimientos estéticos (general)
   ------------------------------------------------------------
   Capa ADITIVA sobre Canvas + Bootstrap. No reemplaza el tema:
   unifica tipografía, color y espacios para reducir la cantidad
   de elementos visuales en juego.

   Criterio de color (uniforme en todo el sitio):
     · Interactivo (links + botón primario) -> AZUL de marca (--rp-link)
     · Títulos y texto                      -> tinta oscura (--rp-ink)
     · Estados                              -> ok / warn / bad
   El color del EVENTO (--rp-event) se usa SOLO como un detalle
   mínimo (filete del título de página). Lo inyecta html_header.php.
   ============================================================ */

:root {
	/* --- Interactivo: azul único de links y botón primario --- */
	--rp-link: #1b565f;
	--rp-link-dark: #09232a;
	--rp-link-ink:  #ffffff;

	/* --- Color de evento (solo detalle mínimo). Default: Desafío. --- */
	--rp-event: #CD232D;

	/* --- Neutros / superficies --- */
	--rp-ink:        #1d2127;       /* texto y títulos */
	--rp-ink-soft:   #5b626d;       /* texto secundario */
	--rp-line:       #e6e8ec;       /* bordes suaves */
	--rp-surface-2:  #f6f7f9;       /* fondos suaves */

	/* --- Estados --- */
	--rp-ok:   #1a9b5d;
	--rp-warn: #d98a00;
	--rp-bad:  #d32f2f;

	/* --- Radios y sombras --- */
	--rp-radius:    12px;
	--rp-radius-sm: 8px;
	--rp-shadow-sm: 0 1px 2px rgba(18,22,30,.05), 0 2px 8px rgba(18,22,30,.05);
	--rp-shadow:    0 1px 2px rgba(18,22,30,.04), 0 6px 20px rgba(18,22,30,.06);
}

/* ============================================================
   1. Tipografía
   ============================================================ */

body,
body.stretched {
	font-family: 'Montserrat', 'Inter', 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: var(--rp-ink);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.heading-block h1, .heading-block h2, .heading-block h3 {
	font-family: 'Montserrat', 'Sora', sans-serif;
	color: var(--rp-ink);
	letter-spacing: -.01em;
}

#content {
	font-size: 1rem;
	line-height: 1.65;
}

#content p {
	line-height: 1.65;
	margin-bottom: 1rem;
}

/* ============================================================
   2. Links — un único color interactivo, uniforme
   ============================================================ */

#content a:not(.btn):not(.button):not(.social-icon):not(.list-group-item) {
	color: var(--rp-link);
	text-underline-offset: .15em;
}

#content a:not(.btn):not(.button):not(.social-icon):not(.list-group-item):hover {
	color: var(--rp-link-dark);
}

/* Foco accesible (mismo azul interactivo) */
.form-control:focus,
.form-select:focus,
.btn:focus-visible {
	border-color: var(--rp-link);
	box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--rp-link) 22%, transparent);
}

/* ============================================================
   3. Botones — forma uniforme + un primario de marca
   ============================================================ */

.button,
.btn {
	border-radius: var(--rp-radius-sm);
	font-weight: 600;
	letter-spacing: 0;
	transition: transform .04s ease, box-shadow .15s ease, background-color .15s ease;
}

.btn:active { transform: translateY(1px); }

/* Botón primario único del sitio (links de acción / CTA del flujo) */
.btn-brand {
	background-color: var(--rp-link);
	border: 1px solid var(--rp-link);
	color: var(--rp-link-ink);
	min-height: 46px;
	padding: .65rem 1.4rem;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
}

.btn-brand:hover,
.btn-brand:focus {
	background-color: var(--rp-link-dark);
	border-color: var(--rp-link-dark);
	color: var(--rp-link-ink);
	box-shadow: var(--rp-shadow-sm);
}

/* ============================================================
   4. Page title — único uso del color de EVENTO (detalle mínimo)
   ============================================================ */

#page-title {
	padding: clamp(1.75rem, 4vw, 3rem) 0 clamp(1.25rem, 3vw, 2rem) 0;
	background-color: var(--rp-surface-2);
	border-bottom: 1px solid var(--rp-line);
}

#page-title .container {
	padding-left: 1rem;
	border-left: 4px solid var(--rp-event);   /* el detalle de marca por evento */
}

#page-title h1 {
	font-weight: 700;
	font-size: clamp(1.35rem, 3.5vw, 1.9rem);
	line-height: 1.15;
	max-width: 100%;
	white-space: normal;
}

#page-title span { color: var(--rp-ink-soft); font-size: 1rem; }

/* ============================================================
   5. Tarjetas / listas / pasos
   ============================================================ */

#content .card {
	border: 1px solid var(--rp-line);
	border-radius: var(--rp-radius);
	box-shadow: var(--rp-shadow-sm);
	overflow: hidden;
}

#content .card-header {
	background-color: var(--rp-surface-2);
	border-bottom: 1px solid var(--rp-line);
	padding: .9rem 1.15rem;
	font-size: 1.05rem;
}

#content .card-body { padding: 1.15rem; }

#content .list-group { border-radius: var(--rp-radius); overflow: hidden; }
#content .list-group-item { border-color: var(--rp-line); padding: 1rem 1.15rem; }

.feature-box.fbox-bg.fbox-light {
	border: 1px solid var(--rp-line);
	border-radius: var(--rp-radius);
	box-shadow: var(--rp-shadow-sm);
	padding: 1.25rem 1rem;
	transition: box-shadow .18s ease, transform .18s ease;
}

.feature-box.fbox-bg.fbox-light:hover {
	box-shadow: var(--rp-shadow);
	transform: translateY(-2px);
}

.feature-box .fbox-icon .i-alt { color: var(--rp-link); font-weight: 700; }
.feature-box .fbox-content h3 { font-size: 1.05rem; }
.feature-box .subtitle {
	display: block;
	color: var(--rp-ink-soft);
	font-weight: 400;
	font-size: .85rem;
	margin-top: .25rem;
}

/* ============================================================
   6. Badges de estado (para reemplazar los <span class='red'> sueltos)
   ============================================================ */

.rp-badge {
	display: inline-block;
	padding: .15rem .6rem;
	border-radius: 999px;
	font-size: .8rem;
	font-weight: 600;
	line-height: 1.5;
	white-space: nowrap;
}

.rp-badge--ok   { background: color-mix(in srgb, var(--rp-ok) 14%, #fff);   color: var(--rp-ok); }
.rp-badge--pend { background: color-mix(in srgb, var(--rp-warn) 16%, #fff); color: var(--rp-warn); }
.rp-badge--bad  { background: color-mix(in srgb, var(--rp-bad) 12%, #fff);  color: var(--rp-bad); }

/* ============================================================
   6b. Formularios apilados (.rp-form) — datos del corredor, etc.
   ============================================================ */

.rp-form {
	max-width: 460px;
	margin: 0 auto;
}

.rp-field {
	margin-bottom: 1.15rem;
}

.rp-label {
	display: block;
	font-weight: 600;
	font-size: .95rem;
	color: var(--rp-ink);
	margin-bottom: .35rem;
}

.rp-form .form-control,
.rp-form input[type="text"],
.rp-form select {
	width: 100%;
	max-width: 100%;
	border: 1px solid var(--rp-line);
	border-radius: var(--rp-radius-sm);
	padding: .55rem .75rem;
	font-size: 1rem;
	background-color: #fff;
	color: var(--rp-ink);
}

/* inputs chicos del celular: en línea, no a todo el ancho */
.rp-input-inline {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}
.rp-form .rp-input-inline input {
	width: auto;
	flex: 1 1 auto;
	min-width: 5.5rem;
}

.rp-radios {
	display: flex;
	gap: 1.25rem;
	padding-top: .25rem;
}
.rp-radios label {
	font-weight: 400;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	cursor: pointer;
}

.rp-form-hint {
	color: var(--rp-ink-soft);
	font-size: .82rem;
	margin: .3rem 0 0;
	font-weight: 400;
}

.rp-form-actions {
	margin-top: 1.75rem;
}
.rp-form-actions .btn-brand {
	width: 100%;
	justify-content: center;
}

/* fecha de nacimiento: viene como <table class="selectfechas"> (día/mes/año).
   La aligeramos para que no se vea como una tabla con bordes dentro del panel. */
.rp-form .selectfechas { width: auto; margin: 0; }
.rp-form .selectfechas td { border: 0; padding: .1rem .4rem; vertical-align: middle; }
.rp-form .selectfechas select { display: inline-block; width: auto; min-width: 4.5rem; }

/* ============================================================
   7. Mensajes y mobile
   ============================================================ */

#content .alert { border-radius: var(--rp-radius); border: 1px solid var(--rp-line); }

@media (max-width: 575.98px) {
	#content .content-wrap { padding-top: 2.25rem; padding-bottom: 2.25rem; }
	.btn-brand, .btn-lg.btn-warning, .btn-lg.btn-info {
		display: block;
		width: 100%;
		text-align: center;
		justify-content: center;
	}
}