/* =============================================================== */
/* INICIO: ESTILOS ESPECÍFICOS PARA EL DASHBOARD                   */
/* =============================================================== */

/* Contenedor principal */
#or-crm-app {
    font-family: 'Montserrat', sans-serif;
    background-color: #0F0F0F;
    color: #FFFFFF;
    min-height: 100vh;
    display: flex;
}

/* Variables de color actualizadas */
#or-crm-app.dark {
    --bg-primary: #0F0F0F;
    --bg-secondary: #1A1A1A;
    --bg-card: #1E1E1E;
    --text-primary: #FFFFFF;
    --text-secondary: #A1A1AA;
    --text-muted: #6B7280;
    --border-color: #2D2D2D;
    --accent: #FCD34D;
    --text-on-accent: #000000;
    --sidebar-bg: #0A0A0A;
}

/* Sidebar izquierdo */
#or-crm-app .sidebar,
#or-crm-app nav {
    background-color: #0A0A0A !important;
    width: 250px;
    padding: 1.5rem 0;
    border-right: 1px solid #2D2D2D;
}

/* Enlaces del sidebar */
#or-crm-app .sidebar a,
#or-crm-app nav a {
    display: flex !important;
    align-items: center;
    padding: 0.75rem 1.5rem !important;
    color: #A1A1AA !important;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
    border: none !important;
    background: transparent !important;
}

/* Dashboard activo */
#or-crm-app .sidebar a.active,
#or-crm-app nav a.active,
#or-crm-app .sidebar a[href*="dashboard"],
#or-crm-app nav a[href*="dashboard"] {
    background-color: #FCD34D !important;
    color: #000000 !important;
    font-weight: 600;
    border-radius: 8px;
    margin: 0 1rem;
}

#or-crm-app .sidebar a:hover,
#or-crm-app nav a:hover {
    background-color: #1F1F1F !important;
    color: #FFFFFF !important;
}

/* Iconos del sidebar */
#or-crm-app .sidebar a::before,
#or-crm-app nav a::before {
    content: '';
    width: 20px;
    height: 20px;
    margin-right: 0.75rem;
    display: inline-block;
}

/* Área principal del contenido */
#or-crm-app .main-content,
#or-crm-app main {
    flex: 1;
    background-color: #0F0F0F !important;
    padding: 2rem;
    overflow-y: auto;
}

/* Header del dashboard */
#or-crm-app .dashboard-header,
#or-crm-app h1 {
    margin-bottom: 2rem;
}

#or-crm-app h1 {
    font-size: 2rem !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    margin: 0 0 0.5rem 0 !important;
}

#or-crm-app .dashboard-subtitle,
#or-crm-app h1 + p {
    color: #A1A1AA !important;
    font-size: 1rem;
    margin: 0 0 2rem 0;
}

/* Grid de métricas */
#or-crm-app .metrics-grid,
#or-crm-app .stats-grid,
#or-crm-app .dashboard-stats {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1.5rem !important;
    margin-bottom: 2rem !important;
}

/* Cards de métricas */
#or-crm-app .metric-card,
#or-crm-app .stat-card,
#or-crm-app .dashboard-card {
    background-color: #1E1E1E !important;
    border: 1px solid #2D2D2D !important;
    border-radius: 12px !important;
    padding: 1.5rem !important;
    position: relative;
    overflow: hidden;
}

#or-crm-app .metric-card::before,
#or-crm-app .stat-card::before,
#or-crm-app .dashboard-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #FCD34D 0%, #FBBF24 100%);
}

/* Títulos de las métricas */
#or-crm-app .metric-card h3,
#or-crm-app .stat-card h3,
#or-crm-app .dashboard-card h3 {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: #A1A1AA !important;
    margin: 0 0 1rem 0 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Valores de las métricas */
#or-crm-app .metric-card .value,
#or-crm-app .stat-card .value,
#or-crm-app .dashboard-card .value {
    font-size: 2.25rem !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    margin: 0 0 0.5rem 0 !important;
}

/* Cambios/estadísticas adicionales */
#or-crm-app .metric-card .change,
#or-crm-app .stat-card .change,
#or-crm-app .dashboard-card .change {
    font-size: 0.875rem !important;
    color: #A1A1AA !important;
}

/* Layout principal con sidebar derecho */
#or-crm-app .dashboard-layout {
    display: grid !important;
    grid-template-columns: 1fr 300px !important;
    gap: 2rem !important;
}

/* Perfil del agente */
#or-crm-app .agent-profile,
#or-crm-app .profile-section {
    background-color: #1E1E1E !important;
    border: 1px solid #2D2D2D !important;
    border-radius: 12px !important;
    padding: 2rem !important;
    position: relative;
    overflow: hidden;
    margin-bottom: 2rem !important;
}

#or-crm-app .agent-profile h2,
#or-crm-app .profile-section h2 {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    margin: 0 0 0.25rem 0 !important;
}

#or-crm-app .agent-profile h3,
#or-crm-app .profile-section h3 {
    font-size: 1rem !important;
    color: #A1A1AA !important;
    margin: 0 0 1rem 0 !important;
    font-weight: 500 !important;
}

/* Avatar del agente */
#or-crm-app .agent-avatar,
#or-crm-app .profile-avatar {
    width: 80px !important;
    height: 80px !important;
    border-radius: 50% !important;
    border: 3px solid #FCD34D !important;
    margin-bottom: 1rem !important;
    object-fit: cover;
}

/* Sidebar derecho - Acciones Rápidas */
#or-crm-app .quick-actions,
#or-crm-app .actions-sidebar {
    background-color: #1E1E1E !important;
    border: 1px solid #2D2D2D !important;
    border-radius: 12px !important;
    padding: 1.5rem !important;
}

#or-crm-app .quick-actions h2,
#or-crm-app .actions-sidebar h2 {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    margin: 0 0 1.5rem 0 !important;
}

/* Botones de acción rápida */
#or-crm-app .quick-action-btn,
#or-crm-app .action-btn {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    padding: 1rem !important;
    background-color: #0F0F0F !important;
    border: 1px solid #2D2D2D !important;
    border-radius: 8px !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    margin-bottom: 0.75rem !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

#or-crm-app .quick-action-btn:hover,
#or-crm-app .action-btn:hover {
    background-color: #2A2A2A !important;
    transform: translateY(-1px) !important;
}

/* Botón principal destacado */
#or-crm-app .primary-action-btn,
#or-crm-app .btn-primary {
    background-color: #FCD34D !important;
    color: #000000 !important;
    font-weight: 600 !important;
    border: none !important;
}

#or-crm-app .primary-action-btn:hover,
#or-crm-app .btn-primary:hover {
    background-color: #FBBF24 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(252, 211, 77, 0.3) !important;
}

/* Responsividad */
@media (max-width: 1024px) {
    #or-crm-app .dashboard-layout {
        grid-template-columns: 1fr !important;
    }
    
    #or-crm-app .metrics-grid,
    #or-crm-app .stats-grid,
    #or-crm-app .dashboard-stats {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 768px) {
    #or-crm-app .sidebar,
    #or-crm-app nav {
        width: 200px !important;
    }
    
    #or-crm-app .metrics-grid,
    #or-crm-app .stats-grid,
    #or-crm-app .dashboard-stats {
        grid-template-columns: 1fr !important;
    }
}

/* Clases de utilidad forzadas */
#or-crm-app .text-white { color: #FFFFFF !important; }
#or-crm-app .text-gray { color: #A1A1AA !important; }
#or-crm-app .bg-dark { background-color: #1E1E1E !important; }
#or-crm-app .bg-darker { background-color: #0F0F0F !important; }
#or-crm-app .border-gray { border-color: #2D2D2D !important; }

/* =============================================================== */
/* FIN: ESTILOS ESPECÍFICOS PARA EL DASHBOARD                      */
/* =============================================================== */