/* El Rey — página de seguimiento */
.er-track { max-width: 860px; margin: 0 auto; padding: clamp(32px, 5vw, 64px) 0; display: flex; flex-direction: column; gap: 24px; font-family: var(--er-fb); color: var(--er-negro); }
.er-track__head { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
html body .er-track .er-track__title { margin: 0; font-family: var(--er-fd); font-weight: 900; font-size: clamp(40px, 6vw, 64px); line-height: .92; text-transform: uppercase; }
.er-track__lead { margin: 0; color: var(--er-grada); font-size: 17px; }

.er-track__form { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 14px; align-items: end; padding: 20px; background: var(--er-blanco); border: var(--er-bw) solid var(--er-negro); border-radius: var(--er-r); box-shadow: var(--er-sh); }
.er-track__field { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.er-track__field span { font-family: var(--er-fu); font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
html body .er-track__field input { width: 100%; min-height: 48px; padding: 10px 14px !important; font-size: 16px !important; }
html body .er-track__btn { min-height: 48px; padding: 10px 22px !important; font-family: var(--er-fu) !important; font-weight: 700; font-size: 16px; letter-spacing: .08em; text-transform: uppercase; color: var(--er-cal) !important; background: var(--er-verde) !important; border: var(--er-bw) solid var(--er-negro) !important; border-radius: var(--er-r-sm) !important; box-shadow: var(--er-sh-sm) !important; cursor: pointer; }
html body .er-track__btn:hover { background: var(--er-noche) !important; }
html body .er-track__btn:active { transform: translate(3px, 3px); box-shadow: none !important; }

.er-track__msg { padding: 14px 18px; border: var(--er-bw) solid var(--er-negro); border-radius: var(--er-r); box-shadow: var(--er-sh-sm); font-size: 15px; line-height: 1.5; }
.er-track__msg--error { background: var(--er-coral); }
.er-track__msg--warn { background: var(--er-mantequilla); }

.er-track__card { display: flex; flex-direction: column; gap: 24px; padding: clamp(20px, 3vw, 32px); background: var(--er-blanco); border: var(--er-bw) solid var(--er-negro); border-radius: var(--er-r); box-shadow: var(--er-sh-lg); }
.er-track__summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.er-track__summary > div { display: flex; flex-direction: column; gap: 2px; }
.er-track__summary strong { font-family: var(--er-fu); font-weight: 700; font-size: 20px; text-transform: uppercase; word-break: break-all; }
.er-track__now { color: var(--er-verde); }
.er-track__k { font-family: var(--er-fu); font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--er-grada); }

/* Steps */
.er-track__steps { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 0; padding: 0; list-style: none; }
.er-track__steps::before { content: ""; position: absolute; top: 14px; left: 10%; right: 10%; height: 4px; background: var(--er-linea); border-radius: 999px; }
.er-track__step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0; text-align: center; }
.er-track__step::before { display: none !important; }
.er-track__dot { position: relative; z-index: 1; width: 32px; height: 32px; background: var(--er-blanco); border: var(--er-bw) solid var(--er-negro); border-radius: 999px; }
.er-track__step strong { font-family: var(--er-fu); font-weight: 700; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; color: var(--er-grada); }
.er-track__step span:last-child { font-size: 13px; line-height: 1.35; color: var(--er-grada); }
.er-track__step.is-done .er-track__dot { background: var(--er-verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F4F5EF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 18px no-repeat; }
.er-track__step.is-done strong { color: var(--er-negro); }
.er-track__step.is-current .er-track__dot { background: var(--er-oro); box-shadow: var(--er-sh-sm); }
.er-track__step.is-current strong { color: var(--er-negro); }

.er-track__items h2, .er-track__events h2 { margin: 0 0 10px !important; font-family: var(--er-fd) !important; font-weight: 900 !important; font-size: 26px !important; text-transform: uppercase; }
.er-track__items ul, .er-track__events ul { margin: 0 0 8px; padding: 0; list-style: none; }
.er-track__items li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1.5px solid var(--er-linea); }
.er-track__items li::before, .er-track__events li::before { display: none !important; }
.er-track__events li { position: relative; margin: 0; padding: 0 0 14px 22px; border-left: 2px solid var(--er-linea); }
.er-track__events li::after { content: ""; position: absolute; left: -7px; top: 4px; width: 12px; height: 12px; background: var(--er-blanco); border: 2px solid var(--er-negro); border-radius: 999px; }
.er-track__events li:first-child::after { background: var(--er-oro); }
.er-track__events time { font-family: var(--er-fu); font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--er-grada); }
.er-track__events p { margin: 2px 0 0; font-size: 15px; line-height: 1.45; }
.er-track__loc { color: var(--er-grada); }
.er-track__help { margin: 0; text-align: center; color: var(--er-grada); }
.er-track__help a { color: var(--er-verde); font-weight: 700; }

@media (max-width: 767px) {
	.er-track__form { grid-template-columns: 1fr; }
	.er-track__steps { grid-template-columns: 1fr; gap: 0; }
	.er-track__steps::before { top: 16px; bottom: 16px; left: 15px; right: auto; width: 4px; height: auto; }
	.er-track__step { display: grid; grid-template-columns: 32px 1fr; column-gap: 14px; align-items: center; justify-items: start; padding: 8px 0; text-align: left; }
	.er-track__step span:last-child { grid-column: 2; }
	.er-track__step span:last-child:empty { display: none; }
}