:root {
    --color-primary: #00e676; /* Verde Ne�n - �xito */
    --color-secondary: #1e88e5; /* Azul El�ctrico - Info */
    --color-dark: #121212; /* Fondo Principal */
    --color-mid-dark: #1f1f1f; /* Color de la Tarjeta/Contenedor */
    --color-text: #f5f5f5; /* Texto Claro */
    --color-muted: #999; /* Texto Secundario */
    --color-warning: #ff9f00; /* Amarillo - Precauci�n */
    --color-danger: #ef5350; /* Rojo - Riesgo */
}

body {
    font-family: 'Inter', sans-serif;
    background: var(--color-dark);
    color: var(--color-text);
    min-height: 100vh;
    display: flex;
    overflow-x: hidden;
}

/* Contenedor principal de la aplicaci�n */
#app-container {
    display: flex;
    width: 100%;
}

/* --- Estilos de la Barra Lateral (Sidebar) --- */
#sidebar {
    width: 280px;
    min-width: 280px;
    background-color: var(--color-mid-dark);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    padding: 20px 0;
    transition: margin 0.3s ease-in-out;
    position: fixed;
    height: 100vh;
    z-index: 1030;
    display: flex; /* Habilitar flexbox para el m�dulo de cuenta al fondo */
    flex-direction: column;
}

/* Ocultar sidebar por defecto en m�vil */
@media (max-width: 991.98px) {
    #sidebar {
        margin-left: -280px;
    }

        #sidebar.show {
            margin-left: 0;
        }
}

/* Empujar el contenido principal cuando la barra lateral est� visible en desktop (lg+) */
.content-wrapper {
    width: 100%;
    padding: 0;
}

@media (min-width: 992px) {
    .content-wrapper {
        margin-left: 280px;
    }
}

.brand-logo {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--color-primary);
    padding: 0 20px;
    margin-bottom: 30px;
}

.nav-link {
    color: var(--color-muted);
    padding: 12px 20px;
    transition: all 0.2s;
    border-left: 4px solid transparent;
    display: flex;
    align-items: center;
    cursor: pointer;
}

    .nav-link:hover, .nav-link.active {
        color: var(--color-text);
        background-color: rgba(0, 230, 118, 0.1);
    }

    .nav-link.active {
        border-left-color: var(--color-primary);
        font-weight: 600;
        color: var(--color-primary);
    }

/* Estilos espec�ficos para la cuenta en el sidebar */
.account-module .btn-logout {
    color: var(--color-danger);
    font-weight: 600;
    padding: 8px 10px;
    border-radius: 0.5rem;
    transition: background-color 0.2s;
}

    .account-module .btn-logout:hover {
        background-color: rgba(239, 83, 80, 0.1);
        color: var(--color-danger);
    }

/* --- Estilos del Contenido Principal y Navbar Superior --- */
#main-content {
    flex-grow: 1;
    padding: 30px;
}

.main-header {
    background-color: var(--color-mid-dark);
    padding: 15px 30px;
    border-radius: 1rem;
    margin-bottom: 30px;
}

.page-title {
    font-size: 2rem;
    font-weight: 700;
}

/* --- Estilos de las Tarjetas de Estad�sticas (Stats Cards) --- */
.stat-card {
    background-color: var(--color-mid-dark);
    border-radius: 1rem;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s, box-shadow 0.3s;
    cursor: pointer;
    height: 100%;
}

    .stat-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(0, 230, 118, 0.1);
    }

.stat-icon-wrapper {
    /* Estilo base, el color de fondo es sobreescrito inline */
    border-radius: 0.5rem;
    padding: 10px;
    display: inline-flex;
    margin-bottom: 10px;
}

.stat-value {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 5px;
}

.stat-label {
    color: var(--color-muted);
    font-size: 0.9rem;
    font-weight: 500;
}

/* Estilo para el Feed de Actividad */
.feed-card {
    background-color: var(--color-mid-dark);
    border-radius: 1rem;
    padding: 20px;
    margin-bottom: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.feed-item {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

    .feed-item:last-child {
        border-bottom: none;
    }

/* --- Estilos de Tablas Deportivas --- */
.dark-table {
    background-color: var(--color-mid-dark);
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.dark-table .table {
    color: var(--color-text);
    margin-bottom: 0;
}

    .dark-table .table > :not(caption) > * > * {
        padding: 0.75rem 1rem;
        background-color: var(--color-mid-dark);
        border-bottom-width: 1px;
        border-color: rgba(255, 255, 255, 0.08);
    }

    .dark-table .table th {
        color: var(--color-primary);
        font-weight: 600;
        text-transform: uppercase;
        font-size: 0.8rem;
        border-bottom: 2px solid var(--color-primary);
    }

    .dark-table .table tbody tr:hover {
        background-color: rgba(0, 230, 118, 0.05);
    }

    /* CLASE PARA ASEGURAR TEXTO BLANCO EN EL CUERPO DE LA TABLA */
    .dark-table .table tbody td {
        color: var(--color-text) !important;
    }

/* Estilos personalizados para el formulario */
        .input-custom {
            background-color: #2a2a2a;
            border: 1px solid #444;
            color: var(--color-text);
            padding: 10px 15px;
            border-radius: 0.5rem;
            width: 100%;
            transition: border-color 0.2s;
        }

        .input-custom:focus {
            outline: none;
            border-color: var(--color-primary);
            box-shadow: 0 0 0 3px rgba(0, 230, 118, 0.2);
        }