/* Componentes reutilizables: cards, botones, tablas, avatar, badges, etc. */
.card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 20px;
}
.card-title { font-size: var(--fs-md); font-weight: 700; margin-bottom: 14px; }
.grid { display: grid; gap: 16px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 700px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }
/* Botones */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
border: none; border-radius: var(--radius-sm);
padding: 13px 20px; font-size: var(--fs-sm); font-weight: 700;
transition: filter .15s, background .15s; width: 100%;
}
.btn:active { filter: brightness(.94); }
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-outline { background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); }
.btn-ghost { background: var(--color-bg); color: var(--color-text); }
.btn-danger-ghost { background: #FBEAEA; color: var(--color-danger); }
.btn-sm { width: auto; padding: 8px 14px; font-size: var(--fs-xs); }
.btn svg { width: 18px; height: 18px; }
/* Avatar */
.avatar {
display: inline-flex; align-items: center; justify-content: center;
background: var(--color-primary-light); color: var(--color-primary);
border-radius: 50%; font-weight: 700; flex-shrink: 0;
}
.avatar-sm { width: 36px; height: 36px; font-size: var(--fs-xs); }
.avatar-md { width: 52px; height: 52px; font-size: var(--fs-md); }
.avatar-lg { width: 84px; height: 84px; font-size: var(--fs-xl); }
/* Escudo equipo — sirve tanto para ![]()
(escudo real) como para el
con iniciales que se usa de reemplazo si falta el archivo. */
.crest {
width: 34px; height: 34px; border-radius: 50%;
object-fit: contain; background: var(--color-surface);
flex-shrink: 0; display: flex; align-items: center; justify-content: center;
}
.crest-fallback { font-size: 11px; font-weight: 800; color: var(--color-primary); background: var(--color-primary-light); }
.crest-lg { width: 52px; height: 52px; }
.crest-sm { width: 26px; height: 26px; font-size: 9px; }
/* Stat box */
.stat-box { display: flex; align-items: center; gap: 12px; }
.stat-icon { width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--color-primary-light); color: var(--color-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.stat-icon svg { width: 20px; height: 20px; }
.stat-label { font-size: var(--fs-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .4px; }
.stat-value { font-size: var(--fs-xl); font-weight: 800; }
/* Countdown */
.countdown-card {
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
color: #fff; border-radius: var(--radius-lg); padding: 22px; position: relative; overflow: hidden;
}
.countdown-label { font-size: var(--fs-sm); opacity: .85; margin-bottom: 6px; }
.countdown-timer { display: flex; gap: 18px; margin: 10px 0 16px; }
.countdown-unit { text-align: center; }
.countdown-unit strong { font-size: var(--fs-xxl); font-weight: 800; display: block; font-variant-numeric: tabular-nums; }
.countdown-unit span { font-size: 11px; opacity: .8; text-transform: uppercase; letter-spacing: .5px; }
.countdown-inline {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
background: var(--color-primary-light); color: var(--color-primary-dark);
border-radius: var(--radius-sm); padding: 12px 16px; font-size: var(--fs-sm); font-weight: 600;
}
.countdown-inline strong { font-variant-numeric: tabular-nums; }
/* Fixture / partido row */
.match-row {
display: grid;
grid-template-columns: 70px 1fr auto 1fr;
align-items: center; gap: 10px;
padding: 14px 0; border-bottom: 1px solid var(--color-border);
}
.match-row:last-child { border-bottom: none; }
.match-date { font-size: var(--fs-xs); color: var(--color-text-muted); line-height: 1.4; }
.match-team { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: var(--fs-sm); }
.match-team.right { justify-content: flex-end; text-align: right; flex-direction: row-reverse; }
.match-score { display: flex; align-items: center; gap: 8px; }
/* En celular el partido se apila: el horario arriba y abajo
local | marcador | visitante, con el nombre debajo de cada escudo.
Así entra en 375px sin scroll horizontal. */
@media (max-width: 620px) {
.match-row {
grid-template-columns: 1fr auto 1fr;
grid-template-areas:
"horario horario horario"
"local marcador visita";
gap: 8px 6px;
}
.match-date { grid-area: horario; }
.match-team { grid-area: local; flex-direction: column; text-align: center; gap: 5px; }
.match-team.right { grid-area: visita; flex-direction: column-reverse; text-align: center; }
.match-score { grid-area: marcador; }
.match-team .team-name,
.match-team span:not(.crest) { font-size: 11px; line-height: 1.2; }
}
/* Stepper +/- */
.stepper { display: flex; align-items: center; gap: 6px; }
.stepper-btn {
width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--color-border);
background: var(--color-surface); color: var(--color-primary); font-size: 16px; font-weight: 700;
display: flex; align-items: center; justify-content: center; line-height: 1;
}
.stepper-btn:active { background: var(--color-primary-light); }
.stepper-btn:disabled { opacity: .4; }
.stepper-value { width: 26px; text-align: center; font-weight: 800; font-size: var(--fs-md); }
/* Input real de goles (0-0 es un pronóstico válido, por eso "vacío"
y "cero" tienen que poder distinguirse visualmente). */
.goal-input {
width: 40px; padding: 5px 2px; text-align: center;
font-weight: 800; font-size: var(--fs-md); font-family: inherit;
border: 1px solid var(--color-border); border-radius: var(--radius-sm);
background: var(--color-surface); color: var(--color-text);
-moz-appearance: textfield;
}
.goal-input::-webkit-outer-spin-button,
.goal-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.goal-input:focus { outline: 2px solid var(--color-accent); }
.goal-input:disabled { background: var(--color-bg); color: var(--color-text-muted); }
.goal-input::placeholder { color: var(--color-text-muted); font-weight: 500; }
/* Tabla */
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.table th { text-align: left; font-size: var(--fs-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .4px; padding: 8px 10px; border-bottom: 1px solid var(--color-border); }
.table td { padding: 10px; border-bottom: 1px solid var(--color-border); }
.table tr:last-child td { border-bottom: none; }
.table tr.is-you { background: var(--color-primary-light); }
.table-row-name { display: flex; align-items: center; gap: 10px; font-weight: 600; }
/* Podio */
.podium { display: flex; align-items: flex-end; justify-content: center; gap: 14px; padding: 10px 0 20px; }
.podium-item { text-align: center; }
.podium-rank { width: 26px; height: 26px; border-radius: 50%; background: var(--color-bg); font-size: var(--fs-xs); font-weight: 800; display: flex; align-items: center; justify-content: center; margin: 0 auto 6px; }
.podium-item.gold .podium-rank { background: var(--color-gold); color: #fff; }
.podium-item.silver .podium-rank { background: var(--color-silver); color: #fff; }
.podium-item.bronze .podium-rank { background: var(--color-bronze); color: #fff; }
.podium-item.gold .avatar { width: 66px; height: 66px; font-size: var(--fs-lg); border: 3px solid var(--color-gold); }
.podium-item.silver .avatar, .podium-item.bronze .avatar { border: 3px solid var(--color-border); }
.podium-name { font-weight: 700; font-size: var(--fs-sm); margin-top: 8px; }
.podium-pts { font-size: var(--fs-xs); color: var(--color-text-muted); }
.podium-premio { font-size: var(--fs-xs); font-weight: 800; color: var(--color-success); margin-top: 4px; }
/* Aclaración cuando el puesto se comparte: el importe de arriba es la parte
individual, no el premio completo del puesto. */
.podium-compartido {
font-size: 10px; line-height: 1.25; color: var(--color-text-muted);
margin-top: 2px; font-weight: 600;
}
/* Badges de estado */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 700; }
.badge-success { background: #E4F7EC; color: var(--color-success); }
.badge-warning { background: #FDF1DC; color: var(--color-warning); }
.badge-danger { background: #FBEAEA; color: var(--color-danger); }
.badge-neutral { background: var(--color-bg); color: var(--color-text-muted); }
/* Insignias */
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 14px; text-align: center; }
.insignia { opacity: .35; }
.insignia.obtenida { opacity: 1; }
.insignia-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--color-primary-light); color: var(--color-primary); display: flex; align-items: center; justify-content: center; margin: 0 auto 8px; }
.insignia-icon svg { width: 26px; height: 26px; }
.insignia span { font-size: var(--fs-xs); font-weight: 600; }
/* Formularios (login/registro) */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--color-bg); }
.auth-card { width: 100%; max-width: 420px; background: var(--color-surface); border-radius: var(--radius-lg); padding: 32px 28px; box-shadow: var(--shadow-md); }
.auth-logo { display: flex; align-items: center; gap: 12px; justify-content: center; margin-bottom: 20px; }
/* Alto fijo y ancho libre: el escudo no es cuadrado. */
.auth-logo img { height: 62px; width: auto; }
.auth-logo span { font-weight: 800; font-size: var(--fs-xl); color: var(--color-primary-dark); letter-spacing: -.3px; }
.auth-title { font-size: var(--fs-lg); font-weight: 700; text-align: center; margin-bottom: 4px; }
.auth-subtitle { font-size: var(--fs-sm); color: var(--color-text-muted); text-align: center; margin-bottom: 24px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: var(--fs-xs); font-weight: 700; color: var(--color-text-muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .3px; }
.field input, .field select {
width: 100%; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
font-size: var(--fs-sm); background: var(--color-bg);
}
.field input:focus, .field select:focus { outline: 2px solid var(--color-accent); background: var(--color-surface); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.check-row { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-xs); color: var(--color-text-muted); margin-bottom: 10px; }
.check-row input { margin-top: 3px; }
.check-row a { color: var(--color-primary); font-weight: 600; }
.divider { display: flex; align-items: center; gap: 10px; color: var(--color-text-muted); font-size: var(--fs-xs); margin: 18px 0; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--color-border); }
.social-btns { display: flex; flex-direction: column; gap: 10px; }
.social-btn {
display: flex; align-items: center; justify-content: center; gap: 10px;
padding: 11px; border-radius: var(--radius-sm); border: 1px solid var(--color-border);
background: var(--color-surface); font-weight: 600; font-size: var(--fs-sm);
}
.social-btn svg { width: 18px; height: 18px; }
.auth-footer { text-align: center; font-size: var(--fs-sm); color: var(--color-text-muted); margin-top: 18px; }
.auth-footer a { color: var(--color-primary); font-weight: 700; }
/* Toast */
.toast {
position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px);
background: var(--color-text); color: #fff; padding: 12px 20px; border-radius: 999px;
font-size: var(--fs-sm); font-weight: 600; display: flex; align-items: center; gap: 8px;
opacity: 0; pointer-events: none; transition: all .25s ease; z-index: 100; box-shadow: var(--shadow-md);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast svg { width: 18px; height: 18px; color: var(--color-success); }
/* Empty state */
.empty-state { text-align: center; padding: 40px 20px; color: var(--color-text-muted); }
.empty-state svg { width: 48px; height: 48px; margin: 0 auto 12px; opacity: .5; }
/* Timeline (historial) */
.timeline-item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--color-border); }
.timeline-item:last-child { border-bottom: none; }
.timeline-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--color-success); margin-top: 6px; flex-shrink: 0; }
.timeline-body strong { font-size: var(--fs-sm); }
.timeline-body p { font-size: var(--fs-xs); color: var(--color-text-muted); margin-top: 2px; }
/* Progreso circular simple */
.progress-bar { background: var(--color-bg); border-radius: 999px; height: 8px; overflow: hidden; }
.progress-bar > span { display: block; height: 100%; background: var(--color-accent); border-radius: 999px; }
.section { margin-bottom: 22px; }
.section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.section-head h2 { font-size: var(--fs-md); font-weight: 700; }
.link-more { font-size: var(--fs-xs); font-weight: 700; color: var(--color-primary); }
/* --- Encabezado de división (Primera / Segunda) --- */
.division-head {
display: flex; align-items: center; gap: 10px;
padding: 12px 16px; margin: 0 -20px 4px;
background: var(--color-primary-dark); color: #fff;
font-size: var(--fs-sm); font-weight: 800; letter-spacing: .3px;
}
.division-head:first-child { border-radius: var(--radius-md) var(--radius-md) 0 0; margin-top: -20px; }
.division-head .badge { background: rgba(255,255,255,.16); color: #fff; }
/* --- Partido incompleto en Armar Prode --- */
.match-row.is-incompleto { background: #FFF7E8; box-shadow: inset 3px 0 0 var(--color-warning); }
.match-row.is-incompleto .stepper-value { color: var(--color-warning); }
/* --- Modal (pago demo) --- */
.modal-backdrop {
position: fixed; inset: 0; background: rgba(11, 27, 46, .62);
display: none; align-items: center; justify-content: center; padding: 20px; z-index: 90;
}
.modal-backdrop.open { display: flex; }
.modal {
background: var(--color-surface); border-radius: var(--radius-lg);
width: 100%; max-width: 420px; padding: 26px; box-shadow: var(--shadow-md);
max-height: 92vh; overflow-y: auto;
}
.modal-title { font-size: var(--fs-lg); font-weight: 800; text-align: center; margin-bottom: 6px; }
.modal-sub { font-size: var(--fs-sm); color: var(--color-text-muted); text-align: center; margin-bottom: 18px; }
.modal-price {
background: var(--color-primary-light); color: var(--color-primary-dark);
border-radius: var(--radius-md); padding: 16px; text-align: center; margin-bottom: 16px;
}
.modal-price strong { display: block; font-size: var(--fs-xxl); font-weight: 800; }
.modal-price span { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .4px; }
/* Premio por el que se compite, debajo del precio en el modal de inscripción */
.modal-premio {
text-align: center; font-size: var(--fs-sm); color: var(--color-text-muted);
margin: -8px 0 16px;
}
.modal-premio strong { color: var(--color-success); font-size: var(--fs-lg); font-weight: 800; }
.modal-list { font-size: var(--fs-sm); color: var(--color-text-muted); margin-bottom: 18px; }
.modal-list li { display: flex; gap: 8px; padding: 5px 0; }
.modal-list li::before { content: '✓'; color: var(--color-success); font-weight: 800; }
.modal-actions { display: flex; flex-direction: column; gap: 8px; }
.modal-actions form { display: contents; }
.modal-actions .btn { width: 100%; }
.modal-note { font-size: var(--fs-xs); color: var(--color-text-muted); text-align: center; margin-top: 12px; }
/* --- Premio principal destacado (Home, sobre la tarjeta de la fecha) ---
Va dentro de countdown-card, que tiene fondo oscuro. El monto grande es el
PREMIO; la inscripción va abajo en chico para que no se confundan. */
.premio-destacado {
background: rgba(255, 255, 255, .12);
border: 1px solid rgba(255, 255, 255, .22);
border-radius: var(--radius-md);
padding: 12px 16px; margin: 0 auto 14px; max-width: 320px;
display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.premio-destacado-label {
font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .5px;
color: var(--color-gold); font-weight: 800;
}
.premio-destacado-monto {
font-size: 1.9rem; font-weight: 800; line-height: 1.1; letter-spacing: -1px; color: #fff;
}
.premio-destacado-pie { font-size: var(--fs-xs); color: rgba(255, 255, 255, .75); }
/* --- Modal de premio ganado --- */
.modal-premio { background: var(--color-primary-dark); color: #fff; text-align: center; }
.modal-premio .modal-title,
.modal-premio .modal-sub { color: #fff; }
.modal-premio-trofeo { font-size: 3rem; line-height: 1; margin-bottom: 6px; }
.modal-premio .modal-price { background: rgba(255,255,255,.14); color: #fff; }
.modal-premio .modal-note { color: rgba(255,255,255,.85); }
/* --- Partido con resultado cargado (vista del jugador) --- */
.partido-jugado { padding: 16px 0; border-bottom: 1px solid var(--color-border); }
.partido-jugado:last-of-type { border-bottom: none; }
.partido-jugado-fecha {
font-size: var(--fs-xs); color: var(--color-text-muted);
text-align: center; margin-bottom: 10px;
}
.resultado-real {
display: grid; grid-template-columns: 1fr auto 1fr;
align-items: center; gap: 10px;
}
.resultado-equipo { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.resultado-equipo span { font-size: var(--fs-sm); font-weight: 700; line-height: 1.2; }
.resultado-marcador {
display: flex; align-items: center; gap: 8px;
font-size: 2rem; font-weight: 800; letter-spacing: -1px;
color: var(--color-primary-dark);
}
.resultado-marcador span { font-size: var(--fs-lg); color: var(--color-text-muted); font-weight: 600; }
.resultado-pie {
display: flex; align-items: center; justify-content: center;
gap: 12px; flex-wrap: wrap; margin-top: 12px;
}
.tu-pronostico { font-size: var(--fs-sm); color: var(--color-text-muted); }
.tu-pronostico strong { color: var(--color-text); }
.puntos-chip {
font-size: var(--fs-sm); font-weight: 800;
border-radius: 999px; padding: 5px 14px;
}
.puntos-exacto { background: #E4F6EC; color: var(--color-success); }
.puntos-acierto { background: var(--color-primary-light); color: var(--color-primary); }
.puntos-errado { background: var(--color-bg); color: var(--color-text-muted); }
.puntos-pendiente { background: #FDF3E0; color: #8A5B12; }
/* --- Tu posición en el ranking --- */
.tu-posicion {
background: linear-gradient(150deg, var(--color-primary-dark), #16385c);
color: #fff; border-radius: var(--radius-lg); padding: 22px;
}
.tu-posicion-label {
font-size: var(--fs-xs); font-weight: 800; letter-spacing: 1.5px;
text-transform: uppercase; opacity: .7; margin-bottom: 12px;
}
.tu-posicion-fila { display: flex; align-items: center; gap: 14px; }
.tu-posicion-puesto { font-size: 2.4rem; font-weight: 800; letter-spacing: -1px; line-height: 1; }
.tu-posicion-datos strong { display: block; font-size: var(--fs-lg); font-weight: 800; }
.tu-posicion-datos span { font-size: var(--fs-sm); opacity: .8; }
.tu-posicion-extra {
margin-top: 14px; padding-top: 14px;
border-top: 1px solid rgba(255,255,255,.15);
font-size: var(--fs-sm); display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
}
.tu-posicion-extra b { color: var(--color-gold); }
/* --- Pantallas de retorno del checkout --- */
.pago-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 20px; background: var(--color-bg); }
.pago-contenedor { width: 100%; max-width: 460px; }
.pago-marca { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 6px; }
.pago-marca img { height: 54px; width: auto; }
.pago-marca span { font-weight: 800; font-size: var(--fs-xl); color: var(--color-primary-dark); }
.pago-subtitulo { text-align: center; color: var(--color-text-muted); font-size: var(--fs-sm); margin-bottom: 20px; }
.pago-icono {
width: 70px; height: 70px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
margin: 4px auto 16px;
}
.pago-icono svg { width: 34px; height: 34px; }
.pago-ok { background: #E4F6EC; color: var(--color-success); }
.pago-error { background: #FBE9E9; color: var(--color-danger); }
.pago-espera { background: #FDF3E0; color: #B4780F; }
.pago-titulo { font-size: var(--fs-xl); font-weight: 800; margin-bottom: 8px; }
.pago-texto { font-size: var(--fs-sm); color: var(--color-text-muted); line-height: 1.55; }
.pago-datos {
display: flex; justify-content: space-between; align-items: center;
background: var(--color-bg); border-radius: var(--radius-sm);
padding: 12px 16px; margin-top: 16px; font-size: var(--fs-sm);
}
.pago-datos span { color: var(--color-text-muted); }
/* --- Contacto: Instagram + email --- */
.btn-instagram {
background: linear-gradient(45deg, #F09433 0%, #E6683C 25%, #DC2743 50%, #CC2366 75%, #BC1888 100%);
color: #fff;
}
.btn-instagram svg, .contacto-acciones .btn svg { width: 19px; height: 19px; }
.contacto-card { text-align: center; }
.contacto-sub { font-size: var(--fs-sm); color: var(--color-text-muted); margin-bottom: 16px; }
.contacto-acciones { display: flex; flex-direction: column; gap: 10px; max-width: 380px; margin: 0 auto; }
.contacto-nota { font-size: var(--fs-xs); color: var(--color-text-muted); margin-top: 14px; }
/* Tira discreta al pie de cada pantalla del jugador */
.contacto-pie {
display: flex; flex-wrap: wrap; justify-content: center;
align-items: center; gap: 8px 22px;
margin-top: 28px; padding: 18px 0 4px;
border-top: 1px solid var(--color-border);
}
.contacto-link {
display: inline-flex; align-items: center; gap: 7px;
font-size: var(--fs-sm); color: var(--color-text-muted);
/* 44px de alto mínimo: es el área de toque cómoda en celular */
min-height: 44px; padding: 4px;
overflow-wrap: anywhere;
}
.contacto-link svg { width: 17px; height: 17px; flex-shrink: 0; }
.contacto-link:hover { color: var(--color-primary); }
@media (min-width: 620px) {
.contacto-acciones { flex-direction: row; justify-content: center; }
.contacto-acciones .btn { width: auto; }
}
/* --- Aviso / alertas --- */
.alert { display: flex; gap: 10px; padding: 14px 16px; border-radius: var(--radius-sm); font-size: var(--fs-sm); margin-bottom: 16px; }
.alert svg { width: 20px; height: 20px; flex-shrink: 0; }
.alert-info { background: var(--color-primary-light); color: var(--color-primary-dark); }
.alert-warning { background: #FDF3E0; color: #8A5B12; }
.alert-danger { background: #FBE9E9; color: #8E2622; }
.alert-success { background: #E4F6EC; color: #0E6B3B; }
/* --- Barra fija de acciones del prode --- */
.prode-sticky {
position: sticky; bottom: 0; z-index: 20;
background: var(--color-surface); border-top: 1px solid var(--color-border);
padding: 14px 0; margin-top: 8px;
}
.prode-status { font-size: var(--fs-sm); font-weight: 600; margin-bottom: 10px; text-align: center; }
.prode-status.falta { color: var(--color-warning); }
.prode-status.listo { color: var(--color-success); }
/* Formulario en línea (admin: partidos, resultados) */
.inline-form { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.inline-form .field { margin-bottom: 0; }
.inline-form select, .inline-form input {
padding: 9px 11px; border: 1px solid var(--color-border);
border-radius: var(--radius-sm); font-size: var(--fs-sm); background: var(--color-surface);
}
.goal-input { width: 54px; text-align: center; font-weight: 700; }