/* =========================================================
   ESTILOS PREMIUM PARA ESCRITORIO (PC) - MEDRANO OL
   ========================================================= */

:root {
    --dark-main: #0f172a;
    --dark-secondary: #1e293b;
    --dark-card: #1e293b;
    --accent: #3b82f6;
    --accent-gradient: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    --success-gradient: linear-gradient(135deg, #10b981 0%, #059669 100%);
    --warning-gradient: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    --danger-gradient: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

body.desktop-mode {
    font-family: 'Inter', 'Source Sans Pro', sans-serif !important;
    background-color: var(--dark-main);
}

/* NAVEGACIÓN SUPERIOR (Navbar) */
.main-header {
    background-color: rgba(15, 23, 42, 0.8) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* SIDEBAR (Menú Lateral) */
.main-sidebar {
    background-color: #0c1222 !important;
    box-shadow: 10px 0 30px rgba(0,0,0,0.2) !important;
}

.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active,
.sidebar-light-primary .nav-sidebar > .nav-item > .nav-link.active {
    background: var(--accent-gradient) !important;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3) !important;
    border-radius: 12px;
}

.nav-sidebar .nav-link {
    border-radius: 12px;
    margin-bottom: 5px;
    padding: 10px 15px !important;
    transition: all 0.3s;
}

.nav-sidebar .nav-link:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    transform: translateX(5px);
}

/* CONTENEDOR PRINCIPAL */
.content-wrapper {
    background-color: var(--dark-main) !important;
}

/* TARJETAS (Cards) */
.card {
    background-color: var(--dark-card) !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2) !important;
}

.card-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    padding: 15px 20px !important;
}

/* CAJAS DE RESUMEN (Small Boxes) */
.small-box {
    border-radius: 16px !important;
    overflow: hidden;
    border: none;
    transition: transform 0.3s;
}

.small-box:hover {
    transform: translateY(-5px);
}

.bg-info    { background: var(--accent-gradient) !important; }
.bg-success { background: var(--success-gradient) !important; }
.bg-warning { background: var(--warning-gradient) !important; }
.bg-danger  { background: var(--danger-gradient) !important; }

.small-box .icon {
    color: rgba(255, 255, 255, 0.2) !important;
}

/* TABLAS */
.table {
    color: #cbd5e1 !important;
}

.table thead th {
    border-bottom: 2px solid rgba(255, 255, 255, 0.1) !important;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 1px;
    color: var(--text-muted);
}

.table td {
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    vertical-align: middle !important;
    padding: 15px !important;
}

/* LOGIN DESKTOP */
.login-wrapper {
    background: radial-gradient(circle at center, #1e293b 0%, #080a0f 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* SELECTOR DE MODO (seleccion.php) - COMPACTO Y SIN SCROLL */
.selection-screen {
    background: #0f172a;
    background: radial-gradient(circle at center, #1e293b 0%, #080a0f 100%);
    height: 100vh;
    display: flex !important;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Evita scroll */
    width: 100%;
}

.selection-container {
    max-width: 800px;
    width: 100%;
    padding: 20px;
}

.selection-card {
    background: #1e293b !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 20px !important;
    padding: 30px 20px !important;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 250px;
    color: white !important;
}

.selection-card:hover {
    transform: translateY(-8px);
    border-color: #3b82f6 !important;
    background: #253145 !important;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
}

.selection-card i {
    font-size: 3.5rem;
    color: #3b82f6; 
}

.selection-card h4 {
    font-size: 1.4rem;
    font-weight: 700;
    margin-top: 15px;
    color: white !important;
}

.selection-card p {
    color: #94a3b8 !important;
    font-size: 0.85rem;
    margin: 0;
}