/**
 * Tribbo - Estilos personalizados
 * Sistema de preparación de oposiciones
 */

/* ═══════════════════════════════════════════════════════════════════════════
   Variables CSS
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --tribbo-primary:   #4F46E5;
    --tribbo-secondary: #7C3AED;
    --tribbo-accent:    #06B6D4;
    --tribbo-success:   #10B981;
    --tribbo-warning:   #F59E0B;
    --tribbo-danger:    #EF4444;
    --tribbo-dark:      #1E1B4B;
    --tribbo-light:     #F8FAFC;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Layout Base
   ═══════════════════════════════════════════════════════════════════════════ */

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--tribbo-light);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Navbar
   ═══════════════════════════════════════════════════════════════════════════ */

.navbar-tribbo {
    background: linear-gradient(135deg, var(--tribbo-dark) 0%, var(--tribbo-primary) 100%);
    box-shadow: 0 2px 10px rgba(79, 70, 229, .25);
}

.navbar-tribbo .navbar-brand {
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -.5px;
    color: #fff !important;
}

.navbar-tribbo .nav-link {
    color: rgba(255, 255, 255, .85) !important;
    font-weight: 500;
    transition: color .15s;
}

.navbar-tribbo .nav-link:hover,
.navbar-tribbo .nav-link.active {
    color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Cards
   ═══════════════════════════════════════════════════════════════════════════ */

.card-tribbo {
    border: none;
    border-radius: 14px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .06), 0 4px 16px rgba(0, 0, 0, .04);
    transition: transform .2s, box-shadow .2s;
}

.card-tribbo:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 20px rgba(79, 70, 229, .12);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Botones
   ═══════════════════════════════════════════════════════════════════════════ */

.btn-tribbo {
    background: linear-gradient(135deg, var(--tribbo-primary), var(--tribbo-secondary));
    border: none;
    color: #fff;
    font-weight: 600;
    border-radius: 8px;
    transition: opacity .2s, transform .1s;
}

.btn-tribbo:hover {
    opacity: .9;
    color: #fff;
    transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Sidebar
   ═══════════════════════════════════════════════════════════════════════════ */

.sidebar-tribbo {
    min-height: calc(100vh - 56px);
    background: #fff;
    border-right: 1px solid #E5E7EB;
    padding: 1rem .75rem;
}

.sidebar-tribbo .nav-link {
    color: #4B5563;
    border-radius: 8px;
    margin-bottom: 2px;
    font-weight: 500;
    padding: .5rem .75rem;
}

.sidebar-tribbo .nav-link:hover,
.sidebar-tribbo .nav-link.active {
    background: #EEF2FF;
    color: var(--tribbo-primary);
}

.sidebar-tribbo .nav-link i {
    width: 22px;
}

.sidebar-tribbo .section-label {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #9CA3AF;
    padding: .75rem .75rem .25rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Stat Boxes
   ═══════════════════════════════════════════════════════════════════════════ */

.stat-box {
    background: #fff;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    border-left: 4px solid var(--tribbo-primary);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
}

.stat-box .stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--tribbo-dark);
}

.stat-box .stat-label {
    font-size: .8rem;
    color: #6B7280;
    font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Progress Bars
   ═══════════════════════════════════════════════════════════════════════════ */

.progress-tribbo .progress-bar {
    background: linear-gradient(90deg, var(--tribbo-primary), var(--tribbo-accent));
}

/* ═══════════════════════════════════════════════════════════════════════════
   Badges de Dificultad
   ═══════════════════════════════════════════════════════════════════════════ */

.badge-facil {
    background: var(--tribbo-success) !important;
}

.badge-media {
    background: var(--tribbo-warning) !important;
    color: #000 !important;
}

.badge-dificil {
    background: var(--tribbo-danger) !important;
}

.badge-calibrando {
    background: #6B7280 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Rankings
   ═══════════════════════════════════════════════════════════════════════════ */

.ranking-row-me {
    background: #EEF2FF;
    font-weight: 600;
}

.medal-gold {
    color: #F59E0B;
}

.medal-silver {
    color: #9CA3AF;
}

.medal-bronze {
    color: #B45309;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Flash Messages
   ═══════════════════════════════════════════════════════════════════════════ */

.flash-container {
    position: fixed;
    top: 72px;
    right: 1rem;
    z-index: 1055;
    min-width: 300px;
    max-width: 420px;
}

.flash-container .alert {
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Formularios
   ═══════════════════════════════════════════════════════════════════════════ */

.form-control:focus,
.form-select:focus {
    border-color: var(--tribbo-primary);
    box-shadow: 0 0 0 .2rem rgba(79, 70, 229, .15);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Páginas de Autenticación
   ═══════════════════════════════════════════════════════════════════════════ */

.auth-page {
    min-height: calc(100vh - 56px);
    background: linear-gradient(135deg, var(--tribbo-dark) 0%, var(--tribbo-primary) 50%, var(--tribbo-accent) 100%);
}

.auth-card {
    border-radius: 20px;
    border: none;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Hero Home
   ═══════════════════════════════════════════════════════════════════════════ */

.hero-tribbo {
    background: linear-gradient(135deg, var(--tribbo-dark), var(--tribbo-primary));
    color: #fff;
    padding: 3rem 0;
}