/* ============================================================
   GymSys — Main Stylesheet
   Stack: Bootstrap 5.3 + Custom CSS
   Aesthetic: Industrial / High-Energy Dark
   ============================================================ */

:root {
    --gs-black:   #0a0a0a;
    --gs-dark:    #111111;
    --gs-gray:    #1c1c1c;
    --gs-border:  #2a2a2a;
    --gs-orange:  #f97316;
    --gs-orange2: #ea580c;
    --gs-yellow:  #fbbf24;
    --gs-white:   #f5f5f5;
    --gs-muted:   #6b7280;
    --gs-success: #22c55e;
    --gs-danger:  #ef4444;
    --gs-blue:    #3b82f6;
    --gs-radius:  4px;
    --gs-font:    'Barlow', sans-serif;
    --gs-font-cond: 'Barlow Condensed', sans-serif;
}

* { box-sizing: border-box; }

body {
    background: var(--gs-black);
    color: var(--gs-white);
    font-family: var(--gs-font);
    font-size: 15px;
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ── Navbar ─────────────────────────────────────────────── */
.gs-navbar {
    background: rgba(10,10,10,.97);
    border-bottom: 2px solid var(--gs-orange);
    padding: .75rem 0;
}

.gs-brand { display: flex; align-items: center; gap: .5rem; text-decoration: none; }
.gs-logo-icon { color: var(--gs-orange); font-size: 1.4rem; line-height: 1; }
.gs-logo-icon-img { height: 1.9rem; width: auto; display: block; }
.gs-brand-text {
    font-family: var(--gs-font-cond);
    font-size: 1.6rem;
    font-weight: 400;
    color: var(--gs-white);
    letter-spacing: .05em;
    text-transform: uppercase;
}
.gs-brand-text strong { color: var(--gs-orange); font-weight: 900; }

.navbar-nav .nav-link {
    color: rgba(245,245,245,.8) !important;
    font-family: var(--gs-font-cond);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .4rem .75rem !important;
    transition: color .2s;
}
.navbar-nav .nav-link:hover { color: var(--gs-orange) !important; }

/* ── Buttons ─────────────────────────────────────────────── */
.gs-btn-primary {
    background: var(--gs-orange);
    color: #000 !important;
    font-family: var(--gs-font-cond);
    font-weight: 800;
    font-size: .95rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    border: none;
    border-radius: var(--gs-radius);
    padding: .5rem 1.4rem;
    text-decoration: none;
    display: inline-block;
    transition: background .2s, transform .1s;
    cursor: pointer;
}
.gs-btn-primary:hover { background: var(--gs-orange2); transform: translateY(-1px); }

.gs-btn-outline {
    background: transparent;
    color: var(--gs-orange) !important;
    border: 2px solid var(--gs-orange);
    font-family: var(--gs-font-cond);
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    border-radius: var(--gs-radius);
    padding: .45rem 1.2rem;
    text-decoration: none;
    display: inline-block;
    transition: all .2s;
    cursor: pointer;
}
.gs-btn-outline:hover { background: var(--gs-orange); color: #000 !important; }

.gs-btn-secondary {
    background: var(--gs-gray);
    color: var(--gs-white) !important;
    border: 1px solid var(--gs-border);
    font-family: var(--gs-font-cond);
    font-weight: 700;
    font-size: .9rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    border-radius: var(--gs-radius);
    padding: .45rem 1.2rem;
    text-decoration: none;
    display: inline-block;
    transition: all .2s;
    cursor: pointer;
}
.gs-btn-secondary:hover { border-color: var(--gs-orange); color: var(--gs-orange) !important; }

/* ── Cards ───────────────────────────────────────────────── */
.gs-card {
    background: var(--gs-dark);
    border: 1px solid var(--gs-border);
    border-radius: var(--gs-radius);
    padding: 1.5rem;
}

.gs-card-highlight {
    border-color: var(--gs-orange);
    position: relative;
}
.gs-card-highlight::before {
    content: 'MÁS POPULAR';
    position: absolute;
    top: -12px; left: 50%; transform: translateX(-50%);
    background: var(--gs-orange);
    color: #000;
    font-family: var(--gs-font-cond);
    font-weight: 900;
    font-size: .7rem;
    letter-spacing: .12em;
    padding: 2px 12px;
    border-radius: 20px;
}

/* ── Plan Cards ──────────────────────────────────────────── */
.plan-price {
    font-family: var(--gs-font-cond);
    font-size: 3rem;
    font-weight: 900;
    color: var(--gs-orange);
    line-height: 1;
}
.plan-price span { font-size: 1.2rem; font-weight: 400; color: var(--gs-muted); }
.plan-name {
    font-family: var(--gs-font-cond);
    font-size: 1.4rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}

/* ── Hero ────────────────────────────────────────────────── */
.gs-hero {
    background: var(--gs-dark);
    border-bottom: 1px solid var(--gs-border);
    padding: 5rem 0 4rem;
    position: relative;
    overflow: hidden;
}
.gs-hero::before {
    content: '';
    position: absolute;
    top: -50%; right: -20%;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(249,115,22,.15) 0%, transparent 70%);
    pointer-events: none;
}
.gs-hero-tag {
    display: inline-block;
    background: var(--gs-orange);
    color: #000;
    font-family: var(--gs-font-cond);
    font-weight: 900;
    font-size: .75rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    padding: 3px 12px;
    border-radius: 2px;
    margin-bottom: 1rem;
}
.gs-hero h1 {
    font-family: var(--gs-font-cond);
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1.05;
    letter-spacing: .02em;
}
.gs-hero h1 em {
    font-style: normal;
    color: var(--gs-orange);
}

/* ── Section Titles ──────────────────────────────────────── */
.gs-section-title {
    font-family: var(--gs-font-cond);
    font-size: 2rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.gs-section-title span { color: var(--gs-orange); }
.gs-divider {
    width: 48px; height: 3px;
    background: var(--gs-orange);
    border-radius: 2px;
    margin: .75rem 0 2rem;
}

/* ── Stats ───────────────────────────────────────────────── */
.gs-stat-number {
    font-family: var(--gs-font-cond);
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--gs-orange);
    line-height: 1;
}

/* ── Forms ───────────────────────────────────────────────── */
.gs-form-control {
    background: var(--gs-gray) !important;
    border: 1px solid var(--gs-border) !important;
    color: var(--gs-white) !important;
    border-radius: var(--gs-radius) !important;
    padding: .6rem .9rem !important;
    transition: border-color .2s;
}
.gs-form-control:focus {
    border-color: var(--gs-orange) !important;
    box-shadow: 0 0 0 3px rgba(249,115,22,.15) !important;
    outline: none !important;
}
.gs-form-control::placeholder { color: var(--gs-muted) !important; }

label.gs-label {
    font-family: var(--gs-font-cond);
    font-weight: 700;
    font-size: .85rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gs-muted);
    margin-bottom: .3rem;
    display: block;
}

/* ── Badges ──────────────────────────────────────────────── */
.gs-badge {
    display: inline-block;
    font-family: var(--gs-font-cond);
    font-weight: 700;
    font-size: .75rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 2px;
}
.gs-badge-success { background: rgba(34,197,94,.15); color: var(--gs-success); border: 1px solid rgba(34,197,94,.3); }
.gs-badge-danger  { background: rgba(239,68,68,.15);  color: var(--gs-danger);  border: 1px solid rgba(239,68,68,.3); }
.gs-badge-warning { background: rgba(251,191,36,.15); color: var(--gs-yellow);  border: 1px solid rgba(251,191,36,.3); }
.gs-badge-info    { background: rgba(59,130,246,.15); color: var(--gs-blue);    border: 1px solid rgba(59,130,246,.3); }

/* ── Alerts ──────────────────────────────────────────────── */
.gs-alert {
    border-radius: var(--gs-radius);
    padding: .85rem 1.1rem;
    font-size: .9rem;
    border-left: 3px solid;
}
.gs-alert-success { background: rgba(34,197,94,.1);  border-color: var(--gs-success); color: #a7f3d0; }
.gs-alert-danger  { background: rgba(239,68,68,.1);   border-color: var(--gs-danger);  color: #fca5a5; }
.gs-alert-warning { background: rgba(251,191,36,.1);  border-color: var(--gs-yellow);  color: #fde68a; }

/* ── Tables ──────────────────────────────────────────────── */
.gs-table { width: 100%; border-collapse: collapse; }
.gs-table th {
    font-family: var(--gs-font-cond);
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gs-muted);
    padding: .6rem 1rem;
    border-bottom: 1px solid var(--gs-border);
    text-align: left;
}
.gs-table td {
    padding: .75rem 1rem;
    border-bottom: 1px solid rgba(42,42,42,.7);
    color: var(--gs-white);
    vertical-align: middle;
}
.gs-table tbody tr:hover { background: rgba(255,255,255,.02); }

/* ── Dashboard Sidebar ───────────────────────────────────── */
.gs-sidebar {
    background: var(--gs-dark);
    border-right: 1px solid var(--gs-border);
    min-height: 100vh;
    width: 240px;
    padding: 1.5rem 0;
    flex-shrink: 0;
}
.gs-sidebar .sidebar-brand {
    padding: 0 1.5rem 1.5rem;
    border-bottom: 1px solid var(--gs-border);
    margin-bottom: 1rem;
}
.gs-sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem 1.5rem;
    color: rgba(245,245,245,.7);
    font-family: var(--gs-font-cond);
    font-weight: 600;
    font-size: .95rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    transition: all .2s;
    border-left: 3px solid transparent;
}
.gs-sidebar .nav-link:hover,
.gs-sidebar .nav-link.active {
    color: var(--gs-orange);
    border-left-color: var(--gs-orange);
    background: rgba(249,115,22,.05);
}
.gs-sidebar .nav-link i { font-size: 1rem; width: 20px; text-align: center; }

.gs-content { flex: 1; padding: 2rem; background: var(--gs-black); }

/* ── QR Panel ────────────────────────────────────────────── */
.gs-qr-wrapper {
    background: #fff;
    padding: 1rem;
    border-radius: var(--gs-radius);
    display: inline-block;
}

/* ── Acceso Result ───────────────────────────────────────── */
.gs-acceso-result {
    border-radius: var(--gs-radius);
    padding: 2rem;
    text-align: center;
    animation: fadeInUp .3s ease;
}
.gs-acceso-ok      { background: rgba(34,197,94,.1);  border: 2px solid var(--gs-success); }
.gs-acceso-denied  { background: rgba(239,68,68,.1);   border: 2px solid var(--gs-danger); }
.gs-acceso-icon { font-size: 4rem; line-height: 1; margin-bottom: .5rem; }

/* ── Footer ──────────────────────────────────────────────── */
.gs-footer {
    background: var(--gs-dark);
    border-top: 1px solid var(--gs-border);
}

/* ── Animations ──────────────────────────────────────────── */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
.animate-fade { animation: fadeInUp .4s ease; }

/* ── Utility ─────────────────────────────────────────────── */
.text-orange { color: var(--gs-orange) !important; }
.text-gs-muted { color: var(--gs-muted) !important; }
.border-gs { border-color: var(--gs-border) !important; }
.bg-gs-dark { background: var(--gs-dark) !important; }
.bg-gs-gray { background: var(--gs-gray) !important; }
.font-cond { font-family: var(--gs-font-cond); }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
    .gs-sidebar { width: 100%; min-height: auto; border-right: none; border-bottom: 1px solid var(--gs-border); }
    .gs-content { padding: 1rem; }
}