/*
 * Gelsoft Portal - NEUROVOID Cyberpunk Theme
 * Inspired by futuristic tactical UI / NEUROVOID aesthetics
 * Color Palette: #030404, #FF3737, #F9F9FB, #05F4D8, #8E8E8E
 */

/* ==========================================================================
   Google Fonts Import
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Rajdhani:wght@300;400;500;600;700&family=Share+Tech+Mono&display=swap');

/* ==========================================================================
   CSS Custom Properties
   ========================================================================== */

:root {
    /* Core Palette */
    --gs-black: #030404;
    --gs-red: #FF3737;
    --gs-red-dark: #cc2a2a;
    --gs-red-glow: rgba(255, 55, 55, 0.4);
    --gs-white: #F9F9FB;
    --gs-cyan: #05F4D8;
    --gs-cyan-dark: #04c4ad;
    --gs-cyan-glow: rgba(5, 244, 216, 0.4);
    --gs-gray: #8E8E8E;
    --gs-gray-dark: #555555;

    /* Background Layers */
    --gs-bg-dark: #030404;
    --gs-bg-darker: #010202;
    --gs-bg-card: rgba(10, 12, 12, 0.85);
    --gs-bg-elevated: rgba(20, 24, 24, 0.9);
    --gs-bg-surface: rgba(30, 34, 34, 0.8);

    /* Text */
    --gs-text-primary: #F9F9FB;
    --gs-text-secondary: #8E8E8E;
    --gs-text-muted: #555555;

    /* Semantic */
    --gs-success: #05F4D8;
    --gs-danger: #FF3737;
    --gs-warning: #FFB837;
    --gs-warning-glow: rgba(255, 184, 55, 0.4);
    --gs-info: #05F4D8;

    /* Borders & Effects */
    --gs-border: rgba(142, 142, 142, 0.2);
    --gs-border-red: rgba(255, 55, 55, 0.3);
    --gs-border-cyan: rgba(5, 244, 216, 0.3);
    --gs-border-gold: rgba(255, 184, 55, 0.35);
    --gs-shadow: rgba(0, 0, 0, 0.6);

    /* Team Colors */
    --gs-team-red: #FF3737;
    --gs-team-blue: #05F4D8;

    /* Clip Path for angular cuts */
    --clip-btn: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
    --clip-card: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
    --clip-card-sm: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}

/* ==========================================================================
   Base Styles
   ========================================================================== */

html {
    scroll-behavior: smooth;
    font-size: 14px;
}

@media (min-width: 768px) {
    html { font-size: 15px; }
}
@media (min-width: 1200px) {
    html { font-size: 16px; }
}

body {
    background-color: var(--gs-bg-dark);
    color: var(--gs-text-primary);
    font-family: 'Rajdhani', 'Segoe UI', sans-serif;
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
}

/* Background image overlay */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    pointer-events: none;
    background: url('/images/Soldados001.png') center center / cover no-repeat;
    opacity: 20%;
}

/* Particles canvas */
#particles-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
}

/* Scanline overlay */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.03) 2px,
        rgba(0, 0, 0, 0.03) 4px
    );
}

/* Main content wrapper above particles */
.gs-page-wrapper {
    position: relative;
    min-height: 100vh;
}

/* ==========================================================================
   Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
    font-family: 'Orbitron', 'Rajdhani', sans-serif;
    color: var(--gs-text-primary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

h1 {
    border-bottom: 2px solid var(--gs-red);
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
    text-shadow: 0 0 20px var(--gs-red-glow);
    font-size: 1.6rem;
}

h2 {
    font-size: 1.3rem;
    color: var(--gs-cyan);
    text-shadow: 0 0 15px var(--gs-cyan-glow);
}

h3 { font-size: 1.15rem; }
h4 { font-size: 1.05rem; }

a {
    color: var(--gs-cyan);
    text-decoration: none;
    transition: all 0.25s ease;
}

a:hover {
    color: var(--gs-white);
    text-shadow: 0 0 8px var(--gs-cyan-glow);
}

::selection {
    background: var(--gs-red);
    color: var(--gs-white);
}

/* ==========================================================================
   Scrollbar
   ========================================================================== */

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--gs-bg-dark);
}

::-webkit-scrollbar-thumb {
    background: var(--gs-red);
    border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gs-cyan);
}

/* ==========================================================================
   Navigation - Cyberpunk Top Bar
   ========================================================================== */

.navbar {
    background: linear-gradient(180deg, rgba(3, 4, 4, 0.98) 0%, rgba(3, 4, 4, 0.92) 100%) !important;
    border-bottom: 1px solid var(--gs-border-red) !important;
    box-shadow: 0 2px 30px rgba(255, 55, 55, 0.08), inset 0 -1px 0 var(--gs-border-red);
    padding: 0.5rem 1rem;
    backdrop-filter: blur(12px);
    z-index: 1050;
}

.navbar-brand {
    color: var(--gs-red) !important;
    font-family: 'Orbitron', monospace;
    font-weight: 800;
    font-size: 1.3rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    text-shadow: 0 0 20px var(--gs-red-glow);
    transition: all 0.3s ease;
}

.navbar-brand:hover {
    color: var(--gs-white) !important;
    text-shadow: 0 0 30px var(--gs-red-glow), 0 0 60px var(--gs-red-glow);
}

.navbar-brand img {
    height: 44px;
    width: auto;
    /* El logo ya trae contorno negro: el glow rojo solo lo despega del fondo. */
    filter: drop-shadow(0 0 10px var(--gs-red-glow));
    transition: filter 0.3s ease;
}

.navbar-brand:hover img {
    filter: drop-shadow(0 0 16px var(--gs-red-glow)) brightness(1.08);
}

.offcanvas-title img {
    height: 36px;
    width: auto;
}

@media (max-width: 575.98px) {
    .navbar-brand img { height: 36px; }
}

/* La navbar va en z-index 1050; sin esto el offcanvas queda por debajo y su
   cabecera —logo y botón de cerrar— resulta inalcanzable en móvil. */
.offcanvas {
    z-index: 1060;
}

.offcanvas-backdrop {
    z-index: 1055;
}

.nav-link {
    color: var(--gs-text-secondary) !important;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1.5px;
    padding: 0.6rem 1rem !important;
    transition: all 0.25s ease;
    position: relative;
    border: none;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--gs-red);
    transition: all 0.3s ease;
    transform: translateX(-50%);
    box-shadow: 0 0 8px var(--gs-red-glow);
}

.nav-link:hover,
.nav-link.active {
    color: var(--gs-red) !important;
    text-shadow: 0 0 10px var(--gs-red-glow);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

/* Hamburger */
.navbar-toggler {
    border: 1px solid var(--gs-border-red);
    padding: 0.35rem 0.6rem;
    position: relative;
    overflow: hidden;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.navbar-toggler::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--gs-red-glow), transparent);
    transition: left 0.5s ease;
}

.navbar-toggler:hover::before {
    left: 100%;
}

.navbar-toggler-icon {
    filter: invert(1);
    width: 1.2em;
    height: 1.2em;
}

/* Offcanvas mobile menu */
.offcanvas {
    background: rgba(3, 4, 4, 0.97) !important;
    backdrop-filter: blur(16px);
    border-right: 1px solid var(--gs-border-red) !important;
}

.offcanvas-header {
    border-bottom: 1px solid var(--gs-border-red);
    padding: 1rem 1.25rem;
}

.offcanvas-title {
    font-family: 'Orbitron', monospace;
    color: var(--gs-red);
    font-weight: 800;
    letter-spacing: 3px;
    text-shadow: 0 0 20px var(--gs-red-glow);
}

.offcanvas .btn-close {
    filter: invert(1) brightness(0.8);
}

.offcanvas-body .nav-link {
    font-size: 1rem;
    padding: 0.75rem 1rem !important;
    border-left: 3px solid transparent;
    margin-bottom: 2px;
    transition: all 0.25s ease;
}

.offcanvas-body .nav-link:hover,
.offcanvas-body .nav-link.active {
    border-left-color: var(--gs-red);
    background: rgba(255, 55, 55, 0.08);
}

.offcanvas-body .nav-link::after {
    display: none;
}

/* Dropdown menus */
.dropdown-menu {
    background-color: rgba(10, 12, 12, 0.96);
    border: 1px solid var(--gs-border-red);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.7), 0 0 15px var(--gs-red-glow);
    backdrop-filter: blur(12px);
    border-radius: 0;
    clip-path: var(--clip-card-sm);
    padding: 0.5rem 0;
}

.dropdown-item {
    color: var(--gs-text-secondary);
    font-family: 'Rajdhani', sans-serif;
    font-weight: 500;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    padding: 0.5rem 1.25rem;
    transition: all 0.2s ease;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: rgba(255, 55, 55, 0.12);
    color: var(--gs-red);
    padding-left: 1.5rem;
}

.dropdown-header {
    color: var(--gs-cyan) !important;
    font-family: 'Orbitron', monospace;
    font-size: 0.7rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.dropdown-divider {
    border-color: var(--gs-border);
    opacity: 0.3;
}

/* ==========================================================================
   Cards and Containers
   ========================================================================== */

.card {
    background: var(--gs-bg-card);
    border: 1px solid var(--gs-border);
    border-radius: 0;
    clip-path: var(--clip-card);
    box-shadow: 0 4px 20px var(--gs-shadow);
    transition: all 0.3s ease;
    position: relative;
    overflow: visible;
}

.card::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    clip-path: var(--clip-card);
    background: linear-gradient(135deg, var(--gs-border-red) 0%, transparent 50%, var(--gs-border-cyan) 100%);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.card:hover::before {
    opacity: 1;
}

.card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), 0 0 15px var(--gs-red-glow);
}

.card-header {
    background: linear-gradient(90deg, rgba(255, 55, 55, 0.1) 0%, transparent 100%);
    border-bottom: 1px solid var(--gs-border-red);
    color: var(--gs-text-primary);
    font-family: 'Orbitron', monospace;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 0.75rem 1.25rem;
}

.card-body {
    color: var(--gs-text-primary);
    padding: 1.25rem;
}

.card-footer {
    background: rgba(3, 4, 4, 0.5);
    border-top: 1px solid var(--gs-border);
}

/* ==========================================================================
   Buttons - Angular Cyberpunk Style
   ========================================================================== */

.btn {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0.5rem 1.5rem;
    border-radius: 0;
    clip-path: var(--clip-btn);
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
    border: none;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    transition: left 0.5s ease;
}

.btn:hover::before {
    left: 100%;
}

.btn-primary {
    background: var(--gs-red);
    color: var(--gs-white);
    box-shadow: 0 0 15px var(--gs-red-glow), inset 0 0 15px rgba(255, 55, 55, 0.15);
}

.btn-primary:hover,
.btn-primary:focus {
    background: #ff5252;
    color: var(--gs-white);
    box-shadow: 0 0 25px var(--gs-red-glow), 0 0 50px rgba(255, 55, 55, 0.2);
    transform: translateY(-1px);
}

.btn-secondary {
    background: var(--gs-bg-surface);
    border: 1px solid var(--gs-border);
    color: var(--gs-text-primary);
}

.btn-secondary:hover,
.btn-secondary:focus {
    background: rgba(142, 142, 142, 0.2);
    border-color: var(--gs-gray);
    color: var(--gs-white);
}

.btn-outline-primary {
    background: transparent;
    border: 1px solid var(--gs-red);
    color: var(--gs-red);
}

.btn-outline-primary:hover {
    background: var(--gs-red);
    color: var(--gs-white);
    box-shadow: 0 0 20px var(--gs-red-glow);
}

.btn-outline-secondary {
    background: transparent;
    border: 1px solid var(--gs-cyan);
    color: var(--gs-cyan);
}

.btn-outline-secondary:hover {
    background: var(--gs-cyan);
    color: var(--gs-black);
    box-shadow: 0 0 20px var(--gs-cyan-glow);
}

/* Sin esto hereda el `border: none` de .btn y se ve como texto plano, no como botón. */
.btn-outline-light {
    background: transparent;
    border: 1px solid var(--gs-border);
    color: var(--gs-text-primary);
}

.btn-outline-light:hover,
.btn-outline-light:focus {
    background: rgba(249, 249, 251, 0.08);
    border-color: var(--gs-white);
    color: var(--gs-white);
}

.btn-danger {
    background: var(--gs-red);
    color: var(--gs-white);
    box-shadow: 0 0 10px var(--gs-red-glow);
}

.btn-danger:hover {
    background: #ff5252;
    box-shadow: 0 0 25px var(--gs-red-glow);
}

.btn-success {
    background: var(--gs-cyan);
    color: var(--gs-black);
    box-shadow: 0 0 10px var(--gs-cyan-glow);
}

.btn-success:hover {
    background: #20ffe6;
    box-shadow: 0 0 25px var(--gs-cyan-glow);
}

.btn-warning {
    background: var(--gs-warning);
    color: var(--gs-black);
}

.btn-info {
    background: var(--gs-cyan);
    color: var(--gs-black);
}

.btn-sm {
    padding: 0.3rem 1rem;
    font-size: 0.8rem;
}

.btn-lg {
    padding: 0.75rem 2.5rem;
    font-size: 1.1rem;
    letter-spacing: 2px;
}

/* ==========================================================================
   Forms
   ========================================================================== */

.form-control,
.form-select {
    background-color: rgba(10, 12, 12, 0.8);
    border: 1px solid var(--gs-border);
    color: var(--gs-text-primary);
    border-radius: 0;
    clip-path: var(--clip-btn);
    font-family: 'Rajdhani', sans-serif;
    font-weight: 500;
    letter-spacing: 0.5px;
    transition: all 0.25s ease;
}

.form-control:focus,
.form-select:focus {
    background-color: rgba(10, 12, 12, 0.9);
    border-color: var(--gs-cyan);
    color: var(--gs-text-primary);
    box-shadow: 0 0 0 0.15rem var(--gs-cyan-glow), 0 0 20px rgba(5, 244, 216, 0.1);
}

.form-control::placeholder {
    color: var(--gs-text-muted);
    font-style: italic;
}

.form-label {
    color: var(--gs-cyan);
    font-family: 'Orbitron', monospace;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 1.5px;
}

.form-text {
    color: var(--gs-text-muted);
    font-size: 0.8rem;
}

.input-group-text {
    background: rgba(255, 55, 55, 0.1);
    border: 1px solid var(--gs-border-red);
    color: var(--gs-red);
    border-radius: 0;
    font-family: 'Share Tech Mono', monospace;
}

.form-check-input {
    background-color: rgba(10, 12, 12, 0.8);
    border: 1px solid var(--gs-border);
    border-radius: 0;
}

.form-check-input:checked {
    background-color: var(--gs-red);
    border-color: var(--gs-red);
}

.form-check-input:focus {
    box-shadow: 0 0 0 0.15rem var(--gs-red-glow);
    border-color: var(--gs-red);
}

/* Validation states */
.is-invalid {
    border-color: var(--gs-red) !important;
    box-shadow: 0 0 8px rgba(255, 55, 55, 0.2) !important;
}

.invalid-feedback {
    color: var(--gs-red);
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.8rem;
}

.is-valid {
    border-color: var(--gs-cyan) !important;
    box-shadow: 0 0 8px rgba(5, 244, 216, 0.2) !important;
}

.valid-feedback {
    color: var(--gs-cyan);
}

/* ==========================================================================
   Tables
   ========================================================================== */

.table {
    color: var(--gs-text-primary);
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(255, 55, 55, 0.03);
    --bs-table-hover-bg: rgba(5, 244, 216, 0.06);
    --bs-table-border-color: var(--gs-border);
    font-family: 'Rajdhani', sans-serif;
}

.table thead {
    background: linear-gradient(90deg, rgba(255, 55, 55, 0.15) 0%, rgba(3, 4, 4, 0.9) 100%);
}

.table thead th {
    color: var(--gs-red);
    font-family: 'Orbitron', monospace;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 1.5px;
    border-bottom: 1px solid var(--gs-border-red);
    padding: 0.75rem;
}

.table-dark {
    --bs-table-bg: rgba(3, 4, 4, 0.7);
    --bs-table-border-color: var(--gs-border);
}

.table > tbody > tr {
    transition: all 0.2s ease;
}

.table > tbody > tr:hover {
    background: rgba(5, 244, 216, 0.06) !important;
}

/* ==========================================================================
   Badges and Alerts
   ========================================================================== */

.badge {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0.35em 0.8em;
    border-radius: 0;
    clip-path: var(--clip-btn);
}

.badge.bg-primary {
    background-color: var(--gs-red) !important;
    box-shadow: 0 0 8px var(--gs-red-glow);
}

.badge.bg-secondary {
    background-color: var(--gs-bg-surface) !important;
    color: var(--gs-text-primary);
    border: 1px solid var(--gs-border);
}

.badge.bg-success {
    background-color: var(--gs-cyan) !important;
    color: var(--gs-black);
}

.badge.bg-info {
    background-color: var(--gs-cyan) !important;
    color: var(--gs-black);
}

.alert {
    border-radius: 0;
    border: 1px solid;
    border-left: 3px solid;
    clip-path: var(--clip-card-sm);
    font-family: 'Rajdhani', sans-serif;
    font-weight: 500;
    backdrop-filter: blur(8px);
}

.alert-success {
    background: rgba(5, 244, 216, 0.08);
    border-color: var(--gs-cyan);
    color: var(--gs-cyan);
}

.alert-danger {
    background: rgba(255, 55, 55, 0.08);
    border-color: var(--gs-red);
    color: var(--gs-red);
}

.alert-warning {
    background: rgba(255, 184, 55, 0.08);
    border-color: var(--gs-warning);
    color: var(--gs-warning);
}

.alert-info {
    background: rgba(5, 244, 216, 0.08);
    border-color: var(--gs-cyan);
    color: var(--gs-cyan);
}

.alert .btn-close {
    filter: invert(1);
}

/* ==========================================================================
   Progress Bars - Cyan glow
   ========================================================================== */

.progress {
    background: rgba(142, 142, 142, 0.1);
    border-radius: 0;
    height: 6px;
    overflow: visible;
}

.progress-bar {
    background: linear-gradient(90deg, var(--gs-cyan-dark), var(--gs-cyan));
    box-shadow: 0 0 10px var(--gs-cyan-glow), 0 0 20px rgba(5, 244, 216, 0.15);
    border-radius: 0;
    position: relative;
}

.progress-bar::after {
    content: '';
    position: absolute;
    right: 0;
    top: -2px;
    bottom: -2px;
    width: 2px;
    background: var(--gs-cyan);
    box-shadow: 0 0 8px var(--gs-cyan);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
    background: linear-gradient(180deg, transparent, rgba(3, 4, 4, 0.95));
    border-top: 1px solid var(--gs-border-red) !important;
    color: var(--gs-text-muted);
    padding: 1rem 0;
    margin-top: auto;
    position: relative;
    z-index: 1;
}

.footer a {
    color: var(--gs-text-secondary);
}

.footer a:hover {
    color: var(--gs-cyan);
    text-shadow: 0 0 8px var(--gs-cyan-glow);
}

.footer .version-tag {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.7rem;
    color: var(--gs-text-muted);
    letter-spacing: 2px;
}

/* ==========================================================================
   Custom Components - Gelsoft Specific
   ========================================================================== */

/* Status badges */
.badge-activo {
    background-color: var(--gs-cyan) !important;
    color: var(--gs-black);
    box-shadow: 0 0 8px var(--gs-cyan-glow);
}

.badge-suspendido {
    background-color: var(--gs-red) !important;
    box-shadow: 0 0 8px var(--gs-red-glow);
}

.badge-desactivado {
    background-color: var(--gs-gray-dark) !important;
}

/* Team indicators */
.team-indicator {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 0;
    margin-right: 0.5rem;
    box-shadow: 0 0 6px currentColor;
}

.team-indicator.equipo-rojo {
    background-color: var(--gs-team-red);
    box-shadow: 0 0 8px var(--gs-red-glow);
}

.team-indicator.equipo-azul {
    background-color: var(--gs-team-blue);
    box-shadow: 0 0 8px var(--gs-cyan-glow);
}

/* Skill level badges */
.nivel-recluta { background-color: var(--gs-gray-dark); }
.nivel-soldado { background-color: var(--gs-cyan); color: var(--gs-black); }
.nivel-especialista { background-color: #3366ff; }
.nivel-veterano { background-color: var(--gs-warning); color: var(--gs-black); }

/* Role badges */
.rol-superadmin { background-color: var(--gs-red); box-shadow: 0 0 8px var(--gs-red-glow); }
.rol-admin-partida { background-color: #ff6b35; }
.rol-lider-equipo { background-color: var(--gs-cyan); color: var(--gs-black); }
.rol-jugador { background-color: var(--gs-gray-dark); }

/* QR Code container */
.qr-container {
    background: var(--gs-white);
    padding: 1rem;
    border-radius: 0;
    clip-path: var(--clip-card-sm);
    display: inline-block;
    box-shadow: 0 4px 20px var(--gs-shadow), 0 0 15px var(--gs-cyan-glow);
}

.qr-container img {
    display: block;
}

/* Match state indicators */
.estado-programada {
    color: var(--gs-cyan);
    border-color: var(--gs-cyan);
}

.estado-activa {
    color: var(--gs-red);
    border-color: var(--gs-red);
    animation: pulse-red 2s infinite;
}

.estado-finalizada {
    color: var(--gs-text-muted);
    border-color: var(--gs-text-muted);
}

@keyframes pulse-red {
    0%, 100% { opacity: 1; box-shadow: 0 0 5px var(--gs-red-glow); }
    50% { opacity: 0.7; box-shadow: 0 0 20px var(--gs-red-glow); }
}

@keyframes pulse-cyan {
    0%, 100% { box-shadow: 0 0 5px var(--gs-cyan-glow); }
    50% { box-shadow: 0 0 20px var(--gs-cyan-glow); }
}

/* Glow border animation */
@keyframes border-glow {
    0%, 100% { border-color: var(--gs-border-red); }
    50% { border-color: var(--gs-red); }
}

/* ==========================================================================
   Utilities
   ========================================================================== */

.text-cyber-red {
    color: var(--gs-red);
    text-shadow: 0 0 10px var(--gs-red-glow);
}

.text-cyber-cyan {
    color: var(--gs-cyan);
    text-shadow: 0 0 10px var(--gs-cyan-glow);
}

.bg-cyber-dark {
    background: var(--gs-bg-dark);
}

.bg-cyber-card {
    background: var(--gs-bg-card);
}

.border-red {
    border-color: var(--gs-border-red) !important;
}

.border-cyan {
    border-color: var(--gs-border-cyan) !important;
}

.glow-red {
    box-shadow: 0 0 15px var(--gs-red-glow);
}

.glow-cyan {
    box-shadow: 0 0 15px var(--gs-cyan-glow);
}

.font-mono {
    font-family: 'Share Tech Mono', monospace;
}

.font-display {
    font-family: 'Orbitron', monospace;
}

/* Angular clip utilities */
.clip-angular {
    clip-path: var(--clip-card);
}

.clip-angular-sm {
    clip-path: var(--clip-card-sm);
}

/* ==========================================================================
   Page-specific Styles
   ========================================================================== */

/* Dashboard cards */
.dashboard-card {
    border-left: 3px solid var(--gs-red);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.dashboard-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 55, 55, 0.05) 0%, transparent 60%);
    pointer-events: none;
}

.dashboard-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px var(--gs-shadow), 0 0 20px var(--gs-red-glow);
    border-left-color: var(--gs-cyan);
}

.dashboard-card .stat-number {
    font-family: 'Orbitron', monospace;
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--gs-cyan);
    text-shadow: 0 0 20px var(--gs-cyan-glow);
}

/* Standings table */
.tabla-clasificacion tr:first-child td {
    background: linear-gradient(90deg, rgba(255, 55, 55, 0.15) 0%, transparent 100%);
}

.tabla-clasificacion tr:nth-child(2) td {
    background: linear-gradient(90deg, rgba(5, 244, 216, 0.1) 0%, transparent 100%);
}

.tabla-clasificacion tr:nth-child(3) td {
    background: linear-gradient(90deg, rgba(255, 184, 55, 0.1) 0%, transparent 100%);
}

/* Player cards */
.player-card {
    border: 1px solid var(--gs-border);
    border-radius: 0;
    clip-path: var(--clip-card-sm);
    padding: 1rem;
    background: var(--gs-bg-card);
    transition: all 0.3s ease;
}

.player-card:hover {
    border-color: var(--gs-cyan);
    box-shadow: 0 0 15px var(--gs-cyan-glow);
}

.player-card .avatar {
    width: 60px;
    height: 60px;
    border-radius: 0;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    object-fit: cover;
    border: 2px solid var(--gs-red);
    box-shadow: 0 0 10px var(--gs-red-glow);
}

/* ==========================================================================
   Modal Cyberpunk
   ========================================================================== */

.modal-content {
    background: rgba(3, 4, 4, 0.97);
    border: 1px solid var(--gs-border-red);
    border-radius: 0;
    clip-path: var(--clip-card);
    backdrop-filter: blur(16px);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.8), 0 0 20px var(--gs-red-glow);
}

.modal-header {
    border-bottom: 1px solid var(--gs-border-red);
    background: linear-gradient(90deg, rgba(255, 55, 55, 0.1), transparent);
}

.modal-title {
    font-family: 'Orbitron', monospace;
    color: var(--gs-red);
    letter-spacing: 2px;
}

.modal-footer {
    border-top: 1px solid var(--gs-border);
}

.modal .btn-close {
    filter: invert(1);
}

/* ==========================================================================
   Pagination
   ========================================================================== */

.page-link {
    background: var(--gs-bg-card);
    border: 1px solid var(--gs-border);
    color: var(--gs-text-secondary);
    border-radius: 0;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
}

.page-link:hover {
    background: rgba(255, 55, 55, 0.1);
    border-color: var(--gs-red);
    color: var(--gs-red);
}

.page-item.active .page-link {
    background: var(--gs-red);
    border-color: var(--gs-red);
    color: var(--gs-white);
    box-shadow: 0 0 10px var(--gs-red-glow);
}

.page-item.disabled .page-link {
    background: var(--gs-bg-dark);
    border-color: var(--gs-border);
    color: var(--gs-text-muted);
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

@media (max-width: 768px) {
    h1 {
        font-size: 1.2rem;
        letter-spacing: 1px;
    }
    
    h2 { font-size: 1.1rem; }
    
    .dashboard-card .stat-number {
        font-size: 1.6rem;
    }
    
    .btn {
        padding: 0.4rem 1rem;
        font-size: 0.85rem;
    }
    
    .card {
        clip-path: var(--clip-card-sm);
    }
    
    .container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}

@media (max-width: 576px) {
    .navbar-brand {
        font-size: 1rem;
        letter-spacing: 2px;
    }
    
    h1 {
        font-size: 1rem;
    }
    
    .table {
        font-size: 0.85rem;
    }
    
    .table thead th {
        font-size: 0.65rem;
        padding: 0.5rem;
    }
}

/* ==========================================================================
   Sponsors (Patrocinadores)
   Tier drives logo size and prominence. Logos sit on a light plate so dark
   brand marks stay legible against the cyberpunk background.
   ========================================================================== */

.gs-sponsors-section {
    padding: 2rem 0;
}

.gs-tier-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1rem;
}

.gs-tier-label {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: .72rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--tier-color, var(--gs-cyan));
    border: 1px solid var(--tier-color, var(--gs-cyan));
    padding: 3px 12px;
    clip-path: var(--clip-btn);
    white-space: nowrap;
}

.gs-tier-header .gs-tier-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--tier-color, var(--gs-cyan)), transparent);
    opacity: .5;
}

.gs-sponsor-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    height: 100%;
    padding: 1.1rem .9rem;
    text-align: center;
    text-decoration: none;
    background: var(--gs-bg-card);
    border: 1px solid var(--gs-border);
    clip-path: var(--clip-card-sm);
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.gs-sponsor-card:hover,
.gs-sponsor-card:focus-visible {
    border-color: var(--tier-color, var(--gs-cyan));
    box-shadow: 0 0 18px color-mix(in srgb, var(--tier-color, var(--gs-cyan)) 35%, transparent);
    transform: translateY(-3px);
}

/* Placa clara: los logos de marca llegan en cualquier color (muchos son negros sobre
   transparente), así que se apoyan sobre fondo claro para garantizar contraste. */
.gs-sponsor-plate {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: .65rem;
    background: rgba(249, 249, 251, .94);
    border-radius: 3px;
}

.gs-sponsor-logo {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    opacity: .92;
    transition: opacity .25s ease, transform .25s ease;
}

.gs-sponsor-card:hover .gs-sponsor-logo,
.gs-sponsor-card:focus-visible .gs-sponsor-logo {
    opacity: 1;
    transform: scale(1.03);
}

/* Fallback tile when the sponsor has no artwork yet */
.gs-sponsor-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    font-family: 'Orbitron', sans-serif;
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: .08em;
    color: var(--tier-color, var(--gs-cyan));
    background: var(--gs-bg-surface);
    border-radius: 4px;
}

.gs-sponsor-name {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    font-size: .9rem;
    color: var(--gs-text-primary);
    line-height: 1.2;
}

.gs-sponsor-desc {
    font-family: 'Rajdhani', sans-serif;
    font-size: .78rem;
    color: var(--gs-text-secondary);
    line-height: 1.3;
}

/* ── Compact footer strip ──────────────────────────────── */

.gs-sponsor-strip {
    border-top: 1px solid var(--gs-border);
    padding: 1.1rem 0 .9rem;
}

.gs-sponsor-strip-title {
    font-family: 'Share Tech Mono', monospace;
    font-size: .65rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gs-text-muted);
    margin-bottom: .7rem;
    text-align: center;
}

.gs-sponsor-strip-items {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.4rem;
}

.gs-sponsor-strip-item {
    display: inline-flex;
    align-items: center;
    padding: .3rem .5rem;
    background: rgba(249, 249, 251, .9);
    border-radius: 3px;
    text-decoration: none;
    opacity: .75;
    transition: opacity .25s ease;
}

.gs-sponsor-strip-item:hover,
.gs-sponsor-strip-item:focus-visible {
    opacity: 1;
}

.gs-sponsor-strip-item img {
    height: 30px;
    width: auto;
    max-width: 130px;
    object-fit: contain;
}

.gs-sponsor-strip-item .gs-strip-text {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    font-size: .8rem;
    letter-spacing: .04em;
    color: var(--gs-black);
}

.gs-sponsor-strip-item .gs-strip-text {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    font-size: .8rem;
    letter-spacing: .04em;
    color: var(--gs-text-secondary);
}

@media (max-width: 575.98px) {
    .gs-sponsor-strip-items { gap: 1rem; }
    .gs-sponsor-strip-item img { height: 24px; max-width: 100px; }

    /* La mayoría navega desde el celular: la vitrina no debe comerse la pantalla.
       Las alturas llegan inline desde el ViewModel, de ahí el !important. */
    .gs-sponsor-card { padding: .7rem .55rem; gap: .4rem; }
    .gs-sponsor-plate { padding: .45rem; min-height: 0 !important; }
    .gs-sponsor-logo { max-height: 44px !important; }
    .gs-sponsor-initials { min-height: 56px !important; }
    .gs-sponsor-name { font-size: .8rem; }
    .gs-sponsor-desc { display: none; }
}

/* ── Ergonomía táctil (celular) ────────────────────────── */
@media (max-width: 575.98px) {
    /* Objetivo de área táctil ≥44px: casi todo el tráfico llega desde el celular. */
    .btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .btn-sm {
        min-height: 40px;
    }
    /* Dentro de un input-group el botón debe casar con la altura del campo. */
    .input-group .btn {
        min-height: 0;
    }
    .btn-close {
        min-width: 44px;
        min-height: 44px;
        background-position: center;
    }
    /* Por debajo de 16px iOS hace zoom automático al enfocar el campo. */
    .form-control,
    .form-select {
        font-size: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gs-sponsor-card,
    .gs-sponsor-logo,
    .gs-sponsor-strip-item,
    .gs-sponsor-strip-item img {
        transition: none;
    }
    .gs-sponsor-card:hover { transform: none; }
    .gs-sponsor-card:hover .gs-sponsor-logo { transform: none; }
}

/* ==========================================================================
   Campanita de avisos
   ========================================================================== */

.gs-avisos-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    color: var(--gs-text-secondary);
    font-size: 1.15rem;
    text-decoration: none;
    transition: color .25s ease;
}

.gs-avisos-badge:hover,
.gs-avisos-badge:focus-visible {
    color: var(--gs-red);
}

.gs-avisos-contador {
    position: absolute;
    top: 4px;
    right: 2px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    background: var(--gs-red);
    color: #FFFFFF;
    font-family: 'Share Tech Mono', monospace;
    font-size: .6rem;
    line-height: 17px;
    text-align: center;
    border-radius: 9px;
}

[data-bs-theme="light"] .navbar .gs-avisos-badge {
    color: #A9B6C6;
}

[data-bs-theme="light"] .navbar .gs-avisos-badge:hover,
[data-bs-theme="light"] .navbar .gs-avisos-badge:focus-visible {
    color: var(--gs-accent-red);
}

/* ==========================================================================
   Botón de tema (claro / oscuro)
   ========================================================================== */

.gs-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-width: 44px;
    min-height: 44px;
    padding: 0 .7rem;
    background: transparent;
    border: 1px solid var(--gs-border-cyan);
    color: var(--gs-cyan);
    clip-path: var(--clip-btn);
    font-family: 'Share Tech Mono', monospace;
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .25s ease, border-color .25s ease, background-color .25s ease;
}

.gs-theme-toggle:hover,
.gs-theme-toggle:focus-visible {
    background: color-mix(in srgb, var(--gs-cyan) 12%, transparent);
    border-color: var(--gs-cyan);
    color: var(--gs-text-primary);
}

.gs-theme-toggle svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

/* Se muestra el icono del tema al que se va a cambiar, no el actual. */
.gs-theme-toggle .gs-icon-light,
[data-bs-theme="light"] .gs-theme-toggle .gs-icon-dark {
    display: none;
}

[data-bs-theme="light"] .gs-theme-toggle .gs-icon-light {
    display: block;
}

.gs-theme-toggle-label {
    display: none;
}

/* En el offcanvas el botón ocupa todo el ancho y sí muestra texto. */
.offcanvas .gs-theme-toggle {
    width: 100%;
    justify-content: flex-start;
    padding: 0 1rem;
}

.offcanvas .gs-theme-toggle-label {
    display: inline;
}

/* ==========================================================================
   Tema claro
   Sólo se activa con data-bs-theme="light" en <html>. Redefine los tokens
   --gs-* y corrige los componentes que llevan colores oscuros literales.
   ========================================================================== */

[data-bs-theme="light"] {
    /* Core Palette — el acento vivo se reserva para trazos; el texto usa la
       variante oscura, que sí pasa contraste sobre blanco. */
    --gs-black: #0B0E11;
    --gs-red: #D31F2C;
    --gs-red-dark: #A8151F;
    --gs-red-glow: rgba(211, 31, 44, 0.20);
    --gs-white: #FFFFFF;
    --gs-cyan: #007D70;
    --gs-cyan-dark: #005C52;
    --gs-cyan-glow: rgba(0, 125, 112, 0.18);
    --gs-gray: #56616D;
    --gs-gray-dark: #6E7A87;

    /* Acentos decorativos: sólo para líneas, barras y degradados, nunca texto. */
    --gs-accent-red: #FF2D3F;
    --gs-accent-cyan: #00C9B1;

    /* Background Layers — el lienzo es claramente más oscuro que la tarjeta;
       si ambos rondan el blanco no hay separación y todo se lee como una hoja. */
    --gs-bg-dark: #DDE4EE;
    --gs-bg-darker: #CBD5E2;
    --gs-bg-card: #FFFFFF;
    --gs-bg-elevated: #FFFFFF;
    --gs-bg-surface: #EAEFF6;

    /* Tinta: navbar y footer van oscuros para enmarcar el contenido claro. */
    --gs-ink: #0D141D;
    --gs-ink-soft: #16202C;

    /* Text */
    --gs-text-primary: #0B121A;
    --gs-text-secondary: #3D4956;
    --gs-text-muted: #6B7887;

    /* Semantic */
    --gs-success: #007D70;
    --gs-danger: #D31F2C;
    --gs-warning: #96600A;
    --gs-warning-glow: rgba(150, 96, 10, 0.2);
    --gs-info: #007D70;

    /* Borders & Effects — hairlines frías, no grises sucios */
    --gs-border: #C7D2E0;
    --gs-border-red: rgba(211, 31, 44, 0.32);
    --gs-border-cyan: rgba(0, 125, 112, 0.32);
    --gs-border-gold: rgba(150, 96, 10, 0.32);
    --gs-shadow: rgba(11, 18, 26, 0.12);

    /* Escala de elevación: dos capas (contacto + difusa) para dar profundidad. */
    --gs-elev-1: 0 1px 2px rgba(11, 18, 26, .07), 0 8px 20px -10px rgba(11, 18, 26, .26);
    --gs-elev-2: 0 2px 5px rgba(11, 18, 26, .09), 0 20px 38px -16px rgba(11, 18, 26, .34);
    --gs-elev-3: 0 4px 10px rgba(11, 18, 26, .10), 0 34px 64px -26px rgba(11, 18, 26, .42);

    /* Team Colors */
    --gs-team-red: #D31F2C;
    --gs-team-blue: #0A8F9E;

    color-scheme: light;
}

/* ── Fondo: retícula de plano técnico + auroras de marca en vez de la foto ─ */

[data-bs-theme="light"] body {
    background-color: var(--gs-bg-dark);
}

/* Se reaprovecha la capa fija del tema oscuro. El wallpaper claro sólo asoma en
   la banda superior: el velo blanco lo disuelve antes de que empiece a competir
   con el texto. Va aquí y no en `body` para no usar `background-attachment:
   fixed`, que en iOS repinta en cada scroll. */
[data-bs-theme="light"] body::before {
    opacity: 1;
    background:
        radial-gradient(ellipse 70% 55% at 10% -10%, rgba(255, 45, 63, .13), transparent 62%),
        radial-gradient(ellipse 62% 48% at 94% 0%, rgba(0, 201, 177, .15), transparent 64%),
        linear-gradient(100deg,
            rgba(246, 249, 252, .90) 0%,
            rgba(246, 249, 252, .55) 40%,
            rgba(246, 249, 252, 0) 66%),
        linear-gradient(180deg,
            rgba(250, 252, 254, .72) 0%,
            rgba(240, 244, 249, .86) 26%,
            var(--gs-bg-dark) 56%,
            var(--gs-bg-dark) 100%),
        url('/images/SoldadosLight.jpg') center top / cover no-repeat,
        var(--gs-bg-dark);
}

/* Las scanlines se cambian por una retícula de 34px, casi imperceptible. */
[data-bs-theme="light"] body::after {
    display: block;
    background:
        repeating-linear-gradient(0deg, rgba(15, 22, 32, .028) 0 1px, transparent 1px 34px),
        repeating-linear-gradient(90deg, rgba(15, 22, 32, .028) 0 1px, transparent 1px 34px);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 0%, transparent 75%);
    mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 0%, transparent 75%);
}

[data-bs-theme="light"] ::-webkit-scrollbar-track {
    background: var(--gs-bg-surface);
}

[data-bs-theme="light"] ::-webkit-scrollbar-thumb {
    background: #B9C4D1;
}

[data-bs-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: var(--gs-red);
}

/* ── Tipografía: los glows se ven como texto borroso sobre fondo claro ──── */

[data-bs-theme="light"] h1,
[data-bs-theme="light"] h2,
[data-bs-theme="light"] .navbar-brand,
[data-bs-theme="light"] .offcanvas-title,
[data-bs-theme="light"] .text-cyber-red,
[data-bs-theme="light"] .text-cyber-cyan,
[data-bs-theme="light"] a:hover {
    text-shadow: none;
}

/* El subrayado del h1 pasa de barra sólida a degradado con remate. */
[data-bs-theme="light"] h1 {
    border-bottom: 0;
    position: relative;
    padding-bottom: .7rem;
}

[data-bs-theme="light"] h1::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, var(--gs-accent-red) 0, var(--gs-accent-red) 56px, var(--gs-border) 56px, var(--gs-border) 100%);
}

[data-bs-theme="light"] .glow-red,
[data-bs-theme="light"] .glow-cyan {
    box-shadow: var(--gs-elev-1);
}

/* En oscuro el hover aclara el enlace a blanco; en claro habría que oscurecerlo. */
[data-bs-theme="light"] a:hover {
    color: var(--gs-cyan-dark);
}

/* Sobre blanco un botón con borde hairline no se lee como botón: necesita
   superficie propia y elevación. */
[data-bs-theme="light"] .btn-outline-light {
    background: #FFFFFF;
    border-color: #CBD5E1;
    color: var(--gs-text-primary);
    box-shadow: var(--gs-elev-1);
}

[data-bs-theme="light"] .btn-outline-light:hover,
[data-bs-theme="light"] .btn-outline-light:focus {
    background: var(--gs-bg-surface);
    border-color: #94A3B8;
    color: var(--gs-text-primary);
    box-shadow: var(--gs-elev-2);
}

/* ── Navegación ─────────────────────────────────────────────────────────
   La barra y el pie van en tinta oscura. Sobre un lienzo claro son el ancla
   visual: dan marco, jerarquía y mantienen la identidad de la marca. */

[data-bs-theme="light"] .navbar {
    background: linear-gradient(180deg, var(--gs-ink-soft) 0%, var(--gs-ink) 100%) !important;
    border-bottom: 0 !important;
    box-shadow: 0 10px 28px -18px rgba(11, 18, 26, .9);
}

/* Filete de marca bajo la barra: es la firma visual del tema claro. */
[data-bs-theme="light"] .navbar::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--gs-accent-red), var(--gs-accent-cyan) 55%, transparent);
}

[data-bs-theme="light"] .navbar .nav-link {
    color: #A9B6C6 !important;
}

[data-bs-theme="light"] .navbar .nav-link:hover,
[data-bs-theme="light"] .navbar .nav-link.active {
    color: var(--gs-accent-red) !important;
    text-shadow: none;
}

[data-bs-theme="light"] .navbar .nav-link::after {
    background: var(--gs-accent-red);
}

[data-bs-theme="light"] .navbar-brand img {
    filter: none;
}

[data-bs-theme="light"] .navbar-brand:hover img {
    filter: brightness(1.08);
}

[data-bs-theme="light"] .navbar-toggler {
    border-color: rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .06);
}

[data-bs-theme="light"] .navbar-toggler-icon {
    filter: invert(1);
}

[data-bs-theme="light"] .navbar .gs-theme-toggle {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .22);
    color: #C4D0DE;
    box-shadow: none;
}

[data-bs-theme="light"] .navbar .gs-theme-toggle:hover,
[data-bs-theme="light"] .navbar .gs-theme-toggle:focus-visible {
    background: rgba(255, 255, 255, .14);
    border-color: var(--gs-accent-cyan);
    color: #FFFFFF;
}

/* El offcanvas sí es claro: son listas largas y ahí manda la legibilidad. */
[data-bs-theme="light"] .offcanvas {
    background: #FFFFFF !important;
    border-right: 1px solid var(--gs-border) !important;
    box-shadow: var(--gs-elev-3);
}

[data-bs-theme="light"] .offcanvas-header {
    background: linear-gradient(180deg, var(--gs-ink-soft), var(--gs-ink));
    border-bottom: 2px solid var(--gs-accent-red);
}

[data-bs-theme="light"] .offcanvas .btn-close {
    filter: invert(1) brightness(1.4);
}

[data-bs-theme="light"] .offcanvas-body .nav-link:hover,
[data-bs-theme="light"] .offcanvas-body .nav-link.active {
    background: linear-gradient(90deg, rgba(255, 45, 63, .10), transparent);
}

[data-bs-theme="light"] .offcanvas .gs-theme-toggle {
    background: var(--gs-bg-surface);
    border-color: var(--gs-border);
    color: var(--gs-text-secondary);
    box-shadow: none;
}

[data-bs-theme="light"] .btn-close {
    filter: none;
}

[data-bs-theme="light"] .dropdown-menu {
    background-color: #FFFFFF;
    border-color: var(--gs-border);
    box-shadow: var(--gs-elev-2);
}

[data-bs-theme="light"] .dropdown-item:hover,
[data-bs-theme="light"] .dropdown-item:focus {
    background: var(--gs-bg-surface);
}

[data-bs-theme="light"] .modal-content {
    background: #FFFFFF;
    border-color: var(--gs-border);
    box-shadow: var(--gs-elev-3);
}

[data-bs-theme="light"] .gs-theme-toggle {
    background: #FFFFFF;
    border-color: var(--gs-border);
    color: var(--gs-text-secondary);
    box-shadow: var(--gs-elev-1);
}

[data-bs-theme="light"] .gs-theme-toggle:hover,
[data-bs-theme="light"] .gs-theme-toggle:focus-visible {
    color: var(--gs-cyan);
    border-color: var(--gs-border-cyan);
    background: #FFFFFF;
}

/* ── Superficies ────────────────────────────────────────────────────────── */

[data-bs-theme="light"] .card {
    background: #FFFFFF;
    border-color: var(--gs-border);
    box-shadow: var(--gs-elev-1);
}

[data-bs-theme="light"] .card:hover {
    box-shadow: var(--gs-elev-2);
    border-color: #A9B8CC;
}

/* El degradado de borde del tema oscuro no funciona sobre blanco. */
[data-bs-theme="light"] .card::before {
    display: none;
}

[data-bs-theme="light"] .card-header {
    position: relative;
    background: linear-gradient(90deg, rgba(255, 45, 63, .09), rgba(0, 201, 177, .05) 55%, var(--gs-bg-surface));
    border-bottom: 1px solid var(--gs-border);
    color: var(--gs-text-primary);
}

/* Marca roja a la izquierda: jerarquiza la cabecera sin recurrir a glows. */
[data-bs-theme="light"] .card-header::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--gs-accent-red);
}

[data-bs-theme="light"] .card-footer {
    background: var(--gs-bg-surface);
    border-top-color: var(--gs-border);
}

[data-bs-theme="light"] .footer {
    background: linear-gradient(180deg, var(--gs-ink-soft), var(--gs-ink)) !important;
    border-top: 2px solid var(--gs-accent-red) !important;
    color: #8C99A9;
    box-shadow: none;
}

[data-bs-theme="light"] .footer a,
[data-bs-theme="light"] .footer .text-muted,
[data-bs-theme="light"] .footer .version-tag {
    color: #8C99A9 !important;
}

[data-bs-theme="light"] .footer a:hover {
    color: var(--gs-accent-cyan) !important;
}

[data-bs-theme="light"] .footer .gs-sponsor-strip {
    border-top-color: rgba(255, 255, 255, .12);
}

[data-bs-theme="light"] .footer .gs-sponsor-strip-title {
    color: #6F7C8C;
}

[data-bs-theme="light"] .dashboard-card {
    border-left-width: 3px;
}

[data-bs-theme="light"] .dashboard-card::after {
    background: linear-gradient(135deg, rgba(255, 45, 63, .05) 0%, transparent 55%);
}

[data-bs-theme="light"] .player-card {
    background: #FFFFFF;
    box-shadow: var(--gs-elev-1);
}

[data-bs-theme="light"] .player-card:hover {
    box-shadow: var(--gs-elev-2);
}

/* ── Botones: sombra de color en vez de halo difuso ─────────────────────── */

[data-bs-theme="light"] .btn-primary,
[data-bs-theme="light"] .btn-danger {
    box-shadow: 0 1px 2px rgba(211, 31, 44, .24), 0 8px 16px -10px rgba(211, 31, 44, .7);
}

[data-bs-theme="light"] .btn-primary:hover,
[data-bs-theme="light"] .btn-primary:focus,
[data-bs-theme="light"] .btn-danger:hover {
    background: var(--gs-red-dark);
    box-shadow: 0 2px 4px rgba(211, 31, 44, .28), 0 14px 24px -12px rgba(211, 31, 44, .8);
}

[data-bs-theme="light"] .btn-success,
[data-bs-theme="light"] .btn-info {
    box-shadow: 0 1px 2px rgba(0, 125, 112, .22), 0 8px 16px -10px rgba(0, 125, 112, .7);
}

[data-bs-theme="light"] .btn-secondary {
    background: #FFFFFF;
    border-color: var(--gs-border);
    color: var(--gs-text-primary);
    box-shadow: var(--gs-elev-1);
}

[data-bs-theme="light"] .btn-secondary:hover,
[data-bs-theme="light"] .btn-secondary:focus {
    background: var(--gs-bg-surface);
    border-color: #CBD5E1;
    color: var(--gs-text-primary);
}

[data-bs-theme="light"] .btn-outline-primary:hover {
    box-shadow: 0 8px 16px -10px rgba(211, 31, 44, .8);
}

/* ── Formularios ────────────────────────────────────────────────────────── */

[data-bs-theme="light"] .form-control,
[data-bs-theme="light"] .form-select,
[data-bs-theme="light"] .form-check-input {
    background-color: #FFFFFF;
    border-color: var(--gs-border);
    box-shadow: inset 0 1px 2px rgba(15, 22, 32, .04);
}

[data-bs-theme="light"] .form-control:focus,
[data-bs-theme="light"] .form-select:focus {
    background-color: #FFFFFF;
    border-color: var(--gs-cyan);
    box-shadow: 0 0 0 3px rgba(0, 201, 177, .22);
}

[data-bs-theme="light"] .form-control::placeholder {
    color: #9AA5B1;
}

[data-bs-theme="light"] .form-label {
    color: var(--gs-text-secondary);
}

[data-bs-theme="light"] .input-group-text {
    background: var(--gs-bg-surface);
    border-color: var(--gs-border);
    color: var(--gs-text-secondary);
}

/* ── Tablas ─────────────────────────────────────────────────────────────── */

[data-bs-theme="light"] .table {
    --bs-table-striped-bg: rgba(11, 18, 26, 0.035);
    --bs-table-hover-bg: rgba(0, 201, 177, 0.10);
    --bs-table-border-color: var(--gs-border);
}

[data-bs-theme="light"] .table thead {
    background: linear-gradient(180deg, #E7EDF5, #D9E2EC);
}

[data-bs-theme="light"] .table thead th {
    color: var(--gs-text-primary);
    border-bottom: 1px solid var(--gs-border);
    box-shadow: inset 0 -2px 0 var(--gs-accent-red);
}

[data-bs-theme="light"] .table > tbody > tr:hover {
    background: rgba(0, 201, 177, 0.10) !important;
}

[data-bs-theme="light"] .tabla-clasificacion tr:first-child td {
    background: linear-gradient(90deg, rgba(255, 45, 63, .14) 0%, transparent 70%);
}

[data-bs-theme="light"] .tabla-clasificacion tr:nth-child(2) td {
    background: linear-gradient(90deg, rgba(0, 201, 177, .14) 0%, transparent 70%);
}

[data-bs-theme="light"] .tabla-clasificacion tr:nth-child(3) td {
    background: linear-gradient(90deg, rgba(255, 184, 55, .20) 0%, transparent 70%);
}

[data-bs-theme="light"] .page-link {
    background: #FFFFFF;
    border-color: var(--gs-border);
}

[data-bs-theme="light"] .page-item.disabled .page-link {
    background: var(--gs-bg-surface);
}

[data-bs-theme="light"] .page-item.active .page-link {
    box-shadow: 0 6px 14px -8px rgba(211, 31, 44, .9);
}

/* ── Alertas: fondo tintado suave + barra lateral de color ──────────────── */

[data-bs-theme="light"] .alert {
    box-shadow: var(--gs-elev-1);
}

[data-bs-theme="light"] .alert-success,
[data-bs-theme="light"] .alert-info {
    background: #E8FAF6;
    color: var(--gs-cyan-dark);
}

[data-bs-theme="light"] .alert-danger {
    background: #FDECEE;
    color: var(--gs-red-dark);
}

[data-bs-theme="light"] .alert-warning {
    background: #FDF4E3;
    color: #7A4E05;
}

/* ── Barras de progreso ─────────────────────────────────────────────────── */

[data-bs-theme="light"] .progress {
    background: var(--gs-bg-surface);
}

[data-bs-theme="light"] .progress-bar {
    background: linear-gradient(90deg, var(--gs-cyan), var(--gs-accent-cyan));
    box-shadow: none;
}

[data-bs-theme="light"] .progress-bar::after {
    display: none;
}

/* ── Texto sobre acentos: en claro el teal es oscuro, el texto va en blanco ─ */

[data-bs-theme="light"] .btn-success,
[data-bs-theme="light"] .btn-info,
[data-bs-theme="light"] .btn-outline-secondary:hover,
[data-bs-theme="light"] .badge.bg-success,
[data-bs-theme="light"] .badge.bg-info,
[data-bs-theme="light"] .badge-activo,
[data-bs-theme="light"] .nivel-soldado,
[data-bs-theme="light"] .rol-lider-equipo,
[data-bs-theme="light"] .btn-warning,
[data-bs-theme="light"] .nivel-veterano {
    color: var(--gs-white);
}

[data-bs-theme="light"] .btn-success:hover {
    background: var(--gs-cyan-dark);
}

[data-bs-theme="light"] .badge.bg-secondary {
    background-color: var(--gs-bg-surface) !important;
    color: var(--gs-text-secondary);
    border-color: var(--gs-border);
}

/* ── Utilidades de Bootstrap fijadas a oscuro en las vistas ──────────────
   Muchas vistas traen `bg-dark text-light` / `table-dark` escritos a mano.
   En tema claro se remapean a superficies claras para no dejar islas negras. */

[data-bs-theme="light"] .bg-dark {
    background-color: var(--gs-bg-card) !important;
}

/* `bg-secondary` se usa como cabecera de card y como campo: en claro debe ser
   una superficie clara, no el gris medio de Bootstrap. */
[data-bs-theme="light"] .bg-secondary {
    background-color: var(--gs-bg-surface) !important;
    color: var(--gs-text-primary) !important;
}

[data-bs-theme="light"] .text-light {
    color: var(--gs-text-primary) !important;
}

[data-bs-theme="light"] .bg-dark.text-white,
[data-bs-theme="light"] .bg-dark > .text-white,
[data-bs-theme="light"] .bg-transparent.text-light {
    color: var(--gs-text-primary) !important;
}

[data-bs-theme="light"] .table-dark {
    --bs-table-bg: transparent;
    --bs-table-color: var(--gs-text-primary);
    --bs-table-border-color: var(--gs-border);
    --bs-table-hover-bg: rgba(0, 201, 177, 0.07);
    --bs-table-hover-color: var(--gs-text-primary);
    --bs-table-striped-color: var(--gs-text-primary);
}

/* ── Patrocinadores: sobre fondo claro la placa necesita borde ───────────── */

[data-bs-theme="light"] .gs-sponsor-card {
    background: #FFFFFF;
    box-shadow: var(--gs-elev-1);
}

[data-bs-theme="light"] .gs-sponsor-card:hover,
[data-bs-theme="light"] .gs-sponsor-card:focus-visible {
    box-shadow: var(--gs-elev-2);
}

[data-bs-theme="light"] .gs-sponsor-plate,
[data-bs-theme="light"] .gs-sponsor-strip-item {
    background: #FFFFFF;
    border: 1px solid var(--gs-border);
}

[data-bs-theme="light"] .gs-sponsor-strip {
    border-top-color: var(--gs-border);
}

/* ── Portada: los mosaicos y filas se definen en la vista con `--gs-bg-card`,
   que en claro es blanco puro. Sin elevación quedarían planos sobre el fondo. */

[data-bs-theme="light"] .hero::before {
    background: none;
}

/* El halo rojo del logo se vuelve una mancha rosa sobre blanco. */
[data-bs-theme="light"] .hero-logo {
    filter: drop-shadow(0 10px 20px rgba(15, 22, 32, .16));
}

[data-bs-theme="light"] .stat-tile,
[data-bs-theme="light"] .nav-tile,
[data-bs-theme="light"] .match-card,
[data-bs-theme="light"] .team-row,
[data-bs-theme="light"] .result-row,
[data-bs-theme="light"] .cta-panel,
[data-bs-theme="light"] .comunidad-card {
    background: #FFFFFF;
    border-color: var(--gs-border);
    box-shadow: var(--gs-elev-1);
}

[data-bs-theme="light"] .stat-tile:hover,
[data-bs-theme="light"] .nav-tile:hover,
[data-bs-theme="light"] .match-card:hover,
[data-bs-theme="light"] .team-row:hover {
    box-shadow: var(--gs-elev-2);
}

/* Filo de color arriba de cada mosaico: sin eso son cajas blancas indistintas. */
[data-bs-theme="light"] .stat-tile,
[data-bs-theme="light"] .nav-tile {
    border-top: 3px solid var(--gs-accent-cyan);
}

[data-bs-theme="light"] .stat-tile.accent-red,
[data-bs-theme="light"] .nav-tile:nth-child(even) {
    border-top-color: var(--gs-accent-red);
}

[data-bs-theme="light"] .match-card,
[data-bs-theme="light"] .team-row {
    border-left: 3px solid var(--gs-border);
    transition: border-left-color .2s, box-shadow .2s, transform .2s;
}

[data-bs-theme="light"] .match-card:hover {
    border-left-color: var(--gs-accent-cyan);
}

[data-bs-theme="light"] .team-row:hover {
    border-left-color: var(--gs-accent-red);
}

[data-bs-theme="light"] .cta-panel {
    background: linear-gradient(135deg, #FFFFFF 0%, var(--gs-bg-surface) 100%);
    border-color: var(--gs-border);
    box-shadow: var(--gs-elev-2);
}

/* El bloque de resultados se apoya en la superficie gris, no en blanco puro:
   la lista larga no debe competir con las tarjetas principales. */
[data-bs-theme="light"] .result-row {
    background: var(--gs-bg-surface);
}

/* Familia `military-gold`: se usa en muchas vistas pero nunca se definió. Sin
   estas reglas los botones salen transparentes con texto oscuro — invisibles
   sobre el fondo del tema oscuro — y los badges quedan ilegibles. */
.bg-military-gold,
.btn-military-gold {
    background-color: var(--gs-warning) !important;
    color: var(--gs-black) !important;
}

.btn-military-gold:hover,
.btn-military-gold:focus {
    background-color: #ffc75c !important;
    box-shadow: 0 0 20px var(--gs-warning-glow);
}

.btn-outline-military-gold {
    background: transparent;
    border: 1px solid var(--gs-warning);
    color: var(--gs-warning);
}

.btn-outline-military-gold:hover,
.btn-outline-military-gold:focus {
    background: var(--gs-warning);
    color: var(--gs-black);
}

.border-military-gold {
    border-color: var(--gs-border-gold) !important;
}

/* En claro el dorado se oscurece hasta marrón: el texto encima va en blanco. */
[data-bs-theme="light"] .bg-military-gold,
[data-bs-theme="light"] .btn-military-gold,
[data-bs-theme="light"] .btn-outline-military-gold:hover,
[data-bs-theme="light"] .btn-outline-military-gold:focus {
    color: var(--gs-white) !important;
}

[data-bs-theme="light"] .btn-military-gold:hover,
[data-bs-theme="light"] .btn-military-gold:focus {
    background-color: var(--gs-warning) !important;
    filter: brightness(1.15);
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    body {
        background-color: #fff;
        color: #000;
    }
    
    body::after,
    #particles-canvas {
        display: none !important;
    }
    
    .navbar, .footer, .btn {
        display: none !important;
    }
    
    .card {
        border: 1px solid #000;
        box-shadow: none;
        clip-path: none;
    }
}