/* ===================================================================== Sistema de Retas — Pádel Americano Hoja de estilos compartida (admin, jugador y pantalla pública) Construida sobre Bootstrap 5 (ver admin/jugador ), esto sólo define la identidad visual: colores, tipografía y componentes propios. ===================================================================== */ :root { /* Paleta: verde-azulado de cancha de pádel + amarillo-verde de la pelota como acento, más un coral cálido para alertas/acciones. */ --court: #0e4b44; --court-dark: #093a35; --court-light: #146a5f; --court-tint: #e4eeea; --ink: #12231f; --ink-soft: #4d655d; --ink-faint: #83988f; --bg: #eef4f1; --surface: #ffffff; --surface-2: #e7f0ec; --line: rgba(14, 75, 68, 0.14); --line-strong: rgba(14, 75, 68, 0.28); --accent: #c7e639; --accent-ink: #2b3300; --warm: #e5622a; --warm-tint: #fdece3; --good: #1e8e5a; --good-tint: #e4f5ec; --warn: #c98a1d; --warn-tint: #fbf1de; --bad: #d64545; --bad-tint: #fbe7e7; --radius: 14px; --radius-sm: 9px; --shadow: 0 1px 2px rgba(14, 40, 35, 0.06), 0 6px 20px -8px rgba(14, 40, 35, 0.18); --font-display: "Oswald", "Arial Narrow", sans-serif; --font-body: "Work Sans", -apple-system, "Segoe UI", sans-serif; } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, .display { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.01em; color: var(--court-dark); text-wrap: balance; margin: 0 0 0.3em; } a { color: var(--court); } .text-soft { color: var(--ink-soft); } .text-faint { color: var(--ink-faint); } .tabular { font-variant-numeric: tabular-nums; } /* --------------------------------------------------------------- */ /* Marca / encabezado */ /* --------------------------------------------------------------- */ .marca { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-weight: 600; letter-spacing: 0.02em; color: var(--surface); } .marca .bola { width: 1.6rem; height: 1.6rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #e8f78a, var(--accent) 60%, #9db823 100%); box-shadow: inset 0 -3px 4px rgba(0, 0, 0, 0.18); flex: none; } .marca .bola::after { content: ""; } /* --------------------------------------------------------------- */ /* Botones */ /* --------------------------------------------------------------- */ .btn-cancha { --bs-btn-bg: var(--court); --bs-btn-border-color: var(--court); --bs-btn-hover-bg: var(--court-dark); --bs-btn-hover-border-color: var(--court-dark); --bs-btn-active-bg: var(--court-dark); --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; font-family: var(--font-display); letter-spacing: 0.02em; border-radius: 999px; padding-inline: 1.3rem; } .btn-pelota { --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-hover-bg: #b7d32f; --bs-btn-hover-border-color: #b7d32f; --bs-btn-color: var(--accent-ink); --bs-btn-hover-color: var(--accent-ink); --bs-btn-active-color: var(--accent-ink); font-family: var(--font-display); font-weight: 600; letter-spacing: 0.02em; border-radius: 999px; padding-inline: 1.3rem; } .btn-fuera { --bs-btn-color: var(--court); --bs-btn-border-color: var(--line-strong); --bs-btn-hover-bg: var(--court-tint); --bs-btn-hover-color: var(--court-dark); --bs-btn-hover-border-color: var(--court); border-radius: 999px; padding-inline: 1.3rem; } /* --------------------------------------------------------------- */ /* Tarjetas y superficies */ /* --------------------------------------------------------------- */ .superficie { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); } .franja-cancha { background: linear-gradient(135deg, var(--court) 0%, var(--court-light) 100%); color: #fff; border-radius: var(--radius); } /* --------------------------------------------------------------- */ /* Estados (pills) */ /* --------------------------------------------------------------- */ .pill { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; padding: 0.28rem 0.65rem; border-radius: 999px; line-height: 1; white-space: nowrap; } .pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .pill-pendiente { background: var(--warn-tint); color: var(--warn); } .pill-jugando { background: var(--good-tint); color: var(--good); } .pill-finalizado{ background: var(--surface-2); color: var(--ink-soft); } .pill-descansa { background: var(--court-tint); color: var(--court); } .pill-victoria { background: var(--good-tint); color: var(--good); } .pill-derrota { background: var(--bad-tint); color: var(--bad); } .pill-empate { background: var(--warn-tint); color: var(--warn); } /* --------------------------------------------------------------- */ /* Marcador (scoreboard) */ /* --------------------------------------------------------------- */ .marcador { display: flex; align-items: center; justify-content: center; gap: 0.9rem; font-family: var(--font-display); } .marcador .num { font-size: 2.6rem; font-weight: 600; line-height: 1; min-width: 1.6ch; text-align: center; } .marcador .guion { font-size: 1.6rem; color: var(--ink-faint); } .marcador input.num { width: 3.2rem; border: 2px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--court-dark); padding: 0.2rem 0; } .marcador input.num:focus { outline: none; border-color: var(--court); box-shadow: 0 0 0 3px var(--court-tint); } /* --------------------------------------------------------------- */ /* Tabla de posiciones */ /* --------------------------------------------------------------- */ .tabla-posiciones .fila { display: grid; grid-template-columns: 2.2rem 1fr auto; align-items: center; gap: 0.75rem; padding: 0.6rem 0.85rem; border-radius: var(--radius-sm); } .tabla-posiciones .fila + .fila { margin-top: 0.3rem; } .tabla-posiciones .fila.yo { background: var(--court-tint); outline: 2px solid var(--court); outline-offset: -2px; } .tabla-posiciones .pos { font-family: var(--font-display); font-weight: 600; color: var(--ink-faint); text-align: center; } .tabla-posiciones .fila:nth-child(1) .pos { color: #b8860b; } .tabla-posiciones .fila:nth-child(2) .pos { color: #8a8f98; } .tabla-posiciones .fila:nth-child(3) .pos { color: #a15c33; } .tabla-posiciones .medidor { height: 5px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin-top: 0.3rem; } .tabla-posiciones .medidor > span { display: block; height: 100%; background: var(--accent); border-radius: 999px; } .tabla-posiciones .puntos { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; text-align: right; color: var(--court-dark); } /* --------------------------------------------------------------- */ /* Navegación inferior (jugador / PWA) */ /* --------------------------------------------------------------- */ .nav-inferior { position: fixed; left: 0; right: 0; bottom: 0; display: flex; background: var(--surface); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom, 0px); box-shadow: 0 -6px 16px -10px rgba(14, 40, 35, 0.25); z-index: 40; } .nav-inferior a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.15rem; padding: 0.55rem 0 0.45rem; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.02em; text-decoration: none; color: var(--ink-faint); } .nav-inferior a .icono { font-size: 1.25rem; line-height: 1; } .nav-inferior a.activo { color: var(--court); } .nav-inferior a.activo .icono { transform: translateY(-1px); } .pantalla-jugador { max-width: 480px; margin-inline: auto; padding: 1rem 1rem calc(4.6rem + env(safe-area-inset-bottom, 0px)); } /* --------------------------------------------------------------- */ /* Utilidades varias */ /* --------------------------------------------------------------- */ .avatar-inicial { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--court-tint); color: var(--court-dark); font-family: var(--font-display); font-weight: 600; flex: none; } .codigo-acceso { font-family: var(--font-display); letter-spacing: 0.08em; background: var(--court-tint); color: var(--court-dark); padding: 0.15rem 0.55rem; border-radius: var(--radius-sm); } .separador-suave { border-color: var(--line); } .badge-cancha { display: inline-flex; align-items: center; justify-content: center; min-width: 2.1rem; height: 2.1rem; padding-inline: 0.4rem; border-radius: 999px; background: var(--court); color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 0.85rem; } ::selection { background: var(--accent); color: var(--accent-ink); } @media (max-width: 420px) { .marcador .num { font-size: 2.1rem; } }