/* --- FUENTES & VARIABLES --- */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=Roboto:wght@300;400;500&display=swap');

:root {
    /* Paleta Armadon */
    --bg-body: #111115;
    --bg-card: #1a1a20;
    --bg-input: rgba(0, 0, 0, 0.6);
    --bg-glass: rgba(15, 15, 20, 0.85);

    --primary-color: #5842d6;
    --primary-hover: #4633b3;

    --accent-green: #00ff99;
    --accent-red: #ff0055;
    --accent-yellow: #ffcc00;

    --text-main: #ffffff;
    --text-muted: #cccccc;

    --border-color: #33333e;
}

/* --- BASE --- */
body {
    background-color: var(--bg-body);
    color: var(--text-main);
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
}

/* Tipografía Gamer */
h1,
h2,
h3,
h4,
h5,
h6,
.navbar-brand,
.btn,
.nav-link,
.card-header,
th {
    font-family: 'Rajdhani', sans-serif !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: 0.2s;
}

a:hover {
    color: var(--primary-hover);
    text-shadow: 0 0 5px rgba(88, 66, 214, 0.5);
}

/* --- COMPONENTES UI SOBRESCRIBIENDO BOOTSTRAP --- */

/* Cards */
.card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    margin-bottom: 20px;
}

.card-header {
    background-color: rgba(0, 0, 0, 0.3) !important;
    border-bottom: 2px solid var(--primary-color) !important;
    color: var(--text-main) !important;
    padding: 15px 20px;
}

.card-footer {
    background-color: rgba(0, 0, 0, 0.3) !important;
    border-top: 1px solid var(--border-color);
}

/* Inputs & Forms */
.form-control,
.form-select {
    background-color: var(--bg-input) !important;
    border: 1px solid var(--border-color);
    color: var(--text-main) !important;
    border-radius: 4px;
}

.form-control:focus {
    background-color: rgba(0, 0, 0, 0.8) !important;
    border-color: var(--primary-color);
    box-shadow: 0 0 10px rgba(88, 66, 214, 0.4);
}

.form-label,
.form-check-label {
    color: var(--text-muted);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Botones */
.btn {
    border-radius: 4px;
    border: none;
    padding: 10px 20px;
    transition: all 0.2s ease-in-out;
}

.btn-primary {
    background-color: var(--primary-color);
    color: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.btn-primary:hover {
    background-color: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 0 15px rgba(88, 66, 214, 0.6);
}

.btn-success {
    background-color: var(--accent-green);
    color: #000;
    font-weight: 800;
}

.btn-success:hover {
    background-color: #00cc7a;
    box-shadow: 0 0 15px rgba(0, 255, 153, 0.4);
}

.btn-danger {
    background-color: var(--accent-red);
}

.btn-danger:hover {
    box-shadow: 0 0 15px rgba(255, 0, 85, 0.4);
}

/* --- REGLAS CORREGIDAS PARA TABLAS --- */
.table {
    --bs-table-color: var(--text-muted);
    /* Color de texto para celdas */
    --bs-table-border-color: var(--border-color);
    /* Color de bordes */
    --bs-table-bg: transparent;
    /* Fondo de celdas transparente */
    --bs-table-striped-bg: rgba(255, 255, 255, 0.02);
    /* Fondo sutil para filas alternas */
    --bs-table-hover-bg: rgba(88, 66, 214, 0.15);
    /* Color de hover más pronunciado */
    --bs-table-hover-color: var(--text-main);
    /* Texto blanco en hover */
}

.table thead {
    --bs-table-color: var(--primary-color);
    /* Color texto cabecera */
    --bs-table-bg: rgba(0, 0, 0, 0.3);
    /* Fondo oscuro cabecera */
    font-size: 1rem;
}

/* --- NAVBAR Y OTROS --- */
.navbar {
    background-color: var(--bg-card) !important;
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.navbar-brand {
    color: var(--primary-color) !important;
    text-shadow: 0 0 10px rgba(88, 66, 214, 0.4);
    font-size: 1.5rem;
}

.nav-link {
    color: var(--text-muted) !important;
}

.nav-link:hover,
.nav-link.active {
    color: var(--text-main) !important;
}

/* --- UTILIDADES DE COMPATIBILIDAD (OVERRIDES) --- */
.bg-light,
.bg-white {
    background-color: var(--bg-card) !important;
    color: var(--text-main) !important;
}

.text-dark,
.text-muted {
    color: var(--text-muted) !important;
}

.modal-content {
    background-color: var(--bg-body);
    border: 1px solid var(--primary-color);
}

.modal-header {
    border-bottom: 1px solid var(--border-color);
}

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

.alert-info {
    background-color: rgba(88, 66, 214, 0.2);
    border-color: var(--primary-color);
    color: #fff;
}

.alert-danger {
    background-color: rgba(255, 0, 85, 0.15);
    border-color: rgba(255, 0, 85, 0.4);
    color: #fff;
}

/* Scrollbar personalizada */
::-webkit-scrollbar {
    width: 8px;
}

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

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color);
}