/* =========================================================
   SKY CLUB — estilos compartidos de la app del jugador
   ========================================================= */
:root {
    --fluor: #2eff7e;
    --fluor-soft: rgba(46, 255, 126, 0.12);
    --fluor-line: rgba(46, 255, 126, 0.35);
    --bg: #000;
    --card: #121412;
    --card-2: #1a1d1a;
    --line: #262a26;
    --text: #f1f3f1;
    --muted: #8b928b;
    --warn: #ffc107;
    --danger: #ff5a5f;
    --nav-h: 66px;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    /* Compatibilidad con estilos viejos de cada pantalla */
    --primary-fluor: var(--fluor);
    --dark-deep: var(--bg);
    --dark-card: var(--card);
}

html, body { background: var(--bg); }
body {
    font-family: 'Inter', system-ui, sans-serif;
    color: var(--text);
    margin: 0;
    padding-top: var(--safe-top);
    padding-bottom: calc(var(--nav-h) + var(--safe-bottom) + 24px);
    overscroll-behavior-y: contain;
    -webkit-tap-highlight-color: transparent;
}
a { color: var(--fluor); }
.text-fluor { color: var(--fluor) !important; }
.text-muted { color: var(--muted) !important; }
.app { max-width: 560px; margin: 0 auto; padding: 0 16px; }

/* ---------- Cabecera ---------- */
.app-header {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px 12px; max-width: 560px; margin: 0 auto;
}
.avatar {
    width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--fluor-soft); color: var(--fluor); border: 2px solid var(--fluor-line);
    font-weight: 800; font-size: 1.1rem;
}
.app-header .saludo { flex: 1; min-width: 0; line-height: 1.2; }
.app-header .saludo b { display: block; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-header .saludo small { color: var(--muted); font-size: .78rem; }
.chip-puntos {
    display: flex; align-items: center; gap: 8px; text-decoration: none; color: #fff;
    background: var(--card); border: 1px solid var(--fluor-line); border-radius: 999px; padding: 7px 14px 7px 8px;
}
.chip-puntos i { width: 28px; height: 28px; border-radius: 50%; background: var(--fluor); color: #000; display: flex; align-items: center; justify-content: center; font-size: .8rem; }
.chip-puntos b { font-size: 1rem; line-height: 1; }
.chip-puntos small { display: block; font-size: .6rem; color: var(--muted); font-weight: 700; letter-spacing: .5px; }

/* ---------- Bloques ---------- */
.titulo-seccion { font-size: .74rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin: 24px 2px 10px; display: flex; align-items: center; justify-content: space-between; }
.titulo-seccion a { font-size: .75rem; text-transform: none; letter-spacing: 0; text-decoration: none; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 16px; }
.panel + .panel { margin-top: 12px; }
.aviso {
    display: flex; gap: 12px; align-items: flex-start;
    background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; font-size: .85rem;
}
.aviso > i { color: var(--fluor); font-size: 1.1rem; margin-top: 2px; }
.aviso.warn { border-color: rgba(255,193,7,.5); background: rgba(255,193,7,.07); }
.aviso.warn > i { color: var(--warn); }
.aviso .cerrar { margin-left: auto; background: none; border: 0; color: var(--muted); padding: 0 4px; }

/* ---------- Botones ---------- */
.btn { border-radius: 14px; font-weight: 700; }
.btn-lg { padding: 14px 16px; font-size: 1rem; }
.btn-fluor, .btn-success { background: var(--fluor); color: #000; border: 0; }
.btn-fluor:hover, .btn-fluor:focus, .btn-fluor:active, .btn-success:hover { background: #5dff9a !important; color: #000 !important; }
.btn-soft { background: var(--card-2); border: 1px solid var(--line); color: #fff; }
.btn-soft:hover { background: #222622; color: #fff; }

/* ---------- Scroll horizontal ---------- */
.scroll-x { display: flex; gap: 10px; overflow-x: auto; margin: 0 -16px; padding: 4px 16px 10px; scroll-padding: 0 16px; scrollbar-width: none; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.scroll-x::after { content: ''; flex: 0 0 6px; } /* margen al final del scroll */
.scroll-x::-webkit-scrollbar { display: none; }
.scroll-x > * { scroll-snap-align: start; }

/* ---------- Formularios ---------- */
.form-control, .form-select { background-color: var(--card-2); border-color: var(--line); color: #fff; border-radius: 12px; min-height: 50px; font-size: 16px; }
.form-control:focus, .form-select:focus { background-color: var(--card-2); color: #fff; border-color: var(--fluor); box-shadow: 0 0 0 .2rem var(--fluor-soft); }
.form-control::placeholder { color: #666; }
.form-label { font-size: .78rem; font-weight: 600; color: var(--muted); margin-bottom: 6px; }

/* ---------- Navegación inferior ---------- */
.nav-app {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
    display: flex; background: rgba(8,9,8,.96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--line); padding-bottom: var(--safe-bottom);
}
.nav-app a {
    flex: 1; height: var(--nav-h); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    color: #6f766f; text-decoration: none; font-size: .66rem; font-weight: 700; position: relative;
}
.nav-app a i { font-size: 1.2rem; }
.nav-app a.activo { color: var(--fluor); }
.nav-app a.activo::before { content: ''; position: absolute; top: 0; width: 28px; height: 3px; border-radius: 0 0 3px 3px; background: var(--fluor); }

/* ---------- Aviso de instalación ---------- */
.instalar {
    position: fixed; left: 12px; right: 12px; z-index: 1040;
    bottom: calc(var(--nav-h) + var(--safe-bottom) + 12px);
    max-width: 536px; margin: 0 auto;
    background: var(--card-2); border: 1px solid var(--fluor-line); border-radius: 18px; padding: 14px;
    display: flex; align-items: center; gap: 12px; box-shadow: 0 16px 40px rgba(0,0,0,.6);
    opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(16px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.instalar.visible { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.instalar img { width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0; }
.instalar .txt { flex: 1; min-width: 0; line-height: 1.25; }
.instalar .txt b { display: block; font-size: .92rem; }
.instalar .txt small { color: var(--muted); font-size: .78rem; }
.instalar .btn { padding: 9px 14px; font-size: .85rem; }
.instalar .cerrar { background: none; border: 0; color: var(--muted); padding: 4px; }

.ios-pasos { text-align: left; margin: 8px 0 0; padding: 0; list-style: none; counter-reset: paso; }
.ios-pasos li { counter-increment: paso; display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .95rem; }
.ios-pasos li:last-child { border-bottom: 0; }
.ios-pasos li::before { content: counter(paso); width: 28px; height: 28px; border-radius: 50%; background: var(--fluor); color: #000; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ios-pasos i { color: #0a84ff; }

/* ---------- SweetAlert en modo oscuro ---------- */
.swal2-popup { background: var(--card) !important; color: var(--text) !important; border: 1px solid var(--line) !important; border-radius: 22px !important; }
.swal2-title, .swal2-html-container { color: var(--text) !important; }
.swal2-confirm, .swal2-cancel, .swal2-deny { border-radius: 14px !important; font-weight: 700 !important; padding: 12px 22px !important; }
.swal2-input, .swal2-select, .swal2-textarea { background: var(--card-2) !important; color: #fff !important; border-color: var(--line) !important; }